@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../assets/fonts/atkinson-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../assets/fonts/atkinson-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #f4f7f5;
  --paper: #ffffff;
  --ink: #102c2d;
  --ink-soft: #365354;
  --rule: #a9bcba;
  --rule-light: #dce5e2;
  --cobalt: #1546d8;
  --cobalt-dark: #0d2d91;
  --orange: #f05a28;
  --orange-light: #ffe0d2;
  --green: #08785f;
  --green-light: #cff1e6;
  --yellow: #ffd84d;
  --sky: #d9e9ff;
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-body: "Atkinson Hyperlegible Next", Verdana, sans-serif;
  --step--1: clamp(0.88rem, 0.84rem + 0.16vw, 0.98rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
  --step-1: clamp(1.2rem, 1.08rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.55rem, 1.28rem + 1.1vw, 2.25rem);
  --step-3: clamp(2rem, 1.46rem + 2.2vw, 3.5rem);
  --step-4: clamp(2.7rem, 1.72rem + 4vw, 5.5rem);
  --step-5: clamp(3.4rem, 1.9rem + 6vw, 6rem);
  --s1: 0.5rem;
  --s2: 0.75rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2rem;
  --s6: 3rem;
  --s7: 4.5rem;
  --s8: 7rem;
  --page: min(100% - 2rem, 90rem);
  --reading: 70ch;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--step-0)/1.58 var(--font-body);
}

::selection { background: var(--yellow); color: var(--ink); }

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

img {
  display: block;
  max-width: 100%;
  height: auto;
  outline: 1px solid oklch(0 0 0 / 0.1);
  outline-offset: -1px;
}

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
a:hover { text-decoration-thickness: 0.14em; }

p, li, dd, figcaption { text-wrap: pretty; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); max-width: 17ch; }
h2 { font-size: var(--step-3); max-width: 24ch; }
h3 { font-size: var(--step-2); max-width: 30ch; }
h4 { font-size: var(--step-1); }
p { margin: 0; }

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  transform: translateY(-150%);
  background: var(--ink);
  color: white;
  padding: 0.8rem 1rem;
  transition: transform 150ms ease-out;
}

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

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

.site-head {
  width: var(--page);
  min-height: 5rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto;
  gap: var(--s4);
  align-items: center;
  border-bottom: 1px solid var(--ink);
}

.brand { display: flex; align-items: baseline; gap: var(--s2); text-decoration: none; min-height: 44px; }
.brand strong { font: 700 var(--step-1)/1 var(--font-display); letter-spacing: -0.03em; }
.brand span { color: var(--ink-soft); font-size: var(--step--1); }

.site-nav ul { display: flex; align-items: center; gap: clamp(0.3rem, 1.5vw, 1.5rem); list-style: none; margin: 0; padding: 0; }
.site-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 -2px transparent;
  transition-property: color, box-shadow;
  transition-duration: 140ms;
  transition-timing-function: ease-out;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--cobalt); box-shadow: inset 0 -2px currentColor; }

.button-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.72rem 0.9rem 0.72rem 1rem;
  background: var(--ink);
  color: white;
  font: 600 var(--step--1)/1 var(--font-display);
  text-decoration: none;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 8%), 0 2px 4px rgb(0 0 0 / 12%);
  transition-property: background-color, scale, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.button-link:hover { background: var(--cobalt); box-shadow: 0 0 0 1px rgb(0 0 0 / 10%), 0 4px 8px rgb(0 0 0 / 16%); }
.button-link:active { scale: 0.96; }
.button-link svg { width: 1.15em; height: 1.15em; stroke: currentColor; stroke-width: 2; fill: none; }

.page-shell { width: var(--page); margin-inline: auto; }
.measure { max-width: var(--reading); }
.meta-line { font-family: var(--font-display); color: var(--ink-soft); font-size: var(--step--1); }
.lede { font-size: var(--step-1); line-height: 1.45; max-width: 58ch; }
.accent { color: var(--orange); }

.home-hero {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(16rem, 0.85fr) minmax(31rem, 1.45fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: stretch;
  padding-block: clamp(3rem, 8vh, 7rem);
}

.home-intro { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s6); }
.home-intro h1 { font-size: clamp(2.6rem, 3.6vw, 4.2rem); max-width: 18ch; }
.home-intro .lede { margin-top: var(--s5); }
.home-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.text-link { min-height: 44px; display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 600; color: var(--cobalt); }

.section { padding-block: var(--s8); border-top: 1px solid var(--ink); }
.section-head { display: grid; grid-template-columns: minmax(11rem, 0.42fr) 1fr; gap: var(--s6); align-items: start; margin-bottom: var(--s7); }
.section-head > :only-child { grid-column: 2; }
.section-head p { max-width: 54ch; font-size: var(--step-1); }
.section-label { font: 600 var(--step--1)/1.3 var(--font-display); color: var(--ink-soft); }

.project-feature { display: grid; gap: var(--s6); align-items: center; }
.project-feature + .project-feature { margin-top: var(--s8); }
.project-feature--darwin { grid-template-columns: minmax(18rem, 0.7fr) minmax(28rem, 1.3fr); }
.project-feature--insync { grid-template-columns: minmax(28rem, 1.2fr) minmax(18rem, 0.8fr); }
.project-feature--journey { grid-template-columns: minmax(17rem, 0.55fr) minmax(28rem, 1.45fr); }
.feature-copy h3 { margin-bottom: var(--s4); }
.feature-copy p + p { margin-top: var(--s3); }
.feature-copy .button-link { margin-top: var(--s5); }
.feature-image { position: relative; }
.feature-image img { width: 100%; background: var(--paper); }
.feature-image figcaption { margin-top: var(--s2); max-width: 64ch; color: var(--ink-soft); font-size: var(--step--1); }
.feature-image--crop { max-height: 37rem; overflow: hidden; }
.feature-image--crop img { height: 100%; object-fit: cover; object-position: top; }
.phone-rack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.4rem, 1.2vw, 1rem); align-items: end; }
.phone-rack img:nth-child(2), .phone-rack img:nth-child(4) { transform: translateY(2rem); }

.principles { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s7); align-items: start; }
.principles-list { border-top: 1px solid var(--ink); }
.principle { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--s4); padding-block: var(--s4); border-bottom: 1px solid var(--rule); }
.principle b { font-family: var(--font-display); color: var(--cobalt); font-variant-numeric: tabular-nums; }
.principle h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }

.contact-band { background: var(--orange); color: #1c1b16; padding-block: var(--s7); }
.contact-grid { width: var(--page); margin-inline: auto; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--s6); }
.contact-grid h2 { font-size: var(--step-4); }
.contact-grid p { max-width: 50ch; margin-top: var(--s4); font-size: var(--step-1); }

.site-footer { background: var(--ink); color: white; padding-block: var(--s6); }
.footer-grid { width: var(--page); margin-inline: auto; display: grid; grid-template-columns: 1fr auto; gap: var(--s5); align-items: end; }
.footer-grid strong { font: 700 var(--step-2)/1 var(--font-display); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s4); }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; }

.case-hero { padding-block: clamp(3.5rem, 9vw, 8rem); }
.case-hero__grid { display: grid; grid-template-columns: minmax(18rem, 0.72fr) minmax(28rem, 1.28fr); gap: var(--s7); align-items: end; }
.case-hero h1 { font-size: var(--step-3); max-width: 19ch; }
.case-hero .meta-line { color: inherit; opacity: 0.82; }
.case-hero .lede { margin-top: var(--s5); }
.case-hero__facts { margin-top: var(--s6); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); padding-top: var(--s4); border-top: 1px solid currentColor; }
.case-hero__facts dt { font: 600 var(--step--1)/1.2 var(--font-display); color: inherit; }
.case-hero__facts dd { margin: 0.35rem 0 0; }
.case-hero__image img { width: 100%; max-height: 43rem; object-fit: cover; object-position: top; }
.case-hero__image figcaption { margin-top: var(--s2); color: inherit; opacity: 0.78; }
.case-hero--darwin { background: var(--cobalt); color: white; }
.case-hero--insync { background: var(--yellow); color: var(--ink); }
.case-hero--journey { background: var(--ink); color: white; }
.case-hero--journey img { outline-color: oklch(1 0 0 / 0.1); }

.chapter-nav { position: sticky; top: 0; z-index: 10; background: rgb(244 247 245 / 94%); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.chapter-nav__inner { width: var(--page); margin-inline: auto; display: flex; gap: var(--s4); overflow-x: auto; scrollbar-width: thin; }
.chapter-nav a { position: relative; flex: none; min-height: 48px; display: inline-flex; align-items: center; text-decoration: none; font: 600 var(--step--1)/1 var(--font-display); color: var(--ink-soft); }
.chapter-nav a::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: currentColor; opacity: 0; transform: scaleX(0); transform-origin: left center; transition: opacity var(--motion-instant) var(--ease-move), transform var(--motion-instant) var(--ease-move); }
.chapter-nav a.is-current { color: var(--cobalt); }
.chapter-nav a.is-current::after { opacity: 1; transform: scaleX(1); transition-duration: var(--motion-ui); transition-timing-function: var(--ease-enter); }
.chapter-nav a:focus-visible::after { opacity: 1; transform: scaleX(1); transition-duration: 0ms; }

@media (hover: hover) and (pointer: fine) {
  .chapter-nav a:hover { color: var(--cobalt); }
  .chapter-nav a:hover::after { opacity: 1; transform: scaleX(1); transition-duration: var(--motion-fast); transition-timing-function: var(--ease-enter); }
}

.chapter { padding-block: var(--s8); scroll-margin-top: 4rem; }
.chapter + .chapter { border-top: 1px solid var(--rule); }
.chapter-heading { display: grid; grid-template-columns: minmax(12rem, 0.38fr) 1fr; gap: var(--s6); margin-bottom: var(--s7); }
.chapter-heading > :only-child { grid-column: 2; }
.chapter-heading p { max-width: 54ch; font-size: var(--step-1); }

.big-statement { font: 600 var(--step-3)/1.12 var(--font-display); letter-spacing: -0.025em; max-width: 25ch; }

.system-story { display: grid; grid-template-columns: minmax(17rem, 0.72fr) minmax(30rem, 1.28fr); gap: var(--s7); align-items: start; }
.story-steps { display: grid; gap: min(18vh, 9rem); padding-bottom: 20vh; }
.story-step { min-height: 38vh; padding-top: var(--s4); border-top: 1px solid var(--rule); }
.story-step h3 { margin-bottom: var(--s3); }
.story-step p { max-width: 42ch; }
.system-map {
  position: sticky;
  top: 7rem;
  min-height: 36rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.system-node { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: var(--s4); background: var(--paper); transition-property: background-color, color; transition-duration: 240ms; transition-timing-function: var(--ease); }
.system-node strong { font: 600 var(--step-1)/1.1 var(--font-display); }
.system-node span { color: var(--ink-soft); font-size: var(--step--1); }
.system-node.is-active { background: var(--orange); color: var(--ink); }
.system-node.is-active span { color: var(--ink); }
.system-node--core { grid-row: 2; grid-column: 1 / -1; background: var(--ink); color: white; }
.system-node--core span { color: #c7d8d6; }

.comparison { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--ink); }
.comparison article { padding: var(--s5); min-height: 19rem; }
.comparison article + article { border-left: 1px solid var(--rule); }
.comparison h3 { margin-bottom: var(--s3); }
.comparison .decision { margin-top: var(--s5); color: var(--cobalt); font-weight: 600; }
.comparison .chosen { background: var(--sky); }

.evidence-stage { margin-inline: 0; padding: var(--s7) var(--s5); background: var(--ink); color: white; }
.evidence-stage img { outline-color: oklch(1 0 0 / 0.1); }
.evidence-stage__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.evidence-stage figcaption { margin-top: var(--s2); color: #d2dfdd; }

.gallery-wrap { position: relative; }
.gallery-controls { display: flex; justify-content: flex-end; gap: var(--s2); margin-bottom: var(--s3); }
.gallery-button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; transition-property: background-color, color, scale; transition-duration: 150ms; transition-timing-function: ease-out; }
.gallery-button:hover { background: var(--ink); color: white; }
.gallery-button:active { scale: 0.96; }
.gallery-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: min(75vw, 52rem); gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s3); scrollbar-color: var(--cobalt) var(--rule-light); }
.gallery figure { margin: 0; scroll-snap-align: start; }
.gallery img { width: 100%; max-height: 42rem; object-fit: contain; object-position: top; background: var(--paper); }
.gallery figcaption { margin-top: var(--s2); max-width: 60ch; }

