/* Anza Studios. Every page opens on a near-black header with contour lines
   drifting across it; the rest of the page is a paper sheet that slides over it. */

/* ─────────────── tokens ─────────────── */
:root {
  --ink: #120e0b;
  --ink-2: #1c1612;
  --ink-3: #2b221c;
  --paper: #f5f0e8;
  --paper-2: #ebe4d8;
  --bone: #d9cebc;
  --sun: #f96a26;
  --sun-deep: #f96a26;
  --sun-soft: #f96a26;
  --live: #35c26a;

  --muted: rgba(18, 14, 11, 0.62);
  --line: rgba(18, 14, 11, 0.14);
  --muted-inv: rgba(245, 240, 232, 0.66);
  --line-inv: rgba(245, 240, 232, 0.14);

  --f-display: 'Switzer', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --accent: var(--sun-deep);
  --f-sans: 'Switzer', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-label: 'Switzer', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad: clamp(20px, 4vw, 64px);
  --inset: clamp(8px, 1vw, 16px);
  --r: clamp(20px, 2.2vw, 32px);
  --r-xl: clamp(24px, 3vw, 44px);
  --nav-h: 76px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ─────────────── base ─────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
[hidden] { display: none !important; }
.no-js [data-clock] { display: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
::selection { background: var(--sun); color: var(--ink); }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 4px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; top: 8px; left: 8px; z-index: 200; padding: 10px 16px; background: var(--paper); color: var(--ink); border-radius: 8px; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* Shillings are the page's own text. For a visitor outside East Africa
   (<html data-currency="usd">) the dollar figure is drawn from data-usd instead. */
html[data-currency='usd'] .cur[data-usd] [data-cur='kes'] { display: none; }
html[data-currency='usd'] .cur[data-usd]::after { content: attr(data-usd); }
html[data-currency='usd'] [data-ke] { display: none; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.dot--live { background: var(--live); box-shadow: 0 0 0 0 rgba(53, 194, 106, 0.5); animation: pulse 2.6s infinite; }
.case .dot--live, .idx .dot--live { animation: none; }
.dot--soon { background: #f0b03c; }
.dot--concept { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; opacity: 0.7; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(53, 194, 106, 0); } 100% { box-shadow: 0 0 0 0 rgba(53, 194, 106, 0); } }

.mark { width: 34px; height: auto; flex: none; }

.label {
  display: flex; gap: 10px; align-items: baseline;
  font-family: var(--f-label); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.label span { color: var(--sun-deep); }
.label--ink { color: rgba(18, 14, 11, 0.7); }
.label--ink span { color: var(--ink); }

.link {
  position: relative; display: inline-block; padding: 6px 0;
  font-weight: 500; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.5s var(--ease);
}
.link:hover { background-size: 0 1px; background-position: 100% 100%; }
.link--ink { color: var(--ink); }

/* One phrase per headline takes the sun's colour. The shade follows the surface. */
em { font-style: normal; color: var(--accent); }
.hero, .case { --accent: var(--sun-soft); }
.services, .stack, .care, .foot { --accent: var(--sun); }
.start { --accent: var(--paper); }

/* ─────────────── buttons ─────────────── */
.btn {
  --bg: var(--ink); --fg: var(--paper); --ic-bg: var(--sun); --ic-fg: var(--ink);
  display: inline-flex; align-items: center; gap: 14px;
  height: 58px; padding: 0 9px 0 26px;
  border-radius: 999px; background: var(--bg); color: var(--fg);
  font-weight: 600; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; text-decoration: none;
  transition: transform 0.6s var(--ease), background-color 0.3s, color 0.3s, border-color 0.3s;
  will-change: transform;
}
.btn__icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ic-bg); color: var(--ic-fg);
  transition: transform 0.6s var(--ease);
}
.btn__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover .btn__icon { transform: rotate(-45deg) scale(1.06); }
.btn:active { transform: scale(0.98); }
.btn--paper { --bg: var(--paper); --fg: var(--ink); }
.btn--sun { --bg: var(--sun); --fg: var(--ink); --ic-bg: var(--ink); --ic-fg: var(--paper); }
.btn--sm { height: 44px; padding: 0 5px 0 18px; gap: 10px; font-size: 14px; }
.btn--sm .btn__icon { width: 34px; height: 34px; }
.btn--sm .btn__icon svg { width: 15px; height: 15px; }
.btn--wide { width: 100%; justify-content: space-between; }

/* ─────────────── nav ─────────────── */
.nav {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--nav-h); padding: 0 var(--pad);
  color: var(--paper);
  transition: height 0.45s var(--ease), background-color 0.35s, box-shadow 0.35s, opacity 0.3s;
}
.nav__brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; line-height: 1; }
.nav__brand .mark { width: 34px; color: var(--paper); }
/* the wordmark as on the poster: Anton, a square orange stop */
.nav__word { display: inline-flex; align-items: baseline; font-family: 'Anton', var(--f-display); font-weight: 400; font-size: 27px; letter-spacing: 0.01em; }
.nav__word i { width: 0.2em; height: 0.2em; margin-left: 0.07em; background: #f96a26; }
.nav__links { display: flex; gap: clamp(18px, 2.4vw, 36px); font-family: var(--f-label); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.nav__links a { position: relative; padding: 8px 0; text-decoration: none; opacity: 0.78; transition: opacity 0.25s; }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.45s var(--ease); }
.nav__links a:hover, .nav__links a.is-here, .nav__links a[aria-current='page'] { opacity: 1; }
.nav__links a:hover::after, .nav__links a.is-here::after, .nav__links a[aria-current='page']::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav__right { display: flex; align-items: center; gap: 18px; }
.nav .btn { --bg: rgba(245, 240, 232, 0.08); --fg: var(--paper); --ic-bg: var(--paper); --ic-fg: var(--ink); box-shadow: inset 0 0 0 1px rgba(245, 240, 232, 0.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nav__burger { display: none; position: relative; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(245, 240, 232, 0.28); }
.nav__burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform 0.45s var(--ease), top 0.45s var(--ease); }
.nav__burger span:nth-child(1) { top: 18px; }
.nav__burger span:nth-child(2) { top: 25px; }
.nav__burger[aria-expanded='true'] span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.nav__burger[aria-expanded='true'] span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

/* as soon as you scroll, the nav becomes a solid bar across the full width */
.nav.is-docked {
  height: 64px; background: rgba(18, 14, 11, 0.88);
  box-shadow: inset 0 -1px 0 rgba(245, 240, 232, 0.1), 0 14px 40px -24px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
.nav.is-docked .btn { --bg: var(--sun); --fg: var(--ink); --ic-bg: var(--ink); --ic-fg: var(--paper); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav.is-open { color: var(--paper); }

.menu {
  position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + 24px) var(--pad) calc(28px + env(safe-area-inset-bottom));
  background: var(--ink); color: var(--paper);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 0.7s var(--ease-io), visibility 0s 0.7s;
}
.menu.is-open { clip-path: inset(0); visibility: visible; transition: clip-path 0.7s var(--ease-io); }
.menu__links { display: grid; }
.menu__links a { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-inv); text-decoration: none; font-size: clamp(36px, 10.5vw, 64px); font-family: var(--f-display); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
.menu__links em { font: 500 12px var(--f-label); letter-spacing: 0.06em; color: var(--sun); }
.menu__foot { display: grid; gap: 18px; justify-items: start; font-family: var(--f-label); font-weight: 500; font-size: 13px; }
.menu__foot .btn { font-family: var(--f-sans); }

/* ─────────────── hero ─────────────── */
.hero {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100svh; min-height: 620px;
  color: var(--paper); background: #0d0a08; overflow: clip;
}
/* the sky: contour lines drawn by landing.js, easing off towards the bottom */
.hero__sky { position: absolute; inset: 0; pointer-events: none; }
.hero__topo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(#000, #000 58%, rgba(0, 0, 0, 0.3)); mask-image: linear-gradient(#000, #000 58%, rgba(0, 0, 0, 0.3));
}
/* every header: the poster's wash, a generated still. Black on the left for the
   words, burnt orange coming in from the right. */
.hero__wash { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 50%; }
.hero { --accent: #f96a26; }

.hero--home .desk::before { content: none; }

.hero__content {
  position: relative; z-index: 1; height: 100%;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  padding: calc(var(--nav-h) + clamp(8px, 2.4vh, 34px)) var(--pad) clamp(22px, 3.4vh, 40px);
  will-change: transform, opacity;
}
.hero__kicker {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-label); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(245, 240, 232, 0.86);
}
.hero__kicker span { padding-left: 12px; margin-left: 2px; border-left: 1px solid rgba(245, 240, 232, 0.3); color: rgba(245, 240, 232, 0.62); }
.hero__title { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.045em; }
.hero__horizon {
  grid-row: 4; display: flex; justify-content: flex-end; align-items: flex-end; gap: 16px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(245, 240, 232, 0.17);
  font-family: var(--f-label); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(245, 240, 232, 0.6); font-variant-numeric: tabular-nums;
}
.br-d { display: inline; }
@keyframes tick { to { transform: translateX(-50%); } }

/* home: the pitch on the left, real work on the right, proof along the bottom */
.hero--home { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.hero--home .hero__content {
  height: auto; min-height: 0;
  grid-template: none / minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 72px);
  padding: calc(var(--nav-h) + clamp(0px, 1vh, 14px)) var(--pad) clamp(14px, 2.6vh, 30px);
}
.hero__pitch { display: grid; justify-items: start; min-width: 0; }
.hero--home .hero__title { margin-top: clamp(12px, 2.2vh, 24px); font-size: clamp(32px, min(3.7vw, 6.4vh), 72px); line-height: 1.06; text-wrap: balance; }
.hero__sub { margin-top: clamp(14px, 2.4vh, 26px); max-width: 47ch; font-size: clamp(15px, 1.18vw, 18px); line-height: 1.5; color: rgba(245, 240, 232, 0.88); text-wrap: pretty; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: clamp(18px, 3vh, 32px); }
.ghost {
  display: inline-flex; align-items: center; height: 58px; padding: 0 26px; border-radius: 999px;
  background: rgba(11, 8, 16, 0.2); box-shadow: inset 0 0 0 1px rgba(245, 240, 232, 0.36);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-weight: 600; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; text-decoration: none;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.ghost:hover { background: var(--paper); color: var(--ink); box-shadow: none; }
.hero__checks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: clamp(16px, 2.6vh, 26px); font-size: 14px; color: rgba(245, 240, 232, 0.86); }
.hero__checks li { display: inline-flex; align-items: center; gap: 8px; }
.hero__checks li::before {
  content: ''; flex: none; width: 17px; height: 17px; border-radius: 50%; box-shadow: inset 0 0 0 1.4px var(--sun-soft);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.3l2.1 2.1L9 4' fill='none' stroke='%23ff8a4d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* the desk: every live project as a window. Positions are in cqw, so the
   whole arrangement scales with the stage. landing.js moves the slots round. */
.desk { position: relative; isolation: isolate; justify-self: end; min-width: 0; width: min(100%, max(380px, calc((100svh - var(--nav-h) - 236px) * 1.3))); }
/* the one warm thing in the sky: a soft glow behind the work */
.desk::before {
  content: ''; position: absolute; z-index: -1; inset: -36% -40% -38% -34%; pointer-events: none;
  background: radial-gradient(50% 50% at 54% 50%, rgba(255, 90, 31, 0.3), rgba(255, 90, 31, 0.15) 42%, rgba(255, 90, 31, 0.05) 68%, rgba(255, 90, 31, 0) 88%);
}
.desk__stage { position: relative; container-type: inline-size; aspect-ratio: 100 / 75; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.win {
  --k: 0;
  position: absolute; left: 0; top: 0; z-index: var(--z); display: block; width: 70%;
  border-radius: clamp(7px, 1.9cqw, 14px); overflow: hidden; background: #0d0b0a; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(245, 240, 232, 0.14), 0 3cqw 7cqw -2cqw rgba(0, 0, 0, 0.8);
  opacity: var(--o, 1); transform-origin: 0 0;
  transform: translate3d(calc((var(--x) + var(--px, 0) * var(--k)) * 1cqw + var(--dx, 0px)), calc((var(--y) + var(--py, 0) * var(--k)) * 1cqw), 0) rotate(var(--rot, 0deg)) scale(var(--s));
  transition: transform 0.95s var(--ease), opacity 0.55s;
  will-change: transform; cursor: pointer; -webkit-user-drag: none;
}
.win::after { content: ''; position: absolute; inset: 0; background: #0b0810; opacity: var(--dim, 0); transition: opacity 0.7s; pointer-events: none; }
.win[data-slot='0'] { --x: 28; --y: 22; --s: 1; --z: 3; --k: 0.9; }
.win[data-slot='1'] { --x: 41; --y: 1.5; --s: 0.8; --z: 2; --k: 0.5; --dim: 0.3; }
.win[data-slot='2'] { --x: 1; --y: 8.5; --s: 0.72; --z: 1; --k: 0.3; --dim: 0.46; }
.win[data-slot='out'] { --x: 24; --y: 0; --s: 0.6; --z: 0; --o: 0; --dim: 0.6; pointer-events: none; }
.win[data-slot='1']:hover { --y: 0; --dim: 0.08; }
.win[data-slot='2']:hover { --y: 7; --dim: 0.16; }
.win.is-drag { transition: none; cursor: grabbing; }
.win__bar { display: flex; align-items: center; gap: 1cqw; height: 4.6cqw; padding: 0 1.9cqw; background: #1b1714; }
.win__bar i { flex: none; width: 1.25cqw; height: 1.25cqw; border-radius: 50%; background: rgba(245, 240, 232, 0.24); }
.win__url { margin: 0 auto; padding: 0.45cqw 2cqw; border-radius: 999px; background: rgba(245, 240, 232, 0.08); font: 400 clamp(7.5px, 1.75cqw, 11px) var(--f-label); letter-spacing: 0.03em; color: rgba(245, 240, 232, 0.74); white-space: nowrap; transform: translateX(-2.7cqw); }
.win img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; pointer-events: none; }
.desk__phone {
  position: absolute; left: 0; top: 0; z-index: 4; width: 16.5%; aspect-ratio: 390 / 820; pointer-events: none;
  border-radius: 3cqw; background: #0d0b0a;
  box-shadow: 0 0 0 1px rgba(245, 240, 232, 0.18), 0 3cqw 6cqw -1.5cqw rgba(0, 0, 0, 0.85);
  transform: translate3d(calc((12.5 + var(--px, 0) * 1.5) * 1cqw), calc((38.5 + var(--py, 0) * 1.5) * 1cqw), 0);
  transition: transform 0.95s var(--ease);
}
.desk__phone img { position: absolute; inset: 0.9cqw; width: calc(100% - 1.8cqw); height: calc(100% - 1.8cqw); object-fit: cover; object-position: 50% 0; border-radius: 2.2cqw; opacity: 0; transition: opacity 0.6s; }
.desk__phone img.is-on { opacity: 1; }

/* along the bottom of the hero: the clients, as a slow reel. It pauses under the cursor. */
.proof {
  position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 48px);
  padding: clamp(16px, 2.6vh, 26px) 0 clamp(16px, 2.6vh, 26px) var(--pad);
  border-top: 1px solid rgba(245, 240, 232, 0.14);
  background: rgba(13, 10, 8, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.proof__label { font: 600 clamp(18px, 1.5vw, 22px) var(--f-display); letter-spacing: -0.02em; white-space: nowrap; color: var(--paper); }
.proof__reel { overflow: hidden; overflow: clip; -webkit-mask-image: linear-gradient(90deg, transparent 1%, #000 11%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent 1%, #000 11%, #000 92%, transparent); }
.proof__track { display: flex; width: max-content; animation: tick 54s linear infinite; }
.proof__reel:hover .proof__track, .proof__reel:focus-within .proof__track { animation-play-state: paused; }
.proof__set { display: flex; align-items: center; flex: none; gap: clamp(40px, 5vw, 84px); padding-right: clamp(40px, 5vw, 84px); }
.proof__item { display: inline-flex; align-items: center; min-height: 34px; font-family: var(--f-display); font-weight: 600; font-size: clamp(17px, 1.5vw, 22px); letter-spacing: -0.03em; white-space: nowrap; text-decoration: none; color: rgba(245, 240, 232, 0.76); transition: color 0.25s; }
a.proof__item:hover { color: var(--paper); }
/* any logo file is shown as one flat tone, so a mixed set still reads as a set */
.proof__item img { width: auto; height: clamp(26px, 2.3vw, 36px); max-width: 190px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.76; transition: opacity 0.25s; }
a.proof__item:hover img { opacity: 1; }
.no-js .proof__track { animation: none; width: auto; }
.no-js .proof__set { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 6px; }
.no-js .proof__reel { -webkit-mask-image: none; mask-image: none; }

/* ─────────────── light headers (SKY = 'light' in build.mjs) ─────────────── */
/* The wash is cream instead of black, so everything that sat on it in paper tones turns to ink. */
[data-sky='light'] .hero { --accent: var(--sun-deep); color: var(--ink); background: #f3ede3; }
[data-sky='light'] .hero__kicker { color: rgba(18, 14, 11, 0.86); }
[data-sky='light'] .hero__kicker span { border-left-color: rgba(18, 14, 11, 0.3); color: rgba(18, 14, 11, 0.6); }
[data-sky='light'] .hero__sub, [data-sky='light'] .hero__lede, [data-sky='light'] .hero__checks { color: rgba(18, 14, 11, 0.82); }
[data-sky='light'] .hero__horizon { border-bottom-color: rgba(18, 14, 11, 0.2); }
[data-sky='light'] .hero .btn--paper { --bg: var(--ink); --fg: var(--paper); }
[data-sky='light'] .ghost { background: rgba(245, 240, 232, 0.35); box-shadow: inset 0 0 0 1px rgba(18, 14, 11, 0.4); }
[data-sky='light'] .ghost:hover { background: var(--ink); color: var(--paper); }
[data-sky='light'] .proof { border-top-color: rgba(18, 14, 11, 0.14); background: rgba(245, 240, 232, 0.6); }
[data-sky='light'] .proof__label { color: rgba(18, 14, 11, 0.6); }
[data-sky='light'] .proof__item { color: rgba(18, 14, 11, 0.74); }
[data-sky='light'] a.proof__item:hover { color: var(--ink); }
[data-sky='light'] .proof__item img { filter: brightness(0); }
[data-sky='light'] .nav:not(.is-docked):not(.is-open) { color: var(--ink); }
[data-sky='light'] .nav:not(.is-docked):not(.is-open) .mark { color: var(--ink); }
[data-sky='light'] .nav:not(.is-docked):not(.is-open) .btn { --bg: rgba(18, 14, 11, 0.06); --fg: var(--ink); --ic-bg: var(--ink); --ic-fg: var(--paper); box-shadow: inset 0 0 0 1px rgba(18, 14, 11, 0.3); }
[data-sky='light'] .nav:not(.is-docked):not(.is-open) .nav__burger { box-shadow: inset 0 0 0 1px rgba(18, 14, 11, 0.3); }
[data-sky='light'] .sheet { box-shadow: 0 -18px 50px -30px rgba(18, 14, 11, 0.35); }

/* ─────────────── the daylight sheet ─────────────── */
main { position: relative; z-index: 1; }
.sheet {
  position: relative; z-index: 1;
  background: var(--paper);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding-bottom: var(--inset);
}
.sheet > section { position: relative; }

/* The light sections sit on soft whites generated with Higgsfield from the pale band of the
   hero render: cream drifting into peach and grey. Each section fades to plain paper at its top
   and bottom, so one runs into the next with no line between them. Sections alternate between two renders and
   panels use a third, deeper one (sources: landing/sky/raw/section-whites-*, panel-whites-*). The picture is kept smooth and the film grain is laid over it at true size, so a
   tall section never blows the grain up. --grain is shared with the panels below. */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.14  0 0 0 0 0.1  0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sheet { overflow: clip; }
.sheet > section:not(.services):not(.stack):not(.care):not(.start):not(.base) { background: var(--grain), linear-gradient(var(--paper), rgba(245, 240, 232, 0) min(34vh, 320px), rgba(245, 240, 232, 0) calc(100% - min(34vh, 320px)), var(--paper)), url(media/sky/whites.webp) 50% 0 / cover no-repeat var(--paper); }
.sheet > section:nth-of-type(even):not(.services):not(.stack):not(.care):not(.start):not(.base) { background-image: var(--grain), linear-gradient(var(--paper), rgba(245, 240, 232, 0) min(34vh, 320px), rgba(245, 240, 232, 0) calc(100% - min(34vh, 320px)), var(--paper)), url(media/sky/whites-2.webp); }


/* section labels number themselves, so shared sections fit on any page */
.sheet { counter-reset: sec; }
.label { counter-increment: sec; }
.label span:empty::before { content: '(' counter(sec, decimal-leading-zero) ')'; }

.head { display: grid; gap: clamp(16px, 2vw, 28px); margin-bottom: clamp(40px, 6vw, 100px); }
.head__title {
  font-size: clamp(38px, 6.6vw, 124px);
  font-family: var(--f-display); font-weight: 600; letter-spacing: -0.045em; line-height: 0.98;
}
.head__lede { max-width: 46ch; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.head--split { grid-template-columns: minmax(0, 1fr) minmax(280px, 30%); align-items: end; column-gap: clamp(32px, 6vw, 110px); }
.head--split > div:first-child { display: grid; gap: clamp(16px, 2vw, 28px); }
.head__aside { display: grid; gap: 22px; justify-items: start; padding-bottom: clamp(4px, 1vw, 16px); }

/* ─────────────── what we build ─────────────── */
.build { padding: clamp(72px, 10vw, 160px) var(--pad) clamp(72px, 9vw, 150px); }
.build .head { margin-bottom: clamp(32px, 4.4vw, 72px); }
.bld__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 0.8vw, 12px); }
.bld__tabs button {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 6px 14px; text-align: left;
  padding: clamp(16px, 1.8vw, 28px) clamp(16px, 2vw, 32px);
  border-radius: var(--r) var(--r) 0 0; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted);
  transition: background-color 0.35s, color 0.35s, box-shadow 0.35s;
}
.bld__tabs button:hover { background: rgba(18, 14, 11, 0.045); color: var(--ink); }
.bld__tabs button[aria-selected='true'] { background: var(--paper-2); box-shadow: inset 0 3px 0 var(--sun); color: var(--ink); }
.bld__n { font: 500 12px var(--f-label); color: var(--sun-deep); }
.bld__name { font-family: var(--f-display); font-weight: 600; font-size: clamp(20px, 2.3vw, 36px); letter-spacing: -0.04em; line-height: 1.05; }
.bld__from { grid-column: 2; font: 500 12px var(--f-label); letter-spacing: 0.05em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.bld__panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px);
  padding: clamp(22px, 3.2vw, 54px); border-radius: 0 0 var(--r-xl) var(--r-xl); background: var(--paper-2);
  animation: bld-in 0.7s var(--ease);
}
@keyframes bld-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
.bld__copy { display: grid; align-content: space-between; gap: clamp(20px, 2.6vw, 40px); }
.bld__lead { max-width: 21em; font-family: var(--f-display); font-weight: 600; font-size: clamp(22px, 2.35vw, 38px); letter-spacing: -0.035em; line-height: 1.14; text-wrap: pretty; }
.bld__kind { color: var(--sun-deep); }
.bld__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 40px); }
.bld__points li { padding: 14px 0 16px; border-top: 1px solid var(--line); }
.bld__points h4 { margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.bld__points p { font-size: 15px; color: var(--muted); text-wrap: pretty; }
.bld__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: clamp(16px, 2vw, 26px); border-top: 1px solid var(--ink); }
.bld__price { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 8px; }
.bld__price small { font: 500 11px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.bld__price b { font: 500 clamp(20px, 2vw, 30px) var(--f-label); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.bld__price > span { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
.no-js .bld__tabs { display: none; }
.no-js .bld__panel { margin-bottom: 12px; border-radius: var(--r-xl); }

/* "one we built": a real project beside each tab, in that client's colour */
.eg { --accent: var(--sun-soft); display: grid; align-content: start; border-radius: var(--r); background: var(--case-bg); color: var(--paper); overflow: hidden; }
.eg__stage { position: relative; margin: clamp(18px, 2.4vw, 40px) clamp(18px, 2.4vw, 40px) 0; padding: 0 0 6% 6%; }
.eg__cap { display: grid; justify-items: start; gap: 8px; padding: clamp(16px, 1.8vw, 28px) clamp(18px, 2.4vw, 40px) clamp(18px, 2.4vw, 40px); }
.eg__meta { display: flex; justify-content: space-between; gap: 16px; width: 100%; font: 500 11px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--case-accent); }
.eg__meta span { display: inline-flex; align-items: center; gap: 8px; }
.eg__meta .dot--live { animation: none; }
.eg__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(24px, 2.4vw, 38px); letter-spacing: -0.04em; line-height: 1.05; }
.eg__desc { max-width: 46ch; color: rgba(245, 240, 232, 0.8); text-wrap: pretty; }
.eg .case__cta { margin-top: 8px; }

/* the lit-up statement and the four-up list of terms (Studio and Process pages) */
.statement {
  margin-top: clamp(22px, 3vw, 44px); max-width: 23em;
  font-size: clamp(26px, 3.5vw, 60px);
  font-family: var(--f-display); font-weight: 600; letter-spacing: -0.035em; line-height: 1.12;
  text-wrap: pretty;
}
.statement .w, .statement .nb { transition: opacity 0.2s linear; }
.nb { white-space: nowrap; }
.creed { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(56px, 8vw, 130px); }
.creed li { display: grid; align-content: start; gap: 10px; padding-top: 18px; border-top: 1px solid var(--ink); }
.creed__n { font: 500 12px var(--f-label); color: var(--sun-deep); }
.creed h3 { font-size: clamp(19px, 1.6vw, 25px); font-family: var(--f-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; }
.creed p { color: var(--muted); max-width: 30ch; }

/* ─────────────── work ─────────────── */
.work { padding: clamp(24px, 4vw, 60px) var(--pad) clamp(80px, 10vw, 170px); }
.work .head { grid-template-columns: minmax(0, 1fr) minmax(280px, 30%); column-gap: clamp(32px, 6vw, 110px); align-items: end; }
.work .head .label { grid-column: 1 / -1; }

.deck__stage { display: grid; gap: clamp(16px, 2vw, 28px); }
/* sideways mode, switched on by landing.js: the stage pins, the cards share one cell,
   and the scroll distance the script adds to .deck is what brings each one in */
.deck.is-h .deck__stage { position: sticky; top: 84px; gap: 0; }
.deck.is-h .case { position: relative; top: auto; grid-area: 1 / 1; will-change: transform; }
.deck.is-h .case:not(:first-child) { transform: translate3d(110vw, 0, 0); }
.case { position: sticky; top: calc(84px + var(--i) * 14px); }
.case__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px);
  min-height: clamp(520px, 78vh, 780px);
  padding: clamp(24px, 3.2vw, 54px);
  border-radius: var(--r-xl); background: var(--case-bg); color: var(--paper);
  overflow: hidden; transform-origin: 50% 0; will-change: transform, filter;
}
.case__inner::after { content: ''; position: absolute; inset: 0; z-index: 3; background: #0b0810; opacity: var(--dim, 0); pointer-events: none; }
.case__info { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.case__meta { display: flex; align-items: baseline; gap: 16px; font-family: var(--f-label); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--case-accent); }
.case__num { color: var(--paper); }
.case__num em { font-style: normal; opacity: 0.5; }
.case__title { margin-top: clamp(18px, 3vw, 44px); font-size: clamp(34px, 4.3vw, 72px); font-family: var(--f-display); font-weight: 600; letter-spacing: -0.045em; line-height: 1; text-wrap: balance; }
.case__desc { margin-top: clamp(14px, 1.6vw, 24px); max-width: 38ch; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.45; color: rgba(245, 240, 232, 0.8); text-wrap: pretty; }
.case__facts { display: grid; gap: 0; width: 100%; max-width: 420px; margin-top: auto; padding-top: clamp(24px, 3vw, 40px); font-family: var(--f-label); font-weight: 500; font-size: 12px; letter-spacing: 0.03em; }
.case__facts div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(245, 240, 232, 0.16); }
.case__facts dt { text-transform: uppercase; letter-spacing: 0.06em; color: rgba(245, 240, 232, 0.55); }
.case__facts dd { display: flex; align-items: center; gap: 8px; }
.case__cta {
  display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(18px, 2vw, 28px);
  height: 48px; padding: 0 6px 0 20px; border-radius: 999px;
  background: var(--paper); color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none;
}
.case__cta i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--paper); font-style: normal; transition: transform 0.6s var(--ease); }
.case__cta:hover i { transform: rotate(45deg); }
.case__cta--quiet { padding: 0 20px; background: transparent; color: rgba(245, 240, 232, 0.7); box-shadow: inset 0 0 0 1px rgba(245, 240, 232, 0.22); font: 500 12px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; }

.case__stage { position: relative; display: block; align-self: center; text-decoration: none; padding: 0 0 7% 6%; }
.browser {
  border-radius: clamp(10px, 1vw, 16px); overflow: hidden; background: #0d0b0a;
  box-shadow: 0 0 0 1px rgba(245, 240, 232, 0.12), 0 40px 80px -30px rgba(0, 0, 0, 0.7);
  transition: transform 0.9s var(--ease);
}
.browser__bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: rgba(245, 240, 232, 0.07); }
.browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(245, 240, 232, 0.22); }
.browser__url { margin: 0 auto; padding: 3px 14px; border-radius: 999px; background: rgba(245, 240, 232, 0.08); font: 500 10.5px var(--f-label); letter-spacing: 0.03em; color: rgba(245, 240, 232, 0.7); transform: translateX(-21px); }
.browser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
.phone {
  position: absolute; left: 0; bottom: 0; width: 21%;
  padding: 1.1%; border-radius: clamp(14px, 1.9vw, 28px); background: #0d0b0a;
  box-shadow: 0 0 0 1px rgba(245, 240, 232, 0.16), 0 30px 60px -20px rgba(0, 0, 0, 0.75);
  transition: transform 0.9s var(--ease);
}
.phone img { width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: 50% 0; border-radius: clamp(10px, 1.5vw, 22px); }
.case__stage:hover .browser { transform: translate3d(0, -8px, 0); }
.case__stage:hover .phone { transform: translate3d(0, -16px, 0); }

.idx { margin-top: clamp(72px, 9vw, 150px); }
.idx__head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-bottom: 18px; }
.idx__head h3 { font-size: clamp(24px, 2.5vw, 38px); font-family: var(--f-display); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.idx__head sup { margin-left: 4px; font: 500 0.34em var(--f-label); letter-spacing: 0.02em; color: var(--sun-deep); vertical-align: 1.5em; }
.idx__head p { font: 500 12px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.idx__list { border-bottom: 1px solid var(--line); }
.idx__row {
  position: relative; display: grid; align-items: baseline; gap: 20px;
  grid-template-columns: 44px minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) 160px 20px;
  padding: clamp(16px, 1.7vw, 26px) clamp(0px, 1vw, 16px); border-top: 1px solid var(--line);
  text-decoration: none; isolation: isolate; transition: color 0.35s, padding 0.6s var(--ease);
}
.idx__row::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink); border-radius: 14px; transform: scaleY(0); transform-origin: 50% 100%; transition: transform 0.5s var(--ease); }
a.idx__row:hover { color: var(--paper); padding-left: clamp(12px, 2vw, 32px); }
a.idx__row:hover::before { transform: scaleY(1); }
.idx__n, .idx__sector, .idx__stack, .idx__status { font-family: var(--f-label); font-weight: 500; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; }
.idx__n { color: var(--sun-deep); }
.idx__title { font-size: clamp(22px, 2.3vw, 36px); font-family: var(--f-display); font-weight: 600; letter-spacing: -0.04em; line-height: 1.08; }
.idx__sector, .idx__stack { opacity: 0.66; }
.idx__status { display: inline-flex; align-items: center; gap: 8px; }
.idx__go { justify-self: end; font-size: 18px; transition: transform 0.5s var(--ease); }
a.idx__row:hover .idx__go { transform: translate(3px, -3px); color: var(--sun); }

