/* María Berrocal portfolio. "Paper & proof": see DESIGN.md */

@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/inter-tight-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/inter-tight-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #fefefe;
  --paper-2: #f4f4f3;
  --ink: #0c0c0c;
  --ink-2: #55554f;
  --ink-3: #6a6964;
  --line: rgba(12, 12, 12, 0.14);
  --sage: #34694f;
  --night: #0a0a0a;
  --on-night: #f4f4f2;

  --sans: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --serif: var(--sans);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pad: clamp(20px, 3.4vw, 48px);
  --gap: clamp(16px, 2vw, 28px);
  --max: 1440px;
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85 .6' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .92 0 0 0 0 .92 .95 0 0 0 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85 .6' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .1 .95 0 0 0 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");

  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-h2: clamp(2.5rem, 1.6rem + 4.2vw, 5rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: #bcbbb5 transparent;
  scroll-padding-top: 80px;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--grain);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}


::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; border-radius: 4px; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px; font-size: var(--fs-small);
  transition: top 0.2s;
}
.skip:focus { top: 12px; }

.h2 { font-size: var(--fs-h2); line-height: 0.98; letter-spacing: -0.04em; font-weight: 650; text-wrap: balance; }
.h3 { font-size: var(--fs-h3); line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; text-wrap: balance; }

/* ---------- nav: floating pill ---------- */
.nav {
  position: fixed; top: 14px; left: 50%; z-index: 100;
  display: flex; align-items: center; gap: 6px;
  padding: 7px; background: #fff; border-radius: 22px;
  box-shadow: 0 10px 34px rgba(12, 12, 12, 0.09), 0 0 0 1px rgba(12, 12, 12, 0.06);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em;
  transform: translateX(-50%);
  transition: transform 0.7s var(--ease), opacity 0.4s ease;
}
.nav.is-hidden { transform: translate(-50%, -150%); opacity: 0; pointer-events: none; }
.nav__avatar { display: block; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; background: var(--paper-2); }
.nav__avatar img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.nav__avatar:hover img { transform: scale(1.08); }
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__links a { padding: 11px 14px; border-radius: 13px; white-space: nowrap; transition: background 0.25s ease; }
.nav__links a:hover { background: rgba(12, 12, 12, 0.06); }
.nav__links .nav__cta { margin-left: 6px; padding: 12px 18px; background: var(--ink); color: #fff; border-radius: 14px; transition: background 0.25s ease, transform 0.5s var(--ease); }
.nav__links .nav__cta:hover { background: #262626; transform: translateY(-1px); }
.contact__nav a, .contact__base a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.45s var(--ease);
  padding-bottom: 2px;
}
.contact__nav a:hover, .contact__base a:hover { background-size: 100% 1px; }

/* ---------- buttons / roll text ---------- */
.btn {
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 22px; border-radius: 12px;
  background: var(--ink); color: var(--paper);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em;
  transition: transform 0.5s var(--ease), background 0.3s;
}
.btn:hover { transform: translateY(-2px); background: #1d1d1d; }
.btn:active { transform: translateY(0); }
.roll { display: inline-block; position: relative; overflow: hidden; vertical-align: bottom; line-height: 1.5; height: 1.5em; }
.roll > span { display: block; transition: transform 0.55s var(--ease); }
.roll::after { content: attr(data-text); position: absolute; left: 0; top: 100%; }
.btn:hover .roll > span, .btn:focus-visible .roll > span { transform: translateY(-100%); }
.btn:hover .roll::after, .btn:focus-visible .roll::after { transform: translateY(-100%); }
.roll::after { transition: transform 0.55s var(--ease); }

/* ---------- line reveal ---------- */
.line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.line > span { display: block; }
.js [data-lines] .line > span { transform: translateY(112%); }
.js [data-lines].is-in .line > span {
  transform: none;
  transition: transform 1.2s var(--ease) calc(var(--i, 0) * 90ms + 120ms);
}
.line:nth-child(2) > span { --i: 1; }
.line:nth-child(3) > span { --i: 2; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 120px var(--pad) 64px;
  max-width: var(--max); margin-inline: auto;
}
.hero__copy { position: relative; z-index: 2; max-width: 52rem; }
.hero__title {
  font-size: clamp(2.6rem, 0.8rem + 5.6vw, 5rem);
  line-height: 0.96; letter-spacing: -0.045em; font-weight: 650;
}
.line--soft { color: var(--ink-3); }
@media (min-width: 960px) { .hero__title .line { white-space: nowrap; } }
.hero__lede {
  margin-top: clamp(20px, 2.4vw, 32px);
  max-width: 30rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink-2);
  text-wrap: pretty;
}
.hero .btn { margin-top: clamp(24px, 3vw, 40px); }
.js .hero__lede, .js .hero .btn { opacity: 0; transform: translateY(10px); }
.js.is-ready .hero__lede, .js.is-ready .hero .btn {
  opacity: 1; transform: none; transition: opacity 0.9s var(--ease) 0.7s, transform 0.9s var(--ease) 0.7s;
}
.js.is-ready .hero .btn { transition-delay: 0.85s; }

.hero__photo {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 99%);
  position: absolute; top: 0; bottom: 0; right: 0;
  width: min(46vw, 680px);
  border-left: 1px solid var(--line);
  overflow: hidden;
}
.hero__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%;
  filter: grayscale(1);
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  will-change: transform;
}
/* the photo "develops": rises, settles and comes out of a blown-out print */
.js .hero__photo { border-left-color: transparent; }
.js .hero__photo img {
  clip-path: inset(100% 0 0 0);
  scale: 1.14;
  filter: grayscale(1) brightness(2.4) contrast(0.35) blur(10px);
}
.js.is-ready .hero__photo { border-left-color: var(--line); transition: border-color 1.2s ease 0.1s; }
.js.is-ready .hero__photo img {
  clip-path: inset(0 0 0 0);
  scale: 1;
  filter: grayscale(1) brightness(1) contrast(1) blur(0);
  transition: clip-path 1.7s var(--ease) 0.3s, scale 2.6s var(--ease) 0.3s, filter 2.4s cubic-bezier(0.3, 0.6, 0.2, 1) 0.45s;
}
.hero__rule {
  position: absolute; top: 0; bottom: 0; right: min(46vw, 680px); width: 1px; background: var(--sage);
  transform-origin: top; transform: scaleY(0); opacity: 0.9; pointer-events: none;
}
.js.is-ready .hero__rule { animation: rule-draw 1.8s var(--ease) 0.2s forwards; }
@keyframes rule-draw { 0% { transform: scaleY(0); opacity: 0.9; } 70% { transform: scaleY(1); opacity: 0.9; } 100% { transform: scaleY(1); opacity: 0; } }

/* headline letters */
.w { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; }
.js [data-lines] .ch { transform: translateY(108%) rotate(7deg); filter: blur(10px); opacity: 0; transform-origin: 0 100%; }
.js [data-lines].is-in .ch {
  transform: none; filter: blur(0); opacity: 1;
  transition: transform 1.1s var(--ease) calc(var(--c) * 24ms + var(--ln, 0) * 130ms + 100ms),
              filter 0.9s ease calc(var(--c) * 24ms + var(--ln, 0) * 130ms + 100ms),
              opacity 0.5s ease calc(var(--c) * 24ms + var(--ln, 0) * 130ms + 100ms);
}
.line:nth-child(2) .ch { --ln: 1; }
.line:nth-child(3) .ch { --ln: 2; }
.hero__copy { will-change: transform, opacity; transform: translate3d(var(--hx, 0px), 0, 0); opacity: var(--ho, 1); }

/* strengths (static fallback) + the loop story */
.strengths { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); padding-block: clamp(56px, 8vw, 100px) clamp(48px, 6vw, 80px); }
.strengths li { border-top: 1px solid var(--line); padding-top: 18px; }
.strengths h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; }
.strengths p { margin-top: 6px; max-width: 22rem; color: var(--ink-2); font-size: 1rem; line-height: 1.45; text-wrap: pretty; }
.loop { display: none; }

.is-fly .hero__copy, .is-fly .hero__photo { filter: blur(var(--hb, 0px)); }
.is-fly .hero__photo { opacity: var(--hbo, 1); }
.is-fly .bridge { height: calc(100vh + 720vh); margin-top: 0; position: relative; z-index: 3; pointer-events: none; }
.is-fly .bridge__stage { position: sticky; top: 0; height: 100vh; overflow: clip; }
.is-fly .strengths { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }
.is-fly .loop { display: block; position: absolute; inset: 0; }
.loop__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* a single flowing line with a comet of light travelling along it */
.loop__ring { fill: none; stroke: rgba(12, 12, 12, 0.3); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.loop__comet { fill: none; stroke: var(--sage); stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 7px rgba(52, 105, 79, 0.55)); }
.loop__green { fill: none; stroke: var(--sage); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(52, 105, 79, 0.35)); }
.loop__dot { fill: var(--sage); filter: drop-shadow(0 0 8px rgba(52, 105, 79, 0.7)); }
.loop__drop { stroke: var(--sage); stroke-width: 1; }
.loop__start { fill: var(--sage); }
.loop__halo { fill: rgba(52, 105, 79, 0.14); }

