/* Structural prototype only. Font stack and layout measurements are provisional,
   not replacements for the retained logo and typography in visual-direction.md. */
/* DM Sans variable, latin subset, from Google Fonts. SIL Open Font License: assets/fonts/OFL.txt */
@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/DMSans-Variable-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
/* Fraunces variable, official Google Fonts TTF converted to WOFF2 without subsetting (all axes kept).
   SIL OFL: assets/fonts/Fraunces-OFL.txt. Expressive B axes are pinned per element, not applied globally. */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/Fraunces-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --ivory: #f8f5ef;
  --eggplant: #400849;
  --orange: #ff5a0a;
  --beige: #e8d2b5;
  --pink: #e7b0de;
  --orange-deep: #cc4808; /* Restricted: background for white text only (4.67:1). */
  --space: .5rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--ivory); color: var(--eggplant); font-family: system-ui, sans-serif; line-height: 1.6; }
a { color: inherit; text-underline-offset: .25em; }
a:focus-visible { outline: 3px solid var(--eggplant); outline-offset: 6px; }
.wrap { width: min(100% - 4rem, 76rem); margin-inline: auto; }
.site-header { padding-block: 2rem 0; }
.monogram { display: block; width: fit-content; }
.monogram img { display: block; width: 3.5rem; height: auto; }
.monogram .logo-full { width: 7.5rem; } /* homepage: full-name logo, so the name is visible in the Hero */
.skip-link { position: absolute; top: 0; left: 1rem; padding: .75rem; background: var(--ivory); transform: translateY(-150%); z-index: 2; }
.skip-link:focus { transform: translateY(0); }
h1, h2, h3, p { margin-top: 0; }
h2 { font-size: clamp(2rem, 3vw, 3rem); letter-spacing: -.04em; line-height: 1.15; }
h3 { font-size: 1.2rem; line-height: 1.4; }
.eyebrow, .placeholder-label { font-size: .75rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.eyebrow { margin-bottom: 1.25rem; }
/* Hero v03 (visual-direction.md). Desktop: 12 columns, text 1-6, avatar 7-12. */
.hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: center; padding-block: 2.5rem 5rem; }
.hero-copy { grid-column: 1 / 7; font-family: "DM Sans", system-ui, sans-serif; }
.hero h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 900;
  font-optical-sizing: none;
  font-variation-settings: "wght" 900, "opsz" 72, "SOFT" 100, "WONK" 1;
  font-size: clamp(3.5rem, 7.2vw, 6.5rem);
  line-height: .96;
  letter-spacing: -.025em;
  max-width: 6.2em;
  margin: 0 0 2.5rem;
}
.hero-role { display: inline-block; margin: 0 0 1.5rem; padding: .5rem .75rem .5625rem; background: var(--orange-deep); color: #fff; font-size: 1.375rem; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; white-space: nowrap; }
.hero-support { max-width: 29em; margin: 0; font-size: 1.1875rem; line-height: 1.5; text-wrap: pretty; }
/* Scroll cue: small editorial label under the intro; the orange arrow drifts gently (motion only). */
.hero-scroll { display: flex; align-items: center; gap: .625rem; margin: 2rem 0 0; font-size: .75rem; font-weight: 600; line-height: 1; letter-spacing: .14em; text-transform: uppercase; }
.hero-scroll-arrow { flex: none; width: .75rem; height: 1.125rem; fill: none; stroke: var(--orange-deep); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@keyframes hero-scroll-drift { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: no-preference) { .hero-scroll-arrow { animation: hero-scroll-drift 1.8s ease-in-out infinite; } }
.hero-figure { grid-column: 7 / 13; margin: 0; }
/* Hero avatar in depth layers (visual-direction.md, Hero). Back objects (z 1), the avatar (z 2), front objects (z 3).
   The avatar is a transparent idle loop drawn to a canvas by script.js; the transparent still is the fallback. */
.hero-figure { position: relative; display: flex; justify-content: center; --mx: 0; --my: 0; }
.hero-avatar { position: relative; z-index: 2; height: min(46rem, calc(100vh - 6rem)); aspect-ratio: 576 / 1024; max-width: 100%; }
.hero-avatar-still, .hero-avatar canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero-avatar canvas { opacity: 0; transition: opacity .3s ease; }
.hero-avatar.is-live canvas { opacity: 1; }
.hero-avatar.is-live .hero-avatar-still { visibility: hidden; }
.hero-avatar-video { display: none; }
/* Floating objects. Size, blur, and parallax depth (--z) separate the planes. */
.hero-objects { position: absolute; inset: 0; pointer-events: none; }
.hero-objects-back { z-index: 1; }
.hero-objects-front { z-index: 3; }
.hero-obj { position: absolute; display: block; height: auto; transform: rotate(var(--r, 0deg)); translate: calc(var(--mx) * var(--z, 10) * 1px) calc(var(--my) * var(--z, 10) * 1px); transition: translate .6s cubic-bezier(.2, .7, .2, 1); }
.hero-objects-back .hero-obj { filter: blur(1.5px) saturate(.68) drop-shadow(0 .4rem .6rem rgba(64, 8, 73, .08)); opacity: .92; --z: 6; }
.hero-objects-front .hero-obj { filter: saturate(.8) drop-shadow(0 1rem 1.25rem rgba(64, 8, 73, .18)); --z: 22; }
/* Back plane: smaller, softer, partly hidden by the avatar. */
.obj-palette { width: 9rem; left: 16%; top: 62%; --r: 8deg; }
.obj-toggle { width: 5.5rem; right: 22%; top: 3%; --r: 6deg; }
.obj-sparkle-p { width: 1.5rem; right: 30%; top: 66%; }
/* Front plane: larger, crisp, overlapping the silhouette edges. */
.obj-robot { width: 7.5rem; left: 0; top: 6%; --r: -6deg; }
.obj-pen { width: 8.5rem; left: -5%; top: 38%; --r: -5deg; }
.obj-sparkle-y { width: 2.25rem; left: 20%; top: 30%; --z: 30; }
.obj-cursor { width: 5.75rem; right: 14%; top: 39%; --r: 8deg; --z: 28; }
.obj-type { width: 7rem; right: -3%; top: 56%; --r: -6deg; }
/* Team Lead skin icons. Back: kanban, notes. Front: team, chat, brief, browser, puzzle. */
.lead-kanban { width: 8.5rem; left: 17%; top: 63%; --r: -6deg; }
.lead-notes { width: 6rem; right: 20%; top: 2%; --r: 7deg; }
.lead-team { width: 8rem; left: -1%; top: 5%; --r: -4deg; }
.lead-chat { width: 7rem; left: -6%; top: 37%; --r: 5deg; }
.lead-brief { width: 6.75rem; right: 12%; top: 36%; --r: 8deg; --z: 28; }
.lead-browser { width: 7.25rem; right: -4%; top: 57%; --r: -6deg; }
.lead-puzzle { width: 5.25rem; left: 3%; top: 74%; --r: 10deg; }
/* Digital Designer skin icons. The tabby cat sits between the feet inside the avatar video. */
.dd-cloud { width: 7rem; right: 18%; top: 3%; --r: 4deg; }
.dd-phone { width: 5.25rem; left: 3%; top: 7%; --r: -8deg; }
.dd-cards { width: 6rem; left: 1%; top: 47%; --r: 5deg; }
.dd-cursor { width: 4.75rem; right: 13%; top: 38%; --r: 8deg; --z: 28; }
.dd-pen { width: 6.5rem; left: 4%; top: 70%; --r: -6deg; }
/* Entrepreneur skin icons. Back: spreadsheet. Front: churros truck, growth chart, card terminal, checklist, boxes. */
.ent-sheet { width: 6.5rem; right: 18%; top: 2%; --r: 5deg; }
.ent-truck { width: 8rem; left: -4%; top: 8%; --r: -4deg; }
.ent-growth { width: 6rem; left: -2%; top: 44%; --r: 5deg; }
.ent-terminal { width: 5.25rem; right: 12%; top: 38%; --r: 8deg; --z: 28; }
.ent-checklist { width: 5.5rem; right: -3%; top: 60%; --r: -6deg; }
.ent-boxes { width: 6rem; left: 4%; top: 72%; --r: 6deg; }
.gd-poster { width: 6.5rem; right: 18%; top: 1%; --r: 6deg; }
.gd-swatch { width: 7.5rem; left: -4%; top: 8%; --r: -6deg; }
.gd-type { width: 6rem; left: -2%; top: 44%; --r: 5deg; }
.gd-cmyk { width: 5.75rem; right: 10%; top: 38%; --r: 7deg; --z: 28; }
.gd-cutter { width: 6.25rem; right: -4%; top: 60%; --r: -8deg; }
.gd-zine { width: 6.5rem; left: 3%; top: 72%; --r: 5deg; }
.ad-moodboard { width: 6.25rem; right: 18%; top: 1%; --r: 6deg; }
.ad-camera { width: 7.5rem; left: -4%; top: 8%; --r: -6deg; }
.ad-contact { width: 6.5rem; left: -3%; top: 44%; --r: 4deg; }
.ad-monitor { width: 6rem; right: 10%; top: 38%; --r: 7deg; --z: 28; }
.ad-grading { width: 6.25rem; right: -4%; top: 60%; --r: -6deg; }
.ad-fabric { width: 6rem; left: 4%; top: 72%; --r: 6deg; }
.as-storyboard { width: 7rem; right: 16%; top: 1%; --r: 5deg; }
.as-campaign { width: 6.5rem; left: -3%; top: 8%; --r: -6deg; }
.as-brand { width: 6.25rem; left: -3%; top: 44%; --r: 5deg; }
.as-player { width: 5rem; right: 11%; top: 37%; --r: 8deg; --z: 28; }
.as-megaphone { width: 6.5rem; right: -4%; top: 60%; --r: -5deg; }
.as-product { width: 5.25rem; left: 5%; top: 72%; --r: 5deg; }
.hero-objects[hidden] { display: none; }
/* Skin switch (motion only): the avatar canvas runs a WebGL glitch while the object set orbits around it (script.js).
   The still image, when the canvas is not live, gets this CSS slice glitch instead. */
@keyframes skin-glitch-in {
  0% { clip-path: inset(46% 0 46% 0); transform: translateX(-8px); opacity: 0; filter: drop-shadow(4px 0 0 rgb(255 0 90 / .75)) drop-shadow(-4px 0 0 rgb(0 210 255 / .75)); }
  20% { clip-path: inset(10% 0 60% 0); transform: translateX(10px); opacity: 1; }
  40% { clip-path: inset(55% 0 8% 0); transform: translateX(-12px); }
  60% { clip-path: inset(20% 0 30% 0); transform: translateX(5px); }
  80% { clip-path: inset(0 0 12% 0); transform: translateX(-2px); filter: drop-shadow(2px 0 0 rgb(255 0 90 / .5)) drop-shadow(-2px 0 0 rgb(0 210 255 / .5)); }
  100% { clip-path: inset(0); transform: none; opacity: 1; filter: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-figure.is-orbiting .hero-objects { visibility: hidden; }
  .orbit-layer { position: absolute; inset: 0; pointer-events: none; }
  .orbit-back { z-index: 1; } .orbit-front { z-index: 3; }
  .orbit-layer .hero-obj { will-change: transform, opacity; }
  .hero-figure.is-glitch-in .hero-avatar:not(.is-live) { animation: skin-glitch-in .42s steps(6, end) both; }
  .lead-team { --t: 5.6s; } .lead-chat { --t: 6.4s; --d: -2s; } .lead-brief { --t: 5.2s; --d: -3s; } .lead-browser { --t: 6.8s; --d: -1s; }
  .lead-puzzle { --t: 5.8s; --d: -2.5s; } .lead-kanban { --t: 7.4s; --d: -4s; } .lead-notes { --t: 6.2s; --d: -1.5s; }
  .ent-sheet { --t: 7s; --d: -2s; } .ent-truck { --t: 6.2s; } .ent-growth { --t: 5.6s; --d: -3s; } .ent-terminal { --t: 5s; --d: -1.5s; } .ent-checklist { --t: 6.6s; --d: -2.5s; } .ent-boxes { --t: 7.4s; --d: -4s; }
  .gd-poster { --t: 7.2s; --d: -2s; } .gd-swatch { --t: 6s; } .gd-type { --t: 5.8s; --d: -3s; } .gd-cmyk { --t: 5.2s; --d: -1.5s; } .gd-cutter { --t: 6.8s; --d: -2.5s; } .gd-zine { --t: 7.6s; --d: -4s; }
  .ad-moodboard { --t: 7s; --d: -2.5s; } .ad-camera { --t: 6.2s; } .ad-contact { --t: 5.6s; --d: -3s; } .ad-monitor { --t: 5.2s; --d: -1.5s; } .ad-grading { --t: 6.6s; --d: -2s; } .ad-fabric { --t: 7.4s; --d: -4s; }
  .as-storyboard { --t: 7.2s; --d: -2s; } .as-campaign { --t: 6s; } .as-brand { --t: 5.8s; --d: -3s; } .as-player { --t: 5s; --d: -1.5s; } .as-megaphone { --t: 6.4s; --d: -2.5s; } .as-product { --t: 7.6s; --d: -4s; }
  .dd-cloud { --t: 7.2s; --d: -2s; } .dd-phone { --t: 5.6s; } .dd-cards { --t: 6.6s; --d: -3s; } .dd-cursor { --t: 5s; --d: -1.5s; } .dd-pen { --t: 6.2s; --d: -4s; }
}
/* Skin picker. */
.skin-picker { margin-top: 2rem; }
.skin-picker-label { display: flex; align-items: center; gap: .625rem; margin: 0 0 .75rem; font-size: .8125rem; font-weight: 500; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; }
.skin-picker-label::before { content: ""; width: .5rem; height: .5rem; background: var(--orange); }
.skin-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.skin-btn { display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; padding: .25rem .875rem .25rem .25rem; background: transparent; border: 1px solid var(--eggplant); border-radius: 999px; color: var(--eggplant); font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.2; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) { .skin-btn { transition: background-color .2s ease, color .2s ease; } }
.skin-btn img { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--beige); object-fit: cover; }
.skin-btn small { margin-left: .25rem; font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.skin-btn:hover { background: var(--beige); }
.skin-btn[aria-pressed="true"] { background: var(--eggplant); color: var(--ivory); }
.skin-btn[aria-pressed="true"] img { box-shadow: 0 0 0 2px var(--ivory); }
.skin-btn:focus-visible { outline: 3px solid var(--orange-deep); outline-offset: 3px; }
@keyframes hero-float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-.75rem) rotate(calc(var(--r, 0deg) + 3deg)); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-obj { animation: hero-float var(--t, 6s) ease-in-out var(--d, 0s) infinite; }
  .obj-robot { --t: 5.4s; } .obj-pen { --t: 6.8s; --d: -2s; } .obj-palette { --t: 7.6s; --d: -4s; } .obj-toggle { --t: 6.6s; --d: -1s; }
  .obj-cursor { --t: 5s; --d: -3s; } .obj-type { --t: 6.2s; --d: -2.5s; } .obj-sparkle-y { --t: 3.6s; } .obj-sparkle-p { --t: 4.4s; --d: -1.2s; }
}
@media (prefers-reduced-motion: reduce) { .hero-obj { translate: none; transition: none; } }
.hero-figure::after { content: ""; position: absolute; z-index: 1; bottom: .25rem; left: 50%; width: 52%; height: 2.25rem; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(64, 8, 73, .22), rgba(64, 8, 73, 0)); }
.section { padding-block: 5rem; border-top: 1px solid var(--eggplant); scroll-margin-top: 1.5rem; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > p { max-width: 19rem; font-size: .9rem; margin-bottom: 0; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2rem; }
.project-image { aspect-ratio: 4 / 3; padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; }
.project-image > span:first-child { font-size: 3rem; letter-spacing: -.05em; }
.project-image > span:last-child { font-size: .8rem; }
.beige { background: var(--beige); }
.pink { background: var(--pink); }
.project-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.2rem; }
.project-heading h3 { margin-bottom: .4rem; }
.project-card > p { font-size: .9rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Selected Work v02 with approved Fraunces B typography (visual-direction.md). */
.work { background: var(--eggplant); color: var(--ivory); padding-block: 3.3125rem 5rem; scroll-margin-top: 1.5rem; }
.work:has(.work-pin) { padding-block: 0; }
.work-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 4.82375rem; }
.work-heading h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 900;
  font-optical-sizing: none;
  font-variation-settings: "wght" 900, "opsz" 72, "SOFT" 100, "WONK" 1;
  font-size: clamp(2.5rem, 4.6vw, 4.25rem);
  letter-spacing: -.025em;
  line-height: 1.04;
  margin: 0;
}
.work-heading .work-counter { flex-shrink: 0; align-self: flex-end; margin-bottom: .625rem; }
.work-counter { margin: 0; color: var(--beige); }
.work-counter, .work-index, .work-disciplines { font-family: "DM Sans", system-ui, sans-serif; font-size: .8125rem; font-weight: 500; letter-spacing: .08em; line-height: 1.4; font-variant-numeric: tabular-nums; }
.work-counter-current { color: var(--orange); }
.work + .section { border-top: 0; }
.work-track { display: flex; gap: 3rem; overflow-x: auto; padding-inline: max(2rem, (100% - 76rem) / 2); padding-bottom: 1rem; }
.work-track:focus-visible { outline: 3px solid var(--ivory); outline-offset: -3px; }
.work-card { flex: 0 0 60rem; }
.work-media { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 1.2rem; object-fit: cover; }
/* Card link (Snoof first): the whole media area opens the case study. */
.work-card-link { display: block; border-radius: 1.2rem; text-decoration: none; }
.work-card-link:focus-visible { outline: 3px solid var(--ivory); outline-offset: 4px; }
/* Lettering covers (Editorial Statement, hybrid type). Snoof uses its real wordmark; the others are typeset placeholders
   in the site fonts, not recreations of the project logos. */