/* ─────────────── services ─────────────── */
.services {
  margin: 0 var(--inset); padding: clamp(64px, 8vw, 130px) calc(var(--pad) - var(--inset)) clamp(48px, 6vw, 96px);
  border-radius: var(--r-xl); background: var(--ink); color: var(--paper);
}
.services .label { color: var(--muted-inv); }
.services .label span { color: var(--sun); }
.services .head__lede { color: var(--muted-inv); }

.tiers { border-bottom: 1px solid var(--line-inv); }
.tier { border-top: 1px solid var(--line-inv); }
.tier__head {
  display: grid; align-items: center; gap: 20px; width: 100%; text-align: left;
  grid-template-columns: 44px minmax(0, 1.05fr) minmax(0, 1fr) 150px 190px 44px;
  padding: clamp(20px, 2.2vw, 34px) 0;
}
.tier__n { font: 500 12px var(--f-label); color: var(--sun); }
.tier__name { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: clamp(28px, 3.4vw, 56px); font-family: var(--f-display); font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; transition: transform 0.6s var(--ease), color 0.3s; }
.tier__flag { padding: 5px 10px; border-radius: 999px; background: var(--sun); color: var(--ink); font: 500 10.5px var(--f-label); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }
.tier__what { font-size: clamp(15px, 1.25vw, 19px); color: var(--muted-inv); }
.tier__time { font: 500 13px var(--f-label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-inv); }
.tier__price { font: 500 clamp(17px, 1.6vw, 24px) var(--f-label); letter-spacing: -0.02em; text-align: right; font-variant-numeric: tabular-nums; }
.tier__price small { font-size: 11px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-inv); margin-right: 4px; }
.tier__icon { position: relative; justify-self: end; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-inv); transition: background-color 0.35s, transform 0.6s var(--ease); }
.tier__icon::before, .tier__icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 1.5px; margin: -0.75px 0 0 -7px; background: currentColor; transition: transform 0.5s var(--ease); }
.tier__icon::after { transform: rotate(90deg); }
.tier__head:hover .tier__name { transform: translateX(8px); }
.tier__head:hover .tier__icon, .tier.is-open .tier__icon { background: var(--sun); color: var(--ink); }
.tier.is-open .tier__icon::after { transform: rotate(0deg); }
.tier__body, .q__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s var(--ease); }
.tier.is-open .tier__body, .q.is-open .q__body, .no-js .tier__body, .no-js .q__body { grid-template-rows: 1fr; }
.tier__body-in { min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px clamp(32px, 6vw, 110px); padding-left: 64px; }
.tier__body-in > :last-child { margin-bottom: clamp(28px, 3vw, 48px); }
.tier__desc { grid-row: 1; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.38; max-width: 34ch; text-wrap: pretty; }
.tier__list { grid-row: 1 / span 2; grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; align-content: start; }
.tier__list li { position: relative; padding: 11px 0 11px 22px; border-top: 1px solid var(--line-inv); color: rgba(245, 240, 232, 0.86); }
.tier__list li::before { content: ''; position: absolute; left: 0; top: 1.2em; width: 10px; height: 5px; border-radius: 10px 10px 0 0; background: var(--sun); }
.tier__for { grid-row: 2; grid-column: 1; align-self: end; max-width: 40ch; color: var(--muted-inv); }
.tier__for span { display: block; margin-bottom: 4px; font: 500 11px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sun-soft); }