.evidence-note { display: grid; grid-template-columns: 0.32fr 1fr; gap: var(--s5); padding-block: var(--s5); border-block: 1px solid var(--ink); }
.evidence-note strong { font-family: var(--font-display); }
.evidence-note p { max-width: 58ch; }

.outcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); }
.outcome-grid h3 { margin-bottom: var(--s4); }
.outcome-grid p + p { margin-top: var(--s3); }

.process-scroll { display: grid; grid-template-columns: minmax(19rem, 0.65fr) minmax(25rem, 1.35fr); gap: var(--s7); align-items: start; }
.process-scroll__copy { position: sticky; top: 7rem; }
.process-scroll__copy h3 { margin-bottom: var(--s4); }
.process-scroll__image { max-height: 78vh; overflow-y: auto; border: 1px solid var(--ink); background: white; scrollbar-color: var(--orange) var(--rule-light); }
.process-scroll__image img { width: 100%; }

.confidence-band { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--ink); }
.confidence-band article { padding: var(--s5); }
.confidence-band article:nth-child(2) { background: var(--orange-light); }
.confidence-band article + article { border-left: 1px solid var(--ink); }
.confidence-band h3 { margin-bottom: var(--s3); }
.confidence-band strong { display: block; margin-top: var(--s4); color: var(--cobalt); }

.responsibility { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); align-items: end; }
.responsibility article { padding: var(--s5); border-top: 2px solid var(--ink); background: var(--paper); min-height: 17rem; }
.responsibility article:nth-child(2) { border-top-color: var(--orange); min-height: 22rem; }
.responsibility article:nth-child(3) { border-top-color: var(--green); min-height: 14rem; }
.responsibility h3 { margin-bottom: var(--s4); }

.ia-line { display: grid; grid-template-columns: repeat(7, minmax(8rem, 1fr)); gap: 1px; background: var(--ink); border: 1px solid var(--ink); overflow-x: auto; }
.ia-line div { min-height: 10rem; padding: var(--s4); background: var(--paper); }
.ia-line strong { display: block; font-family: var(--font-display); margin-bottom: var(--s2); }

.disruption-opening { min-height: 70vh; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--s7); align-items: center; }
.disruption-opening blockquote { margin: 0; font: 600 var(--step-4)/1.05 var(--font-display); letter-spacing: -0.03em; }
.disruption-opening blockquote span { color: var(--orange); }

.service-ecosystem { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink); border: 1px solid var(--ink); }
.service-ecosystem article { min-height: 15rem; padding: var(--s5); background: var(--paper); }
.service-ecosystem article:nth-child(5) { background: var(--yellow); }
.service-ecosystem h3 { margin-bottom: var(--s3); }
.service-ecosystem dl { margin: 0; }
.service-ecosystem dt { font-family: var(--font-display); font-weight: 600; margin-top: var(--s3); }
.service-ecosystem dd { margin: 0.2rem 0 0; }

.job-shift { display: grid; grid-template-columns: 1fr 5rem 1fr; gap: var(--s4); align-items: stretch; }
.job-shift section { padding: var(--s5); background: var(--paper); border-top: 2px solid var(--cobalt); }
.job-shift section:last-child { border-top-color: var(--orange); }
.job-shift ol { margin: var(--s4) 0 0; padding-left: 1.3rem; }
.job-shift li + li { margin-top: var(--s2); }
.job-shift__arrow { display: grid; place-items: center; font: 700 var(--step-3)/1 var(--font-display); }

.hypotheses { counter-reset: hyp; border-top: 1px solid var(--ink); }
.hypothesis { counter-increment: hyp; display: grid; grid-template-columns: 5rem 1fr 1fr; gap: var(--s4); padding-block: var(--s4); border-bottom: 1px solid var(--rule); }
.hypothesis::before { content: "H" counter(hyp); font: 700 var(--step-1)/1 var(--font-display); color: var(--cobalt); }
.hypothesis strong { font-family: var(--font-display); }
.hypothesis span { color: var(--ink-soft); }

.research-plan { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: var(--s7); }
.research-plan__measures { border-top: 1px solid var(--ink); }
.research-plan__measures div { display: grid; grid-template-columns: 12rem 1fr; gap: var(--s4); padding-block: var(--s3); border-bottom: 1px solid var(--rule); }
.research-plan__measures strong { font-family: var(--font-display); }

.about-hero { padding-block: var(--s8); display: grid; grid-template-columns: 0.7fr 1.3fr; gap: var(--s7); }
.about-hero h1 { font-size: var(--step-4); }
.about-hero .lede { align-self: end; }
.about-spread { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: start; }
.about-spread + .about-spread { margin-top: var(--s8); }
.about-spread:nth-child(even) > :first-child { order: 2; }
.about-spread h2 { margin-bottom: var(--s4); }
.about-spread p + p { margin-top: var(--s3); }
.quote-field { padding: var(--s6); background: var(--cobalt); color: white; font: 600 var(--step-2)/1.2 var(--font-display); }

.cv { background: var(--paper); }
.cv-shell { width: min(100% - 2rem, 72rem); margin-inline: auto; padding-block: var(--s7); }
.cv-head { display: grid; grid-template-columns: 1fr auto; gap: var(--s5); padding-bottom: var(--s5); border-bottom: 3px solid var(--ink); }
.cv-head h1 { font-size: var(--step-4); }
.cv-head p { margin-top: var(--s3); font-size: var(--step-1); max-width: 50ch; }
.cv-section { display: grid; grid-template-columns: 13rem 1fr; gap: var(--s6); padding-block: var(--s6); border-bottom: 1px solid var(--rule); }
.cv-section h2 { font-size: var(--step-1); }
.role + .role { margin-top: var(--s6); }
.role-head { display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: baseline; }
.role-head h3 { font-size: var(--step-2); }
.role-head time { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.role-company { margin-top: 0.25rem; color: var(--cobalt); font-weight: 600; }
.role ul { margin: var(--s4) 0 0; padding-left: 1.2rem; }
.role li + li { margin-top: 0.5rem; }
.capability-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.capability-columns h3 { font-size: var(--step-1); margin-bottom: var(--s3); }
.capability-columns ul { margin: 0; padding-left: 1.1rem; }

.next-project { display: block; padding-block: var(--s7); border-top: 1px solid var(--ink); text-decoration: none; }
.next-project span { display: block; color: var(--ink-soft); font-family: var(--font-display); }
.next-project strong { display: block; margin-top: var(--s3); max-width: 24ch; font: 600 var(--step-3)/1.1 var(--font-display); letter-spacing: -0.025em; }
.next-project strong::after { content: "→"; display: inline-block; margin-left: 0.35em; opacity: 0.55; transform: translateX(0); transition: opacity var(--motion-fast) var(--ease-enter), transform var(--motion-fast) var(--ease-enter); }
.next-project:hover strong { color: var(--cobalt); }
.next-project:focus-visible strong::after { opacity: 1; transform: translateX(6px); }
.next-project:active strong::after { transform: translateX(3px); transition-duration: var(--motion-instant); }

@media (hover: hover) and (pointer: fine) {
  .next-project:hover strong::after { opacity: 1; transform: translateX(6px); }
}

details.supporting { margin-top: var(--s5); border-block: 1px solid var(--rule); }
details.supporting summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); cursor: pointer; font-family: var(--font-display); font-weight: 600; }
details.supporting > div { padding: 0 0 var(--s5); max-width: var(--reading); }
.disclosure-mark { position: relative; flex: 0 0 1.25rem; width: 1.25rem; height: 1.25rem; }
.disclosure-mark::before,
.disclosure-mark__vertical { content: ""; position: absolute; top: 50%; left: 50%; width: 1rem; height: 2px; background: currentColor; transform: translate(-50%, -50%); }
.disclosure-mark__vertical { width: 2px; height: 1rem; transform: translate(-50%, -50%) scaleY(1); transition: transform var(--motion-fast) var(--ease-enter); }
details.supporting[open]:not(.is-closing) .disclosure-mark__vertical { transform: translate(-50%, -50%) scaleY(0); }

@media (max-width: 68rem) {
  :root { --page: min(100% - 2rem, 72rem); --s8: 5.5rem; }
  .home-hero { grid-template-columns: 0.9fr 1.1fr; gap: var(--s5); }
  .project-feature--darwin, .project-feature--insync, .project-feature--journey { grid-template-columns: 1fr 1fr; }
  .case-hero__grid { gap: var(--s5); }
  .system-story { grid-template-columns: 0.8fr 1.2fr; gap: var(--s5); }
  .system-map { min-height: 31rem; }
  .chapter-heading { grid-template-columns: 11rem 1fr; }
}

@media (max-width: 52rem) {
  :root { --s8: 4.5rem; }
  .site-head { grid-template-columns: 1fr; gap: 0; padding-block: var(--s2); }
  .site-nav ul { justify-content: space-between; }
  .home-hero { min-height: auto; grid-template-columns: 1fr; }
  .home-intro { min-height: 32rem; }
  .section-head, .chapter-heading, .about-hero, .principles, .contact-grid, .footer-grid, .case-hero__grid, .system-story, .process-scroll, .outcome-grid, .research-plan, .about-spread, .cv-section { grid-template-columns: 1fr; }
  .project-feature--darwin, .project-feature--insync, .project-feature--journey { grid-template-columns: 1fr; }
  .project-feature--insync .feature-copy { order: -1; }
  .phone-rack { grid-template-columns: repeat(4, 13rem); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s4); }
  .phone-rack img { scroll-snap-align: start; transform: none !important; }
  .comparison, .confidence-band, .responsibility { grid-template-columns: 1fr; }
  .comparison article + article, .confidence-band article + article { border-left: 0; border-top: 1px solid var(--rule); }
  .system-map, .process-scroll__copy { position: static; }
  .story-steps { gap: var(--s6); padding-bottom: 0; }
  .story-step { min-height: 0; }
  .evidence-stage__grid { grid-template-columns: 1fr; }
  .gallery { grid-auto-columns: min(88vw, 38rem); }
  .case-hero__facts { grid-template-columns: 1fr; }
  .disruption-opening { min-height: auto; grid-template-columns: 1fr; }
  .service-ecosystem { grid-template-columns: 1fr 1fr; }
  .job-shift { grid-template-columns: 1fr; }
  .job-shift__arrow { min-height: 3rem; transform: rotate(90deg); }
  .hypothesis { grid-template-columns: 3.5rem 1fr; }
  .hypothesis span { grid-column: 2; }
  .capability-columns { grid-template-columns: 1fr; }
  .about-spread:nth-child(even) > :first-child { order: 0; }
}

@media (max-width: 31rem) {
  :root { --page: min(100% - 1.25rem, 90rem); --s7: 3.5rem; --s8: 4rem; }
  .brand { align-items: flex-start; flex-direction: column; gap: 0.15rem; padding-block: 0.4rem; }
  .site-nav a { padding-inline: 0.25rem; }
  .section-head, .chapter-heading { gap: var(--s4); }
  .section-head > :only-child, .chapter-heading > :only-child { grid-column: auto; }
  .service-ecosystem { grid-template-columns: 1fr; }
  .system-map { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
  .system-node--core { grid-row: auto; grid-column: auto; }
  .evidence-note { grid-template-columns: 1fr; }
  .research-plan__measures div { grid-template-columns: 1fr; gap: 0.3rem; }
  .role-head { grid-template-columns: 1fr; gap: 0.3rem; }
  .cv-head { grid-template-columns: 1fr; }
}

:root {
  --ground: #fafaf8;
  --paper: #ffffff;
  --ink: #17191b;
  --ink-soft: #565d64;
  --rule: #cfd3d6;
  --rule-light: #e7e9ea;
  --cobalt: #5148e5;
  --cobalt-dark: #3730b7;
  --orange: #c95724;
  --orange-light: #fff3ec;
  --green: #0b7a55;
  --green-light: #eaf5f0;
  --yellow: #f3e6ae;
  --sky: #eaf1fa;
  --page: min(100% - 3rem, 86rem);
  --reading: 66ch;
  --motion-instant: 120ms;
  --motion-fast: 160ms;
  --motion-ui: 200ms;
  --motion-content: 300ms;
  --motion-reveal: 420ms;
  --motion-feature: 600ms;
  --ease-enter: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-move: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

@view-transition {
  navigation: auto;
}

.site-head {
  view-transition-name: site-header;
}

::view-transition-group(site-header),
::view-transition-old(site-header),
::view-transition-new(site-header) {
  animation: none;
}

::view-transition-old(root) {
  animation: route-out 180ms var(--ease-move) both;
}

::view-transition-new(root) {
  animation: route-in var(--motion-content) var(--ease-enter) 40ms both;
}

@keyframes route-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-4px); }
}

