/* Koku & Co. design system. Canonical roles and values: docs/DESIGN-SYSTEM.md. */
@font-face{font-family:Zodiak;src:url('../fonts/zodiak-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Zodiak;src:url('../fonts/zodiak-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Switzer;src:url('../fonts/switzer-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Switzer;src:url('../fonts/switzer-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root {
  --paper: #fafaf8;
  --band: #edf1f6;
  --ink: #1b2530;
  --blue: #3d5a73;
  --blue-light: #9fb4c6;
  --cobalt: #1d5be8;
  --muted: #586574;
  --orange: #ef5029;
  --orange-action: #fa603b;
  --orange-hover: #ff704a;
  --line: #bdc9d4;
  --focus: var(--cobalt);
  --link: var(--blue);
  --field-line: var(--blue);
  --serif: Zodiak, Georgia, serif;
  --sans: Switzer, Arial, sans-serif;
  --text-meta: .75rem;
  --text-ui: .875rem;
  --text-body: 1rem;
  --text-label: 1.125rem;
  --text-lead: clamp(1.125rem, 1.5vw, 1.25rem);
  --text-subtitle: clamp(1.75rem, 2.4vw, 2rem);
  --text-section: clamp(2rem, 3.4vw, 3rem);
  --text-project: clamp(2.25rem, 4.8vw, 4.5rem);
  --text-page: clamp(2.75rem, 6.1vw, 5.5rem);
  --text-hero: clamp(4rem, 9.3vw, 9.375rem);
  --leading-body: 1.6;
  --leading-heading: 1.08;
  --tracking-heading: -.035em;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --section-space: clamp(3rem, 6vw, 6rem);
  --column-gap: clamp(2rem, 6vw, 6rem);
  --gutter: clamp(24px, 4.7vw, 80px);
  --content-max: 1600px;
  --measure: 60ch;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

/* Foundation */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--space-8); }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--text-body)/var(--leading-body) var(--sans); -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,p,ul,ol,figure { margin: 0; }
h1,h2,h3,h4 { font-weight: 400; overflow-wrap: anywhere; }
p,figcaption,.next__name,.row__name { overflow-wrap: anywhere; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .3em; }
a[href^="mailto:"] { overflow-wrap: anywhere; min-width: 0; }
button,input,textarea { font: inherit; color: inherit; }
button,a,summary { -webkit-tap-highlight-color: transparent; }
button,summary { cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: #1d5be829; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.wrap { max-width: var(--content-max); margin-inline: auto; width: calc(100% - var(--gutter)*2); }
.sr-only,.ask__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip-link { position: absolute; top: var(--space-2); left: var(--space-2); transform: translateY(-200%); background: var(--ink); color: var(--paper); padding: var(--space-3); z-index: 9; }
.skip-link:focus { transform: none; }

/* Shared type roles */
.section-title,.plain__title,.archive__title,.case__title,.project__title,.row__name,.next__name,.ask__title {
  font-family: var(--serif); font-weight: 400; line-height: var(--leading-heading); letter-spacing: var(--tracking-heading);
}
.section-title { font-size: var(--text-section); text-wrap: balance; }
.plain__title,.archive__title,.case__title { font-size: var(--text-page); text-wrap: balance; }
.lead { font-size: var(--text-lead); line-height: 1.5; max-width: var(--measure); }
.eyebrow { display: block; font-size: var(--text-body); font-weight: 500; line-height: 1.4; color: var(--blue); margin-bottom: var(--space-4); }

/* Navigation and actions */
.bar { padding-block: var(--space-6); }
.bar__inner { display: flex; align-items: center; gap: var(--space-12); }
.wordmark { display: inline-flex; align-items: center; width: 164px; min-height: 44px; flex-shrink: 0; text-decoration: none; }
.wordmark img { width: 100%; height: auto; }
.bar__nav { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-left: auto; }
.bar__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-ui); text-decoration: none; }
.bar__nav a[aria-current] { text-decoration: underline; }
.arrow { width: 24px; height: 24px; display: inline-block; vertical-align: middle; flex-shrink: 0; transition: transform .2s var(--ease-out); }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 44px; font-size: var(--text-ui); font-weight: 500; line-height: 1.4; text-decoration: none; color: var(--link); border-bottom: 1px solid currentColor; padding-block: var(--space-2); }
.bar__contact { min-width: 104px; border-color: var(--orange); }
.text-link { max-width: 100%; }
.bar__nav .bar__contact { display: inline-flex; margin-left: var(--space-4); color: var(--link); }