/* position is driven by the storyboard in JS */
.loop__say { position: absolute; left: 0; top: 0; text-align: center; width: min(46vw, 560px); pointer-events: none; will-change: transform, opacity; }
.say { position: relative; height: clamp(3rem, 2rem + 4.4vw, 5.5rem); font-family: var(--sans); font-weight: 650; font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5rem); line-height: 1; letter-spacing: -0.04em; }
.say__w { position: absolute; inset: 0; display: grid; place-items: center; opacity: var(--wa, 0); filter: blur(calc((1 - var(--wa, 0)) * 12px)); transform: translateY(calc((1 - var(--wa, 0)) * 0.4em)); }
.loop__lede { margin-top: 14px; color: var(--ink-2); font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem); letter-spacing: -0.01em; }

.lcard { position: absolute; will-change: transform; left: 0; top: 0; width: var(--cw, 300px); height: var(--ch, 220px); transform-origin: 50% 50%; }
.lcard__bob { width: 100%; height: 100%; animation: bob 6.5s ease-in-out infinite alternate; }
.lcard:nth-child(3) .lcard__bob { animation-duration: 7.6s; animation-delay: -2s; }
.lcard:nth-child(4) .lcard__bob { animation-duration: 5.9s; animation-delay: -4s; }
@keyframes bob { from { translate: 0 -8px; } to { translate: 0 8px; } }
.lcard__in {
  width: 100%; height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 10px 34px rgba(12, 12, 12, 0.07); transition: box-shadow 0.6s ease, border-color 0.6s ease;
}
.lcard__art, .lcard h3, .lcard p { transition: opacity 0.6s ease; }
.lcard:not(.is-active) .lcard__art, .lcard:not(.is-active) h3, .lcard:not(.is-active) p { opacity: 0.38; }
.lcard:not(.is-active) .lcard__in { box-shadow: 0 6px 18px rgba(12, 12, 12, 0.05); }
.lcard.is-active .lcard__in { border-color: var(--ink); box-shadow: 0 30px 80px rgba(12, 12, 12, 0.2), 0 2px 0 rgba(12, 12, 12, 0.04); }
.lcard__art { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; color: var(--ink); overflow: hidden; }
.mini { display: block; width: 100%; height: 100%; max-height: 100%; }
.mini text { font-family: var(--sans); font-feature-settings: 'tnum' 1; }
.lcard h3 { font-family: var(--sans); font-weight: 650; font-size: clamp(1.25rem, 1rem + 0.7vw, 1.7rem); line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.lcard p { color: var(--ink-2); font-size: clamp(0.8125rem, 0.75rem + 0.2vw, 0.9375rem); line-height: 1.3; }
:root { --sage-hi: var(--sage); }

/* the drawings wake up when their card takes focus */
.m-strike { stroke-dasharray: 100; stroke-dashoffset: 0; }
:is(.lcard, .strengths li).is-active .m-strike { animation: strike 0.7s var(--ease) both; animation-delay: calc(var(--i) * 0.18s); }
@keyframes strike { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
:is(.lcard, .strengths li).is-active .m-real { animation: pop 0.8s var(--ease) 0.6s both; transform-box: fill-box; transform-origin: center; }
@keyframes pop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
:is(.lcard, .strengths li).is-active .m-ch { animation: ch-in 0.01s linear both; animation-delay: calc(0.2s + var(--k) * 0.034s); }
@keyframes ch-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
.m-caret { opacity: 0; }
:is(.lcard, .strengths li).is-active .m-caret { animation: blink 0.9s steps(1) 2.2s infinite; }
.m-gen { transform-box: fill-box; transform-origin: center; }
:is(.lcard, .strengths li):not(.is-active) .m-gen { opacity: 1; }
:is(.lcard, .strengths li).is-active .m-gen { animation: pop 0.55s var(--ease) both; animation-delay: calc(2.1s + var(--i) * 0.16s); }
.m-streak { opacity: 0; }
:is(.lcard, .strengths li).is-active .m-streak { animation: streak 0.95s cubic-bezier(.3,.1,.2,1) infinite; animation-delay: calc(var(--i) * 0.13s); }
@keyframes streak { 0% { opacity: 0; transform: translateX(-70px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(210px); } }
.m-iter { transform-box: fill-box; }
:is(.lcard, .strengths li).is-active .m-iter { animation: iter-in 0.5s var(--ease) both; animation-delay: calc(0.1s + var(--i) * 0.32s); }
@keyframes iter-in { from { opacity: 0; translate: -26px 0; } to { opacity: 1; translate: 0 0; } }
:is(.lcard, .strengths li):not(.is-active) .m-streak { opacity: 0.35; }
:is(.lcard, .strengths li).is-active .m-chev { animation: chev 0.8s ease-in-out infinite; animation-delay: calc(var(--i) * 0.14s); }
@keyframes chev { 0%,100% { opacity: .25; translate: 0 0; } 50% { opacity: 1; translate: 4px 0; } }
.m-shipped { transform-box: fill-box; transform-origin: center; }
:is(.lcard, .strengths li).is-active .m-shipped { animation: pop 0.6s var(--ease) 1.15s both; }
.m-bar { transform-box: fill-box; transform-origin: bottom; }
:is(.lcard, .strengths li).is-active .m-bar { animation: grow-y 0.7s var(--ease) both; animation-delay: calc(var(--i) * 0.08s); }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: none; } }
:is(.lcard, .strengths li).is-active .m-ship { animation: pop 0.6s var(--ease) both; animation-delay: calc(0.5s + var(--i) * 0.1s); transform-box: fill-box; transform-origin: center; }

/* work section: the loop's line lands on the section title */
.work-wrap { padding-top: clamp(56px, 8vw, 120px); }
.work-head { margin-bottom: clamp(40px, 6vw, 80px); text-align: center; justify-items: center; }
.work-head .sec-head__lede { max-width: 34rem; }
.work-head .h2 { max-width: 15ch; }
.is-fly .work-wrap { --lead: clamp(150px, 28vh, 280px); position: relative; padding-top: var(--lead); }
.is-fly .work-wrap::before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; margin-left: -0.5px; height: var(--wl, 0px); background: var(--sage); z-index: 2; pointer-events: none; }
.is-fly .work-wrap::after { content: ''; position: absolute; left: 50%; top: var(--wl, 0px); width: 9px; height: 9px; margin: -4px 0 0 -4.5px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 6px rgba(52, 105, 79, 0.14); z-index: 2; pointer-events: none; opacity: var(--wd, 0); }

/* ---------- section heads ---------- */
.sec-head { display: grid; gap: 16px; margin-bottom: clamp(40px, 6vw, 88px); }
.sec-head__lede { max-width: 34rem; color: var(--ink-2); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.4; text-wrap: pretty; }
.sec-head--split { grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: end; }
.sec-head--split .h2 { grid-column: 1 / span 7; max-width: 9ch; }
.sec-head--split .sec-head__lede { grid-column: 9 / span 4; }