@keyframes route-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes route-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes route-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

html,
body {
  overflow-x: clip;
}

body {
  background: var(--ground);
  color: var(--ink);
}

body::before {
  content: none;
  display: none;
  background: none;
}

.site-head {
  min-height: 5.25rem;
  border-bottom: 1px solid var(--rule-light);
  background: var(--ground);
}

.brand strong {
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
}

.brand span,
.site-nav a {
  font-size: 0.95rem;
}

.site-nav a {
  padding-inline: 0.2rem;
  box-shadow: inset 0 -2px transparent;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px var(--case-accent, var(--cobalt));
}

.button-link {
  min-height: 46px;
  padding: 0.78rem 1.1rem;
  border-radius: 0.5rem;
  background: var(--ink);
  color: #ffffff;
  box-shadow: none;
  transition: transform var(--motion-fast) var(--ease-enter), background-color var(--motion-ui) var(--ease-enter), color var(--motion-ui) var(--ease-enter);
}

.button-link:hover {
  background: var(--case-accent, var(--cobalt));
  box-shadow: none;
  transform: translateY(-1px);
}

.button-link:active {
  transform: scale(0.98);
}

.text-link {
  color: var(--ink);
  text-decoration-color: var(--case-accent, var(--cobalt));
}

.home-page {
  --case-accent: var(--cobalt);
  background: #ffffff;
}

.home-page .home-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  padding: clamp(1.5rem, 2.5vw, 3rem);
  background-color: #f4f7f7;
  background-image: url("../assets/icons/dot-grid.svg");
  background-repeat: repeat;
}

.hero-grid-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.home-page .home-hero__header {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 44px;
  margin: 0;
  border: 0;
  background: transparent;
}

.brand-logo-slot {
  width: fit-content;
}

.home-page .home-intro {
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: center;
  width: min(calc(100vw - 6rem), 68.75rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding-block: clamp(1rem, 3vh, 2.5rem);
  text-align: center;
}

.hero-welcome {
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.1vw, 1.18rem);
  font-weight: 600;
}

.hero-title-display {
  width: 100%;
  margin-top: clamp(1rem, 2.4vh, 1.75rem);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 4vw, 4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-align: center;
  text-wrap: balance;
}

.hero-title-stable {
  display: block;
}

.hero-phrase-window {
  position: relative;
  display: block;
  width: 100%;
  height: 1.08em;
  overflow: hidden;
}

.hero-phrase-window::after {
  position: absolute;
  z-index: 2;
  top: 0.03em;
  bottom: 0.03em;
  left: 50%;
  width: min(6.6em, calc(100% - 1rem));
  border: 1px solid var(--cobalt);
  content: "";
  opacity: 0;
  transform: translateX(-50%) scale(0.985);
  transition: opacity 180ms ease, transform 240ms var(--ease-enter);
  pointer-events: none;
}

.hero-phrase-window.is-intro-selected::after {
  opacity: 0.72;
  transform: translateX(-50%) scale(1);
}

.hero-phrase {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  text-align: center;
  color: #3730B7;
  opacity: 0;
  visibility: hidden;
  transform: translateY(72%);
  transition: opacity 440ms var(--ease-enter), transform 560ms var(--ease-enter);
}

.hero-phrase.is-current,
.hero-phrase.is-entering,
.hero-phrase.is-exiting {
  visibility: visible;
}

.hero-phrase.is-current {
  opacity: 1;
  transform: translateY(0);
}

.hero-phrase.is-entering {
  opacity: 0;
  transform: translateY(72%);
}

.hero-phrase.is-exiting {
  opacity: 0;
  transform: translateY(-72%);
}

.hero-intro-cursor {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 1.35rem;
  height: 1.6rem;
  color: var(--cobalt);
  opacity: 0;
  pointer-events: none;
}

.hero-intro-cursor svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: currentColor;
  stroke: #ffffff;
  stroke-linejoin: round;
  stroke-width: 1.25;
}

