/* ================= HOME ================= */
main > :is(section, .pin-spacer) + section { margin-top: var(--section); }

/* Hero */
.hero { position: relative; min-height: 100dvh; display: grid; align-items: end; padding-top: calc(var(--nav-h) + 48px); padding-bottom: clamp(40px, 7vw, 96px); overflow: hidden; }
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: var(--z-gl); }
.hero__gl.is-fallback { background: radial-gradient(circle at 75% 35%, var(--accent-soft), transparent 55%); }
.hero__inner { position: relative; z-index: var(--z-content); display: grid; gap: clamp(20px, 2.6vw, 36px); justify-items: start; pointer-events: none; }
.hero__inner a, .hero__inner button { pointer-events: auto; }
.hero__title {
    font-size: var(--fs-3xl); font-weight: var(--fw-display); letter-spacing: var(--track-display); line-height: 0.96;
    max-width: 14ch; text-wrap: balance;
}
.hero__sub { font-size: var(--fs-lg); color: var(--ink-2); max-width: 40ch; line-height: 1.4; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 1200px) { .hero__title { font-size: clamp(4.5rem, 6.2vw, 7rem); max-width: 16ch; } }
.hero__title strong, .story__line strong, .section-title strong { font-weight: var(--fw-strong); }
.hero__inner { will-change: transform, opacity; }

/* Logos */
.logos { padding-block: clamp(24px, 3vw, 40px); border-block: 1px solid var(--line); }

/* Services */
.services .section-title { margin-bottom: clamp(32px, 4vw, 56px); }

/* Work: horizontal pan on desktop, vertical stack on mobile */
.work__head { display: grid; gap: 16px; margin-bottom: clamp(32px, 4vw, 56px); }
.work__intro { color: var(--ink-2); max-width: 40ch; }
.work__progress { display: none; }
@media (min-width: 900px) {
    .work.is-pannable .work__progress { display: block; position: relative; height: 1px; margin-top: clamp(32px, 5vh, 56px); background: var(--line); }
    .work.is-pannable .work__progress span { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
}
.work__track { display: grid; gap: 48px; padding-inline: var(--gutter); }
@media (min-width: 900px) {
    .work.is-pannable { padding-top: clamp(48px, 9vh, 96px); min-height: 100dvh; }
    .work.is-pannable .work__viewport { overflow: hidden; }
    .work.is-pannable .work__track {
        display: flex; gap: clamp(24px, 3vw, 48px); width: max-content;
        padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
        will-change: transform;
    }
    .work.is-pannable .case-card { width: clamp(380px, 38vw, 620px); }
    .work.is-pannable .case-card--all { width: clamp(280px, 24vw, 380px); align-self: stretch; }
    .work:not(.is-pannable) .work__track { grid-template-columns: repeat(2, 1fr); max-width: var(--max); margin-inline: auto; }
}

/* Story: pinned scenes, one idea per screen */
.story { position: relative; }
.story__stage { position: relative; min-height: 100dvh; display: grid; align-items: center; padding-top: var(--nav-h); }
.story__scenes { display: grid; }
.story__scene { grid-area: 1 / 1; display: grid; gap: 24px; align-content: center; }
@media (min-width: 900px) {
    .story__scene { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 64px; align-items: end; }
    .story__note { padding-bottom: 0.6em; }
}
.story__line { max-width: 19ch; font-size: clamp(2.25rem, 1.2rem + 3.6vw, 5rem); font-weight: var(--fw-display); line-height: 1.12; letter-spacing: var(--track-display); color: var(--ink); }
.story__line strong { color: var(--accent); }
.story__note { font-size: var(--fs-lg); color: var(--ink-2); max-width: 44ch; line-height: 1.45; }
/* Without the pin (reduced motion / no JS) scenes simply stack */
.story:not(.is-pinned) .story__stage { min-height: 0; }
.story:not(.is-pinned) .story__scenes { gap: clamp(48px, 8vw, 96px); }
.story:not(.is-pinned) .story__scene { grid-area: auto; }

/* Flow diagram */
.flow .section-title { margin-bottom: clamp(32px, 5vw, 72px); }
@media (min-width: 900px) {
    .flow.is-pinned .flow__stage { min-height: 100dvh; display: grid; align-content: center; }
    .flow.is-pinned .flow__step { opacity: 0.28; transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
    .flow.is-pinned .flow__step.is-current { opacity: 1; transform: translateY(-8px); }
    .flow.is-pinned .flow__step.is-on:not(.is-current) { opacity: 0.55; }
}
.flow__diagram { position: relative; }
.flow__svg { width: 100%; height: clamp(120px, 14vw, 220px); overflow: visible; }
.flow__path-bg, .flow__path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.flow__path-bg { stroke: var(--line); }
.flow__path { stroke: var(--accent); }
.flow__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 24px; }
.flow__step { display: grid; gap: 10px; align-content: start; }
.flow__node { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent); background: var(--bg); transition: background-color 300ms var(--ease-out), transform 400ms var(--ease-out); }
.flow__step.is-on .flow__node { background: var(--accent); transform: scale(1.25); }
.flow__step h3 { font-size: var(--fs-lg); font-weight: var(--fw-strong); letter-spacing: -0.015em; }
.flow__step p { color: var(--ink-2); font-size: var(--fs-sm); }
@media (max-width: 899px) {
    .flow__svg { display: none; }
    .flow__steps { grid-template-columns: 1fr; gap: 0; border-left: 2px solid var(--line); margin-left: 6px; }
    .flow__step { position: relative; padding: 0 0 32px 28px; }
    .flow__node { position: absolute; left: -8px; top: 4px; }
}

/* Value */
.value { display: grid; gap: 48px; }
@media (min-width: 1000px) {
    .value { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
    .value__sticky { position: sticky; top: calc(var(--nav-h) + 32px); }
}
.value__groups { display: grid; gap: clamp(40px, 5vw, 64px); }
.value__group { padding-top: 20px; border-top: 1px solid var(--line); }
.value__group h3, .value__get h3 { font-size: var(--fs-sm); font-weight: 400; margin-bottom: 16px; color: var(--ink-3); }
.value__get { padding: clamp(28px, 4vw, 48px); border-radius: var(--r-media); background: var(--ink); color: var(--bg); }
.value__get h3 { color: inherit; opacity: 0.7; }
.value__get p { font-size: var(--fs-lg); line-height: 1.4; letter-spacing: -0.01em; }

/* Reviews */
.reviews__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.reviews__nav { display: flex; gap: 8px; }
.reviews__viewport { overflow: hidden; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); cursor: grab; touch-action: pan-y; }
.reviews__viewport:active { cursor: grabbing; }
.reviews__track { display: flex; gap: clamp(16px, 2vw, 32px); width: max-content; user-select: none; }
.review {
    width: min(84vw, 560px); display: grid; gap: 40px; align-content: space-between;
    padding: clamp(28px, 3vw, 44px); border: 1px solid var(--line); border-radius: var(--r-media);
    background: var(--bg-elev);
}
.review__quote { font-size: var(--fs-lg); font-weight: var(--fw-display); line-height: 1.35; letter-spacing: -0.01em; }
.review__who { display: flex; align-items: center; gap: 16px; font-size: var(--fs-sm); color: var(--ink-2); }
.review__who strong { color: var(--ink); }
.review__logo { width: 56px; height: 56px; object-fit: contain; border-radius: var(--r-media); background: #111; padding: 8px; }

/* ================= INNER PAGE HEAD ================= */
.page-head { padding-top: calc(var(--nav-h) + clamp(48px, 9vw, 140px)); padding-bottom: clamp(40px, 5vw, 72px); display: grid; gap: clamp(24px, 3vw, 40px); }
.page-head__title { font-size: var(--fs-3xl); font-weight: var(--fw-display); letter-spacing: var(--track-display); line-height: 0.95; max-width: 16ch; }
.page-head__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
.page-head__lede { font-size: var(--fs-lg); color: var(--ink-2); max-width: 46ch; line-height: 1.4; }

/* ================= PROJECTS ================= */
.view-toggle { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-pill); }
.view-toggle__btn { padding: 8px 16px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out); }
.view-toggle__btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.projects.is-list { border-top: 1px solid var(--line); }
.projects.is-list .proj { border-bottom: 1px solid var(--line); }
.projects.is-list .proj__link {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 2fr); gap: 24px; align-items: baseline;
    padding: clamp(20px, 2.4vw, 32px) 0; transition: padding 500ms var(--ease-out), color 300ms var(--ease-out);
}
.projects.is-list .proj__media { display: none; }
.projects.is-list .proj__client { font-weight: 500; }
.projects.is-list .proj__title { font-size: var(--fs-lg); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }
.projects.is-list .proj__tags { color: var(--ink-3); font-size: var(--fs-sm); text-align: right; }
@media (hover: hover) {
    .projects.is-list:hover .proj__link { color: var(--ink-3); }
    .projects.is-list .proj__link:hover { color: var(--ink); padding-left: 16px; }
}
@media (max-width: 767px) {
    .projects.is-list .proj__link { grid-template-columns: 1fr; gap: 6px; }
    .projects.is-list .proj__tags { text-align: left; }
}