/* Hero: an intentional display-size exception to the reading scale. */
.gallery-hero { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: var(--space-8); align-items: end; padding-block: var(--space-2) var(--space-16); }
.gallery-hero__heading { position: relative; width: max-content; }
.gallery-hero__title { color: var(--cobalt); font: 400 var(--text-hero)/1.02 var(--serif); letter-spacing: -.05em; }
.hero-line { display: block; white-space: nowrap; }
.hero-line em { color: var(--orange); display: inline-block; font-weight: 400; }
.gallery-hero__aside { font-size: var(--text-label); line-height: 1.5; }
.gallery-hero__aside .text-link { margin-top: var(--space-6); border-color: var(--orange); }
/* Anchor the original drawing by its arrow tip (21.75%, 84.4%), not its canvas. */
.note--both { position: absolute; width: 195px; max-width: none; height: auto; left: calc(100% + 8px); top: 50%; transform: translate(-21.75%, -84.4%); pointer-events: none; }
.hero-note-arrow { display: none; }

/* Work gallery */
.gallery__eyebrow { border-top: 1px solid var(--ink); display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); padding: var(--space-6) 0 var(--space-8); }
.gallery__eyebrow h2 { font: 500 var(--text-label)/1.4 var(--sans); letter-spacing: 0; }
.gallery__eyebrow>span { font-size: var(--text-ui); color: var(--muted); }
.project { border-bottom: 1px solid var(--line); position: relative; }
.project__summary { list-style: none; display: grid; grid-template-columns: 32px 1.5fr 1.2fr 1fr 24px; align-items: center; gap: var(--space-4); padding-block: var(--space-6); }
.project__summary::-webkit-details-marker { display: none; }
.project__toggle { display: block; width: 24px; height: 24px; grid-column: -2; grid-row: 1; }
.project__toggle svg { display: block; width: 100%; height: 100%; }
.project[open] .project__toggle-vertical { display: none; }
.project__number { font-size: var(--text-meta); line-height: 1.5; font-variant-numeric: tabular-nums; color: var(--cobalt); align-self: start; padding-top: var(--space-2); }
.project__title { font-size: var(--text-subtitle); transition: color .2s ease; }
.project__tags,.facts dt { font-size: var(--text-meta); line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.project__short { font-size: var(--text-ui); max-width: 26ch; color: var(--muted); }
.venture { display: block; margin-top: var(--space-2); font-size: var(--text-meta); letter-spacing: 0; text-transform: none; }
.project__content { position: relative; }
.project[open] { padding-bottom: var(--space-8); min-height: calc(min(var(--content-max), 100vw - var(--gutter)*2)*.62*.5625 + var(--space-16)); }
.project[open] .project__summary { width: 37%; grid-template-columns: 32px minmax(0,1fr) 24px; gap: var(--space-4); padding: 0 0 var(--space-6); }
.project[open] .project__toggle { grid-column: 3; grid-row: 1; align-self: start; margin-top: var(--space-3); }
.project[open] .project__title { font-size: var(--text-project); max-width: 360px; }
.project[open] .project__tags { grid-column: 2; }
.project[open] .project__number { padding-top: var(--space-3); }
.project[open] .project__short,.project[open] .project__arrow { display: none; }
.project[open] .project__content { position: static; }
.project__copy { padding-left: var(--space-12); width: 36%; font-size: var(--text-body); line-height: var(--leading-body); }
.project__copy p { max-width: 35ch; }
.project__copy .text-link { margin-top: var(--space-6); }
.project__visual { position: absolute; left: 38%; width: 62%; top: 0; overflow: hidden; border: 1px solid var(--line); background: var(--band); }
.project__visual>a { display: block; }
.project__visual>img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .4s var(--ease-out); }
.gallery__end { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); font-size: var(--text-ui); padding-block: var(--space-6); color: var(--muted); }
.gallery__end a { display: inline-flex; align-items: center; gap: var(--space-4); min-height: 44px; font-weight: 500; color: var(--link); text-decoration: none; }