.hero-portrait {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: auto;
  max-width: none;
  height: min(20svh, 18rem);
  max-height: 20svh;
  aspect-ratio: 1;
  object-fit: contain;
  opacity: 0.15;
  outline: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.home-page .home-actions {
  justify-content: center;
  margin-top: clamp(1rem, 2vh, 1.5rem);
}

.hero-edge {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  color: var(--ink-soft);
  font-size: 0.96rem;
}

.hero-contact > p {
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-contact div {
  display: flex;
  gap: 1.25rem;
}

.hero-contact a,
.hero-location {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.hero-location {
  gap: 0.45rem;
  white-space: nowrap;
}

.hero-location svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.work-section {
  padding-block: clamp(6rem, 9vw, 9rem);
  border-top: 0;
  background: #ffffff;
}

.work-intro {
  display: block;
  max-width: 48rem;
  margin-bottom: clamp(3.5rem, 6vw, 5.5rem);
  text-align: center;
}

.work-intro > .meta-line {
  color: var(--cobalt-dark);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.work-intro h2 {
  max-width: 17ch;
  margin: 1rem auto 0;
  font-size: clamp(2.5rem, 4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.work-intro p:not(.meta-line) {
  max-width: 48ch;
  margin: 1.25rem auto 0;
  color: var(--ink-soft);
  font-size: clamp(1.12rem, 1.4vw, 1.32rem);
}

.project-list {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.project-feature {
  display: grid;
  min-height: 0;
  gap: clamp(2.5rem, 5vw, 5rem);
  margin: 0;
  padding: clamp(2.5rem, 5vw, 4.75rem);
  overflow: hidden;
  border: 1px solid #e2e5e7;
  border-radius: 1.5rem;
  background: #f3f5f6;
  box-shadow: none;
  align-items: center;
}

.project-feature + .project-feature {
  margin-top: 0;
}

.project-feature--darwin {
  --case-accent: #5148e5;
  grid-template-columns: minmax(19rem, 0.72fr) minmax(32rem, 1.28fr);
}

.project-feature--insync {
  --case-accent: #c95724;
  grid-template-columns: minmax(19rem, 0.7fr) minmax(34rem, 1.3fr);
}

.project-feature--journey {
  --case-accent: #0b7a55;
  grid-template-columns: 1fr;
  align-items: start;
}

.feature-copy .meta-line {
  margin-bottom: 1rem;
  color: var(--case-accent);
  font-weight: 700;
}

.feature-brand {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  margin-bottom: var(--s4);
}

.feature-brand img {
  display: block;
  max-width: 100%;
  height: auto;
  outline: 0;
}

.feature-brand--insync img {
  width: 8.25rem;
}

.feature-brand .darwin-brand-lockup,
.feature-brand .rejoin-home-logo {
  margin: 0;
}

.feature-copy h3 {
  max-width: 18ch;
  margin-bottom: 1.25rem;
  font-size: clamp(2.25rem, 3.4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.feature-copy > p:not(.meta-line) {
  max-width: 44ch;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.2vw, 1.17rem);
}

.feature-copy .button-link {
  margin-top: 1.75rem;
  background: var(--case-accent);
}

.feature-copy .button-link:hover {
  background: var(--ink);
}

.media-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(23 25 27 / 12%);
  border-radius: 0.875rem;
  background: #ffffff;
}

.media-frame img {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.media-frame--darwin {
  aspect-ratio: 16 / 11;
  padding: clamp(0.75rem, 1.4vw, 1.25rem);
}

.media-frame--darwin img {
  object-fit: cover;
  object-position: center top;
}

.feature-image figcaption {
  max-width: 48ch;
  margin-top: 0.75rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.45;
}

.insync-preview {
  position: relative;
  min-height: clamp(31rem, 38vw, 37rem);
}

.insync-preview figure {
  margin: 0;
}

.insync-preview figcaption {
  display: none;
}

.feature-image--luna {
  position: absolute;
  inset: 0 0 auto auto;
  width: 82%;
  z-index: 1;
}

.feature-image--process {
  position: absolute;
  inset: clamp(8rem, 10vw, 10rem) auto auto 0;
  width: 35%;
  z-index: 2;
}

.feature-image--decision {
  position: absolute;
  inset: auto 5% 0 auto;
  width: 36%;
  z-index: 3;
}

.media-frame--luna {
  aspect-ratio: 16 / 9;
  padding: clamp(0.55rem, 1vw, 0.9rem);
}

.media-frame--process {
  aspect-ratio: 4 / 3;
  background: #eef1f2;
}

.media-frame--process img {
  object-fit: cover;
  object-position: center top;
}

.media-frame--decision {
  aspect-ratio: 4 / 3;
  background: #edf4f8;
}

.media-frame--decision img {
  object-fit: cover;
  object-position: center;
}

.feature-image--luna figcaption {
  max-width: 31ch;
}

.feature-image--process figcaption,
.feature-image--decision figcaption {
  max-width: 24ch;
}

.project-feature--journey .feature-copy {
  max-width: 64rem;
}

.project-feature--journey .feature-copy h3 {
  max-width: 20ch;
}

.phone-stage {
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 3rem) 0;
  border: 1px solid rgb(23 25 27 / 10%);
  border-radius: 1rem;
  background: #ffffff;
}

.phone-rack {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.7vw, 1.5rem);
  width: min(100%, 62rem);
  margin-inline: auto;
  padding: 0 0 clamp(3rem, 5vw, 5rem);
  align-items: start;
}

.phone-shot {
  overflow: hidden;
  aspect-ratio: 414 / 1390;
  border: 1px solid rgb(23 25 27 / 13%);
  border-radius: 0.875rem;
  background: #ffffff;
}

.phone-shot img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  object-position: center top;
  transform: none;
}

.phone-shot:nth-child(1) { transform: translateY(3.5rem); }
.phone-shot:nth-child(2) { transform: translateY(0); }
.phone-shot:nth-child(3) { transform: translateY(4.75rem); }
.phone-shot:nth-child(4) { transform: translateY(1.75rem); }

/* Motion-ready classes are added only after the one-shot observers initialise. */
.home-page .project-feature.motion-ready .feature-copy,
.home-page .project-feature--darwin.motion-ready .feature-image--darwin,
.home-page .project-feature--insync.motion-ready .insync-preview .feature-image,
.home-page .project-feature--journey.motion-ready .phone-shot {
  opacity: 0;
  transition-duration: var(--motion-reveal);
  transition-property: opacity, transform, translate;
  transition-timing-function: var(--ease-enter);
}

.home-page .project-feature.motion-ready .feature-copy {
  transform: translateY(10px);
}

.home-page .project-feature.motion-ready.is-revealed .feature-copy,
.home-page .project-feature--darwin.motion-ready.is-revealed .feature-image--darwin,
.home-page .project-feature--insync.motion-ready.is-revealed .insync-preview .feature-image {
  opacity: 1;
  transform: translate(0, 0);
}

.home-page .project-feature--journey.motion-ready.is-revealed .phone-shot {
  opacity: 1;
  translate: 0 0;
}

.home-page .project-feature--darwin.motion-ready .feature-image--darwin {
  transform: translateY(10px);
  transition-delay: 60ms;
}

.home-page .project-feature--insync.motion-ready .feature-image--luna {
  transform: translateY(8px);
  transition-delay: 50ms;
}

.home-page .project-feature--insync.motion-ready .feature-image--process {
  transform: translate(-8px, 4px);
  transition-delay: 100ms;
}

.home-page .project-feature--insync.motion-ready .feature-image--decision {
  transform: translate(8px, 4px);
  transition-delay: 150ms;
}

.home-page .project-feature--journey.motion-ready .phone-shot {
  translate: 0 8px;
}

.home-page .project-feature--journey.motion-ready .phone-shot:nth-child(1) { transition-delay: 40ms; }
.home-page .project-feature--journey.motion-ready .phone-shot:nth-child(2) { transition-delay: 80ms; }
.home-page .project-feature--journey.motion-ready .phone-shot:nth-child(3) { transition-delay: 120ms; }
.home-page .project-feature--journey.motion-ready .phone-shot:nth-child(4) { transition-delay: 160ms; }

.job-shift.motion-ready > section,
.job-shift.motion-ready > .job-shift__arrow {
  opacity: 0;
  transition-property: opacity, translate, scale;
  transition-timing-function: var(--ease-enter);
}

.job-shift.motion-ready > section:first-child {
  translate: -16px 0;
  transition-duration: var(--motion-feature);
}

.job-shift.motion-ready > .job-shift__arrow {
  scale: 0.75 1;
  transition-delay: 90ms;
  transition-duration: var(--motion-content);
}

.job-shift.motion-ready > section:last-child {
  translate: 16px 0;
  transition-delay: var(--motion-fast);
  transition-duration: var(--motion-feature);
}

.job-shift.motion-ready.is-revealed > section,
.job-shift.motion-ready.is-revealed > .job-shift__arrow {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

.home-terminal {
  width: var(--page);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 1.5rem 1.5rem 0 0;
  background: var(--ink);
  color: #ffffff;
}

.home-page .home-terminal > .section {
  width: auto;
  padding: clamp(4.5rem, 7vw, 7rem) clamp(1.5rem, 4.5vw, 4.75rem);
  border-top: 0;
}

.home-page .principles {
  grid-template-columns: minmax(0, 0.9fr) minmax(31rem, 1.1fr);
  gap: clamp(3rem, 7vw, 7rem);
}

.home-page .principles h2 {
  max-width: 14ch;
  font-size: clamp(2.6rem, 4.2vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.home-page .principles .lede {
  margin-top: 1.5rem;
  color: #c8cdd2;
}

.home-page .principles-list {
  border-top-color: #6e757d;
}

.home-page .principle {
  padding-block: 1.4rem;
  border-bottom-color: #444a50;
}

.home-page .principle b {
  color: #ffffff;
  font-size: 1.3rem;
}

.home-page .principle p {
  color: #c8cdd2;
}

.home-page .contact-band {
  padding: clamp(3rem, 4.5vw, 4.5rem) clamp(1.5rem, 4.5vw, 4.75rem);
  border-top: 1px solid #444a50;
  background: var(--ink);
  color: #ffffff;
}

.home-page .contact-grid {
  display: block;
  width: auto;
  max-width: 60rem;
  text-align: center;
}

.home-page .contact-grid h2 {
  max-width: 16ch;
  margin-inline: auto;
  font-size: clamp(2.5rem, 4vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.home-page .contact-grid p {
  max-width: 48ch;
  margin: 1.5rem auto 0;
  color: #c8cdd2;
}

.home-page .contact-grid .button-link {
  margin-top: 2rem;
  background: #ffffff;
  color: var(--ink);
}

.home-page .contact-grid .button-link:hover {
  background: #dce1e4;
  color: var(--ink);
}

.site-footer {
  border-top: 0;
  background: var(--ink);
  color: #ffffff;
}

.home-page .site-footer {
  margin-top: 0;
}

body:has(.case-hero--darwin) { --case-accent: #5148e5; --case-soft: #efeffc; }
body:has(.case-hero--insync) { --case-accent: #c95724; --case-soft: #fff3ec; }
body:has(.case-hero--journey) { --case-accent: #0b7a55; --case-soft: #eaf5f0; }

.case-hero,
.case-hero--darwin,
.case-hero--insync,
.case-hero--journey {
  padding-block: clamp(4.5rem, 7vw, 7rem);
  background: var(--case-soft);
  color: var(--ink);
}

.case-hero__grid {
  grid-template-columns: minmax(21rem, 0.8fr) minmax(34rem, 1.2fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}

.case-hero h1 {
  max-width: 15ch;
  font-size: clamp(3rem, 4.5vw, 4.8rem);
  line-height: 0.99;
  letter-spacing: -0.04em;
}

.case-hero .meta-line {
  color: var(--case-accent);
  opacity: 1;
  font-weight: 700;
}

.case-hero__facts {
  border-top-color: rgb(23 25 27 / 24%);
}

.case-hero__image img {
  max-height: 40rem;
  border-radius: 1rem;
  object-fit: cover;
  object-position: center top;
  outline: 1px solid rgb(23 25 27 / 12%);
}

.case-hero__image figcaption {
  color: var(--ink-soft);
  opacity: 1;
}

.chapter-nav {
  background: rgb(255 255 255 / 96%);
  border-bottom-color: var(--rule-light);
  backdrop-filter: none;
}

.chapter-nav a:hover,
.chapter-nav a.is-current {
  color: var(--case-accent);
}

.chapter {
  padding-block: clamp(5.5rem, 8vw, 7.5rem);
}

.chapter + .chapter {
  border-top-color: var(--rule-light);
}

.chapter-heading h2 {
  max-width: 20ch;
  font-size: clamp(2.35rem, 3.5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.chapter-heading p {
  color: var(--ink-soft);
}

.system-map,
.process-scroll__image,
.evidence-stage,
.comparison,
.confidence-band,
.service-ecosystem,
.job-shift section,
.responsibility article,
.quote-field {
  border-radius: 1rem;
  overflow: hidden;
}

.system-node.is-active {
  background: var(--case-accent);
  color: #ffffff;
}

.system-node.is-active span {
  color: #ffffff;
}

.evidence-stage {
  background: var(--ink);
}

.gallery-button {
  border-radius: 0.5rem;
}

.gallery-button:hover {
  background: var(--case-accent);
}

.gallery img {
  border-radius: 0.875rem;
}

.comparison,
.confidence-band {
  border: 1px solid var(--rule);
}

.comparison .chosen,
.confidence-band article:nth-child(2) {
  background: var(--case-soft);
}

.comparison .decision,
.responsibility article:nth-child(2),
.hypothesis::before,
.role-company,
.next-project:hover strong {
  color: var(--case-accent);
}

.about-hero {
  padding-block: clamp(5rem, 8vw, 8rem);
}

.about-hero h1 {
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.about-spread {
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--rule-light);
  border-radius: 1.25rem;
  background: #ffffff;
}

.quote-field {
  background: var(--cobalt);
}

.cv {
  background: #f4f5f5;
}

.cv-shell {
  width: min(100% - 2rem, 76rem);
  margin-block: clamp(2rem, 5vw, 5rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid var(--rule-light);
  border-radius: 1.25rem;
  background: #ffffff;
}

.cv-head {
  border-bottom-width: 2px;
}

@media (max-width: 68rem) {
  :root { --page: min(100% - 2rem, 72rem); }

  .project-feature--darwin,
  .project-feature--insync {
    grid-template-columns: minmax(16rem, 0.8fr) minmax(25rem, 1.2fr);
    gap: 2.5rem;
  }

  .feature-copy h3 {
    font-size: clamp(2.2rem, 3.8vw, 3rem);
  }

  .case-hero__grid {
    grid-template-columns: minmax(18rem, 0.85fr) minmax(27rem, 1.15fr);
  }
}

@media (max-width: 52rem) {
  .site-head {
    min-height: 0;
    padding-block: 1rem;
  }

  .brand {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
  }

  .home-page .home-hero {
    min-height: auto;
    padding-block: clamp(5rem, 13vw, 7rem);
  }

  .home-page .home-intro h1 {
    max-width: 18ch;
    font-size: clamp(2.6rem, 7vw, 3.5rem);
  }

  .hero-primary {
    font-size: clamp(1.25rem, 3.5vw, 1.55rem);
  }

  .hero-support {
    gap: 2rem;
  }

  .project-feature--darwin,
  .project-feature--insync,
  .case-hero__grid {
    grid-template-columns: 1fr;
  }

  .project-feature--darwin .feature-copy,
  .project-feature--insync .feature-copy {
    max-width: 42rem;
  }

  .insync-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    min-height: 0;
  }

  .feature-image--luna,
  .feature-image--process,
  .feature-image--decision {
    position: static;
    width: auto;
  }

  .insync-preview figcaption {
    display: block;
  }

  .feature-image--luna {
    grid-column: 1 / -1;
  }

  .phone-stage {
    padding-inline: 1.5rem;
  }

  .phone-rack {
    grid-auto-flow: column;
    grid-auto-columns: min(64vw, 15rem);
    grid-template-columns: none;
    width: calc(100% + 1.5rem);
    margin: 0;
    padding-right: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }

  .phone-shot {
    scroll-snap-align: start;
  }

  .phone-shot:nth-child(1) { transform: translateY(2rem); }
  .phone-shot:nth-child(2) { transform: translateY(0); }
  .phone-shot:nth-child(3) { transform: translateY(2.75rem); }
  .phone-shot:nth-child(4) { transform: translateY(1rem); }

  .job-shift.motion-ready > section:first-child { translate: 0 -12px; }
  .job-shift.motion-ready > section:last-child { translate: 0 12px; }
  .job-shift.motion-ready.is-revealed > section { translate: 0 0; }

  .home-page .principles {
    grid-template-columns: 1fr;
  }

  .case-hero h1 {
    max-width: 16ch;
    font-size: clamp(2.8rem, 8vw, 4rem);
  }
}

@media (max-width: 31rem) {
  :root { --page: min(100% - 1.25rem, 72rem); }

  .site-nav ul {
    gap: 0.35rem;
    justify-content: space-between;
  }

  .site-nav a {
    min-height: 44px;
    padding-inline: 0.3rem;
  }

  .home-page .home-intro h1 {
    max-width: 16ch;
    font-size: clamp(2.25rem, 10vw, 2.8rem);
  }

  .hero-support {
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: center;
  }

  .hero-support p {
    margin-inline: auto;
  }

  .project-feature {
    gap: 2rem;
    padding: 1.4rem;
    border-radius: 1rem;
  }

  .feature-copy h3 {
    max-width: 100%;
    font-size: clamp(2rem, 9.8vw, 2.55rem);
  }

  .media-frame--darwin {
    aspect-ratio: 4 / 3;
  }

  .insync-preview {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .feature-image--luna,
  .feature-image--process,
  .feature-image--decision {
    grid-column: 1;
  }

  .media-frame--process,
  .media-frame--decision {
    aspect-ratio: 16 / 9;
  }

  .phone-stage {
    margin-inline: -1.4rem;
    padding: 1.5rem 1.4rem 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .phone-rack {
    grid-auto-columns: min(70vw, 13.5rem);
  }

  .home-page .contact-grid h2 {
    font-size: clamp(2.5rem, 12vw, 3.5rem);
  }

  .case-hero h1 {
    font-size: clamp(2.5rem, 11vw, 3.35rem);
  }

  .cv-shell {
    width: calc(100% - 1rem);
    padding: 1.25rem;
    border-radius: 0.875rem;
  }
}

@media (orientation: portrait) {
  .hero-portrait {
    width: 20vw;
    max-width: 20vw;
    height: auto;
    max-height: none;
  }
}

@media (max-width: 52rem) {
  .home-page .home-hero {
    min-height: 100vh;
    min-height: 100svh;
    padding: 1.5rem;
  }

  .home-page .home-hero__header {
    grid-template-columns: minmax(11rem, 1fr) auto;
    padding: 0;
  }

  .home-page .home-hero__header .brand {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-page .home-intro {
    min-height: 0;
    width: 100%;
    padding-block: 1rem;
  }

  .hero-title-display {
    font-size: clamp(2.15rem, 6.5vw, 3.25rem);
    line-height: 1.04;
  }

  .hero-edge {
    gap: 1rem;
  }
}

@media (max-width: 31rem) {
  .home-page .home-hero {
    padding: 1.25rem;
  }

  .home-page .home-hero__header {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .home-page .home-hero__header .site-nav ul {
    justify-content: space-between;
  }

  .hero-welcome {
    font-size: 0.95rem;
  }

  .hero-title-display {
    margin-top: 0.65rem;
    font-size: clamp(1.85rem, 9vw, 2.35rem);
    line-height: 1.05;
  }

  .home-page .home-actions {
    gap: 0.75rem;
    margin-top: 0.75rem;
  }

  .home-page .home-actions .button-link {
    padding-inline: 0.8rem;
  }

  .hero-edge {
    gap: 0.75rem;
    font-size: 0.88rem;
  }

  .hero-contact div {
    gap: 0.85rem;
  }

  .home-page .home-terminal > .section,
  .home-page .contact-band {
    padding: clamp(2.5rem, 12vw, 3rem) 1.4rem;
  }
}

/* IN-SYNC evidence composition: supplied Luna screens and service-flow reconstructions. */
.project-feature--insync .insync-preview {
  min-height: clamp(33rem, 42vw, 41rem);
}

.project-feature--insync .feature-image--luna {
  width: 84%;
}

.project-feature--insync .feature-image--process {
  inset: clamp(9rem, 11vw, 11.5rem) auto auto 0;
  width: 41%;
}

.project-feature--insync .feature-image--decision {
  inset: auto 2% 0 auto;
  width: 24%;
}

.media-frame--mobile {
  overflow: visible;
  aspect-ratio: 1161 / 2574;
  padding: 0;
  border: 0;
  background: transparent;
}

.media-frame--mobile img {
  object-fit: contain;
  object-position: center top;
}

.insync-flow-lead {
  width: min(100%, 68.75rem);
  margin: var(--s7) auto 0;
}

.insync-flow-stage {
  overflow: hidden;
  border: 1px solid var(--rule-light);
  border-radius: 1rem;
  background: #ffffff;
}

.insync-flow-stage img {
  display: block;
  width: 100%;
  height: auto;
}

.insync-flow-lead figcaption,
.insync-flow-library figcaption,
.luna-screen-card figcaption {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.9rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

.insync-flow-lead figcaption strong,
.insync-flow-library figcaption strong,
.luna-screen-card figcaption strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.insync-evidence-status {
  width: min(100%, 68.75rem);
  margin: var(--s5) auto 0;
}

.insync-flow-library {
  margin-top: var(--s8);
}

.insync-flow-library__heading {
  max-width: 60ch;
  margin-bottom: var(--s6);
}

.insync-flow-library__heading h3,
.insync-product-heading h3 {
  margin-bottom: var(--s3);
  font-size: clamp(1.8rem, 2.5vw, 2.5rem);
}

.insync-flow-library__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s7) var(--s5);
  width: min(100%, 78rem);
  margin-inline: auto;
}

.insync-flow-library figure,
.luna-screen-card {
  margin: 0;
}

.insync-bridge {
  padding: clamp(2rem, 4vw, 3.75rem);
  border-block: 1px solid var(--rule);
  background: var(--case-soft);
}

.insync-bridge .meta-line {
  color: var(--case-accent);
}

.insync-bridge h2 {
  max-width: 20ch;
  margin-top: var(--s3);
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.insync-bridge > p:last-child {
  max-width: 54ch;
  margin-top: var(--s4);
  color: var(--ink-soft);
  font-size: 1.1rem;
}

.insync-product-heading {
  max-width: 60rem;
  margin-top: var(--s8);
}

.insync-product-heading > p:not(.evidence-provenance) {
  max-width: 58ch;
}

.evidence-provenance {
  max-width: 70ch;
  margin-top: var(--s5);
  padding-left: var(--s4);
  border-left: 3px solid var(--case-accent);
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.luna-product-stage {
  overflow: hidden;
  margin-top: var(--s6);
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--rule-light);
  border-radius: 1.25rem;
  background: #eef1f2;
}

.luna-product-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s7) var(--s5);
  align-items: start;
  width: min(100%, 72rem);
  margin-inline: auto;
}

.luna-screen-card {
  grid-column: span 2;
  min-width: 0;
}

.luna-screen-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.luna-screen-card:nth-child(5) {
  grid-column: 4 / span 2;
}

.luna-phone {
  width: min(100%, 17.25rem);
  margin-inline: auto;
}

.luna-screen-card--lead .luna-phone {
  width: min(100%, 20rem);
}

.luna-screen-card:nth-child(n + 4) .luna-phone {
  width: min(100%, 18.5rem);
}

.luna-phone img {
  display: block;
  width: 100%;
  height: auto;
}

#vat-flow,
#luna-product,
#insync {
  scroll-margin-top: 4.5rem;
}

@media (max-width: 52rem) {
  .project-feature--insync .insync-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    min-height: 0;
  }

  .project-feature--insync .feature-image--luna,
  .project-feature--insync .feature-image--process,
  .project-feature--insync .feature-image--decision {
    position: static;
    width: auto;
  }

  .project-feature--insync .feature-image--luna {
    grid-column: 1 / -1;
  }

  .project-feature--insync .feature-image--decision {
    width: min(100%, 15rem);
    justify-self: center;
  }

  .project-feature--insync .media-frame--process {
    aspect-ratio: 4 / 3;
  }

  .insync-flow-library__grid {
    grid-template-columns: 1fr;
  }

  .luna-product-stage {
    padding: clamp(1.25rem, 4vw, 2rem);
  }

  .luna-product-grid {
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 21rem);
    grid-template-columns: none;
    gap: var(--s4);
    width: calc(100% + clamp(1.25rem, 4vw, 2rem));
    margin: 0;
    padding-right: clamp(1.25rem, 4vw, 2rem);
    padding-bottom: var(--s4);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--case-accent) rgb(23 25 27 / 10%);
  }

  .luna-screen-card,
  .luna-screen-card:nth-child(4),
  .luna-screen-card:nth-child(5) {
    grid-column: auto;
    scroll-snap-align: start;
  }

  .luna-phone,
  .luna-screen-card--lead .luna-phone,
  .luna-screen-card:nth-child(n + 4) .luna-phone {
    width: 100%;
  }
}

@media (max-width: 31rem) {
  .project-feature--insync .insync-preview {
    grid-template-columns: 1fr;
  }

  .project-feature--insync .feature-image--luna,
  .project-feature--insync .feature-image--process,
  .project-feature--insync .feature-image--decision {
    grid-column: 1;
  }

  .project-feature--insync .feature-image--decision {
    width: min(72vw, 15rem);
  }

  .project-feature--insync .media-frame--process {
    aspect-ratio: 4 / 3;
  }

  .insync-bridge {
    padding: 1.5rem;
  }

  .luna-product-stage {
    margin-inline: -0.25rem;
  }

  .luna-product-grid {
    grid-auto-columns: 88%;
  }
}

body:has(.case-hero--rejoin) {
  --case-accent: #167568;
  --case-soft: #f5f3ee;
  --ground: #fbf9f4;
  --paper: #ffffff;
  --ink: #172e3b;
  --ink-soft: #4b6170;
  --rule: #c6c8c5;
  --rule-light: #e4e2dd;
}

.case-hero--rejoin {
  overflow: hidden;
  padding-block: clamp(4rem, 7vw, 7rem);
  background: #172e3b;
  color: #ffffff;
}

.case-hero--rejoin .case-hero__grid {
  grid-template-columns: minmax(22rem, 0.9fr) minmax(31rem, 1.1fr);
  align-items: center;
}

.case-hero--rejoin .meta-line {
  color: #74d6c8;
}

.case-hero--rejoin h1 {
  max-width: 13ch;
  font-size: clamp(3rem, 4.65vw, 5rem);
}

.case-hero--rejoin .lede {
  max-width: 52ch;
  color: #e4e2dd;
}

.case-hero--rejoin .case-hero__facts {
  border-top-color: rgb(255 255 255 / 25%);
}

.case-hero--rejoin .case-hero__facts dd {
  color: #e4e2dd;
}

.rejoin-hero-copy {
  position: relative;
  z-index: 2;
}

.rejoin-hero-wordmark {
  width: 7.5rem;
  height: auto;
  margin-bottom: var(--s4);
  outline: 0;
}

.rejoin-hero-visual {
  position: relative;
  min-height: clamp(35rem, 48vw, 43rem);
  margin: 0;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 1.5rem;
  background: #4b6170;
}

.rejoin-hero-visual::before {
  content: "Recovery mode";
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  color: #ffffff;
  font: 600 var(--step--1)/1 var(--font-display);
  letter-spacing: 0.02em;
}

.rejoin-hero-device {
  position: absolute;
  overflow: hidden;
  border: 0.45rem solid #172e3b;
  border-radius: 2rem;
  background: #172e3b;
}

.rejoin-hero-device img {
  width: 100%;
  border-radius: 1.45rem;
  outline: 0;
}

.rejoin-hero-device--brand {
  bottom: -12%;
  left: 8%;
  width: min(34%, 15rem);
  rotate: -3deg;
}

.rejoin-hero-device--recovery {
  top: 8%;
  right: 7%;
  width: min(48%, 20rem);
  rotate: 2deg;
}

.rejoin-case .chapter {
  padding-block: clamp(5.5rem, 8vw, 8rem);
}

.rejoin-chapter-heading {
  grid-template-columns: minmax(12rem, 0.3fr) minmax(0, 1fr);
}

.rejoin-chapter-heading .meta-line {
  margin-bottom: var(--s3);
  color: #167568;
  font-size: var(--step--1);
  font-weight: 700;
}

.rejoin-chapter-heading > div {
  grid-column: 2;
}

.rejoin-chapter-heading h2 {
  max-width: 22ch;
}

.rejoin-chapter-heading h2 + p {
  max-width: 58ch;
  margin-top: var(--s4);
}

.rejoin-flow {
  width: 100%;
  margin: 0;
}

.rejoin-flow-window {
  overflow: hidden;
  border: 1px solid #e4e2dd;
  border-radius: 1rem;
  background: #ffffff;
}

.rejoin-flow-window img {
  width: 100%;
  outline: 0;
}

.rejoin-flow figcaption,
.rejoin-device figcaption,
.rejoin-detail-crop figcaption,
.rejoin-outcome-crop figcaption {
  max-width: 58ch;
  margin-top: var(--s2);
  color: #4b6170;
  font-size: var(--step--1);
}

.rejoin-pressure-line {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.75fr);
  gap: var(--s7);
  align-items: end;
  margin-top: var(--s7);
  padding-top: var(--s6);
  border-top: 1px solid #e4e2dd;
}

.rejoin-pressure-line > p:last-child {
  color: #4b6170;
}

.rejoin-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
  margin-top: var(--s7);
}

.rejoin-principles > div {
  display: grid;
  gap: var(--s2);
  padding-top: var(--s4);
  border-top: 2px solid #167568;
}

.rejoin-principles strong {
  font: 600 var(--step-1)/1.15 var(--font-display);
}

.rejoin-principles span {
  color: #4b6170;
}

.rejoin-decision-proof {
  display: grid;
  grid-template-columns: minmax(19rem, 0.7fr) minmax(32rem, 1.3fr);
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
  margin-top: var(--s8);
}

.rejoin-decision-copy {
  position: sticky;
  top: 7rem;
}

.rejoin-decision-copy h3 {
  max-width: 18ch;
}

.rejoin-decision-copy ol {
  margin: var(--s6) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #172e3b;
}

.rejoin-decision-copy li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--s3);
  padding-block: var(--s3);
  border-bottom: 1px solid #e4e2dd;
}

.rejoin-decision-copy li > span {
  color: #167568;
  font: 600 var(--step--1)/1.6 var(--font-display);
}

.rejoin-decision-copy li strong {
  display: block;
  font-family: var(--font-display);
}

.rejoin-decision-copy li p {
  color: #4b6170;
}

.rejoin-decision-screens {
  display: grid;
  grid-template-columns: minmax(14rem, 0.9fr) minmax(15rem, 1.1fr);
  gap: var(--s6);
  align-items: start;
  padding: clamp(2rem, 4vw, 4rem);
  border-radius: 1.25rem;
  background: #e4e2dd;
}

.rejoin-device,
.rejoin-detail-crop,
.rejoin-outcome-crop {
  margin: 0;
}

.rejoin-device img,
.rejoin-detail-crop img,
.rejoin-outcome-crop img {
  width: 100%;
  border: 0.4rem solid #172e3b;
  border-radius: 1.8rem;
  background: #ffffff;
  outline: 0;
}

.rejoin-detail-crop {
  margin-top: clamp(5rem, 9vw, 9rem);
}

.rejoin-state-story {
  display: grid;
  grid-template-columns: minmax(19rem, 0.65fr) minmax(32rem, 1.35fr);
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
  margin-top: var(--s8);
}

.rejoin-state-copy h3 {
  margin-top: var(--s3);
}

.rejoin-state-copy h3 + p,
.rejoin-state-copy p + p {
  margin-top: var(--s4);
}

.rejoin-state-copy > p:not(.meta-line) {
  color: #4b6170;
}

.rejoin-state-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6);
  align-items: start;
  padding: clamp(2rem, 4vw, 4rem);
  border-radius: 1.25rem;
  background: #005b50;
}

.rejoin-state-pair figcaption {
  color: #ffffff;
}

.rejoin-device--offset {
  margin-top: var(--s7);
}

.rejoin-outcome-stage {
  display: grid;
  grid-template-columns: minmax(14rem, 0.72fr) minmax(18rem, 1.15fr) minmax(13rem, 0.63fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 4.5rem);
  border: 1px solid #e4e2dd;
  border-radius: 1.25rem;
  background: #f5f3ee;
}

.rejoin-outcome-copy h3 {
  max-width: 18ch;
}

.rejoin-outcome-copy > p {
  margin-top: var(--s4);
  color: #4b6170;
}

.rejoin-outcome-copy dl {
  margin: var(--s6) 0 0;
  border-top: 1px solid #172e3b;
}

.rejoin-outcome-copy dl > div {
  padding-block: var(--s3);
  border-bottom: 1px solid #c6c8c5;
}

.rejoin-outcome-copy dt {
  font: 600 var(--step--1)/1.2 var(--font-display);
}

.rejoin-outcome-copy dd {
  margin: 0.35rem 0 0;
  color: #4b6170;
}

.rejoin-outcome-copy .evidence-provenance {
  padding-left: var(--s3);
  border-left-color: #167568;
  color: #4b6170;
}

.rejoin-device--history {
  align-self: end;
}

.rejoin-validation {
  display: grid;
  grid-template-columns: minmax(18rem, 0.45fr) minmax(32rem, 1.55fr);
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
  margin-top: var(--s8);
  padding-top: var(--s7);
  border-top: 1px solid #e4e2dd;
}

.rejoin-validation > *,
.rejoin-flow--validation {
  min-width: 0;
}

.rejoin-validation-copy h3 {
  margin-top: var(--s3);
}

.rejoin-validation-copy h3 + p {
  margin-top: var(--s4);
  color: #4b6170;
}

.rejoin-validation-copy ul {
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #172e3b;
}

.rejoin-validation-copy li {
  padding-block: var(--s2);
  border-bottom: 1px solid #e4e2dd;
}

.rejoin-flow--validation {
  align-self: start;
}

.project-feature--rejoin {
  overflow: hidden;
  padding: clamp(2.5rem, 5vw, 5.5rem);
  border: 1px solid #e4e2dd;
  border-radius: 1.5rem;
  background: #fbf9f4;
}

.project-feature--rejoin .meta-line {
  color: #167568;
  font-weight: 700;
}

.project-feature--rejoin .button-link {
  background: #005b50;
}

.project-feature--rejoin .button-link:hover {
  background: #167568;
}

.rejoin-home-logo {
  width: 7rem;
  height: auto;
  margin-bottom: var(--s4);
  outline: 0;
}

.rejoin-home-stage {
  overflow: hidden;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.25rem, 3vw, 3rem) 0;
  border-radius: 1.25rem;
  background: #4b6170;
}

.rejoin-home-rack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
  width: min(100%, 58rem);
  margin-inline: auto;
  padding-bottom: clamp(2rem, 4vw, 4rem);
}

.rejoin-home-phone {
  aspect-ratio: 1170 / 2532;
  border: 0.38rem solid #172e3b;
  border-radius: 1.7rem;
  background: #172e3b;
}

.rejoin-home-phone img {
  border-radius: 1.25rem;
}

.rejoin-home-phone:nth-child(1) {
  transform: translateY(3.5rem);
}

.rejoin-home-phone:nth-child(2) {
  transform: translateY(1rem);
}

.rejoin-home-phone:nth-child(3) {
  transform: translateY(4.75rem);
}

.site-head {
  align-items: center;
}

.brand {
  min-height: 56px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  align-items: center;
  gap: 0.24rem;
  padding-block: 0.35rem;
}

.brand strong {
  font-size: clamp(1.08rem, 1.25vw, 1.24rem);
  line-height: 1;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.brand span {
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav,
.site-nav ul {
  align-self: stretch;
}

.site-nav ul {
  align-items: center;
}

.site-nav a {
  min-height: 56px;
}

@media (max-width: 70rem) {
  .case-hero--rejoin .case-hero__grid {
    grid-template-columns: minmax(20rem, 0.9fr) minmax(27rem, 1.1fr);
    gap: var(--s6);
  }

  .rejoin-decision-proof,
  .rejoin-state-story {
    grid-template-columns: minmax(17rem, 0.72fr) minmax(27rem, 1.28fr);
    gap: var(--s6);
  }

  .rejoin-outcome-stage {
    grid-template-columns: minmax(12rem, 0.72fr) minmax(18rem, 1.28fr);
  }

  .rejoin-device--history {
    display: none;
  }
}

@media (max-width: 52rem) {
  .site-head .brand {
    min-height: 52px;
    padding-block: 0.25rem;
  }

  .site-head .site-nav a {
    min-height: 48px;
  }

  .case-hero--rejoin .case-hero__grid {
    grid-template-columns: 1fr;
  }

  .case-hero--rejoin h1 {
    max-width: 14ch;
  }

  .rejoin-hero-visual {
    min-height: clamp(31rem, 125vw, 40rem);
  }

  .rejoin-hero-device--brand {
    left: 4%;
    width: min(40%, 14rem);
  }

  .rejoin-hero-device--recovery {
    right: 4%;
    width: min(54%, 19rem);
  }

  .rejoin-chapter-heading,
  .rejoin-pressure-line,
  .rejoin-decision-proof,
  .rejoin-state-story,
  .rejoin-validation {
    grid-template-columns: 1fr;
  }

  .rejoin-chapter-heading > div {
    grid-column: 1;
  }

  .rejoin-flow-window {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: #167568 #e4e2dd;
  }

  .rejoin-flow-window img {
    width: 48rem;
    max-width: none;
  }

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

  .rejoin-decision-copy {
    position: static;
  }

  .rejoin-decision-screens {
    overflow-x: auto;
    grid-auto-flow: column;
    grid-auto-columns: min(76vw, 20rem);
    grid-template-columns: none;
    gap: var(--s4);
    padding-right: var(--s5);
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
  }

  .rejoin-decision-screens > figure {
    scroll-snap-align: start;
  }

  .rejoin-detail-crop {
    margin-top: var(--s6);
  }

  .rejoin-state-pair {
    overflow-x: auto;
    grid-auto-flow: column;
    grid-auto-columns: min(74vw, 19rem);
    grid-template-columns: none;
    padding-right: var(--s5);
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
  }

  .rejoin-state-pair > figure {
    scroll-snap-align: start;
  }

  .rejoin-device--offset {
    margin-top: var(--s5);
  }

  .rejoin-outcome-stage {
    overflow-x: auto;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 22rem);
    grid-template-columns: none;
    align-items: start;
    padding-right: var(--s5);
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
  }

  .rejoin-outcome-stage > * {
    scroll-snap-align: start;
  }

  .rejoin-device--history {
    display: block;
  }

  .project-feature--rejoin {
    grid-template-columns: 1fr;
  }

  .rejoin-home-rack {
    overflow-x: auto;
    grid-auto-flow: column;
    grid-auto-columns: min(68vw, 18rem);
    grid-template-columns: none;
    padding-right: var(--s4);
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
  }

  .rejoin-home-phone {
    scroll-snap-align: start;
  }

  .rejoin-home-phone:nth-child(1),
  .rejoin-home-phone:nth-child(2),
  .rejoin-home-phone:nth-child(3) {
    transform: none;
  }
}

@media (max-width: 31rem) {
  .case-hero--rejoin {
    padding-block: 3.5rem;
  }

  .case-hero--rejoin .case-hero__facts {
    grid-template-columns: 1fr;
  }

  .rejoin-hero-visual {
    margin-inline: -0.25rem;
  }

  .rejoin-pressure-line {
    gap: var(--s5);
  }

  .rejoin-decision-screens,
  .rejoin-state-pair,
  .rejoin-outcome-stage {
    margin-inline: -0.25rem;
    padding: 1.25rem 1.5rem 1.75rem 1.25rem;
  }

  .project-feature--rejoin {
    padding: 1.5rem;
  }

  .rejoin-home-stage {
    margin-inline: -0.25rem;
  }
}

body:has(.case-hero--insync) {
  --case-accent: #c95724;
  --case-soft: #fff3ec;
  --ground: #fbfaf7;
  --rule-light: #e6e2dd;
}

.case-hero--insync {
  padding-block: clamp(4rem, 7vw, 7rem);
  background: #fff3ec;
}

.case-hero--darwin {
  padding-block: clamp(4rem, 7vw, 7rem);
}

.case-hero--insync .case-hero__grid {
  grid-template-columns: minmax(24rem, 0.88fr) minmax(32rem, 1.12fr);
  gap: clamp(3.5rem, 6vw, 6.5rem);
  align-items: center;
}

.case-hero--insync h1 {
  max-width: 13ch;
}

.insync-hero-logo {
  width: 8.25rem;
  height: auto;
  margin-bottom: var(--s4);
  outline: 0;
}

.darwin-brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: fit-content;
  margin-bottom: var(--s4);
  color: #000f47;
}

.darwin-brand-word {
  font: 700 2rem/1 var(--font-display);
  letter-spacing: -0.035em;
}

.darwin-brand-divider {
  color: rgb(0 15 71 / 42%);
  font: 300 1.8rem/1 var(--font-body);
}

.darwin-brand-lockup img {
  width: 7.25rem;
  height: auto;
  outline: 0;
}

.case-hero--insync .meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.45rem;
  max-width: none;
  font-size: 0.82rem;
  letter-spacing: 0.015em;
}

.insync-hero-visual {
  margin: 0;
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
  border-radius: 1.5rem;
  background: #e8f0f2;
}

.insync-hero-screen {
  overflow: hidden;
  padding: 0.45rem;
  border-radius: 1rem;
  background: #074c76;
}

.case-hero--insync .insync-hero-screen img {
  width: 100%;
  max-height: none;
  border-radius: 0.65rem;
  object-fit: contain;
  outline: 0;
}

.case-hero--insync .insync-hero-visual figcaption {
  max-width: 58ch;
  margin-top: var(--s3);
  color: var(--ink-soft);
}

.insync-flow-lead {
  margin-top: 0;
}

.insync-context-note {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.28fr) minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
  width: min(100%, 68.75rem);
  margin: var(--s5) auto 0;
  padding: var(--s4);
  border: 0;
  border-radius: 0.75rem;
  background: #f1efeb;
}

.insync-context-note strong {
  font: 600 var(--step--1)/1.3 var(--font-display);
  color: var(--ink);
}

.insync-context-note p {
  max-width: 66ch;
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.insync-flow-library {
  margin-top: clamp(4.5rem, 7vw, 6rem);
}

body:has(.case-hero--insync) .confidence-band {
  gap: var(--s5);
  border: 0;
  background: transparent;
}

body:has(.case-hero--insync) .confidence-band article,
body:has(.case-hero--insync) .confidence-band article:nth-child(2) {
  padding: var(--s4) 0 0;
  border: 0;
  border-top: 1px solid var(--rule);
  background: transparent;
}

body:has(.case-hero--insync) .confidence-band article + article {
  border-left: 0;
}

body:has(.case-hero--insync) .confidence-band strong {
  color: var(--case-accent);
}

body:has(.case-hero--insync) .evidence-note {
  margin-top: var(--s6);
  padding: var(--s4);
  border: 0;
  border-radius: 0.75rem;
  background: #f1efeb;
}

body:has(.case-hero--insync) .responsibility {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  border: 0;
}

body:has(.case-hero--insync) .responsibility article,
body:has(.case-hero--insync) .responsibility article:nth-child(2),
body:has(.case-hero--insync) .responsibility article:nth-child(3) {
  min-height: 0;
  padding: var(--s4) 0 0;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}

.responsibility__label {
  margin-bottom: var(--s4);
  color: var(--ink-soft);
  font: 600 0.76rem/1.2 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:has(.case-hero--insync) .responsibility article:nth-child(2) .responsibility__label,
body:has(.case-hero--insync) .responsibility article:nth-child(2) h3 {
  color: var(--case-accent);
}

body:has(.case-hero--insync) .responsibility article:nth-child(3) .responsibility__label {
  color: #08785f;
}

.insync-bridge {
  padding: clamp(2.5rem, 4.5vw, 4.5rem);
  border: 0;
  border-radius: 1.25rem;
}

.chapter--luna {
  border-top: 0 !important;
}

.insync-product-heading {
  margin-top: clamp(4.5rem, 7vw, 6rem);
}

.insync-context-note--screens {
  width: 100%;
  margin-top: var(--s5);
}

.luna-product-stage {
  padding: clamp(2rem, 4vw, 4rem);
  border: 0;
  background: #eef2f3;
}

.luna-product-grid {
  gap: clamp(3rem, 5vw, 5rem) clamp(2rem, 4vw, 3.5rem);
}

.luna-phone,
.luna-screen-card--lead .luna-phone,
.luna-screen-card:nth-child(n + 4) .luna-phone {
  width: min(100%, 18.5rem);
}

.luna-phone img {
  border: 0;
  outline: 0;
}

.luna-screen-card figcaption {
  width: min(100%, 18.5rem);
  margin-inline: auto;
}

.insync-ia {
  margin-top: clamp(4.5rem, 7vw, 6rem);
}

@media (min-width: 70rem) {
  .case-hero--insync .meta-line {
    white-space: nowrap;
  }
}

@media (max-width: 70rem) {
  .case-hero--insync .case-hero__grid {
    grid-template-columns: minmax(21rem, 0.9fr) minmax(27rem, 1.1fr);
    gap: var(--s6);
  }
}

@media (max-width: 52rem) {
  .case-hero--insync .case-hero__grid,
  body:has(.case-hero--insync) .confidence-band,
  body:has(.case-hero--insync) .responsibility {
    grid-template-columns: 1fr;
  }

  .case-hero--insync h1 {
    max-width: 14ch;
  }

  .darwin-brand-word {
    font-size: 1.85rem;
  }

  .darwin-brand-lockup img {
    width: 6.75rem;
  }

  .case-hero--insync .meta-line {
    display: grid;
    gap: 0.15rem;
  }

  .insync-hero-visual {
    padding: var(--s4);
  }

  .insync-context-note {
    grid-template-columns: 1fr;
    gap: var(--s2);
  }

  body:has(.case-hero--insync) .confidence-band,
  body:has(.case-hero--insync) .responsibility {
    gap: var(--s6);
  }

  .luna-product-stage {
    padding: var(--s4);
  }

  .luna-product-grid {
    gap: var(--s4);
  }

  .luna-phone,
  .luna-screen-card--lead .luna-phone,
  .luna-screen-card:nth-child(n + 4) .luna-phone {
    width: 100%;
  }

  .luna-screen-card figcaption {
    width: 100%;
  }
}

@media (max-width: 31rem) {
  .insync-bridge,
  .insync-hero-visual {
    border-radius: 1rem;
  }

  .insync-bridge {
    padding: 1.5rem;
  }

  .luna-product-stage {
    margin-inline: -0.25rem;
    padding: 1.25rem;
  }
}

.darwin-home-flagship {
  --case-accent: #000f47;
  border-color: rgb(0 15 71 / 12%);
  background: #eef7fb;
}

.darwin-home-flagship .feature-copy .meta-line {
  color: #008b84;
}

.darwin-home-flagship .button-link {
  background: #000f47;
}

.darwin-home-showcase {
  position: relative;
  min-height: clamp(25rem, 34vw, 32rem);
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid rgb(0 15 71 / 12%);
  border-radius: 1rem;
  background: #c9e8f4;
}

.darwin-home-overview {
  overflow: hidden;
  width: 94%;
  margin-left: auto;
  border: 0.4rem solid #ffffff;
  border-radius: 0.75rem;
  background: #ffffff;
}

.darwin-home-overview img,
.darwin-home-framework img {
  display: block;
  width: 100%;
  height: auto;
  outline: 0;
}

.darwin-home-framework {
  position: absolute;
  left: clamp(1.25rem, 3vw, 2.5rem);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  width: min(45%, 18rem);
  overflow: hidden;
  border: 0.4rem solid #ffffff;
  border-radius: 0.75rem;
  background: #ffffff;
}

.darwin-home-visual figcaption {
  color: #33475b;
}

.darwin-case-page {
  --case-accent: #000f47;
  --case-soft: #eef7fb;
  --darwin-midnight: #000f47;
  --darwin-sky: #c9e8f4;
  --darwin-pale: #eef7fb;
  --darwin-teal: #008b84;
  --darwin-gold: #c8922d;
}

.darwin-v22-hero {
  overflow: hidden;
  padding-block: clamp(4rem, 7vw, 7rem);
  background: var(--darwin-pale);
}

.darwin-v22-hero .case-hero__grid {
  grid-template-columns: minmax(23rem, 0.88fr) minmax(32rem, 1.12fr);
  gap: clamp(3.5rem, 6vw, 6.5rem);
}

.darwin-v22-hero h1 {
  max-width: 13ch;
  color: var(--darwin-midnight);
  font-size: clamp(3.25rem, 4.8vw, 5.2rem);
}

.darwin-v22-hero .lede {
  max-width: 54ch;
}

.darwin-v22-hero .case-hero__facts {
  border-top-color: rgb(0 15 71 / 22%);
}

.darwin-hero-stage {
  position: relative;
  min-height: clamp(34rem, 41vw, 40rem);
  margin: 0;
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
  overflow: hidden;
  border: 1px solid rgb(0 15 71 / 12%);
  border-radius: 1.25rem;
  background: var(--darwin-sky);
}

.darwin-hero-product {
  overflow: hidden;
  width: 94%;
  margin-left: auto;
  border: 0.45rem solid #ffffff;
  border-radius: 0.8rem;
  background: #ffffff;
}

.darwin-hero-product img,
.darwin-hero-detail img,
.darwin-hero-framework img {
  display: block;
  width: 100%;
  height: auto;
  outline: 0;
}

.darwin-hero-detail {
  position: absolute;
  z-index: 2;
  right: clamp(1.25rem, 3vw, 2.75rem);
  bottom: 4.5rem;
  width: min(54%, 24rem);
  overflow: hidden;
  border: 0.45rem solid #ffffff;
  border-radius: 0.8rem;
  background: #ffffff;
}

.darwin-hero-framework {
  position: absolute;
  z-index: 3;
  left: clamp(1.25rem, 3vw, 2.75rem);
  bottom: 5.4rem;
  width: min(44%, 19rem);
  overflow: hidden;
  border: 0.45rem solid #ffffff;
  border-radius: 0.8rem;
  background: #ffffff;
}

.darwin-hero-stage figcaption {
  position: absolute;
  right: clamp(1.25rem, 2.5vw, 2.25rem);
  bottom: 1.25rem;
  left: clamp(1.25rem, 2.5vw, 2.25rem);
  color: var(--darwin-midnight);
  font-size: 0.9rem;
}

.darwin-case .darwin-chapter {
  padding-block: clamp(5.5rem, 8vw, 8rem);
}

.darwin-chapter-heading {
  grid-template-columns: minmax(12rem, 0.3fr) minmax(0, 1fr);
}

.darwin-chapter-heading > div {
  grid-column: 2;
}

.darwin-chapter-heading .meta-line,
.darwin-component-copy .meta-line,
.darwin-state-copy .meta-line,
.darwin-handoff-story .meta-line,
.darwin-capability-grid .meta-line {
  margin-bottom: var(--s3);
  color: var(--darwin-teal);
  font-weight: 700;
}

.darwin-chapter-heading h2 {
  max-width: 20ch;
}

.darwin-chapter-heading h2 + p {
  max-width: 66ch;
  margin-top: var(--s4);
  color: #33475b;
  font-size: var(--step-1);
}

.darwin-flow {
  margin: 0;
}

.darwin-flow-window {
  overflow: hidden;
  border-block: 1px solid rgb(0 15 71 / 16%);
  background: #ffffff;
}

.darwin-flow-window:focus-visible {
  outline: 3px solid var(--darwin-midnight);
  outline-offset: 4px;
}

.darwin-flow-window img {
  display: block;
  width: 100%;
  height: auto;
  outline: 0;
}

.darwin-flow figcaption {
  max-width: 72ch;
  margin-top: var(--s3);
  color: #4b6170;
}

.darwin-pressure-line,
.darwin-outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(4rem, 7vw, 6rem);
}

.darwin-pressure-line article,
.darwin-outcome-grid article {
  padding-top: var(--s4);
  border-top: 2px solid var(--darwin-midnight);
}

.darwin-pressure-line strong,
.darwin-outcome-grid strong {
  color: var(--darwin-midnight);
  font: 700 var(--step-0)/1.2 var(--font-display);
}

.darwin-pressure-line p,
.darwin-outcome-grid p {
  margin-top: var(--s3);
  color: #4b6170;
}

.darwin-governance-list {
  width: min(100%, 66rem);
  margin: clamp(4.5rem, 7vw, 6.5rem) 0 0 auto;
}

.darwin-governance-list article {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--s4);
  padding-block: var(--s5);
  border-top: 1px solid rgb(0 15 71 / 20%);
}

.darwin-governance-list article:last-child {
  border-bottom: 1px solid rgb(0 15 71 / 20%);
}

.darwin-governance-list article > span {
  color: var(--darwin-gold);
  font: 700 var(--step-1)/1 var(--font-display);
}

.darwin-governance-list h3 {
  color: var(--darwin-midnight);
}

.darwin-governance-list p {
  max-width: 58ch;
  margin-top: var(--s2);
  color: #4b6170;
}

.darwin-component-story {
  display: grid;
  grid-template-columns: minmax(17rem, 0.68fr) minmax(30rem, 1.32fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  margin-top: clamp(5rem, 8vw, 7rem);
  padding: clamp(2rem, 4vw, 4rem);
  border: 1px solid rgb(0 15 71 / 12%);
  border-radius: 1rem;
  background: var(--darwin-pale);
}

.darwin-component-copy h3,
.darwin-state-copy h3,
.darwin-handoff-story h3 {
  max-width: 17ch;
  color: var(--darwin-midnight);
  font-size: clamp(2rem, 3vw, 3.25rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
}

.darwin-component-copy h3 + p,
.darwin-state-copy h3 + p,
.darwin-handoff-story h3 + p {
  margin-top: var(--s4);
  color: #4b6170;
  font-size: var(--step-1);
}

.darwin-component-figure,
.darwin-action-figure,
.darwin-product-lead figure,
.darwin-product-pair figure,
.darwin-state-pair figure,
.darwin-handoff-story figure {
  margin: 0;
}

.darwin-component-figure img,
.darwin-action-figure img,
.darwin-product-lead img,
.darwin-product-frame img,
.darwin-state-pair img,
.darwin-handoff-story img {
  display: block;
  width: 100%;
  height: auto;
  outline: 0;
}

.darwin-component-figure img {
  border: 0.4rem solid #ffffff;
  border-radius: 0.75rem;
}

.darwin-component-figure figcaption,
.darwin-action-figure figcaption,
.darwin-product-lead figcaption,
.darwin-product-pair figcaption,
.darwin-state-pair figcaption {
  margin-top: var(--s3);
  color: #4b6170;
  font-size: 0.92rem;
}

.darwin-action-figure {
  width: min(100%, 70rem);
  margin: clamp(4.5rem, 7vw, 6.5rem) 0 0 auto;
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
  overflow: hidden;
  border: 1px solid rgb(0 15 71 / 12%);
  border-radius: 1rem;
  background: var(--darwin-pale);
}

.darwin-action-figure img {
  border: 1px solid rgb(0 15 71 / 12%);
  border-radius: 0.65rem;
}

.darwin-flow--principle {
  margin-top: clamp(4.5rem, 7vw, 6.5rem);
}

.darwin-product-lead {
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid rgb(0 15 71 / 12%);
  border-radius: 1rem;
  background: var(--darwin-sky);
}

.darwin-product-lead img {
  border: 0.4rem solid #ffffff;
  border-radius: 0.75rem;
}

.darwin-product-lead figcaption,
.darwin-product-pair figcaption {
  display: grid;
  gap: 0.25rem;
}

.darwin-product-lead figcaption strong,
.darwin-product-pair figcaption strong {
  color: var(--darwin-midnight);
  font-family: var(--font-display);
}

.darwin-product-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  margin-top: clamp(4.5rem, 7vw, 6.5rem);
}

.darwin-product-frame {
  display: grid;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgb(0 15 71 / 14%);
  border-radius: 0.75rem;
  background: var(--darwin-pale);
  place-items: center;
}

.darwin-product-frame img {
  height: 100%;
  object-fit: cover;
}

.darwin-state-story {
  display: grid;
  grid-template-columns: minmax(18rem, 0.72fr) minmax(30rem, 1.28fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  margin-top: clamp(5rem, 8vw, 7rem);
  padding: clamp(2rem, 4vw, 4rem);
  border-radius: 1rem;
  background: var(--darwin-midnight);
  color: #ffffff;
}

.darwin-state-copy .meta-line {
  color: var(--darwin-sky);
}

.darwin-state-copy h3,
.darwin-state-copy h3 + p {
  color: #ffffff;
}

.darwin-state-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  align-items: stretch;
}

.darwin-state-pair figure {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  padding: var(--s3);
  border-radius: 0.75rem;
  background: #ffffff;
}

.darwin-state-pair img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
}

.darwin-state-pair figcaption {
  color: #33475b;
}

.darwin-handoff-story {
  display: grid;
  grid-template-columns: minmax(30rem, 1.2fr) minmax(18rem, 0.8fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  margin-top: clamp(5rem, 8vw, 8rem);
}

.darwin-handoff-story figure {
  overflow: hidden;
  border: 1px solid rgb(0 15 71 / 14%);
  border-radius: 0.75rem;
  background: #ffffff;
}

.site-head {
  width: 100%;
  margin-inline: 0;
  padding-inline: max(1rem, calc((100vw - 90rem) / 2));
}

.darwin-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(4.5rem, 7vw, 6.5rem);
}

.darwin-capability-grid article {
  padding-top: var(--s4);
  border-top: 2px solid var(--darwin-midnight);
}

.darwin-capability-grid h3 {
  max-width: 14ch;
  color: var(--darwin-midnight);
}

.darwin-capability-grid h3 + p {
  margin-top: var(--s3);
  color: #4b6170;
}

.darwin-evidence-boundary {
  display: grid;
  grid-template-columns: minmax(9rem, 0.28fr) minmax(0, 1fr);
  gap: var(--s5);
  margin-top: clamp(4rem, 6vw, 5rem);
  padding-block: var(--s4);
  border-block: 1px solid rgb(0 15 71 / 18%);
}

.darwin-evidence-boundary strong {
  color: var(--darwin-midnight);
  font-family: var(--font-display);
}

.darwin-evidence-boundary p {
  max-width: 68ch;
  color: #4b6170;
}

.darwin-closing-statement {
  margin-top: clamp(5rem, 8vw, 8rem);
  padding: clamp(2.5rem, 5vw, 5rem);
  border-radius: 0.75rem;
  background: var(--darwin-midnight);
  color: #ffffff;
}

.darwin-closing-statement p {
  color: var(--darwin-sky);
  font-family: var(--font-display);
}

.darwin-closing-statement strong {
  display: block;
  max-width: 22ch;
  margin-top: var(--s3);
  font: 700 clamp(2.25rem, 4vw, 4.5rem)/1.02 var(--font-display);
  letter-spacing: -0.04em;
}

@media (max-width: 70rem) {
  .darwin-v22-hero .case-hero__grid {
    grid-template-columns: minmax(21rem, 0.92fr) minmax(27rem, 1.08fr);
    gap: var(--s6);
  }

  .darwin-component-story,
  .darwin-state-story,
  .darwin-handoff-story {
    gap: var(--s6);
  }
}

@media (max-width: 52rem) {
  .darwin-home-showcase {
    display: grid;
    min-height: 0;
    gap: var(--s3);
  }

  .darwin-home-overview {
    width: 100%;
  }

  .darwin-home-framework {
    position: static;
    z-index: 2;
    width: min(72%, 18rem);
    margin-top: -1.5rem;
    margin-left: var(--s4);
  }

  .darwin-v22-hero .case-hero__grid,
  .darwin-component-story,
  .darwin-state-story,
  .darwin-handoff-story {
    grid-template-columns: 1fr;
  }

  .darwin-v22-hero h1 {
    max-width: 14ch;
  }

  .darwin-hero-stage {
    display: grid;
    min-height: 0;
    gap: var(--s3);
  }

  .darwin-hero-product {
    width: 100%;
  }

  .darwin-hero-detail {
    position: static;
    z-index: 2;
    width: min(86%, 25rem);
    margin-top: -1.75rem;
    margin-left: auto;
  }

  .darwin-hero-framework {
    position: static;
    z-index: 3;
    width: min(72%, 20rem);
    margin-top: -1.75rem;
    margin-left: var(--s4);
  }

  .darwin-hero-stage figcaption {
    position: static;
  }

  .darwin-chapter-heading {
    grid-template-columns: 1fr;
  }

  .darwin-chapter-heading > div {
    grid-column: auto;
  }

  .darwin-flow-window {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
  }

  .darwin-flow-window img {
    width: 48rem;
    max-width: none;
    scroll-snap-align: start;
  }

  .darwin-pressure-line,
  .darwin-outcome-grid,
  .darwin-capability-grid {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }

  .darwin-component-story {
    padding: var(--s5);
  }

  .darwin-product-pair {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }

  .darwin-state-story {
    padding: var(--s5);
  }

  .darwin-handoff-story figure {
    order: 2;
  }

  .darwin-evidence-boundary {
    grid-template-columns: 1fr;
    gap: var(--s2);
  }
}

@media (max-width: 31rem) {
  .darwin-v22-hero {
    padding-block: 3.5rem;
  }

  .darwin-hero-stage,
  .darwin-component-story,
  .darwin-product-lead,
  .darwin-state-story,
  .darwin-closing-statement {
    margin-inline: -0.25rem;
    padding: 1.25rem;
  }

  .darwin-hero-framework {
    width: 78%;
    margin-left: var(--s2);
  }

  .darwin-governance-list article {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .darwin-state-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  align-items: stretch;
}

.darwin-state-pair figure {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  padding: var(--s3);
  border-radius: 0.75rem;
  background: #ffffff;
}

.darwin-state-pair img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
}

.darwin-state-pair figcaption {
  color: #33475b;
}

.darwin-handoff-story {
  display: grid;
  grid-template-columns: minmax(30rem, 1.2fr) minmax(18rem, 0.8fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  margin-top: clamp(5rem, 8vw, 8rem);
}

.darwin-handoff-story figure {
  overflow: hidden;
  border: 1px solid rgb(0 15 71 / 14%);
  border-radius: 0.75rem;
  background: #ffffff;
}

.site-head {
  width: 100%;
  margin-inline: 0;
  padding-inline: max(1rem, calc((100vw - 90rem) / 2));
}

.darwin-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(4.5rem, 7vw, 6.5rem);
}

.darwin-capability-grid article {
  padding-top: var(--s4);
  border-top: 2px solid var(--darwin-midnight);
}

.darwin-capability-grid h3 {
  max-width: 14ch;
  color: var(--darwin-midnight);
}

.darwin-capability-grid h3 + p {
  margin-top: var(--s3);
  color: #4b6170;
}

.darwin-evidence-boundary {
  display: grid;
  grid-template-columns: minmax(9rem, 0.28fr) minmax(0, 1fr);
  gap: var(--s5);
  margin-top: clamp(4rem, 6vw, 5rem);
  padding-block: var(--s4);
  border-block: 1px solid rgb(0 15 71 / 18%);
}

.darwin-evidence-boundary strong {
  color: var(--darwin-midnight);
  font-family: var(--font-display);
}

.darwin-evidence-boundary p {
  max-width: 68ch;
  color: #4b6170;
}

.darwin-closing-statement {
  margin-top: clamp(5rem, 8vw, 8rem);
  padding: clamp(2.5rem, 5vw, 5rem);
  border-radius: 0.75rem;
  background: var(--darwin-midnight);
  color: #ffffff;
}

.darwin-closing-statement p {
  color: var(--darwin-sky);
  font-family: var(--font-display);
}

.darwin-closing-statement strong {
  display: block;
  max-width: 22ch;
  margin-top: var(--s3);
  font: 700 clamp(2.25rem, 4vw, 4.5rem)/1.02 var(--font-display);
  letter-spacing: -0.04em;
}

@media (max-width: 70rem) {
  .darwin-v22-hero .case-hero__grid {
    grid-template-columns: minmax(21rem, 0.92fr) minmax(27rem, 1.08fr);
    gap: var(--s6);
  }

  .darwin-component-story,
  .darwin-state-story,
  .darwin-handoff-story {
    gap: var(--s6);
  }
}

@media (max-width: 52rem) {
  .darwin-home-showcase {
    display: grid;
    min-height: 0;
    gap: var(--s3);
  }

  .darwin-home-overview {
    width: 100%;
  }

  .darwin-home-framework {
    position: static;
    z-index: 2;
    width: min(72%, 18rem);
    margin-top: -1.5rem;
    margin-left: var(--s4);
  }

  .darwin-v22-hero .case-hero__grid,
  .darwin-component-story,
  .darwin-state-story,
  .darwin-handoff-story {
    grid-template-columns: 1fr;
  }

  .darwin-v22-hero h1 {
    max-width: 14ch;
  }

  .darwin-hero-stage {
    display: grid;
    min-height: 0;
    gap: var(--s3);
  }

  .darwin-hero-product {
    width: 100%;
  }

  .darwin-hero-detail {
    position: static;
    z-index: 2;
    width: min(86%, 25rem);
    margin-top: -1.75rem;
    margin-left: auto;
  }

  .darwin-hero-framework {
    position: static;
    z-index: 3;
    width: min(72%, 20rem);
    margin-top: -1.75rem;
    margin-left: var(--s4);
  }

  .darwin-hero-stage figcaption {
    position: static;
  }

  .darwin-chapter-heading {
    grid-template-columns: 1fr;
  }

  .darwin-chapter-heading > div {
    grid-column: auto;
  }

  .darwin-flow-window {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
  }

  .darwin-flow-window img {
    width: 48rem;
    max-width: none;
    scroll-snap-align: start;
  }

  .darwin-pressure-line,
  .darwin-outcome-grid,
  .darwin-capability-grid {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }

  .darwin-component-story {
    padding: var(--s5);
  }

  .darwin-product-pair {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }

  .darwin-state-story {
    padding: var(--s5);
  }

  .darwin-handoff-story figure {
    order: 2;
  }

  .darwin-evidence-boundary {
    grid-template-columns: 1fr;
    gap: var(--s2);
  }
}

@media (max-width: 31rem) {
  .darwin-v22-hero {
    padding-block: 3.5rem;
  }

  .darwin-hero-stage,
  .darwin-component-story,
  .darwin-product-lead,
  .darwin-state-story,
  .darwin-closing-statement {
    margin-inline: -0.25rem;
    padding: 1.25rem;
  }

  .darwin-hero-framework {
    width: 78%;
    margin-left: var(--s2);
  }

  .darwin-governance-list article {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

}

  .darwin-state-pair {
    grid-auto-flow: column;
    grid-auto-columns: min(76vw, 18rem);
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: var(--s3);
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
  }

  .darwin-state-pair figure {
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Hero phrase motion intentionally remains active. */
  .hero-phrase {
    transition:
      opacity 440ms var(--ease-enter),
      transform 560ms var(--ease-enter) !important;
  }

  .hero-phrase-window::after {
    transition:
      opacity 180ms ease,
      transform 240ms var(--ease-enter) !important;
  }

  ::view-transition-old(root) {
    animation: route-fade-out var(--motion-instant) linear both !important;
  }

  ::view-transition-new(root) {
    animation: route-fade-in var(--motion-instant) linear both !important;
  }

  .home-page .project-feature.motion-ready .feature-copy,
  .home-page .project-feature--darwin.motion-ready .feature-image--darwin,
  .home-page .project-feature--insync.motion-ready .insync-preview .feature-image {
    transform: none !important;
  }

  .home-page .project-feature.motion-ready .feature-copy,
  .home-page .project-feature--darwin.motion-ready .feature-image--darwin,
  .home-page .project-feature--insync.motion-ready .insync-preview .feature-image,
  .home-page .project-feature--journey.motion-ready .phone-shot,
  .job-shift.motion-ready > section,
  .job-shift.motion-ready > .job-shift__arrow {
    translate: none !important;
    scale: 1 !important;
    transition-delay: 0ms !important;
    transition-duration: var(--motion-fast) !important;
    transition-property: opacity !important;
  }

  .chapter-nav a::after,
  .next-project strong::after {
    transform: none !important;
    transition-duration: var(--motion-instant) !important;
    transition-property: opacity !important;
  }

  .disclosure-mark__vertical {
    transition-duration: 0.01ms !important;
  }
}

@media print {
  @page {
    margin: 14mm;
  }

  body {
    background: white;
    color: black;
    font-size: 10pt;
  }

  body::before,
  .site-head,
  .site-footer,
  .chapter-nav,
  .skip-link,
  .print-hide {
    display: none !important;
  }

  .cv-shell {
    width: 100%;
    padding: 0;
  }

  .cv-head h1 {
    font-size: 24pt;
  }

  .cv-section {
    grid-template-columns: 31mm 1fr;
    gap: 7mm;
    padding-block: 6mm;
    break-inside: avoid;
  }

  .role + .role {
    margin-top: 6mm;
  }

  .role li + li {
    margin-top: 1.5mm;
  }

  a {
    text-decoration: none;
  }
}

.cv .gallery-button:hover,
.cv .gallery-button:focus-visible {
  background: #3730B7;
  border-color: #3730B7;
  color: #ffffff;
}

@media print {
  @page {
    size: A4;
    margin: 14mm;
  }

  html,
  body.cv {
    background: #ffffff !important;
  }

  body::before,
  .site-head,
  .site-footer,
  .chapter-nav,
  .skip-link,
  .print-hide,
  [data-print] {
    display: none !important;
  }

  .cv-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #ffffff;
  }

  .cv-head {
    padding-top: 0;
  }

  .cv-head h1 {
    font-size: 24pt;
  }

  .cv-section {
    grid-template-columns: 31mm 1fr;
    gap: 7mm;
    padding-block: 6mm;
    break-inside: avoid;
  }

  .role {
    break-inside: avoid;
  }

  .role + .role {
    margin-top: 6mm;
  }

  .role li + li {
    margin-top: 1.5mm;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}