.every { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px 20px; margin-top: clamp(36px, 4vw, 64px); padding-left: 64px; }
.every__label { font: 500 12px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-inv); padding-top: 9px; }
.every ul { display: flex; flex-wrap: wrap; gap: 8px; }
.every li { padding: 8px 15px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-inv); font-size: 14px; }
.every__care { grid-column: 2; max-width: 62ch; color: var(--muted-inv); }

/* ─────────────── process ─────────────── */
.process { padding: clamp(80px, 10vw, 170px) var(--pad) clamp(72px, 9vw, 150px); }
.process .head { margin-bottom: clamp(12px, 2vw, 32px); }
.path { position: relative; height: clamp(110px, 16vw, 240px); margin-bottom: 6px; }
.path__arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.path__arc path { fill: none; vector-effect: non-scaling-stroke; }
.path__ghost { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 7; }
.path__line { stroke: var(--sun); stroke-width: 2; }
.path__sun { position: absolute; left: 0; top: 0; width: clamp(30px, 3.6vw, 54px); aspect-ratio: 1; margin: calc(clamp(30px, 3.6vw, 54px) / -2) 0 0 calc(clamp(30px, 3.6vw, 54px) / -2); border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 10px rgba(255, 90, 31, 0.14), 0 0 60px 10px rgba(255, 90, 31, 0.35); transform: translate3d(0, calc(clamp(110px, 16vw, 240px) * 0.955), 0); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); counter-reset: step; }
.steps li { display: grid; align-content: start; gap: 12px; padding-top: 20px; border-top: 1px solid var(--ink); }
.steps__when { justify-self: start; padding: 5px 11px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 11px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; }
.steps h3, .steps h2 { font-size: clamp(22px, 2.1vw, 32px); font-family: var(--f-display); font-weight: 600; letter-spacing: -0.04em; line-height: 1.08; }
.steps p { color: var(--muted); max-width: 32ch; }
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(48px, 6vw, 100px); padding: clamp(24px, 3vw, 44px); border-radius: var(--r); background: var(--paper-2); }
.ledger__h { margin-bottom: 14px; font: 500 12px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ledger li { padding: 10px 0; border-top: 1px solid var(--line); font-size: clamp(17px, 1.5vw, 22px); font-family: var(--f-display); font-weight: 600; letter-spacing: -0.03em; }
.ledger__out li { color: rgba(18, 14, 11, 0.42); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--sun-deep); }