/* Sections share one vertical rhythm and column gap. */
.editorial-section,.who,.where,.nots,.prices,.case__section,.svc>.services {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--column-gap); border-top: 1px solid var(--line); padding-block: var(--section-space);
}
.services.editorial-section { margin-top: var(--space-12); }
.services.editorial-section,.where,.svc>.services { background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
.services__list { display: grid; gap: var(--space-8); list-style: none; padding: 0; }
.services__list h3,.route__name { font-size: var(--text-lead); font-weight: 500; line-height: 1.4; color: var(--blue); }
.services__list h3 { margin-bottom: var(--space-2); }
.services__list p { font-size: var(--text-body); max-width: var(--measure); }
.services__list+.text-link { margin-top: var(--space-8); }
.services__choices { margin-top: var(--space-6); padding-left: var(--space-6); border-left: 1px solid var(--blue); display: grid; gap: var(--space-6); }
.services__choices h4 { margin-bottom: var(--space-2); font-size: var(--text-body); font-weight: 500; }
.services__choices p { font-size: var(--text-body); }
.studio__text { margin-bottom: var(--space-6); }
.studio__people { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-6); margin-bottom: var(--space-6); }
.studio__people figure { margin: 0; min-width: 0; }
.studio__people img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: center 40%; }
.studio__people figcaption { margin-top: var(--space-3); font-size: var(--text-ui); color: var(--blue); }
.project__feedback { margin-top: var(--space-6); }
.project__feedback .client-testimonial { padding-left: var(--space-4); }
.project__feedback .client-testimonial blockquote { font-size: var(--text-body); }
.project__feedback .client-testimonial figcaption { margin-top: var(--space-3); }
.client-testimonial { min-width: 0; margin: 0; padding-left: var(--space-6); border-left: 2px solid var(--cobalt); }
.client-testimonial blockquote { margin: 0; max-width: var(--measure); font-size: var(--text-lead); line-height: var(--leading-body); }
.client-testimonial figcaption { margin-top: var(--space-4); font-size: var(--text-ui); line-height: var(--leading-body); color: var(--blue); }
.client-testimonial figcaption strong { font-weight: 500; color: var(--ink); }
.client-proof .text-link { margin-top: var(--space-6); }
.gallery-hero__pricing { display: flex; align-items: center; width: fit-content; min-height: 44px; margin-top: var(--space-2); color: var(--link); font-size: var(--text-ui); }