.work-letter { position: relative; display: grid; place-items: center; overflow: hidden; }
.work-letter-mark { display: block; width: 44%; height: auto; }
.work-letter-snoof { background: #faceBB; }
.work-letter-type { display: flex; flex-direction: column; align-items: center; margin: 0; line-height: .9; text-align: center; }
.wl-serif { font-family: "Fraunces", Georgia, serif; font-weight: 900; font-optical-sizing: none; font-variation-settings: "wght" 900, "opsz" 72, "SOFT" 100, "WONK" 1; letter-spacing: -.03em; }
.wl-sans { font-family: "DM Sans", system-ui, sans-serif; font-weight: 800; letter-spacing: -.04em; }
.work-letter-terrayou { background: #f1eee5; color: #233d4f; }
/* TerraYou: one family for the whole mark (Fraunces). */
.work-letter-terrayou .wl-small, .work-letter-terrayou .wl-big { font-family: "Fraunces", Georgia, serif; font-weight: 900; font-optical-sizing: none; font-variation-settings: "wght" 900, "opsz" 72, "SOFT" 100, "WONK" 1; letter-spacing: -.03em; }
.work-letter-terrayou .wl-small { font-size: clamp(2.25rem, 4.6vw, 4.25rem); margin-bottom: -.1em; }
.work-letter-terrayou .wl-big { font-size: clamp(5rem, 11vw, 10rem); }
/* Quiz Bingo: one family for the whole mark (DM Sans), purple on the game yellow. */
.work-letter-quizbingo { background: #f2d98c; color: #401767; }
.work-letter-quizbingo .wl-big { font-family: "DM Sans", system-ui, sans-serif; font-weight: 800; font-size: clamp(4.5rem, 10vw, 9rem); letter-spacing: -.05em; }
.work-letter-quizbingo .wl-big + .wl-big { margin-top: -.06em; }
/* Damyller: light field, dark type. */
.work-letter-damyller { background: #e8ecf2; color: #1f2a4d; }
.work-letter-damyller .wl-sans { font-size: clamp(3.25rem, 7.4vw, 6.75rem); font-weight: 700; letter-spacing: .02em; }
.work-letter-damyller .wl-serif { font-size: clamp(1.5rem, 3vw, 2.75rem); font-weight: 400; font-variation-settings: "wght" 400, "opsz" 72, "SOFT" 100, "WONK" 1; letter-spacing: -.01em; margin-top: .35em; }
/* Hola! Churros: one family for the whole mark (Fraunces), warm cinnamon on a soft dough tone. */
.work-letter-hola { background: #f4d3b5; color: #6a2d17; }
.work-letter-hola .wl-big { font-family: "Fraunces", Georgia, serif; font-weight: 900; font-optical-sizing: none; font-variation-settings: "wght" 900, "opsz" 72, "SOFT" 100, "WONK" 1; font-size: clamp(4.25rem, 9.5vw, 8.5rem); letter-spacing: -.03em; }
.work-letter-hola .wl-big + .wl-big { margin-top: -.08em; }
.work-soon { position: absolute; top: 1.5rem; left: 1.5rem; padding: .375rem .75rem; border: 1px solid currentColor; border-radius: 999px; font-family: "DM Sans", system-ui, sans-serif; font-size: .75rem; font-weight: 600; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.work-reveal-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.work-media-pending { background: var(--beige); color: var(--eggplant); display: grid; place-content: center; text-align: center; gap: .5rem; }
.work-pending-name { font-family: "DM Sans", system-ui, sans-serif; font-size: 5rem; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.work-pending-note { font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.work-meta { position: relative; display: grid; grid-template-columns: 2rem 1fr; grid-template-areas: "index disciplines" ". contribution"; column-gap: 1rem; align-items: baseline; padding-top: 1.375rem; }
.work-index { grid-area: index; color: var(--beige); }
.work-disciplines { grid-area: disciplines; margin: 0; color: var(--beige); text-transform: uppercase; }
.work-contribution { grid-area: contribution; margin: .75rem 0 0; max-width: 34em; font-family: "DM Sans", system-ui, sans-serif; font-size: 1.125rem; line-height: 1.5; color: var(--ivory); }
/* "View case study" text link: mobile only (desktop keeps the image link and horizontal card interaction as they are). */
.work-cta { display: none; }
/* Desktop gallery driven by vertical scroll (html.motion, wider than 760 px): the section pins while the cards
   move sideways, then normal scrolling resumes. Set up by script.js; otherwise the track scrolls manually. */
.work-sticky { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; height: 100vh; padding-block: 2rem 5.5rem; box-sizing: border-box; overflow: hidden; }
.work-sticky .work-heading { margin-bottom: 2rem; }
.work-track.is-pinned { overflow: hidden; padding-bottom: 0; }
/* Cards scale down with the viewport height so the image and its text fit while pinned. */
.work-track.is-pinned .work-card { flex-basis: min(60rem, calc((100vh - 21rem) * 1.6)); }
.work-track.is-pinned .work-card { will-change: transform; }
/* About: asymmetric editorial layout on the 12-column grid. Large portrait 1-7, copy 9-12, vertically centered.
   Fraunces B title at a smaller scale than Contact, DM Sans for the text. */
.about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: start; padding-block: 8rem 9rem; scroll-margin-top: 1.5rem; font-family: "DM Sans", system-ui, sans-serif; }
.about-photo { grid-column: 1 / 6; align-self: center; margin: 0; } /* centered on the text block */
.about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 45% 40%; border-radius: 1.2rem; }
.about-credit { margin-top: .75rem; font-size: .8125rem; line-height: 1.4; }
.about-credit a { text-underline-offset: .2em; }
@media (min-width: 761px) {
  /* The credit hangs below the image, so the image alone is centered on the text block. */
  .about-photo { position: relative; }
  .about-credit { position: absolute; top: 100%; left: 0; }
}
.about-copy { grid-column: 7 / 13; max-width: 36rem; } /* wider column for the longer copy */
.about-eyebrow { display: flex; align-items: center; gap: .625rem; margin: 0 0 1.5rem; font-size: .8125rem; font-weight: 500; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; }
.about-eyebrow::before { content: ""; width: .5rem; height: .5rem; background: var(--orange); }
.about h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 900;
  font-optical-sizing: none;
  font-variation-settings: "wght" 900, "opsz" 72, "SOFT" 100, "WONK" 1;
  font-size: clamp(2.5rem, 4.6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  max-width: 8em;
  margin: 0 0 2.5rem;
}
.about-copy p:not(.about-eyebrow) { max-width: 34em; margin: 0 0 1.25rem; font-size: 1.125rem; line-height: 1.6; }
.about-copy .about-lead { max-width: 24em; margin-bottom: 2rem; font-size: clamp(1.375rem, 1.9vw, 1.625rem); font-weight: 500; line-height: 1.4; letter-spacing: -.01em; }
.about-copy p:last-child { margin-bottom: 0; }
.about-copy strong { font-weight: 600; }
.about-copy .about-lead strong { font-weight: 500; } /* the lead is already set larger and heavier; keep its weight */
/* CV link (opens the PDF in a new tab): same outlined pill language as the skin buttons. Public PDF has no phone number. */
.about-copy p.about-cv-row { margin-top: 2.25rem; }
.about-cv { display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; padding: .25rem 1.125rem .25rem .875rem; border: 1px solid var(--eggplant); border-radius: 999px; color: var(--eggplant); font-size: .9375rem; font-weight: 600; line-height: 1.2; text-decoration: none; }
.about-cv-meta { font-size: .6875rem; font-weight: 500; letter-spacing: .08em; opacity: .75; }
.about-cv:hover { background: var(--eggplant); color: var(--ivory); }
.about-cv:focus-visible { outline: 3px solid var(--orange-deep); outline-offset: 3px; }

/* Contact: eggplant closing section with generous negative space. Ivory text, beige for secondary details,
   no orange (not contrast-checked on eggplant). */
.contact { background: var(--eggplant); color: var(--ivory); padding-block: 9rem 8rem; scroll-margin-top: 0; font-family: "DM Sans", system-ui, sans-serif; }
.contact a:focus-visible { outline-color: var(--ivory); }
.contact h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 900;
  font-optical-sizing: none;
  font-variation-settings: "wght" 900, "opsz" 72, "SOFT" 100, "WONK" 1;
  font-size: clamp(2.75rem, 5vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  max-width: 11em;
  margin: 0 0 4rem;
}
.contact h2 { text-wrap: balance; }
/* Title and supporting line on the left, contact list on the right, vertically centered as one row. */
.contact-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: center; }
.contact-inner > h2 { grid-column: 1 / 8; grid-row: 1; align-self: end; margin-bottom: 1.75rem; }
.contact-text { align-self: start; }
.contact-text p:last-child { margin-bottom: 0; }
.contact-body { display: contents; }
.contact-text { grid-column: 1 / 8; grid-row: 2; }
.contact-text p { max-width: 30em; margin: 0 0 1rem; font-size: 1.1875rem; line-height: 1.55; }
/* Email sits first in the professional links list; the address keeps its natural lowercase. */
.contact-links .contact-email { text-transform: none; letter-spacing: .01em; font-size: .9375rem; }
.contact-links { grid-column: 9 / 13; grid-row: 1 / 3; align-self: center; display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(232, 210, 181, .35); }
.contact-links li { border-bottom: 1px solid rgba(232, 210, 181, .35); }
.contact-links a, .contact-location { display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; color: var(--beige); font-size: .875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.contact-links a:hover { color: var(--ivory); text-decoration: underline; text-underline-offset: .3em; }
.contact-links svg { flex-shrink: 0; }
.site-footer { display: flex; justify-content: space-between; gap: 1.5rem; border-top: 1px solid var(--eggplant); padding-block: 1.5rem; font-size: .75rem; }
.site-footer p { margin: 0; }
/* Homepage footer: minimal sign-off below the eggplant Contact section (no rule line, no repeated contact links). */
.site-footer-home { align-items: baseline; border-top: 0; padding-block: 2rem; font-family: "DM Sans", system-ui, sans-serif; font-size: .8125rem; font-weight: 500; letter-spacing: .02em; }
.site-footer-home .site-footer-note { margin-right: auto; margin-left: 2.5rem; }
.site-footer-home a { text-decoration: none; }
.site-footer-home a:hover { text-decoration: underline; }
/* Fixed section navigation (interaction-spec.md). Desktop: centered bottom bar. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { padding-bottom: 5.5rem; }
.section-nav { position: fixed; z-index: 10; left: 50%; bottom: 1.5rem; transform: translateX(-50%); background: var(--ivory); border: 1px solid var(--eggplant); font-family: "DM Sans", system-ui, sans-serif; }
.section-nav ol { display: flex; margin: 0; padding: 0 .5rem; list-style: none; }
.section-nav a { display: flex; align-items: center; gap: .375rem; min-height: 2.75rem; padding: 0 1rem; color: var(--eggplant); font-size: .8125rem; font-weight: 500; letter-spacing: .08em; line-height: 1; text-transform: uppercase; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.section-nav a::before { content: ""; width: .375rem; height: .375rem; background: transparent; }
.section-nav a:hover .nav-label { text-decoration: underline; text-underline-offset: .3em; }
.section-nav a[aria-current] { font-weight: 700; }
.section-nav a[aria-current]::before { background: var(--orange-deep); }
.section-nav a:focus-visible { outline: 2px solid var(--eggplant); outline-offset: -4px; }
.section-nav-progress { height: 2px; background: var(--beige); overflow: hidden; }
.section-nav-progress span { display: block; height: 100%; background: var(--orange); transform-origin: left; transform: scaleX(var(--progress, 0)); }
/* Below about 1240 px the one-line band no longer fits the text column, so it uses the approved compact mobile band. */
@media (max-width: 1240px) {
  .hero-role { white-space: normal; padding: .5rem .75rem; font-size: 1.125rem; line-height: 1.35; }
  .hero-role-sep { display: none; }
  .hero-role-spec { display: block; white-space: nowrap; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 2.5rem); }
  .site-header { padding-top: 1.5rem; }
  .monogram img { width: 2.75rem; } .monogram .logo-full { width: 6rem; }
  .hero { display: block; padding-block: 2.25rem 3rem; }
  .hero h1 { font-size: 3.5rem; margin-bottom: 1.75rem; }
  .hero-role { white-space: normal; margin-bottom: 1.25rem; padding: .5rem .75rem; font-size: 1.125rem; line-height: 1.35; }
  .hero-role-sep { display: none; }
  .hero-role-spec { display: block; white-space: nowrap; }
  .hero-support { font-size: 1.0625rem; }
  .hero-scroll { margin-top: 1.5rem; }
  .hero-figure { margin-top: 1.5rem; }
  .hero-avatar { height: auto; width: min(100%, 20rem); }
  .obj-robot { width: 4.5rem; left: 0; top: 4%; } .obj-pen { width: 5rem; left: -2%; top: 40%; } .obj-cursor { width: 3.25rem; right: 18%; top: 42%; }
  .obj-palette { width: 5.5rem; left: 14%; top: 64%; } .obj-toggle { width: 3.25rem; right: 20%; top: 2%; }
  .obj-type { width: 4.25rem; right: 14%; top: 60%; } .obj-sparkle-y, .obj-sparkle-p { display: none; }
  .lead-team { width: 4.75rem; left: 0; top: 4%; } .lead-chat { width: 4.25rem; left: -2%; top: 40%; } .lead-brief { width: 3.75rem; right: 16%; top: 42%; }
  .lead-browser { width: 4.25rem; right: 12%; top: 60%; } .lead-kanban { width: 5.25rem; left: 14%; top: 66%; } .lead-notes { width: 3.75rem; right: 20%; top: 2%; }
  .lead-puzzle { display: none; }
  .dd-cloud { width: 4.25rem; right: 20%; top: 2%; } .dd-phone { width: 3.25rem; left: 0; top: 6%; } .dd-cards { width: 4.25rem; left: -2%; top: 42%; }
  .dd-cursor { width: 3rem; right: 16%; top: 40%; } .dd-pen { width: 4rem; left: 0; top: 72%; }
  .ent-sheet { width: 4rem; right: 20%; top: 2%; } .ent-truck { width: 4.75rem; left: 0; top: 6%; } .ent-growth { width: 3.75rem; left: -2%; top: 44%; }
  .ent-terminal { width: 3.25rem; right: 16%; top: 40%; } .ent-checklist { width: 3.5rem; right: 12%; top: 62%; } .ent-boxes { display: none; }
  .gd-poster { width: 4rem; right: 20%; top: 2%; } .gd-swatch { width: 4.5rem; left: 0; top: 6%; } .gd-type { width: 3.75rem; left: -2%; top: 44%; }
  .gd-cmyk { width: 3.5rem; right: 16%; top: 40%; } .gd-cutter { width: 3.75rem; right: 12%; top: 62%; } .gd-zine { display: none; }
  .ad-moodboard { width: 4rem; right: 20%; top: 2%; } .ad-camera { width: 4.5rem; left: 0; top: 6%; } .ad-contact { width: 3.75rem; left: -2%; top: 44%; }
  .ad-monitor { width: 3.5rem; right: 16%; top: 40%; } .ad-grading { width: 3.75rem; right: 12%; top: 62%; } .ad-fabric { display: none; }
  .as-storyboard { width: 4.25rem; right: 18%; top: 2%; } .as-campaign { width: 4rem; left: 0; top: 6%; } .as-brand { width: 3.75rem; left: -2%; top: 44%; }
  .as-player { width: 3rem; right: 16%; top: 40%; } .as-megaphone { width: 3.75rem; right: 12%; top: 62%; } .as-product { display: none; }
  .skin-picker { margin-top: 1.5rem; } .skin-btn { font-size: .875rem; }
  .section { padding-block: 3rem; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 1rem; }
  .project-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about { display: flex; flex-direction: column; padding-block: 4.5rem 5rem; padding-right: 1.75rem; }
  .about-copy { order: 1; }
  .about-photo { order: 2; width: 100%; margin: 3rem 0 0; }
  .about h2 { margin-bottom: 1.75rem; }
  .about-copy p:not(.about-eyebrow) { font-size: 1.0625rem; }
  .about-copy .about-lead { font-size: 1.3125rem; margin-bottom: 1.5rem; }
  .contact { padding-block: 5rem 5.5rem; }
  .contact-inner { padding-right: 1.75rem; }
  .contact h2 { font-size: 2.5rem; margin-bottom: 2rem; }
  .contact-inner { display: block; }
  .contact-body { display: block; }
  .contact-text p { font-size: 1.0625rem; }
  .contact-links { margin-top: 3.5rem; }
  .site-footer { flex-direction: column; gap: .5rem; }
  .site-footer-home { gap: .375rem; padding-block: 1.75rem 2rem; padding-right: 1.75rem; }
  .site-footer-home .site-footer-note { margin: 0; }
  .site-footer-home a { margin-top: .75rem; }
}
/* Mobile Selected Work: functional vertical stack. The right padding keeps cards clear of the 44 px nav rail;
   the gallery counter is hidden because it only describes the desktop horizontal track. */
@media (max-width: 760px) {
  .work-heading .work-counter { display: none; }
  .work-track { display: grid; gap: 3rem; overflow: visible; padding-inline: 1.25rem 3rem; padding-bottom: 0; }
  .work-card { flex: none; min-width: 0; }
  .work-soon { top: .75rem; left: .75rem; padding: .3rem .55rem; font-size: .625rem; }
  .work-letter-terrayou .wl-small { font-size: 1.75rem; } .work-letter-terrayou .wl-big { font-size: 4rem; }
  .work-letter-quizbingo .wl-big { font-size: 3.25rem; }
  .work-letter-hola .wl-big { font-size: 3.25rem; }
  .work-letter-damyller .wl-sans { font-size: 2.5rem; } .work-letter-damyller .wl-serif { font-size: 1.125rem; }
  .work-letter-mark { width: 50%; }
  .work-disciplines { overflow-wrap: anywhere; }
  .work-meta { grid-template-areas: "index disciplines" ". contribution" ". cta"; }
  .work-cta { grid-area: cta; justify-self: start; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; margin-top: .5rem; color: var(--ivory); font-family: "DM Sans", system-ui, sans-serif; font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .3em; }
  .work-cta:focus-visible { outline: 2px solid var(--ivory); outline-offset: 2px; }
}
/* Mobile homepage navigation: four persistent section names in a bottom bar. */
@media (max-width: 760px) {
  body { padding-bottom: 0; }
  body:has(.section-nav) { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
  .section-nav { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; background: var(--ivory); border: 0; border-top: 1px solid var(--eggplant); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .section-nav ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 8px; }
  .section-nav a { min-height: 3.5rem; padding: 0 4px; justify-content: center; gap: 5px; font-size: .6875rem; letter-spacing: .06em; }
  .section-nav .nav-num { display: none; }
  .section-nav .nav-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .section-nav a::before { width: 4px; height: 4px; flex: none; }
  .section-nav a[aria-current] { color: var(--eggplant); }
  .section-nav-progress { height: 2px; width: 100%; }
  .section-nav-progress span { width: 100%; height: 100%; transform-origin: left; transform: scaleX(var(--progress, 0)); }
}

/* ==========================================================================
   Snoof case study (snoof.html), P0: static, visual-first compositions.
   Portfolio OS structure (ivory, eggplant, Fraunces B, DM Sans); Snoof colors
   appear only as project content (wordmark panel, palette, highlight, assets).
   Scroll animations are P1 and not implemented here.
   ========================================================================== */
.case { --snoof-navy: #223e49; --snoof-peach: #faceBB; --snoof-cream: #fefbdf; }
.case main, .case .site-footer { font-family: "DM Sans", system-ui, sans-serif; }
.case main { font-size: 1.0625rem; line-height: 1.6; }
.cs-display, .cs-h2, .cs-stat, .cs-tile-principle, .cs-stamp, .cs-toxic-word, .cs-quote p, .cs-statement,
.cs-rule, .cs-climax, .cs-finding-num, .cs-tone-mode, .cs-layer-word {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 900;
  font-optical-sizing: none;
  font-variation-settings: "wght" 900, "opsz" 72, "SOFT" 100, "WONK" 1;
  letter-spacing: -.025em;
  line-height: 1.04;
}
.cs-h2 { text-wrap: balance; font-size: clamp(2.75rem, 5.6vw, 5.25rem); line-height: 1; margin: 0 0 2.5rem; }
.cs-h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; margin-bottom: .75rem; }
.cs-eyebrow, .cs-label { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.cs-eyebrow { margin-bottom: 1.5rem; }
.cs-eyebrow::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .625rem; background: var(--orange); vertical-align: .05em; }
.cs-copy { max-width: 34em; font-size: 1.1875rem; line-height: 1.6; }
.cs-copy p:last-child { margin-bottom: 0; }
.cs-copy-wide { max-width: 44em; }
.cs-copy-center { margin-inline: auto; }
.cs-lede-intro { max-width: 22em; margin: 0; font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 500; line-height: 1.4; }
.cs-lede { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.cs-note, .cs-caption { font-size: .875rem; line-height: 1.5; opacity: .82; }
.cs-note { font-style: italic; }
.cs-note-center { text-align: center; max-width: 40em; margin-inline: auto; }
.cs-ai { font-size: .875rem; line-height: 1.55; max-width: 40em; padding-left: 1rem; border-left: 2px solid var(--orange); }
/* Owner-approved exception (November 5): the label is Signal Orange on both backgrounds. On ivory it is 2.87:1, below WCAG AA. */
.cs-ai strong { color: var(--orange); }
.cs-ai p { margin: 0 0 .5rem; } .cs-ai p:last-child { margin-bottom: 0; }
.cs-ai .cs-ai-title { color: var(--orange); font-weight: 700; }
.cs-ui { display: block; width: 100%; height: auto; background: #fff; border-radius: 1.25rem; }
.cs-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; }
.cs-split > :first-child { grid-column: 1 / 6; }
.cs-split > :last-child { grid-column: 7 / 13; }
.cs-split > .cs-copy { padding-top: 2.75rem; }
.cs-phone { margin: 0; padding: .4rem; background: var(--eggplant); border-radius: 2.4rem; }
.cs-phone img { display: block; width: 100%; height: auto; border-radius: 2rem; }
.case section[id] { scroll-margin-top: 1rem; }

/* 01 Hero: Jäger as protagonist. Photo bleeds to the right edge at full hero height; text column on the left. */
.cs-hero { position: relative; }
/* Fills the whole hero height (pulled up behind the header row, down to the beige Origin band). */
.cs-hero-figure { position: absolute; top: -3.1875rem; right: 0; bottom: 0; width: 45vw; margin: 0; }
.cs-hero-figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 100%; }
.cs-hero-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; }
.cs-hero-text { grid-column: 1 / 8; padding-block: 2rem 2.5rem; }
.cs-project { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cs-project img { width: 6.5rem; height: auto; }
.cs-display { margin: 0 0 1.75rem; font-size: clamp(3.25rem, 6.3vw, 6.25rem); line-height: .97; }
/* Peach highlight painted behind the glyphs (and behind the descenders of the line above). */
.cs-display mark { position: relative; background: none; color: inherit; padding-inline: .06em; }
.cs-display mark::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: .22em; bottom: .04em; background: var(--snoof-peach); }
.cs-hero-copy { max-width: 33em; font-size: 1.0625rem; }
.cs-hero-copy p { margin-bottom: .75rem; }
.cs-hero-copy .cs-lede { font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
.cs-hero-copy .cs-lede { margin-bottom: 1rem; }
/* Hero full story: a discreet editorial toggle; the story expands in the page flow (no overlay). */
.cs-story-toggle { display: inline-flex; align-items: center; gap: .625rem; margin: .5rem 0 0; padding: .375rem 0; background: none; border: 0; color: var(--eggplant); font: inherit; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.cs-story-toggle:hover .cs-story-label { text-decoration: underline; text-underline-offset: .25em; }
.cs-story-toggle:focus-visible { outline: 2px solid var(--eggplant); outline-offset: 4px; border-radius: 2px; }
.cs-story-icon { position: relative; flex: none; width: 1.25rem; height: 1.25rem; border: 1.5px solid currentColor; border-radius: 50%; }
.cs-story-icon::before, .cs-story-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: .5rem; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.cs-story-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.cs-story-toggle[aria-expanded="true"] .cs-story-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.cs-story { display: grid; grid-template-rows: 1fr; }
.cs-story.is-collapsed { grid-template-rows: 0fr; }
.cs-story-inner { min-height: 0; overflow: hidden; }
.cs-story-inner > :first-child { margin-top: 1rem; }
.cs-story-lede { font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .cs-story { transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1); }
  .cs-story-icon::after { transition: transform .3s ease; }
}
/* Metadata band below the Hero: full-width eggplant band, four columns on the grid. */
.cs-meta-band { padding-block: 2.5rem; background: var(--eggplant); color: var(--ivory); }
.cs-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 2rem; margin-block: 0; }
.cs-meta dt { color: var(--beige); }
.cs-meta dt { margin-bottom: .375rem; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cs-meta dd { margin: 0; font-size: .875rem; line-height: 1.45; }

/* 02 Origin: beige band with a draggable v1.0 strip */
.cs-origin { background: var(--beige); padding-block: 8rem 5rem; }
.cs-strip { --strip-pad: max(2rem, (100vw - 76rem) / 2); margin-top: 4rem; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--strip-pad); padding-bottom: 1rem; }
.cs-strip:focus-visible { outline: 3px solid var(--eggplant); outline-offset: -3px; }
.cs-strip-track { display: flex; gap: 1.5rem; width: max-content; margin: 0; padding: 0 var(--strip-pad); list-style: none; }
.cs-tile { display: flex; flex-direction: column; gap: 1.25rem; width: 18rem; padding: 1.25rem; background: var(--ivory); border-radius: 1.25rem; scroll-snap-align: start; }
.cs-tile-head { display: flex; justify-content: space-between; align-items: center; min-height: 1.6rem; margin: 0; }
.cs-tile-num { margin-left: auto; font-size: .75rem; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; opacity: .7; }
.cs-tag { padding: .25rem .5rem; background: var(--eggplant); color: var(--ivory); font-size: .75rem; font-weight: 600; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.cs-tag-muted { background: none; color: var(--eggplant); box-shadow: inset 0 0 0 1px var(--eggplant); }
.cs-tile-visual { display: grid; place-items: center; height: 17rem; padding: 1.25rem; background: var(--beige); border-radius: .875rem; overflow: hidden; text-align: center; }
.cs-tile-visual > p { margin: 0; }
.cs-tile-visual .cs-stat { font-size: 6.5rem; line-height: .9; }
.cs-tile-visual .cs-tile-principle { font-size: 2.5rem; line-height: 1.04; }
.cs-tile-dropped { text-decoration: line-through; text-decoration-thickness: .06em; }
.cs-tile-visual-brand { background: var(--snoof-cream); }
.cs-tile-visual-brand img { width: 100%; height: auto; }
/* Wireframes show their top part at a readable scale, cropped by the visual frame. */
.cs-tile-visual-wire { place-items: start center; padding: 1.25rem 1.25rem 0; }
.cs-tile-visual-wire img { display: block; width: 100%; height: auto; border: 1px solid var(--eggplant); border-bottom: 0; border-radius: .625rem .625rem 0 0; }
.cs-tile-caption { min-height: 4.5em; margin: 0; font-size: .9375rem; line-height: 1.5; }
.cs-tile-caption strong { font-weight: 700; }
.cs-tile-title { display: block; margin-bottom: .25rem; font-size: 1.0625rem; line-height: 1.3; }
.cs-tile-wire .cs-tile-visual { background: var(--beige); }
/* All tile shells stay ivory on the beige band; color lives inside the visual area. */
.cs-tile-ink .cs-tile-visual { background: var(--eggplant); color: var(--ivory); }
.cs-tile-ink.cs-tile-hl .cs-tile-visual { background: var(--snoof-peach); color: var(--eggplant); }
.cs-tile-peach .cs-tile-visual { background: var(--snoof-peach); }
/* Dropped items read as a struck-through list, sized to fit the frame. */
.cs-tile-visual .cs-tile-dropped { font-family: "DM Sans", system-ui, sans-serif; font-variation-settings: normal; font-weight: 700; font-size: 1.75rem; line-height: 1.25; letter-spacing: -.02em; }
.cs-tile-visual .cs-stamp { font-size: 3rem; padding: .25rem 1rem; border: 3px solid var(--eggplant); transform: rotate(-6deg); }
.cs-strip-hint { margin-top: 1rem; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* 03 Research */
.cs-research { padding-block: 8rem; }
.cs-toxic { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; margin-block: 4.5rem 6rem; }
.cs-toxic-label { display: inline-flex; align-items: center; gap: .26em; margin: 0; padding: .12em .5em .16em .32em; background: var(--snoof-peach); border: 3px solid var(--eggplant); border-radius: 999px; font-family: "Fraunces", Georgia, serif; font-weight: 900; font-optical-sizing: none; font-variation-settings: "wght" 900, "opsz" 72, "SOFT" 100, "WONK" 1; font-size: clamp(2.75rem, 5vw, 4.25rem); line-height: 1; letter-spacing: -.02em; }
.cs-toxic-icon { flex: none; width: .68em; height: .68em; margin-top: .08em; }
.cs-toxic-question { margin: 0; font-size: clamp(1.375rem, 2.2vw, 2rem); font-weight: 600; line-height: 1.25; letter-spacing: -.015em; }
.cs-finding { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: center; margin-bottom: 6rem; }
.cs-finding > div { grid-column: 1 / 6; font-size: 1.125rem; }
.cs-finding > :last-child { grid-column: 7 / 13; }
.cs-finding-num { margin-bottom: .5rem; font-size: 3rem; }
.cs-quote { margin: 0; padding: 3rem; background: var(--snoof-peach); border-radius: 1.2rem; }
.cs-quote p { margin: 0 0 1.5rem; font-size: clamp(2.5rem, 3vw, 2.875rem); line-height: 1.1; }
.cs-quote footer { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cs-finding-pets > div { grid-column: 1 / 5; }
.cs-finding-pets > :last-child { grid-column: 5 / 13; }
.cs-behaviors { margin: 0; }
.cs-behaviors ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.cs-behaviors li { position: relative; }
.cs-behaviors img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 1rem; background: var(--beige); }
.cs-behaviors span { position: absolute; left: .75rem; bottom: .75rem; padding: .375rem .75rem; background: var(--ivory); border-radius: 999px; font-size: .875rem; font-weight: 700; }
.cs-behaviors figcaption { margin-top: .875rem; font-size: .875rem; line-height: 1.5; opacity: .82; }
.cs-research-foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; row-gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--eggplant); }
.cs-research-foot > :first-child { grid-column: 1 / 6; grid-row: 1 / 3; font-size: 1.125rem; }
.cs-research-left .cs-note { margin: 1rem 0 0; font-size: .9375rem; }
.cs-research-foot > :not(:first-child) { grid-column: 7 / 13; margin-bottom: 0; }

/* 04 Problem */
.cs-problem { padding-block: 8rem; background: var(--ivory); }
.cs-problem .cs-copy strong { font-weight: 700; }
.cs-layers3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 4rem 0 6rem; padding: 0; list-style: none; counter-reset: layer; }
.cs-layers3 li { display: flex; flex-direction: column; gap: .75rem; padding-top: 1.25rem; border-top: 2px solid var(--eggplant); font-size: 1.0625rem; counter-increment: layer; }
.cs-layers3 li::before { content: "0" counter(layer); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; }
.cs-layer-word { font-size: clamp(2.5rem, 3.2vw, 3rem); }
.cs-before { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: center; }
/* Before/after comparison (v1.0 wireframe over the v2.0 screen). The range input covers the frame, so dragging
   anywhere (or the arrow keys) moves the divider; script.js keeps --pos in sync. */
.cs-compare { grid-column: 2 / 6; width: 100%; max-width: 19rem; margin: 0; }
.cs-compare-frame { position: relative; overflow: hidden; border-radius: 2rem; aspect-ratio: 786 / 1704; background: #fff; }
.cs-compare-frame img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.cs-compare-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); background: #fff; }
.cs-compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--eggplant); pointer-events: none; }
.cs-compare-handle::after { content: "‹ ›"; position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; transform: translate(-50%, -50%); background: var(--eggplant); color: var(--ivory); border-radius: 50%; font-size: 1.125rem; font-weight: 700; letter-spacing: .1em; }
.cs-compare-tag { position: absolute; z-index: 2; top: .875rem; padding: .25rem .5rem; border: 0; font: inherit; font-size: .75rem; font-weight: 600; letter-spacing: .08em; line-height: 1.3; cursor: pointer; }
.cs-compare-tag:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 2px; }
.cs-compare-tag[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--eggplant), 0 0 0 3px var(--orange); }
.cs-compare-tag-before { left: .875rem; background: var(--ivory); color: var(--eggplant); box-shadow: inset 0 0 0 1px var(--eggplant); }
.cs-compare-tag-after { right: .875rem; background: var(--eggplant); color: var(--ivory); }
.cs-compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.cs-compare-frame:has(.cs-compare-range:focus-visible) { outline: 3px solid var(--orange-deep); outline-offset: 3px; }
.cs-compare figcaption { margin-top: 1rem; font-size: .875rem; line-height: 1.5; text-align: center; }
.cs-compare figcaption span { display: block; }
.cs-compare-hint { margin-top: .25rem; font-weight: 600; }
/* Without JavaScript: the two screens side by side, no divider. */
html:not(.js) .cs-compare { max-width: 30rem; }
html:not(.js) .cs-compare-device { background: none; padding: 0; }
html:not(.js) .cs-compare-frame { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; aspect-ratio: auto; border-radius: 0; background: none; }
html:not(.js) .cs-compare-before { position: static; order: -1; clip-path: none; }
html:not(.js) .cs-compare-frame img { border-radius: 1rem; }
html:not(.js) .cs-compare-handle, html:not(.js) .cs-compare-range, html:not(.js) .cs-compare-hint, html:not(.js) .cs-compare-tag { display: none; }
.cs-before-copy { grid-column: 7 / 13; font-size: 1.125rem; }
.cs-marker { font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 600; line-height: 1.45; letter-spacing: -.01em; }
.cs-marker { background: linear-gradient(transparent 58%, var(--snoof-peach) 58%); box-decoration-break: clone; -webkit-box-decoration-break: clone; display: inline; }
.cs-before-copy .cs-label { margin-bottom: 1rem; }
.cs-before-copy .cs-marker + p { margin-top: 1.5rem; }
.cs-flow { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--eggplant); }
.cs-flow p, .cs-flow-line { display: flex; align-items: center; gap: .75rem; margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.cs-flow p > span:first-child, .cs-flow-line > span:first-child { padding: .125rem .5rem; font-size: .75rem; letter-spacing: .08em; box-shadow: inset 0 0 0 1px var(--eggplant); }
.cs-flow-old { opacity: .65; }
.cs-flow-line { margin: 2rem 0 0 !important; padding-top: 1.5rem; border-top: 1px solid var(--eggplant); }
.cs-version[data-version="v1"] .cs-flow-old { opacity: 1; }
/* Comparator copy follows the selected version (script.js); without JavaScript both versions show. */
.js .cs-version[hidden] { display: none; }
html:not(.js) .cs-version + .cs-version { margin-top: 2.5rem; }
/* Swap is instant on purpose: the text must never sit invisible mid-fade. */
.cs-flow-new > span:first-child { background: var(--eggplant); color: var(--ivory); }
.cs-statement { text-wrap: balance; max-width: 20em; margin: 7rem auto 1.25rem; text-align: center; font-size: clamp(2.5rem, 3.2vw, 3rem); line-height: 1.1; }

/* 05A Connecting the dots */
.cs-dots { padding-block: 8rem; border-top: 1px solid var(--eggplant); }
.cs-alts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: 1.5rem; margin: 3.5rem 0 6rem; padding: 0; list-style: none; }
.cs-alts li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: .75rem; padding: 1.75rem; border: 1px solid var(--eggplant); border-radius: 1.25rem; }
.cs-alts p { margin: 0; }
.cs-alt-name { font-size: 1.375rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.cs-alt-why { align-self: stretch; margin-top: .5rem !important; padding: 1rem 1.125rem; background: var(--beige); border-radius: .75rem; font-size: .9375rem; line-height: 1.5; }
.cs-alt-why span { display: block; margin-bottom: .25rem; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cs-choice { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: center; }
.cs-choice-copy { grid-column: 1 / 7; font-size: 1.125rem; }
.cs-choice-title { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: .75rem; }
.cs-criteria { margin: 1.5rem 0; padding: 0; list-style: none; }
.cs-criteria li { position: relative; padding: .625rem 0 .625rem 1.5rem; border-bottom: 1px solid rgba(64, 8, 73, .25); }
.cs-criteria li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: .5rem; height: .5rem; background: var(--orange); }
.cs-choice-why { margin-top: 1.5rem; font-size: 1.25rem; line-height: 1.45; }
.cs-more { margin: 1.25rem 0 0; }
.cs-more summary { display: inline-flex; align-items: center; gap: .625rem; padding: .375rem 0; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; list-style: none; }
.cs-more summary::-webkit-details-marker { display: none; }
.cs-more summary:hover { text-decoration: underline; text-underline-offset: .25em; }
.cs-more summary:focus-visible { outline: 2px solid var(--eggplant); outline-offset: 4px; border-radius: 2px; }
.cs-more[open] .cs-story-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.cs-more .cs-criteria { margin: .5rem 0 0; }
.cs-rule { margin: 2rem 0 0; padding: 1.25rem 1.5rem; background: var(--beige); border-radius: 1rem; font-family: "DM Sans", system-ui, sans-serif; font-variation-settings: normal; font-weight: 700; font-size: 1.375rem; line-height: 1.4; letter-spacing: -.01em; }
.cs-choice-visual { position: relative; grid-column: 8 / 13; }
.cs-choice-visual .cs-phone { max-width: 19rem; margin-left: auto; }
.cs-callout { position: absolute; left: 0; bottom: 14%; width: 64%; max-width: 23rem; padding: .25rem; border: 1px solid var(--eggplant); }
.cs-choice-visual .cs-phone { position: relative; }
.cs-callout-spot { position: absolute; left: 5%; right: 5%; top: 63%; height: 25%; border: 2px solid var(--orange); border-radius: .75rem; opacity: 0; pointer-events: none; }
/* Motion: the detail is first marked on the screen, then lifts out to the callout, so it reads as part of this result. */
.motion .cs-choice-visual .cs-callout { transform-origin: 85% 30%; opacity: 0; transform: translateX(30%) scale(.7); transition: opacity .5s ease .9s, transform .8s cubic-bezier(.2, .7, .2, 1) .9s; }
.motion .cs-choice-visual.is-shown .cs-callout { opacity: 1; transform: none; }
.motion .cs-choice-visual.is-shown .cs-callout-spot { animation: cs-spot 1.6s ease .2s both; }
@keyframes cs-spot { 0% { opacity: 0; transform: scale(1.06); } 25%, 60% { opacity: 1; transform: none; } 100% { opacity: .0; } }

/* 05B Designing for uncertainty: immersive eggplant band */
.cs-uncertainty { background: var(--eggplant); color: var(--ivory); padding-block: 8rem; }
.cs-uncertainty .cs-label { color: var(--beige); }
.cs-uncertainty .cs-phone { background: var(--beige); }
.cs-uncertainty a:focus-visible { outline-color: var(--ivory); }
.cs-triptych { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; align-items: end; margin: 4.5rem 0 7rem; padding: 0; list-style: none; }
.cs-triptych li { display: flex; flex-direction: column; align-items: center; }
.cs-triptych .cs-label { margin-bottom: 1rem; }
.cs-triptych .cs-phone { width: 100%; max-width: 16rem; }
.cs-triptych-focus .cs-phone { max-width: 19rem; }
.cs-exploded .cs-copy { margin-bottom: 2.5rem; }
.cs-exploded-layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: 1rem 2rem; margin: 0; padding: 0; list-style: none; }
.cs-exploded-layers li { display: grid; grid-row: span 2; grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-rows: subgrid; column-gap: .875rem; align-items: center; }
.cs-layer-num { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--beige); border-radius: 50%; font-weight: 700; color: var(--beige); }
.cs-layer-text { font-size: .9375rem; line-height: 1.4; color: var(--beige); }
.cs-layer-panel { grid-column: 1 / -1; align-self: stretch; overflow: hidden; background: #fff; border-radius: 1.25rem; }
/* UI detail in its original screen: the whole screen at the same pixel scale, faded, with the detail at full
   strength on top and the window edges dissolving into the white panel. Values come from the inline custom
   properties (screen pixels, 786 px wide). */
.cs-ctx { position: relative; overflow: hidden; aspect-ratio: 786 / var(--win); background: #fff; -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
.cs-ctx-screen { display: block; width: 100%; height: auto; margin-top: calc(-100% * var(--top) / 786); opacity: .3; }
.cs-ctx-focus { position: absolute; left: calc(100% * var(--fx) / 786); top: calc(100% * var(--fy) / var(--win)); width: calc(100% * var(--fw) / 786); height: auto; }
.cs-climax { text-wrap: balance; margin: 7rem 0 2.5rem; text-align: center; font-size: clamp(2.75rem, 4.8vw, 4.5rem); line-height: 1; }

/* 06 Meet Snoof */
.cs-brand { padding-bottom: 8rem; }
.cs-brand-hero { display: grid; place-items: center; gap: 1.25rem; margin-top: 5rem; padding: 5.5rem 2rem; background: var(--snoof-navy); color: var(--snoof-cream); text-align: center; }
.cs-brand-hero img { width: min(70vw, 30rem); height: auto; }
.cs-brand-hero p { margin: 0; font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 500; }
.cs-brand-intro { padding-top: 8rem; }
.cs-group-label { margin: 5rem 0 1.75rem; padding-top: 1rem; border-top: 1px solid var(--eggplant); }
.cs-palette { margin: 0; }
/* Palette as one weighted strip: the core colors take more room, the accents less, so the hierarchy reads at a glance. */
.cs-palette ul { display: grid; grid-template-columns: 3fr 2.4fr 2.4fr 1.6fr 1.2fr 1.2fr; gap: 0 .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.cs-palette li { display: flex; flex-direction: column; gap: .125rem; font-size: .9375rem; font-weight: 600; }
.cs-palette li::before { content: ""; height: 8.5rem; margin-bottom: .75rem; background: var(--swatch); border-radius: .75rem; box-shadow: inset 0 0 0 1px rgba(64, 8, 73, .15); }
.cs-palette li span + span { font-weight: 400; font-size: .8125rem; letter-spacing: .04em; }
.cs-palette .cs-swatch-role { margin-top: .25rem; letter-spacing: 0; font-size: .8125rem; line-height: 1.35; opacity: .8; }
.cs-palette figcaption { max-width: 38em; font-size: 1.0625rem; line-height: 1.55; }
.cs-pets { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: start; }
.cs-pets figure { margin: 0; }
.cs-pets img { display: block; width: 100%; height: auto; border-radius: 1.2rem; }
.cs-pets-hero { grid-column: 1 / 6; }
.cs-pets-hero img { height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.cs-pets-sheet { grid-column: 6 / 13; }
/* AI credit: same orange side rule as the "Where AI helped" notes, without the label. Text keeps the softer tone
   through its color (not opacity) so the rule stays full orange. */
.cs-pets-sheet figcaption { margin-top: 1rem; padding-left: 1rem; border-left: 2px solid var(--orange); font-size: .9375rem; line-height: 1.5; max-width: 34em; color: rgba(64, 8, 73, .82); }
.cs-brand-v2 { margin-block: 5rem 0; font-size: 1.25rem; }
.cs-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: start; }
.cs-bento { row-gap: 5rem; }
.cs-bento-a { grid-column: 1 / 5; grid-row: 1; }
.cs-bento-b { grid-column: 5 / 9; grid-row: 1; margin-top: 4rem; }
.cs-bento-d { grid-column: 9 / 13; grid-row: 1; margin-top: 8rem; }
.cs-bento .cs-phone { padding: .5rem; border-radius: 2.75rem; }
.cs-bento .cs-phone img { border-radius: 2.3rem; }
.cs-phone-loop { position: relative; }
.cs-loop { display: none; }
.motion .cs-phone-loop.is-ready .cs-loop { position: absolute; inset: .5rem; display: block; width: calc(100% - 1rem); height: calc(100% - 1rem); object-fit: cover; border-radius: 2.3rem; background: #fff; }
.cs-loop-toggle { position: absolute; right: 1.1rem; bottom: 1.1rem; min-height: 2.75rem; padding: 0 .875rem; border: 0; border-radius: 999px; background: rgba(64, 8, 73, .82); color: var(--ivory); font: 600 .75rem/1 "DM Sans", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; opacity: 0; transition: opacity .2s ease; }
.cs-phone-loop:hover .cs-loop-toggle, .cs-loop-toggle:focus-visible, .cs-loop-toggle[aria-pressed="true"] { opacity: 1; }
.cs-loop-toggle:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 2px; }
/* Detail: the collection crop at near-native scale next to its explanation. */
.cs-bento-c { grid-column: 2 / 12; grid-row: 2; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: 2rem; align-items: center; margin: 0; }
.cs-bento-c img { grid-column: 1 / 6; padding: .375rem; }
.cs-bento-c figcaption { grid-column: 7 / 11; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.45; }
.cs-bento-c figcaption strong { display: block; margin-bottom: .5rem; font-family: "Fraunces", Georgia, serif; font-weight: 900; font-optical-sizing: none; font-variation-settings: "wght" 900, "opsz" 72, "SOFT" 100, "WONK" 1; font-size: 2.5rem; line-height: 1.04; letter-spacing: -.025em; }
.cs-tone { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin: 0 0 3rem; }
.cs-tone-title { grid-column: 1 / -1; }
.cs-tone-lede { grid-column: 1 / -1; margin: 0 0 1.75rem; font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -.015em; }
.cs-tone figure { display: grid; grid-template-rows: auto auto 1fr; margin: 0; padding: 2rem; background: var(--beige); border-radius: 1.25rem; }
.cs-tone-mode { margin: 0; font-size: 2.5rem; }
.cs-tone-desc { margin: .25rem 0 1.5rem; font-size: .9375rem; }
.cs-tone figure .cs-ctx { align-self: start; border-radius: 1rem; }

/* 07 Prototype */
.cs-proto { padding-block: 8rem; background: var(--beige); }
.cs-proto-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: start; }
.cs-proto-copy { grid-column: 1 / 7; font-size: 1.125rem; }
.cs-steps { margin: 1.5rem 0 2rem; padding: 0; list-style: none; counter-reset: step; }
.cs-steps li { display: grid; grid-template-columns: 3rem 1fr; padding: .875rem 0; border-top: 1px solid var(--eggplant); counter-increment: step; font-weight: 600; }
.cs-steps li::before { content: "0" counter(step); font-size: .8125rem; letter-spacing: .08em; padding-top: .2rem; }
.cs-video { grid-column: 8 / 12; position: sticky; top: 2rem; margin: 0; }
.cs-phone-video { position: relative; max-width: 20rem; margin-inline: auto; }
.cs-demo { display: block; width: 100%; height: auto; aspect-ratio: 640 / 1388; border-radius: 2rem; background: #fff; }
/* Small pause control (WCAG 2.2.2 for content that moves longer than 5 s); shown only when the loop plays. */
.cs-demo-toggle { position: absolute; right: .875rem; bottom: .875rem; min-height: 2.75rem; padding: 0 .875rem; border: 0; border-radius: 999px; background: rgba(64, 8, 73, .82); color: var(--ivory); font: 600 .75rem/1 "DM Sans", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; opacity: 0; transition: opacity .2s ease; }
.cs-phone-video:hover .cs-demo-toggle, .cs-demo-toggle:focus-visible, .cs-demo-toggle[aria-pressed="true"] { opacity: 1; }
.cs-demo-toggle:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 2px; }
@media (hover: none) { .cs-demo-toggle { opacity: 1; } }

/* 08 Next */
.cs-next { padding-block: 8rem 5rem; }
.cs-next-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 5rem; margin-bottom: 5rem; font-size: 1.0625rem; }
.cs-next-lede { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 600; line-height: 1.35; letter-spacing: -.015em; }
.cs-takeaways { margin: 0; padding: 0; list-style: none; }
.cs-next .cs-h3 { margin-bottom: 1.25rem; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; }
.cs-takeaways { counter-reset: tk; }
.cs-takeaways li { display: grid; grid-template-columns: 3rem 1fr; padding: 1.125rem 0; border-top: 1px solid var(--eggplant); counter-increment: tk; }
.cs-takeaways li::before { content: "0" counter(tk); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; padding-top: .2rem; }
.cs-later { padding: 2rem 0; border-top: 1px solid var(--eggplant); }
.cs-later .cs-label span { margin-left: .75rem; font-weight: 400; letter-spacing: .04em; text-transform: none; font-style: italic; }
.cs-later ul { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.cs-later li { padding: .5rem 1rem; border: 1px dashed var(--eggplant); border-radius: 999px; font-size: .9375rem; }
.cs-end { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--eggplant); }
.cs-end-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -.01em; text-decoration: none; }
.cs-end-link:hover { text-decoration: underline; }
.cs-proto-link { margin-top: 1.5rem; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }

/* Prototype host page (snoof-prototype.html): centers the exported prototype frame and scales it to fit. */
.proto-page { padding-bottom: 0; font-family: "DM Sans", system-ui, sans-serif; }
.proto-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.25rem; }
.proto-back { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.proto-back:hover { text-decoration: underline; }
.proto-stage { display: flex; flex-direction: column; align-items: center; padding: 0 1rem 1.5rem; }
.proto-frame { --s: 1; width: calc(393px * var(--s)); height: calc(852px * var(--s)); overflow: hidden; border-radius: calc(2rem * var(--s)); box-shadow: 0 0 0 calc(.4rem * var(--s)) var(--eggplant); }
.proto-frame iframe { display: block; width: 393px; height: 852px; border: 0; transform: scale(var(--s)); transform-origin: 0 0; background: #fff; }
.proto-note { margin: 1.25rem 0 0; font-size: .875rem; font-style: italic; opacity: .82; text-align: center; }

/* 5B static captions (also the reduced-motion and no-JavaScript fallback). */
.cs-step-caption { max-width: 17rem; margin: 1.25rem auto 0; text-align: center; font-size: .9375rem; line-height: 1.45; color: var(--ivory); }

/* ==========================================================================
   P1 scroll storytelling. Only active with html.motion, which script.js adds
   when JavaScript runs and prefers-reduced-motion is "no-preference".
   ========================================================================== */
/* Section 4: one verdict splits into three ideas. */
.motion .cs-layers-wrap { position: relative; margin: 4rem 0 6rem; }
.motion .cs-layers-wrap .cs-layers3 { margin: 0; }
.motion .cs-layers3 li { position: relative; }
/* Paced so the verdict is read first (about 0.3 s), then the split (1.2 s), then the text fades in. */
.motion .cs-layers3 li > *, .motion .cs-layers3 li::before { transition: opacity .55s ease 1.1s; }
.motion .cs-layers-wrap:not(.is-split) .cs-layers3 li:nth-child(1) { transform: translateX(calc(100% + 2rem)); }
.motion .cs-layers-wrap:not(.is-split) .cs-layers3 li:nth-child(3) { transform: translateX(calc(-100% - 2rem)); }
.motion .cs-layers-wrap:not(.is-split) .cs-layers3 li > *, .motion .cs-layers-wrap:not(.is-split) .cs-layers3 li::before { opacity: 0; transition-delay: 0s; }
.motion .cs-layers3 li { transition: transform 1.2s cubic-bezier(.45, 0, .2, 1) .3s, border-color .4s ease .75s; }
.motion .cs-layers-wrap:not(.is-split) .cs-layers3 li:not(:nth-child(2)) { border-top-color: transparent; transition-delay: 0s; }
.cs-verdict-chip { position: absolute; left: 50%; top: 50%; z-index: 1; display: flex; align-items: center; gap: .625rem; margin: 0; padding: .75rem 1.25rem; background: var(--eggplant); color: var(--ivory); border-radius: 999px; font-size: 1.25rem; font-weight: 700; white-space: nowrap; transform: translate(-50%, -50%); transition: opacity .45s ease .25s, transform .7s ease .25s; }
.cs-verdict-chip span { padding: .125rem .5rem; border: 1px solid var(--beige); color: var(--beige); font-size: .75rem; font-weight: 600; letter-spacing: .08em; }
.motion .cs-layers-wrap.is-split .cs-verdict-chip { opacity: 0; transform: translate(-50%, -50%) scale(.85); pointer-events: none; }

/* Section 5B: pinned phone with three synced steps. */
.motion .cs-scrolly { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; margin: 3rem 0 6rem; }
/* The phone takes most of the viewport height (up to 24rem wide) and stays vertically centered while pinned. */
.motion .cs-scrolly { --phone-w: min(24rem, calc((100vh - 5rem) / 2.2)); }
.motion .cs-stage { grid-column: 1 / 7; position: sticky; top: max(1.5rem, calc(50vh - var(--phone-w) * 1.1)); align-self: start; display: grid; justify-items: center; }
.motion .cs-stage figure { grid-area: 1 / 1; width: 100%; max-width: var(--phone-w); opacity: 0; transform: scale(.97); transition: opacity .6s ease, transform .6s ease; }
.motion .cs-stage figure.is-active { opacity: 1; transform: none; }
.motion .cs-triptych.is-scrolly { grid-column: 7 / 12; display: block; margin: 0; padding-bottom: 25vh; }
.motion .cs-triptych.is-scrolly li { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 75vh; opacity: .3; transition: opacity .5s ease; }
.motion .cs-triptych.is-scrolly li.is-active { opacity: 1; }
.motion .cs-triptych.is-scrolly .cs-step-caption { max-width: 14em; margin: 1rem 0 0; text-align: left; font-family: "Fraunces", Georgia, serif; font-weight: 900; font-optical-sizing: none; font-variation-settings: "wght" 900, "opsz" 72, "SOFT" 100, "WONK" 1; font-size: clamp(2.5rem, 3vw, 2.875rem); line-height: 1.08; letter-spacing: -.02em; }

/* 5B, after the sequence: the layers start stacked as one card and fan out. */
.motion .cs-exploded-layers li { position: relative; transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .6s ease; }
.motion .cs-exploded-layers li:nth-child(1) { z-index: 3; }
.motion .cs-exploded-layers li:nth-child(2) { z-index: 2; }
.motion .cs-exploded-layers:not(.is-in) li:nth-child(2) { transform: translate(calc(-100% - 2rem), .75rem); }
.motion .cs-exploded-layers:not(.is-in) li:nth-child(3) { transform: translate(calc(-200% - 4rem), 1.5rem); }
.motion .cs-exploded-layers:not(.is-in) li:nth-child(n+2) .cs-layer-num, .motion .cs-exploded-layers:not(.is-in) li:nth-child(n+2) .cs-layer-text { opacity: 0; }
.motion .cs-exploded-layers .cs-layer-num, .motion .cs-exploded-layers .cs-layer-text { transition: opacity .4s ease .5s; }

/* Section 6 (html.motion only): idle pet animation (tail sway and breathing). The background is the original
   image with only the tail area filled in, so the body layer sits exactly on top of itself. Layers share the source image's 3:4 frame, centered and
   cropped like the 4:5 card, so the transform origins below are in image coordinates. */
.cs-pets-hero { position: relative; }
.cs-pet-anim { display: none; }
.cs-pet-video { display: none; }
.motion .cs-pet-video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 1.2rem; }
.motion .cs-pet-anim { display: block; position: absolute; inset: 0; overflow: hidden; border-radius: 1.2rem; }
.cs-pet-stage { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 3 / 4; transform: translateY(-50%); }
.cs-pet-stage img, .cs-pet-cat { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.cs-pet-tail { transform-origin: 31.25% 53.2%; animation: cs-tail 3.8s ease-in-out infinite; }
.cs-pet-body { transform-origin: 47.8% 79.6%; animation: cs-breathe 3.4s ease-in-out infinite; }
.cs-pet-anim:not(.is-live) img { animation-play-state: paused; }
@keyframes cs-tail { 0%, 100% { transform: rotate(-2.5deg); } 40% { transform: rotate(3deg); } 52% { transform: rotate(2deg); } 60% { transform: rotate(3.4deg); } }
@keyframes cs-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.005, 1.012); } }