/* ─────────────── studio ─────────────── */
.studio { padding: clamp(40px, 5vw, 80px) var(--pad) clamp(80px, 10vw, 160px); }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.team__card figure { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: var(--tile, var(--paper-2)); }
.team__card:nth-child(1) { --tile: var(--sun); }
.team__card:nth-child(2) { --tile: var(--ink); }
.team__card:nth-child(3) { --tile: var(--bone); }
.team__card:nth-child(4) { --tile: var(--ink-3); }
.team__card img { position: absolute; left: 50%; bottom: 0; width: 86%; max-width: none; translate: -50% 0; filter: grayscale(1) contrast(1.08); transform-origin: 50% 100%; transition: filter 0.6s, transform 0.9s var(--ease); }
.team__card:hover img { filter: none; transform: scale(1.04); }
.team__card--mono figure { display: grid; place-items: center; color: rgba(245, 240, 232, 0.9); }
.team__card--mono figure span { font-size: clamp(64px, 9vw, 150px); font-family: var(--f-display); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.team__info { display: grid; gap: 2px; padding: 14px 4px 0; }
.team__info h3 { font-size: clamp(18px, 1.4vw, 22px); font-family: var(--f-display); font-weight: 600; letter-spacing: -0.03em; }
.team__info p { color: var(--muted); }
.team__info span { margin-top: 6px; font: 500 11px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); margin-top: clamp(48px, 6vw, 96px); }
.facts div { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--ink); }
.facts dt { font: 500 12px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.facts dd { font-size: clamp(18px, 1.55vw, 24px); font-family: var(--f-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }

/* ─────────────── faq ─────────────── */
.faq { padding: clamp(40px, 5vw, 80px) var(--pad) clamp(80px, 10vw, 160px); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.faq__lead { position: sticky; top: 110px; display: grid; gap: clamp(16px, 2vw, 28px); }
.faq__more { color: var(--muted); }
.faq__list { border-bottom: 1px solid var(--line); }
.q { border-top: 1px solid var(--line); }
.q__head { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 20px; width: 100%; padding: clamp(18px, 1.8vw, 28px) 0; text-align: left; font-size: clamp(18px, 1.7vw, 26px); font-family: var(--f-display); font-weight: 600; letter-spacing: -0.035em; line-height: 1.15; }
.q__icon { position: relative; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); transition: background-color 0.35s, color 0.35s; }
.q__icon::before, .q__icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; background: currentColor; transition: transform 0.5s var(--ease); }
.q__icon::after { transform: rotate(90deg); }
.q__head:hover .q__icon, .q.is-open .q__icon { background: var(--ink); color: var(--paper); }
.q.is-open .q__icon::after { transform: rotate(0deg); }
.q__body > div { min-height: 0; overflow: hidden; }
.q__body p { max-width: 58ch; padding: 0 60px clamp(20px, 2vw, 30px) 0; font-size: clamp(16px, 1.2vw, 18px); color: var(--muted); text-wrap: pretty; }

/* ─────────────── start ─────────────── */
.start {
  margin: 0 var(--inset); padding: clamp(64px, 8vw, 130px) calc(var(--pad) - var(--inset)) clamp(40px, 5vw, 80px);
  border-radius: var(--r-xl); background: var(--sun); color: var(--ink); overflow: clip;
}
.start__sun { position: absolute; left: 50%; bottom: 0; width: 120vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, #ffb27a 0%, var(--sun-soft) 55%, rgba(255, 138, 77, 0) 100%); transform: translate3d(-50%, 62%, 0) scale(var(--s, 0.7)); pointer-events: none; }
.start__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(32px, 6vw, 110px); align-items: start; }
.start__title { margin-top: clamp(16px, 2vw, 28px); font-size: clamp(60px, 10.4vw, 184px); font-family: var(--f-display); font-weight: 600; letter-spacing: -0.055em; line-height: 0.96; }
.start__sub { max-width: 30ch; margin-top: clamp(24px, 3vw, 44px); font-size: clamp(18px, 1.7vw, 25px); font-family: var(--f-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
.start__how { display: grid; margin-top: clamp(24px, 3vw, 40px); max-width: 460px; }
.start__how li { display: grid; grid-template-columns: 34px 1fr; padding: 11px 0; border-top: 1px solid rgba(18, 14, 11, 0.22); font-weight: 500; }
.start__how li:last-child { border-bottom: 1px solid rgba(18, 14, 11, 0.22); }
.start__how span { font: 500 11px var(--f-label); padding-top: 4px; }
.start__direct { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(22px, 2.6vw, 36px); }
.start__direct a { display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px 10px 14px; border-radius: 999px; background: rgba(18, 14, 11, 0.08); box-shadow: inset 0 0 0 1px rgba(18, 14, 11, 0.2); text-decoration: none; font-weight: 600; line-height: 1.15; transition: background-color 0.3s, color 0.3s; }
.start__direct a:hover { background: var(--ink); color: var(--paper); }
.start__direct svg { width: 22px; height: 22px; flex: none; }
.start__direct small { display: block; font: 500 10.5px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }

.form { position: relative; padding: clamp(20px, 2.6vw, 36px); border-radius: var(--r); background: var(--paper); box-shadow: 0 40px 90px -40px rgba(18, 14, 11, 0.55); }
.form__trap { position: absolute; left: -9999px; }
.form__fields { display: grid; gap: 18px; }
.form__title { font: 500 12px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.form__starters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.form__starters span { margin-right: 2px; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.form__starters button { padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; transition: background-color 0.25s, color 0.25s, box-shadow 0.25s; }
.form__starters button:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.form__starters button.is-on { background: var(--ink); color: var(--paper); box-shadow: none; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.field { display: grid; gap: 6px; }
.field > span { font: 500 11px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea {
  width: 100%; padding: 12px 14px; border: 0; border-radius: 12px;
  background: var(--paper-2); box-shadow: inset 0 0 0 1px transparent;
  font-size: 16px; line-height: 1.4; resize: vertical; transition: box-shadow 0.25s, background-color 0.25s;
}
.field textarea { min-height: 112px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(18, 14, 11, 0.42); }
.field input:focus, .field textarea:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.field [aria-invalid='true'] { box-shadow: inset 0 0 0 1.5px #c2260c; }
.field__err { font-size: 13px; color: #b0210a; }
.form__error { padding: 10px 14px; border-radius: 12px; background: #fde4dc; color: #8c1c08; font-size: 14px; }
.form__small { font-size: 13px; color: var(--muted); text-align: center; }
.form .btn[disabled] { opacity: 0.6; pointer-events: none; }
.form__done { display: grid; gap: 12px; align-content: center; min-height: 380px; padding: 12px 4px; }
.form__done .mark { width: 64px; color: var(--sun); }
.form__done-title { font-size: clamp(26px, 2.5vw, 36px); font-family: var(--f-display); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
.form__done > p:last-of-type { color: var(--muted); max-width: 36ch; }
.form__found { display: grid; gap: 12px; margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--line); }
.form__found p { font-size: 15px; font-weight: 600; }
.form__done:focus { outline: none; }

/* ─────────────── footer ─────────────── */
.foot { position: relative; z-index: 0; padding: clamp(48px, 6vw, 96px) var(--pad) clamp(18px, 2vw, 28px); background: var(--ink); color: var(--paper); overflow: clip; }
.foot__top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 64px); align-items: start; }
.foot__tag { font-size: clamp(20px, 2.2vw, 32px); font-family: var(--f-display); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; }
.foot__nav { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 8px 44px; font-family: var(--f-label); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.foot__nav a, .foot__contact a, .foot__base a { text-decoration: none; opacity: 0.74; transition: opacity 0.25s, color 0.25s; }
.foot__nav a:hover, .foot__contact a:hover, .foot__base a:hover { opacity: 1; color: var(--sun-soft); }
.foot__contact { display: grid; gap: 8px; justify-items: end; font-size: clamp(16px, 1.4vw, 20px); font-weight: 500; }
.foot__word {
  display: flex; align-items: flex-end; justify-content: center; margin: clamp(24px, 4vw, 60px) 0 0;
  font-size: min(28vw, 470px); font-family: var(--f-display); font-weight: 700; letter-spacing: -0.06em; line-height: 0.84;
  user-select: none; overflow: hidden; padding-bottom: 0.08em;
}
.foot__word span { display: block; }
.foot__word i { display: block; flex: none; width: 0.36em; height: 0.18em; margin: 0 0 0.055em 0.07em; border-radius: 1em 1em 0 0; background: var(--sun); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: clamp(18px, 2vw, 28px); padding-top: 16px; border-top: 1px solid var(--line-inv); font-family: var(--f-label); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-inv); font-variant-numeric: tabular-nums; }

/* ─────────────── floating bits ─────────────── */
.dock { display: none; }
.peek { position: fixed; z-index: 70; left: 0; top: 0; width: 340px; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; pointer-events: none; opacity: 0; scale: 0.86; transition: opacity 0.3s, scale 0.5s var(--ease); box-shadow: 0 30px 60px -24px rgba(18, 14, 11, 0.6), 0 0 0 1px rgba(18, 14, 11, 0.1); background: var(--ink-2); will-change: transform; }
.peek.is-on { opacity: 1; scale: 1; }
.peek img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.cursor { position: fixed; z-index: 80; left: 0; top: 0; pointer-events: none; will-change: transform; }
.cursor span { display: grid; place-items: center; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: var(--sun); color: var(--ink); font: 500 12px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; scale: 0; transition: scale 0.45s var(--ease); }
.cursor.is-on span { scale: 1; }
.consent { position: fixed; z-index: 90; left: 16px; bottom: 16px; width: min(380px, calc(100% - 32px)); display: grid; gap: 14px; padding: 18px; border-radius: 18px; background: var(--ink); color: var(--paper); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.6), inset 0 0 0 1px var(--line-inv); font-size: 14px; }
.consent[hidden] { display: none; }
.consent div { display: flex; gap: 8px; justify-content: flex-end; }
.consent button { padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-inv); font-weight: 600; }
.consent [data-consent-yes] { background: var(--paper); color: var(--ink); box-shadow: none; }

/* ─────────────── motion states ─────────────── */
/* Hidden-until-revealed only applies when JS is running. `static` is the
   escape hatch (reduced motion, or the script failing to boot). */
/* the mask is padded out so serifs, descenders and the swash on the ampersand are not cut */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.12em 0.1em 0.24em; margin: -0.12em -0.1em -0.24em; }
.w > span { display: inline-block; will-change: transform; }
.js:not(.static) [data-split]:not(.is-split) { visibility: hidden; }
.js:not(.static) [data-split] .w > span { transform: translate3d(0, 112%, 0) rotate(4deg); transform-origin: 0 100%; transition: transform 1.15s var(--ease); transition-delay: calc(var(--n) * 55ms); }
.js:not(.static) [data-split].is-in .w > span { transform: none; }
.js:not(.static) [data-reveal], .js:not(.static) [data-rise] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0ms); }
.js:not(.static) [data-reveal].is-in, .js:not(.static) [data-rise].is-in { opacity: 1; transform: none; }
.js:not(.static) .nav:not(.is-in) { opacity: 0; }
.js:not(.static) .foot__word span, .js:not(.static) .foot__word i { transform: translate3d(0, 112%, 0); transition: transform 1.3s var(--ease); transition-delay: calc(var(--n) * 90ms); }
.js:not(.static) .foot__word.is-in span, .js:not(.static) .foot__word.is-in i { transform: none; }

/* the home hero pins behind the sheet only where it fits on one screen */
@media (max-width: 900px), (max-height: 699px) {
  .hero--home { position: relative; display: block; height: auto; min-height: 100vh; min-height: 100svh; }
  .hero--home .hero__content { padding-bottom: 28px; }
}

/* cards taller than the screen must scroll, not pin */
@media (max-height: 719px) { .case { position: relative; top: auto; } }

/* ─────────────── wide and tall enough: footer sits under the sheet ─────────────── */
@media (min-width: 900px) and (min-height: 760px) {
  .foot { position: sticky; bottom: 0; }
  .sheet { border-radius: var(--r-xl); }
}

@media (max-width: 1240px) {
  .hero--home .hero__kicker span { display: none; }
}

/* ─────────────── tablet ─────────────── */
@media (max-width: 1100px) {
  .tier__head { grid-template-columns: 36px minmax(0, 1.2fr) minmax(0, 1fr) 96px 150px 44px; gap: 14px; }
  .idx__row { grid-template-columns: 40px minmax(0, 1.3fr) minmax(0, 1fr) 150px 20px; }
  .idx__stack { display: none; }
}

/* ─────────────── phone ─────────────── */
@media (max-width: 900px) {
  :root { --nav-h: 64px; }
  .nav__links { display: none; }
  .nav__burger { display: block; }

  .br-d { display: none; }
  .hero { min-height: 600px; }
  .hero__kicker span { display: none; }

  .hero--home .hero__content { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 6vw, 44px); padding: calc(var(--nav-h) + 14px) var(--pad) 26px; }
  .hero--home .hero__title { font-size: clamp(27px, 8.2vw, 60px); line-height: 1.07; }
  .hero__wash { object-position: 45% 50%; } /* keeps the words on the black side */
  .hero__sub { font-size: 16px; }
  .desk { justify-self: stretch; width: 100%; }
  .proof { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .proof__item { font-size: 18px; }

  .bld__tabs { grid-template-columns: minmax(0, 1fr); }
  .bld__tabs button { grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; padding: 14px 16px; border-radius: 16px; }
  .bld__tabs button[aria-selected='true'] { box-shadow: inset 3px 0 0 var(--sun); }
  .bld__from { grid-column: auto; }
  .bld__panel { grid-template-columns: minmax(0, 1fr); margin-top: 10px; border-radius: var(--r); }
  .bld__points { grid-template-columns: minmax(0, 1fr); }

  .head--split, .work .head { grid-template-columns: minmax(0, 1fr); }
  .creed { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .case { position: relative; top: auto; }
  .case__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 28px; }
  .case__facts { margin-top: 22px; padding-top: 0; }
  .case__stage { order: -1; padding: 0 0 8% 5%; }
  .phone { width: 24%; }

  .idx__head { flex-direction: column; gap: 8px; }
  .idx__row { grid-template-columns: 32px minmax(0, 1fr) 20px; gap: 6px 12px; }
  .idx__sector { grid-column: 2; grid-row: 2; }
  .idx__status { grid-column: 2; grid-row: 3; }
  .idx__go { grid-row: 1; grid-column: 3; }

  .tier__head { grid-template-columns: 28px minmax(0, 1fr) 40px; gap: 4px 12px; }
  .tier__what { grid-column: 2; grid-row: 2; }
  .tier__price { grid-column: 2; grid-row: 3; text-align: left; margin-top: 6px; }
  .tier__time { grid-column: 2; grid-row: 4; }
  .tier__icon { grid-column: 3; grid-row: 1; width: 40px; height: 40px; }
  .tier__n { align-self: start; padding-top: 10px; }
  .tier__body-in { grid-template-columns: minmax(0, 1fr); padding-left: 40px; }
  .tier__list { grid-column: 1; grid-row: auto; grid-template-columns: minmax(0, 1fr); }
  .tier__desc, .tier__for { grid-row: auto; grid-column: 1; }
  .every { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .every__care { grid-column: 1; }

  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger { grid-template-columns: minmax(0, 1fr); }
  .team, .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .faq__lead { position: static; }
  .q__body p { padding-right: 0; }

  .start__grid { grid-template-columns: minmax(0, 1fr); }
  .start__sun { width: 220vw; }
  .foot__top { grid-template-columns: minmax(0, 1fr); }
  .foot__contact { justify-items: start; }

  .dock {
    display: block; position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    padding: 28px 12px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(rgba(18, 14, 11, 0), rgba(18, 14, 11, 0.38) 60%);
    transform: translate3d(0, 110%, 0); transition: transform 0.6s var(--ease); pointer-events: none;
  }
  .dock.is-on { transform: none; }
  .dock.is-on .btn { pointer-events: auto; }
  .dock .btn { box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6); }
  .peek, .cursor { display: none; }
}

@media (max-width: 560px) {
  .creed, .steps { grid-template-columns: minmax(0, 1fr); }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .nav .btn { display: none; }
  .case__facts div { grid-template-columns: 96px 1fr; }
  .foot__base { flex-direction: column; }
}

@media (hover: none) {
  .peek, .cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dot--live, .bld__panel, .proof__track { animation: none; }
  .proof__track { width: auto; }
  .proof__set { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 6px; }
  .proof__reel { -webkit-mask-image: none; mask-image: none; }
  * { transition-duration: 0.01ms !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   The rest of the site. Everything below builds on the landing page's
   pieces: same tokens, same sheet, same sky.
   ══════════════════════════════════════════════════════════════════════ */

/* crossfade between pages where the browser supports it */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.4s; }

/* ─────────────── link out of a section ─────────────── */
.more { margin-top: clamp(32px, 4vw, 60px); }
.more--flush { margin-top: 10px; }
.more a { display: inline-flex; align-items: center; gap: 14px; padding-bottom: 8px; border-bottom: 1px solid currentColor; text-decoration: none; font-family: var(--f-display); font-style: normal; font-weight: 500; font-size: clamp(17px, 1.45vw, 21px); letter-spacing: -0.03em; line-height: 1.1; }
.more i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--sun); color: var(--ink); font: 500 16px var(--f-sans); transition: transform 0.5s var(--ease); }
.more a:hover i { transform: translateX(6px); }

/* ─────────────── page hero: the same sky, with the headline at the bottom ─────────────── */
.hero--page { height: auto; min-height: clamp(480px, 70svh, 760px); display: grid; }
.hero--short { min-height: clamp(360px, 44svh, 480px); }
.hero--full { min-height: 100vh; min-height: 100svh; }
.hero--short .hero__title { font-size: clamp(40px, min(6.2vw, 12.5vh), 108px); }
.hero--page .hero__content { height: auto; min-height: inherit; grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
.hero--page .hero__title { grid-row: 3; align-self: end; margin: 0 0 clamp(18px, 3.4vh, 40px); font-size: clamp(42px, min(7.2vw, 14vh), 128px); line-height: 0.98; }
.hero--page .hero__horizon { grid-row: 4; }
.hero__lede { grid-row: 5; max-width: 50ch; padding-top: clamp(14px, 2.2vh, 24px); font-size: clamp(16px, 1.3vw, 20px); line-height: 1.45; color: rgba(245, 240, 232, 0.88); text-wrap: pretty; }
.menu__links a[aria-current='page'] { color: var(--sun-soft); }

/* ─────────────── the stack ─────────────── */
.stack { margin: 0 var(--inset); padding: clamp(64px, 8vw, 130px) 0 clamp(72px, 9vw, 140px); border-radius: var(--r-xl); background: var(--ink); color: var(--paper); overflow: clip; }
.stack .head { padding: 0 calc(var(--pad) - var(--inset)); }
.stack .label, .stack .head__lede { color: var(--muted-inv); }
.stack .label span { color: var(--sun); }
.lc { display: grid; gap: clamp(44px, 6vw, 92px); }
/* Each band overhangs the panel so its tilt never shows a bare corner. */
.lc__row { width: 118%; margin-left: -9%; overflow: hidden; padding: clamp(14px, 1.6vw, 22px) 0; background: linear-gradient(rgba(245, 240, 232, 0.07), rgba(245, 240, 232, 0.02)); border-block: 1px solid var(--line-inv); }
.lc__row--up { transform: rotate(-2.2deg); }
.lc__row--down { transform: rotate(2.2deg); }
.lc__track { display: flex; width: max-content; animation: tick 80s linear infinite; }
.lc__track--back { animation-direction: reverse; animation-duration: 96s; }
.lc__row:hover .lc__track { animation-play-state: paused; }
.lc__set { display: flex; align-items: center; flex: none; gap: clamp(36px, 4vw, 64px); padding-right: clamp(36px, 4vw, 64px); }
.lc__item { display: inline-flex; align-items: center; gap: 12px; flex: none; font-size: clamp(17px, 1.5vw, 22px); font-weight: 500; white-space: nowrap; color: rgba(245, 240, 232, 0.92); }
.lc__logo { width: 28px; height: 28px; flex: none; object-fit: contain; }
.lc__logo--mono { display: inline-block; background: currentColor; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }

/* ─────────────── work page ─────────────── */
.work--page { padding-top: clamp(40px, 5vw, 80px); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 44px); }
.filters button { padding: 10px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; transition: background-color 0.25s, color 0.25s, box-shadow 0.25s; }
.filters button:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.filters button[aria-pressed='true'] { background: var(--ink); color: var(--paper); box-shadow: none; }
.filters sup { margin-left: 4px; font: 500 10px var(--f-label); opacity: 0.6; }
.cases { display: grid; gap: clamp(16px, 2vw, 28px); }
.case--flat { position: relative; top: auto; }
.case--flat .case__inner { min-height: 0; }
.case--flat .case__desc { max-width: 46ch; }
.case--flat .case__facts { margin-top: clamp(24px, 3vw, 44px); padding-top: 0; }
.case--flip .case__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.case--flip .case__stage { order: -1; padding: 0 6% 7% 0; }
.case--flip .phone { left: auto; right: 0; }
.note { display: grid; gap: 8px; max-width: 720px; margin-top: clamp(40px, 5vw, 80px); padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r); background: var(--paper-2); color: var(--muted); }
.note__h { font: 500 12px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sun-deep); }