.route { border-top: 1px solid var(--line); padding-block: var(--section-space); }
.route__list { display: grid; grid-template-columns: repeat(var(--route-columns,4),minmax(0,1fr)); gap: var(--space-8); list-style: none; padding: var(--space-12) 0 0; }
.route__stop { position: relative; }
.route__illustration { display: block; width: 128px; height: 112px; color: var(--cobalt); margin-bottom: var(--space-6); overflow: visible; }
.route__detail { opacity: .65; }
.route__spark { color: var(--orange); }
.route__connector { position: absolute; pointer-events: none; stroke: var(--blue-light); stroke-width: 1.3; stroke-linecap: round; }
.route__connector--across { left: 124px; top: 36px; width: calc(100% - 124px + var(--space-8)); height: 40px; }
.route__connector--down { display: none; }
.route.is-drawing .route__draw { stroke-dasharray: 1; animation: route-draw .85s var(--ease-out) both; animation-delay: var(--route-delay,0s); }
.route.is-drawing .route__connector .route__draw { animation-delay: calc(var(--route-delay,0s) + .35s); }
.route.is-drawing .route__spark { animation-delay: calc(var(--route-delay,0s) + .55s); }
@keyframes route-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* After the whole route draws, each drawing moves once in reading order; gallery.js replays it on hover. Every move ends on the static drawing; forwards keeps the finished moves replayable. */
.route__stop { --route-wake: calc(2.3s + var(--route-delay,0s) * 2 / 3); }
.route__move { transform-box: fill-box; transform-origin: center; }
.route__bubble { transform-box: view-box; }
.route__bubble--ask { transform-origin: 28px 79px; }
.route__bubble--reply { transform-origin: 99px 97px; }
.route.is-drawing .route__bubble { animation: route-speak .55s var(--ease-out) var(--route-wake) forwards; }
.route.is-drawing .route__bubble--reply { animation-delay: calc(var(--route-wake) + .4s); }
.route.is-drawing .route__tick { animation: route-draw .85s var(--ease-out) var(--route-delay,0s) both, route-retick .45s var(--ease-out) var(--route-wake) forwards; }
.route.is-drawing .route__stamp { animation: route-stamp .5s var(--ease-out) calc(var(--route-wake) + .3s) forwards; }
.route.is-drawing .route__twinkle { animation: route-twinkle .9s ease-in-out var(--route-wake) forwards; }
.route.is-drawing .route__rays { animation: route-flicker .9s linear var(--route-wake) forwards; }
.route.is-drawing .route__turn { animation: route-turn 1.3s cubic-bezier(.65,0,.35,1) var(--route-wake) forwards; }
@keyframes route-speak { 0%,100% { transform: none; } 40% { transform: scale(1.08) rotate(-2deg); } }
@keyframes route-retick { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes route-stamp { 0%,100% { transform: none; } 40% { transform: scale(1.2) rotate(-6deg); } 70% { transform: scale(.96); } }
@keyframes route-twinkle { 0%,100% { transform: none; } 25% { transform: scale(1.25) rotate(15deg); } 50% { transform: scale(.85) rotate(-5deg); } 75% { transform: scale(1.1); } }
@keyframes route-flicker { 0%,35%,75%,100% { opacity: 1; } 15%,55% { opacity: 0; } }
@keyframes route-turn { from { transform: rotate(0); } to { transform: rotate(1turn); } }
.route__name { margin-bottom: var(--space-3); }
.route__n { display: block; color: var(--blue); font-size: var(--text-meta); margin-bottom: var(--space-4); }
.route__optional { display: inline-block; margin-left: var(--space-3); font-weight: 400; }
.route__line-text { font-size: var(--text-body); max-width: 32ch; }
.route__link { margin-top: var(--space-4); max-width: 100%; }

/* A secondary, bounded offer before the project inquiry section. */
.website-review { border-top: 1px solid var(--line); }
.website-review .section-title { max-width: 15ch; }
.website-review__scope { margin-top: var(--space-6); max-width: var(--measure); color: var(--muted); }
.website-review__details { margin-top: var(--space-6); }
.website-review__details>summary { display: flex; align-items: center; gap: var(--space-4); width: fit-content; min-height: 44px; padding-block: var(--space-2); color: var(--link); border-bottom: 1px solid currentColor; list-style: none; }
.website-review__details>summary::-webkit-details-marker { display: none; }
.website-review__details>summary .arrow { flex-shrink: 0; }
.website-review__details[open]>summary .arrow { transform: rotate(90deg); }
.website-review__form { margin-top: var(--space-8); }
.website-review__note { margin-top: var(--space-4); font-size: var(--text-ui); color: var(--muted); }

/* Dark contact theme overrides semantic colors, not individual font rules. */
.contact {
  --link: var(--blue-light); --muted: var(--blue-light); --field-line: var(--blue-light); --focus: var(--orange);
  background: var(--ink); color: var(--paper); border-top: 1px solid var(--ink);
  box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax);
  padding-block: var(--section-space); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: auto 1fr; gap: var(--space-6) var(--column-gap);
}
.contact__title,.contact__text { align-self: start; }
.contact__text { grid-column: 1; max-width: 40ch; }
.contact__text a { color: var(--link); }
.ask { grid-column: 2; grid-row: 1/span 2; }
.ask__title { font-size: var(--text-subtitle); margin-bottom: var(--space-8); }
.ask__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-6); }
.ask__next { max-width: 52ch; margin-bottom: var(--space-6); font-size: var(--text-body); line-height: var(--leading-body); }
.ask__field--wide,.ask__kinds,.ask__send-row { grid-column: 1/-1; }
.ask__label { display: block; font-size: var(--text-ui); line-height: 1.5; margin-bottom: var(--space-2); }
.ask__opt { color: var(--muted); margin-left: var(--space-2); font-size: var(--text-meta); }
.ask__help { display: block; max-width: var(--measure); margin-bottom: var(--space-2); color: var(--muted); font-size: var(--text-ui); line-height: var(--leading-body); }
.ask__privacy { display: block; max-width: var(--measure); margin-bottom: var(--space-4); color: var(--muted); font-size: var(--text-ui); line-height: var(--leading-body); }
.ask__privacy a { color: var(--link); text-underline-offset: .2em; }
.ask__input { background: transparent; border: 0; border-bottom: 1px solid var(--field-line); width: 100%; min-height: 44px; padding: var(--space-2) 0; border-radius: 0; }
.ask__input::placeholder { color: var(--muted); opacity: 1; }
.ask__area { resize: vertical; min-height: 128px; }
.ask__kinds { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); }
.ask__kind { min-height: 44px; padding-block: var(--space-2); font-size: var(--text-ui); display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.ask__kind input { accent-color: var(--orange); }
.ask__send { min-height: 48px; border: 1px solid var(--orange-action); background: var(--orange-action); color: var(--ink); font-size: var(--text-body); font-weight: 500; padding: var(--space-3) var(--space-6); border-radius: 0; transition: background .2s ease,transform .16s var(--ease-out); }
.ask__send:active { transform: scale(.98); }
.ask__send:disabled { opacity: .6; cursor: wait; }
.ask__status { padding: var(--space-4); border: 1px solid var(--orange); margin-bottom: var(--space-6); }

/* Services earns its own page with scope, examples and starting guidance. */
.svc__pricing { max-width: 70ch; margin-top: var(--space-8); padding-left: var(--space-6); border-left: 2px solid var(--cobalt); }
.svc__price { font-size: var(--text-lead); font-weight: 500; }
.svc__pricing p+p { margin-top: var(--space-2); color: var(--muted); }
.svc__pricing .text-link { margin-top: var(--space-3); }
.svc__jump { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-8); }
.svc__jump a { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); font-size: var(--text-ui); }
.service-detail h2 { max-width: 15ch; }
.service-detail__body { min-width: 0; }
.service-detail__label,.service-detail__name { font: 500 var(--text-lead)/1.4 var(--sans); color: var(--blue); }
.service-detail__label { margin-top: var(--space-8); margin-bottom: var(--space-4); }
.service-detail__list { padding-left: var(--space-6); margin-block: var(--space-6); }
.service-detail__list li+li { margin-top: var(--space-3); }
.service-detail__list li::marker { color: var(--cobalt); }
.service-detail__note { color: var(--muted); }
.service-detail__body>.text-link { margin-top: var(--space-6); }
.service-proof { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: var(--space-6); border-top: 1px solid var(--line); padding-top: var(--space-6); margin-top: var(--space-8); }
.service-proof>img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; object-position: top; border: 1px solid var(--line); }
.service-proof p { font-size: var(--text-ui); }
.service-proof .text-link { margin-top: var(--space-2); }
.service-detail--band { background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
.service-detail__intro { max-width: 38ch; margin-top: var(--space-6); }
.service-detail__options { display: grid; gap: var(--space-8); }
.service-detail__options p { margin-top: var(--space-4); }
@media (max-width: 760px) { .service-proof { grid-template-columns: 1fr; } .service-proof>img { max-width: 240px; } }

/* Footer and interior pages */
.footer { border-top: 1px solid var(--line); padding-block: var(--space-8); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-6) var(--column-gap); }
.footer p { font-size: var(--text-ui); max-width: 44ch; }
.footer__brand { display: grid; justify-items: start; align-content: start; gap: var(--space-4); }
.footer__links { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); font-size: var(--text-ui); color: var(--link); }
.footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__email { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-ui); color: var(--link); }
.footer__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); border-top: 1px solid var(--line); padding-top: var(--space-4); font-size: var(--text-meta); color: var(--muted); }
.footer small { font-size: inherit; }
.footer__privacy { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); font-size: var(--text-ui); }
.privacy-page { max-width: 900px; }
.privacy-page__body { max-width: var(--measure); margin-top: var(--space-8); }
.privacy-page__body h2 { margin: var(--space-12) 0 var(--space-4); font: 400 var(--text-subtitle)/var(--leading-heading) var(--serif); letter-spacing: var(--tracking-heading); }
.privacy-page__body p+p,.privacy-page__body ul { margin-top: var(--space-4); }
.privacy-page__body ul { padding-left: var(--space-6); }
.privacy-page__body li+li { margin-top: var(--space-2); }
.privacy-review-note { padding: var(--space-6); background: var(--band); border-left: 2px solid var(--cobalt); }
.svc__head,.studio-page__head,.archive__head,.plain { padding-block: var(--section-space); }
.svc__deck,.studio-page__deck,.case__deck { margin-top: var(--space-8); max-width: var(--measure); }
.archive__intro { margin-top: var(--space-8); }
.archive__intro p+p { margin-top: var(--space-4); }
.archive__intro a { display: inline-flex; align-items: center; min-height: 44px; }
.who__body p+p,.case__body p+p { margin-top: var(--space-6); }
.nots__list { padding-left: var(--space-6); }
.nots__list li+li { margin-top: var(--space-4); }
.rows { list-style: none; padding: 0 0 var(--section-space); }
.row { border-top: 1px solid var(--line); }
.row__link { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) 150px; gap: var(--space-8); align-items: center; padding-block: var(--space-8); text-decoration: none; }
.row__name,.next__name { font-size: var(--text-section); }
.row__line,.row__where { font-size: var(--text-ui); }
.row__where { color: var(--muted); }
.case__head { padding-top: var(--space-8); }
.case__hero { max-width: 1100px; margin: 0 auto var(--space-12); border: 1px solid var(--line); }
.case__hero img { width: 100%; }
.case-summary { margin-top: var(--space-8); padding: var(--space-8); background: var(--band); }
.case-summary__title { font: 400 var(--text-subtitle)/var(--leading-heading) var(--serif); letter-spacing: var(--tracking-heading); }
.case-summary dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-8); margin-top: var(--space-6); }
.case-summary dt { margin-bottom: var(--space-2); font-weight: 500; color: var(--blue); }
.case-summary dd { margin: 0; font-size: var(--text-body); }
@media (max-width: 760px) { .case-summary { padding: var(--space-6); } .case-summary dl { grid-template-columns: 1fr; gap: var(--space-6); } }
.facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-8); padding-block: var(--space-8); margin: var(--space-8) 0 0; border-top: 1px solid var(--line); }
.facts dt { margin-bottom: var(--space-2); }
.facts dd { font-size: var(--text-body); margin: 0; overflow-wrap: anywhere; }
.case__body { font-size: var(--text-label); line-height: var(--leading-body); max-width: var(--measure); }
.case__body h3 { font: 400 var(--text-subtitle)/var(--leading-heading) var(--serif); letter-spacing: var(--tracking-heading); margin: var(--space-8) 0 var(--space-4); }
.case__body ul { padding-left: var(--space-6); }
.case__body table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.case__body th,.case__body td { overflow-wrap: anywhere; text-align: left; vertical-align: top; padding: var(--space-2); border-bottom: 1px solid var(--line); }
/* Case-study evidence: real screens with readable explanatory captions. */
.case-evidence { grid-column: 1/-1; min-width: 0; margin: 0; }
.case-evidence__screens { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: var(--column-gap); background: var(--band); padding: var(--space-12); }
.case-evidence__step { width: 100%; max-width: 360px; margin-inline: auto; }
.case-evidence__step h3 { color: var(--blue); font: 500 var(--text-ui)/1.4 var(--sans); margin-bottom: var(--space-4); }
.case-evidence__step p { font-size: var(--text-body); margin-top: var(--space-6); }
.case-evidence__crop { overflow: hidden; border: 1px solid var(--line); background: var(--band); }
.case-evidence__crop img { display: block; width: 100%; height: auto; }
.case-evidence__crop--schedule,.case-evidence__crop--booking { aspect-ratio: auto; }
.case-evidence__crop--tickets { aspect-ratio: auto; }
/* Fresh phone captures fill the frame without magnifying a narrow source. */
.case-evidence__crop--tickets { max-width: 360px; }
/* Show the complete current calendar at its native proportions. */
.case-evidence__crop--calendar { width: min(100%,720px); aspect-ratio: auto; margin-inline: auto; }
/* Keep the owner calendar and its caption together at a readable scale. */
.case-evidence--calendar { width: min(100%,1200px); justify-self: center; }
.case-evidence--calendar .case-evidence__crop--calendar { width: 100%; }
@media(min-width:761px) {
  .case__section:has(> .case-evidence--calendar) { row-gap: min(var(--column-gap),var(--space-12)); }
}
.case-evidence__enlarge { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); }
.case-evidence figcaption,.case-detail-shot figcaption { margin-top: var(--space-4); color: var(--muted); font-size: var(--text-ui); line-height: var(--leading-body); }
.case-detail-shot { max-width: 380px; margin: var(--space-8) 0 0; }
.case-detail-shot--wide { max-width: 520px; }
.case-evidence__crop--interests { aspect-ratio: auto; }
.case-evidence__crop--intake { position: relative; aspect-ratio: 650/880; }
.case-evidence__crop--intake img { position: absolute; width: 307.692%; max-width: none; left: -175.385%; top: -22.727%; }
@media(max-width:760px) {
  .case-evidence__screens { grid-template-columns: 1fr; padding: var(--space-6); gap: var(--space-8); }
  .case-evidence__crop--tickets { max-width: 360px; }
}
.case__phone { max-width: 280px; margin: var(--space-8) auto; }
.case__invite { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); border-top: 1px solid var(--line); padding-block: var(--section-space); }
.case__invite .text-link { flex-shrink: 0; }
.case__next { border-top: 1px solid var(--line); padding-block: var(--section-space); }
.next { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--column-gap); align-items: center; text-decoration: none; margin-top: var(--space-8); }
.next__plane { display: block; }
.next__plane img { width: 100%; height: auto; }
.plain__body { max-width: var(--measure); margin-top: var(--space-8); }