/* ---------- visuals (shared) ---------- */
.v {
  --v-bg: #0e0e0e; --v-card: #ffffff; --v-card-line: rgba(0, 0, 0, 0.12);
  --v-ink: #101010; --v-mute: #8b8a85; --v-mute2: #55544f; --v-line: rgba(0, 0, 0, 0.1); --v-accent: #3f7a5c;
  position: relative; overflow: hidden; background: var(--v-bg); border-radius: 18px;
  aspect-ratio: 16 / 10;
}
.v--light { --v-bg: #ecece8; --v-card: #ffffff; --v-card-line: rgba(0, 0, 0, 0.1); --v-accent: #347050; }
.v-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform 1.1s var(--ease); }
.v-svg text { text-rendering: geometricPrecision; font-family: var(--sans); font-feature-settings: 'tnum' 1, 'ss01' 1; letter-spacing: -0.005em; }
.js .v[data-reveal] { clip-path: inset(0 0 100% 0); }
.js .v[data-reveal].is-in { clip-path: inset(0 0 0 0); transition: clip-path 1.3s var(--ease); }
.js .v[data-reveal] .v-svg { transform: scale(1.07); }
.js .v[data-reveal].is-in .v-svg { transform: scale(1); transition: transform 1.8s var(--ease); }
/* drawn lines + fills */
.js .v .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .v.is-in .draw, .js .evolve .draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease) var(--d, 0ms); }
.js .v .fade { opacity: 0; }
.js .v.is-in .fade, .js .evolve .fade { opacity: 1; transition: opacity 1s ease calc(var(--d, 0ms) + 500ms); }
.js .v .grow { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
.js .v.is-in .grow, .js .evolve .grow { transform: scaleX(1); transition: transform 1.3s var(--ease) 0.5s; }

/* ---------- work: story text beside big drawings ---------- */
.work-section { padding-bottom: clamp(100px, 14vw, 200px); }
.work-grid { display: block; }
.work { display: flex; flex-direction: column; margin-bottom: clamp(56px, 10vw, 96px); }
.work__media { order: -1; }
.work:last-child { margin-bottom: 0; }
.work__media { aspect-ratio: var(--ar, 16 / 10); border-radius: 20px; box-shadow: 0 0 0 1px rgba(12, 12, 12, 0.06), 0 24px 60px -28px rgba(12, 12, 12, 0.35); transform-origin: 50% 0; }
.work__media[data-reveal='stack'] { clip-path: none !important; }
.work__media .v-svg { transform: none !important; }
/* the drawing stays locked inside its frame (no parallax, no zoom) so the black border is always even; hover lifts the whole frame instead */
.work__media { transition: box-shadow 0.6s var(--ease); }
.work:hover .work__media { box-shadow: 0 0 0 1px rgba(12, 12, 12, 0.08), 0 34px 70px -26px rgba(12, 12, 12, 0.5); }
.work__text { display: grid; gap: 14px; justify-items: start; margin-top: 22px; }
.work__n { font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); font-feature-settings: 'tnum' 1; letter-spacing: 0.02em; }
.work__n span { color: var(--ink); }
.work__desc-unused { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--sage); }
.work__title { font-size: clamp(1.5rem, 1.05rem + 1.3vw, 2.25rem); line-height: 1.06; font-weight: 650; letter-spacing: -0.04em; text-wrap: balance; }
.work__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.9375rem; font-weight: 500; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: 0.75rem; font-weight: 500; letter-spacing: 0; line-height: 1; padding: 7px 10px; border-radius: 7px; background: var(--ink); color: var(--paper); }
.v--light .ico { transition: transform 0.5s var(--ease); flex: none; }
.work:hover .ico, .next:hover .ico { transform: translate(3px, -3px); }
.next:hover .next__sub span { color: var(--ink); }

@media (min-width: 960px) {
  .work { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); margin-bottom: 0; padding-bottom: clamp(72px, 14vh, 160px); }
  .work:last-child { padding-bottom: 0; }
  .work__text { grid-column: 1 / span 4; grid-row: 1; align-self: start; margin-top: 0; padding-top: 6px; gap: 18px; }
  .work__media { grid-column: 5 / -1; grid-row: 1; align-self: start; }
  .work__title { font-size: clamp(2rem, 0.9rem + 2.5vw, 3.6rem); line-height: 1.02; }
  /* JS adds .is-stack: text and drawing stay pinned while the next project slides over */
  .work-grid.is-stack .work__media, .work-grid.is-stack .work__text { position: sticky; top: 96px; }
  .work-grid.is-stack .work__text { opacity: var(--tv, 1); translate: 0 var(--tt, 0px); }
}

/* ---------- journey: vertical timeline ---------- */
/* dark sections share one set of tokens, so every child just works */
.journey, .contact, .case-top {
  --ink: var(--on-night); --ink-2: #a9a8a3; --ink-3: #7c7b76; --line: rgba(255, 255, 255, 0.16);
  background-color: var(--night); color: var(--on-night);
}
.journey { padding-block: clamp(72px, 9vw, 130px) clamp(140px, 18vw, 260px); }
/* a long, eased fade from black into the page, so there is no visible edge */
.journey::after { content: ''; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: clamp(380px, 62vh, 640px); pointer-events: none; z-index: 3;
  background: linear-gradient(to bottom, rgba(10,10,10,1) 0%, rgba(10,10,10,.96) 8%, rgba(10,10,10,.86) 18%, rgba(10,10,10,.7) 30%, rgba(10,10,10,.5) 43%, rgba(10,10,10,.32) 56%, rgba(10,10,10,.18) 69%, rgba(10,10,10,.08) 82%, rgba(10,10,10,.025) 92%, rgba(10,10,10,0) 100%); }