.projects.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 4vw, 56px) clamp(16px, 2vw, 32px); }
.projects.is-grid .proj__link { display: grid; gap: 12px; }
.projects.is-grid .proj__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-media); background: var(--bg-elev); margin-bottom: 8px; }
.projects.is-grid .proj__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.projects.is-grid .proj__client { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 500; }
.projects.is-grid .proj__title { font-size: var(--fs-lg); font-weight: 500; line-height: 1.22; letter-spacing: -0.015em; }
.projects.is-grid .proj__tags { font-size: var(--fs-xs); color: var(--ink-3); }
@media (hover: hover) { .projects.is-grid .proj__link:hover img { transform: scale(1.04); } }

.proj-preview {
    position: fixed; top: 0; left: 0; z-index: var(--z-cursor); pointer-events: none;
    width: clamp(260px, 24vw, 380px); aspect-ratio: 4 / 3;
    border-radius: var(--r-media); overflow: hidden; opacity: 0; transform: scale(0.9);
    box-shadow: 0 30px 60px -20px rgb(14 14 16 / 0.35);
}
.proj-preview img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none) { .proj-preview { display: none; } }

/* ================= ABOUT ================= */
.about__title { font-size: var(--fs-2xl); max-width: 22ch; letter-spacing: var(--track-display); line-height: 1.02; }
.page-about .page-head { justify-items: start; }
.about-intro { display: grid; gap: clamp(32px, 5vw, 80px); }
@media (min-width: 900px) { .about-intro { grid-template-columns: 5fr 7fr; align-items: start; } }
.about-intro__portrait { overflow: hidden; border-radius: var(--r-media); aspect-ratio: 4 / 5; background: var(--bg-elev); }
.about-intro__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transform-origin: 50% 30%; }
.about-intro__copy { display: grid; gap: 24px; justify-items: start; }
@media (min-width: 900px) { .about-intro__copy { position: sticky; top: calc(var(--nav-h) + 32px); } }
.about-intro__quote { font-size: var(--fs-xl); font-weight: var(--fw-display); line-height: 1.2; letter-spacing: -0.025em; }
.about-intro__mission { color: var(--ink-2); max-width: 62ch; }

/* About as stories: as the Work page, one screen stays put (.work-stage, about.js) and every story
   is a full-screen layer of it, faded and blurred in and out where it sits; nothing slides. The track
   is one screen per stop after the header */
.work-stage.about-stage.is-layered .work-stage__track { height: calc(var(--about-n, 6) * 100vh); height: calc(var(--about-n, 6) * 100svh); }
/* layers are full width: keep the .wrap measure with padding instead of margins */
.about-stage.is-layered .work-stage__view > .wrap { max-width: none; padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); }
.page-about main > :is(section, div) + section { margin-top: 0; }
.page-about main { padding-bottom: 0; }
.page-about .about__title { max-width: 20ch; }
.about-story { box-sizing: border-box; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; padding-block: calc(var(--nav-h) + 16px) clamp(64px, 9vh, 96px); }
.about-story .ws-hero__wslabel { margin: 0; }
.about-story .ws-hero__lede { white-space: normal; margin: 0; }
/* the grids bend like the home's Track record: hinged on the left, the far side turns towards us */
/* (milder than Track record: these grids are about twice as wide) */
.about-how__grid, 
/* story one: who I am, flat; the words compose themselves on arrival (about.js initCompose) */
.about-hero .about-hero__copy { padding-top: 0; perspective: 900px; perspective-origin: 50% 50%; }
.about-hero__text { width: min(100%, 52ch, 66vw); color: var(--ink); font-weight: var(--fw-display); letter-spacing: var(--track-display);
    font-size: min(clamp(1.5rem, 0.8rem + 1.6vw, 2.6rem), 4.2svh); line-height: 1.3; text-wrap: pretty; }
/* the whole bio on one screen, the drawing board behind it, the whole screen (about.js initBuild), the CV button under it */
.about-hero { position: relative; }
.about-hero .about-hero__copy { position: relative; z-index: 1; }
.about-hero__exit .work-hero__cubes { pointer-events: none; }
.about-hero .about-walk { visibility: hidden !important; pointer-events: none !important; }   /* old island gone; keep box so initBuild size()/CV timing work */
.about-walk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.about-veil { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* a service open: the header's island underneath steps back, so only the chosen service reads */
.about-walk { transition: opacity 600ms var(--ease-out); }
main:has(.about-svc.is-zoomed) .about-walk { opacity: 0.15 !important; }
/* a service open: the tear behind goes */
body:has(.about-svc.is-zoomed) .v2-space { opacity: 0 !important; transition: opacity 500ms var(--ease-out); }
.about-hero__cv { margin-top: clamp(24px, 4.5vh, 48px); }
/* story one is only its title now: set at the titles' size (.ws-hero__title); the bio in story two keeps the text's */
.about-hero .about-hero__text > h1 { display: block; }   /* split into lines (about.js initCompose): a block, not inline */
.about-hero .about-hero__text { font-size: clamp(2rem, 1rem + 2.7vw, 3.6rem); line-height: 1.06; max-width: 26ch; text-wrap: balance; }
.about-hero__text > :is(h1, p) { display: inline; margin: 0; font: inherit; letter-spacing: inherit; }
.about-hero__text > .split-line > p { display: inline; margin: 0; }   /* once cut into lines, a line can hold the end of one paragraph and the start of the next */
/* the availability line: a note under the bio, set as the board's (.about-why__note) */
.about-hero__avail { margin-top: clamp(16px, 3vh, 32px); }

/* story two: the three ways to work together, title and grid bent as one, as story one */
.about-work { perspective: 900px; perspective-origin: 50% 50%; }
html.js .about-work__body { transform: rotateX(6deg) rotateY(18deg); transform-origin: 0 50%; }
.about-work .about-how__grid { transform: none !important; }

/* Work: six screens from the work as noir posters, bent as the Spotlight cards (hinged on the left) */
.work-gallery { gap: clamp(16px, 3vh, 28px); }
.work-gallery__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); width: min(100%, 1100px, 118svh);
    transform: perspective(1600px) rotateX(4deg) rotateY(-12deg); transform-origin: 0 50%; }
.work-gallery__item { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #111; }
.work-gallery__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* story four: how I work, steps in turn in one place */
.about-how .ws-hero__title { margin-bottom: clamp(24px, 5vh, 56px); max-width: 30ch; }
.about-how__steps { display: grid; }
.about-how__steps > .about-how__step { grid-area: 1 / 1; display: grid; gap: clamp(16px, 3vh, 28px); align-content: start; }
.about-how__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 4vh, 40px) clamp(24px, 3vw, 56px); max-width: 1100px; }
.about-how__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about-how__grid li { display: grid; gap: 10px; align-content: start; padding-top: 16px; border-top: 1px solid var(--line); }
.about-how__grid h3 { font-size: var(--fs-lg); font-weight: var(--fw-display); letter-spacing: -0.01em; line-height: 1.2; }
.about-how__grid p { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.about-how__grid--tight p { font-size: 14px; }
.about-how__meter { display: flex; align-items: center; gap: 10px; color: var(--ink) !important; }
.about-how__best { color: var(--ink-3) !important; }
.about-how__progress { max-width: 1100px; }

/* story five: the philosophy, as a board */
.about-why { gap: clamp(14px, 2.4vh, 24px); }
.about-why .ws-hero__title { max-width: 26ch; }
/* the board: the home workspace's look (mono readouts, stickies, a mini flow with live wires), no panel
   behind it: the boxes float on a bubble by themselves, as the home's (about.js initBoard) */
.about-board { --bn-ink: var(--ink); --bn-mute: var(--ink-3); --bn-accent: var(--interactive); --bn-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
    --bn-line: color-mix(in srgb, var(--ink) 14%, transparent); --bn-hair: var(--bn-line);
    --sticky-a: color-mix(in srgb, var(--interactive) 16%, transparent); --sticky-b: color-mix(in srgb, var(--interactive) 8%, transparent);
    display: grid; gap: clamp(12px, 2.4vh, 24px); width: min(100%, 1000px); }
/* title and board together in the middle of the screen, a little air between them */
.about-why .about-board { margin-top: clamp(16px, 4vh, 48px); }
/* the note under the board: small, mono, typed out */
.about-why__note { display: grid; margin: clamp(14px, 2.5vh, 28px) 0 0; max-width: 82ch; font-family: var(--ask-mono, ui-monospace, monospace); font-size: 12px; line-height: 1.6; color: var(--ink-2); }   /* three lines on desktop */
.about-why__note > span { grid-area: 1 / 1; }
.about-why__ghost { visibility: hidden; }   /* holds the whole note's room while it types */
.about-why__note .is-typing::after { content: "▍"; animation: caret-blink 0.9s steps(1) infinite; }
.about-board__stage { display: flex; justify-content: space-between; margin: 0; font-family: var(--bn-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bn-mute); }
.about-board__flow { justify-content: flex-start; }
.about-board__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); align-items: start; }
.about-board .bn-sticky { max-width: none; display: grid; gap: 8px; font-size: 13px; will-change: transform; backface-visibility: hidden; }
.about-board .bn-sticky:nth-child(3n+2) { margin-top: clamp(8px, 2vh, 20px); }
.about-board .bn-sticky b { font-size: 15px; font-weight: var(--fw-strong); }
.about-board .bn-sticky p { margin: 0; color: var(--ink-2); }

/* story six: the services as a floating island of blocks (about.js initEcosystem): the title, then
   the field filling the rest of the screen; a chosen node's window opens over the side it leaves free */
