:root {
  color-scheme: light;
  --font-display: "Mulish", system-ui, sans-serif;
  --font-body: "Open Sans", system-ui, sans-serif;
  --font-readable: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-note: "Caveat", cursive;
  /* Corpo / Claro palette (approved 2026-08-02). --ink and --plum-2 come
     directly from the reference swatches (#2A1C59, #6C45C6); --plum and
     --ink-soft are derived mixes of those two so every purple in the light
     theme stays inside the same family instead of introducing new hues.
     --lavender/--line reuse the two lightest tinted swatches. */
  --ink: #2a1c59;
  --ink-soft: #442c85;
  --plum: #3e287a;
  --plum-2: #6c45c6;
  --lavender: #e4d8ff;
  --cream: #fbf8ff;
  --paper: #f1eafe;
  --line: #ede5ff;
  --gold: #e6a93f;
  --rose: #f9edf1;
  --shadow: 0 22px 55px rgba(61, 35, 85, 0.1);
  --shadow-soft: 0 12px 28px rgba(61, 35, 85, 0.08);
  --radius: 10px;
  --max: 1320px;
  --step: 1;
  --accessibility-text-scale: 1;
  --base-size: calc(15px + (var(--step) - 1) * 2px);
  /* Fallback only — app.js measures the real header element (ResizeObserver)
     and keeps this in sync so the intro never gaps or hides behind it,
     including when text-size/readable-font preferences change its height. */
  --header-height: 86px;

  /* Hero / Escuro palette (approved 2026-08-02) — deliberately separate
     from the light-theme tokens above. Only used within .hero,
     .hero-transition and .spark-frame; the rest of the page's light theme
     is untouched. --hero-navy-0/--hero-violet-1/--hero-violet-2/
     --hero-magenta come directly from the reference swatches
     (#0B1026, #171A3A, #2B2160, #F35BB5); --hero-magenta-soft and
     --hero-magenta-text are derived mixes of that magenta so every accent
     stays inside the same family. --hero-violet-accent (#8D5CFF) is the
     fifth reference swatch, used as a second vivid accent alongside
     magenta. Gold is intentionally NOT part of this palette — the hero
     still reuses the site's existing --gold token where an accent outside
     the purple/magenta family is needed (e.g. focus outlines). */
  --hero-navy-0: #0b1026;
  --hero-violet-1: #171a3a;
  --hero-violet-2: #2b2160;
  --hero-magenta: #f35bb5;
  --hero-magenta-soft: #ad4797;
  --hero-magenta-text: #f794cf;
  --hero-violet-accent: #8d5cff;
  --hero-ink: #f4eefb;
  --hero-ink-soft: #cabbdc;
  --hero-line: rgba(244, 238, 251, 0.16);

  /* Two extra accents for the SPARK stage illustration (R and K), derived
     from --hero-violet-accent and --hero-magenta mixed toward
     --hero-violet-2, so all five principles (S, P, A, R, K) stay inside
     this same palette rather than introducing new hues. */
  --spark-accent-r: #7e53e7;
  --spark-accent-k: #d552a8;
}

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

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 18% 5%, rgba(239, 227, 246, 0.9), transparent 24rem),
    radial-gradient(circle at 88% 14%, rgba(235, 190, 90, 0.22), transparent 20rem),
    var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: calc(var(--base-size) * var(--accessibility-text-scale));
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}

body[data-dark="true"] {
  color-scheme: dark;
  --ink: #fff8ef;
  --ink-soft: #ded0e9;
  --plum: #f2defd;
  --plum-2: #c69be5;
  --lavender: #432a57;
  --cream: #21142d;
  --paper: #2d1c3b;
  --line: #755a88;
  --gold: #f0c96a;
  --shadow: 0 22px 55px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.26);
}

body[data-dark="true"] {
  background:
    radial-gradient(circle at 18% 5%, rgba(108, 69, 198, 0.18), transparent 24rem),
    radial-gradient(circle at 88% 14%, rgba(230, 169, 63, 0.12), transparent 20rem),
    var(--cream);
}

body[data-dark="true"] :is(.about-page, .article-hub, .article-page, .framework-page) {
  background:
    linear-gradient(90deg, rgba(255, 248, 239, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(240, 201, 106, 0.04) 1px, transparent 1px),
    var(--cream);
}

body[data-dark="true"] :is(.about-hero-card, .about-proof-grid article, .learning-lab-grid article, .article-card, .article-post-hero, .framework-card, .framework-step) {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-color: var(--line);
}

body[data-dark="true"] .learning-lab {
  background: color-mix(in srgb, var(--paper) 70%, transparent);
}

body[data-dark="true"] :is(.site-header, .site-header[data-elevated="true"]) {
  background: rgba(33, 20, 45, 0.92);
  border-color: rgba(255, 248, 239, 0.14);
}

body[data-contrast="true"] {
  --ink: #000;
  --ink-soft: #111;
  --plum: #000;
  --plum-2: #000;
  --lavender: #fff;
  --cream: #fff;
  --paper: #fff;
  --line: #000;
  --gold: #674200;
  --shadow: none;
  --shadow-soft: none;
}

body[data-contrast="true"] .case-highlight,
body[data-contrast="true"] .case-system-core {
  background: #000;
}

body[data-readable-font="true"] {
  font-family: var(--font-readable);
}

body[data-spacing="true"] {
  line-height: 1.85;
  letter-spacing: 0.02em;
  word-spacing: 0.08em;
}

body[data-no-motion="true"] *,
body[data-no-motion="true"] *::before,
body[data-no-motion="true"] *::after,
body.accessibility-focus-mode *,
body.accessibility-focus-mode *::before,
body.accessibility-focus-mode *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
}

body.accessibility-focus-mode :is(.hero-visual-placeholder, .case-visual::before, .case-visual::after) {
  opacity: 0.2 !important;
  filter: saturate(0.45);
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--plum);
  font-weight: 800;
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 3px solid var(--plum-2);
  outline-offset: 4px;
}

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

.skip-link {
  background: var(--plum);
  color: #fff;
  left: 1rem;
  padding: 0.8rem 1rem;
  position: fixed;
  top: 1rem;
  transform: translateY(-160%);
  z-index: 1000;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
    align-items: center;
    display: flex;
    gap: 2rem;
    justify-content: space-around;
    /* margin: 0 auto; */
    /* max-width: var(--max); */
    min-height: 86px;
    padding: 0 1.25rem;
    position: sticky;
    top: 0;
    transform: translateY(0);
    transition:
      opacity 0.55s ease,
      transform 0.55s ease,
      background-color 0.22s ease,
      border-color 0.22s ease,
      box-shadow 0.22s ease;
    z-index: 100;
}

body.intro-active .site-header,
body.intro-active .accessibility-fab {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

body.intro-active .site-header {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateY(-14px);
}

body.intro-revealing .site-header {
  animation: introHeaderReveal 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

body.intro-active {
  overflow: hidden;
}

@keyframes introHeaderReveal {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.site-header[data-elevated="true"] {
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(61, 35, 85, 0.1);
}

/* Header, while any part of #intro or .hero is still below it — isolated
   from the light/dark theme toggle. Both sections are fixed dark scenes
   regardless of theme (same idea as .cta's hardcoded dark colors), so the
   header tints to match whichever one is behind it instead of showing the
   page's light background through a transparent header (that gap was the
   reported "white stripe"). One shared class covers both sections so there
   is no seam at the intro→hero handoff. Toggled by app.js based on scroll
   position, not by data-elevated.

   The .primary-nav/.button-ghost text-color and fill overrides are guarded
   with :not([data-open="true"]) because the mobile nav dropdown (≤820px,
   see the .primary-nav[data-open="true"] rule below) is its own opaque
   var(--paper) popup, not part of the transparent header bar — forcing
   white text into it would fail contrast against that light background.
   The header bar itself (logo, hamburger icon, Resume button when the menu
   is closed) still gets the dark treatment either way. */
.site-header.site-header-on-dark {
  background: rgba(10, 6, 22, 0.55);
  backdrop-filter: blur(14px);
  border-bottom-color: transparent;
}

.site-header.site-header-on-dark .primary-nav:not([data-open="true"]) a,
.site-header.site-header-on-dark .brand strong,
.site-header.site-header-on-dark .brand small {
  color: #fff8ef;
}

.site-header.site-header-on-dark .primary-nav:not([data-open="true"]) .button-ghost {
  background: rgba(255, 248, 239, 0.12);
  border-color: rgba(255, 248, 239, 0.4);
  color: #fff8ef;
}

.site-header.site-header-on-dark .nav-toggle span[aria-hidden="true"],
.site-header.site-header-on-dark .nav-toggle span[aria-hidden="true"]::before,
.site-header.site-header-on-dark .nav-toggle span[aria-hidden="true"]::after {
  background: #fff8ef;
}

/* logo-site.png is dark plum/lavender on transparent — invisible on a dark
   header. Flattening to white via filter (not editing the source file, per
   "do not modify logo-site.png itself") keeps it legible; loses the two-tone
   brand color while on a dark section only. Flagging for visual review — a
   dedicated light-on-dark logo file would be a cleaner long-term fix. */
.site-header.site-header-on-dark .brand-logo {
  filter: brightness(0) invert(1);
}

/* High-contrast mode + dark header only: the site-wide focus token
   (var(--gold)) becomes #674200 in high-contrast mode, tuned for contrast
   against that mode's white page background. Against this header's dark
   background it drops to ~2:1, below the 3:1 UI-component minimum. This
   rule only overrides the outline color/offset for :focus-visible elements
   inside the dark header while high-contrast mode is active — it does not
   touch --gold or the global :focus-visible rule used everywhere else on
   the site. #fff8ef matches the header's existing dark-state text/icon
   color (~19:1 against the header background) so it stays visually
   consistent with the rest of the dark-header treatment. */
body[data-contrast="true"] .site-header.site-header-on-dark :focus-visible {
  outline-color: #fff8ef;
  outline-offset: 4px;
}

/* Same fix as the dark header above, applied to the SPARK frame: in
   high-contrast mode --gold becomes #674200, tuned for contrast against
   that mode's white page background. Against .spark-frame's fixed dark
   hero gradient it drops to ~2:1, below the 3:1 UI-component minimum.
   #fff8ef matches the same light tone already used for the header fix. */
body[data-contrast="true"] .spark-frame :focus-visible {
  outline-color: #fff8ef;
  outline-offset: 4px;
}

.brand {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  gap: 0.72rem;
  text-decoration: none;
}

.brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.05;
}

.brand small {
  color: var(--ink-soft);
  display: block;
  font-size: 0.66rem;
  font-weight: 800;
}

.brand-logo {
  display: block;
  flex: 0 0 auto;
  /* height: 42px; */
  object-fit: contain;
  width: 152px;
}

.brand-mark {
  display: grid;
  grid-template-columns: repeat(2, 18px);
  height: 42px;
  place-content: center;
  width: 42px;
}

.brand-mark span {
  background: var(--plum);
  border-radius: 90% 12% 90% 16%;
  display: block;
  height: 20px;
  width: 18px;
}

.brand-mark span:nth-child(2),
.brand-mark span:nth-child(3) {
  transform: rotate(90deg);
}

.primary-nav {
  align-items: center;
  display: flex;
  gap: clamp(1.15rem, 2.8vw, 2.4rem);
}

.primary-nav a {
  align-items: center;
  display: inline-flex;
  min-height: 44px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  padding: 0.42rem 0;
  position: relative;
  text-decoration: none;
}

.primary-nav a::after {
  background: var(--gold);
  border-radius: 999px;
  bottom: -0.34rem;
  content: "";
  height: 3px;
  left: 0;
  opacity: 0;
  position: absolute;
  transform: scaleX(0.45);
  transform-origin: left;
  transition: opacity 0.18s ease, transform 0.18s ease;
  width: 100%;
}

.primary-nav a:is(:hover, :focus-visible, .is-active, [aria-current])::after {
  opacity: 1;
  transform: scaleX(1);
}

.primary-nav a:is(.is-active, [aria-current]) {
  color: var(--plum-2);
}

.nav-toggle {
  background: transparent;
  border: 0;
  display: none;
  height: 44px;
  width: 44px;
}

.nav-toggle span[aria-hidden="true"],
.nav-toggle span[aria-hidden="true"]::before,
.nav-toggle span[aria-hidden="true"]::after {
  background: var(--ink);
  content: "";
  display: block;
  height: 3px;
  width: 25px;
}

.nav-toggle span[aria-hidden="true"]::before {
  transform: translateY(-8px);
}

.nav-toggle span[aria-hidden="true"]::after {
  transform: translateY(5px);
}

.section-band {
  scroll-margin-top: calc(var(--header-height) + 1rem);
  margin-inline: auto;
  max-width: var(--max);
  padding: clamp(2.35rem, 5vw, 4.7rem) 1.25rem;
}

/* ==========================================================================
   InteractiveVisual — shared pattern for contained visuals (project cards,
   the intro placeholder, and any future Rive drop-in). A fixed-ratio box so
   swapping the static image for a Rive canvas later never shifts layout.
   ========================================================================== */
.interactive-visual {
  overflow: hidden;
  position: relative;
}

.interactive-visual .iv-default,
.interactive-visual .iv-hover {
  display: block;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  width: 100%;
}

.interactive-visual .iv-hover {
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.interactive-visual .iv-rive-canvas {
  inset: 0;
  position: absolute;
}

/* Hover/focus crossfade only ever runs when a hover image is actually supplied
   (data-has-hover="true") and the device has real hover capability, so touch
   never depends on a hover-only state. Nothing here activates yet — every
   current instance is data-has-hover="false" until real hover assets exist. */
@media (hover: hover) and (pointer: fine) {
  .interactive-visual[data-has-hover="true"]:hover .iv-default,
  .interactive-visual[data-has-hover="true"]:focus-within .iv-default {
    transform: scale(1.02);
  }

  .interactive-visual[data-has-hover="true"]:hover .iv-hover,
  .interactive-visual[data-has-hover="true"]:focus-within .iv-hover {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .interactive-visual .iv-default,
  .interactive-visual .iv-hover {
    transition: none !important;
  }
}

/* ==========================================================================
   RiveIntroPlaceholder — TEMPORARY PNG-based scroll-driven prototype.
   Three static frames (cena 01/02/03.png) crossfade based on scroll
   position, computed in app.js and applied only as CSS custom properties
   (--scene-1-opacity / -2 / -3 / --intro-release). No Rive yet — the
   .iv-rive-canvas mount point below is present but inert. No third-party
   scroll library, no page transform/scale, native scroll only.

   Section height = scroll "travel" distance for the three stages; the
   .rive-intro-sticky child pins for that entire distance, then releases
   naturally into the existing, unmodified hero right after it in the DOM.
   ========================================================================== */
.rive-intro {
  background: #171126;
  height: 100vh;
  height: 100dvh;
}

.rive-intro-sticky {
  overflow: hidden;
  position: relative;
  top: 0;
  height: 100vh;
  height: 100dvh;
}

.rive-intro-visual {
  /* Dark background matching the scene artwork, not a light "card" — so any
     letterboxed space from object-fit: contain reads as intentional. */
  background: #171126;
  height: 100%;
  opacity: var(--intro-release, 1);
  position: relative;
  transition: opacity 0.1s linear;
  width: 100%;
}

.intro-scene {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  position: absolute;
  transition: opacity 0.12s linear;
  width: 100%;
}

/* Per-scene opacity, each with an inert CSS-only fallback: if JS never runs,
   scene 1 stays fully visible and scenes 2/3 stay hidden — never a blank box. */
.intro-scene-1 {
  object-position: center;
  opacity: var(--scene-1-opacity, 1);
}

.intro-scene-2 {
  object-position: center;
  opacity: var(--scene-2-opacity, 0);
}

.intro-scene-3 {
  object-position: center;
  opacity: var(--scene-3-opacity, 0);
}

.iv-rive-canvas {
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.rive-intro-visual[data-rive-loaded="true"] .iv-rive-canvas {
  opacity: 1;
}

.rive-intro-visual[data-rive-loaded="true"] .intro-scene {
  opacity: 0;
}

.rive-intro-complete .rive-intro-visual[data-rive-final-motion="css"] .iv-rive-canvas {
  animation: introFinalFloat 5.8s ease-in-out infinite;
  transform-origin: 52% 52%;
}

@keyframes introFinalFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1.002);
  }

  50% {
    transform: translate3d(0, -10px, 0) scale(1.004);
  }
}

.skip-intro-link {
  bottom: clamp(1rem, 3vw, 1.75rem);
  position: absolute;
  right: clamp(1.5rem, 4vw, 3.25rem);
  z-index: 2;
}

.rive-intro-complete .skip-intro-link {
  display: none;
}

@media (max-width: 1120px) {
  .rive-intro {
    height: 100vh;
    height: 100dvh;
  }
}

@media (max-width: 520px) {
  .rive-intro {
    height: 100vh;
    height: 100dvh;
  }

  .skip-intro-link {
    bottom: 0.75rem;
    right: 0.75rem;
    min-height: 44px;
    padding: 0.6rem 0.9rem;
  }
}

/* Reduced motion: one static scene, normal document flow, no sticky, no
   crossfade. Belt-and-suspenders alongside the JS check in app.js — this
   alone is enough even if JS fails to run. Duplicated (not combined via a
   shared selector) so it responds to both the OS-level media query AND
   this site's own manual "Reduce motion" toggle in the accessibility
   panel (body[data-no-motion="true"]) — a media query alone would miss the
   manual toggle, which sets a body attribute, not the OS preference. */
@media (prefers-reduced-motion: reduce) {
  .rive-intro {
    height: auto;
  }

  .rive-intro-sticky {
    height: auto;
    position: static;
  }

  .rive-intro-visual {
    height: auto;
    opacity: 1 !important;
  }

  .intro-scene {
    position: relative;
  }

  .intro-scene-1 {
    opacity: 1 !important;
  }

  .intro-scene-2,
  .intro-scene-3 {
    display: none;
  }
}

body[data-no-motion="true"] .rive-intro {
  height: auto;
}

body[data-no-motion="true"] .rive-intro-sticky {
  height: auto;
  position: static;
}

body[data-no-motion="true"] .rive-intro-visual {
  height: auto;
  opacity: 1 !important;
}

body[data-no-motion="true"] .intro-scene {
  position: relative;
}

body[data-no-motion="true"] .intro-scene-1 {
  opacity: 1 !important;
}

body[data-no-motion="true"] .intro-scene-2,
body[data-no-motion="true"] .intro-scene-3 {
  display: none;
}

/* ==========================================================================
   Hero — dark navy/violet/magenta system. .hero is intentionally full-bleed
   (not .section-band itself); .hero-inner carries the max-width/padding via
   .section-band so the dark background spans the full viewport while the
   text/visual content stays aligned with the rest of the page.
   ========================================================================== */
.hero {
  background:
    radial-gradient(circle at 78% 68%, rgba(217, 79, 140, 0.18), transparent 42%),
    linear-gradient(155deg, var(--hero-navy-0) 0%, var(--hero-violet-1) 55%, var(--hero-violet-2) 100%);
  overflow: hidden;
  position: relative;
}

.hero::before {
  background-image:
    radial-gradient(1.6px 1.6px at 10% 20%, rgba(244, 238, 251, 0.5), transparent),
    radial-gradient(1.4px 1.4px at 40% 12%, rgba(244, 238, 251, 0.45), transparent),
    radial-gradient(1.6px 1.6px at 78% 22%, rgba(244, 238, 251, 0.45), transparent),
    radial-gradient(1.2px 1.2px at 20% 75%, rgba(244, 238, 251, 0.3), transparent);
  content: "";
  inset: 0;
  opacity: 0.9;
  pointer-events: none;
  position: absolute;
}

.hero-inner {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: clamp(2rem, 5vw, 4rem);
  position: relative;
  z-index: 1;
}

.hero-copy {
  flex: 1 1 560px;
  max-width: 820px;
}
.hero-actions, .hero-copy .pill-list {
    justify-content: flex-start;
    display: flex;
}

.hero-art {
  flex: 1 1 440px;
  width: min(620px, 100%);
}

.eyebrow {
  color: var(--plum-2);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0;
}

h1 {
  font-size: clamp(2.65rem, 5.15vw, 4.7rem);
  max-width: 720px;
}

h1 {
  max-width: 660px;
}

#hero-title {
  font-size: clamp(2.05rem, 3.5vw, 3.15rem);
  line-height: 1.18;
  color: var(--ink);
}

.hero-title-script {
  color: var(--plum-2);
  font-family: var(--font-note);
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.12em;
}

h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
}