.journey__grid { filter: blur(var(--jb, 0px)); opacity: var(--jo, 1); will-change: filter, opacity; }
/* curtain: a black arc that rises with the page and flattens as the section arrives */
.curtain { position: relative; --jc: 1; --cap: clamp(56px, 7vw, 104px); }
.curtain::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: var(--cap); background: var(--night); z-index: 2; pointer-events: none;
  border-top-left-radius: calc((1 - var(--jc)) * 50%) calc((1 - var(--jc)) * var(--cap));
  border-top-right-radius: calc((1 - var(--jc)) * 50%) calc((1 - var(--jc)) * var(--cap));
}
.journey__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; }
.journey__intro { grid-column: 1 / span 5; position: sticky; top: 96px; display: grid; gap: 22px; }
.journey__intro .h2 { max-width: 8ch; }
.journey__lede { max-width: 26rem; color: var(--ink-2); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.4; text-wrap: pretty; }
.toolkit { margin-top: clamp(16px, 4vh, 48px); max-width: 30rem; }
.toolkit__h { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 12px; }
.tools { display: grid; }
.tool { display: grid; gap: 10px; padding: 14px 0 16px; border-top: 1px solid var(--line); }
.tool:last-child { border-bottom: 1px solid var(--line); }
.toolkit__h { color: var(--on-night); }
.tool dt { color: var(--ink-3); font-size: var(--fs-small); }
.tool dd { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { --ink: #0c0c0c; --line: rgba(12, 12, 12, 0.14); color: #0c0c0c; display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 15px 0 11px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 0.9375rem; font-weight: 550; letter-spacing: -0.015em; transition: border-color 0.3s ease, transform 0.5s var(--ease); }
.chip:hover { border-color: rgba(12, 12, 12, 0.35); transform: translateY(-1px); }
.mark { flex: none; width: 20px; height: 20px; color: var(--ink); object-fit: contain; }
.mark--mono { display: grid; place-items: center; border-radius: 6px; background: var(--ink); color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0; }

.timeline { --tl: 0; grid-column: 7 / span 6; position: relative; display: grid; gap: clamp(20px, 3vw, 36px); padding-block: 4px; }
.timeline::before, .timeline::after { content: ''; position: absolute; left: 118px; top: 0; bottom: 0; width: 1px; }
.timeline::before { background: var(--line); }
.timeline::after { background: var(--sage); transform-origin: top; transform: scaleY(var(--tl)); }
.step { position: relative; display: grid; grid-template-columns: 98px 1fr; column-gap: 52px; align-items: start; }
.step__n { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); line-height: 1; letter-spacing: -0.045em; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink-3); transition: color 0.6s ease; padding-top: 22px; }
.step.is-on .step__n { color: var(--ink); }
.step__dot {
  position: absolute; left: 113px; top: 33px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--night); border: 1px solid var(--ink-3); transition: background 0.5s, border-color 0.5s, transform 0.5s var(--ease); z-index: 1;
}
.step.is-on .step__dot { background: var(--sage); border-color: var(--sage); transform: scale(1.2); }
.step__card { --ink: #0c0c0c; --ink-2: #55554f; --ink-3: #6a6964; --line: rgba(12, 12, 12, 0.14); color: #0c0c0c; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 2.4vw, 34px); }
.step__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 28px; }
.org-logo { height: 28px; width: auto; max-width: 160px; object-fit: contain; object-position: right center; flex: none; color: var(--ink); }
img.org-logo--waterplan { height: 30px; max-width: 190px; }
img.org-logo--ey { height: 38px; }
img.org-logo--ey-design-studio { height: 52px; margin-block: -6px; }
.org-logo--text { display: inline-flex; align-items: center; font-weight: 750; letter-spacing: -0.05em; font-size: 1.375rem; line-height: 1; white-space: nowrap; }
.org-logo--text i { font-style: normal; font-weight: 500; font-size: 0.8125rem; letter-spacing: -0.01em; margin-left: 6px; color: var(--ink-2); }
.org-logo--waterplan { font-size: 1.3rem; letter-spacing: -0.04em; font-weight: 600; }
.step__dates { font-size: var(--fs-small); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.step--current .step__dates { color: var(--sage); font-weight: 600; }
.step__org { margin-top: 8px; font-size: var(--fs-h3); line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; }
.step__role { margin-top: 6px; font-weight: 500; color: var(--ink); }
.step__focus { margin-top: 18px; font-family: var(--sans); font-weight: 650; font-size: 1.375rem; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.step__text { margin-top: 10px; max-width: 30rem; color: var(--ink-2); font-size: 1rem; line-height: 1.5; text-wrap: pretty; }

/* ---------- about: a quote that assembles itself ---------- */
.about { position: relative; background: var(--paper); }
.about__stage { position: relative; min-height: 100svh; max-width: var(--max); margin-inline: auto; padding: 120px var(--pad) clamp(120px, 17vh, 190px); display: grid; grid-template-rows: auto 1fr auto; row-gap: 40px; }
.about__label { justify-self: start; display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px 0 14px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 0.9375rem; font-weight: 550; letter-spacing: -0.01em; }
.about__label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #6fb08e; }
.about__center { position: relative; align-self: center; max-width: 66rem; }
.about__quote { margin: 0; position: relative; z-index: 1; font-size: clamp(1.75rem, min(1rem + 2.9vw, 5.4vh), 3.6rem); line-height: 1.12; letter-spacing: -0.04em; font-weight: 650; text-wrap: pretty; }
.aw { display: inline-block; will-change: transform, filter, opacity; }
.about__web { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.about__path { fill: none; stroke: var(--sage); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.about__by { margin-top: clamp(24px, 4vh, 44px); display: flex; align-items: center; gap: 14px; color: var(--ink); font-size: 1.375rem; font-weight: 650; letter-spacing: -0.03em; }
.about__by::before { content: ''; width: 36px; height: 2px; background: var(--sage); }
.about__beliefs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.about__beliefs li { border-top: 1px solid var(--line); padding-top: 16px; }
.about__beliefs h3 { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.02em; }
.about__beliefs p { margin-top: 6px; max-width: 22rem; color: var(--ink-2); font-size: 1rem; line-height: 1.45; text-wrap: pretty; }
@media (min-width: 960px) {
  .about--pinned { height: calc(330vh + 42vh); padding-bottom: 42vh; box-sizing: border-box; }
  .about--pinned .about__stage { position: sticky; top: 0; height: 100vh; min-height: 0; overflow: clip; }
  .about--pinned .about__by { opacity: var(--bo, 0); translate: 0 calc((1 - var(--bo, 0)) * 18px); }
  .about--pinned .about__beliefs li { opacity: var(--bo, 0); translate: 0 calc((1 - var(--bo, 0)) * 18px); }
}

/* ---------- contact / footer: full-viewport, mirrors the hero ---------- */
.contact { position: relative; background-image: var(--grain-light); }
.contact__stage { position: relative; min-height: 100svh; max-width: var(--max); margin-inline: auto; padding: 120px var(--pad) 28px; display: grid; grid-template-rows: 1fr auto; }
.contact__copy { position: relative; z-index: 2; align-self: center; max-width: 46rem; display: grid; gap: 20px; justify-items: start; padding-bottom: 40px; }
.contact__title { font-size: clamp(3rem, 1rem + 6.6vw, 6rem); line-height: 0.94; letter-spacing: -0.045em; font-weight: 650; }
.contact__lede { max-width: 26rem; color: var(--ink-2); font-size: 1.125rem; line-height: 1.4; }
.contact__mail {
  margin-top: 6px; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 500; letter-spacing: -0.02em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 4px; transition: background-size 0.5s var(--ease);
}
.contact__mail:hover { background-size: 0 1px; background-position: 100% 100%; }
.contact__nav { margin-top: clamp(28px, 6vh, 64px); display: grid; grid-template-columns: repeat(2, minmax(8rem, 12rem)); gap: var(--gap); }
.contact__nav > div { display: grid; gap: 8px; justify-items: start; align-content: start; }
.contact__h { color: var(--ink-3); font-size: var(--fs-small); margin-bottom: 4px; }
.contact__nav a { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; }
.contact__photo { position: absolute; top: 0; bottom: 0; right: 0; width: min(46vw, 680px); border-left: 0; overflow: hidden; background: none; }
.contact__photo::before { content: ''; position: absolute; inset: 0; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px 220px; mix-blend-mode: overlay; opacity: 0.55; pointer-events: none; }
.contact__photo::after { content: ''; position: absolute; inset: 0; z-index: 2; background: none; pointer-events: none; }
.contact__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; filter: grayscale(1); }
.contact__base { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; width: calc(100% - min(46vw, 680px) - var(--pad)); padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-small); }

/* ---------- case study ---------- */
.case-hero { padding-top: clamp(84px, 8vw, 104px); padding-bottom: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
.case-hero__head { grid-column: 1 / -1; position: relative; z-index: 2; display: grid; justify-items: start; margin-bottom: clamp(28px, 3.4vw, 48px); }
.case-hero__copy { grid-column: 1 / span 5; display: grid; align-content: start; }
.case-hero__media { grid-column: 6 / -1; position: relative; }
.case-hero__kicker { justify-self: start; display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 14px 0 12px; margin-bottom: 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 0.875rem; font-weight: 550; letter-spacing: -0.01em; }
.case-hero__kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.case-hero__title { max-width: 30ch; font-size: clamp(2.4rem, 0.9rem + 4.7vw, 5.4rem); line-height: 0.96; letter-spacing: -0.045em; font-weight: 650; text-wrap: balance; }
.case-hero__lede { margin-top: 0; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink-2); text-wrap: pretty; }
.meta { margin-top: clamp(24px, 3vw, 40px); display: grid; border-top: 1px solid var(--line); }
.meta__row { display: grid; grid-template-columns: 7rem 1fr; gap: var(--gap); padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center; }
.meta dt { color: var(--ink-3); font-size: var(--fs-small); align-self: start; padding-top: 3px; }
.meta dd { font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; font-size: 0.9375rem; line-height: 1.4; }
.meta img.org-logo { height: 20px; max-width: 130px; margin: 0; object-position: left center; }
.clients { display: grid; gap: 8px; }
.clients li { display: grid; grid-template-columns: 5px 1fr; gap: 10px; align-items: start; color: var(--ink-2); font-weight: 450; }
.clients li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--sage); margin-top: 0.55em; }
.case-media { aspect-ratio: var(--ar, 16 / 10); border-radius: 22px; }
.case-note { margin-top: 12px; color: var(--ink-3); font-size: 0.8125rem; }

.story { padding-top: clamp(80px, 9vw, 140px); display: grid; gap: clamp(64px, 8vw, 120px); }
.story--end { padding-bottom: clamp(88px, 11vw, 170px); padding-top: clamp(64px, 8vw, 110px); }
.blk { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; }
.blk__h { grid-column: 1 / span 5; position: sticky; top: 96px; font-size: clamp(1.4rem, 1rem + 1.3vw, 2.15rem); font-weight: 650; line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; }
.blk > :not(.blk__h) { grid-column: 7 / span 6; }
.prose { display: grid; gap: 1em; max-width: 36rem; font-size: clamp(1rem, 0.94rem + 0.22vw, 1.125rem); line-height: 1.55; letter-spacing: -0.012em; text-wrap: pretty; }
.prose p:not(:first-child) { color: var(--ink-2); }
.prose--serif { font-weight: 500; }
.prose--serif p:not(:first-child) { color: var(--ink-2); }