.about-svc { align-content: center; grid-template-rows: min(78svh, 780px); }
/* the title over the field, at its top left; the island in the middle */
.about-svc__head { grid-area: 1 / 1; align-self: start; margin-top: clamp(24px, 8vh, 96px); position: relative; z-index: 2; pointer-events: none; transition: opacity 400ms var(--ease-out); }
.about-svc .eco { grid-area: 1 / 1; margin-top: 0; }
.about-svc.is-zoomed .about-svc__head { opacity: 0; }
.about-svc__head > * { transition: opacity 500ms var(--ease-out); }
.about-svc.is-zoomed .about-svc__head > * { opacity: 0; }   /* the head's own fade is inline (about.js): its children go instead */
.about-hero__exit { transition: opacity 600ms var(--ease-out); }
main:has(.about-svc.is-zoomed) .about-hero__exit { transition-duration: 200ms; }   /* clicking a service: the base goes fast */
main:has(.about-svc.is-zoomed) .about-hero__exit { opacity: 0.85 !important; filter: blur(4px); }
/* under the service's text, on the left: the ground blurred and veiled more, so the words read clean */
.about-hero__exit::after { content: ""; position: absolute; inset: 0 50% 0 0; pointer-events: none; opacity: 0; transition: opacity 600ms var(--ease-out);
    background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    mask-image: linear-gradient(to right, #000 70%, transparent); -webkit-mask-image: linear-gradient(to right, #000 70%, transparent); }
main:has(.about-svc.is-zoomed) .about-hero__exit::after { opacity: 1; }   /* focus on a service: the same ground zoomed (about.js), the other services blurred */
.about-hero__exit { transition: opacity 600ms var(--ease-out), filter 600ms var(--ease-out); }
.eco { position: relative; min-height: 0; margin-top: clamp(8px, 2vh, 24px); }
.eco__field { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; cursor: default; }   /* sized past the stage to the screen's edges (about.js) */
.about-svc.is-zoomed .eco__field { cursor: zoom-out; }
/* each service is a real button on its building's top: its number always shown, its name only while it
   is pointed at or focused */
.eco__node { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: 0; padding: 0; translate: -50% -50%; border: 0; border-radius: 50%; background: none; color: var(--ink); font: inherit; cursor: pointer; will-change: transform; transition: opacity 400ms var(--ease-out); }
.about-svc.is-growing .eco, .about-svc.is-growing .eco * { pointer-events: none; }   /* growing out of the header with the scroll: the hero stays the one to point at */
.eco__node span { position: absolute; left: 26px; top: 50%; translate: 0 -50%; width: max-content; max-width: 16em; padding: 4px 8px; background: color-mix(in srgb, var(--bg) 82%, transparent); font-size: 14px; line-height: 1.25; text-align: left; opacity: 0; filter: blur(6px); pointer-events: none; transition: opacity 300ms var(--ease-out), filter 300ms var(--ease-out); }
.eco__node.is-on span, .eco__node:focus-visible span { opacity: 1; filter: blur(0px); }
/* the number stays, so every service can be found */
.eco__n { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 2px 5px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--interactive) 45%, var(--line)); font-family: var(--ask-mono, ui-monospace, monospace); font-size: 10px; font-weight: 400; letter-spacing: 0.06em; color: var(--interactive); transition: background-color 300ms, color 300ms; }
.eco__node.is-on .eco__n, .eco__node:focus-visible .eco__n { background: var(--interactive); color: #fff; }
.about-svc .eco__n { visibility: hidden; }   /* the number is on the building's red cube (space-cubes.js) */
.eco__node:focus-visible { outline: 1px solid var(--interactive); outline-offset: 2px; }
.about-svc.is-zoomed .eco__node { opacity: 0; pointer-events: none; }
/* a chosen service's four areas: name and what it changes (typed), over its shapes, bent as its window */
.eco__area { position: absolute; left: 0; top: 0; width: 190px; translate: -50% -100%; opacity: 0; pointer-events: none; font-family: var(--ask-mono, ui-monospace, monospace); will-change: transform, opacity; }
.eco__area.is-under { translate: -50% 0; }
.eco__area > * { display: block; margin: 0; transform: perspective(900px) rotateY(-12deg) rotateX(3deg); transform-origin: 100% 50%; }
.eco__area b { font-size: 10px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--interactive); }
.eco__area p { margin-top: 4px; font-size: 11.5px; line-height: 1.35; color: var(--ink); }
.eco__area p.is-typing::after { content: "▍"; animation: caret-blink 0.9s steps(1) infinite; }
.eco__hint { position: absolute; right: 0; bottom: 0; margin: 0; font-family: var(--ask-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); transition: opacity 400ms; }
.about-svc.is-zoomed .eco__hint { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
/* a service's neighbours, at the bottom of the field over the island, while one is open */
.eco .eco__nav { margin: 0; position: absolute; left: 73%; translate: -50% 0; bottom: 0; z-index: 3; opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease-out), visibility 0s 400ms; }
.about-svc.is-zoomed .eco .eco__nav { opacity: 1; visibility: visible; transition: opacity 400ms 600ms var(--ease-out), visibility 0s; }
.eco__esc { display: none; font-family: var(--ask-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
/* a service's window: on the left, flat and without a box, its group, name, close and its phases */
.eco-win { position: absolute; left: 0; top: 50%; translate: 0 -50%; box-sizing: border-box; width: min(520px, 46%); max-height: 100%; overflow: auto; overscroll-behavior: contain; display: grid; gap: 16px; padding: 0;
}
.eco-win[hidden] { display: none; }
.eco-win__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: start; }
.eco-win__group { grid-column: 1; margin: 0; font-family: var(--ask-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--interactive); }
.eco-win__t { grid-column: 1; margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-display); letter-spacing: var(--track-display); line-height: 1.15; }
.eco-win__phases { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.eco-win__phases > li { display: grid; gap: 6px; }
.eco-win__n { font-family: var(--ask-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: 0.12em; color: var(--interactive); }
.eco-win__phases h4 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-strong); }
.eco-win__phases p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.eco-win__phases .eco-win__acts { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }   /* its activities, quiet, in a line */
.eco-win__acts span { display: block; margin: 4px 0 2px; font-family: var(--ask-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

/* story seven: who with */
.about-with .ws-hero__title { margin-bottom: clamp(16px, 3vh, 32px); }
.about-with__body { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.about-with__chat { position: relative; z-index: 1; }
/* the island bleeds from the right half to the screen's edges (sized in about.js withIsland) */
.about-with__field { position: absolute; top: 0; display: block; max-width: none; max-height: none; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 28%, #000 52%); mask-image: linear-gradient(90deg, transparent 28%, #000 52%); }   /* fades out under the words, never cut */
.about-with__reviews { display: grid; }
.about-with__review { grid-area: 1 / 1; margin: 0; display: grid; gap: clamp(14px, 2.5vh, 24px); align-content: center; }
.about-with__review[hidden] { display: grid !important; visibility: hidden; }
/* a message arriving: who writes, the dots while they type, then the bubble */
.about-with__who { display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); color: var(--ink-3); }
.about-with__photo { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: 12px; font-weight: var(--fw-strong); color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.about-with__id { min-width: 0; }
.about-with__who strong { color: var(--ink); font-weight: var(--fw-strong); margin-right: 4px; }
.about-with__quote { margin: 0; max-width: 24ch; padding: 0; display: grid; font-size: clamp(2rem, 1rem + 2.7vw, 3.6rem); font-weight: var(--fw-display); line-height: 1.06; letter-spacing: var(--track-display); }  /* the quote itself is the title, at the header's size */
.about-with__quote > span { grid-area: 1 / 1; }
.about-with__ghost { visibility: hidden; }   /* holds the whole quote's room while it types */
.about-with__typed.is-typing::after { content: ""; display: inline-block; width: 0.05em; height: 0.85em; margin-left: 0.04em; vertical-align: -0.08em; background: currentColor; animation: caret-blink 0.9s steps(1) infinite; }   /* a thin text caret, not a block */
.work-strip__nav.about-with__nav { margin-top: clamp(16px, 3vh, 28px); }

/* phone: every story fits one screen */
@media (max-width: 899px) {
    .about-hero .work-hero__cue { display: none; }   /* the story fills the screen: the cue would sit on the text */
    .about-hero__text { width: 100%; font-size: 1.15rem; }
    .work-hero.about-hero { align-content: start; }
    .about-hero .about-hero__copy { padding-top: calc(var(--nav-h) + 160px); }
    .about-hero__avail { margin-top: 28px; }
    .about-hero__cv { margin-top: 44px; }
    .about-how .ws-hero__title { font-size: 1.6rem; margin-bottom: 18px; }
    .about-how__grid--3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .about-with__body { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .about-with.about-story { align-content: start; padding-top: calc(var(--nav-h) + 36px); padding-bottom: 48px; }
    .about-with__chat { align-self: start; margin-top: 10vh; }
    .about-with__field { -webkit-mask-image: linear-gradient(180deg, transparent 45%, #000 65%); mask-image: linear-gradient(180deg, transparent 45%, #000 65%); }   /* under the words: fades in from above */
    .about-how__grid li { gap: 4px; padding-top: 10px; }
    .about-how__grid h3 { font-size: 1.05rem; }
    .about-how__grid p { font-size: 12.5px; line-height: 1.4; }
    .about-how__best { display: none; }
    .about-how__grid--tight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-how__grid--tight p { font-size: 12px; }
    .about-how__grid,     .work-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .about-why .ws-hero__title { font-size: 1.45rem; }
    .about-why { gap: 10px; }
    .about-why .ws-hero__title { font-size: 1.3rem; }
    .about-board { gap: 12px; }
    .about-board .bn-sticky p { font-size: 11.5px; line-height: 1.38; }
    .about-board__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .about-board .bn-sticky { padding: 10px 12px; font-size: 12px; }
    .about-board .bn-sticky:nth-child(3n+2) { margin-top: 0; }
    .about-board .bn-sticky:nth-child(even) { margin-top: 10px; }
    .about-board .bn-sticky b { font-size: 13px; }
    .about-why__note { margin-top: 10px; font-size: 10.5px; line-height: 1.5; }
    .eco__node span { max-width: 11em; font-size: 12px; }
    .about-svc { grid-template-rows: auto 60svh; }
    .about-svc__head { grid-area: 1 / 1; align-self: end; margin-top: 0; padding-top: 88px; max-width: none; }   /* title lower; eco margin cancels so fabric/bg stay put */
    .about-svc .eco { grid-area: 2 / 1; margin-top: calc(10px - 88px); }
    .eco__hint { bottom: 52px; }   /* clear of Ask AI / location bar */
    .eco__area { width: 130px; }
    .eco__area p { font-size: 10px; }
    /* focus: description (viewport top) → smaller building → arrows. fixed = not relative to .eco row */
    .about-svc.is-zoomed .eco__hint { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
    .about-svc.is-zoomed .eco-win {
        position: fixed !important;
        top: calc(var(--nav-h) + 28px) !important;
        bottom: auto !important;
        left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) !important;
        right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) !important;
        width: auto !important;
        max-width: none !important;
        height: 70vh !important;
        min-height: 70vh !important;
        max-height: 70vh !important;
        translate: none !important;
        transform: none !important;
        padding: 28px 0 24px !important;
        gap: 12px;
        box-sizing: border-box;
        z-index: 4;
        overflow: auto !important;
        /* fade under nav + fade at description foot cut */
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 36px, #000 calc(100% - 56px), transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 36px, #000 calc(100% - 56px), transparent);
    }
    /* grey building off screen; fabric base keeps soft anim behind, no blur */
    .about-svc.is-zoomed .eco__field {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    main:has(.about-svc.is-zoomed) .about-hero__exit {
        opacity: 0.85 !important;
        filter: none !important;
    }
    /* foot fade above Ask AI / location */
    body.page-about:has(.about-svc.is-zoomed)::after {
        content: "";
        position: fixed;
        left: 0; right: 0; bottom: 0;
        height: 110px;
        pointer-events: none;
        z-index: 3;
        background: linear-gradient(to top, var(--bg) 40%, transparent);
    }
    .eco-win__t { font-size: 1.3rem; }
    .about-svc.is-zoomed .eco .eco__nav {
        position: fixed !important;
        left: auto !important;
        right: var(--gutter) !important;
        bottom: 96px !important;
        top: auto !important;
        translate: none !important;
        z-index: 5;
    }
    .about-svc.is-zoomed .eco__esc { display: grid; }
    /* phone focus: description + arrows only; building stays as bg, no area labels */
    .about-svc.is-zoomed .eco__area { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

        .about-with__quote { font-size: 1.6rem; }
        }
@media (max-height: 760px) { .about-hero .work-hero__cue { display: none; } }   /* short screens: the story reaches the bottom */
/* short phones (iPhone SE): the secondary lines go so every story still fits one screen */
@media (max-width: 899px) and (max-height: 720px) {
    .about-board .bn-sticky p { display: none; }
    .about-hero__text { font-size: 1.02rem; }
    }
.stats .section-title { margin-bottom: clamp(32px, 4vw, 56px); }
.stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); border-top: 1px solid var(--line); margin: 0; }
.stat { display: flex; flex-direction: column-reverse; gap: 8px; padding: 28px 24px 28px 0; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: 24px; }
@media (max-width: 520px) { .stat + .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } }
.stat dd { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-display); letter-spacing: var(--track-display); line-height: 1; color: var(--accent); }
.stat dt { color: var(--ink-2); font-size: var(--fs-sm); }

.stack .section-title { margin-bottom: clamp(32px, 4vw, 56px); }
.stack__cards { display: grid; gap: 24px; }
.stack-card {
    min-height: min(70vh, 520px); display: grid; align-content: space-between; gap: 32px;
    padding: clamp(28px, 4vw, 64px); border-radius: var(--r-media);
    background: var(--bg-elev); border: 1px solid var(--line); transform-origin: 50% 0;
}
.stack-card:nth-child(2) { background: color-mix(in srgb, var(--brand-purple) 18%, var(--bg-elev)); }
.stack-card:nth-child(3) { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.stack-card h3 { font-size: var(--fs-2xl); font-weight: var(--fw-display); letter-spacing: var(--track-display); line-height: 1; }
.stack-card p { font-size: var(--fs-lg); line-height: 1.4; max-width: 44ch; }

.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 24px); padding-inline: var(--gutter); max-width: var(--max); margin-inline: auto; overflow: hidden; }
.mosaic__col { display: grid; gap: clamp(12px, 2vw, 24px); align-content: start; }
.mosaic__col:nth-child(2) { margin-top: 12vh; }
.mosaic__item { border-radius: var(--r-media); overflow: hidden; background: var(--bg-elev); }
.mosaic__item img { width: 100%; height: auto; }

.rows--expand .rows__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
@media (max-width: 767px) { .rows--expand .rows__item { grid-template-columns: 1fr; } }

.principles__head { display: grid; gap: 24px; margin-bottom: clamp(40px, 5vw, 72px); }
.principles__lede { color: var(--ink-2); max-width: 60ch; font-size: var(--fs-lg); line-height: 1.4; }
.principles__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0; border-top: 1px solid var(--line); }
.principles__grid li { padding: 32px 32px 40px 0; display: grid; gap: 12px; align-content: start; border-bottom: 1px solid var(--line); position: relative; }
.principles__grid li::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--accent); transition: width 600ms var(--ease-out); }
@media (hover: hover) { .principles__grid li:hover::before { width: 100%; } }
.principles__grid h3 { font-size: var(--fs-lg); font-weight: 500; letter-spacing: -0.015em; }
.principles__grid p { color: var(--ink-2); font-size: var(--fs-sm); }