/* Section 2 (html.motion only): pinned strip driven by vertical scroll. */
.motion .cs-strip-sticky { position: sticky; }
.motion .cs-strip.is-pinned { overflow: hidden; scroll-snap-type: none; }
.motion .cs-strip.is-pinned .cs-strip-track { will-change: transform; }
/* Pinned Origin strip: tiles grow with the viewport, and one tile at a time (following scroll progress) is
   enlarged while the others step back, so the sequence reads card by card. */
.motion .cs-strip.is-pinned .cs-strip-track { gap: 2.75rem; padding-block: 3.5rem; }
.motion .cs-strip.is-pinned .cs-tile { width: clamp(18rem, 23vw, 25rem); opacity: .6; transform: scale(.96); transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .5s ease; }
.motion .cs-strip.is-pinned .cs-tile.is-focus { opacity: 1; transform: scale(1.12); }
.motion .cs-strip.is-pinned .cs-tile-visual { height: clamp(17rem, 34vh, 23rem); }
.motion .cs-strip.is-pinned .cs-tile-caption { font-size: 1rem; }

/* P1 entrances (html.motion only). */
.motion .rv { opacity: 0; transform: translateY(1.25rem); transition: opacity .7s ease var(--rv-d, 0s), transform .8s cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0s); }
.motion .rv.rv-side { transform: translateX(-1rem); }
.motion .rv.rv-scale { transform: scale(.96); }
.motion .rv.rv-pop { transform: scale(.92); }
.motion .rv.is-in { opacity: 1; transform: none; }
/* 5A: the chosen direction gets a subtle emphasis once it is in view. */
.motion .cs-criteria li.rv::before { transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1) calc(var(--rv-d, 0s) + .3s); }
.motion .cs-criteria li.rv.is-in::before { transform: none; }
/* Hero: plays on load from the first paint (no wait for scrolling); short, so the page is readable at once. */
@keyframes cs-rise { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
@keyframes cs-settle { from { transform: scale(1.06); } to { transform: none; } }
.motion .cs-project { animation: cs-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.motion .cs-display { animation: cs-rise .7s cubic-bezier(.2, .7, .2, 1) .08s both; }
.motion .cs-hero-copy { animation: cs-rise .7s cubic-bezier(.2, .7, .2, 1) .2s both; }
.motion .cs-meta { animation: cs-rise .7s cubic-bezier(.2, .7, .2, 1) .3s both; }
.motion .cs-hero-figure { overflow: hidden; }
.motion .cs-hero-figure img { animation: cs-settle 1.4s cubic-bezier(.2, .7, .2, 1) both; }

/* Case navigation (snoof.html only). Desktop: compact bottom pill with a section menu. */
.case-nav { position: fixed; z-index: 10; left: 50%; bottom: 1.5rem; transform: translateX(-50%); transition: transform .25s ease, opacity .25s ease; display: flex; align-items: stretch; background: var(--ivory); border: 1px solid var(--eggplant); font-family: "DM Sans", system-ui, sans-serif; font-size: .8125rem; font-weight: 500; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.case-progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--beige); overflow: hidden; }
.case-progress span { display: block; height: 100%; background: var(--orange); transform-origin: left; transform: scaleX(var(--progress, 0)); }
.case-back, .case-name, .case-toggle { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1rem; }
.case-back { text-decoration: none; }
.case-back:hover { text-decoration: underline; }
.case-name { border-left: 1px solid var(--eggplant); font-weight: 700; }
.case-toggle { border: 0; border-left: 1px solid var(--eggplant); background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.case-toggle::after { content: ""; width: .4rem; height: .4rem; margin-left: .25rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-135deg) translate(-1px, -1px); }
.case-nav.is-open .case-toggle::after { transform: rotate(45deg) translate(-2px, -2px); }
.case-count { font-variant-numeric: tabular-nums; font-weight: 700; }
.case-toggle:focus-visible, .case-nav a:focus-visible { outline: 2px solid var(--eggplant); outline-offset: -4px; }
.case-menu { margin: 0; padding: .5rem 0; list-style: none; }
.case-menu a { display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; padding: 0 1.25rem; text-decoration: none; white-space: nowrap; }
.case-menu a:hover { text-decoration: underline; }
.case-menu a::before { content: ""; width: .375rem; height: .375rem; }
.case-menu a[aria-current] { font-weight: 700; }
.case-menu a[aria-current]::before { background: var(--orange-deep); }
.case-menu .nav-num { font-variant-numeric: tabular-nums; }
.case-menu-back { display: none; }
.js .case-menu { position: absolute; right: -1px; bottom: calc(100% + .5rem); min-width: 14rem; background: var(--ivory); border: 1px solid var(--eggplant); }
.js .case-nav:not(.is-open) .case-menu { display: none; }
html:not(.js) .case-toggle { display: none; }
html:not(.js) .case-menu { display: flex; padding: 0; }
html:not(.js) .case-menu a { padding: 0 .625rem; }
html:not(.js) .case-menu a::before, html:not(.js) .case-menu .nav-num { display: none; }

/* Starts hidden (class in the HTML); only applies with JavaScript, so the nav stays visible without it. */
.js .case-nav.is-hidden { transform: translate(-50%, calc(100% + 2rem)); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .case-nav { transition: none; } }

/* Case study: tablet */
@media (max-width: 1100px) {
  .cs-hero-figure { width: 42vw; }
  .cs-exploded-layers { gap: 1.25rem; }
  .cs-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Case study: mobile */
@media (max-width: 760px) {
  .case { padding-bottom: 5rem; }
  .cs-split, .cs-hero, .cs-finding, .cs-research-foot, .cs-before, .cs-choice, .cs-exploded, .cs-pets, .cs-proto-grid { display: block; }
  .cs-hero { min-height: 0; }
  .cs-hero-inner { display: block; }
  /* Mobile: title, then a full-bleed square photo, so both share the first screen. */
  .cs-hero-figure { position: relative; top: auto; bottom: auto; width: auto; margin: 1.5rem -1.25rem 2rem; }
  .cs-hero-figure img { height: auto; aspect-ratio: 1 / 1; object-position: 62% 88%; }
  .cs-hero-text { padding-block: 1.75rem 3rem; }
  .cs-project { margin-bottom: 1.25rem; }
  .cs-project img { width: 5rem; }
  .cs-display { font-size: 3.25rem; margin-bottom: 0; }
  .cs-hero-copy { font-size: 1.0625rem; }
  .cs-meta-band { padding-block: 2rem; }
  .cs-meta { gap: 1.25rem; }
  .cs-origin, .cs-research, .cs-problem, .cs-dots, .cs-uncertainty, .cs-proto, .cs-next { padding-block: 5rem; }
  .cs-brand { padding-bottom: 5rem; }
  .cs-copy { font-size: 1.0625rem; }
  .cs-h2 { margin-bottom: 1.75rem; }
  .cs-strip { margin-top: 2.5rem; }
  .cs-strip { --strip-pad: 1.25rem; }
  .cs-strip-track { gap: 1rem; }
  .cs-tile { width: 16rem; }
  .cs-tile-visual { height: 15rem; }
  .motion .cs-strip.is-pinned .cs-strip-track { gap: 1rem; padding-block: 1.5rem; }
  .motion .cs-strip.is-pinned .cs-tile { width: 16rem; }
  .motion .cs-strip.is-pinned .cs-tile.is-focus { transform: scale(1.03); }
  .motion .cs-strip.is-pinned .cs-tile-visual { height: 15rem; }
  .motion .cs-strip.is-pinned .cs-tile-caption { font-size: .9375rem; }
  .cs-split > .cs-copy { padding-top: 0; margin-top: 1.75rem; }
  .cs-lede-intro { max-width: none; }
  .cs-toxic { margin-block: 3rem 4rem; }
  .cs-toxic-question { text-align: left; }
  .cs-finding { margin-bottom: 4rem; }
  .cs-quote { margin-top: 2rem; padding: 2rem 1.5rem; }
  .cs-behaviors { margin-top: 2rem; }
  .cs-behaviors ul { gap: .5rem; }
  .cs-behaviors span { left: .375rem; bottom: .375rem; padding: .25rem .5rem; font-size: .75rem; }
  .cs-research-foot > :first-child { margin-bottom: 1.5rem; }
  .cs-layers3, .cs-alts, .cs-triptych, .cs-next-grid, .cs-tone, .cs-exploded-layers { grid-template-columns: 1fr; }
  .cs-alts { grid-template-rows: none; row-gap: 1rem; }
  .cs-alts li { grid-row: auto; display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; }
  .cs-next-grid { gap: 3rem; }
  .cs-layers3 { margin: 2.5rem 0 4rem; }
  .cs-compare { max-width: 15rem; margin: 0 auto 2.5rem; }
  html:not(.js) .cs-compare { max-width: none; }
  .cs-statement { margin-top: 4.5rem; }
  .cs-alts { margin: 2.5rem 0 4rem; }
  .cs-choice-visual { margin-top: 3rem; }
  .cs-choice-visual .cs-phone { max-width: 15rem; margin-inline: auto 0; }
  .cs-callout { width: 70%; bottom: 8%; }
  .cs-rule { font-size: 1.1875rem; }
  .cs-triptych { gap: 3rem; margin: 3rem 0 4.5rem; }
  .cs-triptych .cs-phone, .cs-triptych-focus .cs-phone { max-width: 15rem; }
  .cs-exploded-layers { margin-top: 2rem; }
  .cs-exploded-layers { grid-template-rows: none; gap: 2rem; }
  .cs-exploded-layers li { grid-row: auto; grid-template-rows: auto auto; row-gap: .875rem; }
  .cs-layer-panel { min-height: 0; }
  .cs-climax { margin-top: 4.5rem; font-size: 2.75rem; }
  .cs-brand-hero { padding: 5rem 1.25rem; }
  .cs-brand-intro { padding-top: 4rem; }
  .cs-group-label { margin-top: 3.5rem; }
  .cs-brand-hero { margin-top: 3.5rem; }
  .cs-palette ul { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.25rem; gap: 1.25rem .75rem; }
  .cs-palette li::before { height: 6rem; }
  .cs-pets-hero { margin-bottom: 1.5rem; }
  .cs-brand-v2 { margin-block: 3.5rem 0; font-size: 1.125rem; }
  .cs-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; row-gap: 2rem; }
  /* Mobile: the animated avatar creator leads, larger and centered; welcome and home sit side by side below. */
  .cs-bento > * { grid-row: auto; }
  .cs-bento-b { grid-column: 1 / -1; grid-row: 1; width: 66%; margin: 0 auto; }
  .cs-bento-a { grid-column: 1; grid-row: 2; }
  .cs-bento-d { grid-column: 2; grid-row: 2; margin-top: 3rem; }
  .cs-bento-c { grid-row: 3; }
  .motion .cs-phone-loop.is-ready .cs-loop { inset: .35rem; width: calc(100% - .7rem); height: calc(100% - .7rem); border-radius: 1.6rem; }
  .cs-bento-c { grid-column: 1 / -1; display: block; }
  .cs-bento-c figcaption { margin-top: 1.25rem; font-size: 1.0625rem; }
  .cs-bento .cs-phone { padding: .35rem; border-radius: 1.9rem; }
  .cs-bento .cs-phone img { border-radius: 1.6rem; }
  .cs-tone { margin: 0 0 2rem; gap: 1.25rem; }
  .cs-tone-lede { margin-bottom: 0; }
  .cs-tone figure { padding: 1.5rem; }
  .cs-video { position: static; margin-top: 3rem; }
  .cs-phone-video { max-width: 16rem; }
  .cs-next-grid { gap: 2.5rem; }
  .cs-end { flex-direction: column; gap: .5rem; }

  /* P1 on mobile: vertical split, compact pinned phone, and a simple fade-up for the layers. */
  .motion .cs-layers-wrap { margin: 2.5rem 0 4rem; }
  .motion .cs-layers-wrap:not(.is-split) .cs-layers3 li:nth-child(1) { transform: translateY(calc(100% + 2rem)); }
  .motion .cs-layers-wrap:not(.is-split) .cs-layers3 li:nth-child(3) { transform: translateY(calc(-100% - 2rem)); }
  .cs-verdict-chip { font-size: 1.0625rem; padding: .625rem 1rem; }
  .motion .cs-scrolly { display: block; margin: 2.5rem 0 4rem; }
  .motion .cs-triptych.is-scrolly { padding-bottom: 0; }
  .motion .cs-stage { position: sticky; top: 0; z-index: 2; margin: 0 -1.25rem; padding: 1rem 0 .75rem; background: var(--eggplant); }
  /* Phone as large as the screen allows (up to 15rem), leaving about 14rem below for the step caption. */
  .motion .cs-stage figure { max-width: min(15rem, calc((100vh - 14rem) / 2.2)); }
  @supports (height: 100svh) { .motion .cs-stage figure { max-width: min(15rem, calc((100svh - 14rem) / 2.2)); } }
  .motion .cs-triptych.is-scrolly li { min-height: 46vh; justify-content: center; }
  .motion .cs-triptych.is-scrolly .cs-step-caption { font-size: 2.5rem; }
  .motion .cs-exploded-layers:not(.is-in) li:nth-child(n) { transform: translateY(1.5rem); opacity: 0; }
  .motion .cs-exploded-layers li:nth-child(2) { transition-delay: .12s; }
  .motion .cs-exploded-layers li:nth-child(3) { transition-delay: .24s; }

  /* Mobile case nav: thin top progress line and a small bottom-right button that opens the section menu. */
  .case-nav { left: auto; right: 1rem; bottom: 1rem; transform: none; }
  .js .case-nav.is-hidden { transform: translateY(calc(100% + 1.5rem)); }
  .case-progress { position: fixed; top: 0; height: 3px; }
  .case-back, .case-name, .case-current-label { display: none; }
  .case-toggle { min-width: 2.75rem; padding: 0 .875rem; border-left: 0; }
  .js .case-menu { position: fixed; right: 1rem; bottom: 4.5rem; width: min(17rem, calc(100vw - 2rem)); max-height: calc(100vh - 7rem); overflow-y: auto; }
  .case-menu-back { display: block; border-top: 1px solid var(--eggplant); margin-top: .5rem; padding-top: .5rem; }
  html:not(.js) .case-nav { position: static; transform: none; margin: 0 1.25rem 1rem; }
  html:not(.js) .case-menu { flex-wrap: wrap; }
}

/* Career chapters. Default (mobile, reduced motion, no JavaScript): a simple static list after the Hero. */
.hero-chapters { display: grid; gap: 2.5rem; padding-block: 1rem 5rem; font-family: "DM Sans", system-ui, sans-serif; }
.chapter { max-width: 34rem; padding-top: 1.25rem; border-top: 1px solid var(--eggplant); }
.chapter-exp { margin: -.25rem 0 .875rem; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.chapter-skills { display: flex; flex-wrap: wrap; gap: .375rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.chapter-skills li { padding: .25rem .625rem; border: 1px solid color-mix(in srgb, var(--eggplant) 35%, transparent); border-radius: 999px; font-size: .75rem; font-weight: 500; line-height: 1.3; }
.chapter-title { margin: 0 0 .75rem; font-family: "Fraunces", Georgia, serif; font-weight: 900; font-optical-sizing: none; font-variation-settings: "wght" 900, "opsz" 72, "SOFT" 100, "WONK" 1; font-size: clamp(2.25rem, 4.6vw, 4.25rem); line-height: 1.02; letter-spacing: -.025em; }
.chapter-summary { margin: 0; max-width: 28em; font-size: 1.125rem; line-height: 1.55; }

/* Story mode v2 (desktop with motion, set up by script.js). */
.hero-story-pin { position: relative; }
.hero-story-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.hero-story-sticky .hero { position: relative; flex: 1; padding-block: 1rem 4rem; align-items: center; }
.hero-story .hero-copy { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; z-index: 2; }
.hero-story .hero-copy h1 { transform-origin: 0 0; will-change: transform; }
.hero-story .skin-picker { display: none; }
.story-stage { position: absolute; right: 0; clip-path: inset(0 -1rem -3rem -1rem); } /* a little room below for the last row of skill pills */
.hero-story .chapter { position: absolute; left: 0; right: 0; top: 0; max-width: 30rem; border-top: 0; padding-top: 0; opacity: 0; will-change: transform, opacity; }
.hero-story .chapter-exp { margin: -.75rem 0 1rem; font-size: .75rem; font-weight: 500; }
@media (max-height: 819px) {
  .hero-story-sticky .site-header { padding-top: 1.25rem; }
  .hero-story-sticky .hero { padding-bottom: 5.75rem; } /* keep the intro and scroll cue clear of the bottom nav */
  .hero-story .hero-avatar { height: min(46rem, calc(100vh - 10.5rem)); } /* the pinned Hero must fit the viewport */
  .hero-story .hero-role { margin-bottom: 1rem; }
  .hero-story .hero-support { font-size: 1rem; line-height: 1.45; }
  .hero-story .hero-scroll { margin-top: 1.25rem; }
  .hero-story-sticky .monogram .logo-full { width: 6rem; }
  .hero-story .chapter-title { margin-bottom: 1rem; font-size: 1.75rem; }
  .hero-story .chapter-exp { margin: -.625rem 0 .75rem; }
  .hero-story .chapter-summary { font-size: .9375rem; line-height: 1.5; }
  .hero-story .chapter-skills { margin-top: .75rem; }
  .hero-story .chapter[data-skin="current"] .chapter-title { font-size: 1.5rem; }
  .hero-story .chapter[data-skin="current"] .chapter-summary { font-size: .875rem; }
}
.hero-story .chapter-title { margin: 0 0 1.25rem; padding-left: 0; font-family: "DM Sans", system-ui, sans-serif; font-variation-settings: normal; font-weight: 700; font-size: clamp(2rem, 2.5vw, 2.25rem); line-height: 1.12; letter-spacing: -.025em; }
.hero-story .chapter-summary { max-width: 26em; font-size: 1.0625rem; line-height: 1.6; }
.hero-story .chapter[data-skin="current"] { max-width: 37rem; } /* longer opening chapter: wider measure keeps it within one screen */
.hero-story .chapter[data-skin="current"] .chapter-summary { max-width: 34em; }
.story-line { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; pointer-events: none; overflow: visible; will-change: transform; }
.story-line path { fill: none; stroke: var(--eggplant); stroke-width: 1.75; stroke-linecap: round; }
.story-dot { position: absolute; z-index: 3; width: .875rem; height: .875rem; margin: -.4375rem 0 0 -.4375rem; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--ivory); opacity: 0; pointer-events: none; }
.hero-story .hero-figure { z-index: 1; }

/* Mobile career story. Native scrolling drives the pinned scene, clear of the bottom navigation. */
.has-mobile-story .skin-picker { display: none; }
.has-mobile-story .hero { padding-right: 0; }
.has-mobile-story .hero-role-spec { white-space: normal; }
.hero-mobile-story.wrap { position: relative; width: 100%; margin: 0; padding: 0; border: 0; display: block; }
.mobile-story-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 16px 20px calc(100px + env(safe-area-inset-bottom, 0px)) 20px; display: flex; flex-direction: column; gap: 16px; background: var(--ivory); }
.hero-mobile-story .hero-figure { flex: none; grid-column: auto; width: min(100%, calc(var(--mobile-avatar-height, 220px) * .9)); height: var(--mobile-avatar-height, 220px); margin-inline: auto; overflow: visible; }
.hero-mobile-story .hero-avatar { flex: none; height: 100%; width: auto; aspect-ratio: 576 / 1024; }
/* Mobile story retains each skin’s existing responsive object layers and orbit. */
.mobile-story-stage { position: relative; flex: 1; min-height: 0; }
.hero-mobile-story .chapter { position: absolute; inset: 0 0 auto; max-width: none; margin: 0; padding: 0; border: 0; visibility: hidden; opacity: 0; }
.hero-mobile-story .chapter.is-current { visibility: visible; opacity: 1; }
.hero-mobile-story .chapter-title { font-family: 'DM Sans', sans-serif; font-variation-settings: normal; font-weight: 700; font-size: 1.5rem; line-height: 1.12; letter-spacing: -.025em; margin: 0 0 12px; }
.hero-mobile-story .chapter-exp { font-size: .75rem; font-weight: 500; margin: 0 0 14px; }
.hero-mobile-story .chapter-summary { font-size: 1rem; line-height: 1.5; max-width: none; margin: 0; }
.hero-mobile-story .chapter-skills { gap: 6px; margin-top: 16px; }
.hero-mobile-story .chapter-skills li { font-size: .71875rem; padding: 4px 8px; }
@media (min-width: 761px) and (max-width: 1024px) {
  .mobile-story-sticky { padding-inline: max(32px, calc((100% - 40rem) / 2)); }
}

@media (max-height: 780px) {
  .hero-mobile-story .chapter-title { font-size: 1.375rem; }
  .hero-mobile-story .chapter-summary { font-size: .9375rem; line-height: 1.5; }
  .hero-mobile-story .chapter-skills { margin-top: 12px; }
}

/* Privacy notice and settings (privacy.js). Opt-out notice for Cloudflare Web Analytics:
   non-modal, fixed above the bottom navigation bars, eggplant with ivory text, square corners and
   no shadow like the nav bars; buttons reuse the outlined pill language. */
.privacy-notice { position: fixed; z-index: 20; left: 1.5rem; bottom: 5.25rem; max-width: 22rem; padding: 1rem 1.125rem 1.125rem; background: var(--eggplant); color: var(--ivory); border: 1px solid var(--ivory); /* stays visible over eggplant sections */ font-family: "DM Sans", system-ui, sans-serif; font-size: .8125rem; line-height: 1.45; }
.privacy-notice[hidden] { display: none; }
.privacy-notice-title { margin: 0 0 .25rem; font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.privacy-notice-text { margin: 0 0 .875rem; }
.privacy-notice-text a { color: inherit; text-underline-offset: .2em; }
.privacy-notice-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.privacy-notice-btn { min-height: 2.75rem; padding: 0 1.125rem; border: 1px solid var(--ivory); border-radius: 999px; background: transparent; color: var(--ivory); font: inherit; font-weight: 600; line-height: 1; cursor: pointer; }
.privacy-notice-btn:hover { background: var(--ivory); color: var(--eggplant); }
.privacy-notice-btn:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
.proto-page .privacy-notice { bottom: 1.5rem; } /* the prototype page has no bottom navigation */
/* 761–1024 px: the Hero stacks (avatar below the fold), so the right side above the nav bar is free. */
@media (min-width: 761px) and (max-width: 1024px) { .privacy-notice { left: auto; right: 1.5rem; } }
/* 1025 px and up (approved November 10, 2026, extended to wide screens): text and avatar sit side by side,
   so the notice sits on the nav baseline in the gap to the right of the centered bar (about 490 px wide).
   It covers neither the Hero text, CTAs nor navigation; it can overlap the bottom of the avatar until a choice. */
@media (min-width: 1025px) {
  .privacy-notice { left: auto; right: 1.5rem; bottom: 1.5rem; max-width: min(22rem, calc((100vw - 490px) / 2 - 2.25rem)); }
}
/* Footer entry point, styled as a quiet text link. */
.privacy-settings-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; text-align: left; }
.privacy-settings-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.privacy-settings-link:focus-visible { outline: 2px solid var(--eggplant); outline-offset: 4px; }
.proto-privacy { margin: .75rem 0 0; font-size: .8125rem; text-align: center; }
.proto-privacy .privacy-settings-link { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 760px) {
  .privacy-notice { left: .75rem; right: .75rem; max-width: none; bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); padding: .875rem 1rem 1rem; }
  .proto-page .privacy-notice { bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }
}
/* Footer legal links (all pages): Privacy Policy, Impressum, Privacy settings as one quiet group. */
.site-footer-legal { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; }
.proto-privacy .site-footer-legal { justify-content: center; gap: .25rem 1.25rem; }
.proto-privacy a { text-underline-offset: .2em; }
/* Notice edge cases, 761–1024 px (approved November 10, 2026). Snoof: the facts band sits right under the hero
   photo, so the notice moves to the top right over the photo. Prototype: the notice sits in the free gap right of
   the phone frame, ending at the frame's base above the "Runs on sample data" note. The frame width mirrors the
   page's own fit(): 393 px × min(1, max(.5, (viewport height − 156 px) / 852)). */