/* Responsive: type roles stay consistent; only layout and display exceptions change. */
@media(min-width:1280px) {
  .gallery-hero { padding-bottom: var(--space-24); }
  .gallery-hero__aside { margin-bottom: calc(-1 * var(--space-12)); }
}
@media(max-width:1279px) {
  .gallery-hero { padding-top: var(--space-3); }
  .gallery-hero__heading { padding-top: 84px; }
  .note--both { width: 140px; left: auto; right: 0; top: 0; transform: none; clip-path: polygon(52% 0, 100% 0, 100% 53%, 57% 53%, 57% 43%, 52% 43%); }
  /* Keep the handwriting above narrow headlines; curve around the text to the
     same midpoint. The 42px offset is half the heading's 84px top reservation. */
  .hero-note-arrow { display: block; position: absolute; width: 140px; height: calc(50% - 3px); right: -20px; top: 45px; overflow: visible; pointer-events: none; fill: none; stroke: var(--ink); stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; }
  .hero-note-arrow path { vector-effect: non-scaling-stroke; }
}
@media(min-width:761px) and (max-width:1279px) {
  :root { --text-hero: 8.5vw; }
}
@media(min-width:761px) and (max-width:1100px) {
  .gallery-hero { grid-template-columns: minmax(0,1fr) 220px; gap: var(--space-6); }
  .gallery-hero__aside { font-size: var(--text-body); }
  .project__short { display: none; }
  .project__summary { grid-template-columns: 32px minmax(0,1.5fr) minmax(0,1fr) 24px; }
  .project[open] .project__title { font-size: clamp(2.25rem,4.8vw,3.25rem); }
}
@media(max-width:760px) {
  :root { --text-hero: clamp(2.125rem,11.8vw,5.5rem); --text-project: 2.25rem; }
  .bar__inner { gap: var(--space-4); flex-wrap: wrap; }
  .wordmark { width: 144px; }
  .bar { padding-block: var(--space-4); }
  .bar__inner { row-gap: var(--space-2); }
  .bar__nav { width: 100%; gap: var(--space-3); justify-content: space-between; }
  .bar__nav .bar__contact { margin-left: auto; }
  .gallery-hero { grid-template-columns: minmax(0,1fr); gap: var(--space-8); padding-bottom: var(--space-12); }
  .gallery-hero__heading { max-width: 100%; }
  .hero-line { white-space: normal; }
  .hero-line em { max-width: 100%; }
  .gallery-hero__aside { font-size: var(--text-body); max-width: 40ch; }
  .gallery-hero__aside .text-link { margin-top: var(--space-4); }
  .gallery__eyebrow { padding-block: var(--space-6); }
  .gallery__eyebrow>span { display: none; }
  .project__summary { grid-template-columns: 24px minmax(0,1fr) 24px; gap: var(--space-2) var(--space-4); }
  .project__title { font-size: var(--text-subtitle); }
  .project__tags { grid-column: 2; grid-row: 2; }
  .project__toggle { grid-column: 3; grid-row: 1/span 2; }
  .project__short { display: none; }
  .project__number { padding-top: var(--space-2); }
  .project[open] { min-height: 0; padding-bottom: var(--space-8); }
  .project[open] .project__summary { width: 100%; grid-template-columns: 24px minmax(0,1fr) 24px; gap: var(--space-3) var(--space-4); padding-bottom: var(--space-6); }
  .project[open] .project__title { max-width: none; }
  .project[open] .project__number { padding-top: var(--space-2); }
  .project__copy { width: 100%; padding-left: 40px; }
  .project__copy .text-link { margin-top: var(--space-4); }
  .project__visual { position: relative; left: auto; width: 100%; margin-top: var(--space-8); }
  .gallery__end { flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
  .editorial-section,.who,.where,.nots,.prices,.case__section,.svc>.services { grid-template-columns: minmax(0,1fr); gap: var(--space-8); }
  .services.editorial-section { margin-top: var(--space-8); }
  .contact { grid-template-columns: minmax(0,1fr); gap: var(--space-6); }
  .ask { grid-column: 1; grid-row: auto; margin-top: var(--space-8); }
  .ask__grid { grid-template-columns: minmax(0,1fr); }
  .footer { grid-template-columns: minmax(0,1fr); }
  .footer__links { align-items: flex-start; gap: 0; }
  .row__link { grid-template-columns: minmax(0,1fr); gap: var(--space-3); }
  .facts { grid-template-columns: repeat(auto-fit,minmax(min(100%,7rem),1fr)); gap: var(--space-6); }
  .case__head { padding-top: var(--space-6); }
  .case__hero { margin-bottom: var(--space-8); }
  .next { grid-template-columns: minmax(0,1fr); gap: var(--space-6); }
  .case__invite { align-items: flex-start; flex-direction: column; gap: var(--space-6); }
}
@media(max-width:960px) {
  .route__list { grid-template-columns: minmax(0,1fr); gap: var(--space-8); padding-top: var(--space-8); }
  .route__stop { display: grid; grid-template-columns: 72px minmax(0,1fr); column-gap: var(--space-6); }
  .route__illustration { grid-column: 1; grid-row: 1 / 3; width: 72px; height: 72px; margin: 0; }
  .route__name,.route__line-text { grid-column: 2; }
  .route__link { grid-column: 2; justify-self: start; }
  .route__connector--across { display: none; }
  .route__connector--down { display: block; left: 24px; top: 80px; width: 24px; height: calc(100% - 80px + var(--space-8)); }
  .route__n { margin-bottom: var(--space-2); }
}
@media(hover:hover) and (pointer:fine) {
  .bar__nav a:hover { color: var(--cobalt); text-decoration: underline; }
  .text-link:hover,.gallery__end a:hover,.footer nav a:hover { color: var(--cobalt); }
  .text-link:hover .arrow { transform: translateX(4px); }
  .project__summary:hover .project__title,.row__link:hover .row__name,.next:hover .next__name { color: var(--cobalt); }
  .project__visual:hover>img { transform: scale(1.025); }
  .ask__send:hover { background: var(--orange-hover); border-color: var(--orange-hover); }
}
/* Restored scrolling device recordings, shared by gallery and cases. */
.devices.case__hero {
  grid-column: 1 / -1;
  aspect-ratio: auto;
}
.devices {
  --laptop: 72cqw;
  --phone: 16.4cqw;
  --gap: 3cqw;
  container-type: inline-size;
  display: flex;
  justify-content: center;
}
.devices__pair {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--gap);
}
.devices__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The laptop. The base spans the device and the lid sits inside it. */
.laptop {
  width: var(--laptop);
  container-type: inline-size;
}
.laptop__lid {
  position: relative;
  margin-inline: 5.2cqw;
  padding: 1.9cqw 1.9cqw 2.3cqw;
  border-radius: 2.15cqw 2.15cqw 0 0;
  background: #0A0E13;
  box-shadow: inset 0 0 0 .125cqw rgba(237, 243, 255, .12), 0 0 0 1px var(--line);
}
/* The camera. */
.laptop__lid::before {
  content: "";
  position: absolute;
  top: .72cqw;
  left: 50%;
  width: .45cqw;
  height: .45cqw;
  border-radius: 50%;
  background: #1E252D;
  transform: translateX(-50%);
}
.laptop__screen {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: .27cqw;
  background: var(--paper);
}
/* The base, in cool aluminum, with the notch the lid opens by. */
.laptop__base {
  position: relative;
  height: 1.7cqw;
  border-radius: .27cqw .27cqw 2cqw 2cqw / .27cqw .27cqw 1.45cqw 1.45cqw;
  background: linear-gradient(to bottom, #EDF1F8 0%, #CCD5E4 38%, #9BA9BF 100%);
  box-shadow: 0 1.45cqw 2.5cqw -.9cqw rgba(0, 0, 0, .55);
}
.laptop__base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 12.5cqw;
  height: .63cqw;
  border-radius: 0 0 .9cqw .9cqw / 0 0 .63cqw .63cqw;
  background: linear-gradient(to bottom, #A5B1C5, #C5CFDF);
  transform: translateX(-50%);
}

/* The phone: a thin dark body with round corners, in the lid's colors. */
.phone {
  width: var(--phone);
  container-type: inline-size;
}
.phone__body {
  padding: 3.4cqw;
  border-radius: 15cqw;
  background: #0A0E13;
  box-shadow: inset 0 0 0 .6cqw rgba(237, 243, 255, .12), 0 0 0 1px var(--line), 0 5cqw 10cqw -4cqw rgba(0, 0, 0, .55);
}
.phone__screen {
  aspect-ratio: 393 / 852;
  overflow: hidden;
  border-radius: 11.8cqw;
  background: var(--paper);
}

/* A text button, 44px tall to a finger, under the pair's right end in the
   space above the title. Hidden until case.js runs it. */
.devices__toggle {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: var(--text-ui);
  line-height: 1.4;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  cursor: pointer;
}
.devices__toggle:hover {
  color: var(--cobalt);
  text-decoration-thickness: 2px;
}
.devices__toggle[hidden] { display: none; }


.project__visual--video{background:transparent;border:0;padding:var(--space-6) 0 var(--space-16);overflow:visible}.project__visual--video:hover{box-shadow:none}.devices.case__hero{border:0;padding:var(--space-8) 0 var(--space-16)}.project__visual--video .devices{width:100%}.devices__toggle{min-width:64px}.project__visual--video .devices__pair{width:100%;justify-content:center}.devices__pair{max-width:100%}@media(max-width:760px){.project__visual--video{padding:var(--space-1) 0 var(--space-16)}.devices{--laptop:75.5cqw;--phone:21.5cqw}.devices.case__hero{padding:var(--space-4) 0 var(--space-16)}}


/* Annotation geometry is intentionally tied to the device, not the spacing scale. */
.laptop { position: relative; }
.project__visual .note--look {
  position: absolute; width: clamp(90px,9.4vw,135px); max-width: none; height: auto;
  right: calc(100% - 4cqw); top: 65%; margin: 0; transform: translateY(-76%); pointer-events: none;
}
@media(max-width:1100px) { .project__visual .note--look { display: none; } }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
  .text-link:hover .arrow,.project__visual:hover>img,.ask__send:active { transform: none; }
}