/* ================= CASE STUDY ================= */
.cs-hero { padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 112px)); padding-bottom: clamp(32px, 4vw, 56px); display: grid; gap: clamp(24px, 3vw, 40px); }
.crumbs { font-size: var(--fs-sm); color: var(--ink-3); display: flex; gap: 8px; }
.crumbs a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.cs-hero__title { font-size: var(--fs-2xl); font-weight: var(--fw-display); letter-spacing: var(--track-display); line-height: 1.02; max-width: 20ch; }
.cs-hero__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; margin: 0; padding-top: 24px; border-top: 1px solid var(--line); max-width: 900px; }
.cs-hero__meta dt { font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: 4px; }
.cs-hero__meta dd { margin: 0; font-weight: 500; }

.cs-banner { margin-inline: var(--gutter); border-radius: var(--r-media); overflow: hidden; aspect-ratio: 21 / 9; background: var(--bg-elev); }
.cs-banner img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .cs-banner { aspect-ratio: 4 / 5; } }

.cs-layout { display: grid; gap: 48px; padding-top: var(--section); }
@media (min-width: 1000px) { .cs-layout { grid-template-columns: 240px minmax(0, 760px); gap: clamp(48px, 7vw, 120px); } }
.cs-toc { display: none; }
@media (min-width: 1000px) {
    .cs-toc { display: flex; gap: 20px; position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; }
}
.cs-toc__track { width: 2px; background: var(--line); border-radius: 2px; position: relative; flex: none; }
.cs-toc__bar { position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(0); }
.cs-toc ol { display: grid; gap: 4px; font-size: var(--fs-sm); }
.cs-toc a { display: block; padding: 4px 0; color: var(--ink-3); transition: color var(--dur-ui) var(--ease-out), transform 400ms var(--ease-out); }
.cs-toc a:hover { color: var(--ink); }
.cs-toc a[aria-current] { color: var(--ink); font-weight: 500; transform: translateX(4px); }