/* ─────────────── services page ─────────────── */
.plans { padding: clamp(40px, 5vw, 80px) var(--pad) clamp(64px, 8vw, 130px); }
.plans__head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: clamp(20px, 3vw, 40px); }
.plan { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 90px); padding: clamp(32px, 4vw, 64px) 0; border-top: 1px solid var(--ink); }
.plan__lead { position: sticky; top: 104px; align-self: start; display: grid; gap: 16px; justify-items: start; }
.plan__n { font: 500 12px var(--f-label); color: var(--sun-deep); }
.plan__name { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; font-family: var(--f-display); font-weight: 600; font-size: clamp(40px, 5vw, 86px); letter-spacing: -0.05em; line-height: 0.98; }
.plan__what { max-width: 30ch; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.4; text-wrap: pretty; }
.plan__meta { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0 clamp(24px, 3vw, 44px); width: 100%; padding: 14px 0; border-block: 1px solid var(--line); }
.plan__meta dt, .plan__h, .plan__for span, .soft__meta dt { font: 500 11px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.plan__meta dd { margin-top: 4px; font: 500 clamp(19px, 1.8vw, 27px) var(--f-label); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan__for { max-width: 38ch; color: var(--muted); }
.plan__for span { display: block; margin-bottom: 4px; color: var(--sun-deep); }
.plan__lists { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); align-content: start; }
.plan__h { margin-bottom: 10px; }
.plan__in li, .plan__out li { position: relative; padding: 12px 0 12px 26px; border-top: 1px solid var(--line); text-wrap: pretty; }
.plan__in li::before { content: ''; position: absolute; left: 0; top: 1.3em; width: 12px; height: 6px; border-radius: 12px 12px 0 0; background: var(--sun); }
.plan__out li { color: var(--muted); }
.plan__out li::before { content: ''; position: absolute; left: 0; top: 1.45em; width: 11px; height: 1.5px; background: currentColor; }
.plan__out--eg li { color: inherit; }
.plan__out--eg li::before { top: 1.25em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.plan__note { margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: var(--paper-2); font-size: 14.5px; color: var(--muted); }
.every--ink { padding-left: 0; padding-top: clamp(28px, 3vw, 44px); margin-top: 0; border-top: 1px solid var(--ink); }
.every--ink .every__label { color: var(--muted); }
.every--ink li { box-shadow: inset 0 0 0 1px var(--line); }

.care { margin: 0 var(--inset); padding: clamp(64px, 8vw, 130px) calc(var(--pad) - var(--inset)); border-radius: var(--r-xl); background: var(--ink); color: var(--paper); }
.care .label, .care .head__lede, .care .plan__h { color: var(--muted-inv); }
.care .label span { color: var(--sun); }
.care .head__lede .cur { color: var(--paper); }
.care__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 72px); }
.care .plan__in li, .care .plan__out li { border-color: var(--line-inv); }
.care .plan__out li { color: var(--muted-inv); }
.care__note { max-width: 46ch; margin-top: 18px; color: var(--muted-inv); }
.care__note strong { font-weight: 600; color: var(--paper); }

.soft { padding: clamp(72px, 9vw, 150px) var(--pad) clamp(40px, 5vw, 80px); }
.soft .head__title { font-size: clamp(36px, 5.2vw, 92px); }
.soft__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 110px); align-items: start; margin-top: clamp(16px, 2vw, 28px); }
.soft__body { display: grid; gap: 16px; max-width: 56ch; padding-top: clamp(8px, 1.2vw, 20px); color: var(--muted); }
.soft__lead { font-family: var(--f-display); font-weight: 600; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -0.03em; line-height: 1.2; color: var(--ink); }
.soft__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.soft__meta div { padding-top: 14px; border-top: 1px solid var(--ink); }
.soft__meta dd { margin-top: 6px; font-family: var(--f-display); font-weight: 600; font-size: clamp(17px, 1.4vw, 22px); letter-spacing: -0.03em; line-height: 1.12; color: var(--ink); }

/* ─────────────── process page ─────────────── */
.process--page { padding-top: clamp(40px, 5vw, 80px); }
.terms { padding: 0 var(--pad) clamp(72px, 9vw, 150px); }
.creed--six { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(32px, 4vw, 56px); margin-top: 0; }