h3 {
  font-size: clamp(1rem, 1.28vw, 1.2rem);
}

p {
  margin: 0;
}

.hero-tagline {
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  margin-top: 1.25rem;
  max-width: 520px;
}

.hero-actions, .pill-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.72rem;
    margin-top: 1.65rem;
    justify-content: flex-start;
}

.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 900;
  justify-content: center;
  min-height: 46px;
  padding: 0.75rem 1.22rem;
  text-decoration: none;
}

.button-primary {
  background: var(--plum);
  color: #fff;
}

.button-primary:hover {
  background: var(--plum-2);
  color: #fff;
}

.button-secondary,
.button-ghost,
.button-small {
  background: var(--paper);
  border-color: var(--line);
  color: var(--plum);
}

.button-secondary::after,
.button-primary::after {
  content: " →";
  margin-left: 0.25rem;
}

.pill-list,
.case-tags {
  list-style: none;
  padding: 0;
}

.pill-list li,
.case-tags li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.38rem 0.72rem;
}

/* ---- Hero copy, scoped dark overrides (site-wide light-theme rules for
   these same classes are defined elsewhere and stay untouched) ---- */
.hero .eyebrow {
  color: var(--hero-magenta-text);
}

.hero #hero-title {
  color: var(--hero-ink);
}

.hero .hero-title-script {
  color: var(--gold);
  text-decoration-color: var(--hero-magenta);
}

.hero .hero-tagline {
  color: var(--hero-ink-soft);
}

.hero .pill-list li {
  background: rgba(244, 238, 251, 0.06);
  border-color: var(--hero-line);
  color: var(--hero-ink-soft);
}

.hero .button-primary {
  background: var(--hero-magenta-soft);
}

.hero .button-primary:hover {
  background: color-mix(in srgb, var(--hero-magenta-soft) 82%, black);
}

.hero .button-secondary {
  background: rgba(244, 238, 251, 0.06);
  border-color: var(--hero-line);
  color: var(--hero-ink);
}

/* ==========================================================================
   Hero visual — temporary placeholder. See the FINAL CHARACTER ARTWORK
   REQUIRED comment in index.html for what is temporary vs. structural.
   .hero-visual-frame owns sizing (fixed aspect-ratio) and never changes when
   the placeholder is swapped for real artwork or a Rive canvas.
   ========================================================================== */
.hero-visual-frame {
  aspect-ratio: 5 / 4;
  position: relative;
  width: 100%;
}

/* No longer paints its own background — it shows the shared .hero
   background (including the magenta glow positioned for the future
   character) through it, so this area reads as part of the hero rather
   than a separate card sitting on top of it. */
.hero-visual-placeholder {
  height: 100%;
  position: relative;
  width: 100%;
}

/* Reserved character silhouette — simple two-part shape (head + shoulders),
   no facial or anatomical detail. Placed lower-right per the approved
   composition, sized down so it stays a quiet background presence rather
   than competing with the headline. This entire element is deleted when
   real artwork lands. */
.hero-visual-silhouette {
  bottom: 0;
  height: 62%;
  opacity: 0.85;
  position: absolute;
  right: 10%;
  width: 36%;
}