/* Case content (v2 blocks from partials/cs-blocks.php) */
.cs-body .cs-sec__title { font-size: var(--fs-xl); font-weight: var(--fw-display); letter-spacing: -0.025em; line-height: 1.12; margin: clamp(56px, 7vw, 96px) 0 20px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.cs-body > .cs-sec__title:first-child { margin-top: 0; }
.cs-body .cs-lede { font-size: var(--fs-lg); line-height: 1.45; color: var(--ink); margin: 32px 0; max-width: 40ch; }
.cs-body h3.cs-sub { font-size: var(--fs-md); font-weight: 500; letter-spacing: 0; line-height: 1.4; margin: 32px 0 8px; }
.cs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 32px; margin: 0; border-top: 1px solid var(--line); }
.cs-facts__row { padding: 16px 0; border-bottom: 1px solid var(--line); }
.cs-facts dt { font-family: var(--ask-mono, ui-monospace, monospace); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 6px; }
.cs-facts dd { margin: 0; color: var(--ink); }
.cs-body .cs-list { list-style: none; padding: 0; margin: 16px 0 24px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.cs-body .cs-list li { padding: 12px 0 12px 28px; border-bottom: 1px solid var(--line); color: var(--ink-2); position: relative; }
.cs-body .cs-list li::before { content: ""; position: absolute; left: 0; top: calc(12px + 0.8em); width: 12px; height: 1px; background: var(--interactive); }
.cs-body .cs-list li strong { color: var(--ink); font-weight: 500; }
.cs-fig { margin: 32px 0; }
.cs-fig img, .cs-fig video { width: 100%; display: block; border-radius: var(--r-media); background: var(--bg-elev); }
.cs-fig--framed img { border: 1px solid var(--line); }
.cs-fig figcaption { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 10px; }
.cs-quote { margin: 40px 0; padding: 28px 0 0; border-top: 1px solid var(--line); }
.cs-quote p { font-size: var(--fs-lg); line-height: 1.4; color: var(--ink); font-weight: var(--fw-display); margin-bottom: 20px; }
.cs-quote footer { display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); color: var(--ink-3); }
.cs-quote footer img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.cs-quote footer strong { color: var(--ink); font-weight: 500; display: block; }
.cs-stats { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: 1px solid var(--line); }
.cs-stats li { padding: 24px 24px 24px 0; }
.cs-stats strong { display: block; font-size: var(--fs-2xl); font-weight: var(--fw-display); letter-spacing: var(--track-display); line-height: 1; color: var(--interactive); margin-bottom: 10px; }
.cs-stats span { font-size: var(--fs-sm); color: var(--ink-2); }

/* Legacy content inside v2 */
.cs-body { min-width: 0; }
.cs-body [id^="s-"] { scroll-margin-top: calc(var(--nav-h) + 24px); }
.cs-body h3 { font-size: var(--fs-xl); font-weight: var(--fw-display); letter-spacing: -0.025em; line-height: 1.12; margin: clamp(56px, 7vw, 96px) 0 20px; }
.cs-body > h3:first-child { margin-top: 0; }
.cs-body h4.cs__heading { font-size: var(--fs-lg); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; margin: 56px 0 20px; }
.cs-body h5 { font-size: var(--fs-md); font-weight: 500; margin: 32px 0 8px; }
.cs-body p { color: var(--ink-2); margin-bottom: 1.1em; }
.cs-body p.small, .cs-body figcaption { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 10px; }
.cs-body hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.cs-body a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.cs-body figure { margin: 24px 0; }
.cs-body figure img, .cs-body video { width: 100%; border-radius: var(--r-media); background: var(--bg-elev); }
.cs-body .cs-video { margin: 24px 0; }
.cs-body .cs__imgcap2 img { border: 1px solid var(--line); }
.cs-body ul { display: grid; gap: 2px; }
.cs-body .cstool__links { margin-bottom: 20px; }
.cs-body .cstool__links p { color: var(--ink); margin-bottom: 6px; font-size: var(--fs-sm); }
.cs-body .cstool__links li { color: var(--ink-2); }
/* Minimal grid for the legacy Bootstrap rows */
.cs-body .row { display: flex; flex-wrap: wrap; margin-inline: -10px; }
.cs-body .row > * { padding-inline: 10px; flex: 1 0 100%; min-width: 0; }
.cs-body .row > .col-6 { flex: 0 0 50%; }
@media (min-width: 768px) { .cs-body .row > [class*="col-md-4"] { flex: 0 0 33.333%; } .cs-body .row > [class*="col-md-6"] { flex: 0 0 50%; } }
@media (min-width: 992px) { .cs-body .row > [class*="col-lg-6"] { flex: 0 0 50%; } .cs-body .row > [class*="col-lg-4"] { flex: 0 0 33.333%; } .cs-body .row > [class*="col-lg-3"] { flex: 0 0 25%; } }
.cs-body .justify-content-center { justify-content: center; }
.cs-body .cards__cs { padding: 28px 24px 28px 0; border-top: 1px solid var(--line); height: 100%; }
.cs-body .cards__cs h4 { font-size: var(--fs-2xl); font-weight: var(--fw-display); letter-spacing: var(--track-display); line-height: 1; color: var(--accent); margin-bottom: 12px; }
.cs-body .cards__cs p { font-size: var(--fs-sm); }

.cs-next { padding-top: var(--section); }
.cs-next__link { display: grid; gap: 24px; padding-top: 40px; border-top: 1px solid var(--line); }
.cs-next__label { font-size: var(--fs-sm); color: var(--ink-3); }
.cs-next__title { font-size: var(--fs-2xl); font-weight: var(--fw-display); letter-spacing: var(--track-display); line-height: 1.04; max-width: 22ch; }
.cs-next__media { position: relative; display: block; aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--r-media); }
.cs-next__media img {
    position: absolute; left: 0; top: -10%; width: 100%; height: 120%;
    object-fit: cover; will-change: transform;
}
.page-projects main > section + section,
.page-cs main > .cs-banner + section { margin-top: 0; }

/* Single-column grids must not grow to their children's max-content (auto-fit grids inside) */
.cs-hero, .page-head, .cs-layout, .value, .about-intro, .work__head, .principles__head { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
    .cs-layout { grid-template-columns: 240px minmax(0, 760px); }
    .value { grid-template-columns: 5fr 7fr; }
}
@media (min-width: 900px) { .about-intro { grid-template-columns: 5fr 7fr; } }

/* One column of text over a full-bleed thread of light */
.story__scenes { position: relative; z-index: 1; }
@media (min-width: 900px) {
    .story__scene { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; max-width: min(60%, 880px); }
    .story__note { padding-bottom: 0; }
}
.story__gl { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } /* full-bleed WebGL background behind the text */
@media (max-width: 899px) { .story__gl { opacity: 0.6; } }
.story:not(.is-pinned) .story__gl { display: none; }
.story__stage { z-index: 1; }

/* ================= Home: Tools + I have worked with ================= */
.kit, .brands { padding-block: var(--section) 0; }
.brands { padding-bottom: var(--section); }
.kit__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.kit__tool { display: grid; justify-items: center; align-content: center; gap: 16px; aspect-ratio: 1; padding: 20px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-sm); text-align: center; transition: color 300ms var(--ease-out), background-color 360ms var(--ease-out); }
.kit__tool svg { width: 40px; height: 40px; fill: currentColor; }
@media (hover: hover) { .kit__tool:hover { color: var(--interactive); background: color-mix(in srgb, var(--interactive) 6%, transparent); } }

.brands__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.brands__item { display: grid; place-items: center; aspect-ratio: 2 / 1; padding: 18px 24px; background: var(--bg); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color 360ms var(--ease-out); } /* an opaque bg so the logos' multiply blend still works while they animate in */
.brands__item img { height: 64px; width: auto; max-width: 88%; object-fit: contain; filter: grayscale(1); opacity: 0.8; mix-blend-mode: multiply; transition: opacity 300ms var(--ease-out); } /* multiply drops the logos' white plates */
[data-theme="dark"] .brands__item img { filter: grayscale(1) invert(1); mix-blend-mode: screen; }
@media (hover: hover) { .brands__item:hover { background: color-mix(in srgb, var(--interactive) 6%, var(--bg)); } .brands__item:hover img { opacity: 1; } }
@media (max-width: 899px) { .brands__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kit__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kit__tool svg { width: 32px; height: 32px; } }
.kit .work__head, .brands .work__head { margin-bottom: clamp(36px, 4.5vw, 64px); }
.brands__item img[src*="vic-logo"] { height: 38px; } /* its file has no padding plate, unlike the others */
@media (max-width: 899px) { .brands__item img { height: 52px; } .brands__item img[src*="vic-logo"] { height: 30px; } }

/* Isolated grid sections: full screen while their tiles arrive */
.kit.is-pinned, .brands.is-pinned { min-height: 100vh; min-height: 100dvh; display: grid; align-content: center; padding-block: calc(var(--nav-h) + 24px) clamp(32px, 5vh, 72px); }
.kit.is-pinned .work__head, .brands.is-pinned .work__head { margin-bottom: clamp(28px, 4vh, 56px); }
/* the single story scene: one longer paragraph, so a calmer size and a wider measure */
.story__line { max-width: 24ch; font-size: clamp(1.9rem, 1rem + 2.6vw, 3.6rem); line-height: 1.16; }

/* Work page: the footer's field run backwards stays behind three stories: header, latest four, more */
.work-stage { position: relative; }
.work-stage__field {
    position: sticky; top: 0; z-index: 0; display: block; width: 100%; height: 100vh; height: 100svh;
    margin-bottom: -100vh; margin-bottom: -100svh; pointer-events: none;
}
.work-stage section { position: relative; z-index: 1; }
/* layered (motion allowed): the view stays put while the track scrolls under it; every story is a
   full-screen layer of it, so nothing moves with the scroll. Layers only take clicks on what shows */
