:root {
  --paper: #f3f0e7;
  --paper-2: #e4dfd2;
  --ink: #292e26;
  --ink-soft: #666c5e;
  --orange: #9c4e3b;
  --orange-soft: #d7decd;
  --lavender: #d7decd;
  --lavender-2: #d7decd;
  --purple: #252f29;
  --purple-2: #4f6248;
  --green: #6fce7a;
  --red: #ff565d;
  --yellow: #ffbf33;
  --line: rgba(41,46,38, .22);
  --header-h: 78px;
  --gutter: clamp(18px, 4.6vw, 72px);
  --content: 1440px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --radius: 6px;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; background: var(--paper); color: var(--ink); }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
figure, p, h1, h2, h3, h4, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--orange-soft); color: var(--ink); }
::-webkit-scrollbar { width: 0; height: 0; }

.skip-link {
  position: fixed;
  z-index: 10000;
  left: 18px;
  top: 18px;
  transform: translateY(-150%);
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  transition: transform .25s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.noise {
  pointer-events: none;
  position: fixed;
  z-index: 900;
  inset: 0;
  opacity: .055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E");
}

.page-wipe {
  display: none;
  position: fixed;
  z-index: 9998;
  inset: 0;
  background: var(--orange);
  transform: translateY(0);
  transition: transform .82s var(--ease);
  will-change: transform;
}
html.js .page-wipe { display: block; }
html.is-ready .page-wipe { transform: translateY(-103%); pointer-events: none; }
html.is-leaving .page-wipe { transform: translateY(0); transition-duration: .5s; pointer-events: auto; }
.page-wipe__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: inline-flex;
  align-items: baseline;
  min-width: 3.2em;
  font-size: clamp(56px, 8vw, 124px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.page-wipe__typed { display: inline-block; }
.page-wipe__cursor {
  display: inline-block;
  margin-left: .035em;
  color: var(--ink);
  font-family: var(--font-body, sans-serif);
  font-weight: 300;
  transform: translateY(-.02em);
  animation: preloader-cursor-blink .72s steps(1, end) infinite;
}
@keyframes preloader-cursor-blink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

.shell { width: min(100%, var(--content)); margin-inline: auto; padding-inline: var(--gutter); }
.site-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.section { position: relative; padding-block: clamp(86px, 12vw, 190px); }
.section--tight { padding-block: clamp(64px, 8vw, 118px); }
.section--paper { background: var(--paper); }
.section--sand { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--orange { background: var(--orange); color: var(--ink); }
.section--lavender { background: var(--lavender); }
.section--purple { background: var(--purple); color: var(--paper); }
.section-rule { border-top: 1px solid currentColor; opacity: .25; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: none;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--orange); border-radius: 50%; }
.eyebrow--light::before { background: var(--paper); }
.label {
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: none;
}
.display-xxl {
  font-size: clamp(82px, 17vw, 250px);
  line-height: .78;
  letter-spacing: -.075em;
  font-weight: 300;
}
.display-xl {
  font-size: clamp(64px, 12vw, 180px);
  line-height: .84;
  letter-spacing: -.065em;
  font-weight: 300;
}
.display-lg {
  font-size: clamp(52px, 8vw, 126px);
  line-height: .9;
  letter-spacing: -.055em;
  font-weight: 300;
}
.display-md {
  font-size: clamp(42px, 5.6vw, 84px);
  line-height: .96;
  letter-spacing: -.045em;
  font-weight: 300;
}
.h2 {
  font-size: clamp(46px, 7.4vw, 112px);
  line-height: .93;
  letter-spacing: -.055em;
  font-weight: 300;
}
.h3 {
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 300;
}
.h4 { font-size: clamp(21px, 2.4vw, 34px); line-height: 1.08; letter-spacing: -.03em; font-weight: 400; }
.lede { font-size: clamp(22px, 3vw, 44px); line-height: 1.16; letter-spacing: -.035em; font-weight: 300; }
.copy { font-size: clamp(17px, 1.65vw, 24px); line-height: 1.5; letter-spacing: -.02em; }
.copy-sm { font-size: 15px; line-height: 1.55; }
.muted { color: color-mix(in srgb, currentColor 55%, transparent); }
.orange { color: var(--orange); }
.uppercase { text-transform: none; }

.mask-line { overflow: hidden; display: block; padding-bottom: .08em; }
.mask-line > span { display: block; transform: translateY(112%); transition: transform 1s var(--ease); }
.is-visible .mask-line > span, .hero-loaded .mask-line > span { transform: translateY(0); }
[data-delay="1"] .mask-line > span { transition-delay: .08s; }
[data-delay="2"] .mask-line > span { transition-delay: .16s; }
[data-delay="3"] .mask-line > span { transition-delay: .24s; }
[data-delay="4"] .mask-line > span { transition-delay: .32s; }

.reveal {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-clip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.25s var(--ease);
}
.reveal-clip.is-visible { clip-path: inset(0 0 0 0); }
.reveal-clip img { transform: scale(1.14); transition: transform 1.35s var(--ease); }
.reveal-clip.is-visible img { transform: scale(1); }

.site-header {
  position: fixed;
  z-index: 800;
  inset: 0 0 auto;
  height: var(--header-h);
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: var(--ink);
  transition: color .35s var(--ease), background-color .35s var(--ease), transform .45s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(13px);
  transform: translateY(-105%);
  transition: transform .45s var(--ease);
  border-bottom: 1px solid rgba(41,46,38,.08);
}
.site-header.is-scrolled::before { transform: translateY(0); }
.site-header[data-theme="dark"] { color: var(--paper); }
.site-header[data-theme="dark"]::before { background: color-mix(in srgb, var(--ink) 86%, transparent); border-color: rgba(243,240,231,.12); }
.site-header[data-theme="orange"] { color: var(--ink); }
.site-header[data-theme="orange"]::before { background: color-mix(in srgb, var(--orange) 90%, transparent); }
.header-logo { display: inline-flex; align-items: center; gap: 11px; justify-self: start; font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.header-logo__mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; transition: transform .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease); }
.header-logo:hover .header-logo__mark { transform: rotate(-9deg) scale(.93); background: var(--orange); color: var(--ink); border-color: var(--orange); }
.header-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: none; }
.header-nav a { position: relative; padding-block: 8px; }
.header-nav a::after { content: ""; position: absolute; inset: auto 0 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.header-nav a:hover::after, .header-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 14px; }
.header-role { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: none; }

















.cursor-dot, .cursor-ring { position: fixed; pointer-events: none; z-index: 950; left: 0; top: 0; opacity: 0; }
.cursor-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); margin: -3.5px 0 0 -3.5px; }
.cursor-ring { width: 42px; height: 42px; border: 1px solid currentColor; border-radius: 50%; margin: -21px 0 0 -21px; transition: width .2s var(--ease), height .2s var(--ease), margin .2s var(--ease), background .2s var(--ease); mix-blend-mode: difference; color: white; }
.cursor-ring.is-link { width: 62px; height: 62px; margin: -31px 0 0 -31px; background: rgba(255,255,255,.12); }

.scroll-cue { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; text-transform: none; font-weight: 700; letter-spacing: .08em; transform: rotate(-90deg); transform-origin: left center; }
.scroll-cue__circle { width: 46px; height: 46px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.scroll-cue:hover .scroll-cue__circle { background: var(--ink); color: var(--paper); transform: translateX(-5px); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 30px;
  gap: 15px;
  background: var(--orange);
  color: var(--ink);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: none;
  position: relative;
  overflow: hidden;
  transition: color .35s var(--ease), transform .35s var(--ease);
}
.button::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateY(105%); transition: transform .45s var(--ease); }
.button span { position: relative; z-index: 1; }
.button::after { content: "→"; position: relative; z-index: 1; font-size: 18px; transition: transform .35s var(--ease); }
.button:hover { color: var(--paper); transform: translateY(-2px); }
.button:hover::before { transform: translateY(0); }
.button:hover::after { transform: translateX(6px); }
.button--paper { background: var(--paper); }
.button--outline { background: transparent; border: 1px solid currentColor; }
.button--outline::before { background: currentColor; }

/* Home */
.home-hero {
  min-height: 100svh;
  padding: calc(var(--header-h) + clamp(44px, 7vw, 100px)) var(--gutter) clamp(70px, 8vw, 110px);
  position: relative;
  overflow: hidden;
}
.home-hero__svg-lines { position: absolute; inset: 10% var(--gutter) auto; height: 70%; opacity: .16; pointer-events: none; }
.home-hero__row { position: relative; display: flex; align-items: center; gap: clamp(12px, 2vw, 32px); white-space: nowrap; }
.home-hero__row--2 { justify-content: center; margin-top: clamp(0px, -1vw, -20px); }
.home-hero__row--3 { justify-content: flex-end; margin-top: clamp(4px, 1vw, 18px); }
.home-hero__name { font-size: clamp(84px, 18vw, 255px); line-height: .73; letter-spacing: -.08em; font-weight: 300; }
.hero-card {
  position: relative;
  width: clamp(116px, 17vw, 250px);
  aspect-ratio: 1.35;
  flex: 0 0 auto;
  overflow: visible;
}
.hero-card__inner { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius); background: var(--orange); transform: rotate(-3deg); transition: transform .55s var(--ease); }
.hero-card:hover .hero-card__inner { transform: rotate(1deg) scale(.98); }
.hero-card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); transition: transform .8s var(--ease), filter .5s var(--ease); }
.hero-card:hover img { transform: scale(1.06); filter: grayscale(0); }
.hero-card__label { position: absolute; z-index: 2; inset: 50% auto auto 50%; translate: -50% -50%; color: white; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: none; }
.hero-card__orbit { position: absolute; width: 36px; aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--orange); top: -10px; left: 10%; animation: orbitSpin 8s linear infinite; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.hero-work-stack { width: clamp(128px, 18vw, 270px); aspect-ratio: 1; position: relative; flex: 0 0 auto; }
.hero-work-stack__card { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: .78; border-radius: var(--radius); overflow: hidden; transition: transform .65s var(--ease); box-shadow: 0 16px 38px rgba(41,46,38,.14); }
.hero-work-stack__card img { width: 100%; height: 100%; object-fit: cover; }
.hero-work-stack__card:nth-child(1) { transform: translate(-80%, -50%) rotate(-10deg); }
.hero-work-stack__card:nth-child(2) { background: var(--orange); transform: translate(-50%, -50%) rotate(2deg); }
.hero-work-stack__card:nth-child(3) { transform: translate(-18%, -50%) rotate(10deg); }
.hero-work-stack:hover .hero-work-stack__card:nth-child(1) { transform: translate(-102%, -53%) rotate(-16deg); }
.hero-work-stack:hover .hero-work-stack__card:nth-child(2) { transform: translate(-50%, -48%) rotate(0deg); }
.hero-work-stack:hover .hero-work-stack__card:nth-child(3) { transform: translate(2%, -53%) rotate(16deg); }
.home-hero__meta { display: grid; grid-template-columns: minmax(260px, 420px) 1fr auto; align-items: end; gap: 30px; margin-top: clamp(54px, 7vw, 100px); }
.hero-typewriter { min-height: 3.3em; font-size: clamp(17px, 1.6vw, 24px); line-height: 1.4; }
.hero-typewriter .cursor { color: var(--orange); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-meta-tags { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: .06em; }

.home-intro__kicker { grid-column: 1 / 3; }
.home-intro__statement { grid-column: 3 / 12; }
.home-intro__cta { grid-column: 10 / 13; margin-top: 34px; }

.metric-ribbon { overflow: hidden; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.metric-ribbon__track { width: max-content; display: flex; animation: marquee 24s linear infinite; }
.metric-ribbon__item { display: flex; align-items: center; gap: 28px; padding: 22px 38px; font-size: clamp(24px, 3vw, 46px); line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.metric-ribbon__item::after { content: "✦"; color: var(--orange); }
@keyframes marquee { to { transform: translateX(-50%); } }

.triad { padding-block: clamp(90px, 12vw, 180px); }
.triad__word { position: relative; min-height: clamp(260px, 42vw, 600px); border-top: 1px solid var(--line); padding-top: 20px; overflow: hidden; }
.triad__word:last-child { border-bottom: 1px solid var(--line); }
.triad__title { font-size: clamp(80px, 18vw, 260px); line-height: .8; letter-spacing: -.08em; font-weight: 300; color: var(--ink); transition: color .5s var(--ease); }
.triad__word:hover .triad__title { color: var(--orange); }
.triad__media { position: absolute; width: clamp(150px, 24vw, 340px); aspect-ratio: 1.1; right: 6%; top: 50%; translate: 0 -50%; overflow: hidden; border-radius: var(--radius); transform: rotate(3deg); box-shadow: 0 30px 80px rgba(41,46,38,.16); }
.triad__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.triad__word:hover .triad__media img { transform: scale(1.07); }
.triad__copy { position: absolute; left: 44%; bottom: 12%; width: min(300px, 40%); }

.work-scroller { position: relative; height: 360vh; background: var(--lavender); }
.work-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; padding-top: calc(var(--header-h) + 34px); }
.work-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding-inline: var(--gutter); }
.work-heading .h2 { max-width: 9ch; }
.work-track { display: flex; gap: clamp(18px, 3vw, 42px); width: max-content; padding: 55px var(--gutter) 60px; will-change: transform; }
.project-card { width: min(70vw, 860px); flex: 0 0 auto; position: relative; }
.project-card__media { height: min(58vh, 610px); background: var(--ink); border-radius: var(--radius); overflow: hidden; position: relative; }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), filter .6s var(--ease); }
.project-card:hover .project-card__media img { transform: scale(1.04); }
.project-card__shade { position: absolute; inset: 0; background: linear-gradient(140deg, rgba(41,46,38,.1), rgba(41,46,38,.5)); }
.project-card__number { position: absolute; z-index: 2; left: 18px; top: 18px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 12px; font-weight: 700; }
.project-card__open { position: absolute; z-index: 2; right: 18px; bottom: 18px; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--orange); font-size: 24px; transition: transform .45s var(--ease), background .35s var(--ease); }
.project-card:hover .project-card__open { transform: rotate(-35deg) scale(.92); background: var(--paper); }
.project-card__info { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; padding-top: 18px; }
.project-card__title { font-size: clamp(34px, 5vw, 72px); line-height: .95; letter-spacing: -.05em; font-weight: 300; }
.project-card__meta { text-align: right; font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: .06em; }
.project-card--note { width: min(45vw, 560px); }
.project-card--note .project-card__media { background: var(--orange); display: grid; place-items: center; padding: 40px; }
.project-card--note .project-card__media p { font-size: clamp(36px, 5vw, 74px); line-height: .94; letter-spacing: -.05em; font-weight: 300; }

.manifesto { height: 430vh; position: relative; background: var(--ink); color: var(--paper); }
.manifesto__sticky { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; padding: var(--gutter); }
.manifesto__halo { position: absolute; width: min(70vw, 900px); aspect-ratio: 1; border: 1px solid rgba(243,240,231,.16); border-radius: 50%; transform: scale(.45); opacity: .3; will-change: transform; }
.manifesto__copy { position: relative; z-index: 2; max-width: 1220px; text-align: center; font-size: clamp(45px, 7.5vw, 116px); line-height: .96; letter-spacing: -.05em; font-weight: 300; }
.manifesto__word { opacity: .18; transition: opacity .25s linear, color .25s linear; }
.manifesto__word.is-active { opacity: 1; }
.manifesto__word.is-accent { color: var(--orange); }
.manifesto__hint { position: absolute; bottom: 34px; font-size: 11px; text-transform: none; letter-spacing: .08em; font-weight: 700; }

.home-contact { min-height: 92svh; display: flex; align-items: flex-end; }
.home-contact__top { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; width: 100%; }
.home-contact__line { border-top: 1px solid currentColor; margin-block: 38px 24px; }

/* Case study shared */
.case-hero { min-height: 100svh; position: relative; display: flex; align-items: flex-end; overflow: hidden; padding: calc(var(--header-h) + 55px) var(--gutter) clamp(48px, 6vw, 84px); }
.case-hero--agent { background: radial-gradient(circle at 38% 88%, #7d4bf2 0, #2e2047 31%, #09070e 74%); color: var(--paper); }
.case-hero--domain { background: radial-gradient(circle at 80% 78%, #ff7b53 0, #3a224d 34%, #09070e 74%); color: var(--paper); }
.case-hero__content { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: 5fr 7fr; align-items: end; gap: 32px; }
.case-hero__title { font-size: clamp(74px, 10.8vw, 164px); line-height: .82; letter-spacing: -.065em; font-weight: 300; max-width: 8ch; }
.case-hero__subtitle { margin-top: 18px; font-size: clamp(20px, 2.4vw, 34px); letter-spacing: -.03em; }
.case-hero__media { position: relative; min-height: min(68vh, 700px); display: flex; align-items: end; }
.case-hero__media::before { content: ""; position: absolute; width: 90%; height: 70%; right: 0; bottom: -5%; background: radial-gradient(ellipse, rgba(125,75,242,.65), transparent 68%); filter: blur(20px); }
.case-hero--domain .case-hero__media::before { background: radial-gradient(ellipse, rgba(156,78,59,.6), transparent 68%); }
.case-hero__media img { position: relative; z-index: 1; width: 118%; max-width: none; margin-left: -6%; filter: drop-shadow(0 38px 40px rgba(0,0,0,.34)); }
.case-hero__facts { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 40px; }
.case-hero__fact dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: none; opacity: .55; }
.case-hero__fact dd { margin: 4px 0 0; font-size: clamp(16px, 1.5vw, 22px); }

.case-intro__label { grid-column: 1 / 3; }
.case-intro__lead { grid-column: 3 / 11; }
.case-intro__roles { grid-column: 3 / 8; margin-top: 60px; }
.case-intro__collab { grid-column: 9 / 13; margin-top: 60px; }
.simple-list li { padding: 12px 0; border-top: 1px solid currentColor; display: flex; justify-content: space-between; gap: 20px; }
.simple-list li:last-child { border-bottom: 1px solid currentColor; }
.simple-list li::after { content: "↗"; color: var(--orange); }

.case-index { position: sticky; top: calc(var(--header-h) + 18px); z-index: 40; align-self: start; }
.case-index__list { display: grid; gap: 9px; }
.case-index a { display: flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: .07em; opacity: .34; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.case-index a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; }
.case-index a.is-active { opacity: 1; transform: translateX(6px); }
.case-index a.is-active::before { background: var(--orange); border-color: var(--orange); }
.case-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: clamp(30px, 6vw, 96px); }

.city-story { height: 420vh; position: relative; background: var(--paper); }
.city-story__sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 4fr 8fr; align-items: center; gap: 40px; padding: calc(var(--header-h) + 20px) var(--gutter) 30px; overflow: hidden; }
.city-story__copy { position: relative; z-index: 3; }
.city-story__copy h2 { max-width: 6ch; }
.city-step-copy { margin-top: 42px; min-height: 150px; }
.city-step-copy__item { position: absolute; max-width: 360px; opacity: 0; transform: translateY(24px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.city-step-copy__item.is-active { opacity: 1; transform: translateY(0); }
.city-scene { position: relative; height: min(76vh, 760px); }
.city-layer { position: absolute; transition: opacity .55s var(--ease), transform .8s var(--ease), filter .55s var(--ease); will-change: transform, opacity; }
.city-layer--base { inset: 5% -8% 0 0; width: 108%; height: 92%; object-fit: cover; opacity: .25; filter: grayscale(1); }
.city-layer--traffic { width: 50%; right: 12%; top: 19%; border: 2px solid var(--purple); border-radius: 28px; opacity: 0; transform: translateY(30px) scale(.94); }
.city-layer--light { height: 38%; width: auto; right: 38%; top: 19%; opacity: 0; transform: translateY(-18px) scale(.8); }
.city-layer--camera { width: 12%; right: 35%; top: 23%; opacity: 0; transform: translateY(-18px) rotate(-12deg); }
.city-layer--control { width: 33%; left: 6%; bottom: 3%; border: 2px solid var(--purple); border-radius: 28px; opacity: 0; transform: translateY(28px) scale(.92); }
.city-story[data-step="1"] .city-layer--traffic,
.city-story[data-step="2"] .city-layer--traffic,
.city-story[data-step="3"] .city-layer--traffic { opacity: 1; transform: translateY(0) scale(1); }
.city-story[data-step="2"] .city-layer--light,
.city-story[data-step="3"] .city-layer--light,
.city-story[data-step="2"] .city-layer--camera,
.city-story[data-step="3"] .city-layer--camera { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
.city-story[data-step="3"] .city-layer--control { opacity: 1; transform: translateY(0) scale(1); }
.city-story[data-step="3"] .city-layer--base { opacity: .1; }
.city-story__progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 20px; height: 2px; background: rgba(41,46,38,.15); }
.city-story__progress span { display: block; width: 25%; height: 100%; background: var(--orange); transition: transform .45s var(--ease); transform-origin: left; }
.city-story[data-step="1"] .city-story__progress span { transform: scaleX(2); }
.city-story[data-step="2"] .city-story__progress span { transform: scaleX(3); }
.city-story[data-step="3"] .city-story__progress span { transform: scaleX(4); }

.problem-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.problem-stat__visual { position: relative; min-height: 620px; display: grid; place-items: center; }
.problem-stat__visual img { width: min(70%, 520px); }
.dot-field { display: grid; grid-template-columns: repeat(10, 12px); gap: 12px; position: absolute; right: 0; bottom: 12%; }
.dot-field span { width: 12px; height: 12px; border-radius: 50%; background: var(--purple-2); transform: scale(0); opacity: 0; transition: transform .5s var(--ease), opacity .5s var(--ease); }
.dot-field.is-visible span { transform: scale(1); opacity: 1; }
.problem-stat__number { font-size: clamp(92px, 14vw, 210px); line-height: .78; letter-spacing: -.07em; font-weight: 300; }
.problem-stat__number small { display: block; font-size: clamp(24px, 3vw, 42px); letter-spacing: -.02em; margin-top: 18px; }

.callout-panel { border-radius: var(--radius); overflow: hidden; position: relative; min-height: 540px; background: var(--purple); color: var(--paper); display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.callout-panel__copy { padding: clamp(32px, 6vw, 86px); }
.callout-panel__media { height: 100%; min-height: 540px; position: relative; overflow: hidden; }
.callout-panel__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.65) brightness(.68); }

.persona { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; align-items: center; }
.persona__portrait { position: relative; }
.persona__portrait::before { content: ""; position: absolute; inset: 12% -5% -5% 12%; background: var(--lavender); border-radius: 50%; }
.persona__portrait img { position: relative; width: 100%; max-width: 500px; filter: grayscale(1); }
.persona__tasks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 38px; }
.persona__task { min-height: 122px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; justify-content: space-between; transition: background .35s var(--ease), transform .35s var(--ease); }
.persona__task::before { content: ""; width: 15px; height: 15px; border-radius: 50%; background: var(--orange); }
.persona__task:hover { background: var(--orange); transform: translateY(-5px); }

.research-summary { display: grid; grid-template-columns: 4fr 8fr; gap: 50px; align-items: start; }
.research-number { aspect-ratio: 1; background: var(--lavender-2); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; }
.research-number strong { font-size: clamp(78px, 10vw, 150px); font-weight: 300; line-height: .8; letter-spacing: -.06em; }
.research-insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.insight-card { min-height: 250px; background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.insight-card__icon { font-size: 34px; color: var(--orange); }
.insight-card h3 { font-size: clamp(25px, 2.6vw, 40px); line-height: 1; letter-spacing: -.035em; font-weight: 300; }

.journey { border-top: 1px solid var(--line); }
.journey__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.journey-card { position: relative; min-height: 350px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); padding: 28px; }
.journey-card:not(:last-child)::after { content: "→"; position: absolute; right: -19px; top: 50%; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; }
.journey-card h3 { font-size: clamp(28px, 3vw, 44px); font-weight: 300; letter-spacing: -.035em; }
.journey-card ul { margin-top: 54px; }
.journey-card li { padding: 10px 0; border-top: 1px solid var(--line); }

.cognitive { display: grid; grid-template-columns: 4fr 8fr; gap: 50px; align-items: center; }
.cognitive__chart { position: relative; background: var(--paper); border-radius: var(--radius); padding: 22px; min-height: 440px; }
.cognitive__chart svg { width: 100%; height: 400px; overflow: visible; }
.cognitive__path { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1600; stroke-dashoffset: 1600; transition: stroke-dashoffset 1.8s var(--ease); }
.cognitive__accent { fill: none; stroke: var(--orange); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.8s .2s var(--ease); }
.cognitive__area { opacity: 0; transition: opacity 1s .45s var(--ease); }
.cognitive__chart.is-visible .cognitive__path, .cognitive__chart.is-visible .cognitive__accent { stroke-dashoffset: 0; }
.cognitive__chart.is-visible .cognitive__area { opacity: 1; }
.cognitive__notes { display: grid; gap: 14px; }
.cognitive__note { padding: 20px; border-top: 1px solid currentColor; display: flex; justify-content: space-between; gap: 20px; font-size: clamp(20px, 2.4vw, 32px); letter-spacing: -.03em; }
.cognitive__note span:last-child { color: var(--orange); }

.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.principle { min-height: 360px; padding: 28px; border-radius: var(--radius); border: 1px solid currentColor; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.principle::before { content: ""; position: absolute; width: 220px; height: 220px; border: 1px solid currentColor; border-radius: 50%; right: -85px; top: -85px; opacity: .18; }
.principle strong { font-size: clamp(70px, 8vw, 118px); font-weight: 300; line-height: .8; letter-spacing: -.06em; }
.principle h3 { font-size: clamp(28px, 3vw, 46px); font-weight: 300; letter-spacing: -.04em; }

.lifecycle { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 42px; }
.lifecycle__item { min-height: 260px; padding: 20px; border: 1px solid currentColor; border-radius: var(--radius); opacity: .32; display: flex; flex-direction: column; justify-content: space-between; }
.lifecycle__item:nth-child(2), .lifecycle__item:nth-child(3), .lifecycle__item:nth-child(4) { background: var(--paper); color: var(--ink); opacity: 1; border-color: var(--paper); }
.lifecycle__item strong { font-size: 74px; line-height: .8; font-weight: 300; }
.lifecycle__item span { font-size: 18px; font-weight: 700; }
.abc-row { display: grid; grid-template-columns: 7fr 5fr; gap: 42px; align-items: center; margin-top: 80px; }
.abc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.abc-card { min-height: 220px; padding: 22px; background: var(--paper); color: var(--ink); border-radius: var(--radius); }
.abc-card h3 { font-size: clamp(30px, 3vw, 46px); font-weight: 300; letter-spacing: -.04em; }
.abc-row img { width: 100%; max-width: 520px; justify-self: end; }

.before-after { height: 260vh; position: relative; }
.before-after__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-items: center; padding: calc(var(--header-h) + 18px) var(--gutter) 30px; }
.before-after__grid { display: grid; grid-template-columns: 4fr 8fr; gap: 46px; align-items: center; }
.before-after__stage { position: relative; height: min(70vh, 720px); }
.before-after__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .55s var(--ease), transform .75s var(--ease); }
.before-after__image--after { opacity: 0; transform: translateY(26px) scale(.98); }
.before-after.is-after .before-after__image--before { opacity: 0; transform: translateY(-26px) scale(.98); }
.before-after.is-after .before-after__image--after { opacity: 1; transform: translateY(0) scale(1); }
.before-after__label { position: absolute; left: 16px; top: 16px; z-index: 2; padding: 9px 12px; border-radius: 999px; background: var(--orange); font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: .07em; }
.before-after__copy-item { display: none; }
.before-after__copy-item.is-active { display: block; }

.collage { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; align-items: end; }
.collage__item { overflow: hidden; border-radius: var(--radius); background: var(--paper); }
.collage__item img { width: 100%; height: 100%; object-fit: cover; }
.collage__item--large { height: 640px; }
.collage__item--small { height: 470px; transform: translateY(70px); }

.testing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.score-card { min-height: 280px; background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; justify-content: space-between; }
.score-card strong { font-size: clamp(64px, 7vw, 112px); font-weight: 300; line-height: .78; letter-spacing: -.06em; }
.score-card p { font-size: 18px; font-weight: 700; }
.iteration-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 70px; }
.iteration-card { background: var(--paper); border-radius: var(--radius); overflow: hidden; }
.iteration-card img { width: 100%; aspect-ratio: 1.7; object-fit: contain; background: white; }
.iteration-card__body { padding: 20px; display: flex; justify-content: space-between; gap: 20px; }

.drawing-board { display: grid; grid-template-columns: 1fr 90px 1fr; gap: 24px; align-items: center; }
.drawing-board__image { background: white; border-radius: var(--radius); overflow: hidden; padding: 12px; }
.drawing-board__image img { width: 100%; aspect-ratio: 1.55; object-fit: contain; }
.drawing-board__arrow img { width: 100%; transform: rotate(10deg); }

.screen-flow { height: var(--flow-height, 620vh); position: relative; background: #08070c; color: var(--paper); }
.screen-flow__sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 3fr 9fr; align-items: center; gap: 38px; padding: calc(var(--header-h) + 20px) var(--gutter) 28px; overflow: hidden; }
.screen-flow__copy { position: relative; z-index: 3; }
.flow-step { position: absolute; opacity: 0; transform: translateY(20px); transition: opacity .45s var(--ease), transform .45s var(--ease); max-width: 300px; }
.flow-step.is-active { opacity: 1; transform: translateY(0); }
.flow-step strong { display: block; font-size: 11px; text-transform: none; letter-spacing: .08em; color: var(--orange); margin-bottom: 10px; }
.flow-step h3 { font-size: clamp(27px, 3vw, 44px); font-weight: 300; line-height: 1; letter-spacing: -.04em; }
.flow-step p { margin-top: 12px; opacity: .65; }
.screen-flow__frame { position: relative; min-height: min(74vh, 760px); }
.screen-flow__frame::before { content: ""; position: absolute; inset: 12% 5% -5%; background: radial-gradient(ellipse, rgba(116,76,248,.66), transparent 65%); filter: blur(26px); }
.screen-flow--domain .screen-flow__frame::before { background: radial-gradient(ellipse, rgba(156,78,59,.58), transparent 65%); }
.flow-screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateY(24px) scale(.985); transition: opacity .55s var(--ease), transform .75s var(--ease); filter: drop-shadow(0 34px 36px rgba(0,0,0,.48)); }
.flow-screen.is-active { opacity: 1; transform: translateY(0) scale(1); }
.screen-flow__rail { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 18px; display: flex; gap: 5px; }
.screen-flow__rail span { flex: 1; height: 2px; background: rgba(243,240,231,.18); overflow: hidden; }
.screen-flow__rail span::after { content: ""; display: block; height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .35s linear; }
.screen-flow__rail span.is-past::after, .screen-flow__rail span.is-active::after { transform: scaleX(1); }

.balance { display: grid; grid-template-columns: 7fr 5fr; gap: 44px; align-items: center; }
.balance__sides { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; margin-top: 46px; }
.balance__side { padding: 24px; border: 1px solid currentColor; border-radius: var(--radius); min-height: 190px; }
.balance__vs { font-size: 22px; font-weight: 700; }
.balance__features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 22px; }
.balance__feature { min-height: 96px; background: var(--orange); border-radius: var(--radius); padding: 14px; font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: .05em; }
.balance img { width: 100%; }

.impact-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.impact-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 16px; margin-top: 68px; }
.impact-card { min-height: 310px; padding: 25px; border-radius: var(--radius); background: var(--paper); color: var(--ink); border: 1px solid rgba(41,46,38,.15); display: flex; flex-direction: column; justify-content: space-between; }
.impact-card:nth-child(1) { grid-column: span 7; }
.impact-card:nth-child(2) { grid-column: span 5; }
.impact-card:nth-child(3) { grid-column: span 4; }
.impact-card:nth-child(4) { grid-column: span 4; }
.impact-card:nth-child(5) { grid-column: span 4; }
.impact-card__number { font-size: clamp(60px, 8vw, 130px); font-weight: 300; line-height: .78; letter-spacing: -.065em; }
.impact-card__arrow { color: var(--orange); margin-inline: .14em; }
.impact-card__label { font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: .06em; }
.impact-card__foot { font-size: 13px; opacity: .62; }

.roadmap { display: grid; gap: 45px; }
.roadmap__row { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: center; }
.roadmap__line { position: relative; height: 6px; background: var(--lavender-2); }
.roadmap__fill { position: absolute; inset: 0 auto 0 0; width: var(--fill); background: var(--purple-2); }
.roadmap__nodes { position: absolute; inset: 50% 0 auto; translate: 0 -50%; display: flex; justify-content: space-between; }
.roadmap__node { width: 30px; height: 30px; border-radius: 50%; background: var(--lavender); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--purple-2); position: relative; }
.roadmap__node.is-done { background: var(--purple-2); }
.roadmap__labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 25px; font-size: 13px; }

.learning-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.learning-card { min-height: 230px; padding: 24px; border-radius: var(--radius); display: flex; flex-direction: column; justify-content: space-between; }
.learning-card:nth-child(1) { grid-column: span 4; background: var(--lavender-2); }
.learning-card:nth-child(2) { grid-column: span 3; background: var(--paper); }
.learning-card:nth-child(3) { grid-column: span 5; background: var(--paper); }
.learning-card:nth-child(4) { grid-column: 5 / span 8; background: var(--lavender-2); }
.learning-card h3 { font-size: clamp(28px, 3vw, 46px); font-weight: 300; line-height: 1; letter-spacing: -.04em; }
.learning-card__icon { font-size: 40px; color: var(--purple-2); }

/* Domain specifics */
.alert-hero { min-height: 85svh; display: grid; grid-template-columns: 7fr 5fr; gap: 44px; align-items: center; }
.alert-hero img { width: 100%; max-width: 600px; justify-self: end; }
.current-ux { height: 360vh; position: relative; background: var(--lavender); }
.current-ux__sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 3fr 9fr; gap: 38px; align-items: center; padding: calc(var(--header-h) + 18px) var(--gutter) 26px; overflow: hidden; }
.current-ux__copy { position: relative; min-height: 260px; }
.current-step { position: absolute; opacity: 0; transform: translateY(20px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.current-step.is-active { opacity: 1; transform: translateY(0); }
.current-step__number { width: 58px; height: 58px; border-radius: 50%; background: var(--lavender-2); display: grid; place-items: center; font-size: 24px; font-weight: 700; margin-bottom: 22px; }
.current-ux__screens { position: relative; height: min(72vh, 720px); }
.current-screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateY(24px) scale(.985); transition: opacity .55s var(--ease), transform .75s var(--ease); }
.current-screen.is-active { opacity: 1; transform: translateY(0) scale(1); }

.loop-map { position: relative; padding: 70px 0; }
.loop-map__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 70px; position: relative; }
.loop-card { min-height: 260px; background: var(--lavender-2); padding: 24px; border-radius: var(--radius); position: relative; }
.loop-card__number { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); font-weight: 700; margin-bottom: 35px; }
.loop-card:not(:last-child)::after { content: "↔"; position: absolute; right: -54px; top: 50%; font-size: 48px; font-weight: 300; }
.loop-map__scribble { position: absolute; inset: auto 17% -80px auto; width: 150px; transform: rotate(20deg); }

.context-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.context-card { min-height: 360px; border-top: 1px solid currentColor; padding-top: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.context-card__icon { width: 72px; height: 72px; border: 2px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-size: 28px; }
.context-card li { padding: 8px 0; border-top: 1px solid var(--line); }

.insight-stage { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--gutter); }
.insight-stage h2 { max-width: 10ch; }
.insight-stage__support { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 64px; text-align: left; }
.insight-stage__support article { min-height: 210px; padding: 22px; border: 1px solid currentColor; border-radius: var(--radius); display: flex; flex-direction: column; justify-content: space-between; }

.user-stories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 55px; }
.story-card { min-height: 300px; padding: 24px; border-top: 1px solid currentColor; }
.story-card__number { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink); font-weight: 700; margin-bottom: 38px; }
.story-card p { font-size: clamp(24px, 3vw, 40px); line-height: 1.18; letter-spacing: -.035em; }
.story-card:first-child { grid-row: span 2; }

.proposal-map { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 54px; align-items: center; margin-top: 60px; }
.proposal-node { min-height: 120px; background: var(--lavender-2); border-radius: var(--radius); display: grid; place-items: center; text-align: center; padding: 20px; font-size: clamp(24px, 3vw, 42px); letter-spacing: -.035em; position: relative; }
.proposal-middle { display: grid; gap: 16px; }
.proposal-node--accent { background: var(--orange); }
.proposal-node--left::after { content: "↗  ↘"; position: absolute; right: -48px; font-size: 34px; letter-spacing: 8px; }
.proposal-middle::after { content: "↗  ↘"; position: absolute; transform: translateX(calc(100% + 12px)); font-size: 34px; letter-spacing: 8px; }

.sketch-collage { position: relative; min-height: 760px; }
.sketch-collage img { position: absolute; border-radius: var(--radius); box-shadow: 0 28px 70px rgba(41,46,38,.15); }
.sketch-collage img:nth-child(1) { width: 46%; left: 0; top: 0; transform: rotate(-2deg); }
.sketch-collage img:nth-child(2) { width: 46%; right: 0; top: 0; transform: rotate(2deg); }
.sketch-collage img:nth-child(3) { width: 48%; left: 28%; bottom: 0; transform: rotate(.7deg); }

.feedback-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feedback-item__media { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; aspect-ratio: 1.2; display: grid; place-items: center; }
.feedback-item__media img { width: 100%; height: 100%; object-fit: contain; }
.feedback-item h3 { margin-top: 18px; font-size: clamp(30px, 3vw, 46px); font-weight: 300; letter-spacing: -.04em; }
.feedback-item ul { margin-top: 10px; }
.feedback-item li { padding: 6px 0; opacity: .68; }

.layout-response { display: grid; grid-template-columns: 1fr 80px 1fr; gap: 24px; align-items: center; margin-top: 65px; }
.layout-block { aspect-ratio: 1.65; border: 2px solid var(--ink); display: grid; grid-template-rows: 14% 1fr 24%; overflow: hidden; }
.layout-block--after { grid-template-columns: 72% 28%; grid-template-rows: 14% 1fr; }
.layout-block__bar { background: #e796a0; grid-column: 1 / -1; }
.layout-block__main { background: #ffc4c5; }
.layout-block__bottom { display: grid; grid-template-columns: 1fr 1fr; }
.layout-block__bottom span:first-child { background: #dd717e; }
.layout-block__bottom span:last-child { background: #ca4054; }
.layout-block--after .layout-block__side { display: grid; grid-template-rows: 1fr 1fr; }
.layout-block--after .layout-block__side span:first-child { background: #dd717e; }
.layout-block--after .layout-block__side span:last-child { background: #ca4054; }
.layout-response__arrow { font-size: 54px; text-align: center; }

.ongoing-note { min-height: 70svh; display: grid; grid-template-columns: 7fr 5fr; gap: 44px; align-items: center; }
.ongoing-note img { width: 100%; }

.site-footer { background: var(--ink); color: var(--paper); padding: clamp(80px, 11vw, 160px) var(--gutter) 32px; min-height: 76svh; display: flex; flex-direction: column; justify-content: space-between; }
.site-footer__top { display: grid; grid-template-columns: 8fr 4fr; gap: 36px; align-items: end; }
.site-footer__title { font-size: clamp(70px, 13vw, 190px); line-height: .78; letter-spacing: -.07em; font-weight: 300; }
.site-footer__nav { display: grid; }
.site-footer__nav a { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid rgba(243,240,231,.25); text-transform: none; letter-spacing: .06em; font-size: 12px; font-weight: 700; }
.site-footer__nav a:last-child { border-bottom: 1px solid rgba(243,240,231,.25); }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; padding-top: 70px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: none; }
.back-top { width: 58px; height: 58px; border-radius: 50%; background: var(--orange); color: var(--ink); display: grid; place-items: center; font-size: 24px; transition: transform .35s var(--ease); }
.back-top:hover { transform: rotate(-35deg) scale(.92); }

@media (max-width: 1100px) {
  :root { --header-h: 72px; --gutter: clamp(18px, 3.5vw, 40px); }
  .header-role { display: none; }
  .home-hero__meta { grid-template-columns: 1fr auto; }
  .hero-typewriter { grid-column: 1 / -1; }
  .hero-meta-tags { justify-content: flex-start; }
  .home-intro__statement { grid-column: 3 / 13; }
  .project-card { width: 78vw; }
  .case-hero__content { grid-template-columns: 1fr; }
  .case-hero__media { position: absolute; width: 58%; right: -8%; bottom: 0; opacity: .6; }
  .case-hero__title { position: relative; z-index: 2; }
  .case-layout { grid-template-columns: 1fr; }
  .case-index { display: none; }
  .city-story__sticky { grid-template-columns: 1fr 1.6fr; }
  .persona { grid-template-columns: 1fr 1.5fr; }
  .research-summary { grid-template-columns: 1fr; }
  .research-number { max-width: 420px; aspect-ratio: 1.5; }
  .balance { grid-template-columns: 1fr; }
  .balance img { max-width: 540px; justify-self: center; }
}

@media (max-width: 800px) {
  :root { --gutter: 18px; }
  .site-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
  .header-nav { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .header-actions { grid-column: 2; }
  .display-xxl { font-size: clamp(70px, 27vw, 150px); }
  .display-xl { font-size: clamp(62px, 23vw, 132px); }
  .home-hero { padding-top: calc(var(--header-h) + 46px); }
  .home-hero__row { white-space: normal; }
  .home-hero__name { font-size: clamp(75px, 25vw, 142px); line-height: .78; }
  .home-hero__row--2 { justify-content: flex-start; }
  .home-hero__row--3 { justify-content: flex-start; flex-wrap: wrap; }
  .hero-card { width: 105px; }
  .hero-work-stack { width: 122px; }
  .home-hero__meta { grid-template-columns: 1fr; margin-top: 60px; }
  .hero-meta-tags { justify-content: flex-start; }
  .scroll-cue { display: none; }
  .home-intro__kicker { grid-column: 1 / -1; }
  .home-intro__statement { grid-column: 1 / -1; }
  .home-intro__cta { grid-column: 1 / -1; }
  .triad__word { min-height: 480px; }
  .triad__title { font-size: clamp(76px, 26vw, 145px); }
  .triad__media { width: 58%; right: 0; top: 56%; }
  .triad__copy { left: 0; bottom: 8%; width: 46%; }
  .work-scroller { height: auto; padding: 90px 0; }
  .work-sticky { position: relative; height: auto; overflow: visible; padding-top: 0; }
  .work-track { width: 100%; display: grid; transform: none !important; }
  .project-card, .project-card--note { width: 100%; }
  .project-card__media { height: auto; aspect-ratio: 1.22; }
  .manifesto { height: 280vh; }
  .manifesto__copy { font-size: clamp(40px, 12vw, 72px); }
  .home-contact__top { grid-template-columns: 1fr; }
  .case-hero { min-height: 88svh; }
  .case-hero__media { width: 88%; opacity: .42; right: -24%; }
  .case-hero__facts { gap: 18px; }
  .case-intro__label, .case-intro__lead, .case-intro__roles, .case-intro__collab { grid-column: 1 / -1; margin-top: 0; }
  .case-intro__roles, .case-intro__collab { margin-top: 40px; }
  .city-story { height: auto; }
  .city-story__sticky { position: relative; height: auto; grid-template-columns: 1fr; padding-block: 90px; }
  .city-step-copy { min-height: auto; display: grid; gap: 20px; }
  .city-step-copy__item { position: relative; opacity: 1; transform: none; border-top: 1px solid var(--line); padding-top: 16px; }
  .city-scene { height: 520px; }
  .city-layer--traffic { width: 58%; right: 4%; opacity: 1; transform: none; }
  .city-layer--light, .city-layer--camera, .city-layer--control { opacity: 1; transform: none; }
  .city-story__progress { display: none; }
  .problem-stat { grid-template-columns: 1fr; }
  .problem-stat__visual { min-height: 460px; }
  .callout-panel { grid-template-columns: 1fr; }
  .callout-panel__media { min-height: 380px; }
  .persona { grid-template-columns: 1fr; }
  .persona__portrait img { max-width: 360px; }
  .persona__tasks { grid-template-columns: 1fr; }
  .research-insights { grid-template-columns: 1fr; }
  .insight-card { min-height: 190px; }
  .journey__steps { grid-template-columns: 1fr; }
  .journey-card:not(:last-child)::after { right: 50%; top: auto; bottom: -27px; transform: translateX(50%) rotate(90deg); }
  .cognitive { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; }
  .principle { min-height: 270px; }
  .lifecycle { grid-template-columns: repeat(2, 1fr); }
  .lifecycle__item { min-height: 190px; }
  .abc-row { grid-template-columns: 1fr; }
  .abc-cards { grid-template-columns: 1fr; }
  .abc-row img { justify-self: center; max-width: 360px; }
  .before-after { height: auto; }
  .before-after__sticky { position: relative; height: auto; padding-block: 90px; }
  .before-after__grid { grid-template-columns: 1fr; }
  .before-after__stage { height: 380px; }
  .before-after__image--after { opacity: 1; position: relative; margin-top: 20px; }
  .before-after__image--before { position: relative; }
  .before-after__stage { display: grid; height: auto; }
  .collage { grid-template-columns: 1fr; }
  .collage__item--large, .collage__item--small { height: auto; aspect-ratio: 1.2; transform: none; }
  .testing-grid { grid-template-columns: 1fr; }
  .iteration-compare { grid-template-columns: 1fr; }
  .drawing-board { grid-template-columns: 1fr; }
  .drawing-board__arrow { width: 70px; justify-self: center; transform: rotate(80deg); }
  .screen-flow { height: auto; padding: 80px 0; }
  .screen-flow__sticky { position: relative; height: auto; display: grid; grid-template-columns: 1fr; }
  .screen-flow__copy { min-height: auto; display: grid; gap: 24px; }
  .flow-step { position: relative; opacity: 1; transform: none; border-top: 1px solid rgba(243,240,231,.2); padding-top: 18px; max-width: none; }
  .screen-flow__frame { min-height: auto; display: grid; gap: 20px; }
  .flow-screen { position: relative; opacity: 1; transform: none; height: auto; }
  .screen-flow__rail { display: none; }
  .balance__sides { grid-template-columns: 1fr; }
  .balance__vs { text-align: center; }
  .balance__features { grid-template-columns: 1fr 1fr; }
  .impact-card:nth-child(n) { grid-column: span 12; }
  .roadmap__row { grid-template-columns: 1fr; }
  .learning-card:nth-child(n) { grid-column: 1 / -1; }
  .alert-hero { grid-template-columns: 1fr; }
  .alert-hero img { max-width: 420px; justify-self: center; }
  .current-ux { height: auto; }
  .current-ux__sticky { position: relative; height: auto; grid-template-columns: 1fr; padding-block: 90px; }
  .current-ux__copy { min-height: auto; display: grid; gap: 28px; }
  .current-step { position: relative; opacity: 1; transform: none; }
  .current-ux__screens { height: auto; display: grid; gap: 20px; }
  .current-screen { position: relative; opacity: 1; transform: none; height: auto; }
  .loop-map__cards { grid-template-columns: 1fr; gap: 50px; }
  .loop-card:not(:last-child)::after { right: 50%; top: auto; bottom: -45px; transform: translateX(50%) rotate(90deg); }
  .context-grid { grid-template-columns: 1fr; }
  .context-card { min-height: 280px; }
  .insight-stage__support { grid-template-columns: 1fr; }
  .user-stories { grid-template-columns: 1fr; }
  .proposal-map { grid-template-columns: 1fr; }
  .proposal-node--left::after, .proposal-middle::after { display: none; }
  .sketch-collage { min-height: 740px; }
  .sketch-collage img:nth-child(1), .sketch-collage img:nth-child(2) { width: 72%; }
  .sketch-collage img:nth-child(3) { width: 76%; left: 12%; }
  .feedback-grid { grid-template-columns: 1fr; }
  .layout-response { grid-template-columns: 1fr; }
  .layout-response__arrow { transform: rotate(90deg); }
  .ongoing-note { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal, .reveal-clip, .mask-line > span { opacity: 1; transform: none; clip-path: none; }
  .work-scroller, .manifesto, .city-story, .before-after, .screen-flow, .current-ux { height: auto; }
  .work-sticky, .manifesto__sticky, .city-story__sticky, .before-after__sticky, .screen-flow__sticky, .current-ux__sticky { position: relative; height: auto; }
  .cursor-dot, .cursor-ring { display: none; }
}
.case-index--fixed {
  position: fixed;
  z-index: 620;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  padding: 14px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  color: var(--ink);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 36px rgba(41,46,38,.08);
}
.case-index--fixed .case-index__list { gap: 12px; }
.case-index--fixed a { width: 12px; height: 12px; font-size: 0; gap: 0; }
.case-index--fixed a::before { width: 10px; height: 10px; background: transparent; }
.case-index--fixed a::after {
  content: attr(data-label);
  position: absolute;
  right: 28px;
  padding: 8px 10px;
  border-radius: 3px;
  background: var(--ink);
  color: var(--paper);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .07em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.case-index--fixed a:hover::after { opacity: 1; transform: translateX(0); }
.case-index--fixed a.is-active { transform: none; }
@media (max-width: 1100px) { .case-index--fixed { display: none; } }
/* Reveal wipes are painted above the content so the observed element keeps a measurable box. */
.reveal-clip {
  position: relative;
  overflow: hidden;
  clip-path: none;
  --reveal-bg: var(--paper);
}
.reveal-clip::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: -1px;
  background: var(--reveal-bg);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 1.15s var(--ease);
  pointer-events: none;
}
.reveal-clip.is-visible::after { transform: scaleX(0); }
.reveal-clip img { opacity: 0; transform: scale(1.12); transition: opacity .25s linear, transform 1.35s var(--ease); }
.reveal-clip.is-visible img { opacity: 1; transform: scale(1); }
.section--sand .reveal-clip { --reveal-bg: var(--paper-2); }
.section--lavender .reveal-clip { --reveal-bg: var(--lavender); }
.section--purple .reveal-clip, .section--ink .reveal-clip { --reveal-bg: var(--purple); }
.case-hero .reveal-clip, .screen-flow .reveal-clip { --reveal-bg: #09070e; }
.callout-panel.reveal-clip { --reveal-bg: var(--purple); }
.collage__item.reveal-clip, .drawing-board__image.reveal-clip, .iteration-card.reveal-clip { --reveal-bg: var(--paper); }


@font-face {
  font-family: "HelveticaNeueLocal";
  src: local("HelveticaNeue"), local("Helvetica Neue");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geometric415LiteLocal";
  src: local("Geometric415Lite"), local("Geometric 415 Lite"), local("Geometric 415 Std Lite"), local("Geometric-415-Lite");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

/* ========================================================================== 
   Untold-reference refinement; personalised for Shiva
   Uses the native Helvetica Neue family when available. No font binary is
   bundled; Nimbus Sans is the local preview fallback.
   ========================================================================== */
:root {
  --font-neue: "HelveticaNeueLocal", "HelveticaNeue", "Helvetica Neue", "Nimbus Sans", Helvetica, Arial, sans-serif;
  --font-display: "Geometric415LiteLocal", "Geometric415Lite", "Geometric 415 Lite", Arial, sans-serif;
  --hero-grid: rgba(41,46,38, .095);
}

html, body, button, input, textarea, select { font-family: var(--font-neue); }
body { font-synthesis: none; }
.display-xxl,
.display-xl,
.display-lg,
.display-md,
.h2,
.h3,
.h4,
.lede,
.home-hero-v2__headline,
.case-hero-v2__headline {
  font-family: var(--font-display);
  font-weight: 400;
}

.page-wipe__mark {
  display: inline-flex;
  align-items: baseline;
  gap: .08em;
  font-size: clamp(34px, 4vw, 64px);
  letter-spacing: -.055em;
}
.page-wipe__cursor { color: var(--paper); animation: blink 1s steps(1) infinite; }

/* Personal signature header ------------------------------------------------ */
.site-header--untold {
  height: 80px;
  padding-inline: clamp(24px, 5vw, 78px);
  grid-template-columns: 1fr auto 1fr;
}
.site-header--untold::before { background: color-mix(in srgb, var(--paper) 90%, transparent); }
.header-logo--cursor {
  gap: 4px;
  font-size: clamp(20px, 1.55vw, 25px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.045em;
  text-transform: lowercase;
  font-family: var(--font-display);
}
.header-logo__cursor {
  display: inline-block;
  color: var(--orange);
  font-weight: 300;
  animation: blink 1s steps(1) infinite;
  transform: translateY(-.02em);
}
.header-nav--codes {
  justify-self: center;
  gap: clamp(70px, 11vw, 190px);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
}
.header-nav--codes a::after { display: none; }
.header-nav--codes a { opacity: .76; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.header-nav--codes a:hover { opacity: 1; transform: translateY(-2px); }
.site-header--untold .header-actions { gap: 18px; }
.site-header--untold .header-role {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.header-lang {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: none;
}




.menu-open .site-header--untold { color: var(--paper) !important; }
.menu-open .site-header--untold::before { transform: translateY(-105%) !important; }
.menu-open .site-header--untold .header-nav,
.menu-open .site-header--untold .header-lang { opacity: 0; pointer-events: none; }
.menu-open .site-header--untold .header-logo__cursor { color: var(--paper); }





/* Full-screen index menu --------------------------------------------------- */
























/* Shared paper grid -------------------------------------------------------- */
.editorial-grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent clamp(78px, 9.3vh, 96px),
    var(--hero-grid) clamp(78px, 9.3vh, 96px),
    var(--hero-grid) calc(clamp(78px, 9.3vh, 96px) + 1px)
  );
  mask-image: linear-gradient(to bottom, transparent 4%, #000 18%, #000 88%, transparent 100%);
}

/* Landing hero ------------------------------------------------------------ */
.home-hero-v2 {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  padding: 82px clamp(24px, 5vw, 78px) 28px;
}
.home-hero-v2__stage {
  position: relative;
  width: min(100%, 1600px);
  height: calc(100svh - 110px);
  min-height: 720px;
  margin-inline: auto;
}
.home-hero-v2__headline {
  position: relative;
  z-index: 2;
  padding-top: clamp(48px, 5vh, 72px);
  font-size: clamp(78px, 10.2vw, 174px);
  line-height: .80;
  letter-spacing: -.068em;
}
.home-hero-v2__line {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: visible;
}
.home-hero-v2__line--one { justify-content: center; gap: clamp(15px, 1.5vw, 26px); padding-right: 7vw; }
.home-hero-v2__line--two { justify-content: center; margin-top: -.02em; padding-left: 11vw; }
.home-hero-v2__line--three {
  justify-content: flex-start;
  gap: clamp(8px, .75vw, 16px);
  margin-top: -.035em;
  padding-left: clamp(42px, 8vw, 124px);
  padding-right: min(27vw, 430px);
  font-size: .68em;
}
.hero-word, .hero-paren {
  display: inline-block;
  opacity: 0;
  transform: translateY(108%);
  transition: opacity .35s linear, transform 1s var(--ease);
}
body.hero-loaded .hero-word, body.hero-loaded .hero-paren { opacity: 1; transform: translateY(0); }
body.hero-loaded .hero-word--1 { transition-delay: .08s; }
body.hero-loaded .hero-word--2 { transition-delay: .18s; }
body.hero-loaded .hero-word--3 { transition-delay: .27s; }
body.hero-loaded .hero-word--4 { transition-delay: .37s; }
body.hero-loaded .hero-word--5 { transition-delay: .48s; }
body.hero-loaded .hero-paren { transition-delay: .34s; }
.hero-paren { font-weight: 200; }
.hero-inline-portrait {
  position: relative;
  width: clamp(178px, 18.5vw, 302px);
  aspect-ratio: 1.78;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 18px 36px rgba(41,46,38,.12);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--ease) .13s, transform .5s var(--ease);
}
body.hero-loaded .hero-inline-portrait { clip-path: inset(0 0 0 0); }
.hero-inline-portrait:hover { transform: rotate(-1.5deg) scale(.985); }
.hero-inline-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; filter: saturate(.72) contrast(1.04); }
.hero-inline-portrait__asterisk {
  position: absolute;
  z-index: 2;
  left: 15%;
  top: 4%;
  color: var(--orange);
  font-size: clamp(72px, 8vw, 120px);
  line-height: 1;
  font-weight: 300;
  transform: rotate(7deg);
}
.home-hero-v2__doodle {
  position: absolute;
  z-index: 3;
  top: clamp(28px, 3.4vh, 48px);
  right: clamp(9%, 12vw, 15%);
  width: clamp(70px, 7.4vw, 116px);
  aspect-ratio: .72;
  opacity: 0;
  transform: translateY(35px) rotate(3deg);
  transition: opacity .6s var(--ease) .35s, transform .8s var(--ease) .35s;
}
body.hero-loaded .home-hero-v2__doodle { opacity: 1; transform: translateY(0) rotate(3deg); }
.home-hero-v2__doodle span {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--orange);
  border-radius: 3px;
}
.home-hero-v2__doodle img { width: 140%; max-width: none; margin: -17% 0 0 -18%; }
.hero-project-stack {
  position: relative;
  width: clamp(162px, 15vw, 244px);
  aspect-ratio: 1.24;
  flex: 0 0 auto;
  margin-right: clamp(8px, 1.5vw, 24px);
  transform: translateY(.06em);
}
.hero-project-stack__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  aspect-ratio: 1.35;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 18px 32px rgba(41,46,38,.15);
  transition: transform .55s var(--ease);
}
.hero-project-stack__card img { width: 100%; height: 100%; object-fit: cover; }
.hero-project-stack__card--back { transform: translate(-68%, -54%) rotate(-8deg); }
.hero-project-stack__card--accent { background: var(--orange); transform: translate(-42%, -47%) rotate(6deg); }
.hero-project-stack__card--front { transform: translate(-50%, -50%) rotate(0deg); }
.hero-project-stack__card--front img { object-position: center top; }
.hero-project-stack:hover .hero-project-stack__card--back { transform: translate(-76%, -61%) rotate(-13deg); }
.hero-project-stack:hover .hero-project-stack__card--accent { transform: translate(-36%, -45%) rotate(10deg); }
.hero-project-stack:hover .hero-project-stack__card--front { transform: translate(-50%, -48%) rotate(-2deg); }
.home-hero-v2__kpis {
  position: absolute;
  z-index: 4;
  right: 1%;
  top: 54%;
  width: min(23vw, 360px);
  padding-left: 20px;
  border-left: 1px solid currentColor;
}
.home-hero-v2__intro { font-size: clamp(12px, 1vw, 15px); line-height: 1.55; max-width: 33em; }
.home-hero-v2__kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  margin-top: 18px;
}
.home-hero-v2__kpi-grid article { border-top: 1px solid rgba(41,46,38,.28); padding-top: 9px; }
.home-hero-v2__kpi-grid strong { display: block; font-size: clamp(15px, 1.2vw, 20px); line-height: 1.12; font-weight: 500; letter-spacing: -.035em; }
.home-hero-v2__kpi-grid span { display: block; margin-top: 5px; font-size: 10px; line-height: 1.35; text-transform: none; letter-spacing: .06em; opacity: .64; }
.home-hero-v2__cta {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: clamp(34px, 5.8vh, 64px);
  transform: translateX(-50%);
}
.home-hero-v2__cta:hover { transform: translateX(-50%) translateY(-2px); }
.home-hero-v2__scroll,
.case-hero-v2__scroll {
  position: absolute;
  z-index: 5;
  right: 1%;
  bottom: clamp(28px, 4.8vh, 58px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: none;
}
.home-hero-v2__scroll > span:first-child,
.case-hero-v2__scroll > span:first-child { writing-mode: vertical-rl; transform: rotate(180deg); }
.home-hero-v2__scroll-circle,
.case-hero-v2__scroll > span:last-child {
  width: 28px;
  height: 28px;
  border: 1px solid var(--orange);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--orange);
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.home-hero-v2__scroll:hover .home-hero-v2__scroll-circle,
.case-hero-v2__scroll:hover > span:last-child { transform: translateY(5px); background: var(--orange); color: var(--paper); }

/* Paper-led case study covers --------------------------------------------- */
.case-hero-v2 {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  padding: 82px clamp(24px, 5vw, 78px) 28px;
}
.case-hero-v2__stage {
  position: relative;
  width: min(100%, 1600px);
  height: calc(100svh - 110px);
  min-height: 700px;
  margin-inline: auto;
}
.case-hero-v2__stage > .eyebrow { position: absolute; top: 6.5%; left: 0; z-index: 4; }
.case-hero-v2__headline {
  position: relative;
  z-index: 2;
  padding-top: clamp(95px, 14vh, 145px);
  font-size: clamp(78px, 10.4vw, 176px);
  line-height: .79;
  letter-spacing: -.07em;
}
.case-hero-v2__line { display: flex; align-items: center; white-space: nowrap; gap: clamp(18px, 2vw, 34px); }
.case-hero-v2__line--one { justify-content: flex-start; padding-left: clamp(30px, 6vw, 96px); }
.case-hero-v2__line--two { justify-content: center; margin-top: .015em; }
.case-hero-v2__media {
  display: inline-block;
  width: clamp(230px, 29vw, 465px);
  aspect-ratio: 1.72;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 20px 45px rgba(41,46,38,.14);
  --reveal-bg: var(--paper);
}
.case-hero-v2__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.case-hero-v2--domain .case-hero-v2__media img { object-position: center 18%; }
.case-hero-v2__doodle {
  position: absolute;
  z-index: 4;
  top: 7%;
  right: clamp(5%, 10vw, 14%);
  width: clamp(78px, 8.5vw, 132px);
  aspect-ratio: .76;
}
.case-hero-v2__doodle span { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 3px; background: var(--orange); }
.case-hero-v2__doodle img { width: 142%; max-width: none; margin: -18% 0 0 -19%; }
.case-hero-v2--domain .case-hero-v2__doodle img { width: 127%; margin: -10% 0 0 -12%; }
.case-hero-v2__meta {
  position: absolute;
  z-index: 4;
  right: 8.5%;
  bottom: clamp(54px, 8vh, 86px);
  width: min(31vw, 485px);
  padding-left: 22px;
  border-left: 1px solid var(--ink);
}
.case-hero-v2__subtitle { font-size: clamp(16px, 1.45vw, 23px); line-height: 1.43; letter-spacing: -.025em; }
.case-hero-v2__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.case-hero-v2__facts dt { font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: none; opacity: .48; }
.case-hero-v2__facts dd { margin: 5px 0 0; font-size: clamp(12px, .95vw, 15px); line-height: 1.3; }
.case-hero-v2__scroll { right: 1%; }

/* Keep the section navigator out of the hero composition. */
.case-index--fixed {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(14px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
body.case-index-visible .case-index--fixed {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1180px) {
  .header-nav--codes { gap: 68px; }
  .header-lang { display: none; }
  .home-hero-v2__headline { font-size: clamp(72px, 10.4vw, 124px); }
  .home-hero-v2__line--three { padding-left: 2vw; padding-right: 29vw; }
  .home-hero-v2__kpis { width: min(29vw, 340px); top: 56%; }
  .case-hero-v2__headline { font-size: clamp(74px, 10vw, 122px); }
  .case-hero-v2__meta { right: 7%; width: 36vw; }
}

@media (max-width: 820px) {
  .site-header--untold { height: 68px; padding-inline: 18px; grid-template-columns: 1fr auto; }
  .header-nav--codes { display: none; }
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  .home-hero-v2,
  .case-hero-v2 { min-height: 100svh; padding: 70px 18px 34px; }
  .home-hero-v2__stage,
  .case-hero-v2__stage { height: auto; min-height: calc(100svh - 104px); }
  .home-hero-v2__headline { padding-top: 54px; font-size: clamp(59px, 18.2vw, 108px); line-height: .82; }
  .home-hero-v2__line--one { justify-content: flex-start; padding: 0; gap: 10px; }
  .home-hero-v2__line--two { justify-content: flex-start; padding: 0; margin-top: .08em; }
  .home-hero-v2__line--three { padding: 0; margin-top: .1em; flex-wrap: wrap; font-size: .70em; gap: 4px; }
  .hero-inline-portrait { width: 28vw; min-width: 112px; }
  .hero-inline-portrait__asterisk { font-size: 55px; }
  .hero-project-stack { width: 34vw; min-width: 132px; margin-right: 4px; }
  .home-hero-v2__doodle { top: 16px; right: 4%; width: 58px; }
  .home-hero-v2__kpis {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin-top: 42px;
    padding: 18px 0 0;
    border-left: 0;
    border-top: 1px solid var(--ink);
  }
  .home-hero-v2__kpi-grid { grid-template-columns: 1fr 1fr; }
  .home-hero-v2__cta { position: relative; left: auto; bottom: auto; transform: none; margin-top: 28px; }
  .home-hero-v2__cta:hover { transform: translateY(-2px); }
  .home-hero-v2__scroll { display: none; }

  .case-hero-v2__stage > .eyebrow { top: 24px; }
  .case-hero-v2__headline { padding-top: 94px; font-size: clamp(58px, 17.2vw, 100px); line-height: .82; }
  .case-hero-v2__line--one { padding-left: 0; }
  .case-hero-v2__line--two { justify-content: flex-start; flex-wrap: wrap; margin-top: .1em; gap: 12px; }
  .case-hero-v2__media { width: 47vw; min-width: 182px; }
  .case-hero-v2__doodle { top: 22px; right: 2%; width: 64px; }
  .case-hero-v2__meta {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 42px;
    padding: 18px 0 0;
    border-left: 0;
    border-top: 1px solid var(--ink);
  }
  .case-hero-v2__facts { grid-template-columns: 1fr 1fr; }
  .case-hero-v2__scroll { display: none; }
}

@media (max-width: 480px) {
  .home-hero-v2__headline { font-size: clamp(51px, 17.7vw, 78px); }
  .home-hero-v2__line--three { font-size: .67em; }
  .home-hero-v2__kpi-grid { grid-template-columns: 1fr; }
  .case-hero-v2__headline { font-size: clamp(48px, 14.5vw, 66px); }
  .case-hero-v2__facts { grid-template-columns: 1fr; }
  
}

@media (prefers-reduced-motion: reduce) {
  .hero-word,
.hero-paren,
.hero-inline-portrait,
.home-hero-v2__doodle { opacity: 1; transform: none; clip-path: none; stroke-dashoffset: 0; }
}

/* Final desktop spacing pass after visual QA. */
@media (min-width: 821px) {
  .home-hero-v2__line--three {
    font-size: .68em;
    padding-left: clamp(36px, 6vw, 96px);
    padding-right: min(30vw, 470px);
  }
  .home-hero-v2__kpis {
    right: 5%;
    top: 64%;
    width: min(23vw, 360px);
  }
  
}
.hero-word--5 { color: var(--orange); }
@media (min-width: 821px) {
  .home-hero-v2__line--three { font-size: .63em; }
}

/* ========================================================================== 
   Viewport composition pass; v3
   Goal: every natural resting point in the scroll should read as a designed
   frame, while retaining normal document scrolling and accessibility.
   ========================================================================== */

@media (min-width: 821px) {
  html {
    scroll-snap-type: y proximity;
    scroll-padding-top: var(--header-h);
  }

  /* Key page sections become soft snap/rest points, not hard scroll traps. */
  .page-home main > section,
  .page-case main > section,
  .triad__word {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }

  /* Establish a consistent viewport frame for non-sticky sections. */
  .page-home .section,
  .page-case .section:not(.before-after) {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-block: calc(var(--header-h) + clamp(38px, 6vh, 72px)) clamp(42px, 6vh, 72px);
  }
  .page-home .section > .shell,
  .page-case .section:not(.before-after) > .shell {
    width: 100%;
  }

  /* Homepage / intro: top label, central statement, bottom action form a frame. */
  .page-home #intro {
    overflow: hidden;
  }
  .page-home #intro .site-grid {
    min-height: calc(100svh - var(--header-h) - clamp(110px, 15vh, 170px));
    grid-template-rows: auto 1fr auto;
    align-items: start;
  }
  .page-home #intro .home-intro__kicker { grid-row: 1; align-self: start; }
  .page-home #intro .home-intro__statement { grid-row: 2; align-self: center; max-width: 18ch; }
  .page-home #intro .home-intro__cta { grid-row: 3; align-self: end; margin-top: 0; }

  /* Product / Process / People becomes three self-contained viewport posters. */
  .page-home .triad {
    padding-block: 0;
    overflow: clip;
  }
  .page-home .triad > .shell {
    position: relative;
    width: 100%;
    max-width: none;
    padding-inline: var(--gutter);
  }
  .page-home .triad > .shell > .eyebrow {
    position: absolute;
    z-index: 5;
    top: calc(var(--header-h) + 26px);
    left: var(--gutter);
  }
  .page-home .triad__word {
    min-height: 100svh;
    padding: calc(var(--header-h) + 58px) 0 44px;
    display: flex;
    align-items: center;
    border-top-color: rgba(41,46,38,.16);
  }
  .page-home .triad__title {
    font-size: clamp(112px, 19vw, 300px);
    line-height: .82;
    letter-spacing: -.045em;
    transform: translateY(-.02em);
  }
  .page-home .triad__media {
    width: clamp(250px, 27vw, 430px);
    right: 5%;
    top: 48%;
  }
  .page-home .triad__copy {
    left: 48%;
    bottom: 12%;
    width: min(340px, 29vw);
  }

  /* Selected work remains scroll-led, but the sticky frame is more composed. */
  .page-home .work-scroller { height: 300svh; }
  .page-home .work-sticky {
    padding-top: calc(var(--header-h) + 26px);
    display: grid;
    grid-template-rows: auto 1fr;
    align-content: stretch;
  }
  .page-home .work-heading {
    min-height: 18vh;
    align-items: end;
  }
  .page-home .work-track {
    align-self: center;
    padding-top: 26px;
    padding-bottom: 38px;
  }
  .page-home .project-card { width: min(67vw, 820px); }
  .page-home .project-card__media { height: min(52vh, 560px); }

  /* The manifesto is a single strong held composition rather than a long tunnel. */
  .page-home .manifesto { height: 260svh; }
  .page-home .manifesto__copy {
    max-width: 1050px;
    font-size: clamp(58px, 7.2vw, 112px);
    line-height: .98;
  }

  .page-home .home-contact {
    min-height: 100svh;
    align-items: flex-end;
    padding-bottom: clamp(54px, 8vh, 94px);
  }

  /* Case-study regular sections: use the viewport as an intentional canvas. */
  .page-case .section:not(.before-after) {
    overflow: clip;
  }
  .page-case .section:not(.before-after) > .shell {
    position: relative;
  }
  .page-case .case-intro {
    min-height: calc(100svh - var(--header-h) - clamp(105px, 15vh, 170px));
    grid-template-rows: auto 1fr auto;
    align-items: start;
  }
  .page-case .case-intro__label { grid-row: 1; }
  .page-case .case-intro__lead { grid-row: 2; align-self: center; max-width: 19ch; }
  .page-case .case-intro__roles,
  .page-case .case-intro__collab { grid-row: 3; align-self: end; margin-top: 0; }

  /* Common split layouts get a stable 40/60 editorial balance. */
  .page-case .split,
  .page-case .split-layout,
  .page-case .media-copy,
  .page-case .two-column {
    align-items: center;
  }

  /* Keep sticky narratives visually locked to a single frame. */
  .page-case .city-story__sticky,
  .page-case .before-after__sticky,
  .page-case .screen-flow__sticky,
  .page-case .current-ux__sticky {
    padding-top: calc(var(--header-h) + 36px);
    padding-bottom: 36px;
  }
  .page-case .city-story__copy,
  .page-case .screen-flow__copy,
  .page-case .current-ux__copy {
    align-self: center;
    max-width: 34rem;
  }
  .page-case .city-story__visual,
  .page-case .screen-flow__frame,
  .page-case .current-ux__screens {
    align-self: center;
  }

  /* Match long-story duration to the number of designed frames more closely. */
  .page-case .city-story { height: 400svh; }
  .page-case .before-after { height: 220svh; }
  .page-case .current-ux { height: 300svh; }
  .page-case .screen-flow--domain { height: 300svh !important; }

  /* Impact grids sit within one clear viewport composition where possible. */
  .page-case .impact-grid { margin-top: clamp(34px, 5vh, 58px); }
  .page-case .impact-card { min-height: min(29vh, 270px); }

  /* Keep viewport typography compact for the Geometric415Lite display face. */
  .home-hero-v2__headline,
  .case-hero-v2__headline {
    line-height: .86;
    letter-spacing: -.035em;
  }
  .home-hero-v2__line--three { margin-top: -.015em; }
  
}

/* Mobile keeps normal scrolling but every section still arrives as a clear block. */
@media (max-width: 820px) {
  html { scroll-snap-type: none; }
  .page-home .section,
  .page-case .section:not(.before-after) {
    min-height: auto;
  }
  .page-home .triad { padding-block: 72px; }
  .page-home .triad__word {
    min-height: 78svh;
    display: flex;
    align-items: center;
    padding-block: 54px;
  }
  .page-home .triad__copy { bottom: 8%; }
  .page-home .work-scroller,
  .page-home .manifesto,
  .page-case .city-story,
  .page-case .before-after,
  .page-case .current-ux,
  .page-case .screen-flow,
  .page-case .screen-flow--domain { height: auto !important; }
}

@media (min-width: 821px) {
  /* Sections that already own their own 100vh inner stage should not double-stack height. */
  .page-case #insight { padding: 0; }
  .page-case #insight .insight-stage { width: 100%; min-height: 100svh; }

  /* Finish the site on a full, intentional frame as well. */
  .page-home .site-footer,
  .page-case .site-footer {
    min-height: 100svh;
    scroll-snap-align: start;
  }

  /* Dense metric layouts are tightened so the whole grid can read as one poster. */
  .page-case #impact .impact-card { min-height: clamp(205px, 24vh, 250px); padding: 20px; }
  .page-case #impact .impact-card__number { font-size: clamp(54px, 6.6vw, 108px); }
}


/* ========================================================================== 
   Typography system; exact families used by the Untold reference
   Reference display: Geometric415Lite
   Reference body/UI: HelveticaNeue
   Font binaries are not copied from the reference file. These declarations
   use locally installed/licensed faces and metric-matched Arial fallbacks.
   ========================================================================== */
@font-face {
  font-family: "UntoldGeometric";
  src: local("Geometric415Lite"), local("Geometric 415 Lite"), local("Geometric 415 Std Lite"), local("Geometric-415-Lite");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Geometric415Lite Fallback";
  src: local("Arial");
  ascent-override: 100.68%;
  descent-override: 24.67%;
  line-gap-override: 0%;
  size-adjust: 95.65%;
}
@font-face {
  font-family: "UntoldHelveticaNeue";
  src: local("Helvetica Neue Light"), local("HelveticaNeue-Light"), local("HelveticaNeue");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "UntoldHelveticaNeue";
  src: local("Helvetica Neue"), local("HelveticaNeue"), local("Helvetica Neue Regular"), local("HelveticaNeue-Regular");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "UntoldHelveticaNeue";
  src: local("Helvetica Neue Medium"), local("HelveticaNeue-Medium"), local("Helvetica Neue"), local("HelveticaNeue");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "UntoldHelveticaNeue";
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Helvetica Neue"), local("HelveticaNeue");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeue Fallback";
  src: local("Arial");
  ascent-override: 93.91%;
  descent-override: 21.01%;
  line-gap-override: 2.76%;
  size-adjust: 101.37%;
}

:root {
  --font-body: "UntoldHelveticaNeue", "HelveticaNeue Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "UntoldGeometric", "Geometric415Lite Fallback", "Avenir Next", "Century Gothic", Arial, sans-serif;
  --font-neue: var(--font-body);
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--font-body);
  font-synthesis: none;
}

/* Geometric415Lite is the reference site's large/display face. */
h1,
h2,
h3,
h4,
.display-xxl,
.display-xl,
.display-lg,
.display-md,
.h2,
.h3,
.h4,
.lede,
.home-hero__name,
.home-hero-v2__headline,
.triad__title,
.project-card__title,
.project-card--note .project-card__media p,
.manifesto__copy,
.case-hero__title,
.case-hero-v2__headline,
.problem-stat__number,
.problem-stat__number small,
.research-number strong,
.insight-card h3,
.journey-card h3,
.principle strong,
.principle h3,
.abc-card h3,
.score-card strong,
.flow-step h3,
.impact-card__number,
.learning-card h3,
.story-card p,
.proposal-node,
.feedback-item h3,
.site-footer__title,
.metric-ribbon__item,
.cognitive__note {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
}

/* Tracking and line-height are retuned for the compact geometric proportions
   used by the source site rather than the previous serif typography. */
.display-xxl { line-height: .80; letter-spacing: -.055em; }
.display-xl  { line-height: .84; letter-spacing: -.052em; }
.display-lg  { line-height: .89; letter-spacing: -.048em; }
.display-md  { line-height: .95; letter-spacing: -.042em; }
.h2          { line-height: .98; letter-spacing: -.050em; }
.h3          { line-height: .98; letter-spacing: -.040em; }
.h4          { line-height: 1.00; letter-spacing: -.035em; }
.lede        { line-height: 1.14; letter-spacing: -.030em; }

.home-hero-v2__headline,
.case-hero-v2__headline {
  line-height: .84;
  letter-spacing: -.055em;
  font-weight: 400;
}

.triad__title,
.home-hero__name,
.case-hero__title,
.site-footer__title {
  letter-spacing: -.050em;
}

.project-card__title,
.manifesto__copy,
.project-card--note .project-card__media p {
  letter-spacing: -.040em;
}

.problem-stat__number,
.research-number strong,
.principle strong,
.score-card strong,
.impact-card__number,
.metric-ribbon__item {
  letter-spacing: -.035em;
}

/* Reference body/UI face. */
.copy,
.copy-sm,
.case-hero-v2__subtitle,
.case-hero__subtitle,
.page-wipe__mark,
.header-logo--cursor {
  font-family: var(--font-body);
}
.copy,
.copy-sm,
.case-hero-v2__subtitle,
.case-hero__subtitle { letter-spacing: 0; }

/* The reference menu is HelveticaNeue, not the display face. */


.header-logo--cursor {
  font-weight: 400;
  letter-spacing: -.045em;
}

@media (max-width: 820px) {
  .home-hero-v2__headline,
  .case-hero-v2__headline {
    line-height: .87;
    letter-spacing: -.048em;
  }
  
}

@media (prefers-reduced-motion: reduce) {
  .page-wipe__cursor { animation: none; opacity: 1; }
}


/* ========================================================================== 
   Reference menu + continuous scribble interaction pass
   ========================================================================== */

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

/* Continuous-line signature preloader. The SVG contains one uninterrupted
   handwriting path, so the name is drawn rather than typed letter-by-letter. */
.page-wipe {
  display: none;
  place-items: center;
  background: var(--orange);
  transition: transform .82s var(--ease);
}
html.js .page-wipe { display: grid; }
.page-wipe__signature-wrap {
  width: min(72vw, 620px);
  opacity: 1;
  transform: translateY(0);
  transition: opacity .2s linear, transform .35s var(--ease);
}
.page-wipe__signature {
  width: 100%;
  height: auto;
  overflow: visible;
}
.page-wipe__signature-line,
.page-wipe__signature-shadow {
  fill: none;
  stroke: var(--paper);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.page-wipe__signature-line {
  stroke-width: 5.2;
}
.page-wipe__signature-shadow {
  stroke-width: 7.2;
  opacity: .16;
  transform: translate(.7px, .8px);
}
.page-wipe.is-writing .page-wipe__signature-shadow {
  animation: shivaScribble 1.38s cubic-bezier(.62,.02,.2,1) .04s forwards;
}
.page-wipe.is-writing .page-wipe__signature-line {
  animation: shivaScribble 1.42s cubic-bezier(.62,.02,.2,1) forwards;
}
.page-wipe.is-written .page-wipe__signature-line,
.page-wipe.is-written .page-wipe__signature-shadow {
  stroke-dashoffset: 0;
}
html.is-ready .page-wipe {
  transform: translateY(-103%);
  pointer-events: none;
}
html.is-ready .page-wipe__signature-wrap {
  transform: translateY(-10px);
}
html.is-leaving .page-wipe {
  transform: translateY(0);
  transition-duration: .48s;
  pointer-events: auto;
}
html.is-leaving .page-wipe__signature-wrap { opacity: 0; }
@keyframes shivaScribble { to { stroke-dashoffset: 0; } }

/* Header behaves like the reference navigation: the brand is utility type,
   while Geometric415Lite remains reserved for the page's editorial headlines. */
.header-logo--cursor {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -.045em;
}

/* Reference-like menu composition: content is deliberately held in the
   middle of the viewport instead of being pinned to the far left/right. */






/* Scribbled cursor inspired by the small hand-drawn orbit in the reference. */
.cursor-scribble {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition: opacity .15s linear, width .22s var(--ease), height .22s var(--ease), margin .22s var(--ease);
}
.cursor-scribble svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: transform .25s var(--ease);
  animation: cursorScribbleWobble 3.4s ease-in-out infinite alternate;
}
.cursor-scribble__loop {
  fill: none;
  stroke: rgba(41,46,38,.42);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cursor-scribble__loop--b { opacity: .62; }
.cursor-scribble__dot { fill: var(--orange); }
.cursor-scribble.is-link {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
}
.cursor-scribble.is-link svg { transform: rotate(-8deg) scale(1.04); }
.cursor-scribble.is-down svg { transform: rotate(7deg) scale(.88); }
.menu-open .cursor-scribble__loop { stroke: rgba(243,240,231,.66); }
.menu-open .cursor-scribble__dot { fill: var(--paper); }
@keyframes cursorScribbleWobble {
  from { rotate: -1.2deg; }
  to { rotate: 1.6deg; }
}

@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor *,
  html.has-custom-cursor *::before,
  html.has-custom-cursor *::after { cursor: none !important; }

  /* Pointer capability, not viewport width, controls the custom cursor. */
  html.has-custom-cursor .cursor-scribble { display: block !important; }
}



@media (max-width: 820px) {
  .page-wipe__signature-wrap { width: min(84vw, 480px); }
  .page-wipe__signature-line { stroke-width: 6; }
  .page-wipe__signature-shadow { stroke-width: 8; }
  
  
  .cursor-scribble { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page-wipe__signature-line,
  .page-wipe__signature-shadow { stroke-dashoffset: 0; animation: none !important; }
  .cursor-scribble svg { animation: none; }
}

/* ========================================================================== 
   V3; exact display family target + cleaner navigation + stacked case cards
   ========================================================================== */

/* Geometric 415 Lite: use Bitstream's PostScript name first. This mirrors
   the reference's --font-geometric family without redistributing font files. */
@font-face {
  font-family: "Geometric415Lite";
  src: local("Geometric415BT-LiteA"), local("Geometric 415 Lite"), local("Geometric415Lite");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
:root {
  --font-geometric: "Geometric415Lite", "Geometric415Lite Fallback";
  --font-helvetica-neue: "UntoldHelveticaNeue", "HelveticaNeue Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: var(--font-geometric);
  --font-body: var(--font-helvetica-neue);
}

/* Match Untold's display weight: large text is the Lite cut, not faux regular. */
.font-geo,
h1, h2, h3,
.display-xxl, .display-xl, .display-lg, .display-md,
.h2, .h3, .h4, .lede,
.home-hero-v2__headline,
.project-card__title,
.project-card--note .project-card__media p,
.manifesto__copy,
.case-hero-v2__headline,
.problem-stat__number,
.research-number strong,
.principle strong,
.score-card strong,
.impact-card__number,
.metric-ribbon__item,
.site-footer__title {
  font-family: var(--font-geometric);
  font-weight: 300;
  font-synthesis: none;
}

/* Header is now intentionally sparse: signature + context + menu. */
.site-header--untold {
  grid-template-columns: 1fr auto;
  gap: 24px;
}
.site-header--untold .header-actions {
  grid-column: 2;
  justify-self: end;
}
.header-logo--signature {
  width: 88px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-self: start;
  color: currentColor;
}
.header-signature {
  width: 88px;
  height: auto;
  overflow: visible;
}
.header-signature path {
  fill: none;
  stroke: currentColor;
  stroke-width: 5.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .3s var(--ease), transform .3s var(--ease);
}
.header-logo--signature:hover .header-signature path { transform: translateY(-1px); }
.menu-open .header-logo--signature { color: var(--paper); }
.header-nav--codes, .header-lang { display: none !important; }

/* Home chrome stays out of the opening poster. It appears when the system
   statement reaches the upper part of the viewport. */
.page-home .site-header,
.page-home .section-progress {
  opacity: 0;
  transform: translateY(-118%);
  pointer-events: none;
}
.page-home.home-chrome-visible .site-header,
.page-home.home-chrome-visible .section-progress {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.page-home .site-header { transition: color .35s var(--ease), transform .55s var(--ease), opacity .32s linear; }
.page-home .section-progress { transition: transform .55s var(--ease) .04s, opacity .28s linear .04s; }
.menu-open.page-home .site-header { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Segmented YouTube-like page progress rail. Every segment is a fast anchor. */
.section-progress {
  position: fixed;
  z-index: 790;
  left: 0;
  right: 0;
  top: var(--header-h);
  height: 13px;
  display: flex;
  gap: 3px;
  align-items: start;
  padding: 3px var(--gutter) 6px;
  color: var(--ink);
}
.section-progress::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2px 0 0;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(10px);
  opacity: .88;
}
.section-progress[data-theme="dark"] { color: var(--paper); }
.section-progress[data-theme="dark"]::before { background: color-mix(in srgb, var(--ink) 82%, transparent); }
.section-progress[data-theme="orange"] { color: var(--ink); }
.section-progress[data-theme="orange"]::before { background: color-mix(in srgb, var(--orange) 84%, transparent); }
.section-progress__segment {
  position: relative;
  flex: 1 1 0;
  height: 4px;
  overflow: visible;
  background: color-mix(in srgb, currentColor 18%, transparent);
  cursor: pointer;
}
.section-progress__fill {
  position: absolute;
  inset: 0;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
.section-progress[data-theme="orange"] .section-progress__fill { background: var(--ink); }
.section-progress__segment::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translate(-50%, 5px);
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s linear, transform .18s var(--ease);
}
.section-progress__segment:hover::after,
.section-progress__segment:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.section-progress__segment.is-active { height: 5px; }

/* The hero supporting sentence needs enough authority to balance the display. */
.home-hero-v2__intro {
  font-size: clamp(18px, 1.35vw, 23px);
  line-height: 1.38;
  max-width: 27em;
  letter-spacing: -.018em;
}
.home-hero-v2__kpis { width: min(27vw, 430px); }
.home-hero-v2__kpi-grid { margin-top: 22px; }
.home-hero-v2__kpi-grid strong { font-size: clamp(17px, 1.3vw, 22px); }
.home-hero-v2__kpi-grid span { font-size: 10px; }

/* Product / Process / People was removed from the home DOM. */
.page-home .triad { display: none !important; }

/* Selected work becomes a true sticky card stack. The work remains readable
   as individual compositions, while later case cards physically layer above. */
.page-home .work-scroller--stack {
  height: auto !important;
  min-height: 250svh;
  background: var(--lavender);
  padding: calc(var(--header-h) + 62px) 0 clamp(120px, 16vh, 190px);
  overflow: visible;
}
.page-home .work-scroller--stack .work-sticky {
  position: relative;
  top: auto;
  height: auto;
  overflow: visible;
  padding-top: 0;
  display: block;
}
.page-home .work-scroller--stack .work-heading {
  min-height: 0;
  padding-bottom: clamp(42px, 7vh, 72px);
  align-items: end;
}
.page-home .work-scroller--stack .work-heading .h2 { max-width: 10ch; }
.page-home .work-scroller--stack .work-track {
  display: block;
  width: auto;
  padding: 0 var(--gutter);
  transform: none !important;
  will-change: auto;
}
.page-home .work-scroller--stack .project-card {
  --stack-top: calc(var(--header-h) + 44px);
  width: min(82vw, 1160px);
  margin: 0 auto 36vh;
  padding: 12px 12px 18px;
  position: sticky;
  top: var(--stack-top);
  border: 1px solid rgba(41,46,38,.12);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 24px 70px rgba(41,46,38,.16);
  transform-origin: center top;
}
.page-home .work-scroller--stack .project-card:nth-child(1) { z-index: 1; transform: rotate(-.7deg); }
.page-home .work-scroller--stack .project-card:nth-child(2) { z-index: 2; --stack-top: calc(var(--header-h) + 58px); transform: rotate(.55deg); }
.page-home .work-scroller--stack .project-card:nth-child(2)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -9px 12px auto;
  height: 10px;
  border-radius: 8px 8px 0 0;
  background: color-mix(in srgb, var(--paper) 82%, var(--orange) 18%);
  border: 1px solid rgba(41,46,38,.1);
  border-bottom: 0;
}
.page-home .work-scroller--stack .project-card__media { height: min(63vh, 690px); }
.page-home .work-scroller--stack .project-card__info { padding: 20px 8px 2px; }
.page-home .work-scroller--stack .project-card--note {
  position: relative;
  top: auto;
  z-index: 3;
  width: min(64vw, 760px);
  margin: -14vh auto 0;
  transform: rotate(-.35deg);
}
.page-home .work-scroller--stack .project-card--note .project-card__media { height: min(48vh, 480px); }

/* New signature remains a continuous line, but with clearer letterforms. */
.page-wipe__signature { view-transition-name: shiva-signature; }
.page-wipe__signature-wrap { width: min(68vw, 580px); }
.page-wipe__signature-line { stroke-width: 5.6; }
.page-wipe__signature-shadow { stroke-width: 7.5; opacity: .12; }

@media (max-width: 820px) {
  :root { --header-h: 68px; }
  .header-logo--signature, .header-signature { width: 74px; }
  .header-logo--signature { height: 30px; }
  .site-header--untold .header-role { display: none; }
  .section-progress { gap: 2px; height: 11px; padding-inline: 18px; }
  .section-progress__segment { height: 3px; }
  .section-progress__segment::after { display: none; }
  .home-hero-v2__intro { font-size: clamp(17px, 4.6vw, 20px); max-width: 22em; }
  .home-hero-v2__kpis { width: auto; }
  .page-home .work-scroller--stack { min-height: 0; padding: 92px 0 80px; }
  .page-home .work-scroller--stack .work-heading { padding-bottom: 32px; }
  .page-home .work-scroller--stack .work-track { display: grid; gap: 28px; }
  .page-home .work-scroller--stack .project-card,
  .page-home .work-scroller--stack .project-card:nth-child(1),
  .page-home .work-scroller--stack .project-card:nth-child(2),
  .page-home .work-scroller--stack .project-card--note {
    position: relative;
    top: auto;
    width: 100%;
    margin: 0;
    transform: none;
  }
  .page-home .work-scroller--stack .project-card__media { height: min(58vh, 520px); }
  .page-home .work-scroller--stack .project-card--note .project-card__media { height: auto; min-height: 330px; }
  .page-wipe__signature-wrap { width: min(86vw, 470px); }
}

/* ========================================================================== 
   V4 refinement; readable signature, deliberate menu paths, richer stack
   ========================================================================== */
@font-face {
  font-family: "Geometric415LiteLocal";
  src: local("Geometric415BT-LiteA"), local("Geometric 415 Lite"), local("Geometric415Lite"), local("Geometric 415 Std Lite"), local("Geometric-415-Lite");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
:root {
  --font-geometric: "Geometric415LiteLocal", "Geometric415BT-LiteA", "Geometric 415 Lite", "Geometric415Lite", Arial, sans-serif;
  --font-display: var(--font-geometric);
  --font-signature: "Noteworthy", "Bradley Hand", "Chalkboard SE", "Segoe Print", "Comic Neue", "Comic Sans MS", cursive;
}
.display-xxl, .display-xl, .display-lg, .display-md, .h2, .h3, .h4, .lede,
.home-hero-v2__headline, .case-hero-v2__headline {
  font-family: var(--font-display);
  font-weight: 300;
}

/* The loader uses readable handwriting, revealed continuously from left to
   right, with a restrained hand-drawn baseline rather than an abstract path. */
.page-wipe__signature-wrap { width: min(66vw, 620px); }
.page-wipe__signature { overflow: visible; }
.page-wipe__signature-text {
  font-family: var(--font-signature);
  font-size: 118px;
  font-weight: 400;
  letter-spacing: -.075em;
  fill: var(--paper);
}
.page-wipe__signature-text--shadow {
  opacity: .14;
  transform: translate(1px, 1.4px);
}
.page-wipe__signature-reveal { width: 0; }
.page-wipe.is-writing .page-wipe__signature-reveal {
  animation: signatureReveal 1.22s cubic-bezier(.55,.04,.21,1) forwards;
}
.page-wipe.is-written .page-wipe__signature-reveal { width: 552px; }
.page-wipe__signature-scribble {
  fill: none;
  stroke: var(--paper);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .88;
}
.page-wipe.is-writing .page-wipe__signature-scribble {
  animation: shivaScribble .48s var(--ease) .88s forwards;
}
.page-wipe.is-written .page-wipe__signature-scribble { stroke-dashoffset: 0; }
@keyframes signatureReveal { to { width: 552px; } }

/* Header wordmark uses exactly the same handwritten family as the loader. */
.header-logo--signature {
  width: auto !important;
  height: auto !important;
  overflow: visible;
  display: inline-flex;
  align-items: center;
}
.signature-wordmark {
  display: block;
  font-family: var(--font-signature);
  font-size: clamp(25px, 1.8vw, 31px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.075em;
  transform: rotate(-1.5deg) translateY(-1px);
}
.menu-open .signature-wordmark { color: var(--paper); }

/* Menu lines now behave as three intentional connective traces: each begins
   near a left row and resolves near the corresponding right row. */






/* Nothing from the page chrome should float above the full-screen menu. */
.menu-open .section-progress {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-120%) !important;
}
.menu-open .home-hero-v2__scroll,
.menu-open .case-hero-v2__scroll { opacity: 0 !important; visibility: hidden !important; }

/* Three expressive, information-rich cards that physically stack as the user
   scrolls. Core project identity is visible by default; KPIs arrive on hover. */
.page-home .work-scroller--stack { min-height: 330svh; }
.page-home .work-scroller--stack .work-track.work-stack-v2 {
  display: block;
  width: auto;
  padding: 0 var(--gutter) 10vh;
}
.case-stack-card {
  --card-rot: 0deg;
  --stack-top: calc(var(--header-h) + 48px);
  position: sticky;
  top: var(--stack-top);
  z-index: 1;
  display: block;
  width: min(84vw, 1180px);
  height: min(72vh, 760px);
  margin: 0 auto 38vh;
  overflow: hidden;
  border: 1px solid rgba(41,46,38,.18);
  border-radius: 16px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 30px 80px rgba(41,46,38,.18);
  transform: rotate(var(--card-rot));
  transform-origin: 50% 8%;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .35s ease;
  isolation: isolate;
}
.case-stack-card--one { --card-rot: -.65deg; z-index: 1; }
.case-stack-card--two { --card-rot: .55deg; --stack-top: calc(var(--header-h) + 60px); z-index: 2; }
.case-stack-card--three { --card-rot: -.3deg; --stack-top: calc(var(--header-h) + 72px); z-index: 3; margin-bottom: 0; }
.case-stack-card::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0 auto 0 0;
  width: 7px;
  background: var(--orange);
  transform: scaleY(.18);
  transform-origin: top;
  transition: transform .6s var(--ease), width .45s var(--ease);
}
.case-stack-card__visual,
.case-stack-card__visual img { width: 100%; height: 100%; }
.case-stack-card__visual { position: absolute; inset: 0; margin: 0; }
.case-stack-card__visual img {
  object-fit: cover;
  transform: scale(1.01);
  filter: saturate(.82) contrast(.98);
  transition: transform 1s var(--ease), filter .7s var(--ease);
}
.case-stack-card__wash {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,15,17,.04) 20%, rgba(15,15,17,.12) 48%, rgba(15,15,17,.86) 100%);
  transition: background .55s var(--ease);
}
.case-stack-card__topline {
  position: absolute;
  z-index: 4;
  left: 28px;
  right: 28px;
  top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: none;
}
.case-stack-card__index {
  position: absolute;
  z-index: 4;
  right: 28px;
  top: 62px;
  font-family: var(--font-display);
  font-size: clamp(58px, 7vw, 108px);
  font-weight: 300;
  line-height: .8;
  letter-spacing: -.06em;
  color: var(--paper);
  opacity: .94;
}
.case-stack-card__summary {
  position: absolute;
  z-index: 4;
  left: clamp(28px, 4vw, 58px);
  bottom: clamp(28px, 4.3vw, 56px);
  width: min(70%, 780px);
  transition: transform .6s var(--ease);
}
.case-stack-card__summary h3 {
  margin: 0;
  max-width: 10ch;
  font-family: var(--font-display);
  font-size: clamp(54px, 7vw, 108px);
  font-weight: 300;
  line-height: .86;
  letter-spacing: -.055em;
}
.case-stack-card__summary p {
  margin: 18px 0 0;
  max-width: 40em;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.45;
  letter-spacing: -.02em;
}
.case-stack-card__details {
  position: absolute;
  z-index: 4;
  left: clamp(28px, 4vw, 58px);
  right: clamp(28px, 4vw, 58px);
  bottom: 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: end;
  opacity: 0;
  transform: translateY(28px);
  pointer-events: none;
  transition: opacity .38s ease, transform .55s var(--ease);
}
.case-stack-card__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: min(740px, 72%);
}
.case-stack-card__kpis span {
  min-height: 80px;
  padding: 13px 14px 12px;
  border-top: 1px solid rgba(243,240,231,.7);
  background: rgba(41,46,38,.18);
  backdrop-filter: blur(5px);
}
.case-stack-card__kpis strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(25px, 2.5vw, 40px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.04em;
}
.case-stack-card__kpis small {
  display: block;
  margin-top: 8px;
  font-size: 9px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: none;
}
.case-stack-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: none;
  white-space: nowrap;
}
.case-stack-card__cta b { font-size: 18px; transition: transform .35s var(--ease); }
.case-stack-card:hover,
.case-stack-card:focus-visible,
.case-stack-card:focus-within {
  transform: translateY(-8px) rotate(0deg) scale(.995);
  box-shadow: 0 42px 110px rgba(41,46,38,.28);
  border-color: rgba(156,78,59,.8);
}
.case-stack-card:hover::before,
.case-stack-card:focus-visible::before,
.case-stack-card:focus-within::before { transform: scaleY(1); width: 10px; }
.case-stack-card:hover .case-stack-card__visual img,
.case-stack-card:focus-visible .case-stack-card__visual img,
.case-stack-card:focus-within .case-stack-card__visual img { transform: scale(1.055); filter: saturate(1) contrast(1.02); }
.case-stack-card:hover .case-stack-card__wash,
.case-stack-card:focus-visible .case-stack-card__wash,
.case-stack-card:focus-within .case-stack-card__wash { background: linear-gradient(180deg, rgba(15,15,17,.14) 10%, rgba(15,15,17,.28) 46%, rgba(15,15,17,.94) 100%); }
.case-stack-card:hover .case-stack-card__summary,
.case-stack-card:focus-visible .case-stack-card__summary,
.case-stack-card:focus-within .case-stack-card__summary { transform: translateY(-122px); }
.case-stack-card:hover .case-stack-card__details,
.case-stack-card:focus-visible .case-stack-card__details,
.case-stack-card:focus-within .case-stack-card__details { opacity: 1; transform: translateY(0); pointer-events: auto; }
.case-stack-card:hover .case-stack-card__cta b { transform: translate(2px,-2px) rotate(8deg); }
.case-stack-card.is-placeholder .case-stack-card__visual img { filter: saturate(.78); }
.case-stack-card.is-placeholder .case-stack-card__cta { background: var(--paper); }

@media (max-width: 820px) {
  .page-wipe__signature-wrap { width: min(88vw, 520px); }
  .page-wipe__signature-text { font-size: 112px; }
  .signature-wordmark { font-size: 26px; }
  .page-home .work-scroller--stack { min-height: 0; }
  .page-home .work-scroller--stack .work-track.work-stack-v2 { display: grid; gap: 24px; padding-bottom: 0; }
  .case-stack-card,
  .case-stack-card--one,
  .case-stack-card--two,
  .case-stack-card--three {
    position: relative;
    top: auto;
    width: 100%;
    height: min(72svh, 650px);
    margin: 0;
    transform: none;
    border-radius: 12px;
  }
  .case-stack-card__topline { left: 18px; right: 18px; top: 18px; font-size: 9px; }
  .case-stack-card__index { right: 18px; top: 48px; font-size: 56px; }
  .case-stack-card__summary { left: 20px; right: 20px; bottom: 154px; width: auto; transform: none !important; }
  .case-stack-card__summary h3 { font-size: clamp(44px, 13vw, 68px); max-width: 9ch; }
  .case-stack-card__summary p { font-size: 15px; margin-top: 12px; }
  .case-stack-card__details {
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: block;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .case-stack-card__kpis { width: 100%; grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .case-stack-card__kpis span { min-height: 58px; padding: 8px 9px; }
  .case-stack-card__kpis strong { font-size: 24px; }
  .case-stack-card__kpis small { font-size: 8px; margin-top: 4px; }
  .case-stack-card__cta { display: none; }
}

/* ========================================================================== 
   V5; reference-composed hero, readable drawn signature, ambient transitions
   ========================================================================== */
:root {
  --font-geometric: "Geometric415Lite", "Geometric415BT-LiteA", "Avenir Next", "Century Gothic", "Geometric415Lite Fallback", Arial, sans-serif;
  --font-display: var(--font-geometric);
  --home-bg: rgb(252 252 244);
}

/* --- Loader + header signature ----------------------------------------- */
.page-wipe {
  display: none;
  place-items: center;
  background: var(--orange);
}
html.js .page-wipe { display: grid; }
.page-wipe__signature-wrap { width: min(62vw, 560px); }
.page-wipe__signature { width: 100%; height: auto; overflow: visible; }
.page-wipe__signature-stroke {
  fill: none;
  stroke: var(--paper);
  stroke-width: 5.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.page-wipe__signature-dot {
  fill: var(--paper);
  opacity: 0;
  transform-origin: 236px 84px;
  transform: scale(.2);
}
.page-wipe.is-writing .page-wipe__signature-stroke {
  animation: signatureDrawV5 1.18s cubic-bezier(.56,.04,.18,1) forwards;
}
.page-wipe.is-writing .page-wipe__signature-dot {
  animation: signatureDotV5 .2s var(--ease) 1.12s forwards;
}
.page-wipe.is-written .page-wipe__signature-stroke { stroke-dashoffset: 0; }
.page-wipe.is-written .page-wipe__signature-dot { opacity: 1; transform: scale(1); }
@keyframes signatureDrawV5 { to { stroke-dashoffset: 0; } }
@keyframes signatureDotV5 { to { opacity: 1; transform: scale(1); } }

/* Remove the older font/text reveal implementation completely. */
.page-wipe__signature-text,
.page-wipe__signature-reveal,
.page-wipe__signature-scribble,
.page-wipe__signature-line,
.page-wipe__signature-shadow { display: none !important; }

.header-logo--signature {
  width: 76px !important;
  height: 30px !important;
  display: flex;
  align-items: center;
  overflow: visible;
}
.header-signature-v5 { width: 76px; height: auto; overflow: visible; }
.header-signature-v5 path {
  fill: none;
  stroke: currentColor;
  stroke-width: 7.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.header-signature-v5 circle { fill: currentColor; }
.header-logo--signature:hover .header-signature-v5 { transform: rotate(-1deg) translateY(-1px); }
.signature-wordmark { display: none !important; }

/* --- Landing poster: scale and spacing follow the reference more closely. */
.home-hero-v2 {
  min-height: 100svh;
  padding: 72px clamp(22px, 4vw, 64px) 20px;
  background: var(--paper);
}
.home-hero-v2__stage {
  width: min(100%, 1360px);
  height: calc(100svh - 92px);
  min-height: 650px;
}
.home-hero-v2__headline {
  padding-top: clamp(26px, 3.5vh, 48px);
  font-size: clamp(82px, 8.55vw, 150px);
  line-height: .78;
  letter-spacing: -.058em;
}
.home-hero-v2__line--one {
  justify-content: center;
  gap: clamp(12px, 1.1vw, 20px);
  padding-right: 9.5%;
}
.home-hero-v2__line--two {
  justify-content: center;
  margin-top: -.015em;
  padding-left: 11.5%;
}
.home-hero-v2__line--three {
  justify-content: flex-start;
  gap: clamp(6px, .62vw, 11px);
  margin-top: -.02em;
  padding-left: 17%;
  padding-right: 20%;
  font-size: .65em;
}
.hero-inline-portrait {
  width: clamp(180px, 14vw, 238px);
  aspect-ratio: 1.78;
  overflow: visible;
  box-shadow: none;
}
.hero-inline-portrait > img {
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 16px 32px rgba(41,46,38,.12);
}
.hero-inline-portrait__asterisk { display: none !important; }
.hero-inline-portrait__sketch {
  position: absolute;
  z-index: 3;
  right: -13%;
  bottom: -22%;
  width: 30%;
  aspect-ratio: .9;
  overflow: hidden;
  border-radius: 2px;
  background: var(--orange);
  transform: rotate(5deg);
  box-shadow: 0 7px 16px rgba(41,46,38,.12);
}
.hero-inline-portrait__sketch img {
  width: 170%;
  max-width: none;
  height: 135%;
  object-fit: cover;
  object-position: 28% 50%;
  mix-blend-mode: multiply;
  filter: contrast(1.25) saturate(.35);
  transform: translate(-17%, -8%);
}
.hero-project-stack {
  width: clamp(156px, 12.3vw, 210px);
  margin-right: clamp(6px, 1vw, 16px);
}
.home-hero-v2__doodle {
  top: clamp(20px, 2.6vh, 34px);
  right: clamp(10%, 12.5vw, 15%);
  width: clamp(84px, 7.3vw, 118px);
  aspect-ratio: .92;
  transform: translateY(28px) rotate(3deg);
}
.home-hero-v2__doodle span {
  background: var(--orange);
  border-radius: 2px;
}
.home-hero-v2__doodle img {
  width: 205%;
  max-width: none;
  height: 135%;
  object-fit: cover;
  object-position: 25% 54%;
  margin: -17% 0 0 -45%;
  mix-blend-mode: multiply;
  filter: contrast(1.22) saturate(.4);
}

/* Career highlights read like a quiet typed field note, not a KPI dashboard. */
.home-hero-v2__kpis { display: none !important; }
.home-hero-v2__achievements {
  position: absolute;
  z-index: 4;
  right: 2.5%;
  top: 56%;
  width: min(28vw, 405px);
  padding-left: 20px;
  border-left: 1px solid rgba(41,46,38,.72);
}
.home-hero-v2__intro {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.48;
  letter-spacing: -.022em;
  max-width: 29em;
}
.achievement-typewriter {
  margin-top: 18px;
  display: grid;
  gap: 8px;
  font-family: "Courier New", Courier, ui-monospace, monospace;
  font-size: clamp(11px, .73vw, 13px);
  line-height: 1.42;
  letter-spacing: -.025em;
}
.achievement-typewriter p {
  min-height: 1.45em;
  display: flex;
  align-items: baseline;
  gap: 7px;
  opacity: .76;
}
.achievement-typewriter p.is-complete { opacity: 1; }
.achievement-typewriter__prompt { color: var(--orange); font-weight: 700; }
.typewriter-cursor {
  display: none;
  color: var(--orange);
  animation: blink .75s steps(1) infinite;
}
.achievement-typewriter p.is-typing .typewriter-cursor { display: inline-block; }

/* One centered discovery cue, like the reference. */
.home-hero-v2__cta { display: none !important; }
.home-hero-v2__scroll--center {
  left: 50%;
  right: auto;
  bottom: clamp(16px, 2.3vh, 26px);
  transform: translateX(-50%);
  gap: 8px;
  font-size: 9px;
}
.home-hero-v2__scroll--center > span:first-child {
  writing-mode: horizontal-tb;
  transform: none;
}
.home-hero-v2__scroll-line {
  display: block;
  width: 1px;
  height: 27px;
  background: rgba(41,46,38,.45);
}
.home-hero-v2__scroll--center .home-hero-v2__scroll-circle { width: 26px; height: 26px; }

/* --- Ambient page-color transition: paper -> grey -> orange ------------ */
body.page-home {
  background: var(--home-bg);
}
.page-home main {
  position: relative;
  z-index: 1;
  background: transparent;
}
.page-home #intro,
.page-home .work-scroller--stack,
.page-home .manifesto,
.page-home .home-contact {
  background: transparent !important;
}
.page-home .manifesto { color: var(--ink); }
.page-home .manifesto__halo { border-color: rgba(41,46,38,.14); }
.page-home .manifesto__word { opacity: .20; }
.page-home .manifesto__word.is-active { opacity: 1; }
.page-home .home-contact { color: var(--ink); }
.page-home .home-contact .eyebrow--light::before { background: var(--ink); }

/* Sticky reveal: the last orange composition scrolls away to expose footer. */
.page-home .site-footer {
  position: sticky;
  bottom: 0;
  z-index: 0;
  min-height: 100svh;
}
.page-home .home-contact {
  position: relative;
  z-index: 2;
  min-height: 100svh;
}

/* Cleaner menu traces: controlled and secondary to the labels. */


.menu-open .home-hero-v2__scroll--center { opacity: 0 !important; visibility: hidden !important; }

@media (max-width: 1100px) {
  .home-hero-v2__headline { font-size: clamp(72px, 10.2vw, 116px); }
  .home-hero-v2__line--three { padding-left: 7%; padding-right: 28%; }
  .home-hero-v2__achievements { width: min(31vw, 340px); top: 57%; }
  .home-hero-v2__doodle { right: 8%; }
}

@media (max-width: 820px) {
  .page-wipe__signature-wrap { width: min(82vw, 440px); }
  .page-wipe__signature-stroke { stroke-width: 7; }
  .header-logo--signature, .header-signature-v5 { width: 66px !important; }
  .home-hero-v2 {
    min-height: auto;
    padding: 60px 18px 38px;
    overflow: hidden;
  }
  .home-hero-v2__stage { height: auto; min-height: 94svh; }
  .home-hero-v2__headline {
    padding-top: 18px;
    font-size: clamp(54px, 16.5vw, 82px);
    line-height: .82;
    letter-spacing: -.05em;
  }
  .home-hero-v2__line--one,
  .home-hero-v2__line--two,
  .home-hero-v2__line--three { padding-left: 0; padding-right: 0; justify-content: flex-start; }
  .home-hero-v2__line--three { margin-top: .08em; font-size: .66em; flex-wrap: wrap; }
  .hero-inline-portrait { width: clamp(112px, 31vw, 150px); }
  .hero-inline-portrait__sketch { width: 34%; right: -8%; bottom: -24%; }
  .hero-project-stack { width: clamp(112px, 30vw, 148px); }
  .home-hero-v2__doodle { top: 5px; right: 3%; width: 62px; }
  .home-hero-v2__achievements {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: 52px;
    padding: 18px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(41,46,38,.48);
  }
  .home-hero-v2__intro { font-size: 16px; }
  .achievement-typewriter { font-size: 11px; }
  .home-hero-v2__scroll--center { position: relative; left: auto; bottom: auto; transform: none; margin: 38px auto 0; }
  .page-home .site-footer { position: relative; min-height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .page-wipe__signature-stroke { stroke-dashoffset: 0 !important; animation: none !important; }
  .page-wipe__signature-dot { opacity: 1 !important; transform: scale(1) !important; animation: none !important; }
}

/* ========================================================================== 
   V6; closer Untold composition, legible signature, ambient page transition
   ========================================================================== */
:root {
  --font-geometric: "Geometric415BT-LiteA", "Geometric 415 Lite", "Geometric415Lite", "Avenir Next", "Century Gothic", "Geometric415Lite Fallback", Arial, sans-serif;
  --font-display: var(--font-geometric);
}

/* A simpler, readable handwritten mark. The i-dot is intentionally separate
   and appears after the connected word has finished drawing. */
.page-wipe__signature-wrap { width: min(46vw, 455px); }
.page-wipe__signature-stroke {
  stroke-width: 6.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.page-wipe.is-writing .page-wipe__signature-stroke {
  animation: signatureDrawV6 1.28s cubic-bezier(.48,.02,.18,1) forwards;
}
.page-wipe.is-writing .page-wipe__signature-dot {
  animation: signatureDotV6 .18s var(--ease) 1.25s forwards;
}
@keyframes signatureDrawV6 { to { stroke-dashoffset: 0; } }
@keyframes signatureDotV6 { to { opacity: 1; transform: scale(1); } }
.header-logo--signature { width: 72px !important; }
.header-signature-v5 { width: 72px; }
.header-signature-v5 path { stroke-width: 6.6; }

/* Landing: compose the first viewport using the same visual ratios as the
   reference; compact central type, one image interruption, one sketch card,
   supporting note to the right and a centered discovery cue. */
.home-hero-v2 {
  min-height: 100svh;
  padding: 58px clamp(22px, 3.2vw, 54px) 18px;
}
.home-hero-v2__stage {
  width: min(100%, 1510px);
  height: calc(100svh - 76px);
  min-height: 650px;
}
.home-hero-v2__headline {
  width: min(100%, 1040px);
  margin-inline: auto;
  padding-top: clamp(20px, 2.8vh, 36px);
  font-size: clamp(80px, 7.75vw, 126px);
  line-height: .79;
  letter-spacing: -.054em;
}
.home-hero-v2__line--one {
  justify-content: center;
  gap: clamp(10px, .9vw, 16px);
  padding: 0 2% 0 0;
}
.home-hero-v2__line--two {
  justify-content: center;
  margin-top: .015em;
  padding-left: 12%;
}
.home-hero-v2__line--three {
  justify-content: flex-start;
  align-items: center;
  gap: clamp(5px, .48vw, 9px);
  margin-top: .04em;
  padding-left: 4%;
  padding-right: 26%;
  font-size: .625em;
}
.hero-inline-portrait {
  width: clamp(168px, 14.2vw, 220px);
  aspect-ratio: 1.82;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: none;
}
.hero-inline-portrait > img {
  border-radius: 2px;
  box-shadow: none;
  object-position: 50% 28%;
  filter: saturate(.78) contrast(1.02);
}
.hero-project-stack {
  width: clamp(146px, 11.8vw, 184px);
  margin-right: clamp(4px, .6vw, 10px);
  transform: translateY(.02em);
}
.home-hero-v2__doodle {
  top: clamp(18px, 2.1vh, 30px);
  right: clamp(17%, 20vw, 23%);
  width: clamp(72px, 6.1vw, 94px);
  aspect-ratio: .78;
  transform: translateY(24px) rotate(3deg);
}
.home-hero-v2__doodle img {
  width: 155%;
  height: 118%;
  max-width: none;
  object-fit: cover;
  object-position: 40% 44%;
  margin: -8% 0 0 -25%;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.28);
}
.home-hero-v2__achievements {
  right: 6.2%;
  top: 50.5%;
  width: min(25vw, 355px);
  padding-left: 18px;
  border-left-color: rgba(41,46,38,.55);
}
.home-hero-v2__intro {
  font-size: clamp(14px, .93vw, 17px);
  line-height: 1.42;
}
.achievement-typewriter {
  margin-top: 16px;
  gap: 6px;
  font-size: clamp(10px, .69vw, 12px);
  line-height: 1.45;
}
.achievement-typewriter p { min-height: 1.4em; opacity: .68; }
.achievement-typewriter p.is-typing,
.achievement-typewriter p.is-complete { opacity: 1; }
.home-hero-v2__scroll--center {
  bottom: clamp(14px, 1.8vh, 21px);
  font-size: 8.5px;
}

/* The page itself carries the colour transition, so section boundaries do not
   announce a new background. Each section paints the current ambient colour
   above the fixed footer. */
.page-home #intro,
.page-home .work-scroller--stack,
.page-home .manifesto,
.page-home .home-contact {
  background-color: var(--home-bg) !important;
  transition: background-color .08s linear;
}
.page-home .work-scroller--stack { color: var(--ink); }
.page-home .manifesto { color: var(--ink); }
.page-home .home-contact { color: var(--ink); }

/* Footer reveal: the footer stays parked behind the document. The final
   viewport of empty margin lets the orange section slide upward and uncover it. */
.page-home .site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100svh;
  min-height: 100svh;
  z-index: 0;
}
.page-home main {
  position: relative;
  z-index: 2;
  margin-bottom: 100svh;
}
.page-home .home-contact {
  position: relative;
  z-index: 3;
  min-height: 100svh;
  box-shadow: 0 36px 80px rgba(41,46,38,.12);
}

@media (max-width: 1180px) {
  .home-hero-v2__headline { font-size: clamp(72px, 8.7vw, 108px); width: min(100%, 920px); }
  .home-hero-v2__line--three { padding-left: 2%; padding-right: 30%; }
  .home-hero-v2__achievements { right: 4%; width: min(28vw, 320px); top: 52%; }
  .home-hero-v2__doodle { right: 15%; }
}

@media (max-width: 820px) {
  .page-wipe__signature-wrap { width: min(76vw, 390px); }
  .page-wipe__signature-stroke { stroke-width: 6.8; }
  .home-hero-v2 { padding: 58px 18px 28px; }
  .home-hero-v2__stage { min-height: 92svh; }
  .home-hero-v2__headline {
    width: 100%;
    padding-top: 20px;
    font-size: clamp(52px, 15.4vw, 78px);
    line-height: .83;
    letter-spacing: -.047em;
  }
  .home-hero-v2__line--one,
  .home-hero-v2__line--two,
  .home-hero-v2__line--three { padding-left: 0; padding-right: 0; justify-content: flex-start; }
  .home-hero-v2__line--two { margin-top: .08em; }
  .home-hero-v2__line--three { margin-top: .12em; font-size: .68em; flex-wrap: wrap; }
  .hero-inline-portrait { width: clamp(112px, 31vw, 148px); }
  .hero-project-stack { width: clamp(108px, 29vw, 140px); }
  .home-hero-v2__doodle { top: 0; right: 2%; width: 58px; }
  .home-hero-v2__achievements {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: 44px;
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(41,46,38,.38);
  }
  .achievement-typewriter { font-size: 10.5px; }
  .home-hero-v2__scroll--center { margin-top: 32px; }
  .page-home main { margin-bottom: 0; }
  .page-home .site-footer { position: relative; height: auto; min-height: auto; }
}

/* ========================================================================== 
   V7; natural scrolling, composed hero, lighter card stack, vertical progress
   ========================================================================== */
:root {
  --font-scribble: "Noteworthy", "Bradley Hand", "Chalkboard SE", "Segoe Print", cursive;
}

/* 1–2. Recompose the landing viewport closer to the reference proportions. */
.home-hero-v2 {
  padding: 54px clamp(22px, 3vw, 50px) 16px;
}
.home-hero-v2__stage {
  width: min(100%, 1460px);
  height: calc(100svh - 70px);
  min-height: 650px;
}
.home-hero-v2__headline {
  width: min(100%, 1080px);
  margin: 0 auto;
  padding-top: clamp(24px, 4.2vh, 48px);
  font-size: clamp(92px, 8.8vw, 148px);
  line-height: .765;
  letter-spacing: -.058em;
}
.home-hero-v2__line--one {
  justify-content: center;
  padding: 0 4% 0 0;
  gap: clamp(10px, 1vw, 18px);
}
.home-hero-v2__line--two {
  justify-content: center;
  padding-left: 13%;
  margin-top: -.012em;
}
.home-hero-v2__line--three {
  justify-content: flex-start;
  padding-left: 1.5%;
  padding-right: 22%;
  margin-top: .01em;
  font-size: .67em;
  gap: clamp(5px, .55vw, 10px);
}
.hero-inline-portrait { width: clamp(185px, 14.8vw, 238px); }
.hero-project-stack { width: clamp(160px, 12.4vw, 198px); }
.home-hero-v2__doodle {
  top: clamp(28px, 3.6vh, 48px);
  right: clamp(12%, 15vw, 18%);
  width: clamp(76px, 6.4vw, 102px);
}
.home-hero-v2__achievements {
  top: 55%;
  right: 4.5%;
  width: min(25vw, 365px);
  padding-left: 18px;
}
.home-hero-v2__intro {
  font-size: clamp(16px, 1.02vw, 18px);
  line-height: 1.42;
}

/* 1. A single achievement replaces itself in place instead of building a list. */
.achievement-typewriter--loop {
  display: block;
  margin-top: 18px;
  min-height: 4.2em;
  font-size: clamp(12px, .78vw, 14px);
  line-height: 1.5;
}
.achievement-typewriter--loop p {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  min-height: 4.2em;
  opacity: 1;
}
.achievement-typewriter--loop .typewriter-output { max-width: 31em; }
.achievement-typewriter--loop .typewriter-cursor { display: inline-block; }

/* 3. Remove pinned/sticky storytelling. Every section now moves with the page. */
.work-sticky,
.manifesto__sticky,
.city-story__sticky,
.before-after__sticky,
.screen-flow__sticky,
.current-ux__sticky {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.work-scroller,
.page-home .work-scroller--stack,
.manifesto,
.page-home .manifesto,
.city-story,
.before-after,
.screen-flow,
.screen-flow--domain,
.current-ux {
  height: auto !important;
  min-height: 0 !important;
}

/* Natural home work stack: overlap is spatial, not scroll-capture. */
.page-home .work-scroller--stack {
  padding: clamp(90px, 10vh, 128px) 0 clamp(120px, 14vh, 180px);
}
.page-home .work-scroller--stack .work-heading {
  padding-bottom: clamp(46px, 6vh, 70px);
}
.page-home .work-scroller--stack .work-track.work-stack-v2 {
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: 0 var(--gutter) 110px;
  overflow: visible;
}
.case-stack-card,
.case-stack-card--one,
.case-stack-card--two,
.case-stack-card--three {
  position: relative;
  top: auto;
  width: min(66vw, 910px);
  height: min(56vh, 560px);
  margin: 0 auto;
  overflow: visible;
  transform: none;
  border-radius: 13px;
  box-shadow: 0 20px 58px rgba(41,46,38,.14);
}
.case-stack-card--one { z-index: 1; transform: rotate(-.35deg); }
.case-stack-card--two { z-index: 2; margin-top: -12vh; transform: translateX(2.2vw) rotate(.3deg); }
.case-stack-card--three { z-index: 3; margin-top: -12vh; transform: translateX(-1.7vw) rotate(-.18deg); }
.case-stack-card__visual {
  overflow: hidden;
  border-radius: 13px;
  background: var(--ink);
}
.case-stack-card__wash {
  border-radius: 13px;
  pointer-events: none;
}
.case-stack-card::before { border-radius: 13px 0 0 13px; }
.case-stack-card__topline { left: 22px; right: 22px; top: 20px; font-size: 9px; }
.case-stack-card__index { right: 22px; top: 48px; font-size: clamp(46px, 5vw, 76px); }
.case-stack-card__summary {
  left: clamp(24px, 3vw, 42px);
  bottom: clamp(24px, 3vw, 40px);
  width: min(76%, 650px);
  transform: none !important;
}
.case-stack-card__summary h3 {
  max-width: 11ch;
  font-size: clamp(48px, 5.4vw, 82px);
  line-height: .88;
}
.case-stack-card__summary p { margin-top: 12px; font-size: clamp(14px, 1vw, 17px); }
.case-stack-card:hover,
.case-stack-card:focus-visible,
.case-stack-card:focus-within {
  transform: translateY(-5px) rotate(0deg);
  box-shadow: 0 30px 82px rgba(41,46,38,.22);
}
.case-stack-card--two:hover,
.case-stack-card--two:focus-visible,
.case-stack-card--two:focus-within { transform: translateX(2.2vw) translateY(-5px) rotate(0deg); }
.case-stack-card--three:hover,
.case-stack-card--three:focus-visible,
.case-stack-card--three:focus-within { transform: translateX(-1.7vw) translateY(-5px) rotate(0deg); }

/* 4. KPIs become loose handwritten notes outside the card on hover. */
.case-stack-card__details {
  left: auto;
  right: -210px;
  bottom: 10%;
  width: 190px;
  display: block;
  opacity: 0;
  transform: translate(-10px, 8px) rotate(-2deg);
  pointer-events: none;
  transition: opacity .24s linear, transform .42s var(--ease);
}
.case-stack-card--two .case-stack-card__details {
  left: -205px;
  right: auto;
  transform: translate(10px, 8px) rotate(2deg);
}
.case-stack-card__kpis {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.case-stack-card__kpis span {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  color: var(--ink);
  transform: rotate(-1.5deg);
}
.case-stack-card__kpis span:nth-child(even) { transform: translateX(12px) rotate(1.2deg); }
.case-stack-card__kpis strong,
.case-stack-card__kpis small {
  font-family: var(--font-scribble);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.case-stack-card__kpis strong { font-size: clamp(26px, 2.1vw, 34px); line-height: 1; }
.case-stack-card__kpis small { margin-top: 1px; font-size: 14px; line-height: 1.15; }
.case-stack-card__cta { display: none !important; }
.case-stack-card:hover .case-stack-card__details,
.case-stack-card:focus-visible .case-stack-card__details,
.case-stack-card:focus-within .case-stack-card__details {
  opacity: 1;
  transform: translate(0, 0) rotate(-2deg);
}
.case-stack-card--two:hover .case-stack-card__details,
.case-stack-card--two:focus-visible .case-stack-card__details,
.case-stack-card--two:focus-within .case-stack-card__details { transform: translate(0,0) rotate(2deg); }
.case-stack-card:hover .case-stack-card__summary,
.case-stack-card:focus-visible .case-stack-card__summary,
.case-stack-card:focus-within .case-stack-card__summary { transform: none !important; }

/* 5. The third card starts in the exact same stack rhythm; no delayed jump. */
.case-stack-card--three { transition-delay: 0s !important; }
.case-stack-card--three .case-stack-card__visual img { transform: scale(1.01); }

/* Natural versions of the case-study sequences that used to capture scroll. */
.city-story__sticky,
.before-after__sticky,
.current-ux__sticky,
.screen-flow__sticky { padding-block: clamp(90px, 10vw, 150px) !important; }
.city-story__sticky { grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr); }
.city-step-copy { min-height: 0; display: grid; gap: 18px; }
.city-step-copy__item { position: relative; opacity: 1; transform: none; max-width: 420px; padding-top: 14px; border-top: 1px solid rgba(41,46,38,.18); }
.city-story { --final-step: 1; }
.city-layer--traffic,
.city-layer--light,
.city-layer--camera,
.city-layer--control { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
.city-layer--base { opacity: .12; }
.city-story__progress { display: none; }
.before-after__grid { align-items: start; }
.before-after__copy { display: grid; gap: 28px; }
.before-after__copy-item { display: block; }
.before-after__stage { height: auto; display: grid; gap: 22px; }
.before-after__image { position: relative; inset: auto; height: auto; opacity: 1 !important; transform: none !important; }
.before-after__label { display: none; }
.screen-flow__sticky { grid-template-columns: minmax(240px, 3fr) minmax(0, 9fr); align-items: start; }
.screen-flow__copy { min-height: 0; display: grid; gap: 34px; }
.flow-step { position: relative; opacity: 1; transform: none; max-width: 340px; padding-top: 16px; border-top: 1px solid rgba(243,240,231,.18); }
.screen-flow__frame { min-height: 0; display: grid; gap: 34px; }
.flow-screen { position: relative; inset: auto; height: auto; opacity: 1; transform: none; }
.screen-flow__rail { display: none; }
.current-ux__sticky { grid-template-columns: minmax(240px, 3fr) minmax(0, 9fr); align-items: start; }
.current-ux__copy { min-height: 0; display: grid; gap: 24px; }
.current-step { position: relative; opacity: 1; transform: none; }
.current-ux__screens { height: auto; display: grid; gap: 28px; }
.current-screen { position: relative; inset: auto; height: auto; opacity: 1; transform: none; }

/* 6. The manifesto gets its background first. Copy then arrives cleanly. */
.page-home .manifesto {
  min-height: 100svh !important;
  display: grid;
  align-items: center;
}
.page-home .manifesto__sticky {
  min-height: 100svh !important;
  display: grid;
  place-items: center;
  padding: clamp(80px, 10vh, 120px) var(--gutter);
}
.page-home .manifesto__copy { max-width: 1100px; }
.page-home .manifesto__word {
  opacity: 0;
  transform: translateY(.16em);
  display: inline-block;
  transition: opacity .44s ease, transform .55s var(--ease), color .25s linear;
}
.page-home .manifesto.is-text-ready .manifesto__word { opacity: 1; transform: translateY(0); }
.page-home .manifesto.is-text-ready .manifesto__word:nth-child(2n) { transition-delay: .035s; }
.page-home .manifesto.is-text-ready .manifesto__word:nth-child(3n) { transition-delay: .07s; }
.page-home .manifesto__hint { display: none; }

/* 7. Chapter progress lives on the right edge, vertically. */
.section-progress,
.page-home .section-progress {
  position: fixed;
  z-index: 790;
  top: 50%;
  right: 14px;
  left: auto;
  width: 16px;
  height: min(48vh, 430px);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: stretch;
  transform: translateY(-50%);
  color: var(--ink);
  background: transparent;
}
.page-home .section-progress { transform: translate(28px, -50%); opacity: 0; }
.page-home.home-chrome-visible .section-progress { transform: translate(0, -50%); opacity: 1; }
.section-progress::before { display: none; }
.section-progress__segment {
  flex: 1 1 0;
  width: 4px;
  height: auto;
  margin-left: auto;
  background: color-mix(in srgb, currentColor 18%, transparent);
  transition: width .18s ease;
}
.section-progress__segment.is-active { width: 7px; height: auto; }
.section-progress__fill {
  inset: auto 0 0;
  width: 100%;
  height: 100%;
  transform: scaleY(0);
  transform-origin: bottom center;
}
.section-progress__segment::after {
  left: auto;
  right: 14px;
  top: 50%;
  transform: translate(-5px, -50%);
}
.section-progress__segment:hover::after,
.section-progress__segment:focus-visible::after { transform: translate(0, -50%); }
.menu-open .section-progress { transform: translate(40px, -50%) !important; }

@media (max-width: 1050px) {
  .home-hero-v2__headline { font-size: clamp(76px, 9.6vw, 108px); width: min(100%, 930px); }
  .home-hero-v2__line--three { padding-left: 0; padding-right: 28%; }
  .home-hero-v2__achievements { right: 2%; width: min(29vw, 320px); }
  .case-stack-card { width: min(72vw, 800px); }
  .case-stack-card__details { right: -160px; width: 150px; }
  .case-stack-card--two .case-stack-card__details { left: -155px; }
}

@media (max-width: 820px) {
  .home-hero-v2__headline { font-size: clamp(54px, 15.7vw, 80px); }
  .home-hero-v2__achievements { width: 100%; }
  .achievement-typewriter--loop { min-height: 4.8em; font-size: 11px; }
  .page-home .work-scroller--stack .work-track.work-stack-v2 { display: grid; gap: 26px; padding-bottom: 0; }
  .case-stack-card,
  .case-stack-card--one,
  .case-stack-card--two,
  .case-stack-card--three {
    width: 100%;
    height: min(62svh, 540px);
    margin: 0;
    transform: none !important;
  }
  .case-stack-card__details {
    position: relative;
    inset: auto;
    width: auto;
    margin-top: 12px;
    padding: 12px 4px 0;
    opacity: 1;
    transform: none !important;
  }
  .case-stack-card__kpis { grid-template-columns: repeat(2, 1fr); gap: 7px 16px; }
  .case-stack-card__kpis strong { font-size: 24px; }
  .case-stack-card__kpis small { font-size: 12px; }
  .case-stack-card__summary { bottom: 24px; }
  .case-stack-card__summary h3 { font-size: clamp(42px, 12vw, 64px); }
  .section-progress,
  .page-home .section-progress,
  .page-home.home-chrome-visible .section-progress {
    right: 7px;
    width: 10px;
    height: 36vh;
    transform: translateY(-50%);
  }
  .section-progress__segment { width: 3px; }
  .section-progress__segment.is-active { width: 5px; }
  .section-progress__segment::after { display: none; }
  .city-story__sticky,
  .screen-flow__sticky,
  .current-ux__sticky { grid-template-columns: 1fr; }
}

/* Final V7 cleanup. The old floating case index no longer pins either. */
.case-index { position: relative !important; top: auto !important; }

@media (max-width: 820px) {
  .case-stack-card__summary { bottom: 142px; }
  .case-stack-card__details,
  .case-stack-card--two .case-stack-card__details {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 18px;
    width: auto;
    margin: 0;
    opacity: 1;
    transform: none !important;
  }
}

/* ========================================================================== 
   V8; balanced hero, scroll-collected work, writing desk + vibe launchpad
   ========================================================================== */

/* The preloader mark is deliberately simple: a single readable handwritten
   line plus the i dot. Avoid heavy stroke and avoid the old self-crossing path. */
.page-wipe__signature-wrap { width: min(48vw, 520px); }
.page-wipe__signature-stroke { stroke-width: 5.1; }
.page-wipe__signature-dot { r: 4.4; }
.header-logo--signature { width: 78px !important; }
.header-signature-v5 { width: 78px; }
.header-signature-v5 path { stroke-width: 5.15; }
.header-signature-v5 circle { r: 4.4; }

/* Cursor stays legible on every surface by compositing as an inverse ink mark. */
.cursor-scribble { mix-blend-mode: difference; }
.cursor-scribble__loop {
  stroke: rgba(255,255,255,.94) !important;
  stroke-width: 1.45;
}
.cursor-scribble__loop--b { opacity: .72; }
.cursor-scribble__dot { fill: #fff !important; }
.menu-open .cursor-scribble__loop { stroke: rgba(255,255,255,.96) !important; }
.menu-open .cursor-scribble__dot { fill: #fff !important; }

/* 1. Rebalance the opening poster. The headline sits around the visual centre
   instead of consuming only the upper third; supporting detail anchors the
   lower-right and the discovery cue closes the viewport. */
@media (min-width: 821px) {
  .home-hero-v2 { padding-top: 52px; }
  .home-hero-v2__stage {
    width: min(100%, 1500px);
    height: calc(100svh - 70px);
    min-height: 690px;
  }
  .home-hero-v2__headline {
    width: min(100%, 1110px);
    padding-top: clamp(86px, 11vh, 124px);
    font-size: clamp(84px, 8.25vw, 134px);
    line-height: .79;
  }
  .home-hero-v2__line--one { padding-right: 4%; }
  .home-hero-v2__line--two { padding-left: 13%; margin-top: .01em; }
  .home-hero-v2__line--three {
    padding-left: 1.5%;
    padding-right: 22%;
    margin-top: .045em;
    font-size: .64em;
  }
  .hero-inline-portrait { width: clamp(176px, 14.8vw, 228px); }
  .hero-project-stack { width: clamp(152px, 12.4vw, 192px); }
  .home-hero-v2__doodle {
    top: clamp(92px, 11.6vh, 128px);
    right: clamp(12%, 15.5vw, 18%);
    width: clamp(76px, 6vw, 96px);
  }
  .home-hero-v2__achievements {
    top: auto;
    right: 5.5%;
    bottom: clamp(94px, 12vh, 132px);
    width: min(29vw, 390px);
    padding-left: 20px;
  }
  .home-hero-v2__intro { font-size: clamp(15px, 1vw, 18px); }
  .achievement-typewriter--loop {
    min-height: 3.1em;
    font-size: clamp(11px, .76vw, 13px);
  }
  .home-hero-v2__scroll--center { bottom: clamp(18px, 2.5vh, 30px); }
}

/* 2. Work cards now genuinely collect on scroll. This is a local card-stack
   behaviour, not a full-viewport pinned scene: the page continues to advance
   naturally while each card briefly holds its place. */
.page-home .work-scroller--stack {
  min-height: 0 !important;
  padding: clamp(90px, 11vh, 140px) 0 clamp(120px, 15vh, 190px);
  overflow: visible;
}
.page-home .work-scroller--stack .work-sticky {
  position: relative !important;
  height: auto !important;
  overflow: visible !important;
  padding-top: 0 !important;
}
.page-home .work-scroller--stack .work-heading {
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(54px, 7vh, 82px);
}
.page-home .work-scroller--stack .work-track.work-stack-v3 {
  display: block;
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: 0 var(--gutter) 18vh;
  overflow: visible;
}
.case-stack-shell {
  --stack-nudge: 0px;
  position: sticky;
  top: calc(var(--header-h) + 46px + var(--stack-nudge));
  z-index: 1;
  width: min(62vw, 820px);
  aspect-ratio: 1.58;
  margin: 0 auto clamp(32vh, 340px, 42vh);
  overflow: visible;
}
.case-stack-shell--one { z-index: 1; --stack-nudge: 0px; }
.case-stack-shell--two { z-index: 2; --stack-nudge: 14px; }
.case-stack-shell--three { z-index: 3; --stack-nudge: 28px; margin-bottom: 6vh; }
.case-stack-card,
.case-stack-card--one,
.case-stack-card--two,
.case-stack-card--three {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 12px;
  overflow: hidden !important;
  transform: rotate(0deg) !important;
  box-shadow: 0 22px 62px rgba(41,46,38,.16);
  transition: transform .58s var(--ease), box-shadow .58s var(--ease), border-color .3s ease;
}
.case-stack-shell--one .case-stack-card { transform: rotate(-.45deg) !important; }
.case-stack-shell--two .case-stack-card { transform: rotate(.36deg) !important; }
.case-stack-shell--three .case-stack-card { transform: rotate(-.18deg) !important; }
.case-stack-card__summary {
  left: clamp(24px, 3.1vw, 44px);
  bottom: clamp(24px, 3vw, 42px);
  width: min(74%, 640px);
  transform: none !important;
}
.case-stack-card__summary h3 {
  max-width: 11ch;
  font-size: clamp(46px, 5.2vw, 76px);
  line-height: .88;
}
.case-stack-card__summary p { max-width: 36em; font-size: clamp(13px, .96vw, 16px); }
.case-stack-card__topline { font-size: 9px; }
.case-stack-card__index { font-size: clamp(42px, 4.6vw, 70px); }
.case-stack-shell:hover .case-stack-card,
.case-stack-shell:focus-within .case-stack-card {
  transform: translateY(-7px) rotate(0deg) scale(.992) !important;
  box-shadow: 0 36px 92px rgba(41,46,38,.25);
  border-color: rgba(156,78,59,.8);
}
.case-stack-shell:hover .case-stack-card__visual img,
.case-stack-shell:focus-within .case-stack-card__visual img { transform: scale(1.055); filter: saturate(1) contrast(1.03); }
.case-stack-shell:hover .case-stack-card__wash,
.case-stack-shell:focus-within .case-stack-card__wash { background: linear-gradient(180deg,rgba(15,15,17,.08),rgba(15,15,17,.18) 48%,rgba(15,15,17,.91)); }
.case-stack-card__details { display: none !important; }
.case-stack-notes {
  position: absolute;
  z-index: 9;
  top: 18%;
  width: clamp(150px, 13vw, 205px);
  display: grid;
  gap: 11px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(13px) rotate(-2deg);
  transition: opacity .22s linear, transform .46s var(--ease);
}
.case-stack-notes--right { left: calc(100% + 30px); }
.case-stack-notes--left { right: calc(100% + 30px); transform: translateY(13px) rotate(2deg); }
.case-stack-notes span {
  display: block;
  font-family: var(--font-scribble);
  color: var(--ink);
  line-height: 1;
  transform: rotate(-1.2deg);
}
.case-stack-notes span:nth-child(2n) { padding-left: 14px; transform: rotate(1.4deg); }
.case-stack-notes b { display: block; font-size: clamp(25px, 2vw, 34px); font-weight: 400; }
.case-stack-notes i { display: block; margin-top: 2px; font-size: clamp(12px, 1vw, 16px); font-style: normal; }
.case-stack-shell:hover .case-stack-notes,
.case-stack-shell:focus-within .case-stack-notes { opacity: 1; transform: translateY(0) rotate(-2deg); }
.case-stack-shell:hover .case-stack-notes--left,
.case-stack-shell:focus-within .case-stack-notes--left { transform: translateY(0) rotate(2deg); }

/* 5. Writing is treated like a physical desk of overlapping paper rather than
   a conventional list. Every item can be focused; hover/focus pulls it out. */
.writing-lab,
.vibe-lab {
  position: relative;
  z-index: 2;
  padding: clamp(100px, 12vh, 160px) 0;
  background: var(--home-bg);
  color: var(--ink);
  transition: background-color .08s linear;
}
.writing-lab__head,
.vibe-lab__head {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(220px, 4fr);
  gap: 32px;
  align-items: end;
}
.writing-lab__head .h2,
.vibe-lab__head .h2 { max-width: 10ch; }
.writing-desk {
  position: relative;
  width: min(calc(100% - 2 * var(--gutter)), 1380px);
  height: clamp(500px, 58vw, 710px);
  margin: clamp(54px, 7vh, 86px) auto 0;
  perspective: 1200px;
}
.writing-card {
  --rx: 0deg;
  position: absolute;
  top: 18%;
  width: clamp(190px, 17vw, 270px);
  aspect-ratio: .72;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(41,46,38,.2);
  background: #f7f3e8;
  color: var(--ink);
  box-shadow: 0 14px 35px rgba(41,46,38,.10);
  transform: translateY(var(--y, 0)) rotate(var(--r, 0deg));
  transform-origin: 50% 100%;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-color .3s ease;
  cursor: pointer;
}
.writing-card:nth-child(1) { left: 1%; --r: -8deg; --y: 42px; z-index: 1; }
.writing-card:nth-child(2) { left: 12.5%; --r: -5deg; --y: 17px; z-index: 2; }
.writing-card:nth-child(3) { left: 24%; --r: -2.5deg; --y: 4px; z-index: 3; }
.writing-card:nth-child(4) { left: 35.5%; --r: .6deg; --y: 0px; z-index: 4; }
.writing-card:nth-child(5) { left: 47%; --r: 2.8deg; --y: 5px; z-index: 5; }
.writing-card:nth-child(6) { left: 58.5%; --r: 5deg; --y: 19px; z-index: 6; }
.writing-card:nth-child(7) { left: 70%; --r: 7deg; --y: 39px; z-index: 7; background: #292e26; color: var(--paper); }
.writing-card:nth-child(8) { left: 81%; --r: 9deg; --y: 61px; z-index: 8; background: var(--orange); }
.writing-card::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid currentColor;
  opacity: .12;
  pointer-events: none;
}
.writing-card:hover,
.writing-card:focus-visible {
  z-index: 30;
  outline: none;
  transform: translateY(-62px) rotate(0deg) scale(1.045);
  box-shadow: 0 30px 80px rgba(41,46,38,.22);
}
.writing-card__type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: none;
}
.writing-card strong {
  font-family: var(--font-display);
  font-size: clamp(31px, 3vw, 45px);
  line-height: .93;
  font-weight: 300;
  letter-spacing: -.045em;
}
.writing-card em { font-size: 12px; font-style: normal; opacity: .68; }
.writing-card__arrow { position: absolute; right: 20px; bottom: 18px; font-size: 22px; transition: transform .35s var(--ease); }
.writing-card:hover .writing-card__arrow,
.writing-card:focus-visible .writing-card__arrow { transform: translate(4px,-4px) rotate(8deg); }

/* 6. Vibe apps use a launchpad: one animated preview responds to five compact
   controls. The previews are pure CSS placeholders and can later be swapped
   for real screenshots or live embeds. */
.vibe-launchpad {
  margin-top: clamp(50px, 6vh, 76px);
  display: grid;
  grid-template-columns: minmax(0, 7.4fr) minmax(280px, 4.6fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: stretch;
}
.vibe-launchpad__preview {
  position: relative;
  min-height: clamp(470px, 54vw, 690px);
  overflow: hidden;
  border-radius: 14px;
  background: var(--ink);
  border: 1px solid rgba(41,46,38,.22);
  box-shadow: 0 24px 68px rgba(41,46,38,.15);
}
.vibe-preview {
  position: absolute;
  inset: 0;
  padding: clamp(26px, 3vw, 44px);
  opacity: 0;
  transform: scale(.965) rotate(-.8deg);
  transition: opacity .38s ease, transform .65s var(--ease);
  pointer-events: none;
}
.vibe-preview.is-active { opacity: 1; transform: scale(1) rotate(0deg); }
.vibe-preview b {
  position: absolute;
  left: 28px;
  bottom: 24px;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--paper);
}
.vibe-preview--utility { background: linear-gradient(135deg,#24252a,#161719); }
.vibe-preview__window { position: absolute; inset: 18% 12% 36%; border: 1px solid rgba(243,240,231,.4); display: grid; grid-template-columns: 34% 1fr 1fr; gap: 6px; padding: 8px; }
.vibe-preview__window i { display:block; background: rgba(243,240,231,.16); }
.vibe-preview__meter { position:absolute; left:12%; right:18%; bottom:25%; height:10px; border-radius:999px; background: var(--orange); transform-origin:left; animation:vibeMeter 3.2s ease-in-out infinite alternate; }
.vibe-preview__meter--short { bottom:20%; right:42%; animation-delay:-1.2s; }
@keyframes vibeMeter { from { transform:scaleX(.22); } to { transform:scaleX(1); } }
.vibe-preview--utility2 { background: #e6e3da; }
.vibe-preview--utility2 b { color: var(--ink); }
.vibe-preview__dial { position:absolute; left:18%; top:19%; width:38%; aspect-ratio:1; border:2px solid var(--ink); border-radius:50%; }
.vibe-preview__dial::after { content:""; position:absolute; width:42%; height:2px; background:var(--orange); left:50%; top:50%; transform-origin:left; animation:vibeDial 4s ease-in-out infinite alternate; }
@keyframes vibeDial { from { transform:rotate(-35deg); } to { transform:rotate(120deg); } }
.vibe-preview__grid { position:absolute; right:12%; top:24%; width:28%; height:48%; background:repeating-linear-gradient(to bottom,rgba(41,46,38,.18) 0 1px,transparent 1px 34px); border-left:1px solid rgba(41,46,38,.28); }
.vibe-preview--fun1 { background: var(--orange); }
.vibe-preview__orb { position:absolute; width:42%; aspect-ratio:1; border:2px solid var(--ink); border-radius:48% 52% 61% 39% / 41% 38% 62% 59%; left:15%; top:15%; animation:vibeOrb 7s ease-in-out infinite alternate; }
.vibe-preview__orb--2 { width:30%; left:51%; top:39%; animation-delay:-2s; }
@keyframes vibeOrb { to { transform:rotate(170deg) scale(1.13); border-radius:64% 36% 42% 58% / 32% 60% 40% 68%; } }
.vibe-preview--fun1 b,.vibe-preview--fun2 b { color:var(--ink); }
.vibe-preview--fun2 { background:#f2efe6; }
.vibe-preview__scribble { position:absolute; inset:12%; display:grid; place-items:center; font-family:var(--font-scribble); font-size:clamp(180px,24vw,370px); color:var(--orange); animation:vibeScribble 5s ease-in-out infinite alternate; }
@keyframes vibeScribble { to { transform:rotate(18deg) scale(.82); } }
.vibe-preview--fun3 { background:#6f6bff; }
.vibe-preview__blocks { position:absolute; inset:16% 13%; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.vibe-preview__blocks i { display:block; background:var(--paper); border-radius:4px; transform:rotate(var(--br,0deg)); animation:vibeBlock 3.8s var(--ease) infinite alternate; }
.vibe-preview__blocks i:nth-child(2){--br:5deg;animation-delay:-.8s}.vibe-preview__blocks i:nth-child(3){--br:-6deg;animation-delay:-1.6s}.vibe-preview__blocks i:nth-child(4){--br:2deg;animation-delay:-2.4s}
@keyframes vibeBlock { to { transform:translateY(-18px) rotate(calc(var(--br,0deg) + 6deg)); } }
.vibe-launchpad__rail { display:grid; align-content:stretch; border-top:1px solid rgba(41,46,38,.22); }
.vibe-chip {
  position: relative;
  width:100%;
  display:grid;
  grid-template-columns:34px 1fr;
  grid-template-rows:auto auto;
  gap:4px 12px;
  align-content:center;
  padding:18px 18px 18px 0;
  border:0;
  border-bottom:1px solid rgba(41,46,38,.22);
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  transition:padding-left .35s var(--ease), background-color .3s ease;
}
.vibe-chip::before { content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--orange); transition:width .35s var(--ease); z-index:-1; }
.vibe-chip span { grid-row:1/3; font-size:11px; opacity:.5; }
.vibe-chip b { font-family:var(--font-display); font-size:clamp(26px,2.5vw,39px); line-height:.95; font-weight:300; letter-spacing:-.04em; }
.vibe-chip em { font-size:11px; font-style:normal; opacity:.62; }
.vibe-chip:hover,.vibe-chip:focus-visible,.vibe-chip.is-active { padding-left:18px; outline:none; }
.vibe-chip:hover::before,.vibe-chip:focus-visible::before,.vibe-chip.is-active::before { width:7px; }
.vibe-chip.is-active b { color:var(--orange); }

/* New sections participate in the ambient background without creating bands. */
.page-home .writing-lab,
.page-home .vibe-lab { background-color: var(--home-bg) !important; }

@media (max-width: 1180px) {
  .case-stack-shell { width:min(68vw,780px); }
  .case-stack-notes { width:145px; }
  .case-stack-notes--right { left:calc(100% + 18px); }
  .case-stack-notes--left { right:calc(100% + 18px); }
  .writing-card { width:clamp(170px,17.5vw,230px); }
}

@media (max-width: 820px) {
  .page-wipe__signature-wrap { width:min(78vw,430px); }
  .page-wipe__signature-stroke { stroke-width:5.7; }
  .header-logo--signature,.header-signature-v5 { width:72px !important; }
  .home-hero-v2__stage { min-height:98svh; }
  .home-hero-v2__headline { padding-top:54px; }
  .home-hero-v2__achievements { margin-top:64px; }
  .page-home .work-scroller--stack .work-track.work-stack-v3 { padding-bottom:0; }
  .case-stack-shell,
  .case-stack-shell--one,
  .case-stack-shell--two,
  .case-stack-shell--three {
    position:relative;
    top:auto;
    width:100%;
    aspect-ratio:auto;
    margin:0 0 30px;
  }
  .case-stack-card,
  .case-stack-card--one,
  .case-stack-card--two,
  .case-stack-card--three {
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:min(60svh,520px) !important;
    transform:none !important;
  }
  .case-stack-notes { position:relative; inset:auto !important; width:auto; margin:12px 0 0; grid-template-columns:repeat(2,1fr); opacity:1; transform:none !important; }
  .case-stack-notes span { font-family:var(--font-body); }
  .case-stack-notes b { font-family:var(--font-display); font-size:26px; }
  .case-stack-notes i { font-size:11px; }
  .writing-lab__head,.vibe-lab__head { grid-template-columns:1fr; }
  .writing-desk {
    height:auto;
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding:10px var(--gutter) 30px;
    width:100%;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .writing-desk::-webkit-scrollbar { display:none; }
  .writing-card,
  .writing-card:nth-child(n) {
    position:relative;
    inset:auto;
    flex:0 0 min(74vw,300px);
    width:auto;
    transform:none;
    scroll-snap-align:center;
  }
  .writing-card:hover,.writing-card:focus-visible { transform:translateY(-4px); }
  .vibe-launchpad { grid-template-columns:1fr; }
  .vibe-launchpad__preview { min-height:62vw; }
  .vibe-chip b { font-size:30px; }
}

@media (prefers-reduced-motion: reduce) {
  .writing-card,.case-stack-card,.case-stack-notes,.vibe-preview,.vibe-chip { transition:none !important; }
  .vibe-preview__meter,.vibe-preview__dial::after,.vibe-preview__orb,.vibe-preview__scribble,.vibe-preview__blocks i { animation:none !important; }
}

/* ========================================================================== 
   V9; story polish: scribble loader, clean card collection, editorial labs
   ========================================================================== */
:root {
  --font-hand: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Noteworthy", cursive;
}

/* 1. Restore the first continuous scribble preloader and use the same mark in
   the header. The double stroke gives it the hand-drawn character from V1. */
.page-wipe__signature-stroke,
.page-wipe__signature-dot { display: none !important; }
.page-wipe__signature-line,
.page-wipe__signature-shadow { display: block !important; }
.page-wipe__signature-wrap { width: min(72vw, 620px) !important; }
.page-wipe__signature { width: 100%; height: auto; overflow: visible; }
.page-wipe__signature-line,
.page-wipe__signature-shadow {
  fill: none;
  stroke: var(--paper);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.page-wipe__signature-line { stroke-width: 5.2; }
.page-wipe__signature-shadow { stroke-width: 7.2; opacity: .16; transform: translate(.7px,.8px); }
.page-wipe.is-writing .page-wipe__signature-shadow { animation: shivaScribbleV9 1.38s cubic-bezier(.62,.02,.2,1) .04s forwards; }
.page-wipe.is-writing .page-wipe__signature-line { animation: shivaScribbleV9 1.42s cubic-bezier(.62,.02,.2,1) forwards; }
.page-wipe.is-written .page-wipe__signature-line,
.page-wipe.is-written .page-wipe__signature-shadow { stroke-dashoffset: 0; }
@keyframes shivaScribbleV9 { to { stroke-dashoffset: 0; } }
.header-logo--signature { width: 82px !important; height: 30px !important; }
.header-signature-v5 { width: 82px !important; height: 30px; overflow: visible; }
.header-signature-v5 path { fill:none; stroke:currentColor; stroke-width:5.1; stroke-linecap:round; stroke-linejoin:round; }

/* 18. Liquid-glass top bar. It stays visually stable over light, grey, orange
   and dark content, so it no longer needs a per-section colour swap. */
.site-header.site-header--untold {
  top: 12px;
  left: max(14px, var(--gutter));
  right: max(14px, var(--gutter));
  width: auto;
  height: 58px;
  padding: 0 10px 0 18px;
  color: var(--ink) !important;
  background: rgba(243,240,231,.46) !important;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 16px;
  box-shadow: 0 9px 32px rgba(41,46,38,.08), inset 0 1px 0 rgba(255,255,255,.56);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
}
.site-header.site-header--untold::before { display:none !important; }
.site-header.site-header--untold[data-theme="dark"],
.site-header.site-header--untold[data-theme="orange"] { color:var(--ink) !important; }
.menu-open .site-header.site-header--untold {
  color: var(--paper) !important;
  background: transparent !important;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}


/* 3–6. Landing: the statement is vertically centred; supporting career copy is
   larger and the achievement line shares the same readable hand font as card
   impact notes. */
@media (min-width: 821px) {
  .home-hero-v2__stage { min-height: 680px; }
  .home-hero-v2__headline {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%,-50%);
    width: min(100%, 1120px);
    padding-top: 0 !important;
    font-size: clamp(86px, 8.4vw, 138px);
    line-height: .79;
  }
  .home-hero-v2__doodle { top: clamp(92px, 11vh, 126px); }
  .home-hero-v2__achievements {
    top: auto !important;
    right: 5.2%;
    bottom: clamp(78px, 9.8vh, 112px);
    width: min(31vw, 430px);
    padding-left: 21px;
  }
  .home-hero-v2__intro {
    font-size: clamp(19px, 1.18vw, 22px) !important;
    line-height: 1.38;
    max-width: 31em;
  }
  .achievement-typewriter--loop {
    margin-top: 15px;
    min-height: 3em;
    font-family: var(--font-hand) !important;
    font-size: clamp(15px, .96vw, 18px) !important;
    line-height: 1.42;
    letter-spacing: -.012em;
  }
}
.achievement-typewriter,
.achievement-typewriter--loop,
.case-stack-notes,
.case-stack-notes b,
.case-stack-notes i { font-family: var(--font-hand) !important; }
.achievement-typewriter__prompt { font-family: var(--font-body); }
.case-stack-notes b { font-size: clamp(25px,2vw,34px); }
.case-stack-notes i { font-size: clamp(13px,1vw,16px); }

/* 6. Minimal animated scroll affordance. */
.home-hero-v2__scroll--center { gap: 9px; }
.scroll-glyph { position:relative; display:grid; justify-items:center; gap:4px; width:22px; height:38px; }
.scroll-glyph__track { position:relative; display:block; width:14px; height:25px; border:1px solid rgba(41,46,38,.55); border-radius:999px; }
.scroll-glyph__track i { position:absolute; left:50%; top:5px; width:3px; height:3px; margin-left:-1.5px; border-radius:50%; background:var(--orange); animation:scrollDotV9 1.65s ease-in-out infinite; }
.scroll-glyph__chevron { width:7px; height:7px; border-right:1px solid rgba(41,46,38,.65); border-bottom:1px solid rgba(41,46,38,.65); transform:rotate(45deg); animation:scrollChevronV9 1.65s ease-in-out infinite; }
@keyframes scrollDotV9 { 0%{transform:translateY(0);opacity:.25} 28%{opacity:1} 75%{transform:translateY(10px);opacity:.8} 100%{transform:translateY(10px);opacity:0} }
@keyframes scrollChevronV9 { 0%,35%{transform:translateY(-2px) rotate(45deg);opacity:.25} 70%{opacity:1} 100%{transform:translateY(2px) rotate(45deg);opacity:.25} }
.home-hero-v2__scroll-line,
.home-hero-v2__scroll-circle { display:none !important; }

/* 7. The intro is one clean statement now. */
.home-intro-v9 { min-height: min(86svh, 820px); align-items:center; }
.home-intro-v9 .home-intro__statement { grid-column: 2 / span 10; max-width: 16ch; margin-inline:auto; text-align:center; }

/* 8. Vertical progress always fills from top to bottom. */
.section-progress__fill { inset:0 0 auto !important; transform-origin: top center !important; }

/* 9. The third project must reach the same collected position before the next
   section can enter. The extra runway lives after the last sticky shell. */
.page-home .work-scroller--stack .work-track.work-stack-v3 { padding-bottom: 72vh !important; }
.case-stack-shell--three { margin-bottom: 0 !important; }
@media (min-width: 821px) {
  .case-stack-shell { top: calc(var(--header-h) + 34px + var(--stack-nudge)); }
  .case-stack-shell--one { --stack-nudge: 0px; }
  .case-stack-shell--two { --stack-nudge: 12px; }
  .case-stack-shell--three { --stack-nudge: 24px; }
}

/* 10–11. Writing now speaks the same editorial language as the rest of the
   site: rules, oversized numbers, paper/ink/orange and a compact filter. */
.writing-lab { overflow:hidden; }
.writing-lab__head { position:relative; }
.writing-filter {
  grid-column: 1 / -1;
  justify-self:end;
  display:inline-flex;
  gap:4px;
  padding:4px;
  margin-top:22px;
  border:1px solid rgba(41,46,38,.18);
  border-radius:999px;
  background:rgba(243,240,231,.48);
}
.writing-filter button {
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--ink);
  padding:8px 13px;
  font:600 10px/1 var(--font-body);
  letter-spacing:.03em;
  cursor:pointer;
  transition:background-color .25s ease,color .25s ease,transform .25s ease;
}
.writing-filter button:hover { transform:translateY(-1px); }
.writing-filter button.is-active { background:var(--ink); color:var(--paper); }
.writing-desk {
  height:auto !important;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  border-top:1px solid rgba(41,46,38,.22);
  border-left:1px solid rgba(41,46,38,.14);
  perspective:none;
}
.writing-card,
.writing-card:nth-child(n) {
  position:relative !important;
  inset:auto !important;
  width:auto !important;
  aspect-ratio:.92;
  padding:22px;
  border:0;
  border-right:1px solid rgba(41,46,38,.14);
  border-bottom:1px solid rgba(41,46,38,.18);
  background:transparent !important;
  color:var(--ink) !important;
  box-shadow:none;
  transform:none !important;
  opacity:1;
  overflow:hidden;
  transition:opacity .26s ease, transform .38s var(--ease), background-color .3s ease;
}
.writing-card::before {
  content:attr(data-writing-kind);
  position:absolute;
  right:13px;
  top:8px;
  font-family:var(--font-display);
  font-size:clamp(62px,6.2vw,96px);
  line-height:1;
  color:rgba(41,46,38,.055);
  text-transform: none;
  pointer-events:none;
}
.writing-card::after { inset:10px; border:1px solid rgba(41,46,38,.08); opacity:1; transform:translate(7px,7px); transition:transform .4s var(--ease),border-color .3s ease; }
.writing-card:hover,
.writing-card:focus-visible { z-index:2; transform:translateY(-8px) !important; background:color-mix(in srgb,var(--orange) 9%,transparent) !important; box-shadow:none; }
.writing-card:hover::after,
.writing-card:focus-visible::after { transform:translate(0,0); border-color:rgba(156,78,59,.55); }
.writing-card strong { font-size:clamp(28px,2.4vw,42px); max-width:8ch; }
.writing-card__type { color:var(--orange); }
.writing-card__arrow { right:18px; bottom:16px; }
.writing-card.is-filtered-out { display:none !important; }

/* 12. Vibe apps self-showcase. No click is needed to understand the range;
   hovering simply brings one thumbnail forward and intensifies its motion. */
.vibe-gallery {
  margin-top:clamp(48px,6vh,74px);
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:minmax(210px,26vw);
  gap:12px;
}
.vibe-tile {
  position:relative;
  grid-column:span 2;
  overflow:hidden;
  min-height:260px;
  border:1px solid rgba(41,46,38,.18);
  border-radius:10px;
  background:var(--paper);
  box-shadow:0 12px 30px rgba(41,46,38,.07);
  transition:transform .48s var(--ease),box-shadow .48s var(--ease),border-color .3s ease;
}
.vibe-tile--wide { grid-column:span 3; }
.vibe-tile:hover { z-index:3; transform:translateY(-8px) rotate(-.25deg); box-shadow:0 28px 70px rgba(41,46,38,.16); border-color:rgba(156,78,59,.62); }
.vibe-tile__thumb { position:absolute; inset:0; overflow:hidden; }
.vibe-tile__meta { position:absolute; z-index:3; left:18px; right:18px; bottom:16px; display:grid; gap:3px; padding-top:42px; background:linear-gradient(180deg,transparent,rgba(20,20,22,.78)); color:var(--paper); }
.vibe-tile__meta span { font-size:9px; letter-spacing:.1em; text-transform: none; opacity:.72; }
.vibe-tile__meta strong { font-family:var(--font-display); font-weight:300; font-size:clamp(25px,2.3vw,40px); line-height:.92; }
.vibe-tile__meta em { font-size:11px; font-style:normal; opacity:.72; }
.vibe-tile--utility .vibe-tile__thumb { background:#202126; }
.mini-window { position:absolute; inset:17% 13% 34%; display:grid; grid-template-columns:34% 1fr 1fr; gap:6px; padding:7px; border:1px solid rgba(243,240,231,.35); }
.mini-window i { background:rgba(243,240,231,.13); }
.mini-meter { position:absolute; left:13%; right:19%; bottom:25%; height:8px; border-radius:999px; background:var(--orange); transform-origin:left; animation:vibeMeter 3.2s ease-in-out infinite alternate; }
.vibe-tile--utility2 .vibe-tile__thumb { background:#e7e4dc; }
.mini-dial { position:absolute; left:15%; top:15%; width:46%; aspect-ratio:1; border:2px solid var(--ink); border-radius:50%; }
.mini-dial::after { content:""; position:absolute; left:50%; top:50%; width:44%; height:2px; background:var(--orange); transform-origin:left; animation:vibeDial 4s ease-in-out infinite alternate; }
.mini-grid { position:absolute; right:12%; top:20%; width:26%; height:48%; border-left:1px solid rgba(41,46,38,.25); background:repeating-linear-gradient(to bottom,rgba(41,46,38,.15) 0 1px,transparent 1px 26px); }
.vibe-tile--utility2 .vibe-tile__meta { color:var(--ink); background:linear-gradient(180deg,transparent,rgba(231,228,220,.96)); }
.vibe-tile--fun1 .vibe-tile__thumb { background:var(--orange); }
.mini-orb { position:absolute; width:46%; aspect-ratio:1; left:12%; top:14%; border:2px solid var(--ink); border-radius:44% 56% 62% 38%/43% 37% 63% 57%; animation:vibeOrb 7s ease-in-out infinite alternate; }
.mini-orb--2 { width:31%; left:54%; top:38%; animation-delay:-2s; }
.vibe-tile--fun1 .vibe-tile__meta { color:var(--ink); background:linear-gradient(180deg,transparent,rgba(156,78,59,.92)); }
.vibe-tile--fun2 .vibe-tile__thumb { background:#f3efe6; }
.mini-scribble { position:absolute; inset:5%; display:grid; place-items:center; font-family:var(--font-hand); font-size:clamp(120px,18vw,250px); color:var(--orange); animation:vibeScribble 5s ease-in-out infinite alternate; }
.vibe-tile--fun2 .vibe-tile__meta { color:var(--ink); background:linear-gradient(180deg,transparent,rgba(243,239,230,.95)); }
.vibe-tile--fun3 .vibe-tile__thumb { background:#6460f7; }
.mini-blocks { position:absolute; inset:14%; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mini-blocks i { background:var(--paper); border-radius:3px; animation:vibeBlock 3.8s var(--ease) infinite alternate; }
.mini-blocks i:nth-child(2){animation-delay:-.7s}.mini-blocks i:nth-child(3){animation-delay:-1.4s}.mini-blocks i:nth-child(4){animation-delay:-2.1s}
.vibe-tile:hover .mini-meter { animation-duration:1.4s; }
.vibe-tile:hover .mini-orb { animation-duration:3.2s; }

/* 2. Agent Management city analogy: one natural-scrolling card that swaps
   City -> Junction -> Camera as it passes through the viewport. Nothing pins. */
.city-story-v9 { position:relative; padding:clamp(100px,12vh,150px) 0 clamp(130px,16vh,190px); background:var(--paper); overflow:hidden; }
.city-story-v9__head { display:grid; grid-template-columns:3fr 9fr; gap:24px; align-items:end; margin-bottom:clamp(48px,6vh,76px); }
.city-story-v9__head .h2 { max-width:11ch; }
.city-story-v9__stage { position:relative; min-height:min(112svh,1040px); display:grid; grid-template-columns:minmax(0,8fr) minmax(290px,4fr); gap:clamp(34px,5vw,74px); align-items:center; }
.city-story-v9__card { position:relative; aspect-ratio:.72; max-height:82svh; overflow:hidden; border:1px solid rgba(41,46,38,.18); border-radius:12px; background:#f1eee5; box-shadow:0 22px 60px rgba(41,46,38,.12); }
.city-story-v9__image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.025); filter:saturate(.92) contrast(1.02); transition:opacity .55s ease,transform .9s var(--ease); }
.city-story-v9__image.is-active { opacity:1; transform:scale(1); }
.city-story-v9__counter { position:absolute; z-index:3; right:18px; top:16px; display:flex; align-items:baseline; gap:5px; color:var(--ink); font-family:var(--font-display); }
.city-story-v9__counter b { font-size:clamp(44px,4.7vw,72px); font-weight:300; }
.city-story-v9__counter i { font-size:12px; font-style:normal; opacity:.55; }
.city-story-v9__copy { position:relative; min-height:310px; }
.city-story-v9__copy article { position:absolute; inset:0; display:grid; align-content:center; gap:15px; opacity:0; transform:translateY(18px); transition:opacity .35s ease,transform .55s var(--ease); pointer-events:none; }
.city-story-v9__copy article.is-active { opacity:1; transform:translateY(0); }
.city-story-v9__copy span { font:700 10px/1 var(--font-body); letter-spacing:.1em; text-transform: none; color:var(--orange); }
.city-story-v9__copy p { font-family:var(--font-display); font-size:clamp(29px,3vw,48px); line-height:.98; letter-spacing:-.042em; }

/* 13–18. The footer is now the only final call-to-action. It remains parked
   behind the document and is revealed by the final orange composition. */
.page-home #intro,
.page-home .work-scroller--stack,
.page-home .writing-lab,
.page-home .vibe-lab,
.page-home .manifesto { background-color:var(--home-bg) !important; }
.page-home .site-footer { background:var(--ink); color:var(--paper); }
.site-footer__top--simple { min-height:72vh; display:flex; align-items:center; padding:var(--gutter); }
.site-footer__title { font-family:var(--font-display); font-weight:300; font-size:clamp(84px,12vw,210px); line-height:.76; letter-spacing:-.06em; text-transform:lowercase; }
.site-footer__bottom--simple { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px var(--gutter) 28px; border-top:1px solid rgba(243,240,231,.18); }
.site-footer__bottom--simple > span { font-size:11px; opacity:.64; }
.back-top--icon { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(243,240,231,.4); color:var(--paper); transition:background-color .25s ease,color .25s ease,transform .3s var(--ease); }
.back-top--icon:hover { background:var(--paper); color:var(--ink); transform:translateY(-4px); }
.back-top--icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* 19. Deliberate hand-drawn marks occupy negative space and draw once. */
.scroll-scribble { position:absolute; z-index:5; width:clamp(90px,10vw,160px); pointer-events:none; opacity:.78; }
.scroll-scribble svg { width:100%; height:auto; overflow:visible; }
.scroll-scribble path { fill:none; stroke:var(--orange); stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
.scroll-scribble.is-visible path { animation:scrollScribbleDraw 1.25s cubic-bezier(.52,.02,.18,1) forwards; }
@keyframes scrollScribbleDraw { to { stroke-dashoffset:0; } }
.scroll-scribble--arrow { right:4%; top:18%; transform:rotate(-8deg); }
.scroll-scribble--loop { left:2%; top:16%; transform:rotate(-12deg); }
.scroll-scribble--zig { right:2%; top:18%; transform:rotate(4deg); }
.scroll-scribble--swirl { left:2%; bottom:8%; transform:rotate(8deg); }
.scroll-scribble--underline { right:7%; bottom:18%; width:clamp(150px,18vw,260px); }
.scroll-scribble--agent-city { left:1%; bottom:10%; }
.scroll-scribble--case-a { right:2%; top:8%; }
.scroll-scribble--case-b { left:2%; top:12%; }
.scroll-scribble--case-c { right:3%; bottom:10%; }
.scroll-scribble--domain-a { right:2%; top:12%; }
.scroll-scribble--domain-b { left:1%; top:10%; }
.scroll-scribble--domain-c { right:2%; bottom:8%; }
#intro,#work,#writing,#vibes,#manifesto,#problem,#discovery,#impact,#alert,#insight,#feedback { position:relative; }

@media (max-width: 1050px) {
  .writing-desk { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vibe-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vibe-tile,.vibe-tile--wide { grid-column:span 1; }
  .city-story-v9__stage { grid-template-columns:1fr 330px; }
}

@media (max-width: 820px) {
  .page-wipe__signature-wrap { width:min(86vw,500px) !important; }
  .site-header.site-header--untold { top:8px; left:8px; right:8px; height:54px; border-radius:14px; }
  .home-hero-v2__headline { position:relative; left:auto; top:auto; transform:none; }
  .home-hero-v2__intro { font-size:18px !important; }
  .achievement-typewriter--loop { font-family:var(--font-hand) !important; font-size:15px !important; }
  .home-intro-v9 { min-height:70svh; }
  .home-intro-v9 .home-intro__statement { grid-column:1/-1; text-align:left; }
  .page-home .work-scroller--stack .work-track.work-stack-v3 { padding-bottom:40px !important; }
  .case-stack-shell { position:relative !important; top:auto !important; width:100%; aspect-ratio:auto; min-height:520px; margin:0 0 26px !important; }
  .case-stack-card,.case-stack-card--one,.case-stack-card--two,.case-stack-card--three { position:relative !important; inset:auto !important; min-height:520px; }
  .case-stack-notes { position:relative; inset:auto !important; width:auto; grid-template-columns:repeat(2,1fr); margin:10px 4px 24px; opacity:1; transform:none !important; }
  .writing-filter { justify-self:start; overflow:auto; max-width:100%; }
  .writing-desk { grid-template-columns:1fr; }
  .writing-card,.writing-card:nth-child(n) { aspect-ratio:auto; min-height:260px; }
  .vibe-gallery { grid-template-columns:1fr; grid-auto-rows:minmax(300px,70vw); }
  .city-story-v9__head { grid-template-columns:1fr; }
  .city-story-v9__stage { min-height:0; grid-template-columns:1fr; }
  .city-story-v9__card { aspect-ratio:.72; max-height:none; }
  .city-story-v9__copy { min-height:250px; }
  .scroll-scribble { display:none; }
  .site-footer__top--simple { min-height:60svh; }
  .site-footer__title { font-size:clamp(70px,24vw,120px); }
}

@media (prefers-reduced-motion: reduce) {
  .page-wipe__signature-line,.page-wipe__signature-shadow { stroke-dashoffset:0 !important; animation:none !important; }
  .scroll-scribble path { stroke-dashoffset:0 !important; animation:none !important; }
}
.site-footer__bottom--simple { justify-content:flex-end !important; }

/* ================================================================
   V10; Agent Management editorial story pass
   ================================================================ */

/* Keep this case study in the paper / ink / orange family. */
.page-case-agent {
  --purple: var(--ink);
  --purple-2: var(--orange);
  --lavender: #ece8df;
}
.page-case-agent .section--ink .reveal-clip { --reveal-bg: var(--ink); }
.page-case-agent .callout-panel { background: var(--ink); }
.page-case-agent .callout-panel.reveal-clip { --reveal-bg: var(--ink); }
.page-case-agent .screen-flow__frame::before {
  background: radial-gradient(ellipse, rgba(156,78,59,.34), transparent 66%);
}

/* The role is told as a set of physical notes rather than two résumé lists. */
.role-notes-section {
  position: relative;
  min-height: clamp(900px, 126svh, 1240px);
  padding: clamp(110px, 13vh, 170px) 0 clamp(120px, 15vh, 190px);
  background: var(--paper);
  overflow: clip;
}
.role-notes-section .editorial-grid-lines,
.agent-analogy-intro .editorial-grid-lines { opacity: .52; }
.role-notes-stage {
  position: relative;
  min-height: min(94svh, 900px);
  display: grid;
  grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr);
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
}
.role-notes-stage__intro { position: relative; z-index: 2; align-self: center; }
.role-notes-stage__headline {
  margin-top: 20px;
  max-width: 8.6ch;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(54px, 6.4vw, 112px);
  line-height: .86;
  letter-spacing: -.055em;
}
.role-notes-stage__intro .copy { max-width: 41ch; margin-top: 28px; }
.role-notes-canvas {
  position: relative;
  min-height: min(78svh, 760px);
  isolation: isolate;
}
.role-note {
  position: absolute;
  width: clamp(210px, 20vw, 320px);
  min-height: clamp(210px, 19vw, 300px);
  padding: clamp(22px, 2.2vw, 34px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  border: 1px solid rgba(41,46,38,.18);
  box-shadow: 0 18px 42px rgba(41,46,38,.12);
  opacity: 0;
  transform: translateY(54px) rotate(var(--note-r, 0deg)) scale(.94);
  transition: opacity .46s ease, transform .8s cubic-bezier(.2,.72,.2,1);
  will-change: transform, opacity;
}
.role-note.is-visible { opacity: 1; transform: translateY(0) rotate(var(--note-r, 0deg)) scale(1); }
.role-note__index { font: 700 11px/1 var(--font-body); letter-spacing: .08em; }
.role-note strong {
  align-self: center;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 2.45vw, 42px);
  line-height: .98;
  letter-spacing: -.035em;
}
.role-note small { font: 600 11px/1.3 var(--font-body); text-transform: none; letter-spacing: .055em; opacity: .68; }
.role-note--orange { --note-r:-3.5deg; left: 2%; top: 5%; background: var(--orange); }
.role-note--yellow { --note-r:2.6deg; right: 4%; top: 2%; background: #edc44f; }
.role-note--paper { --note-r:1.4deg; left: 22%; bottom: 2%; background: #e4dfd2; }
.role-note--ink { --note-r:-2deg; right: 0; bottom: 6%; background: var(--ink); color: var(--paper); }
.role-notes-collab {
  position: absolute;
  left: 0;
  right: 4%;
  bottom: -34px;
  z-index: 5;
  max-width: 72ch;
  margin-left: auto;
  font-family: var(--font-hand);
  font-size: clamp(16px, 1.45vw, 23px);
  line-height: 1.35;
  transform: translateY(18px) rotate(-1deg);
  opacity: 0;
  transition: opacity .5s ease, transform .7s var(--ease);
}
.role-notes-collab span { color: var(--orange); margin-right: 8px; }
.role-notes-collab.is-visible { opacity: .78; transform: translateY(0) rotate(-1deg); }
.scroll-scribble--role { left: 3%; bottom: 5%; width: clamp(130px, 14vw, 230px); }

/* Full-screen editorial beat before the analogy begins. */
.agent-analogy-intro {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--header-h) + 40px) var(--gutter) 70px;
  background: var(--paper);
  overflow: hidden;
}
.agent-analogy-intro__inner { position: relative; z-index: 2; width: min(1180px, 88vw); text-align: center; }
.agent-analogy-intro__inner .eyebrow { margin-bottom: clamp(48px, 8vh, 90px); }
.agent-analogy-intro__inner h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(64px, 8.8vw, 154px);
  line-height: .83;
  letter-spacing: -.058em;
  text-wrap: balance;
}

/* City -> Junction -> Camera should start only after the story enters view. */
.city-story-v9 {
  min-height: 172svh;
  padding-top: clamp(96px, 12vh, 150px);
}
.city-story-v9__stage { min-height: 132svh; align-items: start; padding-top: clamp(36px, 6vh, 70px); }
.city-story-v9__card,
.city-story-v9__copy {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .55s ease, transform .8s var(--ease);
}
.city-story-v9.is-entered .city-story-v9__card,
.city-story-v9.is-entered .city-story-v9__copy { opacity: 1; transform: translateY(0); }
.city-story-v9__image { opacity: 0 !important; transform: scale(1.035); }
.city-story-v9.is-entered .city-story-v9__image.is-active { opacity: 1 !important; transform: scale(1); }
.city-story-v9__copy article { opacity: 0 !important; }
.city-story-v9.is-entered .city-story-v9__copy article.is-active { opacity: 1 !important; }

/* Brainstorm/layout drawings already contain alpha: let them sit directly on
   the paper instead of reintroducing a visible image rectangle. */
.page-case-agent #design .collage { align-items: center; }
.page-case-agent #design .collage__item {
  background: transparent;
  overflow: visible;
  border-radius: 0;
}
.page-case-agent #design .collage__item img {
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: contrast(1.02) saturate(.9);
}
.page-case-agent #design .collage__item--small { transform: translateY(34px) rotate(1.2deg); }
.page-case-agent #design .collage__item--large { transform: rotate(-.8deg); }

/* Roughen the triggered marks so they feel drawn with the same imperfect
   pen as the city illustration instead of clean Bézier decorations. */
.page-case-agent .scroll-scribble { opacity: .64; }
.page-case-agent .scroll-scribble path {
  stroke: rgba(41,46,38,.76);
  stroke-width: 1.05;
  vector-effect: non-scaling-stroke;
}
.page-case-agent .scroll-scribble path.scribble-echo {
  stroke: rgba(41,46,38,.28);
  stroke-width: .75;
  transform: translate(1.5px,-1px);
  transform-origin: center;
}
.page-case-agent .scroll-scribble path.scribble-echo--2 {
  stroke: rgba(156,78,59,.34);
  stroke-width: .7;
  transform: translate(-1px,1.4px);
}

@media (max-width: 900px) {
  .role-notes-section { min-height: auto; padding-block: 100px; }
  .role-notes-stage { min-height: 0; grid-template-columns: 1fr; }
  .role-notes-stage__headline { max-width: 10ch; }
  .role-notes-canvas { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .role-note { position: relative; inset: auto !important; width: auto; min-height: 250px; transform: translateY(30px) rotate(0deg) scale(.97); }
  .role-note.is-visible { transform: translateY(0) rotate(0deg) scale(1); }
  .role-notes-collab { position: relative; inset: auto; grid-column: 1 / -1; margin: 16px 0 0; }
  .agent-analogy-intro { min-height: 88svh; }
  .agent-analogy-intro__inner h2 { font-size: clamp(54px, 12vw, 92px); }
  .city-story-v9 { min-height: auto; }
  .city-story-v9__stage { min-height: 0; padding-top: 0; }
}

@media (max-width: 620px) {
  .role-notes-canvas { grid-template-columns: 1fr; }
  .role-note { min-height: 220px; }
}


/* ============================================================
   V11 TYPOGRAPHY; Cabinet Grotesk + Syne
   Cabinet Grotesk: display titles / editorial headings
   Syne: body copy / UI / labels
   Handwritten accents intentionally keep their scribble families.
   ============================================================ */
:root {
  --font-cabinet: "Cabinet Grotesk", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-syne: "Syne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: var(--font-cabinet);
  --font-geometric: var(--font-cabinet);
  --font-body: var(--font-syne);
  --font-neue: var(--font-syne);
  --font-helvetica-neue: var(--font-syne);
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--font-body) !important;
}

/* Primary editorial hierarchy */
h1,
h2,
h3,
h4,
h5,
h6,
.display-xxl,
.display-xl,
.display-lg,
.display-md,
.h2,
.h3,
.h4,
.lede,
.case-hero__title,
.case-title,
.hero-title,
.case-stack-card__title,
.writing-card__title,
.vibe-tile__meta strong,
.city-story-v9__counter,
.city-story-v9__copy p,
.site-footer__title,
.role-note__title {
  font-family: var(--font-display) !important;
}

/* Cabinet Grotesk is fuller than the previous display face;
   slightly normalize the most aggressive spacing without changing composition. */
.display-xxl { letter-spacing: -.055em; }
.display-xl  { letter-spacing: -.05em; }
.display-lg  { letter-spacing: -.045em; }
.display-md,
.h2          { letter-spacing: -.04em; }
.h3          { letter-spacing: -.03em; }
.h4,
.lede        { letter-spacing: -.02em; }

/* Body and utility text use Syne consistently. */
p,
li,
.copy,
.copy-sm,
.label,
.eyebrow,
.header-role,
.section-progress,
.role-note small,
.city-story-v9__copy span,
.case-stack-notes span,
.achievement-typewriter__prompt {
  font-family: var(--font-body) !important;
}

/* ============================================================
   V12; natural scroll + deliberate sticky moments
   ============================================================ */
html { scroll-behavior: smooth; }

/* 1. Natural document flow everywhere by default. The only desktop sticky
   moments that remain are the project-card stack, technical before/after,
   final workflow, and the footer reveal. */
.page-home .manifesto__sticky,
.page-case-agent .city-story__sticky,
.page-case-agent .current-ux__sticky {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.page-home .manifesto,
.page-case-agent .city-story,
.page-case-agent .current-ux {
  height: auto !important;
}
.page-home .manifesto__sticky { min-height: 100svh !important; }

/* 2. Typed editorial bridge into the city analogy. */
.analogy-typewriter {
  min-height: 1.72em;
  white-space: pre-line;
}
.analogy-typewriter [data-analogy-output] { white-space: pre-line; }
.analogy-type-cursor {
  display: inline-block;
  width: .022em;
  height: .82em;
  margin-left: .045em;
  vertical-align: -.04em;
  background: currentColor;
  animation: analogyCursorBlink .72s steps(1,end) infinite;
}
.analogy-typewriter.is-complete .analogy-type-cursor { animation-duration: 1.05s; opacity: .62; }
@keyframes analogyCursorBlink { 0%,48%{opacity:1} 49%,100%{opacity:0} }

/* 3. Cognitive-load plot: the orange path is literally the same middle
   geometry as the black path, so the two lines coincide rather than drift. */
.cognitive__path,
.cognitive__accent { vector-effect: non-scaling-stroke; }
.cognitive__path { stroke-width: 4.5; }
.cognitive__accent { stroke-width: 6.5; }
.cognitive__chart { background: transparent; border: 1px solid rgba(41,46,38,.12); }

/* 4. ABC gets the original agent illustration, treated as part of the paper. */
.abc-agent-illustration {
  mix-blend-mode: multiply;
  filter: saturate(.88) contrast(1.04);
  max-height: 520px;
  object-fit: contain;
}

/* 5. Technical landscape: one intentional sticky transformation. */
.page-case-agent .before-after {
  height: 210vh !important;
  min-height: 1500px !important;
  position: relative;
  background: var(--paper);
}
.page-case-agent .before-after__sticky {
  position: sticky !important;
  top: 0 !important;
  height: 100svh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  align-items: center;
  padding: calc(var(--header-h) + 34px) var(--gutter) 42px !important;
}
.page-case-agent .before-after__grid {
  width: min(100%, 1420px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 4fr) minmax(0, 8fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
.page-case-agent .before-after__grid > div:first-child { position: relative; min-height: 390px; }
.page-case-agent .before-after__copy-item {
  position: absolute !important;
  inset: 82px 0 auto 0;
  display: block !important;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity .35s ease, transform .55s var(--ease);
}
.page-case-agent .before-after__copy-item.is-active { opacity: 1; transform: translateY(0); }
.page-case-agent .before-after__stage {
  position: relative;
  height: min(72vh, 720px) !important;
  min-height: 460px;
  display: block !important;
  overflow: hidden;
  border: 1px solid rgba(41,46,38,.15);
  border-radius: 16px;
  background: #f5f2e9;
  box-shadow: 0 24px 70px rgba(41,46,38,.10);
}
.page-case-agent .before-after__image {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: 100% !important;
  object-fit: contain;
  padding: clamp(18px, 2vw, 34px);
  opacity: 0 !important;
  transform: scale(1.02) !important;
  transition: opacity .5s ease, transform .8s var(--ease) !important;
}
.page-case-agent .before-after__image.is-active { opacity: 1 !important; transform: scale(1) !important; }
.page-case-agent .before-after__label {
  display: block !important;
  position: absolute;
  z-index: 5;
  right: 18px;
  top: 16px;
  font: 700 9px/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: none;
  color: rgba(41,46,38,.55);
}

/* 6. Brainstorm and layout sketches fly up from below, then settle into their
   final editorial composition. No mask rectangle is used. */
.page-case-agent #design .design-fly {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity .5s ease, transform 1.05s cubic-bezier(.18,.72,.18,1);
}
.page-case-agent #design .design-fly--one { transform: translate3d(-2vw, 30vh, 0) rotate(-4deg) scale(.94); }
.page-case-agent #design .design-fly--two { transform: translate3d(2vw, 38vh, 0) rotate(5deg) scale(.92); }
.page-case-agent #design .design-fly.is-visible { opacity: 1; }
.page-case-agent #design .design-fly--one.is-visible { transform: translate3d(0,0,0) rotate(-.8deg) scale(1); }
.page-case-agent #design .design-fly--two.is-visible { transform: translate3d(0,34px,0) rotate(1.2deg) scale(1); }

/* 7. High fidelity: another deliberate sticky story. Scrolling swaps a single
   screen and a single caption rather than showing all seven at once. */
.page-case-agent .screen-flow {
  height: var(--flow-height, 680vh) !important;
  min-height: 540vh !important;
  position: relative;
  padding: 0 !important;
  background: var(--ink);
}
.page-case-agent .screen-flow__sticky {
  position: sticky !important;
  top: 0 !important;
  height: 100svh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(270px, 3.2fr) minmax(0, 8.8fr) !important;
  align-items: center !important;
  gap: clamp(30px, 4vw, 60px);
  padding: calc(var(--header-h) + 30px) var(--gutter) 34px !important;
}
.page-case-agent .screen-flow__copy { position: relative; min-height: 70vh !important; display: block !important; }
.page-case-agent .screen-flow__copy > .eyebrow,
.page-case-agent .screen-flow__copy > .h3 { position: relative; z-index: 3; }
.page-case-agent .flow-step {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 3vh;
  display: block;
  max-width: 390px;
  opacity: 0;
  transform: translateY(20px);
  border-top: 1px solid rgba(243,240,231,.22);
  padding-top: 18px;
  pointer-events: none;
  transition: opacity .3s ease, transform .5s var(--ease);
}
.page-case-agent .flow-step.is-active { opacity: 1; transform: translateY(0); }
.page-case-agent .screen-flow__frame {
  position: relative;
  min-height: 0 !important;
  height: min(72vh, 760px);
  display: block !important;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
}
.page-case-agent .flow-screen {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: 100% !important;
  object-fit: contain;
  background: #f7f5ee;
  opacity: 0 !important;
  transform: scale(1.012) !important;
  transition: opacity .34s ease, transform .7s var(--ease) !important;
}
.page-case-agent .flow-screen.is-active { opacity: 1 !important; transform: scale(1) !important; }
.page-case-agent .screen-flow__rail {
  display: flex !important;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 7px;
}
.page-case-agent .screen-flow__rail span { width: 4px; height: 24px; border-radius: 99px; background: rgba(243,240,231,.2); transition: background .25s ease, height .3s var(--ease); }
.page-case-agent .screen-flow__rail span.is-active { height: 40px; background: var(--orange); }

/* 8. Impact is split into reach and efficiency. */
.impact-v12 .impact-split { display: grid; gap: clamp(90px, 12vh, 150px); margin-top: clamp(70px, 9vh, 110px); }
.impact-group { border-top: 1px solid rgba(41,46,38,.22); padding-top: 24px; }
.impact-group__head { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 18px; align-items: start; }
.impact-group__head > span { font-family: var(--font-display); font-size: clamp(44px, 5vw, 78px); line-height: .8; color: var(--orange); }
.impact-group__head .h3 { max-width: 16ch; }
.impact-v12 .impact-grid { margin-top: 44px; }
.impact-v12 .impact-grid--reach { grid-template-columns: repeat(3,minmax(0,1fr)); }
.impact-v12 .impact-grid--efficiency { grid-template-columns: repeat(2,minmax(0,1fr)); }
.impact-v12 .impact-grid .impact-card { grid-column: auto !important; min-height: 280px; }
.impact-group__note { margin-top: 14px; max-width: 56ch; }

/* 9. No purple card treatment on Agent Management. */
.page-case-agent { --purple: var(--ink); --purple-2: var(--orange); }
.page-case-agent .journey-card,
.page-case-agent .abc-card,
.page-case-agent .score-card,
.page-case-agent .iteration-card,
.page-case-agent .impact-card,
.page-case-agent .learning-card {
  background: var(--paper);
  color: var(--ink);
  border-color: rgba(41,46,38,.16);
}
.page-case-agent .section--ink .principle { background: transparent; color: var(--paper); border-color: rgba(243,240,231,.44); }
.page-case-agent .callout-panel { background: var(--ink); }

@media (max-width: 900px) {
  html { scroll-behavior: auto; }
  .analogy-typewriter { min-height: 2.5em; }
  .page-case-agent .before-after { height: auto !important; min-height: 0 !important; }
  .page-case-agent .before-after__sticky,
  .page-case-agent .screen-flow__sticky { position: relative !important; height: auto !important; overflow: visible !important; }
  .page-case-agent .before-after__grid,
  .page-case-agent .screen-flow__sticky { grid-template-columns: 1fr !important; }
  .page-case-agent .before-after__grid > div:first-child { min-height: 0; }
  .page-case-agent .before-after__copy-item { position: relative !important; inset: auto; opacity: 1; transform: none; margin-top: 28px; }
  .page-case-agent .before-after__stage { height: auto !important; display: grid !important; gap: 18px; overflow: visible; border: 0; box-shadow: none; background: transparent; }
  .page-case-agent .before-after__image { position: relative !important; inset: auto !important; height: auto !important; opacity: 1 !important; transform: none !important; border: 1px solid rgba(41,46,38,.13); border-radius: 12px; background: #f5f2e9; }
  .page-case-agent .screen-flow { height: auto !important; min-height: 0 !important; padding: 90px 0 !important; }
  .page-case-agent .screen-flow__copy { min-height: 0 !important; display: grid !important; gap: 22px; }
  .page-case-agent .flow-step { position: relative !important; inset: auto; opacity: 1; transform: none; max-width: none; }
  .page-case-agent .screen-flow__frame { height: auto; display: grid !important; gap: 20px; overflow: visible; box-shadow: none; }
  .page-case-agent .flow-screen { position: relative !important; inset: auto !important; height: auto !important; opacity: 1 !important; transform: none !important; border-radius: 10px; }
  .page-case-agent .screen-flow__rail { display: none !important; }
  .impact-v12 .impact-grid--reach,
  .impact-v12 .impact-grid--efficiency { grid-template-columns: 1fr; }
  .impact-group__head { grid-template-columns: 54px minmax(0,1fr); }
}

/* ============================================================
   V13; flow, hierarchy, component consistency, Agent Management
   ============================================================ */

/* Minimal persistent chrome: the signature and menu remain discoverable without
   creating a full-width navigation bar across the composition. */
.site-header.site-header--floating {
  position: fixed !important;
  top: 18px !important;
  left: 22px !important;
  right: 22px !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none;
  z-index: 180;
}
.site-header.site-header--floating::before { display:none !important; }
.site-header--floating .header-logo { pointer-events:auto; }
.site-header--floating .header-logo {
  height: 42px;
  min-width: 92px;
  padding: 7px 14px 6px;
  display:grid;
  place-items:center;
  color: var(--ink) !important;
  background: rgba(243,240,231,.70);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  box-shadow: 0 10px 34px rgba(41,46,38,.08);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.site-header--floating .header-signature-v5 { width:70px; height:24px; }
.site-header--floating .header-actions { display:block !important; }

.menu-open .site-header--floating .header-logo { background: rgba(243,240,231,.88); color:var(--ink)!important; }

/* Content-led menu; no decorative random lines. */





















/* Consistent interactive card grammar across work, writing and vibe apps:
   subtle lift + image zoom + orange arrow/edge. No component-specific orange border. */
.case-stack-card,
.writing-card,
.vibe-tile {
  border:1px solid rgba(41,46,38,.13) !important;
  box-shadow:0 16px 46px rgba(41,46,38,.09) !important;
  transition:transform .42s var(--ease), box-shadow .42s var(--ease) !important;
}
.case-stack-card:hover,
.case-stack-card:focus-visible,
.writing-card:hover,
.writing-card:focus-visible,
.vibe-tile:hover,
.vibe-tile:focus-within {
  transform:translateY(-8px) rotate(-.25deg) !important;
  box-shadow:0 28px 70px rgba(41,46,38,.14) !important;
  border-color:rgba(41,46,38,.13) !important;
}
.case-stack-card__visual img,
.writing-card__thumb img,
.vibe-tile__thumb { transition:transform .6s var(--ease), filter .5s ease; }
.case-stack-card:hover .case-stack-card__visual img,
.writing-card:hover .writing-card__thumb img { transform:scale(1.035); }
.vibe-tile:hover .vibe-tile__thumb { transform:scale(1.025); }
.vibe-tile--fun3 .vibe-tile__thumb { background:#ece7dd !important; }

/* Homepage work cards: editorial paper cards with real project imagery. */
.case-stack-card {
  background:var(--paper) !important;
  color:var(--ink) !important;
  overflow:hidden;
}
.case-stack-card__visual { position:absolute; inset:0 0 36% 0 !important; overflow:hidden; background:#ece8df; }
.case-stack-card__visual img { width:100%; height:100%; object-fit:cover; filter:saturate(.84) contrast(1.03); }
.case-stack-card--three .case-stack-card__visual img { object-fit:contain; padding:5%; mix-blend-mode:multiply; }
.case-stack-card__wash { background:linear-gradient(180deg,transparent 52%,rgba(243,240,231,.92) 68%,var(--paper) 76%) !important; }
.case-stack-card__topline { top:18px !important; left:20px !important; right:20px !important; color:var(--ink) !important; mix-blend-mode:normal !important; }
.case-stack-card__index { top:18px !important; right:18px !important; color:rgba(41,46,38,.78) !important; }
.case-stack-card__summary { left:24px !important; right:24px !important; bottom:24px !important; color:var(--ink)!important; }
.case-stack-card__summary h3 { font-weight:650 !important; font-size:clamp(38px,4vw,62px)!important; line-height:.9!important; }
.case-stack-card__summary p { margin-top:10px; opacity:.72; }

/* Writing cards now have image-led thumbnails rather than blank paper only. */
.writing-desk { min-height:520px !important; }
.writing-card { padding:0 !important; overflow:hidden; background:var(--paper)!important; color:var(--ink)!important; }
.writing-card::before { display:none !important; }
.writing-card::after { display:none !important; }
.writing-card__thumb { position:absolute; left:12px; right:12px; top:12px; height:48%; overflow:hidden; border-radius:9px; background:#e4dfd2; }
.writing-card__thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(243,240,231,.22)); pointer-events:none; }
.writing-card__thumb img { width:100%; height:100%; object-fit:cover; filter:grayscale(.12) saturate(.82) contrast(1.04); }
.writing-card__type { position:absolute; left:18px; top:calc(48% + 26px); }
.writing-card strong { position:absolute; left:18px; right:18px; top:calc(48% + 52px); max-width:11ch!important; font-size:clamp(24px,2.1vw,36px)!important; line-height:.95; }
.writing-card em { position:absolute; left:18px; bottom:18px; }
.writing-card__arrow { right:18px; bottom:15px; color:var(--orange); }
.writing-card:nth-child(7), .writing-card:nth-child(8) { background:var(--paper)!important; color:var(--ink)!important; }

/* Remove the homepage manifesto pin; it is a normal full-screen composition. */
.page-home .manifesto { height:auto !important; min-height:100svh !important; }
.page-home .manifesto__frame { min-height:100svh; display:grid; place-items:center; position:relative; padding:var(--gutter); overflow:hidden; }

/* Footer: social links + useful closing copy. */
.site-footer__top--simple { position:relative; justify-content:space-between; gap:40px; }
.site-footer__note { align-self:flex-end; max-width:390px; margin-bottom:5vh; font-size:clamp(15px,1.2vw,19px); line-height:1.45; opacity:.66; }
.site-footer__bottom--simple { justify-content:space-between !important; }
.footer-socials { display:flex; flex-wrap:wrap; gap:10px; }
.footer-socials a { border:1px solid rgba(243,240,231,.22); border-radius:999px; padding:9px 13px; font-size:12px; transition:background .25s ease,color .25s ease; }
.footer-socials a:hover { background:var(--paper); color:var(--ink); }

/* ---------- Agent Management: normal scroll by default ---------- */
.page-case-agent .section { padding-top:clamp(120px,14vh,180px); padding-bottom:clamp(120px,14vh,180px); }
.page-case-agent .role-notes-section { min-height:0 !important; padding-top:clamp(120px,14vh,170px); padding-bottom:clamp(130px,16vh,200px); }
.page-case-agent .role-notes-stage { min-height:0 !important; }
.page-case-agent .role-notes-canvas { min-height:670px; }

/* More restrained bridge into the analogy. */
.agent-analogy-intro { min-height:92svh !important; padding-block:clamp(130px,17vh,210px)!important; }
.analogy-reveal { display:grid; gap:.04em; }
.analogy-reveal span { display:block; }
.analogy-reveal.reveal { opacity:0; transform:translateY(26px); filter:blur(4px); transition:opacity .72s ease, transform .9s var(--ease), filter .8s ease; }
.analogy-reveal.reveal.is-visible { opacity:1; transform:none; filter:none; }

/* City narrative: only the visual is sticky; the copy itself scrolls naturally.
   The image changes only when the corresponding step crosses the viewport center. */
.city-story-v13 { position:relative; padding:clamp(120px,14vh,180px) 0 clamp(160px,18vh,220px); background:var(--paper); overflow:clip; }
.city-story-v13__head { display:grid; grid-template-columns:3fr 9fr; gap:32px; align-items:end; margin-bottom:clamp(70px,9vh,110px); }
.city-story-v13__head .h2 { max-width:11ch; }
.city-story-v13__stage { display:grid; grid-template-columns:minmax(0,7fr) minmax(320px,5fr); gap:clamp(44px,6vw,94px); align-items:start; }
.city-story-v13__visual { position:sticky; top:clamp(100px,16vh,150px); align-self:start; }
.city-story-v13__card { position:relative; aspect-ratio:.78; overflow:hidden; border:1px solid rgba(41,46,38,.13); border-radius:14px; background:#f1eee5; box-shadow:0 24px 70px rgba(41,46,38,.10); }
.city-story-v13__image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.018); transition:opacity .48s ease, transform .8s var(--ease); }
.city-story-v13__image.is-active { opacity:1; transform:scale(1); }
.city-story-v13__counter { position:absolute; z-index:3; top:16px; right:18px; display:flex; gap:5px; align-items:baseline; font-family:var(--font-display); }
.city-story-v13__counter b { font-size:clamp(40px,4vw,66px); line-height:1; }
.city-story-v13__counter i { font:600 11px/1 var(--font-body); font-style:normal; opacity:.55; }
.city-story-v13__steps { display:grid; }
.city-story-v13__step { min-height:64svh; display:grid; align-content:center; gap:16px; opacity:.34; transform:translateY(18px); transition:opacity .45s ease, transform .6s var(--ease); border-top:1px solid rgba(41,46,38,.12); }
.city-story-v13__step:last-child { border-bottom:1px solid rgba(41,46,38,.12); }
.city-story-v13__step.is-active { opacity:1; transform:none; }
.city-story-v13__step > span { font:700 10px/1 var(--font-body); letter-spacing:.1em; text-transform: none; color:var(--orange); }
.city-story-v13__step h3 { max-width:10ch; font-family:var(--font-display); font-size:clamp(40px,4.5vw,72px); line-height:.9; letter-spacing:-.045em; }
.city-story-v13__step p { max-width:34ch; font-size:clamp(15px,1.15vw,18px); line-height:1.5; opacity:.68; }

/* Admin persona sketch sits on the same paper/ink/orange illustration system. */
.page-case-agent .persona__portrait::before { display:none; }
.page-case-agent .persona__portrait { background:transparent; }
.page-case-agent .persona__portrait img { width:min(100%,460px); max-width:none; filter:none; border-radius:14px; transform:rotate(-1.2deg); box-shadow:0 18px 50px rgba(41,46,38,.10); }

/* Remove redundant mini-labels, keep hierarchy quieter. */
.page-case-agent #discovery .research-summary > div:last-child > .eyebrow { display:none; }

/* Deployment phases as physical sticky notes rather than product cards. */
.journey__notes { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,46px)!important; margin-top:clamp(54px,7vh,84px)!important; align-items:start; }
.journey__notes .journey-note { min-height:330px; border:0!important; border-radius:2px!important; padding:30px!important; box-shadow:0 20px 46px rgba(41,46,38,.12)!important; transform:rotate(var(--jn-r)); position:relative; }
.journey__notes .journey-note::before { content:""; position:absolute; width:52px; height:14px; top:-7px; left:50%; transform:translateX(-50%) rotate(-2deg); background:rgba(255,255,255,.55); border:1px solid rgba(41,46,38,.08); }
.journey__notes .journey-note::after { display:none!important; }
.journey-note--1 { --jn-r:-2deg; background:#f3d66b!important; }
.journey-note--2 { --jn-r:1.4deg; background:#f1ece2!important; margin-top:28px; }
.journey-note--3 { --jn-r:-.8deg; background:#ff8b62!important; margin-top:8px; }
.journey__notes .journey-note h3 { font-size:clamp(34px,3.4vw,50px); line-height:.92; }
.journey__notes .journey-note ul { margin-top:42px; }
.journey__notes .journey-note li { border-color:rgba(41,46,38,.2); }

/* Cognitive-load heading is readable horizontally; chart curve is smooth. */
.page-case-agent .cognitive { grid-template-columns:minmax(300px,5fr) minmax(0,7fr); gap:clamp(56px,7vw,110px); align-items:center; }
.page-case-agent .cognitive > div:first-child .h2 { max-width:13ch; font-size:clamp(48px,5.2vw,82px); line-height:.94; }
.page-case-agent .cognitive__chart { min-height:420px; padding:26px 28px 18px; }
.page-case-agent .cognitive__path,
.page-case-agent .cognitive__accent { stroke-linecap:round; stroke-linejoin:round; }
.page-case-agent .cognitive__accent { stroke-width:6; }

/* Technical landscape: sticky only because the before/after replacement is the interaction.
   Text stays compact and cannot overlap the architecture image. */
.page-case-agent .before-after { height:250svh !important; min-height:1800px !important; background:var(--paper); }
.page-case-agent .before-after__sticky { padding:clamp(100px,13vh,145px) var(--gutter) 48px!important; }
.page-case-agent .before-after__grid { grid-template-columns:minmax(300px,4fr) minmax(0,8fr)!important; gap:clamp(58px,7vw,110px)!important; }
.page-case-agent .before-after__grid > div:first-child { min-height:0!important; align-self:center; }
.before-after__headline { max-width:9ch; margin-top:20px; font-family:var(--font-display); font-weight:600; font-size:clamp(54px,6vw,96px); line-height:.88; letter-spacing:-.055em; }
.before-after__captions { position:relative; min-height:190px; margin-top:34px; }
.page-case-agent .before-after__copy-item { inset:0!important; }
.page-case-agent .before-after__copy-item strong { display:block; margin-bottom:10px; color:var(--orange); font:700 10px/1 var(--font-body); text-transform: none; letter-spacing:.1em; }
.page-case-agent .before-after__copy-item h3 { max-width:21ch; font-family:var(--font-display); font-size:clamp(28px,2.6vw,42px); line-height:.98; letter-spacing:-.035em; }
.page-case-agent .before-after__copy-item p { max-width:38ch; margin-top:12px; font-size:14px; line-height:1.45; opacity:.64; }
.page-case-agent .before-after__stage { height:min(68vh,680px)!important; min-height:440px; }
.page-case-agent .before-after__image { padding:clamp(28px,3vw,46px)!important; }

/* Brainstorming artwork retains transparent/multiply treatment and flies into place. */
.page-case-agent #design { overflow:clip; }
.page-case-agent #design .collage { gap:clamp(30px,5vw,70px); }
.page-case-agent #design .collage__item img { background:transparent!important; mix-blend-mode:multiply; }

/* High-fidelity workflow: keep this intentional sticky story, but move the
   section indicator away from the text and make the copy column readable. */
.page-case-agent .screen-flow { min-height:520vh!important; height:var(--flow-height,610vh)!important; }
.page-case-agent .screen-flow__sticky { grid-template-columns:minmax(310px,4.2fr) minmax(0,7.8fr)!important; gap:clamp(54px,6vw,92px)!important; padding:clamp(100px,12vh,140px) var(--gutter) 58px!important; }
.page-case-agent .screen-flow__copy { min-height:64vh!important; }
.screen-flow__headline { max-width:12ch; margin-top:18px; font-family:var(--font-display); font-size:clamp(42px,4.6vw,74px); line-height:.9; letter-spacing:-.045em; font-weight:500; }
.page-case-agent .flow-step { bottom:1vh; max-width:440px; }
.page-case-agent .flow-step h3 { font-size:clamp(28px,2.8vw,44px); line-height:.96; }
.page-case-agent .screen-flow__frame { height:min(66vh,700px); }
.page-case-agent .screen-flow__rail {
  right:var(--gutter)!important;
  top:auto!important;
  bottom:18px!important;
  transform:none!important;
  flex-direction:row!important;
  gap:8px!important;
}
.page-case-agent .screen-flow__rail span { width:26px!important; height:4px!important; }
.page-case-agent .screen-flow__rail span.is-active { width:46px!important; height:4px!important; }

/* Larger separation between major story beats. */
.page-case-agent #problem,
.page-case-agent #user,
.page-case-agent #discovery,
.page-case-agent #design,
.page-case-agent #impact { scroll-margin-top:100px; }

/* Sketchy annotation quality: slight turbulence, multiple hand passes, purposeful marks. */
.sketch-filter-defs { position:absolute; pointer-events:none; }
.page-case-agent .scroll-scribble { opacity:.48!important; }
.page-case-agent .scroll-scribble path { filter:url(#sketchyLine); stroke-linecap:round; stroke-linejoin:round; stroke-width:1.25!important; }
.page-case-agent .scroll-scribble path.scribble-echo { transform:translate(.7px,.35px) rotate(.2deg)!important; opacity:.48; }
.page-case-agent .scroll-scribble path.scribble-echo--2 { transform:translate(-.7px,-.4px) rotate(-.25deg)!important; opacity:.35; }

/* Explicitly no purple treatment in the card system. */
.page-case-agent .journey-note,
.page-case-agent .abc-card,
.page-case-agent .score-card,
.page-case-agent .iteration-card,
.page-case-agent .impact-card,
.page-case-agent .learning-card { background-color:var(--paper); }

@media (max-width: 980px) {
  
  
  
  
  .city-story-v13__stage { grid-template-columns:1fr; }
  .city-story-v13__visual { position:relative; top:auto; }
  .city-story-v13__step { min-height:auto; padding:50px 0; opacity:1; transform:none; }
  .city-story-v13__image { position:relative; display:none; opacity:1; transform:none; }
  .city-story-v13__image.is-active { display:block; }
  .journey__notes { grid-template-columns:1fr; }
  .journey-note--2,.journey-note--3 { margin-top:0; }
  .page-case-agent .cognitive { grid-template-columns:1fr; }
  .site-footer__top--simple { flex-direction:column; align-items:flex-start; }
  .site-footer__note { align-self:flex-start; margin-bottom:0; }
}

@media (max-width: 760px) {
  .site-header.site-header--floating { top:10px!important; left:10px!important; right:10px!important; }
  .site-header--floating .header-logo { height:40px; min-width:82px; padding-inline:11px; }
  
  .writing-desk { min-height:0!important; }
  .writing-card__thumb { position:relative; height:180px; left:auto; right:auto; top:auto; margin:10px; }
  .writing-card__type,.writing-card strong,.writing-card em { position:relative; inset:auto; display:block; margin:12px 16px 0; }
  .writing-card__arrow { position:absolute; }
  .page-case-agent .before-after { min-height:0!important; height:auto!important; }
  .page-case-agent .before-after__headline { max-width:11ch; }
  .footer-socials { gap:7px; }
}

/* Give the third selected-work card enough runway to fully collect before the
   Writing section arrives. */
@media (min-width: 761px) {
  .page-home .work-scroller--stack .work-track.work-stack-v3 { padding-bottom:110vh !important; }
  .page-home .case-stack-shell { width:min(58vw,760px); margin-bottom:clamp(30vh,320px,38vh); }
  .page-home .case-stack-shell--three { margin-bottom:0 !important; }
}

/* Impact typography cleanup: labels sit beneath the large metrics, never through them. */
.page-case-agent .impact-card__number { line-height:.84; margin:0; }
.page-case-agent .impact-card__label { display:block; margin-top:16px; line-height:1.1; position:relative; }
.page-case-agent .impact-card__foot { margin-top:28px; }

/* ============================================================
   V14; Agent Management polish + coherent card system
   ============================================================ */

/* 1. Persistent chrome without a top nav: two independent liquid-glass islands. */
.site-header.site-header--floating{
  top:18px!important; left:22px!important; right:22px!important;
  background:transparent!important; border:0!important; box-shadow:none!important;
  backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
}
.site-header--floating .header-logo{
  height:44px; min-width:96px; padding:7px 14px 6px;
  background:rgba(243,240,231,.58)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:0 12px 34px rgba(41,46,38,.10), inset 0 1px 0 rgba(255,255,255,.6)!important;
  backdrop-filter:blur(22px) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.35)!important;
}

.site-header[data-theme="dark"] .header-logo{ color:var(--paper)!important; background:rgba(41,46,38,.42)!important; border-color:rgba(255,255,255,.16)!important; }
.site-header[data-theme="dark"] .header-signature-v5 path{ stroke:var(--paper)!important; }
.menu-open .site-header--floating .header-logo{ color:var(--ink)!important; background:rgba(243,240,231,.82)!important; }
.menu-open .site-header--floating .header-signature-v5 path{ stroke:var(--ink)!important; }

/* 2. The analogy title arrives quietly, not like a typewriter or motion demo. */
.agent-analogy-intro{ min-height:88svh!important; }
.analogy-reveal.reveal{
  opacity:0; transform:translateY(18px); filter:none!important;
  clip-path:inset(0 0 12% 0);
  transition:opacity .6s ease, transform .85s cubic-bezier(.2,.72,.2,1), clip-path .85s cubic-bezier(.2,.72,.2,1)!important;
}
.analogy-reveal.reveal.is-visible{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }

/* 3. Agent Management is normal document flow except the three interactions
      that explicitly depend on held context: city visual, technical before/after,
      and the final workflow. */
.page-case-agent .role-notes-section,
.page-case-agent .journey,
.page-case-agent #design,
.page-case-agent #discovery,
.page-case-agent #problem,
.page-case-agent #user,
.page-case-agent #direction,
.page-case-agent #impact,
.page-case-agent #learning{ position:relative!important; height:auto!important; min-height:0!important; }
.page-case-agent .section{
  padding-top:clamp(150px,17vh,220px)!important;
  padding-bottom:clamp(150px,17vh,220px)!important;
}
.page-case-agent .role-notes-section{ padding-top:clamp(150px,17vh,220px)!important; padding-bottom:clamp(180px,20vh,250px)!important; }
.page-case-agent .city-story-v13{ padding-top:clamp(150px,17vh,220px)!important; padding-bottom:clamp(190px,21vh,270px)!important; }
.page-case-agent .before-after{ margin-block:clamp(40px,7vh,90px); }
.page-case-agent .screen-flow{ margin-block:clamp(50px,7vh,100px); }

/* 4. City story: deliberate first frame + later swaps. The visual is allowed to
      stick, but it never changes before its own card is actually visible. */
.city-story-v13__head{ margin-bottom:clamp(90px,11vh,140px)!important; }
.city-story-v13__visual{ top:clamp(112px,15vh,154px)!important; }
.city-story-v13__card{
  aspect-ratio:.84!important;
  border-radius:10px!important;
  border-color:rgba(41,46,38,.12)!important;
  box-shadow:0 22px 62px rgba(41,46,38,.085)!important;
}
.city-story-v13__image{ transition:opacity .36s ease, transform .72s cubic-bezier(.2,.72,.2,1)!important; }
.city-story-v13__step{ min-height:72svh!important; padding-block:8vh; }
.city-story-v13__step h3{ max-width:11ch!important; }
.city-story-v13__step p{ max-width:36ch!important; }

/* 5. Sticky-note role composition: cleaner and more tactile, not a resume table. */
.role-notes-stage{ grid-template-columns:minmax(280px,4fr) minmax(0,8fr)!important; gap:clamp(50px,6vw,100px)!important; }
.role-notes-stage__headline{ max-width:8.2ch!important; font-size:clamp(58px,6vw,98px)!important; }
.role-notes-canvas{ min-height:700px!important; }
.role-note{ border:0!important; box-shadow:0 18px 44px rgba(41,46,38,.11)!important; }
.role-note--paper{ background:#e4dfd2!important; }
.role-note--yellow{ background:#e6d8b8!important; }
.role-note--orange{ background:#9c4e3b!important; }
.role-note--ink{ background:#292e26!important; }

/* 6. Cognitive-load graph: same mathematical curve for both strokes. */
.page-case-agent .cognitive{ grid-template-columns:minmax(360px,5.2fr) minmax(0,6.8fr)!important; gap:clamp(72px,8vw,130px)!important; }
.page-case-agent .cognitive > div:first-child .h2{
  max-width:12.5ch!important;
  font-size:clamp(48px,4.7vw,76px)!important;
  line-height:.97!important;
}
.page-case-agent .cognitive__chart{ min-height:430px!important; border-radius:12px!important; }
.page-case-agent .cognitive__path,
.page-case-agent .cognitive__accent{ stroke-linecap:round!important; stroke-linejoin:round!important; }
.page-case-agent .cognitive__accent{ stroke-width:5.5!important; }

/* 7. Technical landscape: copy stays in a readable column and cannot run under
      the architecture panel. This remains intentionally sticky. */
.page-case-agent .before-after{ height:235svh!important; min-height:1750px!important; overflow:clip!important; }
.page-case-agent .before-after__sticky{
  position:sticky!important; top:0!important; height:100svh!important;
  display:grid!important; align-items:center!important;
  padding:clamp(118px,14vh,150px) var(--gutter) clamp(58px,7vh,84px)!important;
}
.page-case-agent .before-after__grid{
  grid-template-columns:minmax(320px,4.1fr) minmax(0,7.9fr)!important;
  gap:clamp(70px,8vw,132px)!important;
  align-items:center!important;
}
.page-case-agent .before-after__grid > div:first-child{ max-width:520px!important; overflow:visible!important; }
.page-case-agent .before-after__headline{
  max-width:7.7ch!important;
  font-size:clamp(52px,5.35vw,86px)!important;
  line-height:.91!important;
  letter-spacing:-.05em!important;
}
.page-case-agent .before-after__captions{ min-height:210px!important; max-width:430px!important; }
.page-case-agent .before-after__stage{
  width:100%!important; height:min(66vh,650px)!important; min-height:470px!important;
  border-radius:16px!important; overflow:hidden!important; background:#f3f0e8!important;
}
.page-case-agent .before-after__image{ object-fit:contain!important; padding:clamp(22px,2.8vw,42px)!important; }

/* 8. Brainstorm/layout artwork flies in from the lower edge and visually belongs
      to the paper rather than sitting on white rectangles. */
.page-case-agent #design .collage{ margin-top:clamp(76px,9vh,120px)!important; }
.page-case-agent #design .collage__item{ background:transparent!important; border:0!important; box-shadow:none!important; }
.page-case-agent #design .collage__item img{
  background:transparent!important; mix-blend-mode:multiply!important; filter:contrast(1.04) saturate(.75)!important;
}
.page-case-agent #design .design-fly--one{ transform:translate3d(-1vw,38vh,0) rotate(-4deg) scale(.94)!important; }
.page-case-agent #design .design-fly--two{ transform:translate3d(2vw,46vh,0) rotate(5deg) scale(.92)!important; }
.page-case-agent #design .design-fly--one.is-visible{ transform:translate3d(0,0,0) rotate(-.8deg) scale(1)!important; }
.page-case-agent #design .design-fly--two.is-visible{ transform:translate3d(0,36px,0) rotate(1.2deg) scale(1)!important; }

/* 9. Final workflow: one purposeful sticky story; indicator belongs to the
      screen column, not beside the text. */
.page-case-agent .screen-flow{ min-height:520vh!important; height:var(--flow-height,610vh)!important; }
.page-case-agent .screen-flow__sticky{
  position:sticky!important; top:0!important; height:100svh!important;
  grid-template-columns:minmax(330px,4fr) minmax(0,8fr)!important;
  gap:clamp(66px,7vw,112px)!important;
  padding:clamp(112px,13vh,148px) var(--gutter) 74px!important;
}
.page-case-agent .screen-flow__copy{ min-height:62vh!important; padding-right:8px; }
.page-case-agent .screen-flow__headline{
  max-width:10.8ch!important;
  font-size:clamp(42px,4.1vw,68px)!important;
  line-height:.92!important;
}
.page-case-agent .flow-step{ max-width:410px!important; bottom:3vh!important; }
.page-case-agent .screen-flow__frame{ height:min(64vh,680px)!important; border-radius:14px!important; }
.page-case-agent .screen-flow__rail{
  left:calc(35% + 120px)!important; right:var(--gutter)!important;
  top:auto!important; bottom:24px!important; transform:none!important;
  display:flex!important; justify-content:center!important; flex-direction:row!important;
  gap:8px!important; pointer-events:none;
}
.page-case-agent .screen-flow__rail span{ width:28px!important; height:4px!important; border-radius:999px!important; }
.page-case-agent .screen-flow__rail span.is-active{ width:48px!important; height:4px!important; }

/* 10. Purposeful sketch marks use the same ink density as the ABC illustration. */
.page-case-agent .scroll-scribble{ opacity:.52!important; }
.page-case-agent .scroll-scribble svg{ overflow:visible; }
.page-case-agent .scroll-scribble path,
.page-case-agent .scroll-scribble circle{
  fill:none!important; stroke:#292e26!important; stroke-width:1.55!important;
  stroke-linecap:round!important; stroke-linejoin:round!important; filter:url(#sketchyLine);
}
.page-case-agent .scroll-scribble path.scribble-echo,
.page-case-agent .scroll-scribble path.scribble-echo--2{ opacity:.24!important; }

/* 11. Admin sketch is treated as an illustration, not as a photographic persona card. */
.page-case-agent .persona__portrait{ display:grid; place-items:center; min-height:480px; overflow:visible!important; }
.page-case-agent .persona__portrait img{
  width:min(92%,520px)!important; max-height:520px; object-fit:contain;
  box-shadow:none!important; border-radius:0!important; mix-blend-mode:multiply; transform:rotate(-1deg)!important;
}

/* 12. No purple surfaces in Agent Management components. */
.page-case-agent .abc-card,
.page-case-agent .score-card,
.page-case-agent .iteration-card,
.page-case-agent .impact-card,
.page-case-agent .learning-card,
.page-case-agent .journey-note{ background-image:none!important; }
.page-case-agent .score-card,
.page-case-agent .iteration-card,
.page-case-agent .impact-card,
.page-case-agent .learning-card{ background:#f3f0e7!important; color:#292e26!important; }

/* 13. One interactive-card grammar across case studies, writing and vibe apps. */
:root{ --card-radius:16px; --card-border:rgba(41,46,38,.13); --card-shadow:0 18px 52px rgba(41,46,38,.10); --card-shadow-hover:0 30px 80px rgba(41,46,38,.16); }
.case-stack-card,.writing-card,.vibe-tile{
  border:1px solid var(--card-border)!important; border-radius:var(--card-radius)!important;
  box-shadow:var(--card-shadow)!important; overflow:hidden;
  transition:transform .46s cubic-bezier(.2,.72,.2,1),box-shadow .46s ease,border-color .3s ease!important;
}
.case-stack-card:hover,.case-stack-card:focus-visible,
.writing-card:hover,.writing-card:focus-visible,
.vibe-tile:hover,.vibe-tile:focus-within{
  transform:translateY(-9px)!important; box-shadow:var(--card-shadow-hover)!important;
  border-color:rgba(156,78,59,.48)!important;
}
.case-stack-card::after,.writing-card::after,.vibe-tile::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--orange); transform:scaleX(0); transform-origin:left;
  transition:transform .42s cubic-bezier(.2,.72,.2,1); pointer-events:none; z-index:8;
}
.case-stack-card:hover::after,.writing-card:hover::after,.vibe-tile:hover::after,
.case-stack-card:focus-visible::after,.writing-card:focus-visible::after,.vibe-tile:focus-within::after{ transform:scaleX(1); }

/* 14. Case-study cards become designed covers rather than image rectangles. */
.case-stack-card{ background:#292e26!important; color:#f3f0e7!important; }
.case-stack-card__visual{
  inset:54px 22px 31% 22px!important; border-radius:12px!important;
  background:#f4f2eb!important; border:1px solid rgba(255,255,255,.1);
}
.case-stack-card__visual img{ object-fit:cover!important; filter:saturate(.72) contrast(1.03)!important; }
.case-stack-card--one .case-stack-card__visual img,
.case-stack-card--two .case-stack-card__visual img{ object-position:center top; }
.case-stack-card--three .case-stack-card__visual img{ object-fit:contain!important; padding:4%!important; mix-blend-mode:multiply; }
.case-stack-card__wash{
  background:linear-gradient(180deg,transparent 53%,rgba(41,46,38,.12) 62%,#292e26 75%)!important;
}
.case-stack-card__topline{ top:20px!important; left:24px!important; right:24px!important; color:#f3f0e7!important; opacity:.72; }
.case-stack-card__index{ top:18px!important; right:22px!important; color:#f3f0e7!important; opacity:.22; }
.case-stack-card__summary{ left:28px!important; right:28px!important; bottom:25px!important; color:#f3f0e7!important; }
.case-stack-card__summary h3{ font-size:clamp(38px,4vw,64px)!important; line-height:.9!important; }
.case-stack-card__summary p{ max-width:42ch; color:rgba(243,240,231,.67); }
.case-stack-card--one{ box-shadow:inset 5px 0 0 var(--orange),var(--card-shadow)!important; }
.case-stack-card--two{ box-shadow:inset 5px 0 0 #d8d3c8,var(--card-shadow)!important; }
.case-stack-card--three{ box-shadow:inset 5px 0 0 #edc44f,var(--card-shadow)!important; }

/* 15. Writing cards read like small editorial covers and reuse the same motion. */
.writing-desk{ min-height:560px!important; }
.writing-card{ background:#f6f2e9!important; color:#292e26!important; }
.writing-card__thumb{ left:0!important; right:0!important; top:0!important; height:57%!important; border-radius:0!important; background:#e8e4da!important; }
.writing-card__thumb img{ filter:grayscale(.8) contrast(1.13) sepia(.08)!important; }
.writing-card:hover .writing-card__thumb img{ filter:grayscale(.15) contrast(1.06) sepia(0)!important; transform:scale(1.04)!important; }
.writing-card__thumb::after{ background:linear-gradient(180deg,transparent 58%,rgba(246,242,233,.94))!important; }
.writing-card__type{ top:calc(57% + 18px)!important; left:18px!important; color:var(--orange); font-weight:700; }
.writing-card strong{ top:calc(57% + 44px)!important; max-width:12ch!important; }
.writing-card em{ opacity:.58; }

/* 16. The menu is content-led: navigation + work + one purposeful illustration. */





@media(max-width:980px){
  .page-case-agent .before-after{ height:auto!important; min-height:0!important; }
  .page-case-agent .before-after__sticky,
  .page-case-agent .screen-flow__sticky{ position:relative!important; top:auto!important; height:auto!important; overflow:visible!important; }
  .page-case-agent .before-after__grid,
  .page-case-agent .screen-flow__sticky{ grid-template-columns:1fr!important; }
  .page-case-agent .screen-flow{ height:auto!important; min-height:0!important; }
  .page-case-agent .screen-flow__rail{ position:relative!important; left:auto!important; right:auto!important; bottom:auto!important; margin-top:20px; }
  .city-story-v13__visual{ position:relative!important; top:auto!important; }
  .page-case-agent .cognitive{ grid-template-columns:1fr!important; }
}
.case-stack-card::after,.writing-card::after,.vibe-tile::after{display:block!important; inset:auto 0 auto 0!important; top:0!important; border:0!important; opacity:1!important;}

/* ========================================================================== 
   V15; clean stack, calmer Agent Management, horizontal writing shelf
   ========================================================================== */

/* Smooth document flow. The earlier viewport composition pass used proximity
   snapping and 100svh section minimums, which read as sticky even when they
   were not technically pinned. Keep sticky only for purposeful narratives. */
html { scroll-snap-type: none !important; scroll-padding-top: 0 !important; }
.page-home main > section,
.page-case main > section,
.page-home .section,
.page-case-agent .section:not(.before-after) {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}
.page-case-agent .section:not(.before-after),
.page-home .section {
  min-height: 0 !important;
  display: block !important;
  align-items: initial !important;
}
.page-case-agent .section { padding-block: clamp(118px, 14vh, 190px) !important; }
.page-case-agent #problem,
.page-case-agent #user,
.page-case-agent #discovery,
.page-case-agent #direction,
.page-case-agent #design,
.page-case-agent #feedback,
.page-case-agent #impact { padding-block: clamp(140px, 17vh, 230px) !important; }

/* Floating chrome becomes one compact glass cluster in the top-right. */
.site-header.site-header--floating {
  left: auto !important;
  right: clamp(14px, 2vw, 28px) !important;
  top: clamp(12px, 1.6vw, 20px) !important;
  width: auto !important;
  display: inline-flex !important;
  gap: 7px !important;
  justify-content: flex-end !important;
  padding: 5px !important;
  border-radius: 999px !important;
  background: rgba(243,240,231,.54) !important;
  border: 1px solid rgba(255,255,255,.64) !important;
  box-shadow: 0 10px 34px rgba(41,46,38,.08) !important;
  backdrop-filter: blur(18px) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.22) !important;
  pointer-events: auto !important;
}
.site-header--floating .header-logo {
  min-width: 82px !important;
  height: 38px !important;
  padding: 5px 10px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.site-header--floating .header-signature-v5 { width: 64px !important; height: 23px !important; }


/* --- Homepage selected work: reference-like stacked cards ---------------- */
.page-home .work-scroller--stack {
  min-height: 0 !important;
  padding: clamp(120px, 15vh, 190px) 0 clamp(180px, 23vh, 290px) !important;
  overflow: visible !important;
}
.page-home .work-scroller--stack .work-track.work-stack-v2 {
  width: min(100%, 1220px) !important;
  margin: 0 auto !important;
  padding: 0 var(--gutter) 58vh !important;
  overflow: visible !important;
}
.case-stack-shell {
  --stack-y: 12vh;
  position: sticky !important;
  top: var(--stack-y) !important;
  width: min(72vw, 980px) !important;
  margin: 0 auto 48vh !important;
  transform: none !important;
  z-index: 1;
}
.case-stack-shell--one { --stack-y: 11vh; z-index: 1; }
.case-stack-shell--two { --stack-y: 15.5vh; z-index: 2; }
.case-stack-shell--three { --stack-y: 20vh; z-index: 3; margin-bottom: 0 !important; }
.case-stack-card,
.case-stack-card--one,
.case-stack-card--two,
.case-stack-card--three {
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  height: min(58vh, 620px) !important;
  margin: 0 !important;
  transform: none !important;
  border-radius: 26px !important;
  background: #171719 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 26px 80px rgba(25,25,27,.18) !important;
  overflow: hidden !important;
}
.case-stack-card::before { display: none !important; }
.case-stack-card::after { height: 2px !important; }
.case-stack-card__visual {
  inset: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.case-stack-card__visual img {
  object-fit: cover !important;
  filter: saturate(.68) contrast(1.03) !important;
}
.case-stack-card__wash {
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(15,15,17,.08) 18%, rgba(15,15,17,.18) 50%, rgba(15,15,17,.91) 100%) !important;
}
.case-stack-card__topline { top: 22px !important; left: 26px !important; right: 26px !important; }
.case-stack-card__index { display: none !important; }
.case-stack-card__summary { left: 28px !important; right: 28px !important; bottom: 28px !important; width: auto !important; }
.case-stack-card__summary h3 { font-size: clamp(42px, 4.5vw, 70px) !important; max-width: 12ch !important; }
.case-stack-card__summary p { font-size: clamp(13px, 1vw, 16px) !important; max-width: 38ch !important; opacity: .78; }
.case-stack-card:hover,
.case-stack-card:focus-visible { transform: translateY(-5px) !important; border-color: rgba(156,78,59,.36) !important; }
.case-stack-card:hover .case-stack-card__visual img { transform: scale(1.025) !important; }
.case-stack-notes,
.case-stack-notes span,
.case-stack-notes b,
.case-stack-notes i {
  font-family: var(--font-body) !important;
}
.case-stack-notes { width: 190px !important; gap: 9px !important; }
.case-stack-notes b { font-size: clamp(24px, 2vw, 32px) !important; font-weight: 600 !important; letter-spacing: -.03em; }
.case-stack-notes i { font-size: 11px !important; line-height: 1.2; opacity: .68; }
.case-stack-notes--right { left: calc(100% + 26px) !important; }
.case-stack-notes--left { right: calc(100% + 26px) !important; }

/* --- Writing: a single calm shelf using the same visual grammar as Vibe Apps. */
.writing-lab { padding-block: clamp(120px, 15vh, 190px) !important; overflow: hidden; }
.writing-lab__head { margin-bottom: 42px !important; }
.writing-desk {
  min-height: 0 !important;
  display: flex !important;
  gap: 16px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 8px var(--gutter) 34px !important;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.writing-card,
.writing-card:nth-child(n) {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 clamp(250px, 22vw, 330px) !important;
  width: auto !important;
  aspect-ratio: .78 !important;
  min-height: 0 !important;
  padding: 0 !important;
  transform: none !important;
  background: #f4f0e7 !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 42px rgba(41,46,38,.09) !important;
}
.writing-card__thumb { position: absolute !important; inset: 0 !important; height: 61% !important; margin: 0 !important; border-radius: 0 !important; }
.writing-card__thumb img { width:100%; height:100%; object-fit:cover; filter: grayscale(.55) contrast(1.08) saturate(.62) !important; }
.writing-card__thumb::after { background: linear-gradient(180deg, transparent 52%, rgba(244,240,231,.98)) !important; }
.writing-card__type { position:absolute !important; left:18px !important; top:64% !important; color:var(--orange) !important; }
.writing-card strong { position:absolute !important; left:18px !important; right:18px !important; top:71% !important; max-width:13ch !important; font-size:clamp(25px,2.05vw,35px) !important; line-height:.94; }
.writing-card em { position:absolute !important; left:18px !important; bottom:18px !important; margin:0 !important; }
.writing-card__arrow { right:18px !important; bottom:15px !important; }
.writing-card:hover,
.writing-card:focus-visible { transform: translateY(-7px) !important; border-color: rgba(156,78,59,.42) !important; }
.writing-card:hover .writing-card__thumb img { transform: scale(1.025) !important; filter: grayscale(.08) contrast(1.04) saturate(.9) !important; }

/* --- Agent Management: role notes are physical, draggable sticky notes. --- */
.page-case-agent .role-note { cursor: grab; touch-action: none; user-select: none; }
.page-case-agent .role-note.is-dragging { cursor: grabbing; z-index: 30 !important; transition: opacity .2s ease, box-shadow .2s ease !important; box-shadow: 0 30px 80px rgba(41,46,38,.22) !important; }
.page-case-agent .role-note.is-visible {
  transform: translate3d(var(--drag-x,0px), var(--drag-y,0px), 0) rotate(var(--note-r,0deg)) scale(1) !important;
}

/* Admin's jobs are informational, not buttons. */
.page-case-agent .persona__task {
  border: 0 !important;
  border-top: 1px solid rgba(41,46,38,.18) !important;
  border-radius: 0 !important;
  min-height: 108px !important;
  padding: 18px 0 !important;
  background: transparent !important;
  transform: none !important;
}
.page-case-agent .persona__task::before { width: 8px !important; height: 8px !important; }
.page-case-agent .persona__task:hover { background: transparent !important; transform: none !important; }

/* Discovery number aligns with the research copy and removes the old lavender. */
.page-case-agent #discovery .research-summary { align-items: stretch !important; gap: clamp(48px,6vw,92px) !important; }
.page-case-agent #discovery .research-number {
  aspect-ratio: auto !important;
  min-height: 100% !important;
  max-width: 360px;
  background: #f1ede4 !important;
  border: 1px solid rgba(41,46,38,.13);
  border-radius: 14px !important;
  box-shadow: inset 5px 0 0 var(--orange);
}

/* City story: let the illustration enter fully before it pins, and make sure
   swaps happen only after the card is settled at its sticky position. */
.page-case-agent .city-story-v13 { padding-top: clamp(150px,18vh,230px) !important; padding-bottom: clamp(190px,22vh,290px) !important; overflow: visible !important; }
.page-case-agent .city-story-v13__stage { grid-template-columns:minmax(360px,6.8fr) minmax(320px,5.2fr) !important; gap:clamp(58px,7vw,110px) !important; align-items:start !important; }
.page-case-agent .city-story-v13__visual { top: 9vh !important; padding-top: 5vh; }
.page-case-agent .city-story-v13__card {
  width: 100%;
  height: min(76vh, 760px) !important;
  aspect-ratio: auto !important;
  background: var(--paper) !important;
  box-shadow: none !important;
}
.page-case-agent .city-story-v13__image { object-fit: contain !important; background: var(--paper); }
.page-case-agent .city-story-v13__step { min-height: 76svh !important; }

/* Regular sections around the cognitive chart and principles should flow. */
.page-case-agent .cognitive { align-items: start !important; }
.page-case-agent .cognitive__chart { position: relative !important; top: auto !important; }
.page-case-agent #direction .principles { position: relative !important; top: auto !important; }

/* --- Lifecycle: one intentional sticky animation. Stack -> fan -> prioritise. */
.lifecycle-scene {
  position: relative;
  height: 340svh;
  background: #ece8df;
  color: var(--ink);
}
.lifecycle-scene__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: clamp(90px, 11vh, 130px) 0 50px;
}
.lifecycle-scene__title { max-width: 11ch; margin-top: 14px; font-size: clamp(46px,5vw,78px); }
.lifecycle-deck { position: relative; height: min(40vh, 390px); margin-top: clamp(34px,5vh,58px); perspective: 1400px; }
.lifecycle-flip {
  --life-x: 0px;
  --life-y: 0px;
  --life-r: 0deg;
  position: absolute;
  left: 50%;
  top: 0;
  width: min(18vw, 260px);
  height: min(34vh, 330px);
  transform: translate3d(calc(-50% + var(--life-x)), var(--life-y), 0) rotate(var(--life-r));
  opacity: 1;
  transform-style: preserve-3d;
  transition: opacity .45s ease, transform .72s cubic-bezier(.2,.72,.2,1);
}
.lifecycle-flip__inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .62s cubic-bezier(.2,.72,.2,1); }
.lifecycle-flip:hover .lifecycle-flip__inner,
.lifecycle-flip:focus-within .lifecycle-flip__inner { transform: rotateY(180deg); }
.lifecycle-flip__face { position:absolute; inset:0; backface-visibility:hidden; border-radius:14px; padding:20px; border:1px solid rgba(41,46,38,.14); box-shadow:0 18px 48px rgba(41,46,38,.11); }
.lifecycle-flip__front { display:flex; flex-direction:column; justify-content:space-between; background:#f8f5ed; }
.lifecycle-flip:nth-child(2) .lifecycle-flip__front,
.lifecycle-flip:nth-child(4) .lifecycle-flip__front { background:#f2eee5; }
.lifecycle-flip:nth-child(3) .lifecycle-flip__front { background:var(--orange); }
.lifecycle-flip__front strong { font-family:var(--font-display); font-size:clamp(52px,5vw,78px); line-height:.8; font-weight:500; }
.lifecycle-flip__front span { font-size:clamp(16px,1.2vw,20px); font-weight:700; }
.lifecycle-flip__back { transform:rotateY(180deg); background:var(--ink); color:var(--paper); display:grid; align-content:end; gap:14px; }
.lifecycle-flip__back b { font-family:var(--font-display); font-size:clamp(26px,2.4vw,40px); line-height:.95; }
.lifecycle-flip__back p { font-size:13px; line-height:1.48; opacity:.74; }
.lifecycle-scene__conclusion { max-width: 42ch; margin: 28px auto 0; text-align:center; font-size:clamp(18px,1.6vw,25px); line-height:1.4; opacity:0; transform:translateY(18px); transition:opacity .45s ease,transform .55s var(--ease); }
.lifecycle-scene.is-prioritised .lifecycle-scene__conclusion { opacity:1; transform:none; }
.lifecycle-scene.is-prioritised .lifecycle-flip:nth-child(1),
.lifecycle-scene.is-prioritised .lifecycle-flip:nth-child(5) { opacity:.08; transform:translate3d(calc(-50% + var(--life-x)), calc(var(--life-y) + 24px),0) rotate(var(--life-r)) scale(.94); }
.abc-section { padding-top: clamp(190px, 23vh, 300px) !important; padding-bottom: clamp(150px,18vh,230px) !important; }
.abc-section .abc-row { gap: clamp(70px,8vw,130px) !important; align-items:center; }
.abc-section .abc-card { min-height: 210px !important; border-radius:14px !important; transition:transform .45s var(--ease), background .35s ease; }
.abc-section .abc-card:hover { transform:translateY(-7px) rotate(-.4deg); background:color-mix(in srgb,var(--orange) 10%,var(--paper)) !important; }

/* Impact gets separate visual breaths for reach and efficiency. */
.page-case-agent .impact-v12 .impact-split { gap: clamp(160px, 22vh, 280px) !important; }
.page-case-agent .impact-group--efficiency { margin-top: clamp(40px, 6vh, 80px); }

/* Case-study footer reveal mirrors the homepage and adds next destinations. */
.page-case-agent { background: var(--ink); }
.page-case-agent main { position:relative; z-index:2; margin-bottom:100svh; background:var(--paper); }
.page-case-agent .site-footer--case-reveal {
  position: fixed;
  left:0; right:0; bottom:0;
  height:100svh; min-height:100svh;
  z-index:0;
}
.page-case-agent #impact { position:relative; z-index:3; box-shadow:0 36px 80px rgba(41,46,38,.12); }
.footer-next { align-self:end; display:grid; gap:14px; width:min(440px,100%); }
.footer-next__link { display:grid; gap:5px; padding:16px 0; border-top:1px solid rgba(243,240,231,.25); }
.footer-next__link:last-child { border-bottom:1px solid rgba(243,240,231,.25); }
.footer-next__link span { font-size:10px; text-transform: none; letter-spacing:.09em; opacity:.54; }
.footer-next__link strong { font-family:var(--font-display); font-size:clamp(24px,2.4vw,38px); line-height:1; font-weight:500; }

@media (max-width: 980px) {
  .site-header.site-header--floating { right:10px !important; top:10px !important; }
  .case-stack-shell,
  .case-stack-shell--one,
  .case-stack-shell--two,
  .case-stack-shell--three { position:relative !important; top:auto !important; width:100% !important; margin:0 0 24px !important; }
  .case-stack-card { height:min(64svh,600px) !important; }
  .case-stack-notes { position:relative !important; inset:auto !important; width:auto !important; margin:12px 8px 26px !important; grid-template-columns:repeat(2,1fr); opacity:1 !important; transform:none !important; }
  .writing-desk { padding-inline:18px !important; }
  .writing-card { flex-basis:min(78vw,320px) !important; }
  .page-case-agent .city-story-v13__visual { position:relative !important; top:auto !important; padding-top:0; }
  .page-case-agent .city-story-v13__card { height:auto !important; aspect-ratio:.78 !important; }
  .lifecycle-scene { height:auto; padding:120px 0; }
  .lifecycle-scene__sticky { position:relative; height:auto; overflow:visible; padding:0; }
  .lifecycle-deck { height:auto; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .lifecycle-flip { position:relative; left:auto; top:auto; width:100%; height:260px; transform:none !important; opacity:1 !important; }
  .lifecycle-scene__conclusion { opacity:1; transform:none; }
  .page-case-agent main { margin-bottom:0; }
  .page-case-agent .site-footer--case-reveal { position:relative; height:auto; min-height:90svh; }
}

@media (max-width: 620px) {
  .lifecycle-deck { grid-template-columns:1fr; }
  .lifecycle-flip { height:230px; }
}

/* V15.1 small composition corrections */
.page-case-agent .city-story-v13__visual { top: 8vh !important; padding-top: 0 !important; }
.page-case-agent .city-story-v13__card { height: min(80vh, 780px) !important; }
.page-case-agent .cognitive { grid-template-columns:minmax(420px,5fr) minmax(0,7fr) !important; gap:clamp(58px,7vw,110px) !important; }
.page-case-agent .cognitive > div:first-child .h2 { max-width:16.5ch !important; font-size:clamp(44px,4.2vw,70px) !important; line-height:.98 !important; }
.lifecycle-flip:nth-child(1), .lifecycle-flip:nth-child(5) { z-index: 2; }
.lifecycle-flip:nth-child(2), .lifecycle-flip:nth-child(4) { z-index: 3; }
.lifecycle-flip:nth-child(3) { z-index: 5; }

/* ========================================================================== 
   V16; scroll-staged colour changes
   --------------------------------------------------------------------------
   Background changes never happen at a content boundary. When a page moves
   into a new colour family, a deliberately empty transition breath sits
   between the two sections. Its colour is scrubbed by scroll in app.js; the
   following content does not enter until the target colour is fully settled.
   The footer is intentionally excluded from this system.
   ========================================================================== */

.bg-transition-breath {
  position: relative;
  z-index: 2;
  width: 100%;
  height: var(--breath-height, 54svh);
  min-height: 240px;
  overflow: hidden;
  pointer-events: none;
  background: var(--breath-from, var(--paper));
  isolation: isolate;
}

/* Keep the transition visually blank. The global paper grain may continue,
   but no grid, label, reveal, or decorative scribble is introduced here. */
.bg-transition-breath::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.018), rgba(0,0,0,.012));
  opacity: .18;
  pointer-events: none;
}

/* The old homepage ambient variable used to shift while content was visible.
   V16 makes each content-bearing section stable and lets the blank transition
   breaths do the colour work instead. */
.page-home { --home-bg: var(--paper) !important; }
.page-home #intro,
.page-home .work-scroller--stack { background-color: var(--paper) !important; }
.page-home .writing-lab,
.page-home .vibe-lab { background-color: #e4dfd2 !important; }
.page-home .manifesto { background-color: var(--orange) !important; color: var(--ink) !important; }

/* Explicit section tones ensure the colour reached at the end of a transition
   exactly matches the next page composition. Inline JS values are the final
   authority; these declarations make the no-JS fallback coherent as well. */
.page-case-agent .section--paper,
.page-case-agent .role-notes-section,
.page-case-agent .agent-analogy-intro,
.page-case-agent .city-story-v13,
.page-case-agent .case-hero-v2 { background-color: var(--paper); }
.page-case-agent .section--sand,
.page-case-agent .lifecycle-scene { background-color: var(--paper-2); }
.page-case-agent .section--ink { background-color: var(--ink); }
.page-case-agent .screen-flow { background-color: #08070c; }

.page-case-domain .case-hero-v2,
.page-case-domain .section--paper { background-color: var(--paper); }
.page-case-domain .section--sand { background-color: var(--paper-2); }
.page-case-domain .section--lavender,
.page-case-domain .current-ux { background-color: var(--lavender); }
.page-case-domain .section--orange { background-color: var(--orange); }
.page-case-domain .section--ink { background-color: var(--ink); }
.page-case-domain .section--purple { background-color: var(--purple); }
.page-case-domain .screen-flow { background-color: #08070c; }

/* Prevent an older transition declaration from visually blending section
   backgrounds while the user is already reading them. */
.page-home #intro,
.page-home .work-scroller--stack,
.page-home .writing-lab,
.page-home .vibe-lab,
.page-home .manifesto {
  transition: none !important;
}

@media (max-width: 760px) {
  .bg-transition-breath {
    height: min(var(--breath-height, 44svh), 68svh);
    min-height: 190px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-transition-breath {
    height: 24svh;
    min-height: 140px;
    background: var(--breath-to, var(--paper)) !important;
  }
}


/* ========================================================================== 
   V17; continuous page background interpolation
   --------------------------------------------------------------------------
   The page now owns one continuous background plane. Content sections are
   transparent, and the empty transition breaths only define where the global
   page colour should interpolate. This removes visible seams between section
   boxes: the viewport itself changes colour while it is visually empty.
   ========================================================================== */

/* One uninterrupted colour plane for the entire scrolling document. */
#main {
  background: var(--continuous-page-bg, var(--paper)) !important;
  transition: none !important;
  isolation: isolate;
}

/* Top-level content never paints its own rectangular colour block. */
#main > section,
.page-home #intro,
.page-home .work-scroller--stack,
.page-home .writing-lab,
.page-home .vibe-lab,
.page-home .manifesto,
.page-case-agent .section--paper,
.page-case-agent .section--sand,
.page-case-agent .section--ink,
.page-case-agent .section--orange,
.page-case-agent .role-notes-section,
.page-case-agent .agent-analogy-intro,
.page-case-agent .city-story-v13,
.page-case-agent .case-hero-v2,
.page-case-agent .lifecycle-scene,
.page-case-agent .screen-flow,
.page-case-domain .case-hero-v2,
.page-case-domain .section--paper,
.page-case-domain .section--sand,
.page-case-domain .section--lavender,
.page-case-domain .section--orange,
.page-case-domain .section--ink,
.page-case-domain .section--purple,
.page-case-domain .current-ux,
.page-case-domain .screen-flow {
  background-color: transparent !important;
  background-image: none !important;
}

/* Breaths are spatial pauses only. The colour itself lives on #main so there
   is no element edge that can become a visible horizontal seam. */
.bg-transition-breath {
  height: var(--breath-height, 96svh) !important;
  min-height: 72svh !important;
  background: transparent !important;
  overflow: visible;
}
.bg-transition-breath::before { display: none !important; }

/* Major tonal changes deserve a full-screen breath; smaller shifts still get
   enough space that the outgoing content has cleared before colour moves. */
.bg-transition-breath[data-distance="major"] { --breath-height: 118svh !important; }
.bg-transition-breath[data-distance="medium"] { --breath-height: 96svh !important; }
.bg-transition-breath[data-distance="minor"] { --breath-height: 78svh !important; }

@media (max-width: 760px) {
  .bg-transition-breath,
  .bg-transition-breath[data-distance="major"],
  .bg-transition-breath[data-distance="medium"],
  .bg-transition-breath[data-distance="minor"] {
    min-height: 70svh !important;
    height: 88svh !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-transition-breath,
  .bg-transition-breath[data-distance="major"],
  .bg-transition-breath[data-distance="medium"],
  .bg-transition-breath[data-distance="minor"] {
    height: 44svh !important;
    min-height: 44svh !important;
  }
}

/* V18 OFFLINE-SAFE TYPOGRAPHY
   No external font requests are made. Canvas/workspace previews use local fonts when
   available and fall back to system faces, preventing network-disabled toasts. */
:root {
  --font-cabinet: "Cabinet Grotesk", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-syne: "Syne", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ========================================================================== 
   V19; lifecycle clarity, legible signature, compact colour breaths
   ========================================================================== */

/* Header wordmark: readable first, still handwritten. */
.header-logo--signature {
  width: auto !important;
  min-width: 72px;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
}
.header-wordmark {
  display: inline-block;
  font-family: var(--font-hand);
  font-size: 19px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--ink);
  transform: rotate(-2deg);
  text-shadow: 0 .35px 0 currentColor;
}
.header-logo--signature:hover .header-wordmark { transform: rotate(-1deg) translateY(-1px); }

/* Preloader: a single visual journey from left edge -> shiva -> right edge. */
.page-wipe__signature-wrap { width: min(92vw, 1180px) !important; }
.page-wipe__signature--journey { width: 100%; height: auto; overflow: visible; }
.page-wipe__signature--journey .preloader-trace {
  display: block !important;
  fill: none;
  stroke: var(--paper);
  stroke-width: 4.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.page-wipe__signature-shadow { display:none !important; }
.page-wipe.is-writing .preloader-trace--left { animation: preloaderJourney .42s cubic-bezier(.55,.02,.28,1) forwards; }
.page-wipe.is-writing .preloader-trace--name { animation: preloaderJourney 1.02s cubic-bezier(.55,.02,.24,1) .38s forwards; }
.page-wipe.is-writing .preloader-trace--right { animation: preloaderJourney .46s cubic-bezier(.55,.02,.28,1) 1.34s forwards; }
.page-wipe.is-written .preloader-trace { stroke-dashoffset:0; }
@keyframes preloaderJourney { to { stroke-dashoffset:0; } }

/* Lifecycle cards: one calm family. Selection is expressed through motion,
   not by turning the middle card orange. */
.lifecycle-flip__front,
.lifecycle-flip:nth-child(2) .lifecycle-flip__front,
.lifecycle-flip:nth-child(3) .lifecycle-flip__front,
.lifecycle-flip:nth-child(4) .lifecycle-flip__front {
  background: #f5f1e8 !important;
  color: var(--ink) !important;
}
.lifecycle-flip__front::after {
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:14px;
  height:2px;
  border-radius:999px;
  background:var(--orange);
  opacity:.22;
}
.lifecycle-scene__decision {
  width:min(680px, 88vw);
  margin: 14px auto 0;
  position:relative;
  z-index:12;
}
.lifecycle-scene__conclusion {
  max-width: 44ch !important;
  margin: 0 auto !important;
  font-size: clamp(19px,1.55vw,25px) !important;
  line-height:1.35 !important;
}
.lifecycle-why {
  width:min(560px,100%);
  margin:18px auto 0;
  border-top:1px solid rgba(41,46,38,.24);
  border-bottom:1px solid rgba(41,46,38,.24);
}
.lifecycle-why summary {
  list-style:none;
  cursor:pointer;
  padding:13px 2px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:650;
}
.lifecycle-why summary::-webkit-details-marker { display:none; }
.lifecycle-why summary::after { content:"+"; font-size:20px; line-height:1; color:var(--orange); transition:transform .28s ease; }
.lifecycle-why[open] summary::after { transform:rotate(45deg); }
.lifecycle-why__body { padding:0 2px 15px; }
.lifecycle-why__body p { margin:0; max-width:58ch; font-size:13px; line-height:1.55; opacity:.72; }
.lifecycle-scene.is-prioritised .lifecycle-scene__decision { transform:translateY(-10px); }

/* One true viewport background plane. Top-level sections never own a colour
   rectangle, so there is no horizontal seam while scrolling. */
html { --continuous-page-bg: var(--paper); }
body { background: transparent !important; }
body::before {
  content:"";
  position:fixed;
  inset:-2px;
  z-index:-10;
  pointer-events:none;
  background:var(--continuous-page-bg, var(--paper));
}
#main { background: transparent !important; }
#main > section,
#main > .bg-transition-breath { background:transparent !important; box-shadow:none; }
.page-case-agent .screen-flow,
.page-case-agent .screen-flow__sticky,
.page-case-agent .lifecycle-scene,
.page-case-agent .lifecycle-scene__sticky,
.page-case-agent .before-after,
.page-case-agent .before-after__sticky,
.page-case-domain .screen-flow,
.page-case-domain .screen-flow__sticky,
.page-case-domain .current-ux,
.page-case-domain .current-ux__sticky { background:transparent !important; }

/* Faster colour breaths. There is still enough empty space to complete the
   blend before the next composition, but no long blank-screen tax. */
.bg-transition-breath,
.bg-transition-breath[data-distance="major"] { --breath-height: 48svh !important; height:48svh !important; min-height:300px !important; }
.bg-transition-breath[data-distance="medium"] { --breath-height: 36svh !important; height:36svh !important; min-height:240px !important; }
.bg-transition-breath[data-distance="minor"] { --breath-height: 24svh !important; height:24svh !important; min-height:170px !important; }
@media (max-width:760px){
  .bg-transition-breath,
  .bg-transition-breath[data-distance="major"] { height:38svh !important; min-height:230px !important; }
  .bg-transition-breath[data-distance="medium"] { height:30svh !important; min-height:190px !important; }
  .bg-transition-breath[data-distance="minor"] { height:22svh !important; min-height:150px !important; }
  .lifecycle-scene__decision { margin-top:8px; }
}

/* ========================================================================== 
   V20; footer reveal debug fix
   --------------------------------------------------------------------------
   The reveal footer is fixed behind the page, so the scrolling document must
   remain an opaque continuous colour plane. V17/V19 made #main transparent,
   which allowed the footer to show through every section. Keep the same
   scroll-scrubbed colour variable on #main; the intentional 100svh bottom
   margin remains transparent and is the only place where the footer is
   revealed.
   ========================================================================== */
#main {
  position: relative;
  z-index: 2;
  background-color: var(--continuous-page-bg, var(--paper)) !important;
  background-image: none !important;
}

/* The background plane covers the fixed footer during normal scrolling. */
.page-home main,
.page-case-agent main {
  background-color: var(--continuous-page-bg, var(--paper)) !important;
}

/* Keep the footer behind the document, not above it. */
.page-home .site-footer,
.page-case-agent .site-footer--case-reveal {
  z-index: 0 !important;
}

/* On smaller screens the footer returns to normal document flow. */
@media (max-width: 980px) {
  .page-home main,
  .page-case-agent main { margin-bottom: 0 !important; }
  .page-home .site-footer,
  .page-case-agent .site-footer--case-reveal {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 76svh !important;
  }
}

/* ========================================================================== 
   V21; Cabinet Grotesk + Syne typography lock
   The workspace preview deliberately does not make network font requests.
   On a normal deployed page, app shell JS loads Cabinet Grotesk from Fontshare
   and Syne from Google Fonts. If either family is installed locally, it is used
   immediately in the preview as well.
   ========================================================================== */
:root {
  --font-cabinet: "Cabinet Grotesk", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-syne: "Syne", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-cabinet);
  --font-geometric: var(--font-cabinet);
  --font-body: var(--font-syne);
  --font-neue: var(--font-syne);
  --font-helvetica-neue: var(--font-syne);
}

html, body, button, input, textarea, select,
p, li, a, label, small, time, figcaption {
  font-family: var(--font-body) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-xxl,
.display-xl,
.display-lg,
.display-md,
.h2,
.h3,
.h4,
.lede,
.home-hero-v2__headline,
.case-hero__title,
.case-title,
.hero-title,
.case-stack-card__title,
.writing-card__title,
.vibe-tile__meta strong,
.city-story-v9__counter,
.city-story-v9__copy p,
.city-story-v13__counter,
.city-story-v13__step h3,
.before-after__headline,
.before-after__copy-item h3,
.screen-flow__headline,
.lifecycle-flip__front strong,
.lifecycle-flip__back b,
.impact-group__head > span,
.footer-next__link strong,
.site-footer__title,
.role-note__title {
  font-family: var(--font-display) !important;
}

/* Keep intentional handwriting separate from the Cabinet/Syne system. */
.header-wordmark,
.page-wipe__signature-wrap,
.case-stack-notes i,
.scroll-scribble {
  font-family: var(--font-hand) !important;
}

/* Slightly stabilize metrics while webfonts swap in on deployed pages. */
.font-web-enabled body { font-synthesis: none; }


/* ========================================================================== 
   V22; Webfont delivery fix
   Exact Cabinet Grotesk + Syne load on downloaded/local files and deployments.
   OpenAI artifact/canvas preview remains network-safe and uses close fallbacks.
   ========================================================================== */
.font-web-enabled {
  --font-cabinet: "Cabinet Grotesk", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-syne: "Syne", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* The restricted Canvas preview cannot fetch webfonts. These fallbacks are intentionally
   chosen for similar width/texture so the composition stays stable without network toasts. */
.font-preview-safe {
  --font-cabinet: "Avenir Next", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
  --font-syne: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ========================================================================== 
   V23; agent narrative polish, smoother colour plane, Belove signature
   ========================================================================== */
:root{
  --font-belove:"Belove","Segoe Script","Bradley Hand","Snell Roundhand",cursive;
  --font-hand:var(--font-belove);
  --tone-umber:#4a302a;
}

/* Belove is reserved for the personal signature and loader. */
.header-wordmark{
  font-family:var(--font-belove)!important;
  font-size:27px!important;
  line-height:1!important;
  letter-spacing:0!important;
  transform:none!important;
  text-shadow:none!important;
  font-weight:400!important;
}
.site-header--floating .header-logo{min-width:92px!important;padding-inline:12px!important;}

/* Edge-to-edge preloader. It enters from below on internal navigation, then exits upward. */
.page-wipe{z-index:9999!important;}
.page-wipe__signature-wrap--belove{
  width:100vw!important;
  height:210px;
  max-width:none!important;
  position:relative;
  display:grid;
  place-items:center;
  overflow:visible;
}
.page-wipe__signature--belove{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;
}
.page-wipe__signature--belove .preloader-edge{
  fill:none;stroke:var(--paper);stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.preloader-belove{
  position:relative;z-index:2;
  font-family:var(--font-belove)!important;
  font-size:clamp(62px,8vw,126px);
  line-height:1;color:var(--paper);
  transform:rotate(-2deg);
  clip-path:inset(0 100% 0 0);
  opacity:1;
}
.page-wipe.is-writing .preloader-edge--left{animation:v23Trace .52s cubic-bezier(.55,.02,.24,1) forwards;}
.page-wipe.is-writing .preloader-belove{animation:v23Name .86s cubic-bezier(.34,.02,.22,1) .42s forwards;}
.page-wipe.is-writing .preloader-edge--right{animation:v23Trace .54s cubic-bezier(.55,.02,.24,1) 1.18s forwards;}
.page-wipe.is-written .preloader-edge{stroke-dashoffset:0;}
.page-wipe.is-written .preloader-belove{clip-path:inset(0 0 0 0);}
@keyframes v23Trace{to{stroke-dashoffset:0}}
@keyframes v23Name{to{clip-path:inset(0 0 0 0)}}
html.is-ready .page-wipe{transform:translateY(-103%)!important;}
html.is-ready .page-wipe.is-parked-bottom{transform:translateY(103%)!important;transition:none!important;}
html.is-ready.is-leaving .page-wipe.is-parked-bottom{transform:translateY(0)!important;transition:transform .5s cubic-bezier(.2,.75,.2,1)!important;pointer-events:auto!important;}
html.is-ready.is-leaving .page-wipe__signature-wrap{opacity:1!important;transform:none!important;}
@media(max-width:760px){
  .page-wipe__signature-wrap--belove{height:160px;}
  .preloader-belove{font-size:clamp(54px,16vw,86px);}
  .page-wipe__signature--belove .preloader-edge{stroke-width:5;}
}

/* One continuous background plane. Section boxes never paint their own rectangle. */
#main>section,
#main>.bg-transition-breath,
.page-case-agent .city-story-v13,
.page-case-agent .before-after,
.page-case-agent .before-after__sticky,
.page-case-agent .screen-flow,
.page-case-agent .screen-flow__sticky,
.page-case-agent .lifecycle-scene,
.page-case-agent .lifecycle-scene__sticky,
.page-case-domain main>section,
.page-home main>section{
  background-color:transparent!important;
  background-image:none!important;
}
.bg-transition-breath,
.bg-transition-breath[data-distance="major"]{height:22svh!important;min-height:120px!important;background:transparent!important;}
.bg-transition-breath[data-distance="medium"]{height:16svh!important;min-height:90px!important;}
.bg-transition-breath[data-distance="minor"]{height:10svh!important;min-height:70px!important;}
.bg-transition-breath::before{display:none!important;}
@media(max-width:760px){
  .bg-transition-breath,.bg-transition-breath[data-distance="major"]{height:17svh!important;min-height:100px!important;}
  .bg-transition-breath[data-distance="medium"]{height:13svh!important;min-height:80px!important;}
  .bg-transition-breath[data-distance="minor"]{height:9svh!important;min-height:64px!important;}
}

/* Scroll rail: vertical, top-to-bottom, richer hover target + preview. */
.section-progress{right:18px!important;gap:4px!important;z-index:120!important;}
.section-progress__segment{width:4px!important;height:32px!important;transition:width .22s ease,opacity .22s ease!important;}
.section-progress__segment.is-active{width:7px!important;}
.section-progress__segment:hover,.section-progress__segment:focus-visible{width:13px!important;}
.section-progress__segment::after{display:none!important;}
.section-progress__peek{
  position:absolute;right:22px;top:50%;transform:translate(12px,-50%);width:230px;min-height:70px;
  display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;padding:8px;
  border-radius:12px;background:rgba(243,240,231,.94);color:var(--ink);box-shadow:0 16px 45px rgba(0,0,0,.14);
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .3s var(--ease);backdrop-filter:blur(14px);
}
.section-progress__peek img{width:64px;height:54px;object-fit:cover;border-radius:8px;background:#e9e6de;}
.section-progress__peek span{display:grid;gap:3px;min-width:0;}
.section-progress__peek b{font:600 13px/1.1 var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.section-progress__peek small{font:600 9px/1 var(--font-body);text-transform: none;letter-spacing:.08em;opacity:.5;}
.section-progress__segment:hover .section-progress__peek,.section-progress__segment:focus-visible .section-progress__peek{opacity:1;transform:translate(0,-50%);}
.footer-in-view .section-progress{opacity:0!important;pointer-events:none!important;transform:translate(28px,-50%)!important;}

/* Shared micro typography: Syne for section labels, footer navigation and small titles. */
.eyebrow,.label,.footer-next__link span,.footer-next__link strong,.footer-next .eyebrow,
.site-footer__note,.footer-socials a,.section-progress__peek,.case-hero-v2__facts dt,.case-hero-v2__facts dd{
  font-family:var(--font-body)!important;
}
.footer-next__link strong{font-size:clamp(20px,1.7vw,28px)!important;font-weight:650!important;letter-spacing:-.025em!important;}
.footer-next__link:hover,.footer-next__link:focus-visible,.footer-socials a:hover,.footer-socials a:focus-visible{color:var(--orange)!important;}

/* Lifecycle: tighter sticky scene; the decision stays visible inside the composition. */
.lifecycle-scene{height:250svh!important;}
.lifecycle-scene__sticky{padding:clamp(58px,7vh,80px) 0 32px!important;align-items:stretch!important;}
.lifecycle-scene__sticky>.shell{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-items:center;}
.lifecycle-scene__title{max-width:13ch!important;margin-top:8px!important;font-size:clamp(38px,4.2vw,62px)!important;line-height:.94!important;}
.lifecycle-deck{height:min(35vh,330px)!important;margin-top:18px!important;align-self:center;}
.lifecycle-flip{height:min(31vh,286px)!important;width:min(17vw,238px)!important;}
.lifecycle-flip__front strong{font-size:clamp(44px,4.2vw,66px)!important;}
.lifecycle-scene__decision{margin:4px auto 0!important;align-self:end!important;}
.lifecycle-scene__conclusion{font-size:clamp(17px,1.25vw,21px)!important;line-height:1.32!important;}
.lifecycle-why{margin-top:10px!important;}
.lifecycle-why summary{padding:10px 2px!important;}
.lifecycle-why__body p{font-size:12.5px!important;}
@media(max-width:980px){.lifecycle-scene{height:auto!important}.lifecycle-scene__sticky>.shell{height:auto;display:block}.lifecycle-scene__decision{margin-top:24px!important}}

/* ABC composition: illustration and principles belong to the same visual system. */
.abc-section--v23{padding-block:clamp(130px,16vh,210px)!important;}
.abc-v23{display:grid;grid-template-columns:minmax(260px,3.2fr) minmax(280px,4fr) minmax(300px,4.8fr);gap:clamp(34px,5vw,82px);align-items:center;}
.abc-v23__head .h3{max-width:10ch;font-size:clamp(46px,4.7vw,76px);line-height:.94;}
.abc-v23__illustration{display:grid;place-items:center;}
.abc-v23__illustration img{width:min(100%,430px);mix-blend-mode:multiply;filter:contrast(1.05);}
.abc-v23__principles{display:grid;border-top:1px solid rgba(41,46,38,.2);}
.abc-v23__principle{display:grid;grid-template-columns:62px 1fr;gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(41,46,38,.2);transition:padding .35s var(--ease),background .3s ease;}
.abc-v23__principle b{font:600 clamp(38px,4vw,62px)/.8 var(--font-display);color:var(--orange);}
.abc-v23__principle h3{font:600 clamp(26px,2.3vw,38px)/.95 var(--font-display);}
.abc-v23__principle p{margin-top:6px;max-width:28ch;font-size:13px;line-height:1.35;opacity:.63;}
.abc-v23__principle:hover{padding-left:10px;background:linear-gradient(90deg,rgba(156,78,59,.07),transparent 70%);}
@media(max-width:980px){.abc-v23{grid-template-columns:1fr}.abc-v23__illustration{order:3}.abc-v23__head .h3{max-width:14ch}}

/* Technical landscape artwork is blended into the page, not framed as a card. */
.page-case-agent .before-after__stage{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;}
.page-case-agent .before-after__image{
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;
  mix-blend-mode:multiply;filter:contrast(1.04) saturate(.92);
}
.page-case-agent .before-after{height:220svh!important;min-height:1450px!important;}
.page-case-agent .before-after__grid{grid-template-columns:minmax(300px,4.3fr) minmax(0,7.7fr)!important;gap:clamp(70px,8vw,130px)!important;}
.page-case-agent .before-after__headline{max-width:8.5ch!important;font-size:clamp(48px,5.1vw,82px)!important;}

/* Brainstorming and layout are now separate visual beats. */
.design-phase{overflow:clip;}
.design-phase__grid{display:grid;grid-template-columns:minmax(300px,4.6fr) minmax(0,7.4fr);gap:clamp(58px,7vw,110px);align-items:center;}
.design-phase__grid--reverse{grid-template-columns:minmax(0,7.4fr) minmax(300px,4.6fr);}
.design-phase__grid .h2{max-width:13ch;}
.design-phase__grid .copy{max-width:42ch;margin-top:24px;}
.design-phase__art{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;}
.design-phase__art img{width:100%;height:auto;mix-blend-mode:multiply;background:transparent;filter:contrast(1.05);}
@media(max-width:980px){.design-phase__grid,.design-phase__grid--reverse{grid-template-columns:1fr}.design-phase__grid--reverse .design-phase__art{order:2}}

/* Scale story: 95 hand-drawn dots, one compact viewport composition. */
.agent-scale__grid{display:grid;grid-template-columns:minmax(420px,6fr) minmax(300px,6fr);gap:clamp(60px,8vw,120px);align-items:center;}
.agent-scale__dots-wrap{min-height:560px;display:grid;align-content:center;justify-content:center;gap:24px;}
.dot-field--scribble{position:relative!important;right:auto!important;bottom:auto!important;display:grid!important;grid-template-columns:repeat(10,22px)!important;gap:15px!important;}
.dot-field--scribble span{position:relative;width:22px!important;height:22px!important;background:transparent!important;border:2px solid var(--orange);border-radius:48% 52% 46% 54%/55% 44% 56% 45%!important;transform:scale(0) rotate(calc((var(--dot-i) % 7) * 2deg - 6deg))!important;}
.dot-field--scribble span::after{content:"";position:absolute;inset:3px;border:1px solid currentColor;border-radius:55% 45% 52% 48%;opacity:.45;transform:translate(1px,-1px);}
.dot-field--scribble span.is-filled{color:var(--orange);box-shadow:inset 0 0 0 4px var(--orange);}
.dot-field--scribble span.is-empty{border-color:rgba(41,46,38,.18);color:rgba(41,46,38,.18);box-shadow:none;}
.dot-field--scribble.is-visible span{transform:scale(1) rotate(calc((var(--dot-i) % 7) * 2deg - 6deg))!important;opacity:1!important;}
.agent-scale__legend{font:600 11px/1.2 var(--font-body);letter-spacing:.04em;text-transform: none;opacity:.55;}
.agent-scale__legend span{color:var(--orange);}
.agent-scale__copy .problem-stat__number{margin-top:26px;}
.agent-scale__copy .copy{max-width:43ch;margin-top:28px;}
@media(max-width:980px){.agent-scale__grid{grid-template-columns:1fr}.agent-scale__dots-wrap{min-height:420px}.dot-field--scribble{grid-template-columns:repeat(10,16px)!important;gap:10px!important}.dot-field--scribble span{width:16px!important;height:16px!important}}

/* Multiple-source evidence: visible stack + source controls. */
.evidence-sources__grid{display:grid;grid-template-columns:minmax(300px,4.5fr) minmax(0,7.5fr);gap:clamp(60px,8vw,120px);align-items:center;min-height:72svh;}
.evidence-sources__copy .display-md{max-width:11ch;}
.evidence-sources__copy .copy{max-width:46ch;margin-top:28px;opacity:.7;}
.evidence-source-switcher{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px;}
.evidence-source-tab{appearance:none;border:1px solid rgba(243,240,231,.28);background:transparent;color:var(--paper);border-radius:999px;padding:10px 14px;font:600 12px/1 var(--font-body);cursor:pointer;transition:background .25s ease,color .25s ease,border .25s ease;}
.evidence-source-tab span{margin-right:7px;opacity:.5;}
.evidence-source-tab.is-active,.evidence-source-tab:hover{background:var(--orange);border-color:var(--orange);color:var(--ink);}
.evidence-deck{position:relative;height:min(66vh,680px);perspective:1200px;}
.evidence-card{position:absolute;inset:0;border-radius:20px;overflow:hidden;background:#f4f2eb;color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.28);transform:translateY(calc((2 - var(--evidence-rank,2))*-22px)) scale(calc(1 - (2 - var(--evidence-rank,2))*.035));opacity:.72;transition:transform .55s var(--ease),opacity .35s ease;cursor:pointer;}
.evidence-card:nth-child(1){--evidence-rank:0;z-index:1}.evidence-card:nth-child(2){--evidence-rank:1;z-index:2}.evidence-card:nth-child(3){--evidence-rank:2;z-index:3}
.evidence-card.is-active{z-index:7;transform:translateY(0) scale(1);opacity:1;}
.evidence-card img{width:100%;height:calc(100% - 74px);object-fit:cover;object-position:top center;}
.evidence-card figcaption{height:74px;padding:15px 18px;display:flex;justify-content:space-between;align-items:center;gap:18px;font-family:var(--font-body);}
.evidence-card figcaption b{font-size:13px}.evidence-card figcaption span{font-size:11px;opacity:.58;text-align:right;}
@media(max-width:980px){.evidence-sources__grid{grid-template-columns:1fr}.evidence-deck{height:520px}}

/* Admin responsibilities are notes, not clickable product cards. */
.persona__tasks--notes{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:20px!important;align-items:start;}
.persona-job-note{min-height:180px;padding:22px 22px 24px;display:flex;flex-direction:column;background:#f3d66b;color:var(--ink);box-shadow:0 18px 40px rgba(41,46,38,.1);border:0;border-radius:2px;transform:rotate(-1.4deg);}
.persona-job-note--two{background:#f4f0e7;transform:translateY(18px) rotate(1.2deg)}
.persona-job-note--three{background:#ff8a62;transform:translateY(6px) rotate(-.7deg)}
.persona-job-note span{font:700 10px/1 var(--font-body);letter-spacing:.08em;opacity:.55;}
.persona-job-note strong{margin-top:auto;font:600 clamp(23px,2vw,32px)/.98 var(--font-display);}
.persona-job-note small{margin-top:10px;font:500 12px/1.35 var(--font-body);opacity:.68;}
.persona-job-note:hover{transform:translateY(-4px) rotate(0deg)}
@media(max-width:760px){.persona__tasks--notes{grid-template-columns:1fr!important}.persona-job-note--two,.persona-job-note--three{transform:none}}

/* Research findings use larger line-art doodles instead of tiny generic icons. */
.research-insights--scribble .insight-card{min-height:300px;background:#f6f2e9!important;color:var(--ink)!important;border:1px solid rgba(41,46,38,.12);}
.insight-card--scribble svg{width:100px;height:76px;overflow:visible;}
.insight-card--scribble svg path{fill:none;stroke:var(--orange);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:url(#sketchyLine);}
.insight-card--scribble h3{margin-top:auto;font-weight:600;}
.insight-card--scribble .muted{color:var(--ink)!important;opacity:.62;}

/* ZFI predecessor + lessons. */
.zfi-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(300px,5fr);gap:clamp(70px,8vw,130px);align-items:start;}
.zfi-intro .h2{max-width:13ch;}
.zfi-intro>.copy{max-width:52ch;margin-top:28px;opacity:.72;}
.zfi-more{margin-top:36px;border-top:1px solid rgba(243,240,231,.26);border-bottom:1px solid rgba(243,240,231,.26);}
.zfi-more summary{list-style:none;display:flex;justify-content:space-between;padding:17px 0;cursor:pointer;font:650 14px/1 var(--font-body);}
.zfi-more summary::-webkit-details-marker{display:none}.zfi-more summary::after{content:"+";font-size:22px;color:var(--orange)}.zfi-more[open] summary::after{transform:rotate(45deg)}
.zfi-more__body{padding:10px 0 24px;display:grid;gap:24px;}
.zfi-more__body ul{display:grid;gap:12px;padding-left:18px;max-width:66ch;font-size:13px;line-height:1.45;opacity:.72;}
.zfi-more__body img{width:100%;height:auto;border-radius:12px;mix-blend-mode:screen;filter:grayscale(1) invert(1) contrast(.86);opacity:.78;}
.zfi-learnings{display:grid;gap:16px;}
.zfi-learning-card{padding:22px;border:1px solid rgba(243,240,231,.2);border-radius:14px;background:rgba(243,240,231,.04);}
.zfi-learning-card span{font:700 10px/1 var(--font-body);letter-spacing:.1em;color:var(--orange)}
.zfi-learning-card h3{margin-top:52px;font:600 clamp(30px,3vw,48px)/.95 var(--font-display);}
.zfi-learning-card p{margin-top:14px;max-width:34ch;font-size:13px;line-height:1.45;opacity:.62;}
@media(max-width:980px){.zfi-layout{grid-template-columns:1fr}.zfi-learnings{margin-top:24px}}

/* Release trade-offs: paper cards with orange accents, not orange tiles. */
.balance__feature{background:rgba(243,240,231,.78)!important;color:var(--ink)!important;border:1px solid rgba(41,46,38,.13);display:flex!important;flex-direction:column;justify-content:space-between;gap:20px;}
.balance__feature span{font:700 10px/1 var(--font-body);color:var(--orange);letter-spacing:.08em;}

/* Adoption cards: four signals with more breathing room. */
.impact-grid--reach{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;}
.impact-grid--reach .impact-card{min-height:300px!important;}
.impact-v12 .impact-split{gap:clamp(190px,26vh,340px)!important;}
@media(max-width:760px){.impact-grid--reach{grid-template-columns:1fr!important}.impact-v12 .impact-split{gap:120px!important}}

/* Epilogue is a distinct warm charcoal, not footer-black. */
.epilogue-shift{color:var(--paper);}
.epilogue-shift .callout-panel{background:transparent!important;border:1px solid rgba(243,240,231,.12);}
.epilogue-shift .callout-panel__media img{mix-blend-mode:screen;filter:grayscale(.2) brightness(.78);}

/* Footer chrome. */
.site-footer .section-progress{display:none!important;}
.site-footer__title{font-family:var(--font-display)!important;}
.footer-next .eyebrow,.footer-next__link span,.footer-next__link strong{font-family:var(--font-body)!important;}

/* Keep transitions/section seams invisible even if legacy section rules carry !important. */
.page-home #main>section,.page-case-agent #main>section,.page-case-domain #main>section{background-color:transparent!important;}
.lifecycle-why{opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .45s var(--ease);}
.lifecycle-scene.is-prioritised .lifecycle-why{opacity:1;transform:none;}
@media(max-width:980px){.lifecycle-why{opacity:1;transform:none;}}
/* Page-to-page choreography: old page yields upward while the orange loader rises from below; new page settles up as loader exits. */
#main{will-change:transform;}
html.js:not(.is-ready) #main{transform:translateY(6vh);}
html.is-ready #main{transform:translateY(0);transition:transform .72s cubic-bezier(.2,.75,.2,1);}
html.is-ready.is-leaving #main{transform:translateY(-10vh);transition:transform .5s cubic-bezier(.2,.72,.2,1);}
@media(prefers-reduced-motion:reduce){html.js:not(.is-ready) #main,html.is-ready #main,html.is-ready.is-leaving #main{transform:none!important;transition:none!important;}}

/* ========================================================================
   V24; pitch first, mature line art, interactive cognitive load, bookshelf
   ======================================================================== */

/* Previous hand-drawn Shiva signature: one flowing word between two wave lines. */
.page-wipe__signature-wrap--wave{
  width:100vw!important; max-width:none!important; height:240px!important;
  display:grid!important; place-items:center!important;
}
.page-wipe__signature--wave{width:100vw!important;height:240px!important;overflow:visible!important;}
.page-wipe__wave,.page-wipe__signature-line-v24,.page-wipe__signature-shadow-v24{
  fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.page-wipe__wave{stroke:rgba(41,46,38,.82);stroke-width:3.2;}
.page-wipe__signature-line-v24{stroke:var(--ink);stroke-width:4.9;}
.page-wipe__signature-shadow-v24{stroke:rgba(41,46,38,.13);stroke-width:7.2;}
.page-wipe.is-writing .page-wipe__wave--lead{animation:v24WaveDraw .56s cubic-bezier(.45,.04,.22,1) forwards;}
.page-wipe.is-writing .page-wipe__signature-line-v24{animation:v24WaveDraw 1.02s cubic-bezier(.45,.04,.18,1) .46s forwards;}
.page-wipe.is-writing .page-wipe__signature-shadow-v24{animation:v24WaveDraw 1.02s cubic-bezier(.45,.04,.18,1) .44s forwards;}
.page-wipe.is-writing .page-wipe__wave--tail{animation:v24WaveDraw .64s cubic-bezier(.45,.04,.22,1) 1.34s forwards;}
.page-wipe.is-written .page-wipe__wave,.page-wipe.is-written .page-wipe__signature-line-v24,.page-wipe.is-written .page-wipe__signature-shadow-v24{stroke-dashoffset:0;}
@keyframes v24WaveDraw{to{stroke-dashoffset:0}}
.page-wipe__signature-wrap--belove,.preloader-belove,.page-wipe__signature--belove{display:none!important;}
.header-logo--signature{width:84px!important;height:34px!important;display:grid!important;place-items:center!important;overflow:visible!important;}
.header-signature-v24{width:78px;height:30px;overflow:visible;color:var(--ink);transition:transform .28s var(--ease),opacity .2s ease;}
.header-signature-v24 path{fill:none;stroke:currentColor;stroke-width:5.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
.header-logo--signature:hover .header-signature-v24{transform:translateY(-1px) rotate(-.7deg);}
.menu-open .header-signature-v24{color:var(--paper);}
@media(max-width:760px){.page-wipe__signature-wrap--wave,.page-wipe__signature--wave{height:180px!important}.header-logo--signature{width:72px!important}.header-signature-v24{width:68px}}

/* Pitch before role. */
.pitch-v24{padding-top:clamp(100px,14vh,180px)!important;padding-bottom:clamp(120px,16vh,210px)!important;}
.pitch-v24__inner{display:grid;gap:clamp(70px,9vh,120px);}
.pitch-v24__top{display:grid;grid-template-columns:minmax(0,5fr) minmax(520px,7fr);gap:clamp(56px,7vw,112px);align-items:center;}
.pitch-v24__copy .h2{max-width:12ch;}
.pitch-v24__copy .copy{max-width:52ch;margin-top:28px;}
.pitch-v24__screen{margin:0;overflow:hidden;border-radius:clamp(18px,2vw,30px);background:var(--ink);box-shadow:0 28px 78px rgba(41,46,38,.15);}
.pitch-v24__screen img{display:block;width:100%;height:auto;object-fit:cover;filter:saturate(.96) contrast(1.02);}
.pitch-v24__metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,44px);border-top:1px solid rgba(41,46,38,.18);padding-top:30px;}
.pitch-metric{display:grid;align-content:start;gap:8px;min-height:170px;padding-right:20px;border-right:1px solid rgba(41,46,38,.13);}
.pitch-metric:last-child{border-right:0;}
.pitch-metric strong{font:650 clamp(50px,5vw,84px)/.82 var(--font-display);letter-spacing:-.055em;}
.pitch-metric--quote strong{font-size:clamp(38px,4.2vw,68px);}
.pitch-metric b{font:650 clamp(17px,1.5vw,23px)/1.05 var(--font-body);letter-spacing:-.025em;}
.pitch-metric span{max-width:26ch;font:500 12px/1.45 var(--font-body);opacity:.58;}
@media(max-width:1000px){.pitch-v24__top{grid-template-columns:1fr}.pitch-v24__metrics{grid-template-columns:repeat(2,1fr)}.pitch-metric:nth-child(2){border-right:0}}
@media(max-width:620px){.pitch-v24__metrics{grid-template-columns:1fr}.pitch-metric{border-right:0;border-bottom:1px solid rgba(41,46,38,.12);padding-bottom:24px;min-height:0}}

/* 95k dots retain their reveal, then breathe very subtly instead of sitting static. */
.dot-field--scribble.is-visible .is-filled{animation:dotBreatheV24 5.8s ease-in-out infinite;animation-delay:calc((var(--dot-i) % 13) * -170ms);}
.dot-field--scribble.is-visible .is-filled:nth-child(3n){animation-duration:6.7s}.dot-field--scribble.is-visible .is-filled:nth-child(5n){animation-duration:7.6s}
@keyframes dotBreatheV24{0%,72%,100%{translate:0 0;filter:none}82%{translate:0 -2px;filter:drop-shadow(0 3px 5px rgba(156,78,59,.16))}90%{translate:1px 0}}

/* Why it mattered: two verified source captures, obviously swappable. */
.evidence-source-switcher{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:420px;}
.evidence-card img{object-position:top center!important;}
.evidence-deck{min-height:min(72vh,720px);}

/* Adnan's jobs are actual sticky notes: irregular edges, tape and loose rotation. */
.persona__tasks--notes{gap:18px!important;align-items:start!important;}
.persona-job-note{position:relative!important;border-radius:6px 15px 8px 13px!important;clip-path:polygon(1% 4%,98% 0,100% 94%,96% 100%,2% 97%,0 8%);box-shadow:0 20px 36px rgba(41,46,38,.12)!important;min-height:230px!important;padding:26px 24px 22px!important;}
.persona-job-note::before{content:"";position:absolute;top:-10px;left:50%;width:64px;height:22px;background:rgba(238,223,176,.72);box-shadow:0 1px 0 rgba(41,46,38,.08);transform:translateX(-50%) rotate(-2deg);mix-blend-mode:multiply;}
.persona-job-note--one{transform:rotate(-2.3deg)!important}.persona-job-note--two{transform:translateY(16px) rotate(1.5deg)!important}.persona-job-note--three{transform:translateY(3px) rotate(-.8deg)!important}
.persona-job-note:hover{transform:translateY(-8px) rotate(.2deg)!important;}

/* Mature line-art language used in research and learnings. */
.system-scribble-icon{width:112px!important;height:82px!important;overflow:visible;}
.system-scribble-icon path,.system-scribble-icon rect,.system-scribble-icon circle{fill:none;stroke:var(--ink);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:url(#sketchyLine);}
.system-scribble-icon .accent{stroke:var(--orange);stroke-width:2.9;}
.research-insights--scribble .insight-card{padding:30px!important;min-height:320px!important;}
.insight-card--scribble h3{font-family:var(--font-display)!important;font-size:clamp(28px,2.3vw,38px)!important;line-height:.98!important;letter-spacing:-.035em!important;}
.insight-card--scribble .copy-sm{max-width:31ch;font-size:13px;line-height:1.5;}

/* Interactive cognitive-load chart. */
.cognitive-v24{padding-top:clamp(110px,14vh,190px)!important;padding-bottom:clamp(120px,15vh,210px)!important;}
.cognitive-v24__layout{display:grid;grid-template-columns:minmax(290px,4fr) minmax(0,8fr);gap:clamp(60px,8vw,140px);align-items:center;}
.cognitive-v24__head .h2{max-width:11ch}.cognitive-v24__head .copy{max-width:43ch;margin-top:24px;}
.cognitive-v24__chart{position:relative;min-width:0;padding:18px 0 56px;}
.cognitive-v24__chart svg{display:block;width:100%;height:auto;overflow:visible;}
.cog-axis{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;}
.cog-area{fill:url(#cogAreaV24);}
.cog-curve,.cog-medium,.cog-high{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
.cog-curve{stroke:var(--ink);stroke-width:5;}
.cog-medium{stroke:#e6d8b8;stroke-width:7;}
.cog-high{stroke:var(--orange);stroke-width:7;}
.cog-label,.cog-y{font:550 16px/1 var(--font-body);fill:var(--ink);}.cog-y{font-size:14px;opacity:.7}.cog-key-label{font:650 11px/1 var(--font-body);fill:var(--ink);opacity:.62;text-transform: none}.cog-key--medium{fill:#e6d8b8}.cog-key--high{fill:var(--orange)}
.cog-hotspot{position:absolute;left:var(--x);top:var(--y);width:26px;height:26px;translate:-50% -50%;border:0;background:transparent;padding:0;cursor:pointer;z-index:4;}
.cog-hotspot span{position:absolute;inset:4px;border-radius:50%;background:#f3f0e7;border:3px solid var(--orange);box-shadow:0 0 0 5px rgba(156,78,59,.09);animation:cogPulse 2.8s ease-in-out infinite;}
.cog-hotspot--medium span{border-color:#e6d8b8;box-shadow:0 0 0 5px rgba(230,216,184,.12);}
.cog-hotspot:nth-of-type(2) span{animation-delay:-.7s}.cog-hotspot:nth-of-type(3) span{animation-delay:-1.4s}
@keyframes cogPulse{0%,100%{transform:scale(.94)}50%{transform:scale(1.12)}}
.cog-tooltip{position:absolute;left:50%;bottom:0;translate:-50% 0;width:min(88%,620px);min-height:42px;padding:11px 15px;border:1px solid rgba(41,46,38,.13);border-radius:999px;background:rgba(243,240,231,.86);backdrop-filter:blur(12px);font:550 12px/1.35 var(--font-body);text-align:center;box-shadow:0 12px 30px rgba(41,46,38,.08);transition:opacity .2s ease,transform .25s var(--ease);}
.cog-tooltip.is-active{transform:translateY(-3px);}
@media(max-width:980px){.cognitive-v24__layout{grid-template-columns:1fr}.cognitive-v24__head .h2{max-width:15ch}}

/* ZFI: concise hierarchy; text-only disclosure. */
.zfi-section--v24 .zfi-intro>.copy{max-width:44ch!important;font-size:15px!important;line-height:1.55!important;}
.zfi-section--v24 .zfi-more__body{padding-bottom:28px!important;}
.zfi-section--v24 .zfi-more__body ul{font-size:14px!important;line-height:1.5!important;gap:10px!important;}
.zfi-section--v24 .zfi-more__body img{display:none!important;}
.zfi-section--v24 .zfi-learning-card h3{margin-top:34px!important;}

/* Technical landscape: the white artboards dissolve into the page. */
.page-case-agent .before-after__stage{isolation:auto!important;}
.page-case-agent .before-after__image{mix-blend-mode:multiply!important;filter:contrast(1.07) saturate(.9)!important;opacity:.98;}
.page-case-agent .before-after__image--after{background:transparent!important;}

/* Shared feature typography and roadmap accents stay inside the Cabinet/Syne system. */
.balance__feature{font:600 clamp(18px,1.8vw,26px)/1.05 var(--font-body)!important;letter-spacing:-.025em!important;}
.roadmap__fill{background:var(--orange)!important;}
.roadmap__node.is-done{background:var(--orange)!important;border-color:var(--orange)!important;}
.roadmap__node{border-color:rgba(156,78,59,.5)!important;}

/* Learning notes behave like the draggable role notes, but with mature line-art icons. */
.learning-v24{display:grid;grid-template-columns:minmax(260px,4fr) minmax(0,8fr);gap:clamp(58px,7vw,118px);align-items:start;}
.learning-v24__intro .h2{max-width:12ch;margin-top:18px;}
.learning-notes{min-height:560px;position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding-top:22px;}
.learning-note{position:relative!important;inset:auto!important;transform:translate(var(--drag-x,0),var(--drag-y,0)) rotate(var(--note-r,0deg))!important;min-height:255px!important;padding:24px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:16px!important;cursor:grab;box-shadow:0 20px 40px rgba(41,46,38,.1)!important;clip-path:polygon(1% 3%,98% 0,100% 96%,96% 100%,2% 97%,0 8%);border-radius:8px 14px 7px 12px!important;}
.learning-note.is-dragging{cursor:grabbing;z-index:12!important;box-shadow:0 30px 60px rgba(41,46,38,.18)!important;}
.learning-note .system-scribble-icon{width:84px!important;height:62px!important;}
.learning-note strong{margin-top:auto!important;font:650 clamp(24px,2.2vw,34px)/.98 var(--font-display)!important;}
.learning-note small{font:520 12px/1.4 var(--font-body)!important;opacity:.64;max-width:30ch;}
.learning-note--one{--note-r:-1.7deg;background:#f1cf55!important}.learning-note--two{--note-r:1.2deg;background:#f6f1e8!important}.learning-note--three{--note-r:-.7deg;background:#e6d8b8!important}.learning-note--four{--note-r:1.6deg;background:#f6f1e8!important}
@media(max-width:980px){.learning-v24{grid-template-columns:1fr}.learning-notes{min-height:0}.learning-note{transform:none!important}}
@media(max-width:660px){.learning-notes{grid-template-columns:1fr}}

/* Epilogue: cool graphite, separate from both paper and footer black. */
.epilogue-shift{color:var(--paper)!important;}
.page-case-agent .epilogue-shift{--epilogue-bg:#343a3a;}
.page-case-agent .epilogue-shift .callout-panel{background:transparent!important;}

/* Scroll rail: visible on light surfaces, and hover opens the whole chapter strip. */
.section-progress{padding:7px 5px!important;border:1px solid rgba(156,78,59,.58)!important;border-radius:999px!important;background:rgba(243,240,231,.54)!important;backdrop-filter:blur(12px)!important;box-shadow:0 8px 24px rgba(41,46,38,.08)!important;}
.section-progress__segment{width:5px!important;background:#c8c7c2!important;border-radius:999px!important;position:relative!important;overflow:visible!important;}
.section-progress__segment.is-active{width:8px!important;background:#bebdb7!important;}
.section-progress__fill{background:var(--orange)!important;border-radius:999px!important;}
.section-progress:hover{border-radius:18px!important;padding-block:10px!important;}
.section-progress:hover .section-progress__segment{width:9px!important;}
.section-progress:hover .section-progress__peek{opacity:1!important;transform:translate(0,-50%)!important;}
.section-progress__peek{right:26px!important;width:248px!important;min-height:64px!important;border:1px solid rgba(156,78,59,.16)!important;}
.section-progress:hover .section-progress__peek{pointer-events:auto!important;}
.section-progress__segment:hover .section-progress__peek{border-color:rgba(156,78,59,.54)!important;box-shadow:0 16px 46px rgba(41,46,38,.16)!important;}

/* Homepage case-study cards: remove grey veil; let the product image carry the card. */
.page-home .case-stack-card__wash{background:linear-gradient(to top,rgba(18,19,22,.86) 0%,rgba(18,19,22,.36) 34%,rgba(18,19,22,.04) 67%,transparent 100%)!important;opacity:.74!important;}
.page-home .case-stack-card__visual img{filter:none!important;opacity:1!important;transform:scale(1.015);transition:transform .6s var(--ease),filter .35s ease!important;}
.page-home .case-stack-card:hover .case-stack-card__visual img,.page-home .case-stack-card:focus-visible .case-stack-card__visual img{transform:scale(1.05)!important;filter:saturate(1.05) contrast(1.02)!important;}
.page-home .case-stack-card{background:#17181b!important;}
.page-home .case-stack-card__summary,.page-home .case-stack-card__topline,.page-home .case-stack-card__index{color:#f3f0e7!important;text-shadow:0 1px 14px rgba(0,0,0,.24);}

/* Writing becomes a literal editorial bookshelf. */
.writing-bookshelf{position:relative!important;height:470px!important;min-height:470px!important;display:flex!important;align-items:flex-end!important;gap:8px!important;padding:26px clamp(18px,3vw,50px) 52px!important;overflow:visible!important;perspective:1600px;background:transparent!important;}
.writing-bookshelf__shelf{position:absolute;left:0;right:0;bottom:35px;height:18px;border-radius:5px;background:#27282c;box-shadow:0 12px 24px rgba(41,46,38,.18);}
.writing-book,.writing-book:nth-child(n){position:relative!important;left:auto!important;top:auto!important;width:clamp(66px,6.4vw,96px)!important;height:330px!important;flex:0 0 clamp(66px,6.4vw,96px)!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;overflow:visible!important;transform:none!important;box-shadow:none!important;z-index:2!important;perspective:1000px;transition:opacity .25s ease,filter .25s ease!important;}
.writing-book__body{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform-origin:left center;transition:transform .5s cubic-bezier(.2,.72,.18,1),translate .45s var(--ease);}
.writing-book__spine{position:absolute;inset:0;border-radius:5px 7px 4px 6px;background:#f3ede2;border:1px solid rgba(41,46,38,.2);box-shadow:inset -8px 0 14px rgba(41,46,38,.06),0 14px 24px rgba(41,46,38,.1);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18px 8px;color:var(--ink);backface-visibility:hidden;}
.writing-book:nth-child(2n) .writing-book__spine{background:#e6d8b8}.writing-book:nth-child(3n) .writing-book__spine{background:#e6d8b8}.writing-book.is-research .writing-book__spine{background:#292e26;color:#f3f0e7}
.writing-book__spine span{font:700 10px/1 var(--font-body);letter-spacing:.08em;}
.writing-book__spine strong{font:650 15px/1 var(--font-display);writing-mode:vertical-rl;rotate:180deg;letter-spacing:-.02em;}
.writing-book__cover{position:absolute;left:calc(100% - 2px);bottom:0;width:230px;height:330px;padding:28px 24px;border-radius:6px 16px 12px 5px;background:#f3ede2;border:1px solid rgba(41,46,38,.18);box-shadow:0 28px 56px rgba(41,46,38,.16);display:flex;flex-direction:column;gap:14px;opacity:0;pointer-events:none;transform-origin:left center;transform:rotateY(88deg);transition:transform .5s cubic-bezier(.2,.72,.18,1),opacity .18s ease;}
.writing-book:nth-child(2n) .writing-book__cover{background:#e6d8b8}.writing-book:nth-child(3n) .writing-book__cover{background:#e6d8b8}.writing-book.is-research .writing-book__cover{background:#292e26;color:#f3f0e7}
.writing-book__cover::after{content:"";margin-top:auto;width:42px;height:42px;border:2px solid currentColor;border-radius:50% 46% 52% 48%;opacity:.55;transform:rotate(-12deg);}
.writing-book__cover small{font:700 10px/1 var(--font-body);letter-spacing:.08em;text-transform: none;opacity:.62;}
.writing-book__cover strong{margin-top:54px;font:650 28px/.95 var(--font-display);letter-spacing:-.04em;}
.writing-book__cover em{font:500 12px/1.3 var(--font-body);font-style:normal;opacity:.64;}
.writing-book:hover,.writing-book:focus-visible{z-index:20!important;}
.writing-book:hover .writing-book__body,.writing-book:focus-visible .writing-book__body{translate:0 -24px;transform:rotateY(-9deg);}
.writing-book:hover .writing-book__cover,.writing-book:focus-visible .writing-book__cover{opacity:1;pointer-events:auto;transform:rotateY(8deg);}
.writing-book.is-filtered-out{opacity:.08!important;filter:grayscale(1)!important;pointer-events:none!important;}
@media(max-width:980px){.writing-bookshelf{overflow-x:auto!important;overflow-y:hidden!important;justify-content:flex-start!important;padding-right:260px!important}.writing-book{flex-basis:76px!important;width:76px!important}.writing-book__cover{width:210px}}
@media(max-width:650px){.writing-bookshelf{height:410px!important;min-height:410px!important}.writing-book{height:286px!important}.writing-book__cover{height:286px!important}}

/* Graphite replaces the old brown transition tone. */
.page-case-agent .epilogue-shift{background-color:transparent!important;}

/* Reduced motion: keep states readable. */
@media(prefers-reduced-motion:reduce){
  .page-wipe__wave,.page-wipe__signature-line-v24,.page-wipe__signature-shadow-v24{animation:none!important;stroke-dashoffset:0!important}
  .dot-field--scribble.is-visible .is-filled,.cog-hotspot span{animation:none!important}
  .writing-book:hover .writing-book__body,.writing-book:focus-visible .writing-book__body{translate:0 -8px;transform:none}.writing-book:hover .writing-book__cover,.writing-book:focus-visible .writing-book__cover{transform:none}
}

/* V24 rail drawer: enough vertical room for every chapter preview without overlap. */
.section-progress{transition:height .34s var(--ease),width .24s ease,opacity .22s ease,transform .3s var(--ease)!important;}
.section-progress:hover{height:min(82vh,720px)!important;}
.section-progress:hover .section-progress__peek{min-height:48px!important;grid-template-columns:44px 1fr!important;width:216px!important;padding:6px!important;}
.section-progress:hover .section-progress__peek img{width:44px!important;height:36px!important;border-radius:6px!important;}
.section-progress:hover .section-progress__peek b{font-size:12px!important}.section-progress:hover .section-progress__peek small{font-size:8px!important;}
.writing-book::after{display:none!important;}

/* ========================================================================== 
   V25; lead visual-design audit pass
   Focus: cleaner work deck, editorial bookshelf, legible Shiva mark
   ========================================================================== */

/* Floating identity: legible first, handwritten second. The previous SVG mark
   was too dense at navigation size and read as a squiggle rather than a name. */
.header-logo--signature {
  width: auto !important;
  min-width: 72px !important;
  height: 36px !important;
  padding: 0 4px 0 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}
.header-wordmark-v25 {
  display: inline-block;
  font-family: "Segoe Print", "Bradley Hand", "Noteworthy", "Chalkboard SE", cursive;
  font-size: 19px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.075em;
  color: currentColor;
  transform: rotate(-2deg) translateY(-1px);
  transition: transform .28s var(--ease), opacity .2s ease;
  white-space: nowrap;
}
.header-logo--signature:hover .header-wordmark-v25 {
  transform: rotate(-.6deg) translateY(-2px);
}
.menu-open .header-wordmark-v25 { color: var(--paper); }
.header-signature-v24 { display:none !important; }

/* Selected work; make the deck read as one composed object instead of three
   unrelated dark cards. The image is the hero; metadata forms a quiet frame. */
.page-home .work-scroller--stack {
  padding-top: clamp(110px, 13vh, 165px) !important;
  padding-bottom: clamp(120px, 15vh, 190px) !important;
}
.page-home .work-scroller--stack .work-track.work-stack-v2 {
  width: min(100%, 1280px) !important;
  padding-bottom: 44vh !important;
}
.page-home .case-stack-shell {
  --stack-y: 13vh;
  width: min(76vw, 1040px) !important;
  margin-bottom: 39vh !important;
  top: var(--stack-y) !important;
}
.page-home .case-stack-shell--one { --stack-y: 11vh; }
.page-home .case-stack-shell--two { --stack-y: calc(11vh + 34px); }
.page-home .case-stack-shell--three { --stack-y: calc(11vh + 68px); margin-bottom: 0 !important; }
.page-home .case-stack-card,
.page-home .case-stack-card--one,
.page-home .case-stack-card--two,
.page-home .case-stack-card--three {
  height: min(62vh, 660px) !important;
  border-radius: 30px !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(41,46,38,.13) !important;
  box-shadow: 0 28px 72px rgba(41,46,38,.16) !important;
  overflow: hidden !important;
  transform: none !important;
}
.page-home .case-stack-card__visual {
  inset: 0 0 118px 0 !important;
  background: #e9e7df !important;
}
.page-home .case-stack-card__visual::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(243,240,231,.05),rgba(243,240,231,0) 62%,rgba(41,46,38,.08));
}
.page-home .case-stack-card__visual img {
  width:100%; height:100%;
  object-fit:cover !important;
  filter:none !important;
  opacity:1 !important;
  transform:scale(1.002) !important;
  transition:transform .7s var(--ease), filter .35s ease !important;
}
.page-home .case-stack-card--three .case-stack-card__visual img {
  object-fit:cover !important;
  padding:0 !important;
  mix-blend-mode:normal !important;
}
.page-home .case-stack-card__wash { display:none !important; }
.page-home .case-stack-card__topline {
  top:auto !important;
  bottom:82px !important;
  left:26px !important;
  right:26px !important;
  color:rgba(41,46,38,.58) !important;
  text-shadow:none !important;
  font-size:9px !important;
  letter-spacing:.09em !important;
}
.page-home .case-stack-card__summary {
  left:26px !important;
  right:26px !important;
  bottom:22px !important;
  color:var(--ink) !important;
  text-shadow:none !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(220px,34%) !important;
  gap:20px !important;
  align-items:end !important;
}
.page-home .case-stack-card__summary h3 {
  font-size:clamp(34px,3.8vw,56px) !important;
  line-height:.9 !important;
  max-width:none !important;
  font-weight:650 !important;
  letter-spacing:-.045em !important;
}
.page-home .case-stack-card__summary p {
  margin:0 !important;
  max-width:34ch !important;
  font-size:clamp(12px,.9vw,15px) !important;
  line-height:1.35 !important;
  color:rgba(41,46,38,.62) !important;
  text-align:right;
}
.page-home .case-stack-card::after {
  top:0 !important;
  left:28px !important;
  right:28px !important;
  width:auto !important;
  height:3px !important;
  background:var(--orange) !important;
  transform:scaleX(.12) !important;
  transform-origin:left center !important;
  opacity:.9 !important;
}
.page-home .case-stack-shell:hover .case-stack-card::after,
.page-home .case-stack-shell:focus-within .case-stack-card::after { transform:scaleX(1) !important; }
.page-home .case-stack-shell:hover .case-stack-card,
.page-home .case-stack-shell:focus-within .case-stack-card {
  transform:translateY(-5px) !important;
  border-color:rgba(156,78,59,.34) !important;
}
.page-home .case-stack-shell:hover .case-stack-card__visual img,
.page-home .case-stack-shell:focus-within .case-stack-card__visual img {
  transform:scale(1.025) !important;
  filter:saturate(1.04) contrast(1.015) !important;
}
.page-home .case-stack-notes {
  padding:10px 12px !important;
  background:rgba(243,240,231,.92) !important;
  border:1px solid rgba(41,46,38,.12) !important;
  border-radius:14px !important;
  box-shadow:0 12px 32px rgba(41,46,38,.11) !important;
  backdrop-filter:blur(10px) !important;
}
.page-home .case-stack-notes b {
  font-family:var(--font-body) !important;
  font-weight:650 !important;
  font-size:clamp(22px,1.8vw,28px) !important;
}
.page-home .case-stack-notes i {
  font-family:var(--font-body) !important;
  font-size:10px !important;
  text-transform: none;
  letter-spacing:.06em;
}

/* Writing; keep the bookshelf metaphor, remove the novelty-shop feel. One calm
   editorial shelf, a restrained palette, and covers that open without blocking
   half the archive. */
.writing-lab { overflow:hidden !important; }
.writing-bookshelf {
  height:430px !important;
  min-height:430px !important;
  max-width:1180px;
  margin-inline:auto;
  justify-content:center !important;
  gap:10px !important;
  padding:30px clamp(20px,3.5vw,56px) 66px !important;
  perspective:1400px !important;
}
.writing-bookshelf__shelf {
  left:4% !important;
  right:4% !important;
  bottom:48px !important;
  height:2px !important;
  border-radius:999px !important;
  background:rgba(41,46,38,.55) !important;
  box-shadow:0 10px 24px rgba(41,46,38,.10) !important;
}
.writing-bookshelf__shelf::after {
  content:"";
  position:absolute;
  left:3%; right:3%; top:10px;
  height:12px;
  border-radius:50%;
  background:rgba(41,46,38,.08);
  filter:blur(8px);
}
.writing-book,.writing-book:nth-child(n) {
  width:clamp(62px,5.3vw,80px) !important;
  flex:0 0 clamp(62px,5.3vw,80px) !important;
  height:310px !important;
}
.writing-book__body { transition:transform .48s cubic-bezier(.2,.72,.18,1),translate .42s var(--ease) !important; }
.writing-book__spine {
  border-radius:7px 6px 5px 7px !important;
  border:1px solid rgba(41,46,38,.16) !important;
  box-shadow:inset -7px 0 12px rgba(41,46,38,.05),0 12px 20px rgba(41,46,38,.08) !important;
  padding:16px 8px !important;
  background:#e4dfd2 !important;
}
.writing-book:nth-child(3n/**/+2) .writing-book__spine { background:#e5e2da !important; }
.writing-book:nth-child(4n) .writing-book__spine { background:#ff744d !important; }
.writing-book.is-research .writing-book__spine { background:#292e26 !important; color:#f3f0e7 !important; }
.writing-book__spine::before {
  content:"";
  width:22px; height:22px;
  border:1.5px solid currentColor;
  border-radius:52% 46% 55% 44%;
  opacity:.42;
  transform:rotate(-11deg);
}
.writing-book__spine strong {
  font-family:var(--font-body) !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.02em !important;
}
.writing-book__cover {
  width:205px !important;
  height:310px !important;
  padding:22px !important;
  border-radius:8px 18px 16px 6px !important;
  background:#e4dfd2 !important;
  border:1px solid rgba(41,46,38,.16) !important;
  box-shadow:0 24px 54px rgba(41,46,38,.17) !important;
}
.writing-book:nth-child(3n/**/+2) .writing-book__cover { background:#e5e2da !important; }
.writing-book:nth-child(4n) .writing-book__cover { background:#ff744d !important; }
.writing-book.is-research .writing-book__cover { background:#292e26 !important; color:#f3f0e7 !important; }
.writing-book__cover::before {
  content:"";
  width:42px; height:3px;
  background:var(--orange);
  border-radius:999px;
}
.writing-book__cover::after {
  width:34px !important; height:34px !important;
  border-width:1.5px !important;
  opacity:.38 !important;
}
.writing-book__cover small { font-size:9px !important; }
.writing-book__cover strong {
  margin-top:40px !important;
  font-family:var(--font-display) !important;
  font-size:24px !important;
  line-height:.98 !important;
  letter-spacing:-.035em !important;
}
.writing-book:hover .writing-book__body,
.writing-book:focus-visible .writing-book__body { translate:0 -18px !important; transform:rotateY(-7deg) !important; }
.writing-book:hover .writing-book__cover,
.writing-book:focus-visible .writing-book__cover { transform:rotateY(5deg) !important; }
.writing-book:nth-last-child(-n/**/+3) .writing-book__cover {
  left:auto !important;
  right:calc(100% - 2px) !important;
  transform-origin:right center !important;
  transform:rotateY(-88deg) !important;
}
.writing-book:nth-last-child(-n/**/+3):hover .writing-book__cover,
.writing-book:nth-last-child(-n/**/+3):focus-visible .writing-book__cover { transform:rotateY(-5deg) !important; }
.writing-bookshelf:has(.writing-book:hover) .writing-book:not(:hover),
.writing-bookshelf:has(.writing-book:focus-visible) .writing-book:not(:focus-visible) { opacity:.72 !important; }

@media (max-width: 980px) {
  .page-home .case-stack-shell { width:min(84vw,900px) !important; }
  .page-home .case-stack-card__summary { grid-template-columns:1fr !important; }
  .page-home .case-stack-card__summary p { display:none; }
  .writing-bookshelf { justify-content:flex-start !important; overflow-x:auto !important; padding-right:230px !important; }
}
@media (max-width: 650px) {
  .header-wordmark-v25 { font-size:17px; }
  .page-home .case-stack-card { height:min(62svh,560px) !important; border-radius:22px !important; }
  .page-home .case-stack-card__visual { inset:0 0 96px 0 !important; }
  .page-home .case-stack-card__topline { bottom:64px !important; }
  .page-home .case-stack-card__summary h3 { font-size:38px !important; }
  .writing-bookshelf { height:390px !important; min-height:390px !important; }
  .writing-book,.writing-book:nth-child(n) { height:278px !important; }
  .writing-book__cover { height:278px !important; width:190px !important; }
}


/* ===== V31 CURRENT DESIGN SYSTEM + SKIPER INTERACTION OVERRIDES ===== */
/* ==========================================================================
   V26 FINAL DESIGN SYSTEM
   This file is the authoritative visual layer. legacy.css contains historical
   layout primitives only; all current tokens, component grammar, responsive
   compositions and interaction states are centralized here.
   ========================================================================== */

:root {
  /* Core palette; one restrained system across all pages. */
  --paper: #f3f0e7;
  --paper-2: #e4dfd2;
  --paper-3: #e8e4da;
  --ink: #292e26;
  --ink-soft: #666c5e;
  --orange: #9c4e3b;
  --orange-soft: #e6d8b8;
  --yellow: #e6d8b8;
  --line: rgba(41,46,38,.14);
  --line-strong: rgba(41,46,38,.28);

  /* Legacy colour aliases intentionally collapse into the final palette. */
  --lavender: var(--paper-3);
  --lavender-2: #dedbd2;
  --purple: var(--ink);
  --purple-2: var(--orange);
  --tone-umber: #343a3a;

  /* Typography; 5 display sizes + 4 supporting sizes. */
  --font-display: "Cabinet Grotesk", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Syne", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-hand: "Segoe Script", "Bradley Hand", "Snell Roundhand", cursive;

  --type-display-xl: clamp(4.8rem, 10.8vw, 10.6rem);
  --type-display-lg: clamp(3.7rem, 7.2vw, 7.4rem);
  --type-display-md: clamp(2.8rem, 5vw, 5rem);
  --type-display-sm: clamp(2.05rem, 3.3vw, 3.4rem);
  --type-title: clamp(1.55rem, 2.25vw, 2.35rem);

  --type-body-lg: clamp(1.08rem, 1.35vw, 1.35rem);
  --type-body: clamp(.95rem, 1.05vw, 1.08rem);
  --type-body-sm: clamp(.82rem, .9vw, .95rem);
  --type-meta: clamp(.68rem, .68vw, .76rem);

  --lh-display: .9;
  --lh-title: 1.02;
  --lh-body: 1.52;

  /* Vertical rhythm; only three section densities. */
  --space-poster: clamp(8rem, 15svh, 12rem);
  --space-narrative: clamp(6.25rem, 11svh, 9rem);
  --space-dense: clamp(4.75rem, 8svh, 7rem);
  --section-gap: clamp(3rem, 5vw, 5.5rem);

  /* Shared component grammar. */
  --card-radius: 24px;
  --card-radius-sm: 16px;
  --card-border: 1px solid rgba(41,46,38,.13);
  --card-border-hover: rgba(156,78,59,.55);
  --card-shadow: 0 18px 50px rgba(41,46,38,.10);
  --card-shadow-hover: 0 26px 68px rgba(41,46,38,.16);
  --card-lift: -6px;
  --motion-fast: 220ms;
  --motion: 420ms;
  --motion-slow: 680ms;
  --ease-system: cubic-bezier(.2,.72,.18,1);
}

/* ---------- Typography consolidation ----------------------------------- */
body {
  font-family: var(--font-body) !important;
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--ink);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.display-xl,
.display-lg,
.display-md,
.display-sm,
.home-hero-v2__headline,
.case-hero-v2__headline,
.case-stack-card__summary h3,
.site-footer__title,
.footer-next__link strong,
.city-story-v13__step h3,
.screen-flow__headline,
.before-after__headline,
.lifecycle-scene__title,
.impact-group__head > span {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  letter-spacing: -.045em !important;
}

.h1,.display-xl { font-size: var(--type-display-xl) !important; line-height: var(--lh-display) !important; }
.h2,.display-lg { font-size: var(--type-display-lg) !important; line-height: .92 !important; }
.h3,.display-md { font-size: var(--type-display-md) !important; line-height: .96 !important; }
.display-sm { font-size: var(--type-display-sm) !important; line-height: 1 !important; }
.copy-lg { font-size: var(--type-body-lg) !important; line-height: 1.48 !important; }
.copy,.body-copy,p { line-height: var(--lh-body); }
.copy-sm,.muted { font-size: var(--type-body-sm); }
.eyebrow,.label,.case-stack-card__topline,.section-progress__peek small {
  font-family: var(--font-body) !important;
  font-size: var(--type-meta) !important;
  font-weight: 650 !important;
  letter-spacing: .09em !important;
  text-transform: none;
}

/* Keep the hero scales intentional rather than inheriting arbitrary old sizes. */
.home-hero-v2__headline { font-size: var(--type-display-xl) !important; line-height: .82 !important; }
.case-hero-v2__headline { font-size: clamp(4.6rem, 9.5vw, 9.4rem) !important; line-height: .84 !important; }

/* ---------- Palette consolidation -------------------------------------- */
.section--purple,.section--lavender,.callout-panel,.research-number,
.loop-card,.proposal-node,.current-step__number,
.learning-card:nth-child(1),.learning-card:nth-child(4) {
  background-color: var(--paper-2) !important;
  color: var(--ink) !important;
}
.roadmap__line { background: rgba(41,46,38,.18) !important; }
.roadmap__fill,.roadmap__node.is-done { background: var(--orange) !important; }
.roadmap__node { background: var(--paper) !important; box-shadow: 0 0 0 1px var(--orange) !important; }
.learning-card__icon { color: var(--orange) !important; }

/* ---------- Vertical rhythm -------------------------------------------- */
/* Poster moments: one deliberate composition in a viewport. */
.page-home :is(.home-hero-v2,.manifesto),
.page-case :is(.case-hero-v2,.analogy-bridge-v10) {
  min-height: 100svh;
}

/* Narrative sections: spacious enough to read, never huge by default. */
.page-home :is(#intro,#work),
.page-case :is(#pitch,#overview,#background,#problem,#user,#direction,#design,#solution,#learning),
.page-case-domain :is(#alert,#current,#insight,#stories,#proposal,#ongoing) {
  padding-block: var(--space-narrative) !important;
}

/* Dense evidence / galleries: tighter but still deliberate. */
.page-home :is(#writing,#vibes),
.page-case :is(#discovery,#impact,#feedback) {
  padding-block: var(--space-dense) !important;
}

.page-case main > section + section:not(.bg-transition-breath),
.page-home main > section + section:not(.bg-transition-breath) {
  scroll-margin-top: 88px;
}

/* Reduce accumulated legacy min-heights that created empty or captive pages. */
.page-home :is(#intro,#writing,#vibes),
.page-case :is(#pitch,#overview,#problem,#user,#discovery,#direction,#design,#impact,#learning),
.page-case-domain :is(#overview,#alert,#discovery,#insight,#stories,#proposal,#feedback,#ongoing) {
  min-height: auto !important;
  height: auto !important;
}

/* ---------- Shared interaction grammar --------------------------------- */
:is(.case-stack-card,.vibe-tile,.writing-book__cover,.writing-book__spine) {
  border: var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
  transition:
    transform var(--motion) var(--ease-system),
    box-shadow var(--motion) var(--ease-system),
    border-color var(--motion-fast) ease,
    filter var(--motion) ease,
    opacity var(--motion-fast) ease !important;
}

:is(.case-stack-shell,.vibe-tile,.writing-book) :focus-visible,
.case-stack-card:focus-visible,
.vibe-tile:focus-visible,
.writing-book:focus-visible {
  outline: 2px solid var(--orange) !important;
  outline-offset: 4px !important;
}

/* One hover/focus physics rule: lift, sharpen, orange accent. */
@media (hover:hover) and (pointer:fine) {
  .case-stack-shell:hover .case-stack-card,
  .case-stack-shell:focus-within .case-stack-card,
  .vibe-tile:hover,.vibe-tile:focus-within,
  .writing-book:hover .writing-book__cover,
  .writing-book:focus-within .writing-book__cover {
    transform: translateY(var(--card-lift)) !important;
    border-color: var(--card-border-hover) !important;
    box-shadow: var(--card-shadow-hover) !important;
  }
}

/* Touch / keyboard active state mirrors the same interaction, no hidden-only-on-hover info. */
.case-stack-shell.is-tapped .case-stack-card,
.vibe-tile.is-tapped,
.writing-book.is-tapped .writing-book__cover {
  transform: translateY(var(--card-lift)) !important;
  border-color: var(--card-border-hover) !important;
  box-shadow: var(--card-shadow-hover) !important;
}
.case-stack-shell.is-tapped .case-stack-notes,
.case-stack-shell:focus-within .case-stack-notes { opacity: 1 !important; transform: none !important; pointer-events:auto !important; }

/* ---------- Homepage selected work ------------------------------------- */
.page-home .work-scroller--stack {
  padding-top: var(--space-narrative) !important;
  padding-bottom: var(--space-narrative) !important;
}
.page-home .work-scroller--stack .work-track.work-stack-v2 {
  width: min(100%, 1240px) !important;
  padding-bottom: 34vh !important;
}
.page-home .case-stack-shell {
  width: min(74vw, 1010px) !important;
  margin-bottom: 32vh !important;
}
.page-home .case-stack-card {
  border-radius: var(--card-radius) !important;
  background: var(--paper) !important;
  overflow: hidden !important;
}
.page-home .case-stack-card__visual { background: var(--paper-3) !important; }
.page-home .case-stack-card__visual::after {
  background: linear-gradient(180deg,rgba(243,240,231,0),rgba(243,240,231,0) 72%,rgba(41,46,38,.035)) !important;
}
.page-home .case-stack-card__visual img { filter: none !important; opacity: 1 !important; }
.page-home .case-stack-card__summary h3 { font-size: clamp(2.15rem, 3.5vw, 3.6rem) !important; }
.page-home .case-stack-card__summary p { font-family:var(--font-body)!important; }
.page-home .case-stack-card::after,
.vibe-tile::after {
  content:"";
  position:absolute;
  left:22px;right:22px;top:0;height:3px;
  background:var(--orange);
  transform:scaleX(.12);
  transform-origin:left;
  transition:transform var(--motion) var(--ease-system);
  z-index:5;
}
.page-home .case-stack-shell:is(:hover,:focus-within,.is-tapped) .case-stack-card::after,
.vibe-tile:is(:hover,:focus-within,.is-tapped)::after { transform:scaleX(1); }

/* KPI notes use the same Syne system, never a separate handwriting style. */
.page-home .case-stack-notes,
.page-home .case-stack-notes i,
.page-home .case-stack-notes b {
  font-family: var(--font-body) !important;
}
.page-home .case-stack-notes {
  border-radius: var(--card-radius-sm) !important;
  border: var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
  background: rgba(243,240,231,.95) !important;
}

/* ---------- Writing + Vibe apps: same component language ---------------- */
.writing-bookshelf { perspective: 1200px !important; }
.writing-book__spine,.writing-book__cover {
  border-radius: 10px !important;
}
.writing-book__cover::before {
  content:"";
  position:relative;
  display:block;
  width:44px;height:3px;
  border-radius:999px;
  background:var(--orange);
  transform-origin:left;
  transition:transform var(--motion) var(--ease-system);
}
.writing-book:is(:hover,:focus-within,.is-tapped) .writing-book__cover::before { transform:scaleX(1.65); }
.writing-book__cover strong { font-family: var(--font-display) !important; }
.writing-book__spine strong,.writing-book__cover small,.writing-book__cover em { font-family: var(--font-body) !important; }

.vibe-tile {
  position:relative;
  border-radius: var(--card-radius) !important;
  border: var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
  overflow:hidden;
}
.vibe-tile__meta strong { font-family:var(--font-display)!important; }
.vibe-tile__meta :is(span,em) { font-family:var(--font-body)!important; }

/* ---------- Right-side chapter rail ------------------------------------ */
.section-progress {
  right: 14px !important;
  width: 18px;
  gap: 5px !important;
  opacity: .58 !important;
  transition: width var(--motion), opacity var(--motion), transform var(--motion) !important;
}
.section-progress:hover,.section-progress:focus-within,.section-progress.is-expanded {
  width: 300px;
  opacity: 1 !important;
}
.section-progress__segment {
  width: 3px !important;
  height: 20px !important;
  min-height: 20px !important;
  border-radius: 999px;
  background: rgba(255,255,255,.7) !important;
  outline: 1px solid rgba(156,78,59,.35);
  outline-offset: 1px;
  opacity: .64;
}
.section-progress__segment.is-active { width: 5px !important; height: 26px !important; opacity:1; }
.section-progress:hover .section-progress__segment,
.section-progress:focus-within .section-progress__segment,
.section-progress.is-expanded .section-progress__segment { width: 5px !important; }
.section-progress__fill { transform-origin: top !important; background: var(--orange) !important; }
.section-progress__peek {
  right: 18px !important;
  width: 250px !important;
  grid-template-columns: 72px 1fr !important;
  min-height: 76px !important;
  border: var(--card-border) !important;
  border-radius: 14px !important;
  background: rgba(243,240,231,.96) !important;
  box-shadow: var(--card-shadow) !important;
}
.section-progress__peek img { width:72px!important;height:58px!important;border-radius:10px!important; }
.section-progress__peek b { font-family:var(--font-display)!important;font-size:15px!important;font-weight:600!important; }

/* When the whole rail is hovered/focused, show every chapter label, not only the hovered one. */
.section-progress:hover .section-progress__peek,
.section-progress:focus-within .section-progress__peek,
.section-progress.is-expanded .section-progress__peek {
  opacity:.3;
  transform:translate(0,-50%);
}
.section-progress .section-progress__segment:is(:hover,:focus-visible,.is-active) .section-progress__peek,
.section-progress.is-expanded .section-progress__segment:focus-visible .section-progress__peek {
  opacity:1;
}

/* ---------- Desktop section framing ------------------------------------ */
@media (min-width: 981px) {
  .page-home .case-stack-shell--one { top: 11vh !important; }
  .page-home .case-stack-shell--two { top: calc(11vh + 34px) !important; }
  .page-home .case-stack-shell--three { top: calc(11vh + 68px) !important; }

  /* Preserve only the sticky interactions that are conceptually meaningful. */
  .page-home :is(.manifesto__sticky) { position:relative!important;height:auto!important; }
}

/* ---------- Tablet / mobile art direction ------------------------------- */
@media (max-width: 980px) {
  :root {
    --type-display-xl: clamp(4.1rem, 17vw, 7.4rem);
    --type-display-lg: clamp(3rem, 12vw, 5rem);
    --type-display-md: clamp(2.35rem, 9vw, 4rem);
    --space-poster: clamp(5.5rem, 10svh, 7rem);
    --space-narrative: clamp(4.75rem, 8svh, 6rem);
    --space-dense: clamp(4rem, 7svh, 5rem);
  }

  /* Progress rail is a desktop navigation aid; don't let it crowd touch layouts. */
  .section-progress { display:none !important; }

  /* Homepage hero: intentionally re-composed, not a squeezed desktop poster. */
  .home-hero-v2 { min-height:100svh!important;padding:74px 18px 34px!important;display:flex!important;align-items:center!important; }
  .home-hero-v2__stage { min-height:0!important;height:auto!important;width:100%;display:grid!important;grid-template-columns:1fr;align-content:center;gap:28px; }
  .home-hero-v2__headline { position:relative!important;padding:0!important;font-size:var(--type-display-xl)!important;line-height:.84!important; }
  .home-hero-v2__line--one,.home-hero-v2__line--two,.home-hero-v2__line--three { justify-content:flex-start!important;padding:0!important; }
  .home-hero-v2__line--three { font-size:.7em!important;flex-wrap:wrap; }
  .home-hero-v2__achievements { position:relative!important;inset:auto!important;width:min(100%,560px)!important;margin:0 0 0 auto!important; }
  .home-hero-v2__doodle { display:none!important; }
  .home-hero-v2__scroll { position:relative!important;left:auto!important;bottom:auto!important;transform:none!important;justify-self:center!important;margin-top:6px; }

  /* Selected work becomes a deliberate horizontal snap gallery on touch. */
  .page-home .work-scroller--stack { height:auto!important;overflow:hidden!important;padding-block:var(--space-narrative)!important; }
  .page-home .work-sticky { position:relative!important;top:auto!important;height:auto!important;overflow:visible!important;padding:0!important; }
  .page-home .work-track.work-stack-v2 {
    width:auto!important;
    display:flex!important;
    gap:18px!important;
    overflow-x:auto!important;
    padding:10px 18px 28px!important;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .page-home .work-track.work-stack-v2::-webkit-scrollbar { display:none; }
  .page-home .case-stack-shell,
  .page-home .case-stack-shell--one,.page-home .case-stack-shell--two,.page-home .case-stack-shell--three {
    position:relative!important;top:auto!important;left:auto!important;right:auto!important;
    width:min(84vw,620px)!important;min-width:min(84vw,620px)!important;
    margin:0!important;scroll-snap-align:center;
  }
  .page-home .case-stack-card { height:min(62svh,560px)!important; }
  .page-home .case-stack-notes {
    position:absolute!important;left:18px!important;right:18px!important;bottom:18px!important;top:auto!important;
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;
    opacity:0!important;transform:translateY(10px)!important;pointer-events:none!important;
  }
  .page-home .case-stack-shell.is-tapped .case-stack-notes,
  .page-home .case-stack-shell:focus-within .case-stack-notes { opacity:1!important;transform:none!important; }

  /* Books become front-facing cover cards; 3D hover is replaced by touch-friendly browsing. */
  .writing-bookshelf {
    height:auto!important;min-height:0!important;
    display:flex!important;justify-content:flex-start!important;gap:14px!important;
    overflow-x:auto!important;padding:18px 18px 30px!important;
    scroll-snap-type:x mandatory;perspective:none!important;scrollbar-width:none;
  }
  .writing-bookshelf::-webkit-scrollbar { display:none; }
  .writing-bookshelf__shelf { display:none!important; }
  .writing-book,.writing-book:nth-child(n) {
    width:min(68vw,300px)!important;flex:0 0 min(68vw,300px)!important;height:360px!important;
    scroll-snap-align:center;
  }
  .writing-book__body { width:100%!important;height:100%!important;transform:none!important;translate:none!important; }
  .writing-book__spine { display:none!important; }
  .writing-book__cover,.writing-book:nth-last-child(-n/**/+3) .writing-book__cover {
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    transform:none!important;transform-origin:center!important;border-radius:var(--card-radius)!important;
  }
  .writing-book:is(:hover,:focus-within,.is-tapped) .writing-book__cover,
  .writing-book:nth-last-child(-n/**/+3):is(:hover,:focus-within,.is-tapped) .writing-book__cover { transform:translateY(-5px)!important; }

  /* Vibe apps: keep the same card grammar, but allow horizontal inspection when narrow. */
  .vibe-gallery { grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important; }

  /* Case-study narratives become linear. No desktop sticky state is forced onto touch. */
  .page-case :is(.city-story-v13__sticky,.before-after__sticky,.screen-flow__sticky,.current-ux__sticky,.lifecycle-scene__sticky) {
    position:relative!important;top:auto!important;height:auto!important;min-height:0!important;overflow:visible!important;
  }
  .page-case :is(.city-story-v13,.before-after,.screen-flow,.current-ux,.lifecycle-scene) { height:auto!important;min-height:0!important; }
}

@media (max-width: 640px) {
  :root {
    --card-radius: 20px;
    --type-body-lg: 1.05rem;
    --type-body: .96rem;
    --type-body-sm: .84rem;
  }
  .home-hero-v2__headline { font-size:clamp(3.55rem,17.5vw,5.6rem)!important; }
  .hero-inline-portrait { width:26vw!important;min-width:94px!important; }
  .hero-project-stack { width:30vw!important;min-width:112px!important; }
  .home-hero-v2__achievements { margin:0!important; }
  .home-hero-v2__intro { font-size:1rem!important; }
  .achievement-typewriter { font-size:.92rem!important; }
  .page-home .case-stack-shell { width:88vw!important;min-width:88vw!important; }
  .page-home .case-stack-card__summary { grid-template-columns:1fr!important; }
  .page-home .case-stack-card__summary p { display:none!important; }
  .vibe-gallery { display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory;gap:14px!important;padding-bottom:16px; }
  .vibe-tile { flex:0 0 78vw;scroll-snap-align:center; }
}

/* Reduced motion keeps the same compositions without animated dependency. */
@media (prefers-reduced-motion: reduce) {
  :is(.case-stack-card,.vibe-tile,.writing-book__cover,.writing-book__spine,.section-progress,.section-progress__segment) {
    transition-duration: 1ms !important;
  }
}

/* Supporting cards inherit the same structural tokens without inventing a new
   hover language. Sticky notes remain intentionally exempt. */
:is(.evidence-card,.impact-card,.insight-card,.iteration-card,.journey-card,.score-card,.story-card,.context-card,.zfi-learning-card,.loop-card,.proposal-node) {
  border-radius: var(--card-radius) !important;
  border: var(--card-border) !important;
  box-shadow: 0 12px 34px rgba(41,46,38,.07) !important;
}
:is(.evidence-card,.impact-card,.insight-card,.iteration-card,.journey-card,.score-card,.story-card,.context-card,.zfi-learning-card) h3,
:is(.evidence-card,.impact-card,.insight-card,.iteration-card,.journey-card,.score-card,.story-card,.context-card,.zfi-learning-card) strong {
  font-family: var(--font-display) !important;
}
:is(.evidence-card,.impact-card,.insight-card,.iteration-card,.journey-card,.score-card,.story-card,.context-card,.zfi-learning-card) :is(p,span,small,em) {
  font-family: var(--font-body) !important;
}

.lifecycle-flip { cursor:pointer; }
.lifecycle-flip.is-tapped .lifecycle-flip__inner { transform: rotateY(180deg) !important; }

/* Keep the mobile card stack's information hierarchy legible when KPIs open. */
@media (max-width:980px) {
  .page-home .case-stack-shell.is-tapped .case-stack-card__visual { inset:0 0 174px 0 !important; }
  .page-home .case-stack-shell.is-tapped .case-stack-card__summary { bottom:122px!important; }
  .page-home .case-stack-shell.is-tapped .case-stack-card__topline { bottom:166px!important; }
}

/* Rail spacing expands with the drawer so chapter previews never collide. */
@media (min-width:981px) {
  .section-progress { height:min(42vh,380px)!important; }
  .section-progress__segment {
    flex:1 1 0!important;
    height:auto!important;
    min-height:0!important;
  }
  .section-progress:hover,.section-progress:focus-within,.section-progress.is-expanded {
    height:min(84vh,760px)!important;
  }
  .section-progress:hover .section-progress__peek,
  .section-progress:focus-within .section-progress__peek,
  .section-progress.is-expanded .section-progress__peek {
    width:218px!important;
    min-height:50px!important;
    grid-template-columns:48px 1fr!important;
    padding:6px!important;
  }
  .section-progress:hover .section-progress__peek img,
  .section-progress:focus-within .section-progress__peek img,
  .section-progress.is-expanded .section-progress__peek img {
    width:48px!important;height:38px!important;border-radius:7px!important;
  }
}

/* ========================================================================== 
   V27; Agent Management polish + chapter rail + continuous backgrounds
   ========================================================================== */

/* Continuous page colour plane: no section is allowed to paint a hard-edged
   rectangle. Footer remains intentionally separate. */
#main { background: var(--continuous-page-bg, var(--paper)) !important; }
#main > section { background-color: transparent !important; }
#main > .bg-transition-breath {
  background: transparent !important;
  min-height: 0 !important;
  height: var(--breath-height, 8svh) !important;
}
#main > .bg-transition-breath[data-distance="major"] { height: 14svh !important; min-height: 84px !important; }
#main > .bg-transition-breath[data-distance="medium"] { height: 10svh !important; min-height: 64px !important; }
#main > .bg-transition-breath[data-distance="minor"] { height: 7svh !important; min-height: 44px !important; }

/* Header wordmark is intentionally plain and legible. */
.header-wordmark-v25 {
  font-family: var(--font-body) !important;
  font-size: 17px !important;
  font-weight: 650 !important;
  letter-spacing: -.04em !important;
  transform: none !important;
  font-style: normal !important;
}

/* Preloader: one consistent wave stroke, touching a Syne wordmark at centre. */
.page-wipe__signature-wrap--wave { width: 100vw !important; max-width: none !important; }
.page-wipe__signature--wave { width: 100vw !important; height: 220px !important; overflow: visible; }
.page-wipe__wave {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.page-wipe__word {
  fill: var(--ink);
  font-family: var(--font-body);
  font-size: 70px;
  font-weight: 650;
  letter-spacing: -5px;
  opacity: 0;
}
.page-wipe.is-writing .page-wipe__wave--lead { animation: v27WaveDraw .72s var(--ease-system) forwards; }
.page-wipe.is-writing .page-wipe__word { animation: v27WordIn .22s ease .62s forwards; }
.page-wipe.is-writing .page-wipe__wave--tail { animation: v27WaveDraw .72s var(--ease-system) .72s forwards; }
.page-wipe.is-written .page-wipe__wave { stroke-dashoffset: 0; }
.page-wipe.is-written .page-wipe__word { opacity: 1; }
@keyframes v27WaveDraw { to { stroke-dashoffset: 0; } }
@keyframes v27WordIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }

/* Chapter rail: stable rectangles. Viewed/current sections fill top-to-bottom;
   unvisited sections remain transparent with an orange outline. */
.section-progress {
  right: 12px !important;
  width: 18px !important;
  gap: 5px !important;
  opacity: .82 !important;
  padding: 6px 3px !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
}
.section-progress:hover,
.section-progress:focus-within,
.section-progress.is-expanded { width: 18px !important; opacity: 1 !important; }
.section-progress__segment,
.section-progress__segment.is-active,
.section-progress:hover .section-progress__segment,
.section-progress:focus-within .section-progress__segment {
  position: relative;
  display: block;
  width: 8px !important;
  height: 24px !important;
  min-height: 24px !important;
  border: 1.5px solid var(--orange) !important;
  border-radius: 2px !important;
  background: transparent !important;
  outline: 0 !important;
  opacity: 1 !important;
  overflow: hidden;
  transform: none !important;
}
.section-progress__fill {
  position:absolute;
  inset:0;
  background:var(--orange) !important;
  transform:scaleY(0);
  transform-origin:top !important;
}
/* A continuous hit area connects the rail to its drawer. */
.section-progress {
  --progress-drawer-gap: 10px;
  --progress-drawer-height: 320px;
}
.section-progress::after {
  content: "";
  position: absolute;
  right: calc(100% - 1px);
  top: 50%;
  width: calc(var(--progress-drawer-gap) + 2px);
  height: var(--progress-drawer-height);
  transform: translateY(-50%);
  pointer-events: none;
}
.section-progress.is-expanded::after { pointer-events: auto; }
.section-progress__drawer {
  position: absolute;
  z-index: 1;
  right: calc(100% + var(--progress-drawer-gap));
  top: 50%;
  width: min(300px, calc(100vw - 64px));
  max-height: min(76vh, 690px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 8px;
  display: grid;
  gap: 5px;
  border-radius: 16px;
  background: rgba(243,240,231,.97);
  border: 1px solid rgba(156,78,59,.25);
  box-shadow: 0 18px 56px rgba(41,46,38,.14);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity .16s ease, visibility 0s linear .16s;
}
.section-progress.is-expanded .section-progress__drawer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.section-progress__drawer-item {
  min-height: 48px;
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 10px;
  padding: 5px;
  border-radius: 10px;
  color: var(--ink);
  background: transparent;
  transition: background .18s ease;
}
.section-progress__drawer-item:hover,
.section-progress__drawer-item:focus-visible,
.section-progress__drawer-item.is-active {
  background: color-mix(in srgb, var(--orange) 10%, var(--paper));
}
.section-progress__drawer-item:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
}
.section-progress__drawer-item img { width:54px; height:36px; object-fit:cover; border-radius:8px; border:1px solid rgba(41,46,38,.08); }
.section-progress__drawer-item b { display:block; font-family:var(--font-body); font-size:12px; font-weight:700; line-height:1.25; }
.section-progress__drawer-item small { display:block; margin-top:2px; font-size:12px; opacity:.68; text-transform:none; letter-spacing:0; }
.section-progress__peek { display:none !important; }

/* 95k section keeps the surrounding paper tone. The dots enter from small,
   varied directions and settle with a quiet idle drift. */
.page-case-agent .agent-scale { background:transparent !important; }
.dot-field--scribble span {
  transform: translate(var(--dot-x,0), var(--dot-y,0)) rotate(var(--dot-r,0)) scale(.55) !important;
  opacity: 0 !important;
  transition: transform .72s var(--ease-system), opacity .52s ease !important;
}
.dot-field--scribble.is-visible span {
  transform: translate(0,0) rotate(0) scale(1) !important;
  opacity: 1 !important;
}
.dot-field--scribble.is-visible span.is-filled:nth-child(3n) { animation: dotQuietFloat 5.8s ease-in-out 1.2s infinite alternate; }
.dot-field--scribble.is-visible span.is-filled:nth-child(5n) { animation: dotQuietFloatB 7.1s ease-in-out 1.5s infinite alternate; }
@keyframes dotQuietFloat { to { transform: translate(1.2px,-1.6px) rotate(2deg) scale(1.03); } }
@keyframes dotQuietFloatB { to { transform: translate(-1.4px,1px) rotate(-1.8deg) scale(.98); } }

/* Why it mattered: three compact source cards, visibly a stack. */
.evidence-sources__grid { grid-template-columns:minmax(0,.86fr) minmax(420px,1.14fr) !important; gap:clamp(48px,7vw,100px) !important; align-items:center; }
.evidence-source-switcher { flex-wrap:wrap; gap:8px !important; }
.evidence-source-tab { padding:9px 12px !important; }
.evidence-deck--three { min-height: 520px !important; width:min(100%,620px); justify-self:end; }
.evidence-deck--three .evidence-card { width: min(78%, 450px) !important; height:auto !important; aspect-ratio: .86; left:50% !important; top:50% !important; transform-origin:center; }
.evidence-deck--three .evidence-card:nth-child(1) { transform:translate(-57%,-52%) rotate(-5deg) scale(.92); }
.evidence-deck--three .evidence-card:nth-child(2) { transform:translate(-48%,-50%) rotate(4deg) scale(.95); }
.evidence-deck--three .evidence-card:nth-child(3) { transform:translate(-51%,-48%) rotate(-1deg) scale(.98); }
.evidence-deck--three .evidence-card.is-active { transform:translate(-50%,-50%) rotate(0) scale(1) !important; z-index:5 !important; opacity:1 !important; }
.evidence-card img { object-fit:contain !important; background:#fff; }
.evidence-card figcaption { padding:12px 14px !important; }

/* Discovery participants: deliberate research badge rather than an empty box. */
.research-number--participants {
  min-height: 360px;
  border: 1.5px solid var(--ink) !important;
  border-radius: 26px !important;
  padding: 30px !important;
  display:flex !important;
  flex-direction:column;
  justify-content:space-between;
  background: color-mix(in srgb, var(--paper) 92%, var(--yellow)) !important;
  box-shadow: 10px 12px 0 rgba(230,216,184,.42);
  transform: rotate(-1.25deg);
}
.research-number__figure strong { display:block; font-family:var(--font-display); font-size:clamp(96px,10vw,160px); line-height:.74; letter-spacing:-.07em; }
.research-number__figure span { display:block; margin-top:18px; font-family:var(--font-body); font-size:20px; font-weight:700; }
.research-number__split { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-block:20px; border-block:1px solid rgba(41,46,38,.18); font-size:12px; font-weight:700; text-transform: none; letter-spacing:.06em; }
.research-number--participants .copy-sm { max-width:24ch; }
.system-scribble-icon--large { width:92px !important; height:72px !important; }

/* Cognitive-load chart: orange medium sections, red peak, markers live on-line. */
.cognitive-v24__chart { position:relative; overflow:visible !important; }
.cog-area { fill:url(#cogAreaV27) !important; }
.cog-curve,
.cog-curve--orange { fill:none !important; stroke:var(--orange) !important; stroke-width:7 !important; stroke-linecap:round; stroke-linejoin:round; }
.cog-high,
.cog-high--red { fill:none !important; stroke:#ef4b4f !important; stroke-width:8 !important; stroke-linecap:round; stroke-linejoin:round; }
.cog-medium { display:none !important; }
.cog-key--medium { fill:var(--orange) !important; }
.cog-key--high { fill:#ef4b4f !important; }
.cog-hotspot {
  position:absolute !important;
  left:var(--x) !important;
  top:var(--y) !important;
  width:24px !important;
  height:24px !important;
  transform:translate(-50%,-50%) !important;
  z-index:6;
}
.cog-hotspot span { width:11px !important; height:11px !important; border-radius:50%; background:currentColor !important; box-shadow:0 0 0 5px rgba(243,240,231,.86), 0 0 0 7px currentColor; animation:cogPulse 1.9s ease-in-out infinite; }
.cog-hotspot--medium { color:var(--orange) !important; }
.cog-hotspot--high { color:#ef4b4f !important; }
@keyframes cogPulse { 50% { box-shadow:0 0 0 5px rgba(243,240,231,.86), 0 0 0 11px color-mix(in srgb,currentColor 18%, transparent); } }
.cog-tooltip {
  position:absolute !important;
  left:var(--tip-x,50%) !important;
  top:var(--tip-y,50%) !important;
  width:min(300px,38vw) !important;
  padding:12px 14px !important;
  border:1px solid rgba(41,46,38,.14);
  border-radius:12px;
  background:rgba(243,240,231,.98) !important;
  color:var(--ink) !important;
  box-shadow:0 14px 40px rgba(41,46,38,.12);
  transform:translate(18px,-50%) scale(.98) !important;
  opacity:0 !important;
  pointer-events:none;
  z-index:7;
  transition:opacity .16s ease, transform .2s var(--ease-system) !important;
}
.cog-tooltip.is-active { opacity:1 !important; transform:translate(18px,-50%) scale(1) !important; }

/* Lifecycle cards: backs have real internal padding and cannot overflow. */
.lifecycle-flip__face { overflow:hidden !important; box-sizing:border-box !important; }
.lifecycle-flip__back { padding:clamp(24px,2.2vw,34px) !important; display:flex !important; flex-direction:column; justify-content:flex-end; gap:14px; }
.lifecycle-flip__back b { font-size:clamp(25px,2vw,34px); line-height:1; }
.lifecycle-flip__back p { max-width:24ch; margin:0; font-size:14px; line-height:1.45; }

/* ABC becomes one balanced editorial composition. */
.abc-v27 { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.8fr); grid-template-areas:"copy art" "principles art"; gap:clamp(34px,5vw,76px); align-items:center; }
.abc-v27__copy { grid-area:copy; max-width:740px; }
.abc-v27__copy .h2 { max-width:11ch; }
.abc-v27__illustration { grid-area:art; margin:0; display:grid; place-items:center; }
.abc-v27__illustration img { width:min(100%,430px); max-height:520px; object-fit:contain; mix-blend-mode:multiply; filter:contrast(1.08); }
.abc-v27__principles { grid-area:principles; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.abc-v27__principle { min-height:170px; padding:20px; border-top:2px solid var(--ink); display:grid; grid-template-columns:auto 1fr; gap:15px; align-content:start; }
.abc-v27__principle > b { font-family:var(--font-display); font-size:54px; line-height:.8; color:var(--orange); }
.abc-v27__principle h3 { font-size:24px !important; margin:0 0 8px; }
.abc-v27__principle p { margin:0; font-size:13px; line-height:1.45; opacity:.68; }

/* Technical landscape: the source diagrams blend into the page, never sit on a white card. */
.before-after__stage { background:transparent !important; border:0 !important; box-shadow:none !important; overflow:visible !important; }
.before-after__image { mix-blend-mode:multiply !important; background:transparent !important; box-shadow:none !important; border-radius:0 !important; filter:contrast(1.04) saturate(.92); }
.before-after__grid { gap:clamp(44px,7vw,110px) !important; }

/* Vector sketch sections use the same line quality as the illustration system. */
.design-phase__art { background:transparent !important; border:0 !important; box-shadow:none !important; }
.design-phase__art img[src$=".svg"] { width:100%; mix-blend-mode:multiply; filter:none !important; }

/* Hierarchy comparison gets the same card treatment as iteration comparisons. */
.drawing-board--cards { align-items:center; gap:clamp(18px,3vw,34px) !important; }
.hierarchy-card { position:relative; padding:18px 18px 14px; border:var(--card-border); border-radius:var(--card-radius); background:var(--paper); box-shadow:var(--card-shadow); }
.hierarchy-card img { width:100%; max-height:420px; object-fit:contain; mix-blend-mode:multiply; }
.hierarchy-card__label { position:absolute; top:14px; left:14px; z-index:2; padding:6px 9px; border-radius:999px; background:var(--ink); color:var(--paper); font-size:10px; font-weight:700; text-transform: none; letter-spacing:.08em; }
.hierarchy-card figcaption { margin-top:10px; font-family:var(--font-body); font-weight:700; font-size:13px; }
.drawing-board__arrow img { max-width:100px; }

/* Release-scope tiles: larger numbering, Syne labels, one matching line icon. */
.balance__features--v27 { grid-template-columns:repeat(4,1fr) !important; gap:12px !important; }
.balance__features--v27 .balance__feature { min-height:178px; padding:18px !important; display:grid !important; grid-template-columns:auto 1fr; grid-template-rows:auto 1fr; gap:10px 14px; align-items:start; background:var(--paper) !important; color:var(--ink) !important; border:1px solid rgba(41,46,38,.13) !important; border-radius:18px; }
.balance__features--v27 .balance__feature > span { grid-row:1 / span 2; font-family:var(--font-display); font-size:44px !important; line-height:.78; color:var(--orange); }
.balance__features--v27 .balance__feature svg { width:68px; height:54px; fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.balance__features--v27 .balance__feature svg .accent { stroke:var(--orange); }
.balance__features--v27 .balance__feature b { align-self:end; font-family:var(--font-body); font-size:15px; font-weight:650; text-transform:none !important; letter-spacing:0 !important; }

/* Adoption cards carry a small data texture so they do not read as empty shells. */
.impact-card--visual { position:relative; overflow:hidden; }
.impact-mini { margin:22px 0 14px; min-height:58px; display:flex; align-items:flex-end; gap:7px; opacity:.9; }
.impact-mini i { display:block; }
.impact-mini--people i { width:18px; height:18px; border:2px solid var(--orange); border-radius:50%; position:relative; }
.impact-mini--people i::after { content:""; position:absolute; width:24px; height:12px; border:2px solid var(--orange); border-top:0; border-radius:0 0 18px 18px; left:-5px; top:16px; }
.impact-mini--bars i { width:18px; background:var(--orange); border-radius:6px 6px 2px 2px; }
.impact-mini--bars i:nth-child(1){height:24px}.impact-mini--bars i:nth-child(2){height:40px}.impact-mini--bars i:nth-child(3){height:31px}.impact-mini--bars i:nth-child(4){height:52px}.impact-mini--bars i:nth-child(5){height:44px}
.impact-mini--nodes { align-items:center; }
.impact-mini--nodes i { width:16px; height:16px; border:2px solid var(--orange); border-radius:50%; position:relative; }
.impact-mini--nodes i:not(:last-child)::after { content:""; position:absolute; width:18px; height:2px; background:var(--orange); left:14px; top:5px; transform:rotate(-8deg); transform-origin:left; }
.impact-mini--rings { align-items:center; }
.impact-mini--rings i { border:2px solid var(--orange); border-radius:50%; margin-right:-8px; }
.impact-mini--rings i:nth-child(1){width:58px;height:58px}.impact-mini--rings i:nth-child(2){width:43px;height:43px}.impact-mini--rings i:nth-child(3){width:29px;height:29px}

/* Efficiency arrows are hand-drawn and reveal with the card. */
.impact-card__arrow--draw { display:inline-block; width:68px; height:24px; vertical-align:middle; margin-inline:8px; fill:none; stroke:var(--orange); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.impact-card__arrow--draw path { stroke-dasharray:1; stroke-dashoffset:1; path-length:1; }
.impact-card.is-visible .impact-card__arrow--draw path { animation: metricArrowDraw .7s var(--ease-system) .24s forwards; }
@keyframes metricArrowDraw { to { stroke-dashoffset:0; } }

/* Roadmap fills only after the roadmap enters the viewport. */
.roadmap__fill { width:var(--fill) !important; transform:scaleX(0); transform-origin:left; transition:transform 1.05s var(--ease-system) !important; }
.roadmap.is-roadmap-visible .roadmap__fill { transform:scaleX(1); }
.roadmap.is-roadmap-visible .roadmap__row:nth-child(2) .roadmap__fill { transition-delay:.18s !important; }

/* All four learnings remain visible as a coherent draggable note field. */
.learning-notes { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px !important; align-items:start; min-height:0 !important; }
.learning-note { position:relative !important; inset:auto !important; width:auto !important; min-height:210px !important; opacity:1 !important; transform:translate(var(--drag-x,0),var(--drag-y,0)) rotate(var(--note-r,0deg)) !important; }
.learning-note--one{--note-r:-1.4deg}.learning-note--two{--note-r:1.1deg}.learning-note--three{--note-r:.6deg}.learning-note--four{--note-r:-.9deg}

/* Final architecture handoff stays in the paper system for legibility. */
.epilogue-shift { color:var(--ink) !important; }
.epilogue-shift .callout-panel { background:var(--paper-2) !important; color:var(--ink) !important; border:1px solid rgba(41,46,38,.13); }
.epilogue-shift .callout-panel__media img { filter:none !important; }

@media (max-width: 980px) {
  #main > .bg-transition-breath[data-distance="major"] { height:10svh !important; min-height:62px !important; }
  #main > .bg-transition-breath[data-distance="medium"] { height:8svh !important; min-height:50px !important; }
  #main > .bg-transition-breath[data-distance="minor"] { height:6svh !important; min-height:38px !important; }
  .abc-v27 { grid-template-columns:1fr; grid-template-areas:"copy" "art" "principles"; }
  .abc-v27__illustration img { width:min(78vw,390px); }
  .abc-v27__principles { grid-template-columns:1fr; }
  .evidence-sources__grid { grid-template-columns:1fr !important; }
  .evidence-deck--three { justify-self:stretch; width:100%; min-height:430px !important; }
  .balance__features--v27 { grid-template-columns:repeat(2,1fr) !important; }
  .learning-notes { grid-template-columns:1fr; }
}

@media (max-width: 640px) {
  .page-wipe__word { font-size:58px; }
  .research-number--participants { min-height:300px; }
  .cog-tooltip { width:min(250px,70vw) !important; transform:translate(-50%,20px) scale(.98) !important; }
  .cog-tooltip.is-active { transform:translate(-50%,20px) scale(1) !important; }
  .balance__features--v27 { grid-template-columns:1fr !important; }
  .impact-card__arrow--draw { width:48px; margin-inline:3px; }
}

.impact-card__arrow--draw path { stroke-dasharray:90 !important; stroke-dashoffset:90 !important; }
.impact-card.is-visible .impact-card__arrow--draw path { animation: metricArrowDrawV27 .7s var(--ease-system) .24s forwards !important; }
@keyframes metricArrowDrawV27 { to { stroke-dashoffset:0; } }

/* ========================================================================== 
   V28; Agent story refinement: signature, research hierarchy, chart + cards
   ========================================================================== */

/* Handwritten Shiva mark: same drawn path in the loader and floating control. */
.header-signature-v28 {
  width: 62px;
  height: 28px;
  display:block;
  overflow:visible;
}
.header-signature-v28 path {
  fill:none;
  stroke:var(--ink);
  stroke-width:10;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.header-logo--signature { min-width:72px !important; padding-inline:10px !important; }

.page-wipe__wave,
.page-wipe__signature-line-v28,
.page-wipe__signature-shadow-v28 {
  fill:none;
  stroke:var(--ink);
  stroke-width:3.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.page-wipe__wave,
.page-wipe__signature-line-v28 { stroke-dasharray:1; stroke-dashoffset:1; }
.page-wipe__signature-shadow-v28 { opacity:.13; stroke-width:6.2; }
.page-wipe.is-writing .page-wipe__wave--lead { animation:v28Draw .62s var(--ease-system) forwards !important; }
.page-wipe.is-writing .page-wipe__signature-line-v28 { animation:v28Draw .78s var(--ease-system) .54s forwards; }
.page-wipe.is-writing .page-wipe__wave--tail { animation:v28Draw .66s var(--ease-system) 1.24s forwards !important; }
.page-wipe.is-written .page-wipe__wave,
.page-wipe.is-written .page-wipe__signature-line-v28 { stroke-dashoffset:0; }
@keyframes v28Draw { to { stroke-dashoffset:0; } }
.page-wipe__word { display:none !important; }

/* Sticky note grammar: paper rectangles, not arbitrary polygons. Rotation and tape
   provide informality; the silhouette itself remains predictable. */
:is(.role-note,.persona-job-note,.journey-note,.learning-note) {
  clip-path:none !important;
  border-radius:3px !important;
  border:1px solid rgba(41,46,38,.10) !important;
}
:is(.role-note,.persona-job-note,.journey-note,.learning-note)::before {
  border-radius:1px !important;
}
.persona-job-note--one { transform:rotate(-1.4deg) !important; }
.persona-job-note--two { transform:rotate(.9deg) !important; }
.persona-job-note--three { transform:rotate(-.55deg) !important; }

/* Uploaded Adnan illustration: blend the off-white scan into the paper. */
.page-case-agent .persona__portrait {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.page-case-agent .persona__portrait img {
  width:100%;
  height:auto;
  object-fit:contain !important;
  mix-blend-mode:multiply;
  filter:contrast(1.05) saturate(.88);
}

/* Discovery research: make the sample composition a focal evidence object. */
.research-number--participants { min-height:410px !important; padding:28px 30px 30px !important; }
.research-number__eyebrow { margin:0 0 14px !important; color:var(--orange); }
.research-number__figure strong { font-size:clamp(104px,11vw,172px) !important; }
.research-number__figure span { font-size:22px !important; max-width:12ch; line-height:1.05; }
.research-number__split { gap:18px !important; padding-block:18px !important; }
.research-number__split span {
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:end;
  gap:8px;
  font-size:12px !important;
  letter-spacing:.04em !important;
  text-transform:none !important;
}
.research-number__split b {
  font-family:var(--font-display);
  font-size:52px;
  line-height:.75;
  letter-spacing:-.06em;
  color:var(--orange);
}

/* Cognitive-load chart: one smooth gradient line. Markers are positioned from
   the actual SVG path in JS, so they can never float above the curve. */
.cog-area { fill:url(#cogAreaV28) !important; }
.cog-curve--gradient {
  fill:none !important;
  stroke:url(#cogLineV28) !important;
  stroke-width:7 !important;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cog-high,.cog-high--red,.cog-key,.cog-key-label { display:none !important; }
.cog-hotspot { color:var(--orange) !important; }
.cog-hotspot--peak { color:#9c4e3b !important; }
.cog-hotspot span {
  position:relative;
  width:11px !important;
  height:11px !important;
  border-radius:50%;
  background:currentColor !important;
  box-shadow:0 0 0 4px rgba(243,240,231,.88) !important;
  animation:none !important;
}
.cog-hotspot span::after {
  content:"";
  position:absolute;
  inset:-8px;
  border:1.5px solid currentColor;
  border-radius:50%;
  opacity:.6;
  transform:scale(.72);
  animation:cogPulseV28 2.4s cubic-bezier(.32,.72,.2,1) infinite;
}
.cog-hotspot:nth-of-type(2) span::after { animation-delay:.42s; }
.cog-hotspot:nth-of-type(3) span::after { animation-delay:.84s; }
@keyframes cogPulseV28 {
  0%,12% { transform:scale(.72); opacity:.62; }
  72%,100% { transform:scale(1.55); opacity:0; }
}
.cog-tooltip {
  width:min(310px,34vw) !important;
  transform:translate(16px,-50%) !important;
}
.cog-tooltip.is-active { transform:translate(16px,-50%) !important; }

/* Lifecycle: consistent internal padding on both sides and a reserved accordion
   disclosure area so opening it does not shift the following section. */
.lifecycle-flip__front,
.lifecycle-flip__back { padding:24px !important; box-sizing:border-box !important; }
.lifecycle-flip__front { background:#f8f5ed !important; }
.lifecycle-flip__back {
  justify-content:center !important;
  align-items:flex-start !important;
  overflow:auto !important;
  gap:12px !important;
}
.lifecycle-flip__back b { font-size:clamp(22px,1.8vw,30px) !important; line-height:.98 !important; }
.lifecycle-flip__back p { max-width:none !important; font-size:13px !important; line-height:1.42 !important; }
.lifecycle-scene__decision { margin-top:clamp(22px,3.5vh,42px) !important; }
.lifecycle-why { position:relative; min-height:158px; }
.lifecycle-why summary { position:relative; z-index:2; }
.lifecycle-why__body {
  position:absolute;
  left:0; right:0; top:54px;
  max-height:94px;
  overflow:auto;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .22s ease, transform .3s var(--ease-system);
}
.lifecycle-why[open] .lifecycle-why__body { opacity:1; transform:none; }

/* ABC: headline is the mnemonic; principles become the focal objects. */
.abc-v27 { grid-template-columns:minmax(0,.9fr) minmax(360px,.78fr) !important; gap:clamp(42px,6vw,92px) !important; }
.abc-v27__copy .h2 { max-width:10ch !important; font-size:clamp(64px,7vw,112px) !important; line-height:.84 !important; }
.abc-v27__copy .copy { max-width:38ch; }
.abc-v27__principles { gap:10px !important; }
.abc-v27__principle {
  min-height:210px !important;
  padding:22px !important;
  border:1px solid rgba(41,46,38,.12) !important;
  border-top:4px solid var(--orange) !important;
  border-radius:16px;
  background:rgba(243,240,231,.68);
  grid-template-columns:1fr !important;
  transition:transform .25s var(--ease-system), box-shadow .25s ease;
}
.abc-v27__principle:hover { transform:translateY(-5px); box-shadow:0 18px 42px rgba(41,46,38,.10); }
.abc-v27__principle > b { font-size:72px !important; }
.abc-v27__principle h3 { font-size:30px !important; margin:6px 0 8px !important; }
.abc-v27__principle p { font-size:14px !important; }

/* Low-fidelity validation: ratings read like measured evidence, not blank tiles. */
.testing-grid { gap:14px !important; }
.score-card {
  min-height:230px !important;
  border-radius:18px !important;
  border:1px solid rgba(41,46,38,.13);
  padding:24px !important;
  background:var(--paper) !important;
  box-shadow:none !important;
}
.score-card strong { font-size:clamp(58px,6.5vw,94px) !important; line-height:.82 !important; }
.score-card strong span { font-family:var(--font-body); font-size:.23em; font-weight:650; letter-spacing:0; }
.score-card p { max-width:20ch; font-size:16px !important; }
.score-card__meter { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:28px; }
.score-card__meter i { height:10px; border:1.5px solid var(--orange); border-radius:999px; position:relative; overflow:hidden; }
.score-card__meter i::after { content:""; position:absolute; inset:0; background:var(--orange); }
.score-card__meter i:last-child::after { transform:scaleX(calc((var(--score) * 5) - 4)); transform-origin:left; }
.score-card__timebar { margin-top:30px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; font-size:11px; font-weight:700; }
.score-card__timebar b { height:3px; border-radius:999px; background:linear-gradient(90deg,var(--ink) 0 24%,var(--orange) 24% 100%); position:relative; }
.score-card__timebar b::after { content:""; position:absolute; right:0; top:50%; width:9px; height:9px; border-radius:50%; background:var(--orange); transform:translateY(-50%); }

/* Reach: denser 2x2 data tableau; no decorative vectors needed. */
.impact-grid--reach { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
.impact-grid--reach .impact-card:nth-child(n) { grid-column:auto !important; }
.impact-card--reach {
  min-height:210px !important;
  display:grid !important;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto 1fr;
  gap:6px 18px;
  align-content:start;
  position:relative;
}
.impact-card--reach .impact-card__index { grid-row:1 / span 3; font:700 11px/1 var(--font-body); color:var(--orange); padding-top:8px; }
.impact-card--reach .impact-card__number { font-size:clamp(72px,7vw,118px) !important; }
.impact-card--reach .impact-card__label { margin-top:4px !important; font-size:14px !important; }
.impact-card--reach .impact-card__foot { margin-top:18px !important; max-width:35ch; }
.impact-mini { display:none !important; }

/* Efficiency arrows: hand-drawn path always exists; reveal animates the actual pathLength. */
.impact-card__arrow--draw { display:inline-block !important; width:74px !important; height:28px !important; }
.impact-card__arrow--draw path { stroke-dasharray:1 !important; stroke-dashoffset:1 !important; }
.impact-card.is-visible .impact-card__arrow--draw path { animation:metricArrowDrawV28 .72s var(--ease-system) .18s forwards !important; }
@keyframes metricArrowDrawV28 { to { stroke-dashoffset:0; } }

/* Chapter rail stays the same physical size on hover. The title drawer is a
   separate surface and never scales the progress track. */
.section-progress,
.section-progress:hover,
.section-progress:focus-within,
.section-progress.is-expanded {
  width:18px !important;
  transform:translateY(-50%) !important;
  scale:1 !important;
}
.section-progress__segment,
.section-progress:hover .section-progress__segment,
.section-progress:focus-within .section-progress__segment,
.section-progress.is-expanded .section-progress__segment {
  width:8px !important;
  height:24px !important;
  min-height:24px !important;
  transform:none !important;
}
.section-progress__drawer { right:calc(100% + var(--progress-drawer-gap)) !important; }

@media (max-width:980px) {
  .abc-v27 { grid-template-columns:1fr !important; }
  .abc-v27__copy .h2 { font-size:clamp(54px,12vw,84px) !important; }
  .impact-grid--reach { grid-template-columns:1fr !important; }
  .lifecycle-why { min-height:180px; }
  .lifecycle-why__body { max-height:118px; }
}
.cog-tooltip { transform:translate(var(--tip-shift,18px),-50%) !important; }
.cog-tooltip.is-active { transform:translate(var(--tip-shift,18px),-50%) !important; }

/* ========================================================================== 
   V29; instruction-set polish
   ========================================================================== */

:root {
  --type-display-xl: clamp(4.6rem, 10vw, 9.8rem);
  --type-display-lg: clamp(3.5rem, 6.7vw, 6.8rem);
  --type-display-md: clamp(2.7rem, 4.7vw, 4.8rem);
  --type-display-sm: clamp(2rem, 3vw, 3.15rem);
  --type-title: clamp(1.55rem, 2.15vw, 2.2rem);
  --type-body-lg: clamp(1.08rem, 1.28vw, 1.28rem);
  --type-body: clamp(.98rem, 1.02vw, 1.08rem);
  --type-body-sm: clamp(.88rem, .92vw, .98rem);
  --type-meta: clamp(.72rem, .7vw, .79rem);
  --section-poster: clamp(7.5rem, 13svh, 10.5rem);
  --section-narrative: clamp(5.75rem, 9.5svh, 8rem);
  --section-dense: clamp(4.25rem, 7svh, 6.2rem);
}

/* --- Reel-style preloader ------------------------------------------------ */
html.js:not(.is-ready) #main,
html.js:not(.is-ready) .site-footer {
  transform: translate3d(0,100vh,0);
}
#main,
.site-footer {
  will-change: transform;
  transition: transform .68s cubic-bezier(.2,.78,.18,1);
}
.page-wipe {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center;
  transform: translate3d(0,105%,0) !important;
  transition: transform .68s cubic-bezier(.2,.78,.18,1) !important;
  overflow: hidden !important;
  backface-visibility: hidden;
  contain: paint;
}
html.preloader-entering .page-wipe,
html.reel-incoming .page-wipe,
html.is-ready.is-leaving .page-wipe {
  transform: translate3d(0,0,0) !important;
}
html.is-ready:not(.is-leaving) .page-wipe {
  transform: translate3d(0,-105%,0) !important;
}
html.is-ready:not(.is-leaving) #main,
html.is-ready:not(.is-leaving) .site-footer {
  transform: translate3d(0,0,0) !important;
}
html.is-ready.is-leaving #main,
html.is-ready.is-leaving .site-footer {
  transform: translate3d(0,-100vh,0) !important;
}
html.is-ready .page-wipe.is-parked-bottom {
  transform: translate3d(0,105%,0) !important;
  transition: none !important;
}
html.is-ready.is-leaving .page-wipe.is-parked-bottom { transform:translate3d(0,0,0) !important; }
.page-wipe__signature-wrap--wave {
  width: 100vw !important;
  height: min(260px,30vh) !important;
  overflow: hidden !important;
}
.page-wipe__signature--wave {
  width: 100vw !important;
  height: 100% !important;
  overflow: hidden !important;
}
.page-wipe__wave,
.page-wipe__signature-line-v28 {
  fill: none !important;
  stroke: var(--ink) !important;
  stroke-width: 4.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.page-wipe__signature-shadow-v28 { display:none !important; }
.page-wipe.is-writing .page-wipe__wave--lead { animation:v29LoaderDraw .58s linear forwards !important; }
.page-wipe.is-writing .page-wipe__signature-line-v28 { animation:v29LoaderDraw .78s linear .54s forwards !important; }
.page-wipe.is-writing .page-wipe__wave--tail { animation:v29LoaderDraw .62s linear 1.26s forwards !important; }
.page-wipe.is-written .page-wipe__wave,
.page-wipe.is-written .page-wipe__signature-line-v28 { stroke-dashoffset:0; }
@keyframes v29LoaderDraw { to { stroke-dashoffset:0; } }

/* --- Analogy intro ------------------------------------------------------- */
.agent-analogy-intro { overflow:visible !important; }
.agent-analogy-intro__inner {
  overflow:visible !important;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(72px,9vh,120px) var(--gutter);
}
.analogy-reveal {
  overflow:visible !important;
  padding:.08em 0 .18em !important;
  line-height:.96 !important;
  max-width:14ch;
}
.analogy-reveal span { overflow:visible !important; padding-bottom:.08em; }

/* --- City story: let the image settle before sticky state changes -------- */
.page-case-agent .city-story-v13 { padding-top:clamp(8vh,96px,14vh) !important; }
.page-case-agent .city-story-v13__visual {
  position:sticky !important;
  top:14svh !important;
  align-self:start;
}
.page-case-agent .city-story-v13__card {
  height:min(70svh,700px) !important;
  max-height:calc(100svh - 24svh) !important;
}
.page-case-agent .city-story-v13__image { object-fit:contain !important; }

/* --- 95k dot formation -------------------------------------------------- */
.dot-field--scribble span {
  transition:none !important;
  opacity:0;
  will-change:transform,opacity;
}
.dot-field--scribble.is-settled span.is-filled:nth-child(3n) { animation:v29DotIdleA 6.8s ease-in-out .8s infinite alternate; }
.dot-field--scribble.is-settled span.is-filled:nth-child(5n) { animation:v29DotIdleB 8.1s ease-in-out 1.2s infinite alternate; }
@keyframes v29DotIdleA { to { transform:translate(1px,-1.2px) rotate(1.2deg) scale(1.018); } }
@keyframes v29DotIdleB { to { transform:translate(-1px,.8px) rotate(-1deg) scale(.992); } }

/* --- Security source stack --------------------------------------------- */
.evidence-sources__grid {
  grid-template-columns:minmax(0,1fr) minmax(360px,.82fr) !important;
  gap:clamp(42px,6vw,88px) !important;
}
.evidence-deck--three { min-height:430px !important; width:min(100%,520px) !important; }
.evidence-deck--three .evidence-card { width:min(74%,360px) !important; aspect-ratio:.92 !important; }
.evidence-card img { max-height:280px; object-fit:contain !important; }
.evidence-card figcaption span { font-size:12px !important; line-height:1.35 !important; }

/* --- Admin Adnan -------------------------------------------------------- */
.page-case-agent .persona__portrait img {
  mix-blend-mode:multiply !important;
  filter:contrast(1.08) saturate(.78) brightness(1.02) !important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 92%,transparent 100%);
}

/* --- Discovery research composition ------------------------------------ */
.discovery-v29 { padding-block:var(--section-dense) !important; }
.discovery-v29__heading { max-width:920px; margin-bottom:clamp(34px,5vh,58px); }
.research-summary--v29 {
  display:grid !important;
  grid-template-columns:minmax(290px,.7fr) minmax(0,1.3fr) !important;
  gap:clamp(28px,4vw,58px) !important;
  align-items:start !important;
}
.research-number--participants {
  min-height:330px !important;
  padding:24px 26px !important;
  transform:rotate(-.55deg) !important;
}
.research-number__figure strong { font-size:clamp(88px,8.6vw,136px) !important; }
.research-number__figure span { margin-top:10px !important; font-size:20px !important; }
.research-number__split b { font-size:clamp(40px,4vw,58px) !important; }
.discovery-v29__findings > .label { margin:0 0 18px; color:var(--orange); }
.research-insights--scribble { margin-top:0 !important; gap:12px !important; }
.insight-card--scribble {
  min-height:210px !important;
  padding:22px !important;
  background:rgba(243,240,231,.72) !important;
  border:1px solid rgba(41,46,38,.11) !important;
}
.system-scribble-icon--large { width:84px !important; height:62px !important; stroke-width:2 !important; }

/* --- Cognitive load ----------------------------------------------------- */
.cognitive-v24__chart { overflow:visible !important; }
.cog-curve--gradient { stroke:url(#cogLineV28) !important; stroke-width:7 !important; }
.cog-hotspot {
  width:18px !important;
  height:18px !important;
  aspect-ratio:1/1 !important;
  left:var(--x) !important;
  top:var(--y) !important;
  transform:translate(-50%,-50%) !important;
  padding:0 !important;
}
.cog-hotspot span {
  display:block;
  position:absolute !important;
  inset:4px !important;
  width:auto !important;
  height:auto !important;
  aspect-ratio:1/1 !important;
  border-radius:50% !important;
  background:var(--orange) !important;
  box-shadow:0 0 0 3px rgba(243,240,231,.92) !important;
}
.cog-hotspot span::after {
  content:"";
  position:absolute;
  inset:-7px;
  border:1.4px solid var(--orange);
  border-radius:50%;
  animation:v29CogPulse 2.6s cubic-bezier(.2,.72,.18,1) infinite !important;
}
@keyframes v29CogPulse {
  0% { transform:scale(.65); opacity:.58; }
  72%,100% { transform:scale(1.55); opacity:0; }
}
.cog-tooltip {
  position:absolute !important;
  left:var(--tip-x) !important;
  top:var(--tip-y) !important;
  width:min(248px,28vw) !important;
  padding:10px 12px !important;
  font-size:12px !important;
  line-height:1.4 !important;
  border-radius:10px !important;
}
.cog-label,.cog-y {
  font-family:var(--font-body) !important;
  font-size:16px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

/* --- ZFI: concise story + reserved accordion + image placeholder -------- */
.zfi-layout--v29 {
  display:grid !important;
  grid-template-columns:minmax(0,.9fr) minmax(340px,1.1fr) !important;
  gap:clamp(34px,5vw,72px) !important;
  align-items:start;
}
.zfi-layout--v29 .zfi-learnings {
  grid-column:1/-1;
  display:grid !important;
  grid-template-columns:180px repeat(2,minmax(0,1fr)) !important;
  gap:16px !important;
  align-items:stretch;
}
.zfi-more {
  position:relative;
  min-height:132px;
  margin-top:24px;
}
.zfi-more summary,.lifecycle-why summary {
  font-family:var(--font-body) !important;
  font-size:15px !important;
  font-weight:700 !important;
}
.zfi-more__body {
  position:absolute;
  left:0; right:0; top:48px;
  max-height:92px;
  overflow:auto;
  padding:14px 16px !important;
  font-size:15px !important;
  line-height:1.5 !important;
}
.zfi-media-placeholder { margin:0; min-height:360px; }
.zfi-media-placeholder__frame {
  min-height:360px;
  height:100%;
  display:grid;
  place-content:center;
  justify-items:center;
  text-align:center;
  padding:32px;
  border:1.5px dashed rgba(243,240,231,.5);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(243,240,231,.08),rgba(156,78,59,.10));
}
.zfi-media-placeholder__frame span { font:650 12px/1 var(--font-body); letter-spacing:.09em; text-transform: none; color:var(--orange-soft); }
.zfi-media-placeholder__frame b { margin-top:16px; font:500 clamp(28px,3vw,44px)/.98 var(--font-display); max-width:10ch; }
.zfi-media-placeholder__frame small { margin-top:12px; font-size:14px; opacity:.66; }
.zfi-learning-card p { font-size:16px !important; line-height:1.5 !important; }

/* --- Lifecycle ---------------------------------------------------------- */
.lifecycle-flip__front,.lifecycle-flip__back {
  padding:28px !important;
  overflow:hidden !important;
}
.lifecycle-flip__back {
  justify-content:flex-start !important;
  padding-top:30px !important;
}
.lifecycle-flip__back b { font-size:clamp(22px,1.7vw,28px) !important; }
.lifecycle-flip__back p { font-size:15px !important; line-height:1.48 !important; margin:0 !important; }
.lifecycle-why { min-height:205px !important; }
.lifecycle-why__body {
  top:56px !important;
  max-height:132px !important;
  padding:14px 0 !important;
  font-size:15px !important;
  line-height:1.5 !important;
}
.lifecycle-scene__decision { max-width:860px; margin-inline:auto; }
.lifecycle-scene__conclusion { font-size:clamp(22px,2.2vw,32px) !important; line-height:1.18 !important; }

/* --- ABCs: editorial strips, not feature cards ------------------------- */
.abc-v27 { align-items:start !important; }
.abc-v27__copy .h2 { margin-bottom:22px !important; }
.abc-v27__copy .copy { margin-top:0 !important; font-size:var(--type-body-lg) !important; }
.abc-v29__principles {
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:0 !important;
  border-bottom:1.5px solid var(--ink);
}
.abc-v29__principle {
  min-height:132px !important;
  padding:20px 0 !important;
  display:grid !important;
  grid-template-columns:90px minmax(0,1fr) 130px !important;
  align-items:center;
  gap:20px;
  border:0 !important;
  border-top:1.5px solid var(--ink) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.abc-v29__principle:hover { transform:translateX(6px) !important; box-shadow:none !important; }
.abc-v29__principle > b { font-size:72px !important; line-height:.75 !important; }
.abc-v29__principle h3 { margin:0 0 4px !important; font-size:clamp(28px,2.4vw,36px) !important; }
.abc-v29__principle p { font-size:15px !important; max-width:30ch; }
.abc-v29__principle svg { width:100%; fill:none; stroke:var(--orange); stroke-width:2.2; stroke-linecap:round; }

/* --- Low-fidelity validation ------------------------------------------- */
.validation-v29__grid {
  display:grid;
  grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);
  gap:clamp(40px,6vw,90px);
  align-items:center;
}
.validation-v29__copy .h2 { max-width:9ch; }
.validation-v29__copy .h2 strong { color:var(--orange); font-weight:500; }
.validation-v29__scores { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:34px; }
.validation-v29__scores .score-card {
  min-height:150px !important;
  padding:16px !important;
  border-radius:14px !important;
}
.validation-v29__scores .score-card strong { font-size:clamp(38px,3.5vw,54px) !important; }
.validation-v29__scores .score-card p { font-size:13px !important; margin-top:8px; }
.validation-v29__scores .score-card__meter { margin-top:18px; gap:3px; }
.validation-v29__scores .score-card__meter i { height:6px; }
.validation-v29__scores .score-card__timebar { margin-top:18px; }
.validation-v29__visuals { position:relative; min-height:560px; }
.validation-v29__visuals .iteration-card--primary { position:absolute; inset:0 6% 8% 0; z-index:2; }
.validation-v29__visuals .iteration-card--secondary { position:absolute; width:44%; right:0; bottom:0; z-index:3; transform:rotate(2.5deg); }
.validation-v29__visuals .iteration-card img { object-fit:cover; }

/* --- High-fidelity workflow: dedicated rail zone ----------------------- */
.page-case-agent .screen-flow__sticky {
  grid-template-columns:minmax(300px,.92fr) minmax(0,1.72fr) !important;
  grid-template-rows:1fr auto !important;
  align-items:center !important;
  column-gap:clamp(44px,5vw,78px) !important;
  row-gap:18px !important;
  padding-bottom:36px !important;
}
.page-case-agent .screen-flow__copy { min-height:0 !important; height:min(66vh,650px); }
.page-case-agent .screen-flow__headline { font-size:clamp(38px,4vw,62px) !important; max-width:11ch; }
.page-case-agent .flow-step { bottom:0 !important; max-width:340px !important; }
.page-case-agent .screen-flow__frame { height:min(66vh,690px) !important; }
.page-case-agent .screen-flow__rail {
  position:relative !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  grid-column:2;
  grid-row:2;
  display:flex !important;
  flex-direction:row !important;
  gap:6px !important;
  justify-content:center;
}
.page-case-agent .screen-flow__rail span {
  width:44px !important;
  height:4px !important;
  border-radius:999px !important;
}
.page-case-agent .screen-flow__rail span.is-active { width:44px !important; height:4px !important; }

/* --- Reach: one compact data strip on desktop -------------------------- */
.impact-grid--reach { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:10px !important; }
.impact-card--reach {
  min-height:172px !important;
  padding:18px !important;
  display:block !important;
}
.impact-card--reach .impact-card__index { display:block; font-size:12px !important; margin-bottom:14px; }
.impact-card--reach .impact-card__number { font-size:clamp(52px,4.8vw,82px) !important; }
.impact-card--reach .impact-card__label { font-size:14px !important; }
.impact-card--reach .impact-card__foot { margin-top:10px !important; font-size:12px !important; line-height:1.35 !important; }

/* --- Efficiency arrows -------------------------------------------------- */
.impact-card__arrow--draw {
  display:inline-block !important;
  width:76px !important;
  height:26px !important;
  overflow:visible !important;
  fill:none !important;
  stroke:var(--orange) !important;
  stroke-width:2.3 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
.impact-card__arrow--draw path { stroke-dasharray:1 !important; stroke-dashoffset:1 !important; }
.impact-card.is-visible .impact-card__arrow--draw path { animation:v29ArrowDraw .78s var(--ease-system) .16s forwards !important; }
@keyframes v29ArrowDraw { to { stroke-dashoffset:0; } }

/* --- Accordions globally ------------------------------------------------ */
.page-case details summary { font-size:15px !important; line-height:1.35 !important; }
.page-case details :is(p,li) { font-size:15px !important; line-height:1.5 !important; }

/* --- Chapter rail remains physically stable ---------------------------- */
.section-progress,
.section-progress:hover,
.section-progress:focus-within,
.section-progress.is-expanded { transform:translateY(-50%) !important; scale:1 !important; width:18px !important; }
.section-progress__segment,
.section-progress__segment.is-active,
.section-progress:hover .section-progress__segment,
.section-progress:focus-within .section-progress__segment { transform:none !important; width:8px !important; height:24px !important; }

@media (max-width:1100px) {
  .impact-grid--reach { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .validation-v29__grid { grid-template-columns:1fr; }
  .validation-v29__visuals { min-height:500px; }
}

@media (max-width:980px) {
  html.js:not(.is-ready) #main,html.js:not(.is-ready) .site-footer { transform:translate3d(0,100vh,0); }
  .page-case-agent .city-story-v13__visual { position:relative !important; top:auto !important; }
  .page-case-agent .city-story-v13__card { height:auto !important; max-height:none !important; aspect-ratio:1.15; }
  .research-summary--v29,.zfi-layout--v29 { grid-template-columns:1fr !important; }
  .zfi-layout--v29 .zfi-learnings { grid-column:auto; grid-template-columns:1fr !important; }
  .abc-v29__principle { grid-template-columns:70px 1fr !important; }
  .abc-v29__principle svg { display:none; }
  .validation-v29__scores { grid-template-columns:1fr 1fr; }
  .validation-v29__scores .score-card:last-child { grid-column:1/-1; }
  .page-case-agent .screen-flow__sticky { grid-template-columns:1fr !important; grid-template-rows:auto !important; }
  .page-case-agent .screen-flow__rail { grid-column:auto; grid-row:auto; }
}

@media (max-width:700px) {
  .page-wipe__signature-wrap--wave { height:180px !important; }
  .analogy-reveal { font-size:clamp(46px,13vw,72px) !important; max-width:9ch; }
  .validation-v29__scores { grid-template-columns:1fr; }
  .validation-v29__scores .score-card:last-child { grid-column:auto; }
  .validation-v29__visuals { min-height:auto; display:grid; gap:16px; }
  .validation-v29__visuals .iteration-card--primary,
  .validation-v29__visuals .iteration-card--secondary { position:relative; inset:auto; width:100%; transform:none; }
  .impact-grid--reach { grid-template-columns:1fr !important; }
}

/* V30; efficiency-arrow reliability fix
   Use a state transition instead of a keyframe dependency. The SVG remains
   hidden before reveal and deterministically draws when the card receives
   .is-visible. This prevents a failed/overridden animation from leaving the
   path permanently at stroke-dashoffset: 1. */
.impact-card__arrow--draw path {
  stroke-dasharray: 1 !important;
  stroke-dashoffset: 1 !important;
  animation: none !important;
  transition: stroke-dashoffset .78s var(--ease-system) .16s !important;
}
.impact-card.is-visible .impact-card__arrow--draw path {
  stroke-dashoffset: 0 !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .impact-card__arrow--draw path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

/* ==========================================================================\n   V31; Skiper-inspired Selected Work + Writing interactions\n   Adapted to the existing editorial design system; no React dependency.\n   ========================================================================== */

/* Selected work: vertically sticky cards that collect and scale as the user scrolls. */
.page-home .work-scroller--skiper {
  position: relative !important;
  min-height: auto !important;
  padding: clamp(180px, 28vh, 330px) 0 clamp(520px, 92vh, 980px) !important;
  overflow: visible !important;
}
.page-home .work-scroller--skiper .work-sticky {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  overflow: visible !important;
}
.page-home .work-scroller--skiper .work-heading {
  position: relative !important;
  top: auto !important;
  margin-bottom: clamp(72px, 11vh, 140px) !important;
}
.page-home .work-scroller--skiper .work-track {
  display: block !important;
  width: 100% !important;
  overflow: visible !important;
}
.page-home .work-scroller--skiper .case-stack-shell {
  --stack-index: 0;
  position: sticky !important;
  top: calc(9vh + (var(--stack-index) * 28px)) !important;
  min-height: 86vh !important;
  height: 86vh !important;
  width: min(1120px, calc(100vw - 96px)) !important;
  margin: 0 auto clamp(54px, 8vh, 96px) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  transform: none !important;
}
/* Selected work: scroll owns the scale; hover never changes card geometry.
   The fixed 1px border plus a fading 2px outside ring gives a stronger stroke
   without resizing the screenshot/caption or shifting neighbouring content. */
.page-home .work-scroller--skiper { --work-card-height: min(68vh, 650px); }
.page-home .work-scroller--skiper .case-stack-shell {
  min-height: max(86vh, calc(var(--work-card-height) + 148px)) !important;
  height: max(86vh, calc(var(--work-card-height) + 148px)) !important;
}
.page-home .work-scroller--skiper .case-stack-shell > .skiper-sticky-card {
  --stack-scale: 1;
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  flex: none;
  padding: 0 !important;
  width: 100% !important;
  height: var(--work-card-height) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  overflow: hidden !important;
  transform: scale(var(--stack-scale)) !important;
  transform-origin: top center !important;
  box-shadow: 0 0 0 2px transparent, var(--card-shadow) !important;
  transition: box-shadow 360ms ease, border-color 360ms ease !important;
  will-change: transform;
}
.page-home .work-scroller--skiper .case-stack-shell:is(:hover,:focus-within) > .skiper-sticky-card,
.page-home .work-scroller--skiper .case-stack-shell > .skiper-sticky-card:is(:hover,:focus-visible) {
  transform: scale(var(--stack-scale)) !important;
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 2px rgba(156,78,59,.9), 0 24px 64px rgba(41,46,38,.14) !important;
}

.page-home .case-stack-card::before,
.page-home .case-stack-card::after { content: none !important; display: none !important; }
.case-card__media {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #fff;
  border-bottom: var(--card-border);
}
.case-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--motion) var(--ease-system);
}
.case-card__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr) 24px;
  gap: 16px 24px;
  align-items: end;
  padding: 24px 32px 32px;
  background: var(--paper);
  color: var(--ink);
}
.case-card__meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.case-card__meta span:last-child { text-align: right; }
.case-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.05vw, 48px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.045em;
  color: var(--ink);
}
.case-card__description {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(14px, .95vw, 16px);
  line-height: 1.5;
  color: var(--ink-soft);
  opacity: 0;
  transform: none;
  transition: opacity 320ms ease;
}
.case-card__arrow {
  width: 24px;
  height: 24px;
  align-self: end;
  margin-bottom: 4px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-system);
}
.case-stack-shell:is(:hover,:focus-within) .case-card__description {
  opacity: 1;
  transform: none;
}
.case-stack-shell:is(:hover,:focus-within) .case-card__arrow {
  color: var(--orange);
  transform: translate(2px, -2px);
}
@media (hover:hover) and (pointer:fine) {
  .case-stack-card:is(:hover,:focus-visible) .case-card__media img { transform: scale(1.015); }
}
@media (max-width: 980px) {
  .case-card__media { aspect-ratio: 1.5; }
  .case-card__body {
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 12px 16px;
    padding: 24px;
  }
  .case-card__title { grid-column:1; font-size:clamp(28px, 4.5vw, 40px); }
  .case-card__description { grid-column:1 / -1; grid-row:3; opacity:1; transform:none; }
  .case-card__arrow { grid-column:2; grid-row:2; }
}
@media (hover:none), (pointer:coarse) {
  /* Touch users can read the same summary without a two-tap link trap. */
  .case-card__description { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  .case-card__description { opacity:1; transform:none; transition:none; }
  .case-card__media img, .case-card__arrow { transform:none !important; transition:none; }
}
/* Original project KPIs stay separate from the image and caption. Their
   space is reserved before hover, so revealing them cannot reflow the stack. */
.case-card-kpis {
  position: absolute;
  z-index: 9;
  top: calc(var(--work-card-height) + 24px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  color: var(--ink);
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}
.case-card-kpis > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.case-card-kpis dt {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .045em;
  text-transform: none;
  color: var(--ink-soft);
}
.case-card-kpis dd {
  order: -1;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(30px, 2.5vw, 40px);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.03em;
}
.case-stack-shell:is(:hover,:focus-within) > .case-card-kpis {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
/* A pointer can cross the small card-to-KPI gap without losing hover. */
.case-card-kpis::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -24px;
  height: 24px;
}
@media (min-width: 1440px) {
  .page-home .work-scroller--skiper .case-stack-shell {
    width: min(1120px, calc(100vw - 480px)) !important;
    min-height: 86vh !important;
    height: 86vh !important;
  }
  .case-card-kpis {
    top: clamp(32px, 10vh, 110px);
    left: auto;
    right: auto;
    width: 176px;
    padding: 0;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .case-card-kpis--right { left: calc(100% + 24px); }
  .case-card-kpis--left { right: calc(100% + 24px); }
  .case-card-kpis::before { top: 0; bottom: 0; height: auto; width: 24px; }
  .case-card-kpis--right::before { left: -24px; right: auto; }
  .case-card-kpis--left::before { right: -24px; left: auto; }
}
@media (max-width: 980px) {
  .page-home .work-scroller--skiper .case-stack-shell {
    flex-direction: column;
    align-items: stretch !important;
  }
  .page-home .work-scroller--skiper .case-stack-shell > .skiper-sticky-card {
    /* Let the screenshot ratio and caption set the height on small screens. */
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto auto;
  }
  .case-card-kpis {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: 24px;
    padding: 0 8px;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .case-card-kpis::before { display: none; }
}
@media (max-width: 540px) {
  .case-card-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
  .case-card-kpis dd { font-size: 30px; }
}
@media (hover: none), (pointer: coarse) {
  .case-card-kpis { opacity: 1; visibility: visible; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-home .work-scroller--skiper .case-stack-shell > .skiper-sticky-card,
  .page-home .work-scroller--skiper .case-stack-shell:is(:hover,:focus-within) > .skiper-sticky-card,
  .page-home .work-scroller--skiper .case-stack-shell > .skiper-sticky-card:is(:hover,:focus-visible) {
    transform: none !important;
    transition: none !important;
  }
  .case-card-kpis { opacity: 1; visibility: visible; transition: none; }
}

/* Writing: narrow vertical strips expand in-place on hover/focus/tap. */
.page-home .writing-hover-expand {
  --writing-active: 1;
  width: min(1180px, calc(100vw - 64px)) !important;
  min-height: 430px !important;
  margin: clamp(48px, 7vh, 96px) auto 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 8px !important;
  overflow: visible !important;
  perspective: none !important;
}
.page-home .writing-expand-card {
  position: relative !important;
  flex: 0 0 76px !important;
  width: 76px !important;
  height: 430px !important;
  min-width: 0 !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  border: 1px solid rgba(41,46,38,.13) !important;
  background: var(--paper-3) !important;
  cursor: pointer;
  transform: translateY(0) !important;
  transition: flex-basis .34s cubic-bezier(.2,.75,.25,1), width .34s cubic-bezier(.2,.75,.25,1), transform .28s var(--ease-system), box-shadow .28s var(--ease-system), opacity .24s ease !important;
  box-shadow: 0 16px 40px rgba(41,46,38,.08) !important;
  isolation: isolate;
}
.page-home .writing-expand-card.is-active,
.page-home .writing-expand-card:hover,
.page-home .writing-expand-card:focus-visible,
.page-home .writing-expand-card.is-tapped {
  flex-basis: min(390px, 34vw) !important;
  width: min(390px, 34vw) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 64px rgba(41,46,38,.16) !important;
}
.page-home .writing-expand-card.is-filtered-out {
  display: none !important;
}
.page-home .writing-expand-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.02);
  transition: transform .45s var(--ease-system), filter .3s ease;
  z-index: -3;
}
.page-home .writing-expand-card:is(.is-active,:hover,:focus-visible,.is-tapped) .writing-expand-card__image {
  transform: scale(1.035);
  filter: saturate(.9) contrast(1.03);
}
.page-home .writing-expand-card__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(20,20,20,.02) 20%, rgba(20,20,20,.78) 100%);
  opacity: .34;
  transition: opacity .25s ease;
}
.page-home .writing-expand-card:is(.is-active,:hover,:focus-visible,.is-tapped) .writing-expand-card__shade { opacity: .72; }
.page-home .writing-expand-card__spine {
  position: absolute;
  inset: 16px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  color: #fff;
  font-family: var(--font-body);
  z-index: 2;
  transition: opacity .18s ease;
}
.page-home .writing-expand-card__spine strong {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: none;
}
.page-home .writing-expand-card__spine span { font-size: 12px; opacity: .72; }
.page-home .writing-expand-card__cover {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: clamp(22px, 2.5vw, 34px);
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .22s ease .06s, transform .28s var(--ease-system) .04s;
}
.page-home .writing-expand-card__cover small,
.page-home .writing-expand-card__cover em {
  font-family: var(--font-body);
  font-size: 12px;
  font-style: normal;
  opacity: .72;
}
.page-home .writing-expand-card__cover strong {
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 48px);
  line-height: .95;
  max-width: 8ch;
  margin: 9px 0 12px;
}
.page-home .writing-expand-card:is(.is-active,:hover,:focus-visible,.is-tapped) .writing-expand-card__cover {
  opacity: 1;
  transform: translateY(0);
}
.page-home .writing-expand-card:is(.is-active,:hover,:focus-visible,.is-tapped) .writing-expand-card__spine { opacity: 0; }

@media (max-width: 980px) {
  .page-home .work-scroller--skiper { padding: 90px 0 120px !important; }
  .page-home .work-scroller--skiper .work-track { padding-inline:16px !important; }
  .page-home .work-scroller--skiper .case-stack-shell {
    position: relative !important;
    top: auto !important;
    width: min(100%, 680px) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto;
    margin: 0 auto 28px !important;
    display: block !important;
  }
  .page-home .work-scroller--skiper .skiper-sticky-card {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto auto;
    transform: none !important;
  }
  .page-home .writing-hover-expand {
    width: calc(100vw - 32px) !important;
    min-height: 390px !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .page-home .writing-hover-expand::-webkit-scrollbar { display:none; }
  .page-home .writing-expand-card,
  .page-home .writing-expand-card:is(.is-active,:hover,:focus-visible,.is-tapped) {
    flex: 0 0 min(78vw, 340px) !important;
    width: min(78vw, 340px) !important;
    height: 390px !important;
    scroll-snap-align: center;
  }
  .page-home .writing-expand-card__cover { opacity:1; transform:none; }
  .page-home .writing-expand-card__spine { opacity:0; }
  .page-home .writing-expand-card__shade { opacity:.66; }
}

/* ========================================================================== 
   V33; targeted visual + interaction fixes
   ========================================================================== */

/* 1. Preloader: preserve the physical panel and continuous line. The JS now
   waits for the tail path (the final stroke) before dismissing the panel. */
.page-wipe {
  overflow: hidden !important;
  background: var(--orange) !important;
}
.page-wipe__signature-wrap--wave,
.page-wipe__signature--wave { overflow: hidden !important; }
.page-wipe__wave,
.page-wipe__signature-line-v28 {
  stroke-width: 4.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.page-wipe.is-writing .page-wipe__wave--lead { animation-duration:.64s !important; }
.page-wipe.is-writing .page-wipe__signature-line-v28 { animation-duration:.78s !important; animation-delay:.58s !important; }
.page-wipe.is-writing .page-wipe__wave--tail { animation-duration:.70s !important; animation-delay:1.30s !important; }

/* 2. Achievement typewriter: cursor remains in the same inline text flow as
   the final typed character, even after the sentence wraps. */
.achievement-typewriter--loop p {
  display:block !important;
  width:min(100%, 38em) !important;
}
.achievement-typewriter--loop .achievement-typewriter__prompt {
  display:inline !important;
  margin-right:8px !important;
}
.achievement-typewriter--loop .typewriter-output {
  display:inline !important;
  max-width:none !important;
}
.achievement-typewriter--loop .typewriter-cursor {
  display:inline !important;
  margin-left:.06em !important;
  vertical-align:baseline !important;
}

/* 3. Case study KPIs are annotations, not another UI card. */
.page-home .case-stack-notes,
.page-home .case-stack-notes:hover,
.page-home .case-stack-shell:hover .case-stack-notes,
.page-home .case-stack-shell:focus-within .case-stack-notes {
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.page-home .case-stack-notes span {
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
}
.page-home .case-stack-notes span:nth-child(2n) { padding-left:12px !important; }

/* 4. Writing spines now carry each article/blog title. Keep them readable. */
.page-home .writing-expand-card__spine strong {
  max-height:300px;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px !important;
  line-height:1.1 !important;
  text-transform:none !important;
  letter-spacing:-.01em !important;
}

/* 5. The final statement returns to the paper system rather than a full orange
   viewport. Orange remains an accent on selected words. */
.page-home .manifesto,
.page-home .manifesto__frame {
  background:var(--paper-2) !important;
  color:var(--ink) !important;
}
.page-home .manifesto__halo { border-color:rgba(156,78,59,.18) !important; }
.page-home .manifesto__word.is-accent { color:var(--orange) !important; }

/* 6. 95k field: guarantee the generated 100-dot grid has measurable geometry
   and remains visible once the scroll-driven formation settles. */
.dot-field--scribble.has-dots {
  min-width:355px !important;
  min-height:355px !important;
  align-content:center !important;
  justify-content:center !important;
}
.dot-field--scribble.has-dots span {
  display:block !important;
  visibility:visible !important;
}
.dot-field--scribble.is-settled span { opacity:1 !important; }
@media (max-width:980px) {
  .dot-field--scribble.has-dots { min-width:250px !important; min-height:250px !important; }
}

/* 7. Cognitive-load chart. Previous CSS left the native `translate` property
   active while also applying transform:translate(), which shifted every marker
   twice. Reset it so marker centres coincide with the SVG path exactly. */
.cog-hotspot {
  translate:none !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  padding:0 !important;
  border:0 !important;
  line-height:0 !important;
  box-sizing:border-box !important;
  transform:translate(-50%,-50%) !important;
}
.cog-hotspot span {
  inset:4px !important;
  width:10px !important;
  height:10px !important;
  aspect-ratio:1 !important;
  box-sizing:border-box !important;
}
.cog-tooltip {
  width:max-content !important;
  max-width:min(245px,34vw) !important;
  min-width:0 !important;
  padding:9px 11px !important;
  font-size:12px !important;
  line-height:1.35 !important;
  border-radius:9px !important;
}
#cogLineV28 stop:nth-child(1) { stop-color:#292826 !important; }
#cogLineV28 stop:nth-child(2) { stop-color:#9c4e3b !important; }
#cogLineV28 stop:nth-child(3) { stop-color:#3a302b !important; }

/* 11. Chapter rail: hover reveals the separate title drawer only. Neither the
   track nor its segments may increase in height/width/scale. */
.section-progress,
.section-progress:hover,
.section-progress:focus-within,
.section-progress.is-expanded {
  width:18px !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  transform:translateY(-50%) !important;
  scale:1 !important;
  padding:6px 3px !important;
  gap:5px !important;
}
.section-progress__segment,
.section-progress__segment.is-active,
.section-progress:hover .section-progress__segment,
.section-progress:focus-within .section-progress__segment,
.section-progress.is-expanded .section-progress__segment {
  width:8px !important;
  height:24px !important;
  min-height:24px !important;
  max-height:24px !important;
  transform:none !important;
  scale:1 !important;
  flex:none !important;
}
.section-progress__drawer {
  right:calc(100% + var(--progress-drawer-gap)) !important;
  top:50% !important;
  max-height:min(76vh,690px) !important;
}


/* V34; video-verified preloader repair. JavaScript measures each connected
   SVG path and animates its real length, so there are no detached dash fragments. */
.page-wipe.is-js-drawing.is-writing .page-wipe__wave--lead,
.page-wipe.is-js-drawing.is-writing .page-wipe__signature-line-v28,
.page-wipe.is-js-drawing.is-writing .page-wipe__wave--tail {
  animation: none !important;
}

/* True reel stack: while the loader occupies the viewport, the incoming page
   physically waits one viewport below it, then rises as the loader exits upward. */
html.js:not(.is-ready) #main,
html.js:not(.is-ready) .site-footer {
  transform: translate3d(0,100vh,0) !important;
}
html.is-ready:not(.is-leaving) #main,
html.is-ready:not(.is-leaving) .site-footer {
  transform: translate3d(0,0,0) !important;
}

/* ========================================================================
   V36; FIGMA ICON SYSTEM + IMAGE RESTORE
   User-authored Figma SVGs replace generic inline doodles. Keep these as
   actual SVG image assets so their original hand-drawn path work is preserved.
   ======================================================================== */
.figma-icon {
  display:block;
  flex:none;
  object-fit:contain;
  max-width:100%;
}

/* Adnan's jobs: one authored icon per sticky note. */
.persona-job-note__icon {
  width:58px;
  height:58px;
  margin-top:18px;
}
.persona-job-note strong { margin-top:auto !important; }

/* Discovery research: use the supplied research icon family. */
.research-insight__icon {
  width:76px;
  height:76px;
  margin-bottom:24px;
}
.insight-card--scribble {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.insight-card--scribble h3 { margin-top:auto !important; }

/* Agent lifecycle: authored phase icons occupy the visual centre of each card. */
.lifecycle-flip__front {
  display:grid !important;
  grid-template-rows:auto 1fr auto;
  align-items:start;
}
.lifecycle-flip__icon {
  width:76px;
  height:76px;
  align-self:center;
  justify-self:center;
}
.lifecycle-flip__front span { align-self:end; }

/* Experience vs release: the Figma set replaces generic diagrams. */
.balance__features--v27 .balance__feature > .balance__feature-icon,
.balance__feature-icon {
  width:72px !important;
  height:72px !important;
  align-self:start;
  justify-self:start;
  object-fit:contain;
}
.balance__features--v27 .balance__feature b { align-self:end; }

/* Learnings: same authored icon grammar as discovery. */
.learning-note__icon {
  width:88px;
  height:88px;
  object-fit:contain;
}
.learning-note strong { margin-top:auto !important; }

/* Keep uploaded illustrations/photos visible when the page colour interpolates. */
.page-case-agent img,
.page-home img,
.page-case-domain img {
  visibility:visible;
}

@media (max-width:760px) {
  .persona-job-note__icon { width:52px; height:52px; }
  .research-insight__icon { width:68px; height:68px; }
  .lifecycle-flip__icon { width:60px; height:60px; }
  .balance__feature-icon { width:64px !important; height:64px !important; }
  .learning-note__icon { width:78px; height:78px; }
}

/* ========================================================================
   V37; Lead-story editorial system
   Decisions are evidence-led interruptions, not additional card furniture.
   ======================================================================== */

.page-case-agent .decision-band {
  position:relative;
  padding:clamp(70px,9vh,118px) 0;
  border-block:1px solid rgba(41,46,38,.16);
}
.page-case-agent .decision-band--paper { background:transparent; color:var(--ink); }
.page-case-agent .decision-band--ink {
  background:var(--ink) !important;
  color:var(--paper);
  border-color:rgba(243,240,231,.18);
}
.page-case-agent .decision-band__inner {
  display:grid;
  grid-template-columns:minmax(110px,.25fr) minmax(0,1fr);
  gap:clamp(28px,5vw,82px);
  align-items:start;
  max-width:1180px;
}
.page-case-agent .decision-band__index {
  font:650 12px/1.1 var(--font-body);
  letter-spacing:.09em;
  text-transform: none;
  color:var(--orange);
  padding-top:.6em;
}
.page-case-agent .decision-band__title {
  font:600 clamp(38px,4.7vw,72px)/.95 var(--font-display);
  letter-spacing:-.045em;
  max-width:17ch;
  text-wrap:balance;
}
.page-case-agent .decision-band__copy {
  margin-top:22px;
  max-width:66ch;
  font:500 clamp(16px,1.25vw,19px)/1.6 var(--font-body);
  opacity:.72;
}
.page-case-agent .decision-band--ink .decision-band__copy { opacity:.68; }

.page-case-agent .decision-inline {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:clamp(20px,3vw,44px);
  margin-top:clamp(34px,5vh,64px);
  padding-top:24px;
  border-top:1px solid rgba(41,46,38,.22);
  max-width:920px;
}
.page-case-agent .decision-inline > span,
.page-case-agent .architecture-lead-note > span,
.page-case-agent .impact-attribution > span {
  font:650 11px/1.15 var(--font-body);
  letter-spacing:.085em;
  text-transform: none;
  color:var(--orange);
}
.page-case-agent .decision-inline h3 {
  font:600 clamp(25px,2.3vw,36px)/1 var(--font-display);
  letter-spacing:-.035em;
}
.page-case-agent .decision-inline p {
  margin-top:10px;
  max-width:64ch;
  font:500 15px/1.58 var(--font-body);
  opacity:.7;
}
.page-case-agent .decision-inline--dark {
  border-color:rgba(243,240,231,.22);
  color:var(--paper);
  max-width:none;
  margin-top:28px;
}
.page-case-agent .decision-inline--dark p { opacity:.72; }

/* Research: let the finding language carry the hierarchy rather than more cards. */
.page-case-agent .discovery-v29__heading .h2 { max-width:18ch; }
.page-case-agent .research-insights--scribble .insight-card h3 {
  font-size:clamp(22px,2vw,30px) !important;
  line-height:1.02 !important;
  max-width:13ch;
}
.page-case-agent .research-insights--scribble .insight-card p {
  font-size:14px !important;
  line-height:1.55 !important;
}

/* Architecture leadership note: compact enough to coexist with sticky before/after. */
.page-case-agent .architecture-lead-note {
  margin:clamp(22px,3.5vh,42px) 0 clamp(26px,4vh,48px);
  max-width:48ch;
  padding:18px 0 0;
  border-top:1px solid rgba(41,46,38,.2);
}
.page-case-agent .architecture-lead-note p {
  margin-top:10px;
  font:500 14px/1.55 var(--font-body);
  opacity:.7;
}

/* Validation should answer what changed, not only show scores. */
.page-case-agent .validation-change-log {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(220px,.85fr) repeat(2,minmax(0,1fr));
  gap:0;
  margin-top:clamp(42px,6vh,78px);
  border-block:1px solid rgba(41,46,38,.2);
}
.page-case-agent .validation-change-log > * {
  padding:clamp(22px,2.6vw,36px);
  border-right:1px solid rgba(41,46,38,.16);
}
.page-case-agent .validation-change-log > *:last-child { border-right:0; }
.page-case-agent .validation-change-log__head span {
  font:650 11px/1.1 var(--font-body);
  color:var(--orange);
  text-transform: none;
  letter-spacing:.085em;
}
.page-case-agent .validation-change-log__head h3 {
  margin-top:12px;
  font:600 clamp(26px,2.4vw,38px)/.98 var(--font-display);
  letter-spacing:-.04em;
}
.page-case-agent .validation-change-log article b {
  font:600 clamp(20px,1.7vw,26px)/1 var(--font-display);
}
.page-case-agent .validation-change-log article p {
  margin-top:12px;
  font:500 14px/1.55 var(--font-body);
  opacity:.7;
}

/* Release prioritisation: show the method without fabricating exact chart coordinates. */
.page-case-agent .release-priority__intro {
  max-width:66ch;
  margin-top:20px;
  font-size:clamp(16px,1.25vw,19px) !important;
}
.page-case-agent .effort-impact-method {
  display:grid;
  grid-template-columns:190px 1fr;
  gap:24px;
  align-items:center;
  margin:34px 0 18px;
  padding:18px 0;
  border-block:1px solid rgba(41,46,38,.16);
}
.page-case-agent .effort-impact-method > div:first-child {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  font:600 10px/1 var(--font-body);
  text-transform: none;
  letter-spacing:.07em;
}
.page-case-agent .effort-impact-method > div:first-child i {
  height:2px;
  background:linear-gradient(90deg,var(--orange),rgba(41,46,38,.16));
  position:relative;
}
.page-case-agent .effort-impact-method > div:first-child i::before,
.page-case-agent .effort-impact-method > div:first-child i::after {
  content:"";
  position:absolute;
  top:50%;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--orange);
  transform:translateY(-50%);
}
.page-case-agent .effort-impact-method > div:first-child i::before { left:18%; }
.page-case-agent .effort-impact-method > div:first-child i::after { left:58%; background:var(--ink); }
.page-case-agent .effort-impact-method > div:last-child { display:flex; flex-direction:column; gap:4px; }
.page-case-agent .effort-impact-method b { font:600 17px/1.1 var(--font-display); }
.page-case-agent .effort-impact-method small { font:500 13px/1.45 var(--font-body); opacity:.62; }

/* Impact attribution: clearer source-of-truth for a lead-level portfolio. */
.page-case-agent .impact-attribution {
  margin-top:clamp(54px,7vh,92px);
  padding:26px 0 0;
  border-top:1px solid rgba(41,46,38,.2);
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:clamp(24px,4vw,60px);
}
.page-case-agent .impact-attribution p {
  max-width:72ch;
  font:500 clamp(15px,1.2vw,18px)/1.6 var(--font-body);
  opacity:.72;
}

/* Project-specific learnings need enough room for an actual thought. */
.page-case-agent .learning-note small {
  font-size:13.5px !important;
  line-height:1.5 !important;
  max-width:30ch;
}
.page-case-agent .learning-note strong {
  max-width:15ch;
  line-height:1 !important;
}

@media (max-width: 900px) {
  .page-case-agent .decision-band__inner,
  .page-case-agent .decision-inline,
  .page-case-agent .impact-attribution { grid-template-columns:1fr; gap:14px; }
  .page-case-agent .validation-change-log { grid-template-columns:1fr; }
  .page-case-agent .validation-change-log > * { border-right:0; border-bottom:1px solid rgba(41,46,38,.16); }
  .page-case-agent .validation-change-log > *:last-child { border-bottom:0; }
  .page-case-agent .effort-impact-method { grid-template-columns:1fr; }
}
.page-case-agent .discovery-v37__synthesis {
  margin-top:20px;
  max-width:70ch;
  font-size:clamp(16px,1.25vw,19px) !important;
  line-height:1.6 !important;
}

/* ========================================================================
   V38; PRELOADER STABILITY + TWO-FONT SYSTEM + DISCOVERY COMPOSITION
   ======================================================================== */

/* Preloader: one reveal surface, no independent dash fragments. */
.page-wipe__signature--wave {
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
.page-wipe.is-written .page-wipe__signature--wave {
  clip-path: inset(0 0% 0 0) !important;
  -webkit-clip-path: inset(0 0% 0 0) !important;
}
.page-wipe__wave,
.page-wipe__signature-line-v28,
.page-wipe.is-writing .page-wipe__wave--lead,
.page-wipe.is-writing .page-wipe__signature-line-v28,
.page-wipe.is-writing .page-wipe__wave--tail,
.page-wipe.is-js-drawing.is-writing .page-wipe__wave--lead,
.page-wipe.is-js-drawing.is-writing .page-wipe__signature-line-v28,
.page-wipe.is-js-drawing.is-writing .page-wipe__wave--tail {
  animation: none !important;
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
}
.page-wipe__signature-wrap--wave,
.page-wipe__signature--wave { overflow:hidden !important; }

/* The site has exactly two text typefaces. Any old signature/scribble aliases
   resolve to Syne; large editorial/display roles resolve to Cabinet Grotesk. */
:root {
  --font-display: "Cabinet Grotesk", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Syne", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-hand: var(--font-body);
  --font-scribble: var(--font-body);
  --font-signature: var(--font-body);
  --font-belove: var(--font-body);
  --font-geometric: var(--font-display);
  --font-neue: var(--font-body);
  --font-helvetica-neue: var(--font-body);
}

/* Sweep legacy one-off typography without changing the authored SVG mark. */
body.page-home.page-home *,
body.page-case.page-case-agent *,
body.page-case.page-case-domain * {
  font-family: var(--font-body) !important;
}
body.page-home.page-home :is(h1,h2,h3,h4,h5,h6,.display-xl,.display-lg,.display-md,.display-sm,.h1,.h2,.h3,.site-footer__title,.case-stack-card__title,.problem-stat__number,.pitch-metric strong,.impact-card strong,.score-card strong,.research-sample-inline strong),
body.page-case.page-case-agent :is(h1,h2,h3,h4,h5,h6,.display-xl,.display-lg,.display-md,.display-sm,.h1,.h2,.h3,.site-footer__title,.problem-stat__number,.pitch-metric strong,.impact-card strong,.score-card strong,.research-sample-inline strong),
body.page-case.page-case-domain :is(h1,h2,h3,h4,h5,h6,.display-xl,.display-lg,.display-md,.display-sm,.h1,.h2,.h3,.site-footer__title,.impact-card strong,.score-card strong) {
  font-family: var(--font-display) !important;
}
body.page-home.page-home :is(h1,h2,h3,h4,h5,h6,.display-xl,.display-lg,.display-md,.display-sm,.h1,.h2,.h3,.site-footer__title,.case-stack-card__title,.problem-stat__number,.pitch-metric strong,.impact-card strong,.score-card strong,.research-sample-inline strong) *,
body.page-case.page-case-agent :is(h1,h2,h3,h4,h5,h6,.display-xl,.display-lg,.display-md,.display-sm,.h1,.h2,.h3,.site-footer__title,.problem-stat__number,.pitch-metric strong,.impact-card strong,.score-card strong,.research-sample-inline strong) *,
body.page-case.page-case-domain :is(h1,h2,h3,h4,h5,h6,.display-xl,.display-lg,.display-md,.display-sm,.h1,.h2,.h3,.site-footer__title,.impact-card strong,.score-card strong) * {
  font-family: inherit !important;
}

/* Labels/counters belong to Syne, including the City counter and decisions. */
.page-case-agent :is(.city-story-v13__counter,.city-story-v13__step > span,.eyebrow,.label,.decision-band__index,.impact-card__index,.section-progress__peek small,.section-progress__drawer-item small) {
  font-family: var(--font-body) !important;
}

/* Discovery research: editorial sample strip, not another card. */
.page-case-agent .discovery-v29__heading {
  max-width: 980px;
  margin-bottom: clamp(26px,4vh,44px);
}
.page-case-agent .discovery-v37__synthesis {
  max-width: 70ch;
  margin-top: 18px;
}
.page-case-agent .research-summary--v29 {
  display: block !important;
}
.page-case-agent .research-sample-inline {
  display:grid;
  grid-template-columns:minmax(260px,1.35fr) minmax(280px,.8fr);
  align-items:end;
  gap:clamp(28px,5vw,72px);
  margin:0 0 clamp(42px,6vh,72px);
  padding:clamp(18px,2.4vw,30px) 0 clamp(22px,2.8vw,34px);
  border-top:1px solid rgba(41,46,38,.18);
  border-bottom:1px solid rgba(41,46,38,.18);
}
.page-case-agent .research-sample-inline__total {
  display:flex;
  align-items:flex-end;
  gap:18px;
}
.page-case-agent .research-sample-inline__total strong {
  font-size:clamp(78px,8.5vw,132px);
  line-height:.72;
  letter-spacing:-.065em;
  font-weight:600;
}
.page-case-agent .research-sample-inline__total span {
  max-width:10ch;
  padding-bottom:.2em;
  font:650 clamp(18px,1.5vw,23px)/1.05 var(--font-body) !important;
}
.page-case-agent .research-sample-inline__split {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.page-case-agent .research-sample-inline__split > span {
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:end;
  column-gap:12px;
  padding:4px 0 10px;
  border-bottom:2px solid var(--orange);
}
.page-case-agent .research-sample-inline__split b {
  font:600 clamp(42px,4vw,62px)/.8 var(--font-display) !important;
  letter-spacing:-.05em;
}
.page-case-agent .research-sample-inline__split small {
  padding-bottom:.12em;
  font:650 14px/1.1 var(--font-body) !important;
}
.page-case-agent .discovery-v29__findings > .label { margin-bottom:14px !important; }
.page-case-agent .research-insights--scribble .insight-card { min-height:270px !important; padding:26px !important; }
.page-case-agent .research-insights--scribble .insight-card p {
  font-size:13.5px !important;
  line-height:1.48 !important;
  max-width:32ch;
}

/* Decision bands: one divider only. The following journey used to add a
   second border, producing the double-line artifact shown in the screenshot. */
.page-case-agent .decision-band {
  border:0 !important;
}
.page-case-agent .decision-band--paper::after {
  content:"";
  position:absolute;
  left:var(--gutter);
  right:var(--gutter);
  bottom:0;
  height:1px;
  background:rgba(41,46,38,.16);
}
.page-case-agent .journey { border-top:0 !important; }
.page-case-agent .decision-band__index {
  font-family:var(--font-body) !important;
  font-size:12px !important;
  font-weight:650 !important;
  line-height:1.1 !important;
  letter-spacing:.09em !important;
}
.page-case-agent .decision-band__title { font-family:var(--font-display) !important; }
.page-case-agent .decision-band__copy { font-family:var(--font-body) !important; }

/* Adnan's authored SVGs: accent colours were edited in the source files for
   note-specific contrast. Keep image blending neutral here. */
.page-case-agent .persona-job-note__icon { filter:none !important; }

@media (max-width:760px) {
  .page-case-agent .research-sample-inline { grid-template-columns:1fr; gap:22px; }
  .page-case-agent .research-sample-inline__total strong { font-size:82px; }
  .page-case-agent .research-insights--scribble .insight-card { min-height:0 !important; }
}

/* ==========================================================
   V39; MANAGEMENT REPORTS STORY PROTOTYPE
   Uses DESIGN.md: Cabinet Grotesk + Syne, paper/ink/orange,
   poster/narrative/dense rhythms, restrained motion.
   ========================================================== */
.page-case-management-reports { --mr-line: rgba(41,46,38,.14); }
.page-case-management-reports #main { background: var(--paper); }
.page-case-management-reports .site-footer { position: relative; }
.page-case-management-reports .footer-reveal-spacer { display:none; }

.mr-hero { min-height: 100svh; display:grid; align-items:center; padding: clamp(110px,14svh,170px) 0 9svh; }
.mr-hero__grid { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(390px,.78fr); gap:clamp(48px,7vw,120px); align-items:center; }
.mr-hero__copy { max-width:860px; }
.mr-display { font-family:var(--font-display,"Cabinet Grotesk",Arial,sans-serif); font-weight:500; font-size:clamp(4rem,7.4vw,8.4rem); line-height:.91; letter-spacing:-.05em; text-wrap:balance; }
.mr-display--light { color:var(--paper); }
.mr-hero__lede { max-width:690px; margin-top:34px; }
.mr-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:38px; }
.mr-meta span { font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.78rem; font-weight:650; padding:9px 13px; border:1px solid var(--mr-line); border-radius:999px; }
.mr-hero__visual { position:relative; min-height:620px; display:grid; place-items:center; }
.mr-hero__visual::before { content:""; position:absolute; width:70%; aspect-ratio:1; border:1px solid rgba(156,78,59,.28); border-radius:50%; transform:translate(14%,-3%); }
.mr-report-sheet { width:min(100%,540px); min-height:590px; position:relative; background:var(--paper); border:1px solid var(--mr-line); border-radius:28px; padding:34px; box-shadow:0 28px 80px rgba(41,46,38,.12); transform:rotate(2.5deg); }
.mr-report-sheet::after { content:""; position:absolute; inset:16px -18px -18px 16px; z-index:-1; border:1px solid rgba(41,46,38,.10); border-radius:28px; background:var(--paper-2); }
.mr-report-sheet__top { display:flex; justify-content:space-between; gap:20px; font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.72rem; font-weight:650; letter-spacing:.03em; }
.mr-report-sheet__score { display:flex; align-items:flex-end; gap:16px; margin-top:54px; }
.mr-report-sheet__score b { font-family:var(--font-display,"Cabinet Grotesk",Arial,sans-serif); font-size:7rem; font-weight:500; line-height:.75; letter-spacing:-.05em; }
.mr-report-sheet__score span { max-width:140px; font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:1rem; line-height:1.25; }
.mr-report-sheet__rule { height:1px; background:var(--mr-line); margin:44px 0 26px; }
.mr-report-sheet__rows { display:grid; gap:0; }
.mr-report-sheet__rows span { min-height:58px; display:grid; grid-template-columns:18px 1fr auto; gap:12px; align-items:center; border-bottom:1px solid var(--mr-line); font-family:var(--font-body,"Syne",Arial,sans-serif); }
.mr-report-sheet__rows i { width:9px; height:9px; border-radius:50%; background:var(--ink); }
.mr-report-sheet__rows i.is-warn { background:var(--yellow); }
.mr-report-sheet__rows i.is-hot { background:var(--orange); }
.mr-report-sheet__rows b { font-size:.92rem; }
.mr-report-sheet__rows em { font-size:.78rem; font-style:normal; color:var(--ink-soft); }
.mr-report-sheet__scribble { position:absolute; right:24px; bottom:22px; width:150px; color:var(--orange); }
.mr-report-sheet__scribble path { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; }

.mr-pitch, .mr-close { min-height:88svh; display:grid; align-items:center; background:var(--ink); color:var(--paper); padding:12svh 0; }
.mr-pitch__inner { display:grid; gap:30px; }
.mr-pitch .mr-display { max-width:1250px; font-size:clamp(3.2rem,6.2vw,7rem); }
.mr-close .mr-display { max-width:1150px; font-size:clamp(3rem,5.8vw,6.6rem); }
.mr-close .lede { margin-top:28px; max-width:720px; color:rgba(243,240,231,.72); }

.mr-section-head { max-width:950px; }
.mr-section-head .h1 { margin-top:14px; }
.mr-section-head .lede { margin-top:24px; max-width:760px; }
.mr-baseline { padding-block:9svh; }
.mr-flow { margin-top:68px; display:grid; grid-template-columns:1fr 150px 1fr 150px 1fr; align-items:center; gap:18px; }
.mr-flow__node { min-height:190px; border-top:1px solid var(--ink); padding:18px 8px 8px; display:grid; align-content:space-between; }
.mr-flow__node span { font-family:var(--font-body,"Syne",Arial,sans-serif); color:var(--orange); font-size:.74rem; font-weight:700; }
.mr-flow__node b { font-family:var(--font-display,"Cabinet Grotesk",Arial,sans-serif); font-size:clamp(1.8rem,2.4vw,3rem); font-weight:500; }
.mr-flow__node em { font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.88rem; font-style:normal; color:var(--ink-soft); }
.mr-flow > svg path { fill:none; stroke:var(--orange); stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }

.mr-problem__grid { margin-top:18px; display:grid; grid-template-columns:1fr .72fr; gap:clamp(48px,8vw,130px); align-items:end; }
.mr-problem__grid .lede { max-width:610px; padding-bottom:8px; }
.mr-tension { margin-top:82px; display:grid; grid-template-columns:1fr 86px 1fr; border-top:1px solid var(--mr-line); border-bottom:1px solid var(--mr-line); }
.mr-tension > div:not(.mr-tension__hinge) { padding:44px 0 52px; }
.mr-tension > div:last-child { text-align:right; }
.mr-tension span { font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform: none; color:var(--orange); }
.mr-tension b { display:block; margin-top:16px; font-family:var(--font-display,"Cabinet Grotesk",Arial,sans-serif); font-size:clamp(2rem,3vw,3.7rem); line-height:1; font-weight:500; }
.mr-tension__hinge { display:grid; place-items:center; }
.mr-tension__hinge svg { width:62px; }
.mr-tension__hinge path { fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; }

.mr-question-grid { margin-top:58px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--mr-line); }
.mr-question-grid article { min-height:320px; padding:22px 24px 30px 0; border-right:1px solid var(--mr-line); display:flex; flex-direction:column; }
.mr-question-grid article + article { padding-left:24px; }
.mr-question-grid article:last-child { border-right:0; }
.mr-question-grid span { font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.78rem; font-weight:700; color:var(--orange); }
.mr-question-grid h3 { margin-top:auto; font-family:var(--font-display,"Cabinet Grotesk",Arial,sans-serif); font-weight:500; font-size:clamp(1.7rem,2vw,2.5rem); line-height:1; letter-spacing:-.03em; }
.mr-question-grid p { margin-top:14px; font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.94rem; color:var(--ink-soft); }

.mr-decision { padding:9svh 0; border-block:1px solid var(--mr-line); }
.mr-decision__inner { display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:start; }
.mr-decision__label { font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.76rem; font-weight:700; letter-spacing:.09em; text-transform: none; color:var(--orange); padding-top:9px; }
.mr-decision h2 { max-width:1050px; font-family:var(--font-display,"Cabinet Grotesk",Arial,sans-serif); font-size:clamp(2.7rem,5vw,5.8rem); line-height:.94; letter-spacing:-.045em; font-weight:500; }
.mr-decision p:not(.mr-decision__label) { margin-top:24px; max-width:760px; font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:1.05rem; color:var(--ink-soft); }
.mr-decision--orange { background:var(--orange); border:0; color:var(--ink); }
.mr-decision--orange .mr-decision__label { color:var(--paper); }
.mr-decision--orange p:not(.mr-decision__label) { color:rgba(41,46,38,.72); }

.mr-anatomy__grid { display:grid; grid-template-columns:.72fr 1fr; gap:clamp(54px,8vw,130px); align-items:center; }
.mr-anatomy__copy .h1 { margin-top:14px; }
.mr-anatomy__steps { margin-top:46px; display:grid; gap:0; border-top:1px solid var(--mr-line); }
.mr-anatomy__steps li { display:grid; grid-template-columns:50px 1fr; gap:16px; padding:20px 0; border-bottom:1px solid var(--mr-line); }
.mr-anatomy__steps span { font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.72rem; font-weight:700; color:var(--orange); }
.mr-anatomy__steps b { font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:1rem; }
.mr-anatomy__steps p { margin-top:4px; font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.9rem; color:var(--ink-soft); }
.mr-live-report { border:1px solid var(--mr-line); border-radius:28px; background:var(--paper); box-shadow:0 26px 70px rgba(41,46,38,.1); overflow:hidden; }
.mr-live-report__tabs { display:flex; gap:8px; padding:18px; border-bottom:1px solid var(--mr-line); }
.mr-live-report__tabs button { min-height:44px; padding:0 16px; border-radius:999px; font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.82rem; font-weight:650; border:1px solid var(--mr-line); cursor:pointer; }
.mr-live-report__tabs button.is-active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.mr-live-report__body { min-height:520px; padding:40px; }
.mr-live-report__body > section { display:none; min-height:430px; }
.mr-live-report__body > section.is-active { display:block; animation:mrPanelIn .38s var(--ease) both; }
@keyframes mrPanelIn { from { opacity:0; transform:translateY(10px);} to {opacity:1; transform:none;} }
.mr-live-report__meta { font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.76rem; font-weight:650; color:var(--ink-soft); }
.mr-live-report h3 { max-width:620px; margin-top:56px; font-family:var(--font-display,"Cabinet Grotesk",Arial,sans-serif); font-size:clamp(2.2rem,3.5vw,4rem); line-height:.96; font-weight:500; letter-spacing:-.04em; }
.mr-mini-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:54px; background:var(--mr-line); border:1px solid var(--mr-line); }
.mr-mini-stats span { background:var(--paper); padding:20px; }
.mr-mini-stats b { font-family:var(--font-display,"Cabinet Grotesk",Arial,sans-serif); font-size:2.4rem; font-weight:500; }
.mr-mini-stats em { display:block; font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.75rem; font-style:normal; color:var(--ink-soft); }
.mr-spark { height:110px; margin-top:42px; display:flex; gap:10px; align-items:end; border-bottom:1px solid var(--mr-line); }
.mr-spark i { width:100%; height:var(--h); background:var(--ink); opacity:.18; border-radius:6px 6px 0 0; }
.mr-spark i.hot { background:var(--orange); opacity:1; }
.mr-trend { width:100%; margin-top:58px; overflow:visible; }
.mr-trend .axis { fill:none; stroke:var(--mr-line); stroke-width:2; }
.mr-trend .line { fill:none; stroke:var(--ink); stroke-width:5; stroke-linecap:round; }
.mr-trend circle { fill:var(--orange); }
.mr-action-list { margin-top:52px; display:grid; }
.mr-action-list li { display:grid; grid-template-columns:12px 1fr auto; gap:14px; align-items:center; padding:20px 0; border-bottom:1px solid var(--mr-line); font-family:var(--font-body,"Syne",Arial,sans-serif); }
.mr-action-list i { width:9px; height:9px; background:var(--orange); border-radius:50%; }
.mr-action-list span b, .mr-action-list span em { display:block; }
.mr-action-list span b { font-size:.94rem; }
.mr-action-list span em { margin-top:3px; font-size:.75rem; font-style:normal; color:var(--ink-soft); }
.mr-action-list strong { font-size:.75rem; font-weight:650; }

.mr-two-audiences .h1 { margin-top:14px; }
.mr-audience-grid { margin-top:58px; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--ink); }
.mr-audience-grid > article { min-height:610px; padding:24px 48px 32px 0; display:flex; flex-direction:column; }
.mr-audience-grid > article + article { border-left:1px solid var(--mr-line); padding-left:48px; }
.mr-audience-grid__num { font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.74rem; font-weight:700; color:var(--orange); }
.mr-audience-grid .label { margin-top:60px; font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.76rem; font-weight:700; text-transform: none; letter-spacing:.08em; }
.mr-audience-grid h3 { margin-top:16px; max-width:530px; font-family:var(--font-display,"Cabinet Grotesk",Arial,sans-serif); font-size:clamp(2.3rem,3.5vw,4.2rem); font-weight:500; line-height:.96; letter-spacing:-.04em; }
.mr-config-ui { margin-top:auto; border:1px solid var(--mr-line); border-radius:20px; overflow:hidden; }
.mr-config-ui label { min-height:72px; padding:14px 18px; display:grid; grid-template-columns:110px 1fr; align-items:center; border-bottom:1px solid var(--mr-line); font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.8rem; color:var(--ink-soft); }
.mr-config-ui strong { color:var(--ink); font-weight:600; }
.mr-config-ui button { margin:14px; min-height:44px; padding:0 16px; border-radius:999px; background:var(--orange); font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.8rem; font-weight:700; }
.mr-reader-stack { margin-top:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mr-reader-stack span { min-height:150px; padding:18px; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid var(--mr-line); border-radius:18px; }
.mr-reader-stack b { font-family:var(--font-display,"Cabinet Grotesk",Arial,sans-serif); font-size:3rem; font-weight:500; line-height:1; }
.mr-reader-stack em { margin-top:6px; font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.78rem; font-style:normal; color:var(--ink-soft); }
.mr-audience-grid__reader .copy { margin-top:20px; max-width:560px; }

.mr-depth-demo { margin-top:60px; border-top:1px solid var(--ink); }
.mr-depth-demo details { border-bottom:1px solid var(--mr-line); }
.mr-depth-demo summary { list-style:none; cursor:pointer; min-height:104px; display:grid; grid-template-columns:52px 1fr auto; gap:20px; align-items:center; }
.mr-depth-demo summary::-webkit-details-marker { display:none; }
.mr-depth-demo summary span { font-family:var(--font-body,"Syne",Arial,sans-serif); color:var(--orange); font-size:.76rem; font-weight:700; }
.mr-depth-demo summary b { font-family:var(--font-display,"Cabinet Grotesk",Arial,sans-serif); font-size:clamp(1.5rem,2.2vw,2.4rem); font-weight:500; }
.mr-depth-demo summary em { font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.78rem; font-style:normal; color:var(--ink-soft); }
.mr-depth-demo details > div { padding:0 0 34px 72px; max-width:850px; }
.mr-depth-demo details p { font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.98rem; color:var(--ink-soft); }
.mr-depth-bars { height:70px; margin-top:24px; display:grid; gap:8px; }
.mr-depth-bars i { display:block; width:var(--w); height:12px; background:var(--ink); border-radius:999px; opacity:.18; }
.mr-depth-bars i:last-child { background:var(--orange); opacity:1; }

.mr-success-grid { margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink); }
.mr-success-grid article { min-height:300px; padding:18px 24px 28px 0; border-right:1px solid var(--mr-line); display:flex; flex-direction:column; }
.mr-success-grid article + article { padding-left:24px; }
.mr-success-grid article:last-child { border-right:0; }
.mr-success-grid span { font-family:var(--font-body,"Syne",Arial,sans-serif); color:var(--orange); font-size:.74rem; font-weight:700; }
.mr-success-grid h3 { margin-top:auto; font-family:var(--font-display,"Cabinet Grotesk",Arial,sans-serif); font-size:1.9rem; font-weight:500; line-height:1; }
.mr-success-grid p { margin-top:12px; font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.9rem; color:var(--ink-soft); }

.mr-learning-list { margin-top:58px; border-top:1px solid var(--ink); }
.mr-learning-list article { display:grid; grid-template-columns:90px 1fr; gap:20px; padding:30px 0; border-bottom:1px solid var(--mr-line); }
.mr-learning-list article > b { font-family:var(--font-body,"Syne",Arial,sans-serif); color:var(--orange); font-size:.78rem; }
.mr-learning-list h3 { font-family:var(--font-display,"Cabinet Grotesk",Arial,sans-serif); font-size:clamp(1.8rem,2.7vw,3rem); font-weight:500; }
.mr-learning-list p { margin-top:7px; max-width:760px; font-family:var(--font-body,"Syne",Arial,sans-serif); font-size:.96rem; color:var(--ink-soft); }

@media (max-width: 980px) {
  .mr-hero__grid, .mr-anatomy__grid, .mr-problem__grid { grid-template-columns:1fr; }
  .mr-hero__visual { min-height:auto; }
  .mr-report-sheet { min-height:520px; }
  .mr-flow { grid-template-columns:1fr; }
  .mr-flow > svg { width:80px; transform:rotate(90deg); justify-self:center; }
  .mr-question-grid, .mr-success-grid { grid-template-columns:1fr 1fr; }
  .mr-question-grid article:nth-child(2), .mr-success-grid article:nth-child(2) { border-right:0; }
  .mr-question-grid article:nth-child(n/**/+3), .mr-success-grid article:nth-child(n/**/+3) { border-top:1px solid var(--mr-line); }
  .mr-decision__inner { grid-template-columns:1fr; gap:18px; }
  .mr-audience-grid { grid-template-columns:1fr; }
  .mr-audience-grid > article + article { border-left:0; border-top:1px solid var(--mr-line); padding-left:0; }
}

@media (max-width: 620px) {
  .mr-hero { padding-top:120px; }
  .mr-display { font-size:clamp(3.2rem,16vw,5rem); }
  .mr-hero__grid { gap:40px; }
  .mr-hero__visual { display:none; }
  .mr-question-grid, .mr-success-grid { grid-template-columns:1fr; }
  .mr-question-grid article, .mr-question-grid article + article, .mr-success-grid article, .mr-success-grid article + article { min-height:220px; border-right:0; border-top:1px solid var(--mr-line); padding:20px 0 24px; }
  .mr-tension { grid-template-columns:1fr; }
  .mr-tension__hinge { min-height:70px; transform:rotate(90deg); }
  .mr-tension > div:last-child { text-align:left; }
  .mr-live-report__body { padding:24px; min-height:460px; }
  .mr-live-report__body > section { min-height:400px; }
  .mr-mini-stats, .mr-reader-stack { grid-template-columns:1fr 1fr 1fr; }
  .mr-audience-grid > article { min-height:auto; padding-right:0; padding-block:24px 36px; }
  .mr-config-ui, .mr-reader-stack { margin-top:40px; }
  .mr-depth-demo summary { grid-template-columns:36px 1fr; padding:16px 0; }
  .mr-depth-demo summary em { grid-column:2; }
  .mr-depth-demo details > div { padding-left:36px; }
}

/* V40; Agent Management cognitive-load chart adopts the quieter Management Reports
   trend-chart grammar: one baseline, one confident curve, restrained orange emphasis. */
.cognitive-v24__chart--report-style {
  padding: 0 0 54px !important;
  overflow: visible !important;
}
.cognitive-v24__chart--report-style .cog-chart-meta {
  margin-bottom: 26px;
  font-family: var(--font-body, "Syne", Arial, sans-serif);
  font-size: .76rem;
  line-height: 1.2;
  font-weight: 650;
  color: var(--ink-soft);
}
.cognitive-v24__chart--report-style svg {
  width: 100%;
  overflow: visible;
}
.cognitive-v24__chart--report-style .cog-axis--baseline {
  fill: none !important;
  stroke: rgba(41,46,38, .16) !important;
  stroke-width: 2 !important;
  stroke-linecap: round;
}
.cognitive-v24__chart--report-style .cog-curve--report {
  fill: none !important;
  stroke: url(#cogLineV40) !important;
  stroke-width: 5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke;
}
.cognitive-v24__chart--report-style .cog-label {
  font-family: var(--font-body, "Syne", Arial, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 550 !important;
  fill: var(--ink-soft) !important;
}
.cognitive-v24__chart--report-style .cog-hotspot {
  width: 22px !important;
  height: 22px !important;
}
.cognitive-v24__chart--report-style .cog-hotspot span {
  inset: 5px !important;
  width: 12px !important;
  height: 12px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--orange) !important;
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px rgba(156,78,59,.28) !important;
  animation: cogPulseV40 2.4s ease-in-out infinite !important;
}
.cognitive-v24__chart--report-style .cog-hotspot--peak span {
  box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px rgba(156,78,59,.34) !important;
}
@keyframes cogPulseV40 {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}
.cognitive-v24__chart--report-style .cog-tooltip {
  width: max-content !important;
  max-width: 250px !important;
  padding: 9px 11px !important;
  border-radius: 10px !important;
  background: var(--paper) !important;
  border: 1px solid rgba(41,46,38,.13) !important;
  box-shadow: 0 12px 30px rgba(41,46,38,.08) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
@media (max-width: 760px) {
  .cognitive-v24__chart--report-style .cog-chart-meta { margin-bottom: 18px; }
  .cognitive-v24__chart--report-style .cog-label { font-size: 12px !important; }
}

/* V41; chart legibility, stable narrative text, lifecycle card padding. */
.page-case-agent .cognitive-v24__chart--report-style .cog-axis--y {
  fill: none !important;
  stroke: rgba(41,46,38, .16) !important;
  stroke-width: 2 !important;
  stroke-linecap: round;
}
.page-case-agent .cognitive-v24__chart--report-style .cog-label--y {
  font-family: var(--font-body, "Syne", Arial, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 550 !important;
  fill: var(--ink-soft) !important;
  letter-spacing: 0 !important;
}

/* Tooltip should hug its sentence instead of reading as a floating card. */
.page-case-agent .cognitive-v24__chart--report-style .cog-tooltip {
  display: inline-block !important;
  width: max-content !important;
  max-width: min(205px, 26vw) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  font-family: var(--font-body, "Syne", Arial, sans-serif) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* The video showed native text selection being triggered while dragging/scrolling
   over the static decision callouts. Keep the rest of the article selectable,
   but prevent these non-interactive poster statements from entering selection. */
.page-case-agent .decision-inline,
.page-case-agent .decision-band__inner {
  -webkit-user-select: none;
  user-select: none;
}

/* Lifecycle cards: one reliable inset on both faces. Long labels must fit inside
   the same content box instead of being clipped by the card edge. */
.page-case-agent .lifecycle-flip__face,
.page-case-agent .lifecycle-flip__front,
.page-case-agent .lifecycle-flip__back {
  box-sizing: border-box !important;
  padding: clamp(24px, 1.8vw, 30px) !important;
  overflow: hidden !important;
}
.page-case-agent .lifecycle-flip__back {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 14px !important;
}
.page-case-agent .lifecycle-flip__back b {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-family: var(--font-display, "Cabinet Grotesk", Arial, sans-serif) !important;
  font-size: clamp(20px, 1.45vw, 25px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.02em !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
}
.page-case-agent .lifecycle-flip__back p {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  font-family: var(--font-body, "Syne", Arial, sans-serif) !important;
  font-size: clamp(13px, .92vw, 15px) !important;
  line-height: 1.48 !important;
  opacity: .76 !important;
}

@media (max-width: 760px) {
  .page-case-agent .cognitive-v24__chart--report-style .cog-tooltip {
    max-width: min(190px, 64vw) !important;
    font-size: 11px !important;
  }
  .page-case-agent .cognitive-v24__chart--report-style .cog-label--y {
    font-size: 12px !important;
  }
  .page-case-agent .lifecycle-flip__face,
  .page-case-agent .lifecycle-flip__front,
  .page-case-agent .lifecycle-flip__back {
    padding: 22px !important;
  }
}

/* ==========================================================================\n   V42; Cognitive-load tooltip: intrinsic per-marker annotations\n   ========================================================================== */
/* The previous shared tooltip accumulated legacy width/height/transform rules.
   Render each explanation from the marker's own data attribute instead. */
.page-case-agent .cognitive-v24__chart--report-style [data-cog-tooltip] {
  display: none !important;
}
.page-case-agent .cognitive-v24__chart--report-style .cog-hotspot {
  overflow: visible !important;
  isolation: isolate;
}
.page-case-agent .cognitive-v24__chart--report-style .cog-hotspot::after {
  content: attr(data-cog-tip);
  position: absolute;
  z-index: 30;
  top: 50%;
  left: calc(100% + 12px);
  width: max-content;
  max-width: 220px;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 7px 9px;
  box-sizing: border-box;
  border: 1px solid rgba(41,46,38,.14);
  border-radius: 8px;
  background: rgba(243,240,231,.98);
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(41,46,38,.08);
  font-family: var(--font-body, "Syne", Arial, sans-serif);
  font-size: 12px;
  font-weight: 520;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  overflow-wrap: normal;
  transform: translateY(-50%) translateX(-4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, transform .18s var(--ease-system, ease), visibility 0s linear .18s;
}
.page-case-agent .cognitive-v24__chart--report-style .cog-hotspot:hover::after,
.page-case-agent .cognitive-v24__chart--report-style .cog-hotspot:focus-visible::after,
.page-case-agent .cognitive-v24__chart--report-style .cog-hotspot:focus::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}
.page-case-agent .cognitive-v24__chart--report-style .cog-hotspot--flip::after {
  left: auto;
  right: calc(100% + 12px);
  transform: translateY(-50%) translateX(4px);
}
.page-case-agent .cognitive-v24__chart--report-style .cog-hotspot--flip:hover::after,
.page-case-agent .cognitive-v24__chart--report-style .cog-hotspot--flip:focus-visible::after,
.page-case-agent .cognitive-v24__chart--report-style .cog-hotspot--flip:focus::after {
  transform: translateY(-50%) translateX(0);
}
@media (max-width: 760px) {
  .page-case-agent .cognitive-v24__chart--report-style .cog-hotspot::after,
  .page-case-agent .cognitive-v24__chart--report-style .cog-hotspot--flip::after {
    top: calc(100% + 10px);
    left: 50%;
    right: auto;
    width: max-content;
    max-width: min(210px, 72vw);
    font-size: 11px;
    transform: translate(-50%, -4px);
  }
  .page-case-agent .cognitive-v24__chart--report-style .cog-hotspot:hover::after,
  .page-case-agent .cognitive-v24__chart--report-style .cog-hotspot:focus::after,
  .page-case-agent .cognitive-v24__chart--report-style .cog-hotspot:focus-visible::after,
  .page-case-agent .cognitive-v24__chart--report-style .cog-hotspot--flip:hover::after,
  .page-case-agent .cognitive-v24__chart--report-style .cog-hotspot--flip:focus::after,
  .page-case-agent .cognitive-v24__chart--report-style .cog-hotspot--flip:focus-visible::after {
    transform: translate(-50%, 0);
  }
}


/* V45; explicit close control inside the full-screen menu. */









/* Sentence-case UI labels. Source product screenshots are unaltered. */
body :is(.eyebrow,.label,.case-card__meta,.case-card-kpis dt,.section-progress__peek small,.section-progress__drawer-item small) {
  text-transform: none !important;
  letter-spacing: .02em !important;
}

/* V63 · Stable case-study colour surfaces ---------------------------------
   Domain-Centric Views used the same viewport-wide colour scrub as Agent
   Management. Keep each section's tone attached to its own content instead. */
body.page-case-domain #main { background: var(--paper) !important; }
body.page-case-domain #main > .bg-transition-breath { display:none !important; }
body.page-case-domain #main > :is(.case-hero-v2,.section--paper) { background:var(--paper) !important; }
body.page-case-domain #main > .section--sand { background:var(--paper-2) !important; }
body.page-case-domain #main > :is(.section--lavender,.current-ux) { background:var(--lavender) !important; }
body.page-case-domain #main > .section--orange { background:var(--orange) !important; }
body.page-case-domain #main > .section--ink { background:var(--ink) !important; }
body.page-case-domain #main > .section--purple { background:var(--purple) !important; }
body.page-case-domain #main > .screen-flow { background:#08070c !important; }

/* V63 · decorative scroll scribbles removed site-wide; hand-drawn meaning now
   stays inside evidence, diagrams and authored illustrations. */
.scroll-scribble { display:none !important; }

/* V69 · Case-study chapter drawers stay text-led; thumbnails add noise in the
   scroll navigation and are intentionally reserved for the homepage. */
body.page-case .section-progress__drawer-item {
  grid-template-columns: 1fr !important;
  min-width: 190px;
}
body.page-case .section-progress__drawer-item > img {
  display: none !important;
}

/* V72 · Case-study chapter navigation uses page-faithful titles plus explanatory subtitles. */
body.page-case .section-progress__drawer { width:min(360px,calc(100vw - 28px)); }
body.page-case .section-progress__drawer-item { min-width:0; padding:9px 10px; }
body.page-case .section-progress__drawer-item b { font-size:13px; line-height:1.25; }
body.page-case .section-progress__drawer-item small { margin-top:4px; font-size:12px; line-height:1.35; max-width:38ch; opacity:.7; }

/* V74 cursor */
.cursor-scribble__dot,.menu-open .cursor-scribble__dot{fill:var(--orange)!important}


/* V120 · Section navigation is text-led across home and case studies. */
.section-progress__drawer-item--text,
body.page-home .section-progress__drawer-item {
  grid-template-columns: 1fr !important;
  min-width: 0;
  padding: 9px 10px;
}
body.page-home .section-progress__drawer { width:min(330px,calc(100vw - 28px)); }
body.page-home .section-progress__drawer-item b { font-size:13px; line-height:1.25; }
body.page-home .section-progress__drawer-item small { margin-top:4px; font-size:12px; line-height:1.35; opacity:.7; }
body.page-home .section-progress__drawer-item > img { display:none !important; }