.hero-visual-silhouette::before {
  aspect-ratio: 1;
  background: linear-gradient(200deg, #34204f 0%, #170e24 75%);
  border-radius: 50%;
  content: "";
  position: absolute;
  right: 18%;
  top: 4%;
  width: 34%;
}

.hero-visual-silhouette::after {
  background: linear-gradient(205deg, #2c1a44 0%, #150c20 80%);
  border-radius: 40% 40% 12% 12% / 55% 55% 8% 8%;
  bottom: 0;
  content: "";
  height: 70%;
  position: absolute;
  right: 0;
  width: 100%;
}

.hero-rive-canvas {
  inset: 0;
  position: absolute;
}

/* ==========================================================================
   Hero-to-SPARK transition — sits between .hero and the section that
   follows it (impact stats, then SPARK). Dark at the top, easing into the
   page's light cream tone, with a sparse scatter continuing the hero's
   star motif so the handoff doesn't read as two unrelated sections.
   ========================================================================== */
.hero-transition {
  height: clamp(56px, 8vw, 96px);
  position: relative;
  background: linear-gradient(180deg, var(--hero-violet-2) 0%, var(--cream) 100%);
}

.hero-transition::before {
  background-image:
    radial-gradient(1.6px 1.6px at 8% 30%, rgba(217, 79, 140, 0.5), transparent),
    radial-gradient(1.2px 1.2px at 22% 55%, rgba(230, 169, 63, 0.55), transparent),
    radial-gradient(1.8px 1.8px at 40% 20%, rgba(244, 238, 251, 0.45), transparent),
    radial-gradient(1.2px 1.2px at 58% 50%, rgba(217, 79, 140, 0.4), transparent),
    radial-gradient(1.6px 1.6px at 76% 26%, rgba(230, 169, 63, 0.5), transparent),
    radial-gradient(1.2px 1.2px at 90% 55%, rgba(244, 238, 251, 0.35), transparent);
  content: "";
  inset: 0;
  opacity: 0.8;
  position: absolute;
}

.impact-strip {
  display: grid;
  gap: 1.35rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 1rem;
}

.impact-strip article,
.case-card,
.proof-grid article,
.skills-grid article,
.playground,
.about,
.about-preview,
.accessibility-panel {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.impact-strip article {
  min-height: 160px;
  padding: 1.35rem;
}

.metric-icon {
  align-items: center;
  background: var(--lavender);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--plum);
  display: inline-flex;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 900;
  height: 50px;
  justify-content: center;
  margin-bottom: 0.75rem;
  width: 50px;
}

.impact-strip h2 {
  font-size: 1.25rem;
  margin-bottom: 0.35rem;
}

.impact-strip p,
.case-card p,
.proof-grid p,
.skills-grid p,
.playground p,
.about p,
.about-preview-copy p {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.framework {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Compact top intro — a dedicated class (not the shared .section-intro,
   which .proof also relies on) so this section can read as a short
   full-width block instead of a tall side column. */
.framework-intro {
  max-width: 680px;
}

.framework-intro p:not(.eyebrow) {
  color: var(--ink-soft);
  margin: 0.85rem 0 0;
}

.framework-intro p:not(.eyebrow) + p:not(.eyebrow) {
  margin-top: 0.6rem;
}

.framework-intro p.framework-definition {
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.4;
}

.framework-explanation {
  font-size: 0.92rem;
}

/* Concept 1 — Interactive Illustrated Stage. One frame, in the hero's dark
   purple/navy palette, holds both the illustration and the controls — a
   single coherent piece rather than a light stage next to a plain sidebar.
   Desktop: stage (58%) beside a narrow column (42%) with the selector list
   and the compact panel. Tablet/mobile breakpoints further down stack the
   stage above the controls; the 5-across selector grid stays unchanged at
   every width, so every principle is always visible and directly
   selectable — never a carousel or a hidden set. */
.spark-frame {
  align-items: start;
  background: linear-gradient(160deg, var(--hero-navy-0) 0%, var(--hero-violet-1) 55%, var(--hero-violet-2) 100%);
  border-radius: 20px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 0;
  grid-template-columns: 58% 1fr;
  overflow: hidden;
}

.spark-stage {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.spark-stage-visual {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

/* Same lesson as .spark-panel[hidden] above: don't rely on the UA
   stylesheet's [hidden] { display: none; } reaching into embedded SVG on
   its own — make it explicit so the stage scene reliably swaps every time
   a different letter is selected, in every browser. */
.spark-stage-scene[hidden] {
  display: none;
}

.spark-stage-art {
  display: block;
  height: auto;
  width: 100%;
}

/* Rive mount point — hidden and unused for now (see the code comment
   above this section). Sized to match .spark-stage-art so the swap is a
   drop-in replacement later, not a layout change. */
.spark-stage-rive-canvas {
  height: 100%;
  position: absolute;
  inset: 0;
  width: 100%;
}

.spark-stage-caption {
  color: var(--hero-ink-soft);
  font-size: 0.78rem;
  margin: 0.75rem 0 0;
}

.spark-controls {
  border-left: 1px solid var(--hero-line);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Selector list — role="tablist". A row of five small square tiles
   (icon + letter) stays legible at every width, so it never needs to
   collapse into a carousel or a 2-column reflow. Each tile's full name is
   still available to assistive tech via a visually hidden span
   (.spark-tab-title.sr-only); sighted users see the letter, and the full
   title appears immediately in the compact panel once a tile is chosen. */
.spark-tablist {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.spark-tab {
  align-items: center;
  background: rgba(244, 238, 251, 0.06);
  border: 1px solid var(--hero-line);
  border-radius: 10px;
  color: var(--hero-ink-soft);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  gap: 0.3rem;
  padding: 0.6rem 0.3rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Every direct child is decorative label content — none of them are
   independently interactive. Forcing pointer-events: none guarantees a
   click anywhere on the tile (including directly on the icon) is always
   handled by the button itself. */
.spark-tab > * {
  pointer-events: none;
}

.spark-tab:hover {
  border-color: var(--hero-magenta-text);
}

/* Active state uses two non-color cues in addition to the lighter fill: a
   visible border-color change (to the same magenta used for the "A"
   illustration accent) plus an inset ring — so the selection reads
   correctly even without color vision. Driven directly by aria-selected,
   no separate JS needed. */
.spark-tab[aria-selected="true"] {
  background: rgba(244, 238, 251, 0.14);
  border-color: var(--hero-magenta-text);
  box-shadow: inset 0 0 0 1px var(--hero-magenta-text);
  color: var(--hero-ink);
}

.spark-tab-icon {
  color: var(--hero-ink-soft);
  display: block;
  height: 18px;
  width: 18px;
}

.spark-tab[aria-selected="true"] .spark-tab-icon {
  color: var(--hero-magenta-text);
}

.spark-tab-letter {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 900;
}

/* Compact panel — title, one short sentence, project link, on the same
   dark surface as the rest of the frame. Switching tabs fades opacity in
   briefly (see app.js); the site's global prefers-reduced-motion rule and
   data-no-motion setting both collapse this transition to effectively
   instant already, so no extra gating is needed here. */
.spark-panel {
  transition: opacity 0.18s ease;
}

/* Without this, the hidden attribute has no visual effect: an author rule
   setting display on .spark-panel would otherwise have equal specificity
   to the browser's built-in [hidden] { display: none; } rule, and author
   rules always win ties over the UA stylesheet. This rule is more
   specific, so it correctly wins and actually hides the panel. */
.spark-panel[hidden] {
  display: none;
}

.spark-panel-title {
  color: var(--hero-ink);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.spark-panel-text {
  color: var(--hero-ink-soft);
  font-size: 0.92rem;
  margin: 0;
}

/* "Project" (A, confirmed) vs. "Potential project" (S, P, R, K — still
   provisional) — this label is the honest, visible signal that separates
   the one verified example from the four placeholders. The stage
   illustration itself stays conceptual for all five, so this text label is
   the only place that distinction is communicated now. */
.spark-panel-project-label {
  color: var(--hero-ink-soft);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0.85rem 0 0;
  text-transform: uppercase;
}

.spark-panel-project {
  color: var(--hero-ink);
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 800;
  margin-top: 0.2rem;
  text-decoration: none;
}

.spark-panel-project:hover {
  text-decoration: underline;
}

.framework-usage-note {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 1.5rem 0 1.25rem;
  
}

.section-heading {
  align-items: end;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.4rem;
}

.case-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.case-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    height: 44vh;
}

.case-visual {
  background:
    radial-gradient(circle at 45% 35%, rgba(83, 53, 117, 0.9), transparent 34%),
    linear-gradient(135deg, #221331, #68427e 54%, #f2d48a);
  border: 0;
  border-radius: 0;
  min-height: 160px;
  overflow: hidden;
  position: relative;
}

.case-visual::before,
.case-visual::after {
  content: "";
  position: absolute;
}

/* Real project imagery (e.g. Nebula's hero mockup) sits inside .case-visual
   as a <picture>/<img>, filling the same box the decorative ::before/::after
   patterns use for the still-placeholder cards. */
.case-visual picture {
  display: block;
  height: 100%;
  width: 100%;
}

.case-visual picture img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  width: 100%;
}

.visual-access::before {
  background: #5b327b;
  border-radius: 48% 48% 16px 16px;
  bottom: 18px;
  height: 90px;
  left: 33%;
  width: 66px;
}

.visual-access::after {
  background: #101018;
  border: 8px solid #f3e9f7;
  border-radius: 50%;
  bottom: 26px;
  height: 54px;
  right: 18%;
  width: 54px;
}

.visual-dashboard {
  background: #101722;
}

.visual-dashboard::before {
  background: repeating-linear-gradient(90deg, #2676dc 0 10px, transparent 10px 24px);
  bottom: 28px;
  height: 62px;
  left: 22px;
  opacity: 0.85;
  width: 118px;
}

.visual-dashboard::after {
  border: 3px solid #f0a94a;
  border-left-color: transparent;
  border-radius: 50%;
  height: 68px;
  right: 22px;
  top: 36px;
  width: 68px;
}

.visual-loan::before {
  background: var(--paper);
  border-radius: 26px;
  height: 78%;
  left: 22%;
  top: 10%;
  transform: rotate(-8deg);
  width: 38%;
}

.visual-loan::after {
  background: var(--paper);
  border-radius: 26px;
  height: 78%;
  right: 20%;
  top: 10%;
  transform: rotate(9deg);
  width: 38%;
}

.visual-nebula {
  background:
    radial-gradient(circle at 50% 45%, #ffcf76 0 5px, transparent 6px),
    radial-gradient(circle at 50% 50%, rgba(122, 66, 158, 0.2), transparent 20%),
    conic-gradient(from 120deg, #231032, #5b2d7f, #e1a14f, #231032);
}

.visual-content {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 237, 246, 0.94)),
    linear-gradient(135deg, #f8edf5, #5c3679);
}

.visual-content::before {
  background: #fff;
  border: 1px solid rgba(61, 35, 85, 0.16);
  border-radius: 10px;
  box-shadow:
    0 32px 0 #fff,
    0 64px 0 #fff,
    150px 0 0 #fff,
    150px 32px 0 #fff,
    150px 64px 0 #fff;
  height: 22px;
  left: 24px;
  top: 28px;
  width: 128px;
}

.visual-content::after {
  background: var(--plum);
  border-radius: 999px;
  bottom: 24px;
  height: 34px;
  right: 24px;
  width: 100px;
}

.visual-nebula::before {
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  height: 120px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-20deg);
  width: 120px;
}

.case-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
}

.case-role {
  color: var(--plum-2) !important;
  font-size: 0.64rem !important;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-top: auto;
}

.case-tags li {
  color: var(--plum);
  font-size: 0.65rem;
}

.button-small {
  display: none;
}

.proof {
  padding-top: 2.5rem;
}

.proof .section-intro {
  max-width: none;
}

.proof .section-intro h2 {
  display: none;
}

.proof-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.proof-grid article {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 112px;
  padding: 0 0 0 4.2rem;
  position: relative;
}

.proof-grid article::before {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--plum);
  content: "✦";
  display: flex;
  font-size: 1.35rem;
  height: 48px;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 48px;
}

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

.skills-grid article {
  padding: 1.5rem;
}

.skills-grid article span {
  align-items: center;
  background: var(--lavender);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--plum);
  display: inline-flex;
  font-size: 1.3rem;
  height: 46px;
  justify-content: center;
  margin-bottom: 0.85rem;
  width: 46px;
}

.skills-grid h3 {
  margin-bottom: 0.4rem;
}

.playground {
  align-items: start;
  background:
    linear-gradient(135deg, rgba(33, 18, 51, 0.94), rgba(61, 35, 85, 0.92)),
    var(--ink);
  border-color: rgba(255, 248, 239, 0.14);
  color: #fff8ef;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.25fr) auto;
}

.playground h2,
.playground p {
  color: #fff8ef;
}

.playground p:not(.eyebrow) {
  color: rgba(255, 248, 239, 0.76);
}

.home-article-strip {
  display: grid;
  gap: 0.75rem;
}

.home-article-strip a {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #fff8ef;
  display: grid;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  gap: 0.25rem;
  padding: 1rem;
  text-decoration: none;
}

.home-article-strip a:hover,
.home-article-strip a:focus-visible {
  background: rgba(255, 255, 255, 0.13);
}

.home-article-strip span {
  color: #f6d28a;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.playground .button {
  align-self: center;
  background: #f6d28a;
  color: #211233;
  justify-self: end;
}

/* ==========================================================================
   Articles
   ========================================================================== */
.article-hub,
.article-page {
  background:
    linear-gradient(90deg, rgba(108, 69, 198, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(183, 133, 47, 0.07) 1px, transparent 1px),
    #fffaf3;
  background-size: 64px 64px, 64px 64px, auto;
}

.article-hero {
  padding-top: clamp(7rem, 11vw, 10rem);
}

.article-hero h1,
.article-post-hero h1 {
  color: var(--ink);
  font-size: clamp(2.7rem, 7vw, 6rem);
  letter-spacing: 0;
  line-height: 0.98;
  max-width: 900px;
}

.article-hero p:not(.eyebrow),
.article-post-hero p {
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
  max-width: 720px;
}

.article-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 0;
}

.article-card {
  background: #ffffff;
  border: 1px solid rgba(108, 69, 198, 0.16);
  border-radius: 10px;
  box-shadow: 0 16px 34px rgba(61, 35, 85, 0.1);
  overflow: hidden;
}

.article-card--featured {
  grid-column: span 2;
}

@media (max-width: 760px) {
  .article-list { grid-template-columns: minmax(0, 1fr); }
  .article-card--featured { grid-column: auto; }
}

.article-card a {
  color: var(--ink);
  display: grid;
  gap: 0.75rem;
  height: 100%;
  padding: 1rem;
  text-decoration: none;
}

.article-card img {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.article-card span {
  color: var(--plum-2);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-card h2 {
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1.08;
}

.article-card p {
  color: var(--ink-soft);
}

.article-card:hover,
.article-card:focus-within {
  box-shadow: 0 24px 52px rgba(61, 35, 85, 0.18);
  transform: translateY(-2px);
}

.article-post-hero {
  margin-inline: auto;
  max-width: var(--max);
  padding: clamp(7rem, 11vw, 10rem) 1.25rem clamp(2rem, 5vw, 4rem);
}

.article-post-hero img {
  aspect-ratio: 21 / 9;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(61, 35, 85, 0.14);
  display: block;
  margin-top: 2rem;
  object-fit: cover;
  width: 100%;
}

.article-body {
  background: #ffffff;
  border-top: 1px solid var(--line);
  margin-inline: auto;
  max-width: none;
  padding: clamp(2rem, 5vw, 4rem) max(1.25rem, calc((100vw - 760px) / 2));
}

.article-body p,
.article-body li {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.75;
}

.article-body h2 {
  color: var(--ink);
  font-size: clamp(1.55rem, 2.4vw, 2.25rem);
  margin-top: 2rem;
}

/* ==========================================================================
   SPARK framework page
   ========================================================================== */
.framework-page {
  background:
    linear-gradient(90deg, rgba(108, 69, 198, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(230, 169, 63, 0.045) 1px, transparent 1px),
    #fffaf3;
  background-size: 80px 80px, 80px 80px, auto;
}

.framework-page-hero {
  background:
    linear-gradient(135deg, rgba(241, 234, 254, 0.78), rgba(255, 255, 255, 0.66)),
    #fffaf3;
  border-bottom: 1px solid rgba(108, 69, 198, 0.16);
  color: var(--ink);
  overflow: hidden;
  position: relative;
}

.framework-page-hero::after {
  display: none;
}

.framework-page-hero-inner {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.65fr);
  min-height: clamp(470px, 64vh, 620px);
  position: relative;
  z-index: 1;
}

.framework-page-hero h1,
.framework-page-hero p,
.framework-page-hero .eyebrow {
  color: var(--ink);
}

.framework-page-hero h1 {
  font-size: clamp(2.65rem, 5.1vw, 5.4rem);
  letter-spacing: 0;
  line-height: 0.98;
  max-width: 820px;
}

.framework-page-hero p:not(.eyebrow) {
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  margin-top: 1.35rem;
  max-width: 620px;
}

.framework-hero-note {
  align-self: center;
  background:
    linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.72));
  border: 1px solid rgba(108, 69, 198, 0.18);
  border-radius: 10px;
  box-shadow: 0 24px 54px rgba(61, 35, 85, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  min-height: 340px;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  position: relative;
}

.framework-hero-note::before {
  color: rgba(108, 69, 198, 0.07);
  content: "method";
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 900;
  left: 0.18em;
  letter-spacing: 0;
  line-height: 1;
  position: absolute;
  top: 0.2em;
}

.framework-hero-note span {
  color: var(--ink);
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 6.5vw, 6.2rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.framework-hero-note p {
  border-left: 3px solid var(--gold);
  color: var(--ink-soft);
  padding-left: 1rem;
  position: relative;
  z-index: 1;
}

.framework-why,
.spark-principles,
.framework-method,
.framework-case-map {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}

.framework-why h2,
.framework-method h2,
.framework-case-map h2 {
  font-size: clamp(1.9rem, 3.4vw, 3.4rem);
  letter-spacing: 0;
  line-height: 1.04;
  max-width: 820px;
}

.framework-why-grid,
.spark-principle-grid,
.framework-case-grid {
  display: grid;
  gap: 0;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.framework-why-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.framework-why-grid article,
.spark-principle-grid article,
.framework-case-grid a {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.framework-why-grid article {
  border-top: 1px solid rgba(108, 69, 198, 0.28);
  padding: 1.25rem 1.5rem 0 0;
}

.framework-why-grid p {
  color: var(--ink-soft);
  margin-top: 0.75rem;
}

.spark-principle-grid {
  border-top: 1px solid rgba(108, 69, 198, 0.24);
  grid-template-columns: 1fr;
}

.spark-principle-grid article {
  align-items: start;
  border-bottom: 1px solid rgba(108, 69, 198, 0.18);
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: 82px minmax(220px, 0.55fr) minmax(0, 1fr);
  padding: clamp(1.2rem, 3vw, 2rem) 0;
  position: relative;
}

.spark-letter {
  align-items: center;
  background: #211233;
  border-radius: 10px;
  color: #f6d28a;
  display: inline-flex;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 900;
  height: 64px;
  justify-content: center;
  width: 64px;
}

.spark-principle-grid h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  letter-spacing: 0;
}

.spark-principle-grid p,
.spark-principle-grid li {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.spark-principle-grid ul {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
}

.spark-principle-grid li {
  align-items: baseline;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 0.6rem minmax(0, 1fr);
  list-style: none;
}

.spark-principle-grid li::before {
  background: var(--plum-2);
  border-radius: 50%;
  content: "";
  height: 0.42rem;
  margin-top: 0.6em;
  width: 0.42rem;
}

.framework-method {
  background:
    linear-gradient(135deg, rgba(241, 234, 254, 0.92), rgba(255, 255, 255, 0.92));
  border-block: 1px solid rgba(108, 69, 198, 0.14);
  max-width: none;
  position: relative;
}

.framework-method .eyebrow,
.framework-method h2 {
  color: var(--ink);
}

.framework-method > * {
  margin-inline: auto;
  max-width: var(--max);
}

.framework-method-list {
  counter-reset: method;
  display: grid;
  gap: 0;
  list-style: none;
  margin: 2rem auto 0;
  padding: 0;
}

.framework-method-list li {
  background: transparent;
  border-top: 1px solid rgba(108, 69, 198, 0.18);
  border-radius: 0;
  color: var(--ink-soft);
  counter-increment: method;
  display: grid;
  gap: 0.35rem;
  grid-template-columns: minmax(80px, 0.25fr) minmax(0, 1fr);
  padding: 1.15rem 0;
}

.framework-method-list li::before {
  color: var(--plum-2);
  content: counter(method, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 900;
}

.framework-method-list strong {
  color: var(--ink);
}

.framework-case-grid {
  border-top: 1px solid rgba(108, 69, 198, 0.22);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.framework-case-grid a {
  color: var(--ink);
  border-bottom: 1px solid rgba(108, 69, 198, 0.18);
  border-right: 1px solid rgba(108, 69, 198, 0.18);
  display: grid;
  gap: 1rem;
  min-height: 220px;
  padding: clamp(1rem, 2.4vw, 1.6rem);
  text-decoration: none;
}

.framework-case-grid span {
  color: var(--plum-2);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 900;
}

.framework-case-grid a:hover,
.framework-case-grid a:focus-visible {
  background: rgba(241, 234, 254, 0.68);
  box-shadow: none;
  transform: none;
}

@media (max-width: 1100px) {
  .framework-case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spark-principle-grid article {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .spark-principle-grid ul {
    grid-column: 2;
  }
}

@media (max-width: 760px) {
  .framework-page-hero-inner,
  .framework-why-grid,
  .framework-case-grid {
    grid-template-columns: 1fr;
  }

  .framework-page-hero-inner {
    align-items: start;
    min-height: auto;
    padding-top: clamp(7rem, 18vw, 9rem);
  }

  .framework-page-hero h1 {
    font-size: clamp(2.55rem, 14vw, 4.4rem);
  }

  .framework-hero-note {
    min-height: 280px;
  }

  .spark-principle-grid article {
    grid-template-columns: 1fr;
  }

  .spark-principle-grid ul {
    grid-column: auto;
  }

  .framework-method-list li {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   About Preview — short intro, separate from the full contact form below it.
   ========================================================================== */
.about-preview {
  align-items: center;
  border-radius: 32px;
  display: grid;
  gap: 1.75rem 2.25rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto;
  max-width: calc(var(--max) - 2.5rem);
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
}

/* ==========================================================================
   About page
   ========================================================================== */
.about-page {
  background:
    linear-gradient(90deg, rgba(108, 69, 198, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(230, 169, 63, 0.045) 1px, transparent 1px),
    #fffaf3;
  background-size: 80px 80px, 80px 80px, auto;
}

.about-hero {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  min-height: clamp(520px, 70vh, 680px);
  padding-top: clamp(7rem, 12vw, 10rem);
}

.about-hero h1 {
  color: var(--ink);
  font-size: clamp(2.65rem, 5.2vw, 5.8rem);
  letter-spacing: 0;
  line-height: 0.98;
  max-width: 920px;
}

.about-hero p:not(.eyebrow) {
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  margin-top: 1.35rem;
  max-width: 720px;
}

.about-hero-card {
  background: #ffffff;
  border: 1px solid rgba(108, 69, 198, 0.18);
  border-radius: 10px;
  box-shadow: 0 24px 54px rgba(61, 35, 85, 0.12);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.about-hero-card span,
.learning-lab-grid span {
  color: var(--plum-2);
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.about-hero-card ul {
  display: grid;
  gap: 0.85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.about-hero-card li {
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-weight: 700;
  padding-top: 0.85rem;
}

.about-story,
.about-proof,
.learning-lab,
.about-close {
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.about-story h2,
.about-proof h2,
.learning-lab h2,
.about-close h2 {
  color: var(--ink);
  font-size: clamp(1.9rem, 3.4vw, 3.4rem);
  letter-spacing: 0;
  line-height: 1.04;
  max-width: 900px;
}

.about-story-grid {
  border-top: 1px solid rgba(108, 69, 198, 0.22);
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2rem;
  padding-top: 1.5rem;
}

.about-story-grid p,
.learning-lab .section-heading p,
.about-close p {
  color: var(--ink-soft);
  max-width: 780px;
}

.about-proof-grid,
.learning-lab-grid {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.about-proof-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-proof-grid article,
.learning-lab-grid article {
  background: #ffffff;
  border: 1px solid rgba(108, 69, 198, 0.16);
  border-radius: 10px;
  box-shadow: 0 16px 34px rgba(61, 35, 85, 0.08);
  padding: clamp(1.2rem, 2.4vw, 1.6rem);
}

.about-proof-grid p,
.learning-lab-grid p {
  color: var(--ink-soft);
  margin-top: 0.75rem;
}

.learning-lab {
  background:
    linear-gradient(135deg, rgba(241, 234, 254, 0.9), rgba(255, 255, 255, 0.92));
  border-block: 1px solid rgba(108, 69, 198, 0.14);
  max-width: none;
}

.learning-lab > * {
  margin-inline: auto;
  max-width: var(--max);
}

.learning-lab-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lab-status {
  border-top: 1px solid var(--line);
  color: var(--plum-2) !important;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  padding-top: 0.85rem;
  text-transform: uppercase;
}

.about-close {
  text-align: left;
}

@media (max-width: 900px) {
  .about-hero,
  .about-story-grid,
  .about-proof-grid,
  .learning-lab-grid {
    grid-template-columns: 1fr;
  }

  .about-hero {
    min-height: auto;
  }
}

.about-preview-copy {
  min-width: 0;
}

.about-preview-copy h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  margin-bottom: 0.7rem;
}

.about-preview-copy p {
  max-width: 62ch;
}

.about-preview-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.about-preview-links a {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--plum);
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 900;
  gap: 0.6rem;
  min-height: 46px;
  padding: 0.55rem 1.1rem;
  text-decoration: none;
  white-space: nowrap;
}

.about-preview-links a span {
  color: var(--plum);
}

.about {
  align-items: center;
  background:
    radial-gradient(circle at 8% 50%, rgba(239, 227, 246, 0.9), transparent 16rem),
    radial-gradient(circle at 91% 45%, rgba(230, 169, 63, 0.2), transparent 13rem),
    var(--paper);
  border-radius: 44px;
  display: grid;
  gap: 2rem;
  grid-template-columns: 180px 1fr 330px;
  margin: 2rem auto;
  max-width: calc(var(--max) - 2.5rem);
  padding: 2rem;
}

.portrait {
  align-items: center;
  background:
    radial-gradient(circle at 52% 32%, #bf7d56 0 32px, transparent 33px),
    linear-gradient(135deg, #f1dfe9, #e5d3ef);
  border: 0;
  border-radius: 32px;
  color: transparent;
  display: flex;
  height: 170px;
  justify-content: center;
  position: relative;
  width: 170px;
}

.portrait::before {
  background: #3a2021;
  border-radius: 50% 50% 40% 44%;
  content: "";
  height: 84px;
  left: 42px;
  position: absolute;
  top: 22px;
  width: 88px;
}

.about h2 {
  font-size: 2rem;
}

.contact-panel {
  border-left: 1px solid var(--line);
  display: grid;
  gap: 1rem;
  padding-left: 2rem;
}

.contact-form {
  display: grid;
  gap: 0.75rem;
}

.form-field {
  display: grid;
  gap: 0.32rem;
}

.form-field label {
  color: var(--plum);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.form-field input,
.form-field textarea {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  font: inherit;
  min-height: 42px;
  padding: 0.75rem 0.85rem;
  width: 100%;
}

.form-field textarea {
  min-height: 118px;
  resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: color-mix(in srgb, var(--ink-soft) 72%, transparent);
}

.contact-form .button {
  width: 100%;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.contact-links a {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--plum);
  font-size: 0.86rem;
  padding: 0.5rem 0.78rem;
  text-decoration: none;
}

.contact-links a::before {
  color: var(--plum);
  content: "✧";
  margin-right: 0.6rem;
}

.cta {
  align-items: center;
  background:
    radial-gradient(circle at 15% 35%, rgba(255, 220, 135, 0.28), transparent 18rem),
    linear-gradient(180deg, #211233, #392057);
  color: #fff8ef;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr auto;
  margin-top: 2rem;
  max-width: none;
  padding: 4rem max(1.25rem, calc((100vw - var(--max)) / 2 + 1.25rem));
  position: relative;
}

.cta::before {
  background: radial-gradient(circle, #f2c66d 0 1.5px, transparent 2px);
  background-size: 72px 54px;
  content: "";
  inset: 0;
  opacity: 0.75;
  position: absolute;
}

.cta > * {
  position: relative;
  z-index: 1;
}

.cta h2 {
  color: #fff8ef;
  font-size: clamp(1.7rem, 2.7vw, 2.45rem);
  max-width: 720px;
}

.handwritten {
  display: none;
}

.cta .button-primary {
  background: #fffdf8;
  color: #2a163c;
}

.site-footer {
  align-items: center;
  background: #211233;
  color: #fff8ef;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr auto 1fr;
  max-width: none;
  padding: 2rem max(1.25rem, calc((100vw - var(--max)) / 2 + 1.25rem));
}

.site-footer .brand,
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff8ef;
}

.site-footer .brand small,
.site-footer p {
  color: rgba(255, 248, 239, 0.72);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.site-footer nav a {
  font-size: 0.78rem;
  text-decoration: none;
}

.site-footer p {
  font-size: 0.78rem;
  text-align: right;
}

.accessibility-fab {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  bottom: 1rem;
  box-shadow: var(--shadow-soft);
  color: var(--plum);
  cursor: pointer;
  font-weight: 900;
  min-height: 44px;
  padding: 0.72rem 1rem;
  position: fixed;
  right: 1rem;
  z-index: 120;
}

.accessibility-panel {
  bottom: 1rem;
  max-height: min(720px, calc(100vh - 2rem));
  overflow: auto;
  padding: 1.25rem;
  position: fixed;
  right: 1rem;
  width: min(390px, calc(100vw - 2rem));
  z-index: 200;
}

.panel-header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.icon-button {
  background: var(--lavender);
  border: 0;
  border-radius: 999px;
  color: var(--plum);
  cursor: pointer;
  font-size: 1.2rem;
  height: 36px;
  line-height: 1;
  width: 36px;
}

.panel-controls {
  display: grid;
  gap: 0.85rem;
}

.toggle-row,
.range-row {
  align-items: center;
  display: flex;
  font-weight: 900;
  gap: 1rem;
  justify-content: space-between;
  min-height: 36px;
}

.text-size-row {
  display: grid;
  justify-items: center;
}

.range-row input[type="range"],
.font-toggle-row input[type="checkbox"] {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.toggle-row input[type="checkbox"] {
  appearance: none;
  background: #eadff0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(61, 35, 85, 0.12);
  height: 26px;
  margin: 0;
  position: relative;
  width: 46px;
}

.toggle-row input[type="checkbox"]::after {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(61, 35, 85, 0.2);
  content: "";
  height: 18px;
  left: 4px;
  position: absolute;
  top: 4px;
  transition: transform 0.16s ease;
  width: 18px;
}

.toggle-row input[type="checkbox"]:checked {
  background: var(--plum-2);
}

.toggle-row input[type="checkbox"]:checked::after {
  transform: translateX(20px);
}

.text-size-options,
.font-options {
  align-items: center;
  background: var(--lavender);
  border: 1px solid rgba(61, 35, 85, 0.12);
  border-radius: 12px;
  display: inline-flex;
  padding: 3px;
}

.text-size-options button,
.font-option {
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: var(--plum);
  display: grid;
  font-size: 0.8rem;
  font-weight: 900;
  min-height: 28px;
  min-width: 34px;
  place-items: center;
  padding: 0 0.55rem;
}

.text-size-options button.is-active,
.text-size-options button[aria-pressed="true"],
.font-option-default,
.font-toggle-row:has(input[type="checkbox"]:checked) .font-option-atkinson {
  background: var(--plum-2);
  color: #fff;
}

.font-toggle-row:has(input[type="checkbox"]:checked) .font-option-default {
  background: transparent;
  color: var(--plum);
}

.read-aloud-control {
  background: var(--plum);
  color: #fff;
  width: 100%;
}

.panel-controls .button-ghost {
  display: inline-flex;
}

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

@media (max-width: 1120px) {
  .about,
  .about-preview {
    grid-template-columns: 1fr;
  }

  /* Tablet: stage stacks above the controls (full-width column instead of
     58/42). The selector row stays five tiles across (unchanged) — there's
     more width available once the frame is a single column. */
  .spark-frame {
    grid-template-columns: 1fr;
  }

  .spark-controls {
    border-left: 0;
    border-top: 1px solid var(--hero-line);
  }

  .about-preview {
    justify-items: start;
    text-align: left;
  }

  .impact-strip,
  .proof-grid,
  .case-grid,
  .skills-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about {
    max-width: calc(100vw - 2.5rem);
  }

  .contact-panel {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 1.5rem;
  }
}

@media (max-width: 820px) {
  .site-header {
    padding-inline: 1rem;
  }

  .nav-toggle {
    display: grid;
    place-items: center;
  }

  .primary-nav {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    left: 1rem;
    padding: 1rem;
    position: absolute;
    right: 1rem;
    top: calc(100% + 0.5rem);
  }

  .primary-nav[data-open="true"] {
    display: flex;
  }

  .hero-inner {
    flex-direction: column;
  }

  .hero-copy {
    max-width: none;
  }

  .hero-art {
    width: 100%;
  }

  .hero-visual-frame {
    aspect-ratio: 16 / 9;
  }

  /* Mobile: the five tiles are small enough to stay in one row at any
     width, so nothing needs to reflow into a 2-column grid or a carousel
     here — every principle stays visible and directly selectable.
     Introduction, stage and selectors stay in that reading order; the
     panel text sits right below the selectors. */
  .spark-controls {
    gap: 1rem;
    padding: 1.1rem;
  }

  .impact-strip,
  .proof-grid,
  .case-grid,
  .skills-grid {
    grid-template-columns: 1fr;
  }

  .case-visual {
    min-height: 190px;
  }

  .about,
  .about-preview {
    border-radius: 26px;
    margin-inline: 1rem;
    padding: 1.25rem;
  }

  .cta,
  .site-footer {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .site-footer p {
    text-align: center;
  }
}

@media (max-width: 520px) {
  .site-header {
    min-height: 74px;
  }

  .brand small {
    font-size: 0.58rem;
  }

  .pill-list {
    align-items: stretch;
    flex-direction: column;
  }

  .pill-list li {
    width: 100%;
  }

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

  .about-preview {
    justify-items: stretch;
    text-align: center;
  }

  .about-preview .portrait {
    margin-inline: auto;
  }

  .about-preview-links a {
    justify-content: center;
    width: 100%;
  }

  .portrait {
    height: 130px;
    width: 130px;
  }

  .accessibility-panel {
    max-height: calc(100dvh - 28px);
    padding: 1rem;
    width: calc(100vw - 28px);
  }

  .font-toggle-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .font-options {
    width: 100%;
  }

  .font-option {
    flex: 1;
  }
}

/* Contact section */
.contact-section.about {
  align-items: stretch;
  background:
    radial-gradient(circle at 12% 12%, rgba(239, 227, 246, 0.5), transparent 18rem),
    radial-gradient(circle at 90% 24%, rgba(230, 169, 63, 0.16), transparent 18rem),
    color-mix(in srgb, var(--paper) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 44px;
  box-shadow: 0 22px 60px rgba(61, 35, 85, 0.08);
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  margin: clamp(2.5rem, 5vw, 4rem) auto;
  max-width: calc(var(--max) - 2.5rem);
  padding: clamp(2rem, 4vw, 4.2rem);
}

.contact-intro {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contact-intro .eyebrow,
.contact-panel > .eyebrow,
.contact-links .eyebrow {
  color: var(--plum-2);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  margin-bottom: 1.4rem;
}

.contact-intro h2 {
  font-size: clamp(3rem, 5.6vw, 5.4rem);
  line-height: 0.98;
  max-width: 680px;
}

.contact-intro > p {
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.7;
  margin-top: 1.5rem;
  max-width: 620px;
}

.contact-illustration {
  margin: auto auto 1.5rem;
  max-width: 720px;
  position: relative;
  width: 100%;
}

.contact-illustration::before {
  border-radius: 44% 44% 28% 28%;
  background: linear-gradient(135deg, rgba(239, 227, 246, 0.9), rgba(255, 236, 194, 0.52));
  content: "";
  height: 60%;
  left: 24%;
  position: absolute;
  top: 14%;
  width: 48%;
}

.contact-illustration::after {
  color: var(--gold);
  content: "✦";
  font-size: 2.2rem;
  left: 2%;
  position: absolute;
  top: 20%;
}

.contact-illustration img {
  display: block;
  margin-inline: auto;
  max-height: 340px;
  object-fit: contain;
  position: relative;
  width: 100%;
  z-index: 1;
}

.contact-promises {
  background: linear-gradient(90deg, rgba(239, 227, 246, 0.72), rgba(255, 250, 242, 0.84));
  border-radius: 20px;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, 1fr);
  margin-top: auto;
  overflow: hidden;
  padding: 1rem 0;
}

.contact-promises div {
  align-items: center;
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  min-height: 110px;
  padding: 0 1rem;
  text-align: center;
}

.contact-promises div + div {
  border-left: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}

.contact-promises span {
  align-items: center;
  background: #e6cdf4;
  border-radius: 50%;
  color: var(--plum);
  display: inline-flex;
  font-size: 1.55rem;
  height: 54px;
  justify-content: center;
  width: 54px;
}

.contact-promises p {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.4;
}

.contact-section .contact-panel {
  border-left: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding-left: clamp(2rem, 4vw, 4rem);
}

.contact-section .contact-form {
  display: grid;
  gap: 1.15rem;
}

.form-row {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-section .form-field {
  display: grid;
  gap: 0.55rem;
}

.contact-section .form-field label {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  gap: 0.55rem;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

.contact-section .form-field label span {
  color: var(--plum);
  font-size: 1rem;
}

.contact-section .form-field input,
.contact-section .form-field select,
.contact-section .form-field textarea {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  min-height: 54px;
  padding: 0.9rem 1rem;
  width: 100%;
}

.contact-section .form-field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--plum) 50%),
    linear-gradient(135deg, var(--plum) 50%, transparent 50%);
  background-position:
    calc(100% - 24px) 50%,
    calc(100% - 17px) 50%;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
}

.contact-section .form-field textarea {
  min-height: 132px;
  resize: vertical;
}

.contact-section .form-field input::placeholder,
.contact-section .form-field textarea::placeholder,
.contact-section .form-field select:invalid {
  color: #7b6d91;
}

.contact-submit.button {
  background: linear-gradient(90deg, #22003d, #2d0752);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(61, 35, 85, 0.18);
  color: #fff;
  display: grid;
  font-size: 1.05rem;
  grid-template-columns: 1fr auto 1fr;
  min-height: 62px;
  padding: 0 1.5rem;
  width: 100%;
}

.contact-submit span:first-child {
  justify-self: end;
  margin-right: 1.2rem;
}

.contact-submit span:last-child {
  justify-self: end;
}

.privacy-note {
  color: #756784;
  font-size: 0.86rem;
  text-align: center;
}

.contact-section .contact-links {
  border-top: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 1.7rem;
}

.contact-section .contact-links .eyebrow {
  grid-column: 1 / -1;
  margin: 0;
}

.contact-section .contact-links a {
  align-items: center;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 12px;
  color: var(--ink);
  display: grid;
  font-size: 0.92rem;
  font-weight: 900;
  gap: 0.45rem;
  justify-items: center;
  min-height: 104px;
  padding: 1rem 0.8rem;
  text-align: center;
  text-decoration: none;
}

.contact-section .contact-links a::before {
  content: none;
}

.contact-section .contact-links a span:first-child {
  align-items: center;
  background: var(--lavender);
  border-radius: 50%;
  color: var(--plum);
  display: inline-flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

@media (max-width: 1120px) {
  .contact-section.about {
    grid-template-columns: 1fr;
  }

  .contact-section .contact-panel {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    padding-left: 0;
    padding-top: 2rem;
  }
}

@media (max-width: 760px) {
  .contact-section.about {
    border-radius: 28px;
    margin-inline: 1rem;
    padding: 1.35rem;
  }

  .form-row,
  .contact-promises,
  .contact-section .contact-links {
    grid-template-columns: 1fr;
  }

  .contact-promises div + div {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  }

  .contact-intro h2 {
    font-size: clamp(2.4rem, 13vw, 3.8rem);
  }

  .contact-submit.button {
    grid-template-columns: auto 1fr auto;
  }
}


.work .section-heading {
  align-items: start;
  margin-bottom: 1.8rem;
}

.work {
  background:
    linear-gradient(90deg, rgba(108, 69, 198, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(183, 133, 47, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #fffdf9 0%, #f7f1ff 100%);
  background-size: 64px 64px, 64px 64px, auto;
  border-top: 1px solid rgba(108, 69, 198, 0.12);
  border-bottom: 1px solid rgba(108, 69, 198, 0.12);
}

.work .section-heading h2 {
  font-size: clamp(2.5rem, 4.8vw, 4.35rem);
  max-width: 880px;
}

.work .section-heading h2 span {
  color: var(--gold);
  font-size: 0.65em;
}

.work .section-heading p:not(.eyebrow) {
  color: var(--ink-soft);
  font-size: 1.04rem;
  margin-top: 0.45rem;
}

.work-view-all {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--plum);
  display: inline-flex;
  font-weight: 900;
  gap: 0.8rem;
  min-height: 52px;
  padding: 0 1.7rem;
  text-decoration: none;
  white-space: nowrap;
}

.work .case-grid {
  align-items: stretch;
  display: grid;
  gap: 1.35rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.work .case-card {
  background: #ffffff;
  border: 1px solid rgba(108, 69, 198, 0.16);
  border-radius: 10px;
  box-shadow: 0 16px 34px rgba(61, 35, 85, 0.1);
  cursor: pointer;
  display: flex;
  height: auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.work .case-card:hover,
.work .case-card:focus-within {
  border-color: color-mix(in srgb, var(--plum-2) 42%, var(--line));
  box-shadow: 0 24px 52px rgba(61, 35, 85, 0.18);
  transform: translateY(-2px);
}

.work .case-featured {
  background: linear-gradient(135deg, #21122f 0%, #3d2355 42%, #6c45c6 100%);
  border-color: rgba(255, 255, 255, 0.18);
  display: grid;
  grid-column: span 2;
  grid-template-columns: 0.9fr 1.35fr;
  min-height: 360px;
}

.work .case-featured h3,
.work .case-featured p {
  color: #fffaf3;
}

.work .case-featured .case-role {
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #f6d28a !important;
}

.work .case-featured .case-tags li {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fffaf3;
}

.work .case-featured .case-link {
  color: #fffaf3;
}

.work .case-featured .case-link span {
  background: #f6d28a;
  color: #21122f;
}

.work .case-card:nth-child(2),
.work .case-card:nth-child(3) {
  min-height: 360px;
}

.work .case-card:nth-child(4),
.work .case-card:nth-child(5) {
  min-height: 340px;
}

.work .case-card:nth-child(2) {
  border-top: 4px solid #2f5fd0;
}

.work .case-card:nth-child(3) {
  border-top: 4px solid #187f88;
}

.work .case-card:nth-child(4) {
  border-top: 4px solid #f47b20;
}

.work .case-card:nth-child(5) {
  border-top: 4px solid #f5b847;
}

.work .case-copy {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  justify-content: flex-start;
  padding: clamp(1.25rem, 2vw, 2rem);
}

.work .case-featured .case-copy {
  order: -1;
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
}

.work .case-role {
  align-self: flex-start;
  background: var(--lavender);
  border-radius: 999px;
  color: var(--plum-2) !important;
  font-size: 0.68rem !important;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 0.55rem 0.85rem;
}

.work .case-card:not(.case-featured) .case-role {
  background: transparent;
  border-radius: 0;
  color: var(--plum-2) !important;
  padding: 0;
}

.work .case-card h3 {
  font-size: clamp(1.2rem, 1.7vw, 1.75rem);
  line-height: 1.12;
}

.work .case-card:not(.case-featured) h3 {
  font-size: clamp(1.05rem, 1.25vw, 1.35rem);
}

.work .case-card p {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.work .case-featured p,
.work .case-featured h3 {
  color: #fffaf3 !important;
}

.work .case-featured .case-copy > p:not(.case-role) {
  color: rgba(255, 250, 243, 0.84) !important;
}

.work .case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.work .case-tags li {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--plum-2) 42%, var(--line));
  color: var(--plum);
  font-size: 0.68rem;
  padding: 0.34rem 0.62rem;
}

.case-link {
  align-items: center;
  color: var(--plum);
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 900;
  gap: 0.72rem;
  margin-top: auto;
  position: static;
  text-decoration: none;
}

.work .case-link::after {
  content: "";
  inset: 0;
  position: absolute;
  z-index: 2;
}

.work .case-link:focus-visible {
  border-radius: 8px;
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.case-link span {
  align-items: center;
  background: #f8efe3;
  border-radius: 50%;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.work .case-visual {
  flex: 0 0 auto;
  height: clamp(150px, 14vw, 205px);
  min-height: 0;
}

.work .case-featured .case-visual {
  height: auto;
  min-height: 100%;
}

.work .case-visual picture {
  background: #fffaf3;
}

.work .case-visual picture img {
  transform: scale(1.01);
  transition: transform 0.22s ease;
}

.work .case-card:hover .case-visual picture img {
  transform: scale(1.04);
}

.work .case-featured .case-visual picture img {
  object-position: center center;
}

.work .case-featured .case-visual {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.work .case-card:nth-child(2) .case-visual picture img {
  object-position: center top;
}

.work .case-card:nth-child(3) .case-visual picture img {
  object-fit: contain;
  padding: 0.7rem;
}

.work .case-card:nth-child(4) .case-visual picture img {
  object-position: left top;
}

.work .case-card:nth-child(5) .case-visual picture img {
  object-position: center center;
}

.work .visual-access {
  background:
    url("assets/images/hero/illustracao%20hero2.png") center 70% / 95% auto no-repeat,
    radial-gradient(circle at 48% 52%, rgba(239, 227, 246, 0.9), transparent 44%),
    linear-gradient(135deg, #fffaf8, #f5e8f4);
}

.work .visual-access::before,
.work .visual-access::after {
  display: none;
}

.work .visual-dashboard {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    #111520;
}

.work .visual-dashboard::before {
  background:
    linear-gradient(90deg, #1e2740 0 18%, transparent 18%),
    repeating-linear-gradient(90deg, #7551d6 0 12px, transparent 12px 28px);
  border-radius: 0;
  bottom: 24px;
  height: 95px;
  left: 22px;
  opacity: 1;
  width: 52%;
}

.work .visual-dashboard::after {
  border: 12px solid #7044cf;
  border-left-color: #f0a94a;
  border-radius: 50%;
  height: 74px;
  right: 28px;
  top: 54px;
  width: 74px;
}

.work .visual-loan {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(245, 226, 238, 0.86)),
    #f7edf4;
}

.work .visual-loan::before {
  background:
    linear-gradient(#fff 0 28%, transparent 28%),
    repeating-linear-gradient(180deg, rgba(194, 79, 107, 0.18) 0 10px, transparent 10px 28px);
  border: 1px solid rgba(61, 35, 85, 0.12);
  border-radius: 10px;
  height: 72%;
  left: 18%;
  top: 15%;
  transform: none;
  width: 64%;
}

.work .visual-loan::after {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  height: 58%;
  right: 6%;
  top: 24%;
  transform: none;
  width: 18%;
}

.work .visual-content {
  background:
    linear-gradient(90deg, rgba(47, 23, 66, 0.12) 0 20%, transparent 20%),
    linear-gradient(180deg, #fff, #f8eff4);
}

.work .visual-content::before {
  background:
    linear-gradient(90deg, rgba(61, 35, 85, 0.8) 0 16%, transparent 16%),
    repeating-linear-gradient(180deg, rgba(61, 35, 85, 0.12) 0 10px, transparent 10px 30px);
  border: 1px solid rgba(61, 35, 85, 0.12);
  border-radius: 12px;
  box-shadow: none;
  height: 72%;
  left: 8%;
  top: 14%;
  width: 70%;
}

.work .visual-content::after {
  background: #fff;
  border: 1px solid rgba(61, 35, 85, 0.1);
  border-radius: 12px;
  bottom: auto;
  height: 68%;
  right: 8%;
  top: 16%;
  width: 48%;
}

.work .visual-nebula {
  background:
    url("assets/images/contact/illustracao%20hero.png") 52% 62% / 125% auto no-repeat,
    radial-gradient(circle at 48% 40%, rgba(246, 193, 100, 0.26), transparent 34%),
    linear-gradient(135deg, #1e1230, #5c3483);
}

.work .visual-nebula::before,
.work .visual-nebula::after {
  display: none;
}

.work-cta {
  align-items: center;
  background: linear-gradient(90deg, rgba(239, 227, 246, 0.76), rgba(255, 250, 242, 0.72), rgba(239, 227, 246, 0.76));
  border-radius: 18px;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto 1fr auto;
  margin-top: 1.5rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 3rem);
}

.work-cta-icon {
  align-items: center;
  background: var(--plum-2);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 1.55rem;
  height: 62px;
  justify-content: center;
  width: 62px;
}

.work-cta h3 {
  font-size: 1.2rem;
}

.work-cta p {
  color: var(--ink-soft);
  margin-top: 0.25rem;
}

.work-cta .button {
  border-radius: 999px;
  min-width: 180px;
}

@media (max-width: 1120px) {
  .work .case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work .case-featured,
  .work .case-card:nth-child(4),
  .work .case-card:nth-child(5) {
    grid-template-columns: 1fr;
  }

  .work .case-featured {
    grid-column: 1 / -1;
  }

  .work .case-card:nth-child(2),
  .work .case-card:nth-child(3),
  .work .case-card:nth-child(4),
  .work .case-card:nth-child(5) {
    max-width: none;
  }

  .work .case-featured .case-visual {
    min-height: 260px;
  }
}

@media (max-width: 760px) {
  .work .section-heading {
    display: grid;
  }

  .work-view-all {
    justify-self: start;
  }

  .work .case-grid,
  .work .case-featured,
  .work .case-card:nth-child(4),
  .work .case-card:nth-child(5),
  .work-cta {
    grid-template-columns: 1fr;
  }

  .work .case-card,
  .work .case-featured,
  .work .case-card:nth-child(2),
  .work .case-card:nth-child(3),
  .work .case-card:nth-child(4),
  .work .case-card:nth-child(5) {
    min-height: 0;
    max-width: none;
  }

  .work .case-featured .case-copy {
    order: 0;
  }

  .work-cta {
    text-align: center;
  }

  .work-cta-icon,
  .work-cta .button {
    justify-self: center;
  }
}

/* ==========================================================================
   Case study page template — shared, reusable structure for individual case
   pages (case-studies/*.html). Rebuilt as an 8-act editorial narrative with
   one wayfinding system running through it: each act opens with a small
   coordinate tag (01 · TENSION ... 08 · REFLECTION) and a thin left spine,
   evoking a mission trajectory without illustrating one literally. Class
   names stay generic so this template still works for TryGPT, Enterprise AI
   Dashboard, Neto and 4Pets. Reuses the site's existing tokens, .eyebrow,
   .case-tags and heading styles instead of redefining them.
   ========================================================================== */

.case-page {
  --case-frame: var(--max);
  --case-prose: 680px;
  background: var(--cream);
  margin-inline: auto;
  max-width: var(--case-frame);
  padding: clamp(1.1rem, 2.5vw, 2rem) 1.25rem clamp(3rem, 6vw, 5rem);
}

body[data-dark="true"] .case-page {
  background: var(--paper);
}

/* --------------------------------------------------------------------
   Enterprise AI dashboard case
   -------------------------------------------------------------------- */
body:has(.case-page--enterprise) {
  background: #f5f7fb;
}

.case-page--enterprise {
  --enterprise-ink: #172033;
  --enterprise-muted: #5b667a;
  --enterprise-soft: #f5f7fb;
  --enterprise-panel: #ffffff;
  --enterprise-line: #dce3ee;
  --enterprise-blue: #2f5fd0;
  --enterprise-teal: #118aa3;
  --enterprise-green: #5f9d4a;
  --ink: var(--enterprise-ink);
  --ink-soft: var(--enterprise-muted);
  --line: var(--enterprise-line);
  --paper: var(--enterprise-panel);
  --cream: var(--enterprise-soft);
  background: var(--enterprise-soft);
  max-width: none;
  padding-inline: 0;
  padding-top: 0;
}

body:has(.case-page--enterprise) .site-header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(220, 227, 238, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body:has(.case-page--enterprise) .site-header[data-elevated="true"] {
  background: #ffffff;
  border-bottom-color: var(--enterprise-line, #dce3ee);
  box-shadow: 0 10px 30px rgba(23, 32, 51, 0.08);
}

.case-page--enterprise .case-hero,
.case-page--enterprise .enterprise-section,
.case-page--enterprise .enterprise-style-section {
  padding-inline: max(1.25rem, calc((100vw - var(--max)) / 2));
}

.case-page--enterprise .case-hero {
  background:
    linear-gradient(90deg, rgba(47, 95, 208, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(47, 95, 208, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
  background-size: 56px 56px, 56px 56px, auto;
  border-bottom: 1px solid var(--enterprise-line);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  padding-top: clamp(1.5rem, 3.5vw, 3rem);
}

.case-page--enterprise .case-hero-grid {
  align-items: center;
  grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
}

.case-page--enterprise h1 {
  color: var(--enterprise-ink);
  font-size: clamp(2.4rem, 5vw, 4.9rem);
  letter-spacing: 0;
  max-width: 820px;
}

.case-page--enterprise .eyebrow {
  color: var(--enterprise-teal);
}

.case-page--enterprise .case-hero-statement {
  color: var(--enterprise-ink);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  max-width: 760px;
}

.case-page--enterprise .case-hero-tagline {
  color: var(--enterprise-muted);
  font-size: 0.98rem;
  max-width: 660px;
}

.case-page--enterprise .enterprise-proof {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.25rem;
  max-width: 520px;
}

.case-page--enterprise .enterprise-proof li {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--enterprise-line);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(23, 32, 51, 0.06);
  padding: 0.85rem 0.95rem;
  width: 100%;
}

.case-page--enterprise .enterprise-proof strong {
  color: var(--enterprise-blue);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
}

.case-page--enterprise .case-hero-skills {
  border-color: var(--enterprise-line);
  color: var(--enterprise-muted);
  margin-bottom: 0;
}

.case-page--enterprise .case-hero-visual::before {
  display: none;
}

.case-page--enterprise .enterprise-hero-visual {
  justify-content: center;
}

.case-page--enterprise .enterprise-screen-frame,
.case-page--enterprise .enterprise-screen {
  background: var(--enterprise-panel);
  border: 1px solid var(--enterprise-line);
  border-radius: 10px;
  box-shadow: 0 18px 55px rgba(23, 32, 51, 0.13);
  overflow: hidden;
}

.case-page--enterprise .enterprise-screen-frame {
  padding-top: 34px;
  width: min(100%, 700px);
}

.case-page--enterprise .enterprise-frame-bar {
  align-items: center;
  background: #eef2f7;
  border-bottom: 1px solid var(--enterprise-line);
  display: flex;
  gap: 0.45rem;
  height: 34px;
  inset: 0 0 auto;
  padding-left: 0.9rem;
  position: absolute;
  z-index: 2;
}

.case-page--enterprise .enterprise-frame-bar span {
  background: #9aa7b8;
  border-radius: 50%;
  height: 8px;
  width: 8px;
}

.case-page--enterprise .case-hero-stack-primary {
  border: 0;
  display: block;
}

.case-page--enterprise .case-hero-badge {
  background: #ffffff;
  border-color: var(--enterprise-line);
  color: var(--enterprise-muted);
  margin: 0.85rem;
  position: absolute;
  right: 0;
  top: 34px;
  z-index: 3;
}

.case-page--enterprise .case-hero-badge-dot {
  background: var(--enterprise-green);
}

.case-page--enterprise .enterprise-section {
  background: #ffffff;
  border-bottom: 1px solid var(--enterprise-line);
  margin: 0;
  max-width: none;
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
  padding-top: clamp(2rem, 4vw, 3.25rem);
}

.case-page--enterprise .enterprise-section:nth-of-type(even) {
  background: #f8fafc;
}

.case-page--enterprise .enterprise-section > p,
.case-page--enterprise .enterprise-section > h2,
.case-page--enterprise .enterprise-section > .case-coord,
.case-page--enterprise .enterprise-section > .case-ownership-line,
.case-page--enterprise .enterprise-section > .case-boundary,
.case-page--enterprise .enterprise-section > .case-testing-synthesis,
.case-page--enterprise .enterprise-section > .case-priority-list {
  margin-left: auto;
  margin-right: auto;
  max-width: 840px;
}

.case-page--enterprise .case-coord {
  color: var(--enterprise-teal);
}

.case-page--enterprise .case-coord::before {
  background: var(--enterprise-teal);
  box-shadow: 0 0 0 3px rgba(17, 138, 163, 0.16);
}

.case-page--enterprise .enterprise-section h2,
.case-page--enterprise .enterprise-style-section h2 {
  color: var(--enterprise-ink);
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  max-width: 880px;
}

.case-page--enterprise .enterprise-section p,
.case-page--enterprise .enterprise-style-section p {
  color: var(--enterprise-muted);
}

.case-page--enterprise .case-ownership-line,
.case-page--enterprise .case-boundary,
.case-page--enterprise .case-testing-synthesis {
  background: #f5f8fb;
  border: 1px solid var(--enterprise-line);
  border-radius: 8px;
  color: var(--enterprise-muted);
  padding: 1rem 1.1rem;
}

.case-page--enterprise .enterprise-screen-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1.5rem auto 0;
  max-width: var(--max);
}

.case-page--enterprise .enterprise-screen {
  margin: 0;
}

.case-page--enterprise .enterprise-screen img,
.case-page--enterprise .enterprise-style-media img {
  display: block;
  height: auto;
  width: 100%;
}

.case-page--enterprise .case-decision-cards {
  display: grid;
  flex-direction: initial;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-left: auto;
  margin-right: auto;
  max-width: 1120px;
}

.case-page--enterprise .case-decision-card {
  background: #ffffff;
  border: 1px solid var(--enterprise-line);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(23, 32, 51, 0.07);
  padding: clamp(1rem, 1.6vw, 1.35rem);
}

.case-page--enterprise .case-decision-card h3 {
  color: var(--enterprise-ink);
  font-size: 1.1rem;
}

.case-page--enterprise .enterprise-style-section {
  background: #172033;
  border-bottom: 1px solid #27354d;
  margin: 0;
  padding-bottom: clamp(2.25rem, 4.5vw, 3.75rem);
  padding-top: clamp(2.25rem, 4.5vw, 3.75rem);
}

.case-page--enterprise .enterprise-style-section .case-section-inner {
  max-width: var(--max);
  padding-inline: 0;
}

.case-page--enterprise .enterprise-style-grid {
  align-items: start;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(340px, 0.78fr) minmax(0, 1.22fr);
}

.case-page--enterprise .enterprise-style-copy {
  max-width: 430px;
}

.case-page--enterprise .enterprise-style-section h2,
.case-page--enterprise .enterprise-style-section p {
  color: #f8fbff;
}

.case-page--enterprise .enterprise-style-section .case-band-reflection,
.case-page--enterprise .enterprise-style-section .case-act5-stat span {
  color: rgba(248, 251, 255, 0.72);
}

.case-page--enterprise .enterprise-style-media {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 1rem;
}

.case-page--enterprise .enterprise-asset-strip {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.9rem;
}

.case-page--enterprise .enterprise-asset-strip picture {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  display: block;
  overflow: hidden;
}

.case-page--enterprise .case-priority-list {
  display: grid;
  gap: 0.75rem;
  max-width: 960px;
}

.case-page--enterprise .case-priority-list li {
  background: #ffffff;
  border: 1px solid var(--enterprise-line);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(23, 32, 51, 0.05);
}

@media (max-width: 900px) {
  .case-page--enterprise .case-hero-grid,
  .case-page--enterprise .enterprise-style-grid,
  .case-page--enterprise .enterprise-screen-grid,
  .case-page--enterprise .case-decision-cards {
    grid-template-columns: 1fr;
  }

  .case-page--enterprise .enterprise-proof,
  .case-page--enterprise .enterprise-asset-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .case-page--enterprise .enterprise-proof,
  .case-page--enterprise .enterprise-asset-strip {
    grid-template-columns: 1fr;
  }

  .case-page--enterprise .case-hero-badge {
    position: static;
  }
}

/* --------------------------------------------------------------------
   AI companion case
   -------------------------------------------------------------------- */
body:has(.case-page--trygpt) {
  background: #f6f8fb;
}

.case-page--trygpt {
  --try-ink: #162133;
  --try-muted: #5c6678;
  --try-blue: #126eb9;
  --try-deep: #08475c;
  --try-coral: #f47b20;
  --try-line: #d9e3ef;
  --try-panel: #ffffff;
  color: var(--try-ink);
}

body:has(.case-page--trygpt) .site-header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(217, 227, 239, 0.76);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body:has(.case-page--trygpt) .site-header[data-elevated="true"] {
  background: #ffffff;
  border-bottom-color: var(--try-line);
  box-shadow: 0 10px 28px rgba(22, 33, 51, 0.08);
}

.case-page--trygpt .case-hero,
.case-page--trygpt .trygpt-section,
.case-page--trygpt .trygpt-system-section {
  padding-inline: max(1.25rem, calc((100vw - var(--max)) / 2));
}

.case-page--trygpt .case-hero {
  background:
    linear-gradient(90deg, rgba(21, 120, 201, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21, 120, 201, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
  background-size: 56px 56px, 56px 56px, auto;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: clamp(7rem, 10vw, 9rem);
}

.case-page--trygpt .trygpt-hero-grid {
  align-items: center;
  grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
}

.case-page--trygpt h1 {
  color: var(--try-ink);
  font-size: clamp(2.5rem, 5vw, 5rem);
  letter-spacing: 0;
  max-width: 860px;
}

.case-page--trygpt .eyebrow,
.case-page--trygpt .case-coord {
  color: var(--try-blue);
}

.case-page--trygpt .case-coord::before {
  background: var(--try-coral);
  box-shadow: 0 0 0 3px rgba(244, 123, 32, 0.16);
}

.case-page--trygpt .case-hero-statement {
  color: var(--try-ink);
  font-size: clamp(1.25rem, 2vw, 1.72rem);
  max-width: 800px;
}

.case-page--trygpt .case-hero-tagline,
.case-page--trygpt .case-hero-skills,
.case-page--trygpt p {
  color: var(--try-muted);
}

.case-page--trygpt .trygpt-proof {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.35rem;
  max-width: 560px;
}

.case-page--trygpt .trygpt-proof li {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--try-line);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(22, 33, 51, 0.06);
  padding: 0.9rem 1rem;
}

.case-page--trygpt .trygpt-proof strong {
  color: var(--try-blue);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}

.trygpt-hero-visual {
  justify-content: center;
}

.case-page--trygpt .case-hero-visual::before {
  display: none;
}

.trygpt-browser-frame,
.trygpt-screen,
.trygpt-flow-media {
  background: var(--try-panel);
  border: 1px solid var(--try-line);
  border-radius: 10px;
  box-shadow: 0 18px 52px rgba(22, 33, 51, 0.12);
  overflow: hidden;
}

.trygpt-browser-frame {
  padding-top: 34px;
  position: relative;
  width: min(100%, 760px);
}

.trygpt-frame-bar {
  align-items: center;
  background: #edf3f8;
  border-bottom: 1px solid var(--try-line);
  display: flex;
  gap: 7px;
  inset: 0 0 auto;
  min-height: 34px;
  padding-inline: 13px;
  position: absolute;
}

.trygpt-frame-bar span {
  background: #95a8b9;
  border-radius: 50%;
  height: 8px;
  width: 8px;
}

.trygpt-browser-frame img,
.trygpt-screen img,
.trygpt-flow-media img {
  display: block;
  height: auto;
  width: 100%;
}

.trygpt-section {
  background: #ffffff;
  border-bottom: 1px solid var(--try-line);
  margin: 0;
  max-width: none;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

.trygpt-section:nth-of-type(even) {
  background: #f7fafc;
}

.trygpt-section > p,
.trygpt-section > h2,
.trygpt-section > .case-coord,
.trygpt-section > .trygpt-note,
.trygpt-section > .case-priority-list {
  margin-left: auto;
  margin-right: auto;
  max-width: 850px;
}

.case-page--trygpt h2 {
  color: var(--try-ink);
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  letter-spacing: 0;
  max-width: 900px;
}

.trygpt-note {
  background: #f4f8fc;
  border: 1px solid var(--try-line);
  border-radius: 8px;
  margin-top: 1.15rem;
  padding: 1rem 1.1rem;
}

.trygpt-two-column {
  align-items: center;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  margin-inline: auto;
  max-width: var(--max);
}

.trygpt-flow-media {
  margin: 0;
}

.trygpt-flow-media--centered {
  margin: 1.5rem auto 0;
  max-width: 920px;
}

.trygpt-state-map {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.5rem auto 0;
  max-width: 1120px;
}

.trygpt-state-map article {
  background: #ffffff;
  border: 1px solid var(--try-line);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(22, 33, 51, 0.07);
  padding: 1.25rem;
  position: relative;
}

.trygpt-state-map article + article::before {
  background: var(--try-coral);
  content: "";
  height: 2px;
  left: -1rem;
  position: absolute;
  top: 2.2rem;
  width: 1rem;
}

.trygpt-state-map span {
  color: var(--try-blue);
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  margin-bottom: 0.65rem;
}

.trygpt-state-map h3 {
  color: var(--try-ink);
  font-size: 1.08rem;
  margin: 0 0 0.55rem;
}

.trygpt-state-map p {
  font-size: 0.95rem;
  margin: 0;
}

.trygpt-decision-cards {
  display: grid;
  flex-direction: initial;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-inline: auto;
  max-width: 1120px;
}

.case-page--trygpt .case-decision-card {
  background: #ffffff;
  border: 1px solid var(--try-line);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(22, 33, 51, 0.07);
  padding: 1.25rem;
}

.case-page--trygpt .case-decision-card h3 {
  color: var(--try-ink);
}

.trygpt-screen-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.7fr);
  margin: 1.5rem auto 0;
  max-width: var(--max);
}

.trygpt-screen-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trygpt-screen {
  margin: 0;
}

.trygpt-screen--phone {
  align-self: start;
  justify-self: center;
  max-width: 330px;
}

.trygpt-system-section {
  background: #162133;
  border-bottom: 1px solid #253650;
  margin: 0;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

.trygpt-system-section .case-section-inner {
  max-width: var(--max);
  padding-inline: 0;
}

.trygpt-system-section h2,
.trygpt-system-section p {
  color: #f8fbff;
}

.trygpt-system-section .case-coord {
  color: #74d2ff;
}

.trygpt-system-grid {
  align-items: start;
  grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr);
}

.trygpt-style-stack {
  display: grid;
  gap: 1rem;
}

.trygpt-note--dark {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(248, 251, 255, 0.78);
}

.case-page--trygpt .case-priority-list {
  display: grid;
  gap: 0.75rem;
  max-width: 960px;
}

.case-page--trygpt .case-priority-list li {
  background: #ffffff;
  border: 1px solid var(--try-line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(22, 33, 51, 0.05);
}

@media (max-width: 900px) {
  .case-page--trygpt .trygpt-hero-grid,
  .trygpt-two-column,
  .trygpt-decision-cards,
  .trygpt-screen-grid,
  .trygpt-screen-grid--three,
  .trygpt-state-map,
  .trygpt-system-grid {
    grid-template-columns: 1fr;
  }

  .trygpt-state-map article + article::before {
    height: 1rem;
    left: 1.5rem;
    top: -1rem;
    width: 2px;
  }

  .trygpt-hero-visual {
    order: -1;
  }
}

@media (max-width: 560px) {
  .case-page--trygpt .trygpt-proof {
    grid-template-columns: 1fr;
  }

  .trygpt-browser-frame {
    padding-top: 28px;
  }

  .trygpt-frame-bar {
    min-height: 28px;
  }
}

/* --------------------------------------------------------------------
   Inclusive banking research case
   -------------------------------------------------------------------- */
body:has(.case-page--neto) {
  background: #f7fbfb;
}

.case-page--neto {
  --neto-ink: #1b2938;
  --neto-muted: #5f6d78;
  --neto-teal: #187f88;
  --neto-green: #79b99d;
  --neto-plum: #7656a6;
  --neto-line: #dce7e7;
  color: var(--neto-ink);
}

body:has(.case-page--neto) .site-header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(220, 231, 231, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body:has(.case-page--neto) .site-header[data-elevated="true"] {
  background: #ffffff;
  border-bottom-color: var(--neto-line);
  box-shadow: 0 10px 28px rgba(27, 41, 56, 0.08);
}

.case-page--neto .case-hero,
.case-page--neto .neto-section,
.case-page--neto .neto-findings-section {
  padding-inline: max(1.25rem, calc((100vw - var(--max)) / 2));
}

.case-page--neto .case-hero {
  background:
    linear-gradient(90deg, rgba(24, 127, 136, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(24, 127, 136, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
  background-size: 56px 56px, 56px 56px, auto;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: clamp(7rem, 10vw, 9rem);
}

.case-page--neto .neto-hero-grid {
  align-items: center;
  grid-template-columns: minmax(320px, 0.95fr) minmax(280px, 0.8fr);
}

.case-page--neto h1 {
  color: var(--neto-ink);
  font-size: clamp(2.4rem, 4.8vw, 4.8rem);
  letter-spacing: 0;
  max-width: 880px;
}

.case-page--neto h2 {
  color: var(--neto-ink);
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  letter-spacing: 0;
}

.case-page--neto .eyebrow,
.case-page--neto .case-coord {
  color: var(--neto-teal);
}

.case-page--neto .case-coord::before {
  background: var(--neto-green);
  box-shadow: 0 0 0 3px rgba(121, 185, 157, 0.18);
}

.case-page--neto .case-hero-statement {
  color: var(--neto-ink);
  font-size: clamp(1.25rem, 2vw, 1.72rem);
}

.case-page--neto .case-hero-tagline,
.case-page--neto .case-hero-skills,
.case-page--neto p {
  color: var(--neto-muted);
}

.neto-proof {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.35rem;
  max-width: 560px;
}

.neto-proof li,
.neto-method-grid article,
.neto-finding-grid article {
  background: #ffffff;
  border: 1px solid var(--neto-line);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(27, 41, 56, 0.06);
  padding: 1rem;
}

.neto-proof strong {
  color: var(--neto-teal);
}

.neto-hero-visual {
  justify-content: center;
}

.case-page--neto .case-hero-visual::before {
  display: none;
}

.neto-document-frame,
.neto-document {
  background: #ffffff;
  border: 1px solid var(--neto-line);
  border-radius: 8px;
  box-shadow: 0 18px 52px rgba(27, 41, 56, 0.12);
  overflow: hidden;
}

.neto-document-frame {
  max-width: 430px;
  padding: 0.6rem;
}

.case-page--neto .neto-document-frame img,
.case-page--neto .neto-document img {
  border-radius: 4px;
  display: block;
  height: auto;
  object-fit: contain;
  width: 100%;
}

.neto-section {
  background: #ffffff;
  border-bottom: 1px solid var(--neto-line);
  margin: 0;
  max-width: none;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

.neto-section:nth-of-type(even) {
  background: #f7fbfb;
}

.neto-section > p,
.neto-section > h2,
.neto-section > .case-coord,
.neto-section > .neto-note,
.neto-section > .neto-method-grid,
.neto-section > .neto-priority-list {
  margin-left: auto;
  margin-right: auto;
  max-width: 880px;
}

.neto-note {
  background: #f2f8f8;
  border: 1px solid var(--neto-line);
  border-radius: 8px;
  margin-top: 1.15rem;
  padding: 1rem 1.1rem;
}

.neto-method-grid,
.neto-finding-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.5rem;
}

.neto-method-grid span {
  color: var(--neto-teal);
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  margin-bottom: 0.65rem;
}

.neto-method-grid h3,
.neto-finding-grid h3 {
  color: var(--neto-ink);
  font-size: 1.08rem;
  margin: 0 0 0.55rem;
}

.neto-method-grid p,
.neto-finding-grid p {
  font-size: 0.95rem;
  margin: 0;
}

.neto-two-column {
  align-items: start;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
  margin-inline: auto;
  max-width: var(--max);
}

.neto-artifact-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.neto-findings-section {
  background: #1b2938;
  border-bottom: 1px solid #2d4052;
  margin: 0;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

.neto-findings-section .case-section-inner {
  max-width: var(--max);
  padding-inline: 0;
}

.neto-findings-section h2,
.neto-findings-section p {
  color: #f8fbff;
}

.neto-findings-section .case-coord {
  color: #91d8cc;
}

.neto-finding-grid article {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}

.neto-finding-grid h3,
.neto-finding-grid p {
  color: #f8fbff;
}

.case-page--neto .neto-priority-list {
  display: grid;
  gap: 0.75rem;
  max-width: 980px;
}

.case-page--neto .neto-priority-list li {
  background: #ffffff;
  border: 1px solid var(--neto-line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(27, 41, 56, 0.05);
}

@media (max-width: 900px) {
  .case-page--neto .neto-hero-grid,
  .neto-two-column,
  .neto-method-grid,
  .neto-finding-grid {
    grid-template-columns: 1fr;
  }

  .neto-hero-visual {
    order: -1;
  }
}

@media (max-width: 620px) {
  .neto-proof,
  .neto-artifact-grid {
    grid-template-columns: 1fr;
  }
}

.case-page--trygpt .trygpt-browser-frame img,
.case-page--trygpt .trygpt-screen img,
.case-page--trygpt .trygpt-flow-media img {
  aspect-ratio: auto;
  border-radius: 0;
  display: block;
  height: auto;
  object-fit: contain;
  width: 100%;
}

.case-page--trygpt .trygpt-screen {
  height: auto;
}

.case-page--trygpt .trygpt-screen--phone img {
  max-height: 760px;
  object-fit: contain;
}

/* --------------------------------------------------------------------
   4Pets mobile product case
   -------------------------------------------------------------------- */
body:has(.case-page--4pets) {
  background: #fbf8f1;
}

.case-page--4pets {
  --pets-ink: #2b2730;
  --pets-muted: #615b66;
  --pets-teal: #24756f;
  --pets-amber: #f5b847;
  --pets-paper: #fbf8f1;
  --pets-line: #eadfcd;
}

body:has(.case-page--4pets) .site-header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(234, 223, 205, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body:has(.case-page--4pets) .site-header[data-elevated="true"] {
  background: #ffffff;
  border-bottom-color: var(--pets-line);
  box-shadow: 0 10px 28px rgba(43, 39, 48, 0.08);
}

.case-page--4pets .case-hero,
.case-page--4pets .pets-section {
  padding-inline: max(1.25rem, calc((100vw - var(--max)) / 2));
}

.case-page--4pets .case-hero {
  background:
    linear-gradient(90deg, rgba(47, 143, 137, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(245, 184, 71, 0.12) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff 0%, #fbf8f1 100%);
  background-size: 56px 56px, 56px 56px, auto;
  border-bottom: 1px solid var(--pets-line);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.case-page--4pets .pets-hero-grid {
  align-items: center;
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
}

.case-page--4pets h1 {
  color: var(--pets-ink);
  font-size: clamp(2.5rem, 5vw, 5rem);
  letter-spacing: 0;
}

.case-page--4pets h2 {
  color: var(--pets-ink);
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  letter-spacing: 0;
}

.case-page--4pets h3 {
  color: var(--pets-ink);
}

.case-page--4pets .eyebrow,
.case-page--4pets .case-coord {
  color: var(--pets-teal);
}

.case-page--4pets .case-coord::before {
  background: var(--pets-amber);
  box-shadow: 0 0 0 3px rgba(245, 184, 71, 0.22);
}

.case-page--4pets .case-hero-statement {
  color: var(--pets-ink);
  font-size: clamp(1.25rem, 2vw, 1.72rem);
  max-width: 820px;
}

.case-page--4pets .case-hero-tagline,
.case-page--4pets .case-hero-skills,
.case-page--4pets p {
  color: var(--pets-muted);
}

.pets-proof {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.35rem;
  max-width: 560px;
}

.case-page--4pets .pets-proof li {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--pets-line);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(43, 39, 48, 0.06);
  padding: 0.9rem 1rem;
}

.case-page--4pets .pets-proof strong {
  color: var(--pets-teal);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}

.case-page--4pets .case-hero-visual::before {
  display: none;
}

.pets-hero-visual {
  justify-content: center;
}

.pets-hero-frame,
.pets-media,
.pets-phone-media,
.pets-wide-media {
  background: #ffffff;
  border: 1px solid var(--pets-line);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(43, 39, 48, 0.12);
  overflow: hidden;
}

.pets-hero-frame {
  width: min(100%, 720px);
}

.case-page--4pets .pets-hero-frame img,
.case-page--4pets .pets-media img,
.case-page--4pets .pets-phone-media img,
.case-page--4pets .pets-wide-media img {
  aspect-ratio: auto;
  display: block;
  height: auto;
  object-fit: contain;
  width: 100%;
}

.pets-section {
  background: #ffffff;
  border-bottom: 1px solid var(--pets-line);
  margin: 0;
  max-width: none;
  padding-bottom: clamp(2rem, 4vw, 3.4rem);
  padding-top: clamp(2rem, 4vw, 3.4rem);
}

.pets-section:nth-of-type(even) {
  background: #fbf8f1;
}

.pets-section > p,
.pets-section > h2,
.pets-section > .case-coord,
.pets-section > .pets-note,
.pets-section > .case-priority-list {
  margin-left: auto;
  margin-right: auto;
  max-width: 850px;
}

.pets-note {
  background: #fff8e7;
  border: 1px solid rgba(245, 184, 71, 0.45);
  border-radius: 8px;
  padding: 1rem 1.1rem;
}

.pets-job-grid,
.pets-persona-grid,
.pets-test-grid,
.pets-decision-cards {
  display: grid;
  gap: 1rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.4rem;
  max-width: var(--max);
}

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

.pets-job-grid article,
.case-page--4pets .case-decision-card {
  background: #ffffff;
  border: 1px solid var(--pets-line);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(43, 39, 48, 0.07);
  padding: clamp(1rem, 1.8vw, 1.35rem);
}

.pets-job-grid span {
  color: var(--pets-teal);
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
  text-transform: uppercase;
}

.pets-two-column {
  align-items: center;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr);
  margin: 0 auto;
  max-width: var(--max);
}

.pets-two-column--reverse {
  grid-template-columns: minmax(0, 0.8fr) minmax(320px, 1fr);
}

.pets-section--evidence,
.pets-section--personas,
.pets-section--screens {
  background: #fbf8f1;
}

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

.pets-test-grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.pets-phone-media {
  justify-self: center;
  max-width: 430px;
}

.case-page--4pets .pets-priority-list {
  display: grid;
  gap: 0.75rem;
  max-width: 980px;
}

.case-page--4pets .pets-priority-list li {
  background: #ffffff;
  border: 1px solid var(--pets-line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(43, 39, 48, 0.05);
}

.case-page--4pets .case-next-number {
  color: var(--pets-teal);
}

.case-page--4pets .case-decision-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pets-wide-media {
  margin: 1.5rem auto 0;
  max-width: 980px;
}

.pets-section--final {
  background:
    linear-gradient(135deg, rgba(47, 143, 137, 0.09), transparent 36%),
    linear-gradient(315deg, rgba(245, 184, 71, 0.14), transparent 38%),
    #ffffff;
}

@media (max-width: 900px) {
  .case-page--4pets .pets-hero-grid,
  .pets-two-column,
  .pets-two-column--reverse,
  .pets-job-grid,
  .pets-persona-grid,
  .pets-test-grid,
  .case-page--4pets .case-decision-cards {
    grid-template-columns: 1fr;
  }

  .pets-phone-media {
    max-width: 360px;
  }
}

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

/* --------------------------------------------------------------------
   Nebula theme — this one case gets a continuous deep-space canvas
   instead of the light template default. Scoped to .case-page--nebula
   so the shared .case-page template stays light/editorial for future
   case studies (TryGPT, Enterprise AI Dashboard, Neto, 4Pets).
   Redefining --ink/--ink-soft/--line/--paper/--lavender/--cream here
   means every existing bento surface, text color and ring/shadow built
   on those tokens automatically becomes part of the dark system — only
   the two artifact frames that must stay literally light (the survey
   chart and CSD matrix, both authored on white) get an explicit
   light-panel exception further down.
   -------------------------------------------------------------------- */
/* The Nebula page's dark canvas lives on .case-page--nebula, which is
   capped at --max (1320px) and centered — on wide viewports that leaves
   the site's light --cream gutters visible on both sides, so the page
   reads as a dark card floating on a light page instead of one
   continuous space background. :has() lets body pick up the same dark
   canvas without adding a class in HTML or touching the shared
   .case-page template used by future (light) case studies. */
body:has(.case-page--nebula) {
  background:
    radial-gradient(1.4px 1.4px at 4% 12%, rgba(255, 255, 255, 0.32), transparent),
    radial-gradient(1px 1px at 11% 46%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1.4px 1.4px at 7% 78%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1px 1px at 94% 20%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1.4px 1.4px at 91% 60%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1px 1px at 96% 85%, rgba(255, 255, 255, 0.2), transparent),
    linear-gradient(180deg, #0a0e21 0%, #12163f 35%, #0a0e21 100%);
}

body[data-dark="true"]:has(.case-page--nebula),
body[data-contrast="true"]:has(.case-page--nebula) {
  background: #0a0e21;
}

.case-page--nebula {
  --neb-void: #0a0e21;
  --neb-deep: #12163f;
  --neb-surface: #202663;
  --neb-surface-2: #2a2570;
  --neb-text: #f7f4ff;
  --neb-text-soft: #c9bdf0;
  --neb-line: rgba(255, 255, 255, 0.18);
  --neb-cyan: #7fe3e3;
  --neb-gold: #f0c96a;
  --neb-accent: #b48af0;
  --ink: var(--neb-text);
  --ink-soft: var(--neb-text-soft);
  --line: var(--neb-line);
  --paper: var(--neb-surface);
  --lavender: var(--neb-surface-2);
  --cream: var(--neb-deep);
  background:
    radial-gradient(1.4px 1.4px at 6% 8%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 16% 24%, rgba(255, 255, 255, 0.32), transparent),
    radial-gradient(1.6px 1.6px at 28% 5%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 40% 34%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1.4px 1.4px at 52% 14%, rgba(255, 255, 255, 0.38), transparent),
    radial-gradient(1px 1px at 64% 42%, rgba(255, 255, 255, 0.26), transparent),
    radial-gradient(1.6px 1.6px at 74% 10%, rgba(255, 255, 255, 0.36), transparent),
    radial-gradient(1px 1px at 86% 30%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1.4px 1.4px at 94% 20%, rgba(255, 255, 255, 0.32), transparent),
    radial-gradient(1px 1px at 10% 55%, rgba(255, 255, 255, 0.24), transparent),
    radial-gradient(1.5px 1.5px at 30% 66%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 55% 60%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1.4px 1.4px at 80% 62%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 20% 85%, rgba(255, 255, 255, 0.24), transparent),
    radial-gradient(1.5px 1.5px at 46% 88%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1px 1px at 68% 90%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1.4px 1.4px at 90% 82%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(ellipse 55% 25% at 15% 3%, rgba(180, 138, 240, 0.16), transparent 60%),
    radial-gradient(ellipse 45% 25% at 88% 35%, rgba(127, 227, 227, 0.1), transparent 60%),
    radial-gradient(ellipse 50% 28% at 25% 92%, rgba(240, 201, 106, 0.08), transparent 60%),
    linear-gradient(180deg, var(--neb-void) 0%, var(--neb-deep) 35%, var(--neb-void) 100%);
}

body[data-dark="true"] .case-page--nebula,
body[data-contrast="true"] .case-page--nebula {
  background-color: var(--neb-void);
}

/* Explicit light exception: these two artifacts are real research
   exports authored on a white canvas, so they get their own bounded
   light panel instead of inheriting the page's dark --paper. */
.case-evidence-hero,
.case-evidence-csd {
  --ink: #2a1c59;
  --ink-soft: #442c85;
  --line: #ede5ff;
  background: #fff;
}

body[data-contrast="true"] .case-page--nebula .case-highlight,
body[data-contrast="true"] .case-page--nebula .case-system-core {
  background: #000;
}

.case-page--nebula .eyebrow {
  color: var(--neb-gold);
}

.case-page--nebula .button-ghost {
  background: transparent;
  border-color: var(--neb-line);
  color: var(--neb-text);
}

/* An "act" is a full scene: generous padding, one border-top as the only
   horizontal divider, one heading, and a thin left spine that continues
   the "mission trajectory" motif from act to act. The spine is dotted
   rather than solid so it reads as a route, not a container edge, and
   each act carries a very light background tint so the page has editorial
   rhythm instead of one flat panel repeated eight times. */
.case-act {
  background: var(--case-act-bg, transparent);
  border-left: 2px dotted rgba(108, 69, 198, 0.55);
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5.5vw, 4.25rem);
  padding-left: 1.5rem;
}

.case-act--tension {
  --case-act-bg: linear-gradient(180deg, rgba(230, 169, 63, 0.1), transparent 65%);
}

.case-act--evidence {
  --case-act-bg: linear-gradient(180deg, rgba(108, 69, 198, 0.09), transparent 70%);
  padding-block: clamp(2rem, 4.25vw, 3.25rem);
}

.case-act--system {
  --case-act-bg: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(108, 69, 198, 0.13), transparent 70%);
  padding-block: clamp(3rem, 6.5vw, 5.25rem);
}

.case-act--tradeoff {
  --case-act-bg: linear-gradient(180deg, rgba(61, 35, 85, 0.06), transparent 70%);
  padding-block: clamp(2rem, 4.25vw, 3.25rem);
}

.case-act--decisions {
  --case-act-bg: linear-gradient(180deg, rgba(61, 35, 85, 0.07), transparent 60%);
}

.case-act--reflection {
  --case-act-bg: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(108, 69, 198, 0.11), transparent 70%);
  padding-block: clamp(3rem, 6.5vw, 5.25rem);
}

/* Reusable bento surface — a soft, clearly-bounded content container used
   selectively (not on every paragraph) to give the page real containers
   instead of everything floating on one flat tint. */
.case-bento {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Reusable decorative starfield, CSS-only (no new asset). Applied to a
   handful of key surfaces, never as the sole carrier of information. */
.case-starfield {
  position: relative;
}

.case-starfield::before {
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(108, 69, 198, 0.4), transparent),
    radial-gradient(1px 1px at 32% 62%, rgba(108, 69, 198, 0.3), transparent),
    radial-gradient(1.6px 1.6px at 54% 30%, rgba(108, 69, 198, 0.32), transparent),
    radial-gradient(1px 1px at 74% 70%, rgba(108, 69, 198, 0.26), transparent),
    radial-gradient(1.2px 1.2px at 88% 22%, rgba(108, 69, 198, 0.3), transparent),
    radial-gradient(1px 1px at 20% 88%, rgba(108, 69, 198, 0.22), transparent);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

/* A handful of individually-animated stars, layered on top of the static
   starfield dots above. Each one fades slowly and independently — a soft
   shimmer, not a synchronized blink — so the motion reads as ambient
   atmosphere rather than something that competes for attention. Kept to
   a few instances per section by design. Fully neutralized by the site's
   existing prefers-reduced-motion / "Reduce motion" rules (see line ~133
   and ~1877), since those already force animation-duration to ~0 on
   every element. */
.case-twinkle-group {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.case-twinkle {
  animation: case-twinkle-fade 4.5s ease-in-out infinite;
  background: #fff;
  border-radius: 50%;
  height: 3px;
  position: absolute;
  width: 3px;
}

.case-page--nebula .case-twinkle {
  background: var(--neb-text, #fff);
  box-shadow: 0 0 4px 1px rgba(247, 244, 255, 0.5);
}

.case-twinkle-group .case-twinkle:nth-child(1) {
  animation-delay: 0s;
  animation-duration: 4.2s;
}

.case-twinkle-group .case-twinkle:nth-child(2) {
  animation-delay: -1.4s;
  animation-duration: 5.1s;
}

.case-twinkle-group .case-twinkle:nth-child(3) {
  animation-delay: -2.6s;
  animation-duration: 3.8s;
}

.case-twinkle-group .case-twinkle:nth-child(4) {
  animation-delay: -0.7s;
  animation-duration: 4.8s;
}

.case-twinkle-group .case-twinkle:nth-child(5) {
  animation-delay: -3.1s;
  animation-duration: 4.4s;
}

@keyframes case-twinkle-fade {
  0%,
  100% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.75;
  }
}

.case-act > h2 {
  max-width: var(--case-prose);
}

.case-act > p {
  color: var(--ink-soft);
  margin-top: 1.1rem;
  max-width: var(--case-prose);
}

/* Quiet sub-scene marker used when two acts are merged into one section
   (e.g. Evidence inside Problem, Trade-off inside System). Smaller and
   less prominent than the act's h2 — a beat, not a new act. */
.case-subheading {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 800;
  margin: clamp(2rem, 4vw, 2.75rem) 0 0.9rem;
  max-width: var(--case-prose);
}

.case-page--nebula .case-subheading {
  color: var(--neb-gold, var(--ink));
}

/* Coordinate tag — the single wayfinding system used across all 8 acts,
   replacing the varied eyebrow treatments the page used to have. */
.case-coord {
  align-items: center;
  color: var(--neb-gold, var(--plum-2));
  display: flex;
  font-size: 0.76rem;
  font-weight: 800;
  gap: 0.55rem;
  letter-spacing: 0.08em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.case-coord::before {
  background: var(--neb-gold, var(--plum-2));
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--line);
  content: "";
  flex-shrink: 0;
  height: 6px;
  margin-left: 2px;
  width: 6px;
}

.case-coord--final::before {
  box-shadow: 0 0 0 4px var(--lavender);
  height: 8px;
  width: 8px;
}

.case-band-dark .case-coord {
  color: #d9c8ff;
}

.case-band-dark .case-coord::before {
  background: #d9c8ff;
  box-shadow: 0 0 0 3px rgba(217, 200, 255, 0.35);
}

.case-eyebrow-label {
  color: var(--plum-2);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The single remaining highlight callout on the page, reserved for the
   trade-off resolution in Act 04. Everything else uses typography, not a
   purple box. */
.case-highlight {
  align-items: center;
  background: linear-gradient(155deg, #6c45c6 0%, #3e287a 100%);
  border-radius: var(--radius);
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  max-width: 660px;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.75rem, 3vw, 2.75rem);
  text-align: center;
}

.case-highlight-star {
  color: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
  height: 22px;
  width: 22px;
}

.case-highlight p {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
}

.case-highlight strong {
  color: #fff;
}

.case-media {
  margin: 1.75rem 0 0;
}

.case-media img,
.case-media video {
  border-radius: var(--radius);
  display: block;
  height: 100%;
  width: 100%;
}

.case-media video {
  background: #000;
}

.case-caption {
  color: var(--ink-soft);
  font-size: 0.82rem;
  margin-top: 0.6rem;
}

.case-caption-icon {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.case-caption-icon svg {
  color: var(--plum-2);
  flex-shrink: 0;
  height: 16px;
  width: 16px;
}

.case-caption-avatar {
  flex-shrink: 0;
  height: 17px;
  opacity: 0.85;
  width: auto;
}

.proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}

.case-hero-grid .proof-strip {
  background: none;
  border: none;
  border-radius: 0;
  column-gap: 1.75rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 0;
  row-gap: 1.15rem;
}

.case-hero-grid .proof-strip li {
  border-left: 1px solid var(--line);
  min-width: 0;
  padding: 0 0 0 1.5rem;
}

.case-hero-grid .proof-strip li:nth-child(odd) {
  border-left: none;
  padding-left: 0;
}

.proof-strip li {
  min-width: 110px;
}

.proof-strip-icon {
  align-items: center;
  color: var(--neb-gold, var(--plum-2));
  display: flex;
  height: 22px;
  margin-bottom: 0.5rem;
  width: 22px;
}

.proof-strip-icon svg {
  height: 100%;
  width: 100%;
}

.proof-strip strong {
  color: var(--ink);
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 900;
  line-height: 1.1;
}

.proof-strip span {
  color: var(--ink-soft);
  font-size: 0.8rem;
}

/* --------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------- */
.case-hero-grid {
  align-items: center;
  column-gap: clamp(2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr);
  row-gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.case-hero-statement {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.25;
  margin: 0.75rem 0 0;
}

.case-hero-tagline {
  color: var(--ink-soft);
  font-size: 1rem;
  margin-top: 1rem;
  max-width: var(--case-prose);
}

.case-hero-skills {
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.92rem;
  grid-column: 1 / -1;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  margin-top: 0;
  padding-top: 1rem;
  white-space: nowrap;
}

.case-hero-visual {
  display: flex;
  justify-content: flex-end;
  position: relative;
}

/* Hero: a single dominant Cockpit screen — its own on-screen character
   and robot already carry the product's personality, so nothing is
   composited on top of it or floated beside it. Just the real screen
   and the status badge. */
.case-hero-stack {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
  width: min(100%, 640px);
}

.case-hero-stack-primary {
  /* border: 1px solid var(--line); */
  /* border-radius: 14px; */
  /* box-shadow: var(--shadow); */
  display: block;
  height: auto;
  position: relative;
  width: 100%;
  z-index: 1;
}

.case-hero-visual::before {
  background: radial-gradient(circle, rgba(108, 69, 198, 0.26), transparent 72%);
  content: "";
  filter: blur(24px);
  height: 95%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  z-index: 0;
}

.case-hero-orbit {
  height: 112%;
  left: 50%;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 112%;
  z-index: 0;
}

.case-hero-orbit ellipse {
  fill: none;
  stroke: rgba(108, 69, 198, 0.2);
  stroke-dasharray: 2 8;
  stroke-width: 1.25;
}

.case-hero-star {
  fill: rgba(108, 69, 198, 0.4);
}

.case-hero-badge {
  align-items: center;
  background: var(--neb-void, rgba(251, 248, 255, 0.9));
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  color: var(--ink-soft);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  gap: 0.4rem;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  text-transform: uppercase;
  z-index: 4;
}

.case-hero-badge-dot {
  background: var(--plum-2);
  border-radius: 50%;
  flex-shrink: 0;
  height: 5px;
  width: 5px;
}

/* --------------------------------------------------------------------
   01 · TENSION — the tension IS the act; ownership is one closing line.
   -------------------------------------------------------------------- */
.case-tension-collage {
  align-items: start;
  display: grid;
  gap: 0 clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1.6fr clamp(20px, 3vw, 32px) 1fr;
  margin-top: 1.75rem;
}

.case-tension-media {
  grid-column: 1;
  margin-top: 0;
}

.case-tension-connectors {
  align-self: stretch;
  color: rgba(108, 69, 198, 0.35);
  grid-column: 2;
  height: 100%;
  justify-self: center;
  overflow: visible;
  width: 24px;
}

.case-tension-connectors path {
  fill: none;
  stroke: currentColor;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
  stroke-width: 1.5;
}

.case-tension-notes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  grid-column: 3;
  justify-content: center;
}

.case-tension-note {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  column-gap: 0.85rem;
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 1.25rem 1.4rem;
}

.case-tension-icon {
  align-items: center;
  background: rgba(108, 69, 198, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(108, 69, 198, 0.08);
  color: var(--neb-accent, var(--plum-2));
  display: flex;
  flex-shrink: 0;
  grid-row: 1 / 3;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.case-tension-note h3 {
  font-size: 0.95rem;
  grid-column: 2;
  margin: 0 0 0.3rem;
}

.case-tension-note p {
  color: var(--ink-soft);
  font-size: 0.88rem;
  grid-column: 2;
  margin: 0;
}

.case-opportunity-band {
  align-items: center;
  background: linear-gradient(135deg, rgba(108, 69, 198, 0.32), rgba(180, 138, 240, 0.16));
  border: 1px solid rgba(180, 138, 240, 0.4);
  border-radius: calc(var(--radius) + 6px);
  display: flex;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.case-opportunity-icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.06);
  color: var(--neb-gold, var(--plum-2));
  display: flex;
  flex-shrink: 0;
  height: 56px;
  justify-content: center;
  width: 56px;
}

.case-opportunity-icon svg {
  height: 24px;
  width: 24px;
}

.case-opportunity-copy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.case-opportunity-label {
  color: var(--neb-gold);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.case-opportunity-band .case-opportunity-statement {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  font-weight: 800;
  line-height: 1.35;
  margin: 0;
  max-width: 46ch;
}

.case-ownership-line {
  align-items: center;
  color: var(--ink-soft);
  display: flex;
  font-size: 0.92rem;
  gap: 0.65rem;
  margin-top: 1.5rem;
}

.case-ownership-line svg {
  color: var(--neb-gold, var(--plum-2));
  flex-shrink: 0;
  height: 20px;
  width: 20px;
}

/* --------------------------------------------------------------------
   02 · EVIDENCE — insights and principles side by side, a compact number
   strip, and a small Known/Assumed/Needed-validation synthesis in place
   of treating the survey chart and CSD matrix as protagonists.
   -------------------------------------------------------------------- */
.case-evidence-board {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
  grid-template-areas:
    "hero     hero     stats"
    "insights insights csd"
    "synth    synth    synth"
    "cap      cap      cap";
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.case-evidence-hero {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  grid-area: hero;
  margin: 0;
  padding: 1.6rem;
}

.case-evidence-hero img {
  height: auto;
  opacity: 1;
  width: 100%;
}

.case-evidence-stats {
  align-items: baseline;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  grid-area: stats;
  padding: 1.1rem 1.4rem;
}

.case-evidence-stat-primary {
  margin: 0;
}

.case-evidence-stat-primary strong {
  color: var(--ink);
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 2.75rem);
  font-weight: 900;
  line-height: 1;
}

.case-evidence-stat-primary span {
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.case-evidence-stats-secondary {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-evidence-stats-secondary strong {
  color: var(--ink);
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.15;
}

.case-evidence-stats-secondary span {
  color: var(--ink-soft);
  font-size: 0.76rem;
}

.case-evidence-insights {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-area: insights;
  grid-template-columns: 1fr 1fr;
  padding: clamp(1.4rem, 3vw, 1.9rem);
}

.case-act2-column {
  min-width: 0;
}

.case-act2-column.is-shaped {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}

.case-act2-label {
  align-items: center;
  color: var(--neb-gold);
  display: flex;
  font-size: 0.76rem;
  font-weight: 800;
  gap: 0.5rem;
  letter-spacing: 0.06em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.case-act2-dot {
  background: var(--neb-gold);
  border-radius: 50%;
  flex-shrink: 0;
  height: 6px;
  width: 6px;
}

.case-round-icon {
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--lavender);
  border-radius: 50%;
  color: var(--plum-2);
  display: flex;
  flex-shrink: 0;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.case-round-icon svg {
  height: 20px;
  width: 20px;
}

.case-insight-list,
.case-principles-list {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-insight-list li,
.case-principles-list li {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 1rem;
  padding: 0.9rem 0;
}

.case-insight-list li:last-child,
.case-principles-list li:last-child {
  border-bottom: none;
}

.case-insight-list li span:last-child {
  color: var(--ink);
  font-weight: 700;
}

.case-principles-list h3 {
  font-size: 0.95rem;
  margin: 0 0 0.25rem;
}

.case-principles-list p {
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin: 0;
}

.case-evidence-synthesis {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 1.5rem;
  grid-area: synth;
  grid-template-columns: repeat(3, 1fr);
  padding: 1.1rem 1.4rem;
}

.case-evidence-synthesis-label {
  color: var(--neb-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
}

.case-evidence-synthesis-item p:last-child {
  color: var(--ink);
  font-size: 0.9rem;
  margin: 0;
}

.case-evidence-csd {
  align-self: end;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  grid-area: csd;
  justify-self: start;
  margin: 0;
  max-width: 300px;
  padding: 0.85rem;
}

.case-evidence-csd img {
  height: auto;
  opacity: 0.85;
  width: 100%;
}

.case-evidence-caption {
  grid-area: cap;
  margin: 0;
}

/* --------------------------------------------------------------------
   03 · SYSTEM — two connected experiences, one shared ecosystem. Reuses
   the same child/parent avatar icons as Act 01 and Act 05 so the same
   two audiences read as one continuing idea across the page.
   -------------------------------------------------------------------- */
/* Single panel holding the orbital diagram + trade-off + direction call-out
   together, so System and Trade-off read as one dense, high-density visual
   argument rather than three separate floating groups. */
.case-system-panel {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: clamp(2rem, 4.5vw, 3.5rem);
}

.case-system-panel .case-system-orbital {
  margin-top: 0;
}

.case-system-panel .case-subheading {
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.case-system-panel .case-highlight {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.case-system-orbital {
  align-items: center;
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-areas: "child orbit parent";
  grid-template-columns: 1fr auto 1fr;
  margin: clamp(2.5rem, 5vw, 4rem) 0 2rem;
}

.case-system-track {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.case-system-track.is-child {
  grid-area: child;
}

.case-system-track.is-parent {
  grid-area: parent;
}

.case-system-track .case-tension-icon {
  height: 52px;
  margin: 0 auto 1rem;
  width: 52px;
}

.case-system-track .case-tension-icon svg {
  height: 24px;
  width: 24px;
}

.case-system-track-label {
  color: var(--ink);
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
}

.case-system-track-path {
  color: var(--ink-soft);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  margin: 0.6rem 0 0;
}

.case-system-orbit-wrap {
  align-items: center;
  display: flex;
  grid-area: orbit;
  justify-content: center;
  position: relative;
}

.case-system-orbit-wrap::before {
  background: radial-gradient(circle, rgba(108, 69, 198, 0.24), transparent 70%);
  content: "";
  filter: blur(18px);
  height: 300px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  z-index: 0;
}

.case-system-orbit-lines {
  height: 160px;
  left: 50%;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  z-index: 0;
}

.case-system-orbit-lines path {
  fill: none;
  stroke: rgba(108, 69, 198, 0.3);
  stroke-dasharray: 2 7;
  stroke-width: 1.5;
}

.case-system-orbit-lines path.is-right {
  stroke: rgba(184, 121, 42, 0.35);
}

.case-system-orbit-ring {
  border: 1px dashed rgba(108, 69, 198, 0.32);
  border-radius: 50%;
  height: 214px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 214px;
  z-index: 0;
}

.case-system-orbit-ring::before {
  border: 1px dashed rgba(108, 69, 198, 0.16);
  border-radius: 50%;
  content: "";
  inset: -20px;
  position: absolute;
}

.case-system-core {
  align-items: center;
  background: linear-gradient(155deg, #6c45c6 0%, #3e287a 100%);
  border-radius: 50%;
  box-shadow: 0 14px 36px rgba(61, 35, 85, 0.26);
  color: #fff;
  display: flex;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  height: 158px;
  justify-content: center;
  line-height: 1.32;
  padding: 0.65rem;
  position: relative;
  text-align: center;
  width: 158px;
  z-index: 1;
}

/* --------------------------------------------------------------------
   04 · TRADE-OFF — one horizontal resolution, not two competing cards.
   -------------------------------------------------------------------- */
.case-tradeoff {
  align-items: center;
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: 1fr auto 1fr;
  margin: 2rem 0 0;
  position: relative;
}

.case-tradeoff::before {
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
  content: "";
  height: 2px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(90px, 16vw, 160px);
  z-index: 0;
}

.case-tradeoff-side {
  max-width: 320px;
  padding: 0;
  position: relative;
  z-index: 1;
}

.case-tradeoff-side.is-right {
  margin-left: auto;
  text-align: right;
}

.case-tradeoff-label {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 0.6rem;
}

.case-tradeoff-side p:last-child {
  color: var(--ink-soft);
  font-size: 0.86rem;
  margin: 0;
}

.case-tradeoff-pivot {
  align-items: center;
  background: var(--plum-2);
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--cream), 0 0 0 8px rgba(108, 69, 198, 0.2);
  display: flex;
  height: 28px;
  justify-content: center;
  position: relative;
  width: 28px;
  z-index: 1;
}

.case-tradeoff-pivot svg {
  color: #fff;
  height: 14px;
  width: 14px;
}

/* --------------------------------------------------------------------
   05 · DECISIONS — editorial blocks separated by a thin top rule, not
   cards with shadows. Decision 03 reuses the dual-audience diagram.
   -------------------------------------------------------------------- */
.case-decision-trail {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding-inline: 0.4rem;
  position: relative;
}

.case-decision-trail::before {
  background: repeating-linear-gradient(
    to right,
    rgba(108, 69, 198, 0.4) 0,
    rgba(108, 69, 198, 0.4) 4px,
    transparent 4px,
    transparent 10px
  );
  content: "";
  height: 1px;
  left: 0.4rem;
  position: absolute;
  right: 0.4rem;
  top: 50%;
}

.case-decision-trail span {
  background: var(--plum-2);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--lavender);
  height: 6px;
  position: relative;
  width: 6px;
  z-index: 1;
}

.case-decision-cards {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  margin-top: 1.5rem;
}

.case-decision-card {
  border-top: 3px solid var(--lavender);
  display: flex;
  flex-direction: column;
  padding-top: 1.5rem;
}

.case-decision-card.is-featured {
  align-items: center;
  border-top: none;
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: 1.4fr 1fr;
  padding-top: 0;
}

.case-decision-card.is-featured .case-decision-media {
  aspect-ratio: 4 / 3;
}

.case-decision-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.case-decision-card.is-featured h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}

.case-decision-card.is-featured .case-decision-statement {
  font-size: 1.02rem;
}

.case-decision-pair {
  display: grid;
  gap: clamp(2rem, 4vw, 2.75rem);
  grid-template-columns: repeat(2, 1fr);
}

.case-decision-media {
  aspect-ratio: 4 / 3;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.case-decision-media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.case-decision-tag {
  color: var(--neb-gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 1.1rem 0 0.15rem;
}

.case-decision-card h3 {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}

.case-decision-statement {
  color: var(--ink);
  font-size: 0.95rem;
  margin: 0;
}

.case-decision-facts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.case-decision-fact {
  align-items: baseline;
  color: var(--ink-soft);
  display: flex;
  font-size: 0.74rem;
  gap: 0.4rem;
  line-height: 1.4;
  margin: 0;
}

.case-decision-fact strong {
  color: var(--ink-soft);
  font-weight: 700;
}

.case-decision-fact.is-boundary strong {
  color: var(--ink-soft);
}

.case-decision-fact .case-round-icon {
  display: none;
}

.case-decision-media.is-dual {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.case-dual-audience {
  align-items: center;
  display: flex;
  gap: 2rem;
  position: relative;
}

.case-dual-audience::before {
  border: 1.5px dashed rgba(108, 69, 198, 0.28);
  border-radius: 50%;
  content: "";
  height: 140%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
}

.case-dual-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  z-index: 1;
}

.case-dual-avatar {
  align-items: center;
  border-radius: 50%;
  display: flex;
  height: 72px;
  justify-content: center;
  width: 72px;
}

.case-dual-avatar svg {
  height: 32px;
  width: 32px;
}

.case-dual-item.is-child .case-dual-avatar {
  background: var(--lavender);
  color: var(--neb-text);
}

.case-dual-item.is-parent .case-dual-avatar {
  background: #fbe4c6;
  color: #a5661f;
}

.case-dual-item span {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 700;
}

.case-dual-connector {
  align-items: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
  color: var(--plum-2);
  display: flex;
  height: 38px;
  justify-content: center;
  position: relative;
  width: 38px;
  z-index: 1;
}

.case-dual-connector svg {
  height: 18px;
  width: 18px;
}

.case-dual-caption {
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-top: 1.25rem;
  text-align: center;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------
   06 · TESTING — a numbered rail runs beside two rounds; each round is
   three labelled lines (Before / What children revealed / Design
   direction), not icon-badge rows. Closes with the accessibility and
   cognitive-clarity synthesis, absorbed here rather than a separate act.
   -------------------------------------------------------------------- */
.case-timeline {
  display: flex;
  flex-direction: column;
  margin-top: 1.75rem;
}

.case-timeline-round {
  align-items: stretch;
  display: flex;
  gap: 1.25rem;
  min-width: 0;
}

.case-timeline-marker {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 52px;
}

.case-timeline-number {
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--lavender);
  border-radius: 50%;
  color: var(--plum-2);
  display: flex;
  flex-shrink: 0;
  font-size: 1.05rem;
  font-weight: 800;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.case-timeline-marker-line {
  background: var(--line);
  flex: 1;
  margin: 0.35rem 0;
  min-height: 1.5rem;
  width: 2px;
}

.case-timeline-connector {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 52px;
}

.case-timeline-connector-line {
  background: repeating-linear-gradient(
    to bottom,
    rgba(108, 69, 198, 0.45) 0,
    rgba(108, 69, 198, 0.45) 3px,
    transparent 3px,
    transparent 7px
  );
  display: block;
  height: 1.5rem;
  width: 2px;
}

.case-timeline-waypoint {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--neb-gold);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  max-width: 88px;
  padding: 0.25rem 0.5rem;
  text-align: center;
  text-transform: uppercase;
}

.case-timeline-arrowhead {
  color: var(--line);
  height: 8px;
  margin-top: -1px;
  width: 12px;
}

.case-timeline-card {
  border-top: 3px solid var(--line);
  flex: 1;
  min-width: 0;
  padding: 1.5rem 0 0;
}

.case-timeline-card.is-round1 {
  border-top: 3px dashed rgba(108, 69, 198, 0.4);
}

.case-timeline-card.is-round2 {
  border-top: 3px solid var(--plum-2);
}

.case-timeline-tag {
  color: var(--neb-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0 0 1.1rem;
  text-transform: uppercase;
}

.case-timeline-body {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 641px) {
  .case-timeline-card.is-round2 .case-timeline-body {
    flex-direction: row-reverse;
  }
}

.case-timeline-media {
  background: var(--paper);
  border-radius: var(--radius);
  flex: 1.3 1 320px;
  margin: 0;
  max-width: 460px;
  overflow: hidden;
  padding: 0.65rem;
}

.case-timeline-media.is-tinted {
  background: var(--lavender);
}

.case-timeline-media img {
  border-radius: calc(var(--radius) - 4px);
  display: block;
  height: auto;
  width: 100%;
}

.case-timeline-notes {
  display: grid;
  flex: 0.9 1 230px;
  gap: 0.9rem;
  min-width: 0;
}

.case-timeline-line {
  color: var(--ink);
  font-size: 0.88rem;
  margin: 0;
}

.case-timeline-line span {
  color: var(--neb-gold);
  display: block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
}

.case-status-flag {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  display: inline-block;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-left: 0.5rem;
  padding: 0.2rem 0.6rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.case-testing-synthesis {
  color: var(--ink-soft);
  margin-top: 2rem;
  max-width: var(--case-prose);
}

.case-boundary {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 0.75rem 0 0;
  max-width: var(--case-prose);
}

/* --------------------------------------------------------------------
   07 · PROTOTYPE — from direction to coded prototype. Dark, full-bleed,
   breaks out of the page frame; no left spine here (its own composition
   already carries the wayfinding tag as a light-on-dark coordinate).
   -------------------------------------------------------------------- */
.case-band-dark {
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 28% 68%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1.5px 1.5px at 46% 12%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 63% 45%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 82% 78%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 91% 30%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 8% 88%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(circle at 80% 15%, rgba(217, 79, 140, 0.13), transparent 45%),
    radial-gradient(circle at 12% 78%, rgba(94, 138, 224, 0.11), transparent 42%),
    linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)),
    linear-gradient(155deg, var(--hero-navy-0) 0%, var(--hero-violet-1) 55%, var(--hero-violet-2) 100%);
  margin-block: clamp(2.5rem, 5vw, 4.25rem);
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  position: relative;
  width: 100vw;
}

.case-band-dark::before {
  background-image: url("../assets/images/projects/nebula-texture-nevoa.svg");
  background-position: 100% 0%;
  background-repeat: no-repeat;
  background-size: 60% auto;
  content: "";
  inset: 0;
  opacity: 0.16;
  pointer-events: none;
  position: absolute;
}

.case-band-dark .case-section-inner {
  margin-inline: auto;
  max-width: var(--case-frame);
  padding-inline: 1.25rem;
  position: relative;
  z-index: 1;
}

.case-band-dark h2,
.case-band-dark p {
  color: var(--hero-ink, #fff8ef);
}

.case-band-reflection {
  border-left: 3px solid rgba(196, 168, 255, 0.5);
  color: rgba(255, 248, 239, 0.78);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.55;
  margin-top: 1.85rem;
  padding-left: 1.25rem;
}

.case-band-dark .case-tags {
  margin-top: 1.5rem;
}

.case-band-dark .case-tags li {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff8ef;
}

.case-tags-tech li {
  align-items: center;
  display: inline-flex;
  font-size: 0.85rem;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem 0.7rem 0.7rem;
}

.case-tag-icon {
  align-items: center;
  border-radius: 6px;
  color: #fff;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 800;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.case-tag-icon.is-html {
  background: #c4441f;
}

.case-tag-icon.is-css {
  background: #2359d1;
}

.case-tag-icon.is-bootstrap {
  background: #6f3fae;
}

.case-tag-icon.is-react {
  background: #0e7093;
}

.case-tag-icon.is-router {
  background: #9d174d;
  font-size: 0.66rem;
}

.case-act5-stat {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  display: flex;
  gap: 1rem;
  margin-top: 1.75rem;
  padding: 1.1rem 1.5rem;
  width: 100%;
}

.case-act5-stat-icon {
  align-items: center;
  background: rgba(196, 168, 255, 0.16);
  border-radius: 50%;
  color: #d9c8ff;
  display: flex;
  flex-shrink: 0;
  font-size: 1.3rem;
  font-weight: 800;
  height: 58px;
  justify-content: center;
  width: 58px;
}

.case-act5-stat strong {
  color: #fff8ef;
  display: block;
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1.1;
}

.case-act5-stat span {
  color: rgba(255, 248, 239, 0.72);
  font-size: 0.92rem;
}

.case-act5-grid {
  align-items: start;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 2.2fr);
  margin-top: 1.75rem;
}

.case-act5-sidebar p {
  font-size: 0.92rem;
}

.case-act5-sidebar .case-band-reflection,
.case-act5-sidebar .case-boundary {
  font-size: 0.86rem;
}

.case-act5-media-col {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  min-width: 0;
  padding: 1.5rem;
}

.case-act5-media-col .case-media {
  margin-top: 0;
}

.case-act5-media-col .case-media video {
  aspect-ratio: 2 / 1;
  height: auto;
  object-fit: cover;
}

/* Built-product bento: Cockpit and Galaxy (.is-primary) each take half of
   the top row; Home, Library and Missions share a shorter supporting row
   below, read left-to-right as dashboard → exploration → guided reading →
   library → missions. */
.case-act5-crops {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 0.9rem;
  min-width: 0;
}

.case-act5-crops picture {
  display: block;
  grid-column: span 2;
  min-width: 0;
}

.case-act5-crops picture.is-primary {
  grid-column: span 3;
}

.case-act5-crops img {
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.case-act5-crops picture.is-primary img {
  aspect-ratio: 16 / 11;
}

.case-band-dark .case-act5-media-col .case-caption {
  color: rgba(255, 248, 239, 0.72);
}

.case-flow-strip {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.35rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.25rem 0 0;
}

.case-flow-strip li {
  align-items: center;
  color: rgba(255, 248, 239, 0.58);
  display: flex;
  font-size: 0.66rem;
  font-weight: 600;
  gap: 0.4rem;
  letter-spacing: 0.01em;
}

.case-flow-strip li::before {
  background: rgba(217, 200, 255, 0.7);
  border-radius: 50%;
  content: "";
  flex-shrink: 0;
  height: 4px;
  width: 4px;
}

/* --------------------------------------------------------------------
   08 · REFLECTION — a single editorial close: honest judgment, three
   priorities (not five operational tasks), three integrated lines with
   no artificial heading, then the one status line and the CTA.
   -------------------------------------------------------------------- */
.case-reflection-thesis {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.5;
  max-width: 62ch;
}

.case-priority-list {
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0;
  max-width: var(--case-prose);
  padding: 0;
}

.case-priority-list li {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  display: flex;
  font-size: 0.95rem;
  font-weight: 500;
  gap: 1rem;
  line-height: 1.5;
  padding: 1rem 0;
}

.case-next-number {
  color: var(--neb-gold, var(--plum-2));
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
}

.case-close-competencies {
  color: var(--ink);
  font-size: 1rem;
  margin: 0 0 2rem;
  max-width: var(--case-prose);
}

.case-close-footer {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 1.5rem;
}

.case-close-status {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.case-close-julie {
  flex-shrink: 0;
  height: 40px;
  opacity: 0.9;
  width: auto;
}

.case-status-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-status-tags li {
  --ink-soft: #442c85;
  align-items: center;
  background: #fff;
  border: 1px solid #ede5ff;
  border-radius: 999px;
  color: var(--ink-soft);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 0.4rem;
  letter-spacing: 0.01em;
  padding: 0.45rem 0.85rem;
}

.case-status-tags li svg {
  color: var(--plum-2);
  flex-shrink: 0;
  height: 14px;
  width: 14px;
}

.case-status-dot {
  background: var(--plum-2);
  border-radius: 50%;
  flex-shrink: 0;
  height: 10px;
  width: 10px;
}

/* --------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */
@media (max-width: 900px) {
  .case-hero-grid,
  .case-tension-collage,
  .case-tradeoff,
  .case-act5-grid {
    grid-template-columns: 1fr;
  }

  .case-hero-visual {
    justify-content: center;
    order: -1;
  }

  .case-hero-skills {
    white-space: normal;
  }

  .case-tension-connectors {
    display: none;
  }

  .case-tension-notes {
    gap: 1.5rem;
    margin-top: 1.5rem;
  }

  .case-evidence-board {
    grid-template-areas:
      "hero     hero"
      "stats    stats"
      "insights insights"
      "csd      csd"
      "synth    synth"
      "cap      cap";
    grid-template-columns: 1fr 1fr;
  }

  .case-evidence-csd {
    justify-self: stretch;
    max-width: none;
  }

  .case-system-orbital {
    grid-template-areas:
      "child"
      "orbit"
      "parent";
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .case-system-orbit-lines {
    display: none;
  }

  .case-tradeoff::before {
    display: none;
  }

  .case-tradeoff-side {
    max-width: none;
  }

  .case-tradeoff-side.is-right {
    margin-left: 0;
    text-align: left;
  }

  .case-tradeoff-pivot {
    margin: 0 auto;
  }

  .case-decision-card.is-featured {
    grid-template-columns: 1fr;
  }

  .case-act5-crops {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }

  .case-act5-crops picture,
  .case-act5-crops picture.is-primary {
    grid-column: span 1;
  }
}

@media (max-width: 640px) {
  .case-act {
    padding-left: 1.1rem;
  }

  .case-opportunity-band {
    align-items: flex-start;
    flex-direction: column;
  }

  .case-decision-pair {
    grid-template-columns: 1fr;
  }

  .case-act5-crops {
    grid-template-columns: 1fr;
  }

  .case-act5-crops picture,
  .case-act5-crops picture.is-primary {
    grid-column: span 1;
  }

  .case-act5-crops picture.is-primary img {
    aspect-ratio: 4 / 3;
  }

  .case-timeline-media {
    max-width: 100%;
  }

  .case-evidence-board {
    grid-template-areas: none;
    grid-template-columns: 1fr;
  }

  .case-evidence-insights {
    grid-template-columns: 1fr;
  }

  .case-act2-column.is-shaped {
    border-left: none;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 1.5rem;
  }

  .case-evidence-synthesis {
    grid-template-columns: 1fr;
  }

  .case-close-julie {
    display: none;
  }
}

/* ==========================================================================
   Final theme and navigation overrides
   ========================================================================== */
body[data-dark="true"] {
  background:
    radial-gradient(circle at 18% 5%, rgba(108, 69, 198, 0.18), transparent 24rem),
    radial-gradient(circle at 88% 14%, rgba(230, 169, 63, 0.12), transparent 20rem),
    var(--cream);
}

body[data-dark="true"] :is(.about-page, .article-hub, .article-page, .framework-page) {
  background:
    linear-gradient(90deg, rgba(255, 248, 239, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(240, 201, 106, 0.04) 1px, transparent 1px),
    var(--cream);
}

body[data-dark="true"] :is(.framework-page-hero, .article-body, .learning-lab) {
  background:
    linear-gradient(135deg, rgba(45, 28, 59, 0.92), rgba(33, 20, 45, 0.96)),
    var(--cream);
  border-color: var(--line);
}

body[data-dark="true"] :is(.about-hero-card, .about-proof-grid article, .learning-lab-grid article, .article-card, .article-post-hero, .framework-card, .framework-step, .spark-application, .spark-example) {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}

body[data-dark="true"] :is(.article-card p, .article-body p, .article-body li, .framework-page-hero p, .about-hero p:not(.eyebrow), .about-story-grid p, .learning-lab .section-heading p, .learning-lab-grid p) {
  color: var(--ink-soft);
}

body[data-dark="true"] :is(.site-header, .site-header[data-elevated="true"]) {
  background: rgba(33, 20, 45, 0.94);
  border-bottom-color: rgba(255, 248, 239, 0.14);
  backdrop-filter: blur(18px);
}

body[data-dark="true"] .site-header .primary-nav:not([data-open="true"]) a {
  color: #fff8ef;
}

body[data-dark="true"] .site-header .primary-nav:not([data-open="true"]) a:is(.is-active, [aria-current]) {
  color: #f0c96a;
}

body[data-dark="true"] .site-header .primary-nav:not([data-open="true"]) a::after {
  background: #f0c96a;
}

body[data-dark="true"] .site-header .primary-nav:not([data-open="true"]) .button-ghost {
  background: rgba(255, 248, 239, 0.1);
  border-color: rgba(255, 248, 239, 0.36);
}

body[data-dark="true"] .work {
  background:
    linear-gradient(90deg, rgba(255, 248, 239, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(240, 201, 106, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, #21142d 0%, #2d1c3b 100%);
  border-color: rgba(255, 248, 239, 0.12);
}

body[data-dark="true"] .work :is(.section-heading h2, .case-card h3) {
  color: #fff8ef;
}

body[data-dark="true"] .work :is(.section-heading p:not(.eyebrow), .case-card p) {
  color: #ded0e9;
}

body[data-dark="true"] .work-view-all {
  background: rgba(255, 248, 239, 0.08);
  border-color: rgba(255, 248, 239, 0.32);
  color: #fff8ef;
}

body[data-dark="true"] .work .case-card:not(.case-featured) {
  background: #2d1c3b;
  border-color: rgba(255, 248, 239, 0.16);
}

body[data-dark="true"] .work .case-card:not(.case-featured) .case-role {
  color: #f0c96a !important;
}

body[data-dark="true"] .work .case-card:not(.case-featured) .case-tags li {
  background: rgba(255, 248, 239, 0.08);
  border-color: rgba(255, 248, 239, 0.24);
  color: #fff8ef;
}

body[data-dark="true"] .work .case-card:not(.case-featured) .case-link {
  color: #fff8ef;
}

body[data-dark="true"] .work .case-card:not(.case-featured) .case-link span,
body[data-dark="true"] .case-link span {
  background: #f0c96a;
  color: #21142d;
}

body[data-dark="true"] .framework-hero-note {
  background:
    linear-gradient(180deg, rgba(45, 28, 59, 0.96), rgba(33, 20, 45, 0.96));
  border-color: rgba(255, 248, 239, 0.18);
}

body[data-dark="true"] .framework-hero-note::before {
  color: rgba(255, 248, 239, 0.06);
}

body[data-dark="true"] .framework-hero-note span {
  color: #fff8ef;
}

body[data-dark="true"] .framework-hero-note p {
  color: #ded0e9;
}

body[data-dark="true"] .framework-method {
  background:
    linear-gradient(135deg, rgba(45, 28, 59, 0.96), rgba(33, 20, 45, 0.98));
}

body[data-dark="true"] .framework-method-list li {
  border-color: rgba(255, 248, 239, 0.14);
  color: #ded0e9;
}

body[data-dark="true"] .framework-method-list strong {
  color: #fff8ef;
}

body[data-dark="true"] .button-primary {
  background: #f0c96a;
  border-color: #f0c96a;
  color: #21142d;
}

body[data-dark="true"] .button-secondary,
body[data-dark="true"] .button-ghost,
body[data-dark="true"] .button-small {
  background: rgba(255, 248, 239, 0.08);
  border-color: rgba(255, 248, 239, 0.32);
  color: #fff8ef;
}

body[data-dark="true"] .contact-promises {
  background: linear-gradient(90deg, rgba(45, 28, 59, 0.96), rgba(61, 35, 85, 0.9));
  border: 1px solid rgba(255, 248, 239, 0.14);
}

body[data-dark="true"] .contact-promises div + div {
  border-left-color: rgba(255, 248, 239, 0.2);
}

body[data-dark="true"] .contact-promises span {
  background: rgba(240, 201, 106, 0.18);
  color: #f0c96a;
}

body[data-dark="true"] .contact-promises p {
  color: #fff8ef;
}

body[data-dark="true"] .work-cta {
  background: linear-gradient(90deg, rgba(45, 28, 59, 0.96), rgba(61, 35, 85, 0.9));
  border: 1px solid rgba(255, 248, 239, 0.14);
}

body[data-dark="true"] .work-cta-icon {
  background: rgba(240, 201, 106, 0.18);
  color: #f0c96a;
}

body[data-dark="true"] .work-cta h3 {
  color: #fff8ef;
}

body[data-dark="true"] .work-cta p {
  color: #ded0e9;
}

body[data-dark="true"] :focus-visible, .site-header-on-dark :focus-visible { outline-color: #f1c77f; }
.case-reading-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-block: 2rem; }
.case-reading-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.case-project-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; max-width: 1200px; margin: 2rem auto; padding: 1.5rem; border-block: 1px solid var(--line); color: var(--ink); }
.case-project-summary dt { font-weight: 800; font-size: .875rem; margin-bottom: .4rem; }
.case-project-summary dd { margin: 0; font-size: 1rem; line-height: 1.6; }
.spark-worked-example { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: clamp(1.25rem, 4vw, 2.5rem); margin-block: 2rem; }
.spark-worked-example img { display: block; width: 100%; max-width: 800px; height: auto; margin: 1.5rem auto; }
.spark-worked-example dl > div { border-top: 1px solid var(--line); padding-block: 1rem; }
.spark-worked-example dt { font-weight: 800; margin-bottom: .5rem; }
.spark-worked-example dd { margin: 0; line-height: 1.7; }
.resume-experience h3 { margin-bottom: .25rem; }
@media (max-width: 760px) { .case-project-summary { grid-template-columns: 1fr; margin-inline: 1.25rem; } }