.work-stage__track { display: none; }
.work-stage.is-layered .work-stage__track { display: block; height: 160vh; height: 160svh; }
.work-stage.is-layered .work-stage__view { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
html .work-stage.is-layered .work-stage__view > * { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; min-height: 0; margin: 0; pointer-events: none; }
.work-stage.is-layered .work-stage__view > * > * { pointer-events: auto; }
.work-stage.is-layered .work-stage__view > section, .work-stage.is-layered .work-stage__view > .outro { z-index: 1; }
/* the stage ends the page: no room under it (the phone bar sits over Let's talk's own bottom padding) */
main:has(> .work-stage.is-layered) { padding-bottom: 0; }
.work-hero { display: grid; align-content: center; min-height: 100vh; min-height: 100svh; }
.work-hero__copy { width: 100%; padding-top: var(--nav-h); }
:is(.page-projects, .page-about) .work-head__title {
    font-size: clamp(2.2rem, 1rem + 3.2vw, 4.2rem); font-weight: var(--fw-display);
    letter-spacing: var(--track-display); line-height: 1.06; max-width: 16ch; text-wrap: balance;
}
:is(.page-projects, .page-about) .work-head__lede { margin-top: 1.4rem; max-width: 42ch; font-size: 1.2rem; line-height: 1.45; color: var(--ink-2); }
/* scroll cue: a label over a hairline with a pulse running down it; it fades with the header copy */
.work-hero__cue { position: absolute; left: 50%; bottom: 32px; translate: -50% 0; display: grid; justify-items: center; gap: 10px; pointer-events: none;
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.work-hero__cue i { position: relative; width: 1px; height: 56px; overflow: hidden; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.work-hero__cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: linear-gradient(transparent, var(--ink)); animation: cue-run 1.8s var(--ease-in-out, ease-in-out) infinite; }
@media (prefers-reduced-motion: reduce) { .work-hero__cue i::after { animation: none; } }

/* story two: every case on one diagonal (the home Spotlight's cards and 3D viewport, workspace.css) */
.work-strip .work__head { margin-bottom: clamp(12px, 2vh, 24px); }
.work-strip .work__head .ws-hero__lede { margin-top: 0.8rem; }
.work-strip__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(16px, 2.6vh, 28px); }
.work-filters { display: flex; flex-wrap: wrap; gap: 8px; }
/* carousel arrows (more than three cases), square like the other controls */
.work-strip__nav { display: flex; align-items: center; gap: 8px; position: relative; z-index: 2; margin-top: -24px; }
.work-strip__nav[hidden] { display: none; }
.work-strip__arrow {
    display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--ink); cursor: pointer;
    transition: background-color 250ms var(--ease-out), color 250ms var(--ease-out), border-color 250ms var(--ease-out), opacity 250ms var(--ease-out);
}
.work-strip__arrow svg { width: 16px; height: 16px; }
.work-strip__arrow:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) { .work-strip__arrow:not(:disabled):hover { background: var(--ink); border-color: var(--ink); color: var(--bg); } }
.work-strip__count { align-self: stretch; display: grid; place-items: center; min-width: 5.5em; padding-inline: 8px; background: color-mix(in srgb, var(--bg) 70%, transparent); text-align: center; font-size: var(--fs-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.work-filter {
    padding: 8px 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 70%, transparent);
    color: var(--ink-2); font: inherit; font-size: var(--fs-xs); letter-spacing: 0.04em; cursor: pointer;
    transition: color 250ms var(--ease-out), background-color 250ms var(--ease-out), border-color 250ms var(--ease-out);
}
.work-filter span { margin-left: 0.3em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.work-filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.work-filter[aria-pressed="true"] span { color: inherit; opacity: 0.7; }
@media (hover: hover) { .work-filter:hover { border-color: var(--ink); color: var(--ink); } .work-filter[aria-pressed="true"]:hover { color: var(--bg); } }
.work-strip .spot__card { pointer-events: auto; }
@media (max-width: 899px) {
    /* one swipeable row of filters, so the line of cases keeps its room */
    .work-strip__controls { flex-direction: column; align-items: stretch; }
    .work-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
    .work-filters::-webkit-scrollbar { display: none; }
    .work-filter { flex: none; }
}
/* every case on screen, each with its client and title (a smaller title; narrowed cards smaller still) */
.work-strip .spot__card .case-card__body { gap: 6px; }
.work-strip .spot__card .case-card__title { font-size: var(--fs-sm); line-height: 1.3; max-width: none; }
.work-strip .spot__card.is-narrow .case-card__client { font-size: var(--fs-xs); }
.work-strip .spot__card.is-narrow .case-card__title { font-size: 0.75rem; }
.work-strip .spot__card.is-narrow .work-card__year { display: block; margin-left: 0; }
.work-strip .spot__card.is-tiny .case-card__body { visibility: hidden; }
.spot.work-strip.is-carousel .spot__card { width: min(28vw, 420px); }
.spot.work-strip.is-carousel .spot__card .case-card__media { height: 260px; }
.spot.work-strip.is-carousel .spot__viewport { height: calc(260px + 150px); }
@media (max-width: 899px) {
    .spot.work-strip.is-carousel .spot__card { width: 36vw; }
    .spot.work-strip.is-carousel .spot__card .case-card__media { height: 150px; }
    .spot.work-strip.is-carousel .spot__viewport { height: calc(150px + 170px); }
    /* the home Spotlight's phone layout leaves room below for its own controls: here the arrows take it */
    .spot.work-strip.is-carousel { height: 100vh; height: 100dvh; min-height: 0; align-content: center; padding-block: calc(var(--nav-h) + 8px) 64px; overflow: clip; }
}
.work-card__year { margin-left: 0.5em; color: var(--ink-3); font-weight: 400; font-variant-numeric: tabular-nums; }


/* About: light-speed arrival (warp.js) and the bent space behind the stories (dents.js) */
.v2-warp { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 10000; pointer-events: none; }
.v2-warp canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.v2-warp [data-w="orb"] { background: var(--bg); }
.v2-space { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.v2-space { transform-origin: 42% 40%; transition: opacity 1.8s cubic-bezier(.4,0,.2,1) .2s, scale 2s cubic-bezier(.16,1,.3,1) .2s; }
.v2-space.is-arriving { opacity: 0; scale: 3.2; transition: none; }
.v2-space canvas { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; will-change: transform, opacity; }
.v2-space canvas[data-l="veil"] { left: 0; top: 0; width: 100%; height: 100%; }
.v2-space [data-l="fluid"] { display: none; }   /* no colour inside the tear */
.v2-space [data-l="cubes"] { left: 0; top: 0; width: 100%; height: 100%; }
/* alive, on the compositor only: the gas breathes and turns, the filaments drift against it, stars twinkle */
.v2-space [data-l="gas"] { animation: neb-pulse 9s ease-in-out infinite alternate; }
.v2-space [data-l="wisp"] { animation: neb-glow 7s ease-in-out infinite alternate; }
/* still: the haze and the lips only breathe */
@keyframes neb-pulse { from { opacity: 0.8; } to { opacity: 1; } }
@keyframes neb-glow { from { opacity: 0.7; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .v2-space canvas { animation: none; } }
.v2-dents { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
/* the blocks: lighter, see-through */
.about-walk, .eco__field, .about-with__field { filter: opacity(0.72); }
.eco-shards { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; filter: opacity(0.72); }
.about-with__field { display: none; }   /* the shards in the tear take the reviews island's place (about.js shatterInto) */

/* the home blob on the about page, where the tear closed (about.js initAboutOrb): a screen-size canvas drawing the disc itself */
.about-orb { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; opacity: 0; filter: saturate(160%); }
/* the wormhole sinks into the page: multiplied over it, its edge soft */
.about-hole { mix-blend-mode: multiply; filter: blur(2px); }
[data-theme="dark"] .about-hole { mix-blend-mode: screen; filter: blur(2px) brightness(1.4) saturate(140%); }

/* about: a semi-transparent ball inside the space veil, the face turning on it (about.js places it each frame) */
.v2-bubble { position: fixed; left: 0; top: 0; pointer-events: none; border-radius: 50%; will-change: transform, opacity; overflow: hidden; }
.v2-bubble::before { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: .6; filter: grayscale(.2);
    background: var(--photo) 0 50% / 50% 100% repeat-x; animation: v2-ball-spin 14s linear infinite; }
.v2-bubble::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, rgb(255 255 255 / .6), rgb(255 255 255 / 0) 28%), radial-gradient(circle at 50% 50%, transparent 45%, rgb(0 0 0 / .28) 100%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4); }
@keyframes v2-ball-spin { to { background-position-x: -200%; } }
@media (prefers-reduced-motion: reduce) { .v2-bubble::before { animation: none; } }


/* ================= CV ================= */
.cv { padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 112px)); padding-bottom: var(--section); display: grid; gap: clamp(36px, 4vw, 56px); }
.cv__head { display: grid; gap: 16px; }
.cv__title { font-size: var(--fs-2xl); font-weight: var(--fw-display); letter-spacing: var(--track-display); line-height: 1.02; }
.cv__role { font-family: var(--ask-mono, ui-monospace, monospace); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.cv__lede { font-size: 1.2rem; line-height: 1.45; color: var(--ink-2); max-width: 70%; }
@media (max-width: 699px) { .cv__lede { max-width: none; } }
.cv__pdf { justify-self: start; margin-top: 8px; }
.cv__sec { display: grid; gap: 24px; }
@media (min-width: 1000px) { .cv__sec { grid-template-columns: 140px minmax(0, 860px); gap: clamp(32px, 4vw, 56px); } }
.cv__label { font-family: var(--ask-mono, ui-monospace, monospace); font-size: var(--fs-sm, 0.875rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.4; color: var(--ink); padding-top: 24px; }
.cv__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.cv__item { display: grid; gap: 8px 32px; padding: 24px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .cv__item { grid-template-columns: 180px minmax(0, 1fr); } }
.cv__meta { display: grid; gap: 4px; align-content: start; font-family: var(--ask-mono, ui-monospace, monospace); font-size: var(--fs-xs); color: var(--ink-3); }
.cv__item-title { font-size: var(--fs-md); font-weight: 500; line-height: 1.35; margin-bottom: 8px; }
.cv__item-title span { display: block; font-weight: 400; color: var(--ink-3); }
.cv__item p { color: var(--ink-2); }
.cv__skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; border-top: 1px solid var(--line); padding-top: 24px; }
.cv__group { font-family: var(--ask-mono, ui-monospace, monospace); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 12px; font-weight: 400; }
.cv__skills ul { list-style: none; padding: 0; display: grid; gap: 6px; color: var(--ink-2); }
@media print {
    .nav, .footer, .site-footer, .cv__pdf, .scroll-cue, .nav__progress { display: none !important; }
    .cv { padding-top: 0; gap: 32px; }
    .cv__item { break-inside: avoid; }
}

/* Work hero: one bent CTA down to Shots (the home hero's button) */
.work-hero__anchors { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(8px, 2vh, 16px); }
/* right: a light wormhole opening at the top left, its exit running right; under the exit the showreel
   lies flat, landscape, on the fabric's own 2:1 angle (space-cubes.js sets --wh-x/--wh-y, the throat) */
.page-projects .work-hero { position: relative; }
.page-projects .work-hero__copy { position: relative; z-index: 1; }
.work-hero__exit { position: absolute; inset: 0; pointer-events: none; }
.work-hero__cubes { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: auto; }
/* the reel's video is only a source: space-cubes.js paints its frames onto the blocks */
.work-hero__reel { position: absolute; left: 0; top: 0; width: 64px; height: 36px; opacity: 0; pointer-events: none; }
/* desktop: the title from the top (not centred), at the home and About titles' height */
@media (min-width: 900px) {
    .page-projects .work-hero { align-content: start; }
    .page-projects .work-hero__copy { padding-top: calc(var(--nav-h) + 78px + 11.4vh); }
}
@media (max-width: 899px) {
    .page-projects .work-hero { align-content: start; }
    /* phone: title + CTA sit lower */
    .page-projects .work-hero__copy { padding-top: calc(var(--nav-h) + clamp(48px, 12vh, 110px)); }
}

/* story three, Shots: every screen and visual on one isometric plane (the home hero floor and About's
   island use the same 2:1 angle). The plane drifts along its diagonal with the scroll (projects.js);
   hover or focus lifts a tile off it. The track gets the room for the drift: stops at 0, 1, 2 screens,
   the shots sucked in by 3, Let's talk at 4 */
.work-stage.is-layered:has([data-work-shots]) .work-stage__track { height: 400vh; height: 400svh; }
.shots { overflow: clip; }
.shots__head { position: relative; z-index: 2; padding-top: calc(var(--nav-h) + clamp(16px, 4vh, 48px)); pointer-events: none; }
.shots__head > * { pointer-events: auto; }
.shots__head .ws-hero__lede { margin-top: 0.8rem; max-width: 36ch; }
.shots__plane {
    --tile: clamp(150px, 13vw, 220px);
    position: absolute; left: 50%; top: 50%; z-index: 0;
    display: grid; grid-template-columns: repeat(8, var(--tile)); grid-auto-rows: calc(var(--tile) * 0.66); grid-auto-flow: dense; gap: 18px;
    transform: translate(-50%, -38%) rotateX(60deg) rotateZ(-45deg) translate3d(0, var(--drift, 0px), 0);
    transform-style: preserve-3d;
}
.shots__tile {
    position: relative; display: block; overflow: hidden; background: var(--surface, var(--bg));
    border: 1px solid var(--line); outline-offset: 4px;
    box-shadow: 0 0 0 0 transparent;
    transition: transform 0.45s var(--ease-out, cubic-bezier(.2,.7,.2,1)), box-shadow 0.45s var(--ease-out, ease-out);
}
.shots__tile--wide { grid-column: span 2; grid-row: span 2; }
/* the shots lie on the hero's fabric (gl/space-cubes.js): the DOM plane stays for the viewer, unseen */
html.has-shot-field .work-stage__view .shots__plane, html.has-shot-field .work-stage__view .shots__plane * { opacity: 0; pointer-events: none; }
/* the hero's title, faded out past the hero, must not catch the clicks meant for the shots under it */
html.has-shot-field .work-stage__view .work-hero__copy h1 { pointer-events: none; }
.shots__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shots__tile:hover, .shots__tile:focus-visible {
    transform: translate3d(-10px, -10px, 0);
    box-shadow: 10px 10px 0 color-mix(in srgb, var(--ink) 16%, transparent);
    z-index: 1;
}
@media (max-width: 899px) {
    .shots__plane { --tile: 120px; grid-template-columns: repeat(6, var(--tile)); gap: 12px; }
}
/* reduced motion (no layered stage): a flat grid in the page flow */
@media (prefers-reduced-motion: reduce) {
    .shots { padding-block: var(--nav-h) 64px; }
    .shots__plane { position: static; transform: none; width: auto; margin: 32px var(--gutter) 0;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-rows: 140px; }
}

/* the shot viewer: the picked shot flat and large, its project beside it */
.shot-view { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(16px, 4vw, 56px); }
.shot-view[hidden] { display: none; }
.shot-view__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); }
.shot-view__fig { position: relative; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(20px, 3vw, 48px); align-items: end; width: min(1320px, 100%); max-height: 100%; }
.shot-view__img { display: block; width: 100%; max-height: calc(100svh - 2 * clamp(16px, 4vw, 56px)); object-fit: contain; object-position: left center;
    border: 1px solid var(--line); background: var(--bg); box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--ink) 35%, transparent); will-change: transform; }