.decisions { display: grid; gap: 16px; }
.decision { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 2.6vw, 36px); box-shadow: 0 1px 0 rgba(12, 12, 12, 0.03), 0 26px 50px -40px rgba(12, 12, 12, 0.3); }
.decision__title { font-family: var(--sans); font-weight: 650; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); line-height: 1.08; letter-spacing: -0.04em; text-wrap: balance; }
.decision__pair { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.decision__pair dt { font-size: var(--fs-small); color: var(--ink-3); }
.decision__pair dd { margin-top: 3px; font-weight: 550; letter-spacing: -0.01em; }
.decision__pair .pair__a { background: #e6f2ea; border: 1px solid #cfe5d8; border-radius: 16px; padding: 14px 18px 16px; }
.decision__pair .pair__a dt { color: var(--sage); font-weight: 600; }
.decision__pair .pair__a dd { color: #14281d; font-weight: 550; }
.decision__pair > div:last-child { padding: 14px 4px 0 4px; }
.decision__pair > div:last-child dd { color: var(--ink-3); font-weight: 500; }
.decision__why { margin-top: 14px; max-width: 34rem; font-size: 1rem; color: var(--ink-2); line-height: 1.55; text-wrap: pretty; }

.ticks { display: grid; max-width: 36rem; }
.ticks li { padding: 12px 0 12px 32px; border-top: 1px solid var(--line); position: relative; font-size: 1rem; font-weight: 500; letter-spacing: -0.012em; }
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.ticks li::before { content: ''; position: absolute; left: 4px; top: 1.2em; width: 11px; height: 6px; border-left: 1.6px solid var(--sage); border-bottom: 1.6px solid var(--sage); transform: rotate(-45deg); }

/* evolve: the closing chapter, on black. The product evolves as you scroll. */
.evolve { margin-top: clamp(80px, 10vw, 150px); position: relative; }
/* top half: black, with noise. The product evolves as you scroll. */
.evolve { --lr: clamp(28px, 4vw, 56px); }
.evolve__track {
  --ink: #f4faf6; --ink-2: #a9a8a3; --ink-3: #7c7b76; --line: rgba(255, 255, 255, 0.16);
  background-color: var(--night); background-image: var(--grain-light); color: #f4faf6;
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0; padding-top: clamp(72px, 8vw, 120px); padding-bottom: clamp(88px, 11vw, 170px); box-sizing: border-box;
}
/* bottom half: green, with noise. What came out of it. */
.evolve__after {
  --ink: #f4faf6; --ink-2: rgba(244, 250, 246, 0.78); --ink-3: rgba(244, 250, 246, 0.55); --line: rgba(244, 250, 246, 0.24);
  background-color: var(--sage); background-image: var(--grain-light); color: #f4faf6;
  padding-block: clamp(72px, 9vw, 130px) clamp(72px, 9vw, 140px); border-radius: 0 0 var(--lr) var(--lr);
}
.evolve__h { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); margin-bottom: clamp(24px, 4vw, 56px); }
.evolve__h span { grid-column: 6; justify-self: center; white-space: nowrap; padding-top: 22px; }
.evolve__pin { display: grid; gap: 28px; }
.evolve__stage { aspect-ratio: 16 / 10; border-radius: 22px; }
.evolve__stage:not(.evolve__stage--tt) { border: 1px solid rgba(255, 255, 255, 0.14); }
.evolve__stage .layer { position: absolute; inset: 0; background: var(--v-bg); }
.evolve__stage .layer[data-layer='0'], .evolve__stage .layer[data-layer='1'] { display: none; }
.evolve__stage--tt { --v-ink: #141414; --v-mute: #8b8a85; --v-mute2: #55544f; --v-line: rgba(0, 0, 0, 0.1); --v-card-line: rgba(0, 0, 0, 0.12); --v-bg: #ecece8; --v-card: #fff; --v-accent: #2f8a5b; position: relative; aspect-ratio: 752 / 560; border-radius: 0; background: none; filter: drop-shadow(0 40px 70px rgba(0, 0, 0, 0.6)); }
.evolve__stage--tt .v-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.evolve__steps { display: grid; gap: 24px; }
.evolve__steps li { border-top: 1px solid var(--line); padding-top: 14px; }
.evolve__steps li:first-child { border-top: 0; }
.evolve__steps h3 { font-family: var(--sans); font-weight: 650; font-size: 1.75rem; line-height: 1.08; letter-spacing: -0.04em; }
.evolve__steps p { margin-top: 8px; color: var(--ink-2); max-width: 30rem; text-wrap: pretty; }
.evolve__after .blk { display: block; }
.evolve__after .blk__h { position: static; font-size: clamp(1.4rem, 1rem + 1.3vw, 2.15rem); color: #f4faf6; margin-bottom: clamp(20px, 3vw, 36px); }
.evolve__after .blk > :not(.blk__h) { grid-column: auto; }
.evolve__after .prose { max-width: 60rem; gap: clamp(18px, 2vw, 28px); font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.7rem); line-height: 1.12; letter-spacing: -0.04em; font-weight: 650; color: #f4faf6; }
.evolve__after .prose p:not(:first-child) { color: rgba(244, 250, 246, 0.7); }

@media (min-width: 960px) {
  .evolve--pinned .evolve__track { height: calc(340vh + clamp(88px, 11vw, 170px)); }
  .evolve--pinned .evolve__track > .wrap { height: 100%; }
  .evolve--pinned .evolve__stick { position: sticky; top: 1.5vh; }
  .evolve--pinned .evolve__h { margin-bottom: 18px; }
  .evolve--pinned .evolve__pin { grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: center; }
  .evolve--pinned .evolve__stage { grid-column: 1 / span 8; }
  .evolve--pinned .evolve__steps { grid-column: 9 / span 4; gap: 0; }
  .evolve--pinned .evolve__stage .layer[data-layer] { display: block; }
  .evolve--pinned .evolve__stage .layer:not([data-layer='0']) { clip-path: inset(0 calc((1 - var(--r, 0)) * 100%) 0 0); }
  .evolve--pinned .evolve__stage .layer:not([data-layer='0'])::after {
    content: ''; position: absolute; top: 0; bottom: 0; right: calc((1 - var(--r, 0)) * 100%); width: 2px; background: #6fb08e; opacity: min(var(--r, 0) * 8, (1 - var(--r, 0)) * 8, 1);
  }
  .evolve--pinned .evolve__steps li { opacity: 0.32; transition: opacity 0.5s ease; padding: 18px 0 22px; }
  .evolve--pinned .evolve__steps li.is-active { opacity: 1; }
}

/* lessons learned: back on the normal page background, three cards in a row */
.lessons { padding-block: clamp(80px, 10vw, 150px) clamp(88px, 11vw, 170px); }
.js .lesson-list li { transition: opacity 0.9s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 120ms + 150ms); }
.js .lessons:not(.is-in) .lesson-list li { opacity: 0; transform: translateY(44px); }
.js .lessons__h { transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); }
.js .lessons:not(.is-in) .lessons__h { opacity: 0; transform: translateY(24px); }
.lessons__h { font-size: clamp(1.4rem, 1rem + 1.3vw, 2.15rem); font-weight: 650; line-height: 1.04; letter-spacing: -0.04em; margin-bottom: clamp(28px, 3.4vw, 48px); }
.lesson-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.lesson-list li { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 2.4vw, 34px); box-shadow: 0 26px 50px -42px rgba(12, 12, 12, 0.3); display: flex; flex-direction: column; }
.lesson__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #e6f2ea; color: var(--sage); margin-bottom: clamp(36px, 5vw, 72px); }
.lesson-list h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); font-weight: 650; line-height: 1.1; letter-spacing: -0.035em; text-wrap: balance; }
.lesson-list p { margin-top: 12px; color: var(--ink-2); line-height: 1.55; text-wrap: pretty; }
@media (max-width: 959px) { .lesson-list { grid-template-columns: 1fr; } .lesson__ico { margin-bottom: 24px; } }

/* next */
.next { border-top: 1px solid var(--line); padding-block: clamp(64px, 8vw, 120px); background-color: var(--paper); background-image: var(--grain); }
.next__h { font-size: clamp(1.4rem, 1rem + 1.3vw, 2.15rem); font-weight: 650; line-height: 1.04; letter-spacing: -0.04em; margin-bottom: clamp(28px, 3.4vw, 48px); }
.next__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.next__card { display: block; }
.next__media { border-radius: 18px; width: 100%; aspect-ratio: 16 / 10 !important; }
.next__title { margin-top: 18px; font-family: var(--sans); font-weight: 650; font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.1rem); line-height: 1.05; letter-spacing: -0.04em; text-wrap: balance; max-width: 22ch; }
.next__sub { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 500; color: var(--ink-2); }
.next__card:hover .next__sub span { color: var(--ink); }
.next__card:hover .ico { transform: translate(3px, -3px); }
@media (max-width: 959px) { .next__grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- cursor label ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; opacity: 0; transition: opacity 0.25s; }
.cursor span {
  display: block; transform: translate(14px, 14px);
  background: var(--ink); color: var(--paper); font-size: 0.8125rem; font-weight: 500; padding: 8px 12px; border-radius: 8px; white-space: nowrap;
}
.cursor.is-on { opacity: 1; }
@media (hover: none) { .cursor { display: none; } }