/* ─────────────── studio page ─────────────── */
.story { padding: clamp(72px, 10vw, 170px) var(--pad) clamp(56px, 7vw, 110px); }
.story__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); max-width: 1080px; margin: clamp(40px, 5vw, 80px) 0 0 auto; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.5; color: var(--muted); }
.people { padding: clamp(24px, 4vw, 60px) var(--pad) clamp(72px, 9vw, 150px); }
.bios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4.5vw, 80px) clamp(24px, 3.5vw, 64px); }
.bio { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 2vw, 32px); align-items: start; }
.bio__text { display: grid; gap: 12px; align-content: start; color: var(--muted); }
.bio__role { font: 500 12px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sun-deep); }
.bio__name { font-family: var(--f-display); font-weight: 600; font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -0.04em; line-height: 1.05; color: var(--ink); }
.bio__signals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.bio__signals li { padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font: 500 11px var(--f-label); letter-spacing: 0.05em; text-transform: uppercase; }
.base { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 110px); margin: 0 var(--inset); padding: clamp(56px, 7vw, 110px) calc(var(--pad) - var(--inset)); border-radius: var(--r-xl); background: var(--paper-2); }
.base__col { display: grid; gap: 16px; align-content: start; max-width: 60ch; color: var(--muted); }
.base__lead { font-family: var(--f-display); font-weight: 600; font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -0.035em; line-height: 1.12; color: var(--ink); }
.facts--stack { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.base .facts dd { color: var(--ink); }
.beliefs { padding: clamp(72px, 9vw, 150px) var(--pad); }
.beliefs .creed { margin-top: 0; }

/* ─────────────── contact page: the form is the page ─────────────── */
.sheet > .start:first-child { margin-top: var(--inset); }
[data-page='contact'] .start { padding-top: clamp(40px, 5vw, 72px); }
[data-page='contact'] .start__title, [data-page='contact'] .start .label { display: none; }
[data-page='contact'] .start__sub { margin-top: 0; }
[data-page='contact'] .faq { padding-top: clamp(72px, 9vw, 150px); }

@media (max-width: 1100px) {
  .bios { grid-template-columns: minmax(0, 1fr); }
  .creed--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hero--page { min-height: clamp(440px, 64svh, 620px); }
  .hero--short { min-height: clamp(360px, 46svh, 480px); }
  .hero--short .hero__title { margin-bottom: clamp(48px, 8vh, 80px); }
  .hero--page .hero__title { font-size: clamp(38px, 11vw, 80px); margin-bottom: clamp(64px, 11vh, 110px); }
  .hero--page .hero__kicker span { display: inline; }

  .case--flip .case__inner { grid-template-columns: minmax(0, 1fr); }
  .case--flip .case__stage { padding: 0 0 8% 5%; }
  .case--flip .phone { left: 0; right: auto; }

  .plan, .plan__lists, .care__cols, .soft__grid, .story__cols, .base { grid-template-columns: minmax(0, 1fr); }
  .plan__lead { position: static; }
  /* on a phone the contact page leads with the form itself */
  [data-page='contact'] .form { order: -1; }
  .bio { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .lc__item { font-size: 16px; }
  .lc__logo { width: 24px; height: 24px; }
}

@media (max-width: 560px) {
  .creed--six { grid-template-columns: minmax(0, 1fr); }
  .bio { grid-template-columns: minmax(0, 1fr); }
  .bio figure { max-width: 260px; }
  .soft__meta { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .lc__track { animation: none; }
  @view-transition { navigation: none; }
}

/* panels that were flat grey-beige get a deeper, warmer render of the same whites */
.bld__panel, .ledger, .note, .base, .plan__note { background: var(--grain), url(media/sky/whites-deep.webp) 50% 50% / cover no-repeat var(--paper-2); }
/* the open tab and its panel read as one card: the same tone and grain where they meet, and the
   panel only drifts into its render further down */
.bld__panel { background: var(--grain), linear-gradient(var(--paper-2) 70px, rgba(235, 228, 216, 0) 300px), url(media/sky/whites-deep.webp) 50% 50% / cover no-repeat var(--paper-2); }
.bld__tabs button[aria-selected='true'] { background: var(--grain), var(--paper-2); }

/* ── privacy page: one readable column ─────────────────────────────── */
.legal { padding: clamp(56px, 7vw, 120px) var(--pad) clamp(72px, 9vw, 150px); }
.legal__body { max-width: 68ch; display: grid; gap: 18px; color: var(--muted); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.65; }
.legal__body h2 { margin-top: clamp(20px, 2.4vw, 36px); font: 600 clamp(22px, 2vw, 30px)/1.1 var(--f-display); letter-spacing: -0.03em; color: var(--ink); }
.legal__body h2:first-child { margin-top: 0; }
.legal__body ul { display: grid; gap: 10px; padding-left: 20px; list-style: disc; }
.legal__body b { font-weight: 600; color: var(--ink); }
.legal__reset { padding: 11px 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; color: var(--ink); transition: background-color 0.3s, color 0.3s; }
.legal__reset:hover { background: var(--ink); color: var(--paper); }

/* ── guides: the one long-form page type. Contents on the left, the article beside it. ── */
.guide { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 76ch); gap: clamp(32px, 6vw, 110px); align-items: start; padding: clamp(48px, 6vw, 100px) var(--pad) clamp(64px, 8vw, 130px); }
.guide__label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.guide__toc { position: sticky; top: calc(var(--nav-h) + 28px); display: grid; gap: 14px; font-size: 14.5px; }
.guide__toc ol { display: grid; gap: 10px; }
.guide__toc a { color: var(--muted); text-decoration: none; transition: color 0.25s; }
.guide__toc a:hover { color: var(--ink); }
.guide__toc .guide__all { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); font-weight: 600; color: var(--ink); }
.guide__body { display: grid; gap: 18px; color: var(--muted); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.65; min-width: 0; }
.guide__body h2 { margin-top: clamp(24px, 2.8vw, 44px); font: 600 clamp(24px, 2.2vw, 34px)/1.1 var(--f-display); letter-spacing: -0.03em; color: var(--ink); scroll-margin-top: calc(var(--nav-h) + 24px); text-wrap: balance; }
.guide__body ul, .guide__body ol { display: grid; gap: 10px; padding-left: 22px; }
.guide__body ul { list-style: disc; }
.guide__body ol { list-style: decimal; }
.guide__body b { font-weight: 600; color: var(--ink); }
.guide__body sup { font-size: 0.68em; }
.guide__body sup a { padding: 0 2px; font-weight: 600; color: var(--ink); }
.guide__answer { display: grid; gap: 12px; padding: clamp(22px, 2.4vw, 34px); border-radius: var(--r); background: rgba(18, 14, 11, 0.055); }
.guide__answer p:last-child { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); }
.guide__table { overflow-x: auto; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.guide__table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
.guide__table th, .guide__table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.guide__table tr:last-child td { border-bottom: 0; }
.guide__table th { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.guide__table td:first-child { font-weight: 600; color: var(--ink); }
.guide__sources { font-size: 15px; }
.guide__note { font-size: 14px; }
.guide__by { display: flex; align-items: center; gap: 16px; margin-top: clamp(28px, 3vw, 48px); padding-top: 26px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.guide__by img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.guide__by b { display: block; font-size: 17px; }
@media (max-width: 900px) {
  .guide { grid-template-columns: minmax(0, 1fr); }
  .guide__toc { position: static; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
}

/* the list of guides */
.guides { padding: clamp(40px, 5vw, 90px) var(--pad) clamp(56px, 7vw, 110px); }
.guides__list { max-width: 1100px; border-top: 1px solid var(--line); }
.guides__list a { text-decoration: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 8px clamp(20px, 3vw, 48px); align-items: baseline; padding: clamp(22px, 2.4vw, 34px) 0; border-bottom: 1px solid var(--line); }
.guides__name { font: 600 clamp(22px, 2vw, 30px)/1.12 var(--f-display); letter-spacing: -0.03em; }
.guides__about { color: var(--muted); line-height: 1.5; }
.guides__when { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.guides__list a:hover .guides__name { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
@media (max-width: 900px) { .guides__list a { grid-template-columns: minmax(0, 1fr); } }
.consent a { text-decoration: underline; text-underline-offset: 3px; }

/* ── work without the cards ────────────────────────────────────────────
   No box behind a project any more: the laptop and phone sit straight on
   the page, as they were, with the words beside them and a hairline
   between one project and the next. */
.case, .eg { --accent: var(--sun-deep); --case-accent: var(--sun-deep); }
.case { position: relative; top: auto; }
.case__inner { min-height: 0; padding: 0; border-radius: 0; overflow: visible; background: none; color: var(--ink); align-items: center; }
.case__inner::after { content: none; }
.eg { background: none; color: var(--ink); border-radius: 0; overflow: visible; }
.eg__stage { margin-left: 0; margin-right: 0; margin-top: 0; }
.eg__cap { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.case__num { color: var(--ink); }
.case__desc, .eg__desc { color: var(--muted); }
.case__facts { margin-top: clamp(24px, 3vw, 40px); padding-top: 0; }
.case__facts div { border-top-color: var(--line); }
.case__facts dt { color: var(--muted); }
.case__cta { background: var(--ink); color: var(--paper); }
.case__cta i { background: var(--sun); color: var(--ink); }
.case__cta--quiet { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.case .browser, .eg .browser { box-shadow: 0 0 0 1px rgba(18, 14, 11, 0.1), 0 40px 70px -34px rgba(18, 14, 11, 0.45); }
.case .phone, .eg .phone { box-shadow: 0 0 0 1px rgba(18, 14, 11, 0.12), 0 30px 50px -22px rgba(18, 14, 11, 0.5); }
/* one project after another, with room and a rule between them */
.cases, .deck:not(.is-h) .deck__stage { gap: clamp(56px, 7vw, 110px); }
.cases .case + .case, .deck:not(.is-h) .case + .case { padding-top: clamp(56px, 7vw, 110px); border-top: 1px solid var(--line); }
.deck.is-h .case { padding-block: clamp(8px, 2vh, 28px); }

/* ── home, after the hero: a short strip of reviews, then the work ─── */
.reviews { padding: clamp(40px, 5vw, 76px) 0 clamp(8px, 1.5vw, 24px); }
.reviews .label { padding: 0 var(--pad); }
.reviews__reel { margin-top: clamp(20px, 2.4vw, 36px); overflow: clip; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.reviews__track { display: flex; width: max-content; animation: tick 70s linear infinite; }
.reviews__reel:hover .reviews__track { animation-play-state: paused; }
.reviews__set { display: flex; flex: none; }
.rev { flex: none; width: clamp(300px, 34vw, 520px); display: grid; align-content: space-between; gap: 18px; padding: 4px clamp(24px, 3vw, 48px); border-left: 1px solid var(--line); }
.rev blockquote { font: 600 clamp(19px, 1.7vw, 26px)/1.25 var(--f-display); letter-spacing: -0.03em; text-wrap: pretty; }
.rev figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 14px; color: var(--muted); }
.rev figcaption b { font-weight: 600; color: var(--ink); }
.rev figcaption i { font: 500 10.5px var(--f-label); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
@media (prefers-reduced-motion: reduce) { .reviews__track { animation: none; } .reviews__reel { overflow-x: auto; } }
.sheet > section.reviews + section.work { padding-top: clamp(40px, 5vw, 80px); }

/* ── the form sits on the same dark wash as the headers, not flat orange ── */
.start { --accent: var(--sun); background: #0d0a08 url(media/sky/wash-a-1920.webp) 50% 50% / cover; color: var(--paper); }
.start__sun { display: none; }
.start__how li, .start__how li:last-child { border-color: rgba(245, 240, 232, 0.2); }
.start__direct a { background: rgba(245, 240, 232, 0.07); box-shadow: inset 0 0 0 1px rgba(245, 240, 232, 0.22); }
.start__direct a:hover { background: var(--paper); color: var(--ink); }
.start .label, .start .label span { color: rgba(245, 240, 232, 0.72); }
.form { color: var(--ink); }

/* ── team tiles: no bright orange behind a portrait ─────────────────── */
.team__card:nth-child(1) { --tile: var(--ink-3); }

.case__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(22px, 2.6vw, 38px); }
.case__acts .case__cta { margin-top: 0; }
.case__cta--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.case__cta--ghost i { background: var(--ink); color: var(--paper); }
.deck .case__title { font-size: clamp(40px, 5.4vw, 92px); }
.deck .case__desc { max-width: 34ch; font-size: clamp(16px, 1.35vw, 20px); }

/* ── Work page: the projects sit on a dark ground ──────────────────────
   Same layout, darker room. Inside the Work page's project section the
   paper and ink swap places, so everything in it (words, rules, buttons,
   filters) follows without its own dark rules. The home page keeps paper. */
.sheet > section.work--page {
  --ink: #f5f0e8; --paper: #14100d; --paper-2: #1f1915;
  --muted: rgba(245, 240, 232, 0.64); --line: rgba(245, 240, 232, 0.16); --sun-deep: #f96a26;
  background: var(--grain), #14100d !important; color: var(--ink);
  border-radius: 0 0 var(--r-xl) var(--r-xl); padding-top: clamp(32px, 4vw, 60px);
}
.work--page .note { background: var(--paper-2) !important; }
.work--page .case .browser, .work--page .case .phone { box-shadow: 0 0 0 1px rgba(245, 240, 232, 0.14), 0 40px 80px -30px rgba(0, 0, 0, 0.8); }

/* ── pricing: four quiet rows, one panel, very little orange ──────────
   Pick a row on the left; the panel on the right shows its price, what it
   is and who it suits, beside a real build. Orange is kept for the row
   numbers, the chosen row's outline and the one button. */
.services { padding-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(40px, 5vw, 72px); }
.services .head__title { font-size: clamp(32px, 4vw, 64px); font-weight: 500; }
.services .head__title em { color: #8d837a; }
.pick { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 11fr); gap: clamp(20px, 3vw, 48px); margin-top: clamp(28px, 3.4vw, 56px); align-items: stretch; }
.pick__tabs { display: grid; align-content: start; }
.pick__tabs button { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 18px; align-items: center; gap: 2px 14px; padding: clamp(16px, 1.7vw, 26px) clamp(12px, 1.2vw, 18px); border-bottom: 1px solid rgba(245, 240, 232, 0.1); border-radius: 0; text-align: left; color: rgba(245, 240, 232, 0.72); box-shadow: inset 0 0 0 1px transparent; transition: color 0.4s var(--ease), background-color 0.4s var(--ease), box-shadow 0.4s var(--ease), border-radius 0.4s var(--ease); }
.pick__tabs button:hover { color: var(--paper); }
.pick__tabs button[aria-selected='true'] { color: var(--paper); border-bottom-color: transparent; border-radius: 12px; background: rgba(249, 106, 38, 0.07); box-shadow: inset 0 0 0 1px rgba(249, 106, 38, 0.75); }
.pick__n { grid-row: 1 / 3; font: 500 12px var(--f-label); color: var(--sun); }
.pick__name { font: 500 clamp(19px, 1.7vw, 26px)/1.15 var(--f-display); letter-spacing: -0.02em; }
.pick__what { grid-column: 2; font-size: 14px; color: rgba(245, 240, 232, 0.5); }
.pick__amt { grid-column: 3; grid-row: 1 / 3; font-size: 15px; white-space: nowrap; }
.pick__chev { grid-column: 4; grid-row: 1 / 3; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.6; }
.pick__stage { display: grid; }
.pick__panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(24px, 3vw, 48px); border-radius: 16px; overflow: hidden; background: radial-gradient(60% 90% at 100% 70%, rgba(249, 106, 38, 0.2), rgba(249, 106, 38, 0) 70%), #110e0c; box-shadow: inset 0 0 0 1px rgba(245, 240, 232, 0.1); }
.pick__panel:not([hidden]) { animation: pick-in 0.6s var(--ease) both; }
@keyframes pick-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
.pick__body { display: grid; justify-items: start; gap: 14px; }
.pick__kicker { font: 500 11px var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sun); }
.pick__figure { font: 500 clamp(32px, 3.7vw, 58px)/1 var(--f-display); letter-spacing: -0.04em; white-space: nowrap; }
.pick__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pick__tags span { padding: 5px 12px; border-radius: 8px; font-size: 13.5px; background: rgba(245, 240, 232, 0.06); box-shadow: inset 0 0 0 1px rgba(245, 240, 232, 0.1); }
.pick__desc { margin-top: 8px; max-width: 40ch; font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.45; color: rgba(245, 240, 232, 0.86); text-wrap: pretty; }
.pick__for { max-width: 40ch; font-size: 14.5px; line-height: 1.45; color: rgba(245, 240, 232, 0.6); }
.pick__for span { display: block; margin-bottom: 4px; font: 500 11px var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 240, 232, 0.8); }
.pick__body .btn { margin-top: 10px; }
.pick__art { margin-right: calc(clamp(24px, 3vw, 48px) * -1.6); perspective: 1400px; }
.pick__art .browser { transform: rotateY(-14deg) rotateX(4deg); transform-origin: 0 50%; box-shadow: 0 0 0 1px rgba(245, 240, 232, 0.12), -30px 40px 80px -30px rgba(0, 0, 0, 0.8); }

.every { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(28px, 3.4vw, 52px); padding-left: 0; }
.every__label { font: 500 11px var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 240, 232, 0.6); }
.every ul { display: grid; grid-template-columns: repeat(6, auto); justify-content: space-between; gap: 14px 0; }
.every li { display: flex; align-items: center; gap: 12px; padding: 0 clamp(10px, 1.4vw, 24px) 0 0; border-radius: 0; box-shadow: none; font-size: 14px; color: rgba(245, 240, 232, 0.8); }
.every li + li { padding-left: clamp(10px, 1.4vw, 24px); border-left: 1px solid rgba(245, 240, 232, 0.1); }
.every li svg, .addon > svg { flex: none; box-sizing: content-box; width: 20px; height: 20px; padding: 11px; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; box-shadow: inset 0 0 0 1px rgba(245, 240, 232, 0.16); }

.addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(24px, 3vw, 44px); }
.addon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 2vw, 28px); padding: clamp(20px, 2.4vw, 36px); border-radius: 14px; text-decoration: none; color: var(--paper); box-shadow: inset 0 0 0 1px rgba(245, 240, 232, 0.1); transition: box-shadow 0.4s var(--ease), background-color 0.4s var(--ease); }
.addon:hover { background: rgba(245, 240, 232, 0.03); box-shadow: inset 0 0 0 1px rgba(245, 240, 232, 0.24); }
.addon span { display: grid; gap: 6px; }
.addon b { font: 500 clamp(18px, 1.5vw, 22px)/1.2 var(--f-display); letter-spacing: -0.02em; }
.addon em { font-style: normal; font-size: 14.5px; line-height: 1.45; color: rgba(245, 240, 232, 0.6); max-width: 52ch; }
.addon > i { font-style: normal; opacity: 0.6; transition: transform 0.4s var(--ease); }
.addon:hover > i { transform: translateX(4px); }
.services .more { margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 1100px) { .every ul { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; } .every li:nth-child(4) { padding-left: 0; border-left: 0; } }
@media (max-width: 900px) {
  .pick, .pick__panel, .addons { grid-template-columns: minmax(0, 1fr); }
  .pick__art { margin-right: 0; } .pick__art .browser { transform: none; }
  .every ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .every li, .every li + li { padding-left: 0; border-left: 0; }
  .pick__figure { white-space: normal; }
}

/* ── studio on the home page: one screen, centred, quiet ───────────────
   A short centred title, three portraits sized to the height of the
   window, and the link. No paragraph, no orange in the heading. */
.studio { padding: clamp(40px, 6vh, 80px) var(--pad) clamp(40px, 6vh, 80px); }
.studio__head { display: grid; justify-items: center; gap: clamp(10px, 1.4vh, 18px); text-align: center; }
.studio .head__title { font-size: clamp(30px, 3.6vw, 56px); font-weight: 500; }
.studio .head__title em { color: #8d837a; }
.studio .team { width: min(100%, calc((min(46vh, 440px) * 0.8) * 3 + 2 * clamp(12px, 1.6vw, 24px))); margin: clamp(22px, 3.4vh, 44px) auto 0; }
.studio .team__info { justify-items: center; text-align: center; padding-top: 12px; }
.studio .more { display: flex; justify-content: center; margin-top: clamp(20px, 3vh, 36px); }
@media (max-width: 900px) { .studio .team { width: 100%; } }

/* ── process on the home page: one line with four points on it ─────────
   The when is the big thing (Day 0, Day 2, Week 1, Launch); a rule runs
   under them and draws itself across once, lighting each point as it
   passes. One screen, one touch of orange at the end. */
.process { padding: clamp(44px, 7vh, 96px) var(--pad) clamp(44px, 7vh, 96px); }
.flow__head { display: grid; justify-items: center; gap: clamp(10px, 1.4vh, 18px); text-align: center; }
.process .head__title { font-size: clamp(30px, 3.6vw, 56px); font-weight: 500; }
.process .head__title em { color: #8d837a; }
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(36px, 7vh, 88px); }
.flow li { display: grid; align-content: start; padding-right: clamp(16px, 2.4vw, 44px); --d: calc(var(--n) * 0.5s + 0.2s); }
.flow__when { font: 500 clamp(30px, 3.8vw, 60px)/1 var(--f-display); letter-spacing: -0.045em; color: rgba(18, 14, 11, 0.22); transition: color 0.7s var(--ease) var(--d); }
.flow__rule { position: relative; display: block; height: 11px; margin: clamp(18px, 3vh, 32px) calc(clamp(16px, 2.4vw, 44px) * -1) clamp(18px, 3vh, 30px) 0; }
.flow__rule::before { content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--line); }
.flow__rule::after { content: ''; position: absolute; left: 0; right: 0; top: 4.5px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s linear var(--d); }
.flow li:last-child .flow__rule::after { right: auto; width: 0; }
.flow li::before { content: ''; grid-row: 2; grid-column: 1; z-index: 1; align-self: center; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(18, 14, 11, 0.3); transition: background-color 0.4s var(--ease) var(--d), box-shadow 0.4s var(--ease) var(--d); }
.flow__when { grid-row: 1; } .flow__rule { grid-row: 2; grid-column: 1; } .flow h3 { grid-row: 3; } .flow p { grid-row: 4; }
.flow h3 { font: 600 clamp(18px, 1.5vw, 23px)/1.2 var(--f-display); letter-spacing: -0.025em; }
.flow p { margin-top: 8px; max-width: 30ch; color: var(--muted); font-size: 15px; line-height: 1.5; }
.flow.is-in .flow__when { color: var(--ink); }
.flow.is-in .flow__rule::after { transform: none; }
.flow.is-in li::before { background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.flow.is-in li:last-child::before { background: var(--sun); box-shadow: inset 0 0 0 1.5px var(--sun), 0 0 0 5px rgba(249, 106, 38, 0.16); }
.process .more { display: flex; justify-content: center; margin-top: clamp(28px, 5vh, 60px); }
@media (max-width: 900px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .flow__rule { margin-right: 0; }
  .flow__rule::before, .flow__rule::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .flow__when, .flow__rule::after, .flow li::before { transition: none; } }

/* portraits are in full colour all the time, not only on hover */
.team__card img { filter: none; }

/* ── the bar after the hero matches the page under it ──────────────────
   Over the light sections it is paper with dark type, so it reads as part
   of the page instead of a dark band laid across it. landing.js switches
   it back to near-black over the dark sections. */
.nav { transition: height 0.45s var(--ease), background-color 0.45s var(--ease), color 0.45s var(--ease), box-shadow 0.45s var(--ease), opacity 0.3s; }
.nav.is-docked.is-light:not(.is-open) { background: rgba(245, 240, 232, 0.86); color: var(--ink); box-shadow: inset 0 -1px 0 rgba(18, 14, 11, 0.1); }
.nav.is-light:not(.is-open) .nav__brand .mark { color: var(--ink); }
.nav.is-light:not(.is-open) .nav__burger { box-shadow: inset 0 0 0 1px rgba(18, 14, 11, 0.28); }
.nav__brand .mark { transition: color 0.45s var(--ease); }

/* ── Services page: the same picker, with both lists in the panel ──── */
.services--page { margin-top: clamp(16px, 2vw, 28px); }
.pick--detail .pick__panel { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); align-items: start; background: #110e0c; }
.pick__lists { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(20px, 2.4vw, 40px); }
.pick__lists h3 { margin-bottom: 8px; font: 500 11px var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 240, 232, 0.8); }
.pick__lists li { position: relative; padding: 7px 0 7px 22px; border-top: 1px solid rgba(245, 240, 232, 0.09); font-size: 14px; line-height: 1.4; color: rgba(245, 240, 232, 0.86); }
.pick__lists li::before { content: ''; position: absolute; left: 2px; top: 0.95em; }
.pick__in li::before { width: 9px; height: 5px; border-left: 1.5px solid var(--paper); border-bottom: 1.5px solid var(--paper); transform: rotate(-45deg); margin-top: -2px; }
.pick__out li, .pick__eg li { color: rgba(245, 240, 232, 0.55); }
.pick__out li::before, .pick__eg li::before { width: 9px; height: 0; border-top: 1.5px solid rgba(245, 240, 232, 0.4); margin-top: 2px; }

/* the two add-ons: a dark card each, picture on the left */
.extras { padding: clamp(44px, 7vh, 96px) var(--pad) clamp(44px, 7vh, 96px); }
.extras .head__title { font-size: clamp(30px, 3.6vw, 56px); font-weight: 500; }
.extras .head__title em { color: #8d837a; }
.extras__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); margin-top: clamp(28px, 5vh, 56px); }
.extra { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); border-radius: var(--r); overflow: hidden; background: #14100d; color: var(--paper); }
.extra__art { background: #0d0a08; }
.extra__art img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 10 / 11; }
.extra__text { align-self: center; padding: clamp(20px, 2.2vw, 36px); }
.extra__text h3 { font: 500 clamp(20px, 1.9vw, 28px)/1.1 var(--f-display); letter-spacing: -0.03em; }
.extra__price { margin-top: 6px; font-size: 14.5px; color: rgba(245, 240, 232, 0.6); }
.extra__text ul { display: grid; margin-top: clamp(14px, 1.6vw, 22px); }
.extra__text li { padding: 8px 0; border-top: 1px solid rgba(245, 240, 232, 0.1); font-size: 14px; line-height: 1.45; color: rgba(245, 240, 232, 0.7); }
.extra__text li b { font-weight: 600; color: var(--paper); }
.extra__note { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: rgba(245, 240, 232, 0.45); }
@media (max-width: 1100px) { .pick--detail { grid-template-columns: minmax(0, 1fr); } .pick--detail .pick__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; } }
@media (max-width: 900px) { .pick--detail .pick__panel, .pick__lists, .extras__grid, .extra { grid-template-columns: minmax(0, 1fr); } .extra__art img { height: auto; } }

/* Services page: keep the package section inside one screen */
.services--page { padding-top: clamp(32px, 5vh, 60px); padding-bottom: clamp(32px, 5vh, 60px); }
.services--page .head__title { font-size: clamp(28px, 3.2vw, 50px); }
.services--page .head { align-items: end; }
.services--page .pick { margin-top: clamp(20px, 3.4vh, 40px); }
.pick--detail .pick__figure { font-size: clamp(28px, 2.9vw, 46px); }
.pick--detail .pick__panel { padding: clamp(20px, 2.4vw, 36px); }
.pick--detail .pick__tabs button { padding-top: clamp(12px, 1.9vh, 22px); padding-bottom: clamp(12px, 1.9vh, 22px); }
.pick__lists li { padding-top: 6px; padding-bottom: 6px; font-size: 13.5px; }
.extra { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
.extra__art { background: #0c0a09; }
.extra__art img { object-fit: contain; }
.pick--detail .pick__panel { grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); }
.pick__lists { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.pick__in { columns: 2; column-gap: clamp(16px, 1.8vw, 28px); }
.pick__lists li { break-inside: avoid; }
.pick--detail .pick__desc, .pick--detail .pick__for { max-width: 34ch; }
@media (max-width: 900px) { .pick__in { columns: 1; } }

/* Services page: the dark band is the first thing on the sheet, so it runs edge to
   edge with no paper showing round it (it was inset, which left light corners and a
   gap at the top). */
.sheet > .services--page { margin: 0; padding-left: var(--pad); padding-right: var(--pad); border-radius: 0 0 var(--r-xl) var(--r-xl); }

/* ── one closing line where the full form used to repeat ───────────── */
.close { display: grid; justify-items: center; gap: clamp(12px, 2vh, 20px); margin: 0 var(--inset); padding: clamp(56px, 10vh, 120px) var(--pad); border-radius: var(--r-xl); text-align: center; color: var(--paper); background: #0d0a08 url(media/sky/wash-a-1920.webp) 50% 50% / cover; }
.close .head__title { font-size: clamp(32px, 4.4vw, 68px); font-weight: 500; }
.close .head__title em { color: var(--sun); }
.close p { color: rgba(245, 240, 232, 0.72); }
.close .btn { margin-top: clamp(8px, 1.4vh, 16px); }

/* ── section headings on paper: the second half is grey, not orange ── */
.sheet > section:not(.close):not(.start) .head__title em { color: #8d837a; }

/* ── Studio page, to the same standard as the home page ─────────────── */
.story { padding: clamp(48px, 9vh, 110px) var(--pad) clamp(24px, 5vh, 60px); }
.story .statement { max-width: 24em; font-size: clamp(24px, 3vw, 48px); font-weight: 500; }
.studio--page .team__info { gap: 2px; }
.team__line { margin-top: 10px; max-width: 30ch; font-size: 14px; line-height: 1.45; }
.studio--page .team { width: min(100%, calc((min(40vh, 400px) * 0.8) * 3 + 2 * clamp(12px, 1.6vw, 24px))); }
.beliefs { padding: clamp(44px, 7vh, 96px) var(--pad); }
.beliefs .head__title { font-size: clamp(30px, 3.6vw, 56px); font-weight: 500; }
.beliefs .creed { margin-top: clamp(32px, 6vh, 72px); }
.beliefs .creed li { border-top-color: var(--line); }
.sheet > section.close { background: #0d0a08 url(media/sky/wash-a-1920.webp) 50% 50% / cover !important; margin-top: clamp(16px, 2vw, 28px); margin-bottom: clamp(16px, 2vw, 28px); }
.stack { padding-top: clamp(44px, 6vw, 84px); padding-bottom: clamp(44px, 6vw, 84px); }
.stack .head__title { font-size: clamp(32px, 4vw, 64px); font-weight: 500; }
.stack .head__title em { color: #8d837a; }

/* ── footer base row, FAQ link, and the Process page to the same standard ── */
.faq__all { display: none; margin-top: clamp(16px, 2vw, 28px); }
[data-page='home'] .faq__all { display: block; }
.process--page .flow p { max-width: 32ch; }
.swap, .terms { padding: clamp(44px, 7vh, 96px) var(--pad); }
.swap .head__title, .terms .head__title { font-size: clamp(28px, 3.3vw, 52px); font-weight: 500; }
.swap__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 96px); max-width: 1000px; margin: clamp(28px, 5vh, 60px) auto 0; }
.swap__cols li { padding: 14px 0; border-top: 1px solid var(--line); font: 500 clamp(17px, 1.5vw, 22px)/1.25 var(--f-display); letter-spacing: -0.02em; }
.swap__out li { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.terms .creed { margin-top: clamp(28px, 5vh, 60px); }
.terms .creed li { border-top-color: var(--line); }
.terms .more { display: flex; justify-content: center; margin-top: clamp(28px, 5vh, 56px); }
@media (max-width: 900px) { .swap__cols { grid-template-columns: minmax(0, 1fr); } }

/* home pricing: inside one screen */
.services:not(.services--page) { padding-top: clamp(32px, 5vh, 56px); padding-bottom: clamp(28px, 4vh, 48px); }
.services:not(.services--page) .head__title { font-size: clamp(28px, 3.3vw, 52px); }
.services:not(.services--page) .pick { margin-top: clamp(18px, 3vh, 36px); }
.services:not(.services--page) .pick__panel { padding: clamp(20px, 2.6vw, 40px); }
.services:not(.services--page) .pick__tabs button { padding-top: clamp(12px, 2vh, 22px); padding-bottom: clamp(12px, 2vh, 22px); }
.services:not(.services--page) .pick__body { gap: 11px; }
.services:not(.services--page) .every { margin-top: clamp(16px, 2.6vh, 32px); grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 28px; }
.services:not(.services--page) .every li svg { padding: 8px; width: 17px; height: 17px; }
.services:not(.services--page) .more { margin-top: clamp(14px, 2.2vh, 26px); }

/* Contact page: the form band is the first thing on the sheet, so it runs edge to
   edge like the Services band, with no paper showing down the sides. */
[data-page='contact'] .sheet > .start { margin: 0; padding-left: var(--pad); padding-right: var(--pad); border-radius: 0 0 var(--r-xl) var(--r-xl); }

/* ── Contact page: the form sits on paper, not on a second dark wash ───
   The header above is already the dark wash, so repeating it behind a
   floating card read as the same picture twice. Here the form is part of
   the page: no card, no shadow, fields ruled off with hairlines. */
[data-page='contact'] .sheet > .start { background: var(--grain), url(media/sky/whites.webp) center / cover, var(--paper) !important; color: var(--ink); border-radius: 0; padding-top: clamp(40px, 6vh, 80px); }
[data-page='contact'] .start .label, [data-page='contact'] .start .label span { color: var(--muted); }
[data-page='contact'] .start__how li, [data-page='contact'] .start__how li:last-child { border-color: var(--line); }
[data-page='contact'] .start__direct a { background: transparent; box-shadow: inset 0 0 0 1px rgba(18, 14, 11, 0.22); }
[data-page='contact'] .start__direct a:hover { background: var(--ink); color: var(--paper); }
[data-page='contact'] .form { padding: 0 0 0 clamp(24px, 4vw, 72px); border-radius: 0; background: none; box-shadow: none; border-left: 1px solid var(--line); }
[data-page='contact'] .field input, [data-page='contact'] .field textarea { background: rgba(18, 14, 11, 0.045); }
@media (max-width: 900px) { [data-page='contact'] .form { padding: 0; border-left: 0; } }

/* a client's star rating above their words */
.rev__stars { display: flex; gap: 3px; font-size: 17px; line-height: 1; color: #f2c230; }
.rev__stars .off { color: rgba(18, 14, 11, 0.16); }

/* one or two reviews: shown once, standing still, larger */
.reviews__few { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); margin-top: clamp(20px, 2.4vw, 36px); padding: 0 var(--pad); }
.reviews__few .rev { width: auto; max-width: 46em; padding: 0; border-left: 0; }
.reviews__few .rev:only-child blockquote { font-size: clamp(22px, 2.3vw, 36px); line-height: 1.2; }
@media (max-width: 900px) { .reviews__few { grid-auto-flow: row; } }
.rev blockquote { margin: 0; }

/* ── reviews as cards ──────────────────────────────────────────────────
   One review: a single large card in the middle. Two: side by side.
   Three or more: smaller cards passing as a carousel. Everything on a
   card is centred, with the person's face beside their name. */
.reviews { padding: clamp(44px, 7vh, 88px) 0 clamp(16px, 3vh, 36px); }
.reviews .label { display: flex; justify-content: center; padding: 0 var(--pad); }
.rev {
  flex: none; display: grid; justify-items: center; align-content: start; gap: clamp(16px, 2.2vh, 26px);
  width: clamp(300px, 30vw, 440px); margin: 0 clamp(8px, 0.9vw, 14px); padding: clamp(24px, 2.6vw, 40px);
  border: 0; border-radius: 28px; text-align: center;
  background: linear-gradient(180deg, #fdfbf7, #f4eee4);
  box-shadow: inset 0 0 0 1px rgba(18, 14, 11, 0.07), inset 0 1px 0 #fff, 0 2px 4px rgba(18, 14, 11, 0.04), 0 30px 60px -36px rgba(18, 14, 11, 0.32);
}
.rev__stars { justify-content: center; font-size: 18px; }
.rev blockquote { margin: 0; font: 500 clamp(17px, 1.35vw, 21px)/1.4 var(--f-display); letter-spacing: -0.02em; color: var(--ink); text-wrap: pretty; }
.rev figcaption { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 4px; font-size: 14px; color: var(--muted); text-align: left; }
.rev__face { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(18, 14, 11, 0.1); }
.rev__face--none { display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 600 18px var(--f-display); }
.rev__who { display: grid; gap: 1px; }
.rev__who b { font: 600 15.5px/1.25 var(--f-display); letter-spacing: -0.01em; color: var(--ink); }
.reviews__reel { margin-top: clamp(22px, 3.4vh, 40px); padding-block: 12px 48px; margin-bottom: -36px; }
.reviews__few { display: flex; justify-content: center; align-items: stretch; gap: clamp(16px, 2vw, 28px); grid-auto-flow: initial; margin-top: clamp(22px, 3.4vh, 40px); padding: 0 var(--pad) 12px; }
.reviews__few .rev { width: min(100%, 520px); max-width: none; margin: 0; padding: clamp(28px, 3vw, 48px); border-left: 0; }
.reviews--1 .rev { width: min(100%, 860px); padding: clamp(32px, 4.4vw, 68px) clamp(28px, 5vw, 84px); border-radius: 36px; gap: clamp(18px, 3vh, 32px); }
.reviews--1 .rev blockquote, .reviews__few .rev:only-child blockquote { font-size: clamp(21px, 2.1vw, 32px); line-height: 1.28; letter-spacing: -0.03em; }
.reviews--1 .rev__stars { font-size: 22px; gap: 5px; }
.reviews--1 .rev__face { width: 56px; height: 56px; }
@media (max-width: 900px) { .reviews__few { flex-direction: column; align-items: center; } }