.shot-view__info { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; align-self: stretch; }
.shot-view__client { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.shot-view__title { margin: 0; font-size: 1.5rem; line-height: 1.15; font-weight: var(--fw-display, 400); letter-spacing: var(--track-display, -0.01em); }
.shot-view__cap { margin: 0; color: var(--ink-2); line-height: 1.45; }
.shot-view__meta { margin: 0; font-size: 0.85rem; color: var(--ink-3); }
.shot-view__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.shot-view__nav { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--ink); font-size: 18px; cursor: pointer; }
.shot-view__fig { grid-template-rows: auto 1fr; }
.shot-view__img { grid-area: 1 / 1 / 3 / 2; align-self: end; }
.shot-view__close { grid-area: 1 / 2; justify-self: start; align-self: start; }   /* top of the info column, beside the shot */
.shot-view__info { grid-area: 2 / 2; align-self: end; }
/* the accent here is the ink: the solid button's fill would wipe in dark on dark, so it wipes in light */
.shot-view .btn--solid { border: 1px solid var(--ink); }
.shot-view .btn--solid::before { background: var(--bg); }
@media (hover: hover) { .shot-view .btn--solid:hover { color: var(--ink); border-color: var(--ink); } }
.shot-view__nav--prev { left: 12px; } .shot-view__nav--next { right: 12px; }
.shot-view__nav:hover { background: var(--ink); color: var(--bg); }
@media (max-width: 899px) {
    .shot-view { align-items: center; }
    .shot-view__fig { grid-template-columns: 1fr; gap: 16px; align-items: start; }
    .shot-view__fig { grid-template-rows: auto auto auto; gap: 12px 16px; }
    .shot-view__close { grid-area: 1 / 1; justify-self: end; }   /* top right, above the shot */
    .shot-view__img { grid-area: 2 / 1; max-height: 55svh; object-position: center; }
    .shot-view__info { grid-area: 3 / 1; }
    .shot-view__nav { top: auto; bottom: 16px; translate: none; }
}
/* Work hero: the title carries the whole line now (no lede): a touch smaller and wider */
.page-projects .work-head__title { font-size: clamp(2rem, 1rem + 2.7vw, 3.6rem); max-width: 26ch; }   /* as the About hero */