@media (min-width: 761px) and (max-width: 1024px) {
  body.case .privacy-notice { top: 1.5rem; bottom: auto; max-width: min(22rem, calc(42vw - 2.25rem)); } /* stays within the photo (right ~42%) */
  .proto-page .privacy-notice { left: auto; right: 1.5rem; bottom: 4.5rem; max-width: min(22rem, calc((100vw - min(393px, max(196.5px, (100vh - 156px) * .4613))) / 2 - 2.25rem)); }
}
/* Legal pages (privacy.html, impressum.html): editorial text column aligned with the monogram, Fraunces B title,
   DM Sans body, thin eggplant rules between sections. No bottom nav, so the notice uses the page edge. */
.legal-page main, .legal-page .site-footer { font-family: "DM Sans", system-ui, sans-serif; }
.legal { padding-block: 3.5rem 6rem; }
.legal > * { max-width: 42rem; }
.legal-title { margin: 0 0 1rem; font-family: "Fraunces", Georgia, serif; font-weight: 900; font-optical-sizing: none; font-variation-settings: "wght" 900, "opsz" 72, "SOFT" 100, "WONK" 1; font-size: clamp(2.75rem, 6vw, 4.5rem); line-height: 1; letter-spacing: -.025em; }
.legal-title-sub { display: block; margin-top: .75rem; font-family: "DM Sans", system-ui, sans-serif; font-variation-settings: normal; font-weight: 500; font-size: 1.25rem; letter-spacing: 0; }
.legal-updated { margin: 0 0 2.5rem; font-size: .875rem; opacity: .82; }
.legal-lead { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 500; line-height: 1.5; }
.legal section { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--eggplant); }
.legal h2 { margin: 0 0 .875rem; font-family: "DM Sans", system-ui, sans-serif; font-size: 1.25rem; font-weight: 600; letter-spacing: -.005em; line-height: 1.3; }
.legal p, .legal li, .legal address { font-size: 1.0625rem; line-height: 1.65; }
.legal p { margin: 0 0 1rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal address { font-style: normal; margin-bottom: 1rem; }
.legal a { color: inherit; text-underline-offset: .2em; }
.legal a:focus-visible, .legal-inline-btn:focus-visible { outline: 2px solid var(--eggplant); outline-offset: 3px; }
.legal code { padding: .05em .3em; background: var(--beige); font-size: .9em; }
.legal-inline-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.legal-page .privacy-notice { bottom: 1.5rem; max-width: 22rem; }
@media (max-width: 760px) {
  .legal { padding-block: 2.5rem 5rem; }
  .legal-page .privacy-notice { bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); max-width: none; }
}
/* Legal pages: first-visit notice in the page flow above the title; bottom reserve while a floating notice is open (privacy.js). */
.privacy-notice--inline { position: static; max-width: 42rem; margin: 0 0 2.5rem; }
html.privacy-notice-reserve { scroll-padding-bottom: calc(var(--privacy-notice-h, 0px) + 1.5rem); }
html.privacy-notice-reserve body.legal-page { padding-bottom: calc(var(--privacy-notice-h, 0px) + 3rem); }
/* Keep the in-flow notice identical to the floating one: shield it from the legal text styles. */
.legal .privacy-notice { margin: 0 0 2.5rem; padding: 1rem 1.125rem 1.125rem; border: 1px solid var(--ivory); }
.legal .privacy-notice p { font-size: inherit; line-height: inherit; }
.legal .privacy-notice .privacy-notice-title { margin: 0 0 .25rem; font-size: .9375rem; line-height: 1.3; }
.legal .privacy-notice .privacy-notice-text { margin: 0 0 .875rem; }
@media (max-width: 760px) { .legal .privacy-notice { padding: .875rem 1rem 1rem; } }