/* ---------- view transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.3s ease both vt-out; }
::view-transition-new(root) { animation: 0.5s var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ---------- failsafe + reduced motion ---------- */
.failsafe [data-lines] .line > span, .failsafe [data-lines] .ch, .failsafe .hero__lede, .failsafe .hero .btn { transform: none !important; opacity: 1 !important; filter: none !important; }
.failsafe .hero__photo img, .failsafe .v[data-reveal] { clip-path: none !important; scale: 1 !important; filter: grayscale(1) !important; }
.failsafe .v .draw { stroke-dashoffset: 0 !important; }
.failsafe .v .fade { opacity: 1 !important; }
.failsafe .v .grow { transform: none !important; }
.failsafe .v[data-reveal] .v-svg { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .js .lessons:not(.is-in) .lesson-list li, .js .lessons:not(.is-in) .lessons__h { opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js [data-lines] .line > span, .js [data-lines] .ch, .js .hero__lede, .js .hero .btn { transform: none; opacity: 1; filter: none; }
  .js .hero__photo img, .js .v[data-reveal] { clip-path: none; scale: 1; filter: grayscale(1); }
  .hero__rule { display: none; }
  .js .v .draw { stroke-dashoffset: 0; }
  .js .v .fade { opacity: 1; }
  .js .v .grow { transform: none; }
  .js .v[data-reveal] .v-svg { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 959px) {
  .hero { padding-top: 96px; padding-bottom: 0; min-height: 0; align-items: start; }
  .hero__copy { padding-bottom: 40px; }
  .hero__rule { display: none; }
  .hero__photo { position: relative; width: auto; height: min(118vw, 680px); margin-inline: calc(var(--pad) * -1); border-left: 0; border-top: 1px solid var(--line); }
  .js .hero__photo { border-top-color: transparent; }
  .js.is-ready .hero__photo { border-top-color: var(--line); }
  .hero__photo img { object-position: 50% 18%; }
  .strengths { grid-template-columns: 1fr; padding-top: 48px; gap: 24px; }
  .work__media { border-radius: 14px; }
  .journey__grid { grid-template-columns: 1fr; gap: 40px; }
  .journey__intro, .timeline { grid-column: 1 / -1; }
  .journey__intro { position: static; }
  .journey__intro .h2 { max-width: none; }
  .timeline::before, .timeline::after { left: 5px; }
  .step { grid-template-columns: 1fr; padding-left: 36px; }
  .step__n { position: absolute; left: 58px; top: 16px; font-size: 1.25rem; padding: 0; z-index: 2; }
  .step__dot { left: 0; top: 4px; }
  .step__card { padding-top: 40px; }
  .tool { grid-template-columns: 1fr; gap: 2px; }
  .about__stage { min-height: 0; padding-top: 88px; }
  .about__beliefs { grid-template-columns: 1fr; gap: 20px; }
  .contact__stage { min-height: 0; padding-top: 88px; grid-template-rows: auto auto auto; }
  .contact__copy { padding-bottom: 28px; }
  .contact__photo { position: relative; width: auto; height: min(118vw, 640px); margin-inline: calc(var(--pad) * -1); border-left: 0; border-top: 1px solid var(--line); }
  .contact__base { width: 100%; margin-top: 0; padding-top: 18px; }
  .case-hero__head, .case-hero__copy, .case-hero__media { grid-column: 1 / -1; position: static; }
  .case-hero__media { margin-top: 28px; }
  .meta__row { grid-template-columns: 6rem 1fr; }
  .blk { gap: 14px; }
  .blk__h { grid-column: 1 / -1; position: static; }
  .blk > :not(.blk__h) { grid-column: 1 / -1; }
  .decision__pair { grid-template-columns: 1fr; gap: 12px; }
  .nav__more { display: none; }
  .nav { top: 10px; }
  .case-media { aspect-ratio: 16 / 10; }
}
@media (max-width: 520px) {
  .nav__links a { padding: 10px 11px; }
  .contact__nav a { font-size: 1rem; }
}

.work__desc { max-width: 26rem; color: var(--ink-2); font-size: 1rem; line-height: 1.5; text-wrap: pretty; }

/* footer reveal: the page lifts off a fixed footer (wide screens only) */
.contact-spacer { height: 0; }
@media (min-width: 960px) and (min-height: 600px) {
  main { position: relative; z-index: 2; background-color: var(--paper); background-image: var(--grain); }
  .contact-spacer { height: 100svh; }
  .contact { position: fixed; left: 0; right: 0; bottom: 0; height: 100svh; z-index: 1; }
  .contact__stage { height: 100%; min-height: 0; transform: translate3d(0, calc((1 - var(--fr, 1)) * -6vh), 0); opacity: calc(0.4 + 0.6 * var(--fr, 1)); }
}

/* prototypes play on a loop (case hero and home cards): lines draw, bars grow, panels appear, the cursor hovers */
.v--loop .v-svg { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .js .v--loop .draw { animation: loop-draw 9s ease-in-out infinite; animation-delay: var(--d, 0ms); }
  .js .v--loop .fade { animation: loop-fade 9s ease-in-out infinite; animation-delay: var(--d, 0ms); }
  .js .v--loop .grow { animation: loop-grow 9s var(--ease) infinite; animation-delay: var(--d, 0ms); }
  .tt-cursor { animation: tt-cursor 9s ease-in-out infinite; }
  .tt-pop { opacity: 0; transform-box: fill-box; transform-origin: 100% 100%; animation: tt-pop 9s var(--ease) infinite; }
  .tt-cta rect { animation: tt-cta 9s ease-in-out infinite; }
}
@keyframes loop-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 24% { stroke-dashoffset: 0; } 90% { stroke-dashoffset: 0; opacity: 1; } 96% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes loop-fade { 0%, 12% { opacity: 0; } 24%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes loop-grow { 0% { transform: scaleX(0); } 24% { transform: scaleX(1); } 90% { transform: scaleX(1); opacity: 1; } 96%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes tt-cursor { 0%, 28% { transform: translate(430px, 250px); opacity: 0; } 34% { opacity: 1; } 46%, 80% { transform: translate(650px, 414px); opacity: 1; } 88% { transform: translate(560px, 330px); opacity: 0; } 100% { transform: translate(430px, 250px); opacity: 0; } }
@keyframes tt-cta { 0%, 44% { fill: #141414; } 48%, 80% { fill: #3566d6; } 86%, 100% { fill: #141414; } }
@keyframes tt-pop { 0%, 48% { opacity: 0; transform: scale(.94) translateY(10px); } 56%, 80% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: scale(.98); } }

/* case study hero on black */
.case-top { position: relative; overflow: clip; padding-bottom: calc(clamp(24px, 3vw, 40px) + var(--sheet-r)); --sheet-r: 34px; }
.case-top .case-hero { padding-bottom: clamp(16px, 2vw, 24px); }
.case-top .case-hero__kicker { background: rgba(255, 255, 255, 0.08); border-color: var(--line); color: var(--on-night); }
.case-top .case-hero__kicker::before { background: #6fb08e; }
.case-top .case-hero__lede, .case-top .clients li { color: var(--ink-2); }
.case-top img.org-logo { filter: brightness(0) invert(1); }
.case-top .case-media { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 30px 80px -30px rgba(0, 0, 0, 0.8); }
.case-top .clients li::before { background: #6fb08e; }

/* transition: the page slides up over the black hero like a sheet; the hero stays put and softens */
.case-hero { transform-origin: 50% 0; transform: scale(calc(1 - 0.035 * var(--cp, 0))); opacity: calc(1 - 0.7 * var(--cp, 0)); filter: blur(calc(var(--cp, 0) * 5px)); will-change: transform, opacity; }
.case-sheet { position: relative; z-index: 2; margin-top: calc(var(--sheet-r, 34px) * -1); border-radius: var(--sheet-r, 34px) var(--sheet-r, 34px) 0 0; background-color: var(--paper); background-image: var(--grain); box-shadow: 0 -2px 0 rgba(255, 255, 255, 0.06), 0 -40px 90px rgba(0, 0, 0, 0.55); }
@media (min-width: 960px) { .case-top { position: sticky; top: 0; } }

/* animated mesh gradient behind the prototype so the black frame always reads */
.case-hero__media { isolation: isolate; }
.mesh { position: absolute; inset: -70px -60px -70px -60px; z-index: -1; pointer-events: none; filter: blur(46px) saturate(1.05); opacity: 0.8; border-radius: 0; }
.mesh i { position: absolute; width: 58%; height: 58%; border-radius: 50%; mix-blend-mode: screen; }
.mesh i:nth-child(1) { left: -6%; top: -8%; background: radial-gradient(circle at 50% 50%, #4f8df0 0%, rgba(79, 141, 240, 0) 68%); animation: mesh-a 14s ease-in-out infinite alternate; }
.mesh i:nth-child(2) { right: -8%; top: 0; background: radial-gradient(circle at 50% 50%, #3f7a5c 0%, rgba(63, 122, 92, 0) 68%); animation: mesh-b 17s ease-in-out infinite alternate; }
.mesh i:nth-child(3) { left: 14%; bottom: -14%; background: radial-gradient(circle at 50% 50%, #9cc0f5 0%, rgba(156, 192, 245, 0) 68%); animation: mesh-c 19s ease-in-out infinite alternate; }
.mesh i:nth-child(4) { right: 6%; bottom: -10%; background: radial-gradient(circle at 50% 50%, #6fa88a 0%, rgba(111, 168, 138, 0) 68%); animation: mesh-d 16s ease-in-out infinite alternate; }
@keyframes mesh-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(26%, 18%) scale(1.25); } }
@keyframes mesh-b { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-22%, 24%) scale(0.9); } }
@keyframes mesh-c { from { transform: translate(0, 0) scale(0.95); } to { transform: translate(30%, -20%) scale(1.2); } }
@keyframes mesh-d { from { transform: translate(0, 0) scale(1); } to { transform: translate(-28%, -16%) scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .mesh i { animation: none; } .case-hero { transform: none; opacity: 1; filter: none; } }
@media (max-width: 959px) { .case-hero { transform: none; opacity: 1; filter: none; } .mesh { inset: -40px -20px; } }

/* film grain over the black hero */
.case-top::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.28; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8 .65' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.1 0 0 0 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.case-top .case-note { position: relative; z-index: 4; color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }


/* hero prototypes float: no container, each block lifts off the dark with its own shadow */
.v--float { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible; }
.v--float .v-svg, .v--loop.v--float .v-svg { overflow: visible; }
.v--float rect.fl { filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.5)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3)); }
.case-top .case-note { margin-top: 16px; text-shadow: none; color: var(--ink-3); }
.meta img.org-logo--ey-design-studio { height: 40px; max-width: 150px; margin-block: -10px; }

/* the thread: one line that follows the reading and ends where the story is summed up (How it evolved) */
.thread { position: absolute; left: 0; right: 0; top: 0; height: 0; display: none; pointer-events: none; z-index: 3; --tp: 0; }
@media (min-width: 960px) {
  .thread { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
  .thread > i { grid-column: 6; grid-row: 1; justify-self: center; }
  .thread__track, .thread__fill { width: 1px; height: 100%; }
  .thread__track { background: var(--line); }
  .thread__fill { background: var(--sage); transform-origin: top; transform: scaleY(var(--tp)); }
  .thread__dot { position: relative; align-self: start; width: 11px; height: 11px; margin-top: -5px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 6px rgba(63, 122, 92, 0.16); transform: translateY(calc(var(--th, 0px) * var(--tp))); }
  .thread__dot.is-end { box-shadow: 0 0 0 9px rgba(63, 122, 92, 0.2); }
}
/* the sheet's shadow only falls upward onto the hero, never down onto the next section */
.case-sheet { clip-path: inset(-300px -100px 0 -100px); }
/* the thread's end sits on the green chapter, so it turns light there */
.thread__dot.is-end { background: #f4faf6; box-shadow: 0 0 0 9px rgba(244, 250, 246, 0.28); }

/* the first paragraph of each story section leads in bold */
.story .prose p:first-child { font-weight: 500; letter-spacing: -0.012em; }

/* two logos side by side in the Company row */
.logos { display: inline-flex; align-items: center; gap: clamp(18px, 2vw, 28px); }
.meta .logos img.org-logo { height: 26px; max-width: 140px; margin: 0; }
.meta .logos img.org-logo--civarea { height: 30px; max-width: 150px; }
.meta .logos img.org-logo--waterplan { height: 20px; }

/* Civarea map: 10s loop. Layers toggle over the map while the assessment list completes row by row. */
.sm-spin { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .v--loop .sm-l1 { animation: sm-l1 10s ease-in-out infinite; }
  .v--loop .sm-c1 { animation: sm-l1 10s ease-in-out infinite; }
  .v--loop .sm-l2 { animation: sm-l2 10s ease-in-out infinite; }
  .v--loop .sm-c2 { animation: sm-l2 10s ease-in-out infinite; }
  .v--loop .sm-l3 { animation: sm-l3 10s ease-in-out infinite; }
  .v--loop .sm-c3 { animation: sm-l3 10s ease-in-out infinite; }
  .v--loop .sm-l4 { animation: sm-l4 10s ease-in-out infinite; }
  .v--loop .sm-c4 { animation: sm-l4 10s ease-in-out infinite; }
  .v--loop .sm-l5 { animation: sm-l5 10s ease-in-out infinite; }
  .v--loop .sm-c5 { animation: sm-l5 10s ease-in-out infinite; }
  .v--loop .sm-r1 .sm-spin { animation: sm-spin 1s linear infinite, sm-sp1 10s ease-in-out infinite; }
  .v--loop .sm-r1 .sm-ok, .v--loop .sm-r1 .sm-res { animation: sm-ok1 10s ease-in-out infinite; }
  .v--loop .sm-r1 .sm-lbl { animation: sm-lb1 10s ease-in-out infinite; }
  .v--loop .sm-r2 .sm-spin { animation: sm-spin 1s linear infinite, sm-sp2 10s ease-in-out infinite; }
  .v--loop .sm-r2 .sm-ok, .v--loop .sm-r2 .sm-res { animation: sm-ok2 10s ease-in-out infinite; }
  .v--loop .sm-r2 .sm-lbl { animation: sm-lb2 10s ease-in-out infinite; }
  .v--loop .sm-r3 .sm-spin { animation: sm-spin 1s linear infinite, sm-sp3 10s ease-in-out infinite; }
  .v--loop .sm-r3 .sm-ok, .v--loop .sm-r3 .sm-res { animation: sm-ok3 10s ease-in-out infinite; }
  .v--loop .sm-r3 .sm-lbl { animation: sm-lb3 10s ease-in-out infinite; }
  .v--loop .sm-r4 .sm-spin { animation: sm-spin 1s linear infinite, sm-sp4 10s ease-in-out infinite; }
  .v--loop .sm-r4 .sm-ok, .v--loop .sm-r4 .sm-res { animation: sm-ok4 10s ease-in-out infinite; }
  .v--loop .sm-r4 .sm-lbl { animation: sm-lb4 10s ease-in-out infinite; }
  .v--loop .sm-r5 .sm-spin { animation: sm-spin 1s linear infinite, sm-sp5 10s ease-in-out infinite; }
  .v--loop .sm-r5 .sm-ok, .v--loop .sm-r5 .sm-res { animation: sm-ok5 10s ease-in-out infinite; }
  .v--loop .sm-r5 .sm-lbl { animation: sm-lb5 10s ease-in-out infinite; }
  .v--loop .sm-final { animation: sm-fin 10s ease-in-out infinite; }
  .v--loop .sm-ring { opacity: 0; animation: sm-ring 10s ease-in-out infinite; }
  .v--loop .sm-bar { transform-box: fill-box; transform-origin: left; animation: sm-bar 10s ease-out infinite; }
}
@keyframes sm-spin { to { transform: rotate(360deg) } }
@keyframes sm-l1 { 0% { opacity: 0 } 6% { opacity: 0 } 10% { opacity: 1 } 22% { opacity: 1 } 26% { opacity: 0 } 100% { opacity: 0 } }
@keyframes sm-l2 { 0% { opacity: 0 } 22% { opacity: 0 } 26% { opacity: 1 } 38% { opacity: 1 } 42% { opacity: 0 } 100% { opacity: 0 } }
@keyframes sm-l3 { 0% { opacity: 0 } 38% { opacity: 0 } 42% { opacity: 1 } 54% { opacity: 1 } 58% { opacity: 0 } 100% { opacity: 0 } }
@keyframes sm-l4 { 0% { opacity: 0 } 54% { opacity: 0 } 58% { opacity: 1 } 66% { opacity: 1 } 70% { opacity: 0 } 100% { opacity: 0 } }
@keyframes sm-l5 { 0% { opacity: 0 } 66% { opacity: 0 } 70% { opacity: 1 } 76% { opacity: 1 } 80% { opacity: 0 } 100% { opacity: 0 } }
@keyframes sm-sp1 { 0% { opacity: 0 } 6% { opacity: 0 } 8% { opacity: 1 } 15% { opacity: 1 } 16% { opacity: 0 } 100% { opacity: 0 } }
@keyframes sm-ok1 { 0% { opacity: 0 } 16% { opacity: 0 } 18% { opacity: 1 } 95% { opacity: 1 } 98% { opacity: 0 } 100% { opacity: 0 } }
@keyframes sm-lb1 { 0% { opacity: 0.5 } 6% { opacity: 0.5 } 8% { opacity: 1 } 95% { opacity: 1 } 98% { opacity: 0.5 } 100% { opacity: 0.5 } }
@keyframes sm-sp2 { 0% { opacity: 0 } 20% { opacity: 0 } 22% { opacity: 1 } 29% { opacity: 1 } 30% { opacity: 0 } 100% { opacity: 0 } }
@keyframes sm-ok2 { 0% { opacity: 0 } 30% { opacity: 0 } 32% { opacity: 1 } 95% { opacity: 1 } 98% { opacity: 0 } 100% { opacity: 0 } }
@keyframes sm-lb2 { 0% { opacity: 0.5 } 20% { opacity: 0.5 } 22% { opacity: 1 } 95% { opacity: 1 } 98% { opacity: 0.5 } 100% { opacity: 0.5 } }
@keyframes sm-sp3 { 0% { opacity: 0 } 34% { opacity: 0 } 36% { opacity: 1 } 43% { opacity: 1 } 44% { opacity: 0 } 100% { opacity: 0 } }
@keyframes sm-ok3 { 0% { opacity: 0 } 44% { opacity: 0 } 46% { opacity: 1 } 95% { opacity: 1 } 98% { opacity: 0 } 100% { opacity: 0 } }
@keyframes sm-lb3 { 0% { opacity: 0.5 } 34% { opacity: 0.5 } 36% { opacity: 1 } 95% { opacity: 1 } 98% { opacity: 0.5 } 100% { opacity: 0.5 } }
@keyframes sm-sp4 { 0% { opacity: 0 } 48% { opacity: 0 } 50% { opacity: 1 } 57% { opacity: 1 } 58% { opacity: 0 } 100% { opacity: 0 } }
@keyframes sm-ok4 { 0% { opacity: 0 } 58% { opacity: 0 } 60% { opacity: 1 } 95% { opacity: 1 } 98% { opacity: 0 } 100% { opacity: 0 } }
@keyframes sm-lb4 { 0% { opacity: 0.5 } 48% { opacity: 0.5 } 50% { opacity: 1 } 95% { opacity: 1 } 98% { opacity: 0.5 } 100% { opacity: 0.5 } }
@keyframes sm-sp5 { 0% { opacity: 0 } 62% { opacity: 0 } 64% { opacity: 1 } 71% { opacity: 1 } 72% { opacity: 0 } 100% { opacity: 0 } }
@keyframes sm-ok5 { 0% { opacity: 0 } 72% { opacity: 0 } 74% { opacity: 1 } 95% { opacity: 1 } 98% { opacity: 0 } 100% { opacity: 0 } }
@keyframes sm-lb5 { 0% { opacity: 0.5 } 62% { opacity: 0.5 } 64% { opacity: 1 } 95% { opacity: 1 } 98% { opacity: 0.5 } 100% { opacity: 0.5 } }
@keyframes sm-fin { 0% { opacity: 0 } 80% { opacity: 0 } 86% { opacity: 1 } 95% { opacity: 1 } 98% { opacity: 0 } 100% { opacity: 0 } }
@keyframes sm-ring { 0% { opacity: 0 } 78% { opacity: 0 } 84% { opacity: 1 } 95% { opacity: 1 } 98% { opacity: 0 } 100% { opacity: 0 } }
@keyframes sm-bar { 0%, 82% { transform: scaleX(0) } 94% { transform: scaleX(1) } 98%, 100% { transform: scaleX(0) } }

/* finale: the outcome stays put while the page turns from green to paper, then its words give way to the lessons */
.after--pinned { --ob: 0; --of: 0; height: 190vh; padding: 0; border-radius: 0; position: relative;
  --ink: color-mix(in srgb, #141414 calc(var(--ob) * 100%), #f4faf6);
  background-color: color-mix(in srgb, var(--paper) calc(var(--ob) * 100%), var(--sage)); color: var(--ink); }
.after--pinned::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: var(--ob); pointer-events: none; }
.after--pinned > .wrap { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; z-index: 1; }
.after--pinned .blk { opacity: calc(1 - var(--of)); transform: translateY(calc(var(--of) * -48px)); filter: blur(calc(var(--of) * 10px)); will-change: opacity, transform, filter; }
.after--pinned .prose p:not(:first-child) { color: color-mix(in srgb, var(--ink) 72%, transparent); }
.after--pinned .blk__h { color: color-mix(in srgb, var(--ink) 80%, transparent); }
.after--pinned .prose { color: var(--ink); }

/* light prototypes sit on black frames */
.work__media.v--light, .next__media.v--light { --v-bg: #0e0e0e; }
.work__media.v--light { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px -28px rgba(12, 12, 12, 0.5); }

/* home work cards: floating prototypes on the light page, barely-there shadow */
.work__media.v--float { box-shadow: none !important; }
.work__media.v--float rect.fl { filter: drop-shadow(0 10px 14px rgba(12, 12, 12, 0.07)) drop-shadow(0 1px 2px rgba(12, 12, 12, 0.08)); }

/* mobile story: the three strengths are full cards on one centred thread that lands on "Translated into" */
.strength__art { display: none; }
@media (max-width: 959px) {
  .strengths { position: relative; gap: 44px; padding-left: var(--pad); padding-right: var(--pad); padding-bottom: 0; margin-bottom: 0; }
  .strengths::before { content: ''; position: absolute; left: 50%; top: 56px; bottom: 0; width: 1px; margin-left: -0.5px; background: var(--sage); }
  .strengths li { position: relative; z-index: 1; border: 1px solid var(--ink); border-radius: 24px; padding: 20px 22px 24px; background: #fff; box-shadow: 0 24px 60px -30px rgba(12, 12, 12, 0.3); display: flex; flex-direction: column; }
  .strengths li::before { display: none; }
  .strength__art { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 240 / 130; margin-bottom: 14px; color: var(--ink); }
  .strength__art svg { display: block; width: 100%; height: 100%; }
  .strengths h3 { font-size: 1.4rem; font-weight: 650; letter-spacing: -0.04em; }
  .strengths p { max-width: none; }
  .work-wrap { position: relative; padding-top: 150px; }
  .work-wrap::before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; margin-left: -0.5px; height: var(--wl, 0px); background: var(--sage); z-index: 2; pointer-events: none; }
  .work-wrap::after { content: ''; position: absolute; left: 50%; top: var(--wl, 0px); width: 9px; height: 9px; margin: -4px 0 0 -4.5px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 6px rgba(52, 105, 79, 0.14); z-index: 2; pointer-events: none; opacity: var(--wd, 0); }

  /* about: the fade from the journey must finish before the quote starts */
  .journey::after { height: 220px; }
  .about__stage { padding-top: 230px; }

  /* case hero: text always above the mesh */
  .case-hero__copy { position: relative; z-index: 2; }

  /* decisions: roomier cards */
  .decision { padding: 22px 20px 24px; border-radius: 22px; }
  .decision__pair { margin-top: 18px; gap: 14px; }
  .decision__pair .pair__a { padding: 16px 18px 18px; }
  .decision__pair > div:last-child { padding: 2px 2px 0 2px; }
  .decision__pair > div:last-child dd { margin-top: 4px; }
  .decision__why { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
}

/* mobile evolution: the animation sticks to the top while the steps scroll behind it */
@media (max-width: 959px) {
  .evolve--m .evolve__track { padding-bottom: 60px; }
  .evolve--m .evolve__pin { display: block; }
  .evolve--m .evolve__stage { position: sticky; top: 60px; z-index: 3; width: 100%; }
  .evolve--m .evolve__stage .layer[data-layer] { display: block; }
  .evolve--m .evolve__stage .layer:not([data-layer='0']) { clip-path: inset(0 calc((1 - var(--r, 0)) * 100%) 0 0); }
  .evolve--m .evolve__steps { margin-top: 36px; gap: 0; position: relative; z-index: 1; -webkit-mask-image: linear-gradient(to bottom, transparent var(--cut, 0px), #000 calc(var(--cut, 0px) + 36px)); mask-image: linear-gradient(to bottom, transparent var(--cut, 0px), #000 calc(var(--cut, 0px) + 36px)); }
  .evolve--m .evolve__steps li { min-height: 50vh; padding: 24px 0 30px; opacity: 0.3; transition: opacity 0.5s ease; }
  .evolve--m .evolve__steps li.is-active { opacity: 1; }
  .evolve--m .evolve__steps li:first-child { min-height: 40vh; }
}

/* no mesh glow behind the hero prototype on tablet and mobile */
@media (max-width: 959px) { .mesh { display: none; } }

/* 404 */
body.nf { background-color: #0b0b0b; background-image: var(--grain-light); color: #f4f4f1; }
.nf__main { min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: 18px; padding: 0 var(--pad); max-width: var(--max); margin-inline: auto; }
.nf__code { color: #6fb08e; font-weight: 650; letter-spacing: -0.02em; }
.nf__title { font-size: clamp(2.6rem, 1rem + 6vw, 6rem); line-height: 0.96; letter-spacing: -0.05em; font-weight: 650; }
.nf__lede { color: #a9a8a3; font-size: 1.125rem; margin-bottom: 12px; }
.nf .btn { background: #f4f4f1; color: #0b0b0b; }
html:has(body.nf) { background: #0b0b0b; }
.nf__main { background: #0b0b0b; max-width: none; padding-inline: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad))); }