/* Work hero: the showreel's preview */
.reel-modal { width: min(92vw, 1280px); max-height: 92vh; padding: 0; border: 0; background: #000; overflow: visible; }
.reel-modal::backdrop { background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(10px); }
.reel-modal video { display: block; width: 100%; height: auto; max-height: 92vh; }
.reel-modal__close { position: absolute; top: -40px; right: 0; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); background: var(--bg); color: var(--ink);
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.reel-modal[open] { animation: reel-open 380ms var(--ease-out); }
@keyframes reel-open { from { opacity: 0; scale: 0.96; } }
@media (prefers-reduced-motion: reduce) { .reel-modal[open] { animation: none; } }
/* the copy's box spans the hero: let clicks through to the reel on the fabric, keep them on the copy */
html .work-stage .work-hero > .work-hero__copy { pointer-events: none; }
html .work-stage .work-hero > .work-hero__copy > * { pointer-events: auto; }

/* Work, Selected work one case at a time (partials/work-case.php): a compact recap on the left, the case
   playing on the fabric's hill on the right (space-cubes.js), its button laid isometric under it */
.work-case { display: grid; align-content: center; min-height: 100vh; min-height: 100svh; }
.work-case__inner { display: grid; }
html .work-stage .work-case > .work-case__inner { pointer-events: none; }
.work-case__col { pointer-events: auto; display: grid; gap: clamp(20px, 3.2vh, 32px); width: min(30rem, 38%); }
.work-case__heading { margin: 0; }
.work-case__filter { position: relative; justify-self: start; display: inline-grid; align-items: center; }
.work-case__filter select { appearance: none; padding: 8px 36px 8px 14px; border: 1px solid var(--line); border-radius: 0; background: color-mix(in srgb, var(--bg) 70%, transparent);
    color: var(--ink); font: inherit; font-size: var(--fs-xs); letter-spacing: 0.04em; cursor: pointer; }
.work-case__filter svg { position: absolute; right: 12px; width: 12px; height: 12px; pointer-events: none; color: var(--ink-2); }
@media (hover: hover) { .work-case__filter select:hover { border-color: var(--ink); } }
.work-case__recaps { display: grid; padding-block: clamp(4px, 1vh, 12px); border-top: 1px solid var(--line); padding-top: clamp(20px, 3.2vh, 32px); }
.work-case__recap { display: grid; gap: 14px; }
.work-case__recap { grid-area: 1 / 1; }   /* stacked: the area keeps the tallest case's height, so the arrows never move */
.work-case__recap.is-off { visibility: hidden; }
.work-case__recap .case-card__client { margin: 0; }
.work-case__title { margin: 0; font-size: var(--fs-lg); font-weight: 400; line-height: 1.25; text-wrap: balance; }
.work-case__lede { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.work-case__metrics { display: flex; gap: 32px; margin: 8px 0 0; padding: 0; list-style: none; }
.work-case__metrics li { display: grid; gap: 2px; min-width: 0; }
.work-case__metrics strong { font-size: var(--fs-md); font-weight: 500; font-variant-numeric: tabular-nums; }
.work-case__metrics span { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.3; }
.work-case__cta { display: flex; gap: 10px; }
.work-case__cta [hidden] { display: none; }
.work-case__cta svg { width: 12px; height: 12px; margin-left: 8px; }
.work-case__nav { margin-top: 4px; width: min(30rem, 38%); pointer-events: auto; }
/* desktop: under the left column (nav is a direct child of .work-case) */
@media (min-width: 900px) {
    .page-projects .work-case > .work-strip__nav.work-case__nav {
        position: relative;
        width: min(30rem, 38%);
        /* the column's rhythm under the metrics; left on the text's edge (the .wrap's, centred past --max) */
        margin: clamp(24px, 4vh, 40px) 0 0 calc(max(0px, (100% - var(--max)) / 2) + var(--gutter));
        justify-self: start;
        z-index: 2;
    }
}
/* the button on the fabric: the floor's isometric plane (the blocks' rows), from its top left corner */
.work-case__cta { position: absolute; left: var(--cta-x, 70%); top: var(--cta-y, 80%); pointer-events: auto; white-space: nowrap;
    transform-origin: 0 0; transform: matrix(0.866, 0.5, -0.866, 0.5, 0, 0); }
.work-case__cta .btn--ghost { background: var(--bg); }
@media (max-width: 899px) {
    /* title + filter + info a little lower, more air above the hill; Read on fabric under image */
    .work-case {
        align-content: start;
        padding-top: calc(var(--nav-h) + 28px);
        padding-bottom: 72px;
        position: relative;
    }
    .work-case__col { width: auto; gap: 0; margin-bottom: clamp(28px, 8vh, 72px); }
    .work-case__heading { font-size: clamp(1.45rem, 1rem + 2.2vw, 2rem); margin: 0 0 18px; }
    .work-case__filter { margin-bottom: 22px; }
    .work-case__filter select { padding: 6px 32px 6px 12px; }
    .work-case__recaps { padding-block: 0; padding-top: 22px; margin-top: 0; }
    .work-case__recap { gap: 8px; }
    .work-case__title { font-size: var(--fs-md); line-height: 1.25; }
    .work-case__lede {
        font-size: 0.875rem; line-height: 1.4;
        display: block; -webkit-line-clamp: unset; overflow: visible;
    }
    .work-case__metrics { display: flex; gap: 16px; margin: 4px 0 0; }
    .work-case__metrics strong { font-size: var(--fs-sm); }
    /* arrows: under case image, right, above Turin — absolute to .work-case layer (not inside faded head) */
    .page-projects .work-case > .work-strip__nav.work-case__nav {
        position: absolute !important;
        left: auto !important;
        right: var(--gutter) !important;
        bottom: 56px !important; /* .nav__status at 24px */
        top: auto !important;
        margin: 0 !important;
        width: max-content !important;
        z-index: 3;
        pointer-events: auto;
    }
    .work-case__cta {
        position: absolute;
        left: var(--cta-x, 50%);
        top: var(--cta-y, 70%);
        margin: 0;
        transform-origin: 0 0;
        transform: matrix(0.866, 0.5, -0.866, 0.5, 0, 0) scale(1.08);
        z-index: 2;
    }
}

/* About footer: the left half veiled and blurred like the service focus, fading out to the right, so Let's talk and the meta read clean */
.page-about .outro::before { content: ""; position: absolute; inset: 0 50% 0 0; pointer-events: none; z-index: 0;
    background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    mask-image: linear-gradient(to right, #000 70%, transparent); -webkit-mask-image: linear-gradient(to right, #000 70%, transparent);
    opacity: 0; transition: opacity 600ms var(--ease-out); }
.page-about .outro.is-veiled::before { opacity: 1; }   /* only while on the footer (about.js, with the march) */
.page-about .outro__inner { position: relative; z-index: 1; }
/* CV: the footer is a fixed layer that fades in once the CV has rolled away (cv.js) */
.page-cv.cv-layered .outro, .page-cs.cv-layered .outro { position: fixed; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; pointer-events: none; background: none; }
.page-cv.cv-layered .outro__inner, .page-cs.cv-layered .outro__inner { width: 100%; }
.page-cv.cv-layered .outro.is-on, .page-cs.cv-layered .outro.is-on { pointer-events: auto; }
.page-cv.cv-layered .outro::before, .page-cv.cv-layered .outro::after, .page-cs.cv-layered .outro::before, .page-cs.cv-layered .outro::after { display: none; }
.page-cv.cv-layered .cv { padding-bottom: 70vh; }
.page-cs.cv-layered #main { padding-bottom: 140vh; }
.page-cs.cv-layered .cs-related { position: fixed; inset: 0; z-index: 3; margin: 0; align-content: center; pointer-events: none; }
.page-cs.cv-layered .cs-related.is-on { pointer-events: auto; }
/* CV: the content fades out under the nav and above the bottom bar (Ask AI / location) */
.page-cv::before, .page-cv::after { content: ""; position: fixed; left: 0; right: 0; z-index: 2; pointer-events: none; }
.page-cv::before { top: 0; height: 140px; background: linear-gradient(to bottom, var(--bg) 45%, transparent); }
.page-cv::after { bottom: 0; height: 130px; background: linear-gradient(to top, var(--bg) 40%, transparent); }
/* project information: no rule under the second row (My role, Users, Tools) */
.cs-facts__row:nth-child(n+4) { border-bottom: 0; }

/* Shots tabs (web sites, mobile apps, complex products): the industry pills' look, under the lede;
   a tile of another tab leaves the plane */
/* a compact segmented control: one row, smaller than the industry pills, always inside the width */
.shots__tabs.work-filters { display: inline-flex; flex-wrap: nowrap; gap: 0; max-width: 100%; justify-self: start; margin: 1rem 0 0; padding: 0;
    border: 1px solid var(--line); background: var(--bg); overflow: visible; }
.shots__tabs .work-filter { flex: 1 1 auto; min-width: 0; padding: 6px 12px; border: 0; background: none;
    font-size: 11px; letter-spacing: 0.02em; white-space: nowrap; text-align: center; }
.shots__tabs .work-filter + .work-filter { border-left: 1px solid var(--line); }
.shots__tabs .work-filter span { margin-left: 0.25em; font-size: 0.9em; }
.shots__tabs .work-filter[aria-pressed="true"] { background: var(--ink); }
@media (max-width: 599px) {
    .shots__tabs.work-filters { display: flex; width: 100%; }
    .shots__tabs .work-filter { flex: 1 1 auto; padding: 7px 3px; font-size: 10.5px; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; }
}
.shots__tile[hidden] { display: none; }
/* the home's copy (after Track record): the shots lie on the home's own fabric (gl/space-cubes.js), as on
   Work; the section only gives the scroll its stretch (the rows drift into the throat over it) and its
   heading sticks meanwhile. The DOM plane stays for the viewer, unseen */
.shots--home { position: relative; height: 120vh; height: 120svh; margin-top: -60vh; margin-top: -60svh; }
/* its heading: a layer held on screen, faded in and out in place (projects.js, initHomeShots) */
html.has-home-shots .shots--home .shots__head { position: fixed; inset: 0 0 auto; z-index: 3; }
html.has-shot-field .shots--home .shots__plane, html.has-shot-field .shots--home .shots__plane * { opacity: 0; pointer-events: none; }
html.is-on-shot, html.is-on-shot body { cursor: pointer; }
/* the footer turns into a fixed layer once Shots has gone by: its room stays, or the page would shrink under the scroll */
.shots--home:has(~ .outro.is-still) { margin-bottom: 100vh; margin-bottom: 100dvh; }