/* Layout concept: a stark white studio wall. One heavy black headline that types itself,
   a drifting arc of grey working files behind a blurred "locked character" portrait, then
   full-screen framed cases that slide over the pinned hero. Black, white and one red.
   The page ends on a black wall with the contact details. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --ink: #0a0a0a;
  --soft: #6b6b6b;
  --faint: #a9a9a9;
  --line: #d9d9d9;
  --wash: #f4f4f2;
  --signal: #dc1f19;
  --signal-ink: #ffffff;
  --signal-night: #ff4338;
  --night: #0a0a0a;
  --night-ink: #ffffff;
  --night-soft: #a3a3a3;
  --night-line: #2e2e2e;
  --c1: var(--signal);
  --c2: var(--signal);
  --c3: var(--signal);
  --c4: var(--signal);

  --heavy: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body: "Hanken Grotesk", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Spline Sans Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --gutter-l: max(clamp(16px, 2.4vw, 32px), env(safe-area-inset-left, 0px));
  --gutter-r: max(clamp(16px, 2.4vw, 32px), env(safe-area-inset-right, 0px));
  --band: clamp(64px, 9vw, 128px);
  --header-h: 68px;
  --ease: cubic-bezier(.2, .75, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { max-width: 62ch; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.soft { color: var(--soft); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.caps { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; font-size: 0.8125rem; }

h2 { font-family: var(--heavy); font-weight: 900; font-stretch: 112%; text-transform: uppercase; line-height: 0.98; letter-spacing: -0.01em; font-size: clamp(2rem, 5vw, 4rem); text-wrap: balance; }
h3 { font-family: var(--heavy); font-weight: 800; font-stretch: 105%; line-height: 1.1; font-size: clamp(1.15rem, 1.8vw, 1.4rem); text-wrap: balance; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
.finale :focus-visible { outline-color: var(--signal-night); }

.skip { position: absolute; left: var(--gutter-l); top: -100px; z-index: 60; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 6px; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { max-width: 1320px; margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }

/* Intro: the logo draws in, turns red and shrinks to a dot; the page then opens from that dot.
   Without JavaScript it runs on CSS timers alone and never blocks the page. With JavaScript, the
   opening waits for the portrait to load (html.go). */
.veil { position: fixed; inset: 0; z-index: 80; background: var(--bg); display: grid; place-items: center; pointer-events: none; animation: veil-out .45s ease 2.25s both; }
.veil .logo { width: 72px; height: 72px; font-size: 2.05rem; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  animation: logo-in .5s ease both, logo-dot .24s cubic-bezier(.6, 0, .9, .3) 1.5s forwards, logo-off .3s ease 2.25s forwards; }
.veil .logo i { font-style: normal; animation: fade-in .08s linear .36s both; }
.veil .logo i + i { animation-delay: .52s; }
@keyframes veil-out { to { background-color: transparent; visibility: hidden; } }
@keyframes logo-in { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }
@keyframes logo-dot { 35% { transform: scale(1); background-color: var(--signal); color: var(--signal); border-radius: 8px; } 100% { transform: scale(.09); background-color: var(--signal); color: var(--signal); border-radius: 50%; } }
@keyframes logo-off { to { opacity: 0; } }
.motion .veil { animation: none; }
.motion .veil .logo { animation: logo-in .5s ease both, logo-dot .24s cubic-bezier(.6, 0, .9, .3) 1.5s forwards; }
.motion.go .veil { animation: veil-out .12s linear both; }
.motion.go .veil .logo { animation: logo-in .5s ease both, logo-dot .24s cubic-bezier(.6, 0, .9, .3) 1.5s forwards, logo-off .3s ease forwards; }

/* Header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.top-row { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); max-width: none; }
.mark { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; min-width: 0; }
.logo { flex: none; width: 36px; height: 36px; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-family: var(--heavy); font-weight: 900; font-stretch: 100%; font-size: 1.05rem; letter-spacing: -0.04em; border-radius: 4px; }
.mark .caps { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabs-nav { display: flex; gap: 6px; position: absolute; left: 50%; transform: translateX(-50%); }
.tabs-nav a { text-decoration: none; padding: 5px 9px; text-transform: uppercase; font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.04em; border-radius: 2px; transition: background-color .2s ease, color .2s ease; white-space: nowrap; }
.tabs-nav a { position: relative; min-height: 32px; display: inline-flex; align-items: center; }
.tabs-nav a::after { content: ""; position: absolute; inset: -6px -1px; }
.tabs-nav a:hover { background: var(--wash); }
.tabs-nav a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.tabs-nav a:hover:not([aria-current="page"]) { color: var(--signal); }
/* With JS the black tab is one pill that slides between Work and About */
.tabs-nav .pill { position: absolute; left: 0; top: 50%; height: 32px; margin-top: -16px; width: 0; background: var(--ink); border-radius: 2px; pointer-events: none; transition: transform .45s var(--ease), width .45s var(--ease); }
.js .tabs-nav a { z-index: 1; background: none !important; transition: color .3s ease; }
.view:focus { outline: none; }
.top-links { display: flex; align-items: center; gap: 4px; }
.top-mail { font-weight: 600; font-size: 0.9375rem; text-decoration: none; margin-right: 8px; transition: color .2s ease; }
.top-mail:hover, .ico:hover { color: var(--signal); }
/* Everything in the header turns red on hover */
.logo { transition: background-color .2s ease; }
.mark .caps { transition: color .2s ease; }
.mark:hover .logo { background: var(--signal); }
.mark:hover .caps { color: var(--signal); }
.tabs-nav a[aria-current="page"]:hover { background: var(--signal); }
.tabs-nav .pill { transition: transform .45s var(--ease), width .45s var(--ease), background-color .2s ease; }
.tabs-nav:has(a[aria-current="page"]:hover) .pill { background: var(--signal); }
.ico { position: relative; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; border-radius: 50%; transition: color .2s ease, transform .25s var(--ease); }
.ico:hover { transform: translateY(-2px); }
.ico svg { width: 21px; height: 21px; }
.ico-in { font-family: var(--heavy); font-weight: 900; font-size: 1.2rem; letter-spacing: -0.04em; }
.ico-in::before { content: "in"; content: "in" / ""; }
.tip { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 9px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
.tip:empty { display: none; }

.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--ink); font-weight: 700; font-size: 0.9375rem; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s ease, color .2s ease, transform .2s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-main { background: var(--signal); color: var(--signal-ink); }
.btn-main::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-18deg); transition: left .6s ease; }
.btn-main:hover::after { left: 120%; }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--bg); }
.btn-lg { min-height: 56px; padding: 14px 30px; font-size: 1rem; }
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn .ico-cal { width: 18px; height: 18px; }
.btn:hover .ico-cal { transform: rotate(-8deg) scale(1.1); }

/* Hero */
.deck { position: relative; }
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); padding-top: clamp(12px, 2vw, 26px); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); }
.hero-title { font-family: var(--heavy); font-weight: 900; font-stretch: 100%; text-transform: uppercase; line-height: 0.86; letter-spacing: -0.03em; font-size: clamp(3rem, 8.9vw, 9.2rem); text-align: center; display: flex; flex-wrap: nowrap; justify-content: center; gap: 0 0.28em; position: relative; z-index: 3; padding-inline: 12px; pointer-events: none; }
.hero-title .line { display: inline-flex; white-space: nowrap; min-height: 0.86em; }
.outline { color: transparent; -webkit-text-stroke: 2px var(--ink); }

/* The carousel is the inside of a cylinder: the middle screen is farthest away, the screens at the
   edges curve toward the viewer, grow, blur and fade. --p is each screen's place (0 = middle), set by JS.
   sin and 1 - cos are short Taylor series so this works without CSS trig functions. */
.stage { position: relative; z-index: 4; width: 100%; min-height: clamp(400px, 38vw, 560px);
  --w: clamp(270px, 27vw, 500px); --r: calc(var(--w) * 2.6); --step: 0.44; }
/* perspective sits on .minis, the screens' direct parent, so each screen gets real depth */
.minis { position: absolute; inset: 0; perspective: 1600px; perspective-origin: 50% 45%; }
/* Grab the wall to spin it; vertical swipes still scroll the page on touch screens */
.motion .stage { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.motion .stage .mini { cursor: pointer; -webkit-user-drag: none; }
.motion .stage.dragging, .motion .stage.dragging .mini { cursor: grabbing; }
.mini img { -webkit-user-drag: none; }
.mini { position: absolute; left: 50%; top: 42%; display: block; width: var(--w); aspect-ratio: 1920 / 1320; border-radius: 14px; overflow: hidden; background: var(--bg); cursor: pointer;
  --t: calc(var(--p) * var(--step)); --sin: calc(var(--t) - var(--t) * var(--t) * var(--t) / 6); --cos1: calc(var(--t) * var(--t) / 2 - var(--t) * var(--t) * var(--t) * var(--t) / 24);
  transform: translate(-50%, -50%) translate3d(calc(var(--sin) * var(--r)), 0, calc(var(--cos1) * var(--r) + var(--z, 0px))) rotateY(calc(var(--t) * -1rad)) scale(var(--s, 1));
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(0, 0, 0, .4);
  filter: blur(calc(min(6, max(0, var(--a) - 1.6) * 4) * 1px));
  opacity: calc(1 - max(0, var(--a) - 2.2) * 0.9);
  transition: filter .7s ease, box-shadow .5s ease; }
.mini img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; image-rendering: high-quality; }
/* Hovered (or, on touch screens, the one in the middle): it lifts toward you. Screens stay in full color. */
.mini:hover, .mini.lit { --s: 1.04; --z: 60px; z-index: 1; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 40px 80px -30px rgba(0, 0, 0, .5); }
.mini:hover { filter: blur(0); transition: filter .7s ease, box-shadow .5s ease; }

/* Portrait: a cut-out photo standing in front of the carousel, head over the headline */
/* --rise is how far the photo reaches up into the headline. The photo is pushed down by --drop,
   so the head sits a little lower and the letters stay readable behind it; the hero crops the bottom. */
.me-photo { --rise: clamp(30px, 4.8vw, 80px); --drop: calc(var(--rise) * .55); position: absolute; left: 50%; bottom: calc(var(--drop) * -1); z-index: 2; height: min(calc(100% + var(--rise)), 72vw); width: auto; max-width: none; transform: translateX(-50%); pointer-events: none; -webkit-user-select: none; user-select: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.roles { grid-row: 2; grid-column: 1; align-self: end; margin-bottom: clamp(14px, 3.6vh, 44px); position: relative; z-index: 5; width: 100%; max-width: none; pointer-events: none; display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--me-w, 42vw) + 2 * clamp(14px, 1.6vw, 28px)) minmax(0, 1fr); align-items: center; }
/* --me-w is the photo's real width, measured by JS, so the two lines sit just left and right of it */
.stage { grid-row: 2; grid-column: 1; }
.roles p { font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(0.875rem, 1.5vw, 1.25rem); line-height: 1.2; max-width: 19ch; text-wrap: balance; }
.roles p:first-child { grid-column: 1; justify-self: end; text-align: right; }
.roles p:last-child { grid-column: 3; justify-self: start; }
/* The Explore tab sits on the top edge of the first case card and rides up with it */
.explore { position: absolute; left: 50%; bottom: 100%; z-index: 3; translate: -50% 0; display: grid; justify-items: center; gap: 4px; width: 62px; padding: 14px 0 12px; background: var(--ink); color: var(--bg); border-radius: 31px 31px 0 0; text-decoration: none; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: clamp(0, calc((var(--u, 1) - 0.5) * 8), 1); transition: padding .25s var(--ease), background-color .2s ease; }
.explore:hover, .explore:focus-visible { padding-bottom: 24px; background: var(--signal); }
.explore svg { width: 16px; height: 16px; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.anchor { height: 0; }

/* Framed cases */
.cases { position: relative; z-index: 2; }
.case { position: relative; background: var(--bg); padding: clamp(12px, 1.7vw, 24px) var(--gutter-r) clamp(12px, 1.7vw, 24px) var(--gutter-l); border-top: 1px solid var(--line); }
.frame { position: relative; border: 1px solid var(--line); padding: clamp(14px, 1.7vw, 24px); height: 100%; }
.frame::before, .frame::after { content: ""; position: absolute; left: 50%; width: 1px; height: 10px; background: var(--faint); }
.frame::before { top: 0; }
.frame::after { bottom: 0; }
.frame-label { position: absolute; top: 5px; left: clamp(14px, 1.7vw, 24px); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.frame-in { position: relative; border: 1px solid var(--line); height: 100%; display: grid; align-items: center; gap: 24px clamp(24px, 5vw, 80px); padding: clamp(20px, 3.4vh, 48px) clamp(18px, 4vw, 64px); overflow: hidden; }
.frame-in::before, .frame-in::after { content: ""; position: absolute; top: 50%; width: 10px; height: 1px; background: var(--faint); }
.frame-in::before { left: -18px; }
.frame-in::after { right: -18px; }
.case-copy { display: grid; gap: 16px; justify-items: center; text-align: center; min-width: 0; }
.case-when { font-family: var(--mono); font-size: 0.8125rem; color: var(--soft); }
.case-title { font-size: clamp(2.4rem, 5.6vw, 5rem); line-height: 0.98; text-wrap: balance; text-transform: none; letter-spacing: 0; font-stretch: 100%; }
.t-serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.t-serif em { font-style: italic; }
.t-light { font-family: var(--body); font-weight: 300; letter-spacing: -0.035em; }
.t-heavy { font-family: var(--heavy); font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.03em; font-style: italic; font-size: clamp(2.1rem, 5vw, 4.4rem); }
.t-mono { font-family: var(--mono); font-weight: 500; letter-spacing: -0.05em; font-size: clamp(2rem, 4.6vw, 4rem); }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; color: var(--soft); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; max-width: none; }
.case-result { font-size: clamp(1rem, 1.5vw, 1.1875rem); max-width: 34ch; }
.case-result b { font-weight: 700; }
.case-visual { display: grid; place-items: center; min-width: 0; perspective: 1400px; }

/* Line-drawn devices */
.tablet { width: min(clamp(300px, 40vw, 600px), calc((100vh - var(--header-h) - 200px) * 1.4)); aspect-ratio: 1960 / 1360; border-radius: 26px; padding: 14px; background: #0a0a0a; box-shadow: 0 0 0 1.5px #2a2a2a inset, 0 44px 80px -40px rgba(0, 0, 0, .45); transform: rotateY(calc(var(--ry, 16deg) * (1 + var(--u, 0) * 2.2))) rotateX(calc(7deg + var(--u, 0) * 14deg)) rotateZ(calc(var(--rz, -4deg) * (1 + var(--u, 0) * 1.4))); animation: float 7s ease-in-out infinite; }
.tablet img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border-radius: 12px; background: #fff; }
.case:nth-child(odd) .tablet { --ry: -16deg; --rz: 4deg; animation-delay: -3s; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.screen { height: 100%; border-radius: 35px; background: #f5f5f3; padding: 28px 18px 22px; display: grid; gap: 13px; align-content: start; overflow: hidden; position: relative; }
.s-label { display: flex; align-items: center; gap: 6px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--soft); }
.s-big { font-family: var(--heavy); font-weight: 900; font-stretch: 110%; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1; letter-spacing: -0.03em; }
.s-sub { font-size: 0.75rem; line-height: 1.3; color: var(--soft); }
.s-row { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.6875rem; color: var(--soft); }
.bub { height: 26px; width: 70%; background: #e6e6e3; border-radius: 13px 13px 13px 4px; }
.bub.r { justify-self: end; width: 52%; border-radius: 13px 13px 4px 13px; background: #d6d6d3; }
.bub.offer { justify-self: end; width: 64%; height: 32px; border-radius: 13px 13px 4px 13px; background: var(--tint); display: grid; place-items: center; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--signal-ink); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; height: 120px; margin-top: 4px; }
.pair div { display: grid; gap: 4px; align-content: end; height: 100%; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--soft); text-align: center; }
.pair i { display: block; border-radius: 8px 8px 3px 3px; background: #d6d6d3; height: 25%; transform-origin: 50% 100%; }
.pair div:last-child i { height: 100%; background: var(--tint); }
.pair div { grid-template-rows: 1fr auto; }
.pair div i { align-self: end; }
.slope { position: relative; height: 96px; margin-block: 4px; }
.slope svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.slope line { stroke: var(--tint); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.slope .base { stroke: #dcdcd9; stroke-width: 1; }
.slope span { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--tint); }
.slope span:first-of-type { left: 4%; top: 92%; background: #bdbdbd; }
.slope span:last-of-type { left: 96%; top: 8%; }
.thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.thumbs i { display: block; aspect-ratio: 16 / 10; border-radius: 8px; background: #e6e6e3; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.feed { display: grid; gap: 8px; }
.feed i { display: block; height: 10px; border-radius: 5px; background: #e2e2df; width: 80%; animation: feed 4.8s ease-in-out infinite; animation-delay: calc(var(--n) * .5s); }
.feed i:nth-child(even) { width: 56%; }
.feed i:nth-child(3n) { width: 68%; background: color-mix(in srgb, var(--tint) 45%, #e2e2df); }
@keyframes feed { 0%, 8% { opacity: 0; transform: translateY(6px); } 16%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 5px; text-align: center; font-size: 0.5625rem; font-weight: 700; color: var(--soft); text-transform: uppercase; }
.week i { display: block; aspect-ratio: 1; width: 78%; justify-self: center; border-radius: 50%; background: #e2e2df; animation: fill 6s steps(1) infinite; animation-delay: calc(var(--n) * .22s); }
@keyframes fill { 0% { background: #e2e2df; } 12%, 88% { background: var(--tint); } 100% { background: #e2e2df; } }
.checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.checks span { border: 1.5px solid #cfcfcc; border-radius: 10px; padding: 8px 4px; text-align: center; font-family: var(--mono); font-size: 0.75rem; animation: check 6s ease-in-out infinite; animation-delay: calc(var(--n) * 1.1s + 1.6s); }
@keyframes check { 0%, 10% { background: transparent; color: var(--ink); border-color: #cfcfcc; } 18%, 80% { background: var(--tint); color: #fff; border-color: var(--tint); } 100% { background: transparent; color: var(--ink); border-color: #cfcfcc; } }

/* Bands */
.band { padding-block: var(--band); border-top: 1px solid var(--line); background: var(--bg); position: relative; }
.band-head { display: grid; gap: 16px; margin-bottom: clamp(32px, 5vw, 56px); }
.band-head p { color: var(--soft); }
.split { display: grid; gap: clamp(32px, 5vw, 72px); }

.services { display: grid; gap: 0 48px; border-top: 1.5px solid var(--ink); }
.services > div { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; min-width: 0; }
.services dt { font-family: var(--heavy); font-weight: 800; font-stretch: 105%; font-size: 1.25rem; line-height: 1.2; transition: transform .3s var(--ease); }
.services > div:hover dt { transform: translateX(8px); }
.services dd { color: var(--soft); font-size: 1rem; }


/* Samples */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tab { min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; cursor: pointer; font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.tab:hover { border-color: var(--signal); color: var(--signal); background: transparent; }
.tab[aria-selected="true"] { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.sheet { background: var(--wash); border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 3.5vw, 44px); display: grid; gap: 24px; min-width: 0; }
.sheet + .sheet { margin-top: 24px; }
.sheet-flag { justify-self: start; background: var(--signal); color: var(--signal-ink); padding: 5px 12px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; }
.sheet h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); text-transform: uppercase; font-weight: 900; font-stretch: 112%; }
.sheet h4 { font-family: var(--body); font-size: 1rem; font-weight: 700; }
.sheet p, .sheet li { font-size: 1rem; }
.sheet .meta { color: var(--soft); font-size: 0.9375rem; margin-top: 6px; }
.scroll { overflow-x: auto; min-width: 0; -webkit-overflow-scrolling: touch; }
.sheet table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 0.9375rem; }
.sheet th, .sheet td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); }
.sheet th { font-weight: 700; color: var(--soft); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.sheet td.num, .sheet th.num { text-align: right; padding-right: 18px; }
.sheet td.num { font-size: 0.875rem; }
.sheet td:first-child { white-space: nowrap; font-weight: 700; }
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--faint); font-size: 0.8125rem; white-space: nowrap; }
.chip-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sop { counter-reset: sop; border-top: 1px solid var(--line); }
.sop li { counter-increment: sop; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 2px 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sop li::before { content: counter(sop); font-family: var(--mono); font-size: 0.875rem; color: var(--soft); padding-top: 3px; grid-row: span 2; }
.sop strong { font-weight: 700; }
.sop span { color: var(--soft); }
.sheet-cols { display: grid; gap: 24px; }
.plain { display: grid; gap: 8px; padding-left: 1.1em; list-style: disc; margin-top: 8px; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.kpis div { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.kpis dt { order: 2; font-size: 0.875rem; color: var(--soft); }
.kpis dd { color: var(--signal); font-family: var(--heavy); font-weight: 900; font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.bars { display: grid; gap: 10px; }
.bars li { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) 3.5rem; gap: 12px; align-items: center; font-size: 0.9375rem; }
.bars i { display: block; height: 16px; border-radius: 3px; background: var(--ink); }
.bars li:first-child i { background: var(--signal); }
.bars .num { text-align: right; font-size: 0.875rem; }

/* Background */
.timeline { border-top: 1.5px solid var(--ink); }
.timeline li { display: grid; gap: 6px 32px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.timeline .when { font-family: var(--mono); font-size: 0.8125rem; color: var(--soft); padding-top: 3px; }
.timeline .org { display: inline-block; margin-top: 6px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: var(--wash); border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; }
.timeline p { color: var(--soft); font-size: 1rem; margin-top: 8px; }
.side { display: grid; gap: 40px; align-content: start; }
.side h3 { margin-bottom: 12px; }
.side li { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.side ul { border-top: 1.5px solid var(--ink); }
.side li span { color: var(--soft); font-size: 0.9375rem; }

/* Finale: black wall with contact */
.finale { background: var(--night); color: var(--night-ink); padding-block: var(--band) 0; position: relative; }
.finale h2 { font-size: clamp(2.6rem, 5.9vw, 5.6rem); font-stretch: 125%; letter-spacing: -0.035em; line-height: 0.9; }
.finale h2 span { display: block; }
.finale h2 .outline { -webkit-text-stroke-color: var(--night-ink); }
.book { display: grid; gap: 24px; justify-items: start; align-content: start; }
.book p { color: var(--night-soft); }
.finale .btn-main { border-color: var(--signal); }
.btn-main { border-color: var(--signal); }
.reach { border-top: 1px solid var(--night-line); }
.reach li { border-bottom: 1px solid var(--night-line); }
.reach-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; padding: 18px 4px; background: none; border: 0; text-align: left; text-decoration: none; cursor: pointer; min-height: 72px; color: inherit; }
.reach-kind { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--night-soft); grid-column: 1; }
.reach-value { font-family: var(--heavy); font-weight: 800; font-size: clamp(1.1rem, 2.1vw, 1.5rem); line-height: 1.2; grid-column: 1; overflow-wrap: anywhere; user-select: all; transition: color .15s ease, transform .3s var(--ease); }
.reach-row:hover .reach-value { color: var(--signal-night); transform: translateX(8px); }
.reach-do { grid-column: 2; grid-row: 1 / span 2; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 7px 13px; border: 1px solid var(--night-ink); border-radius: 999px; white-space: nowrap; }
.reach-row.is-done .reach-do { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { transform: scale(.8); } to { transform: scale(1); } }
.foot { margin-top: var(--band); border-top: 1px solid var(--night-line); padding-block: 28px; color: var(--night-soft); font-size: 0.875rem; }
.foot-row { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: center; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot nav a { padding-block: 8px; text-underline-offset: 4px; }
.foot .logo { background: var(--night-ink); color: var(--night); text-decoration: none; transition: background-color .2s ease, color .2s ease, transform .3s var(--ease); }
.foot .logo:hover { background: var(--signal); color: #fff; transform: rotate(-8deg) scale(1.08); }
.foot-id { display: flex; align-items: center; gap: 12px; }

/* Case studies page */
.page-head { padding-block: clamp(32px, 5vw, 72px) clamp(32px, 4vw, 56px); display: grid; gap: 20px; }
.page-head h1 { font-family: var(--heavy); font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: 0.88; letter-spacing: -0.035em; font-size: clamp(2.8rem, 10vw, 9rem); }
.page-head p { color: var(--soft); }
.nda { border: 1px solid var(--line); background: var(--wash); border-radius: 12px; padding: 14px 18px; color: var(--soft); font-size: 0.9375rem; max-width: 62ch; }
.study { border-top: 1.5px solid var(--ink); padding-block: clamp(40px, 6vw, 80px); display: grid; gap: 28px clamp(32px, 5vw, 80px); }
.study-meta { display: grid; gap: 12px; align-content: start; min-width: 0; }
.study-meta .frame-label { position: static; }
.study-meta h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1; text-transform: none; letter-spacing: 0; font-stretch: 100%; }
.study-meta h2.t-heavy { text-transform: uppercase; font-stretch: 125%; letter-spacing: -0.03em; font-size: clamp(1.9rem, 3.6vw, 3rem); }
.study-meta h2.t-mono { font-size: clamp(1.8rem, 3.4vw, 2.8rem); letter-spacing: -0.05em; }
.study-meta .when { font-family: var(--mono); font-size: 0.8125rem; color: var(--soft); }
.study-body { display: grid; gap: 28px; min-width: 0; }
.study-result { display: grid; gap: 6px; }
.study-result b { font-family: var(--heavy); font-weight: 900; font-stretch: 118%; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 0.95; letter-spacing: -0.03em; }
.study-result b small { font-size: 0.5em; font-stretch: 100%; padding-inline: 0.15em; }
.study-result span { color: var(--soft); }
.study-result::before { content: ""; width: 44px; height: 8px; border-radius: 4px; background: var(--signal); }
.study-meta h3 { margin-bottom: 10px; text-transform: uppercase; font-size: 0.875rem; letter-spacing: 0.05em; font-stretch: 100%; }
.ran { border-top: 1px solid var(--line); }
.ran li { padding: 12px 0; border-bottom: 1px solid var(--line); }

/* About page */
.about-top { padding-block: clamp(28px, 5vw, 72px) var(--band); }
.about-grid { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; }
.me-tile { position: relative; overflow: hidden; width: 100%; max-width: 440px; aspect-ratio: 4 / 5; background: var(--wash); border: 1px solid var(--line); border-radius: 22px; }
.me-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.bio { display: grid; gap: 20px; justify-items: start; }
.bio h1 { font-family: var(--heavy); font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: 0.88; letter-spacing: -0.035em; font-size: clamp(2.8rem, 8vw, 7rem); }
.bio p { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; max-width: 56ch; }
.bio p:first-of-type { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -0.01em; max-width: 26ch; }

/* Motion that waits for JS */
.motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s var(--ease); transition-delay: var(--d, 0s); }
.motion .reveal.in { opacity: 1; transform: none; }
.motion .case .case-visual { opacity: 0; translate: 0 60px; scale: .94; transition: opacity .9s ease, translate 1s var(--ease), scale 1s var(--ease); }
.motion .case .case-copy > * { opacity: 0; translate: 0 22px; transition: opacity .7s ease, translate .7s var(--ease); }
.motion .case.in .case-visual, .motion .case.in .case-copy > * { opacity: 1; translate: none; scale: none; }
.motion .case .btn { transition: opacity .7s ease, translate .7s var(--ease), background-color .2s ease, color .2s ease, transform .2s var(--ease); }
/* Scroll-scrubbed: while a case slides up, its title leans and its tablet is turned away; both settle as it lands */
.motion .case-title { transform: skewX(calc(var(--u, 0) * -16deg)); transform-origin: 50% 100%; }
.motion .case.in .case-copy > :nth-child(2) { transition-delay: .08s; }
.motion .case.in .case-copy > :nth-child(3) { transition-delay: .16s; }
.motion .case.in .case-copy > :nth-child(4) { transition-delay: .24s; }
.motion .case.in .case-copy > :nth-child(5) { transition-delay: .32s; }
.motion .case .pair i { transform: scaleY(0); transition: transform 1s var(--ease) .5s; }
.motion .case.in .pair i { transform: scaleY(1); }
.motion .case .slope svg { clip-path: inset(-10% 100% -10% -10%); transition: clip-path 1.2s var(--ease) .5s; }
.motion .case.in .slope svg { clip-path: inset(-10% -10% -10% -10%); }
/* Opening, after the intro dot (html.go, until html.done): the portrait opens from the dot as a red
   silhouette that settles into the photo, while the headline, screens, lines and header fade in. */
.me-red { display: none; filter: url(#duo); }
.motion:not(.go) .hero-title .line, .motion:not(.go) .me-photo, .motion:not(.go) .minis, .motion:not(.go) .roles, .motion:not(.go) .explore, .motion:not(.go) .top { opacity: 0; }
.motion.go:not(.done) .hero-title .line { animation: fade-in .9s ease both; }
.motion.go:not(.done) .me-photo { animation: me-open .75s cubic-bezier(.3, .6, .2, 1) both; }
.motion.go:not(.done) .me-red { display: block; animation: me-open .75s cubic-bezier(.3, .6, .2, 1) both, logo-off .5s ease .42s forwards; }
.motion.go:not(.done) #about, .motion.go:not(.done) #samples { animation: fade-in .6s ease both; }
@keyframes me-open { from { clip-path: circle(3px at var(--cx, 50%) var(--cy, 42%)); } to { clip-path: circle(150% at var(--cx, 50%) var(--cy, 42%)); } }
.motion.go:not(.done) .minis { animation: fade-in 1.1s ease .25s both; }
.motion.go:not(.done) .roles { animation: fade-in .7s ease .8s both; }
.motion.go:not(.done) .top { animation: fade-in .6s ease 1.1s both; }
.motion.go:not(.done) .explore { animation: tab-in .7s var(--ease) 1.25s backwards; }
@keyframes tab-in { from { translate: -50% 100%; } to { translate: -50% 0; } }
.type .outline { animation: none; }
.motion .sheet { animation: sheet-in .5s var(--ease) both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.motion .bars i { transform-origin: 0 50%; animation: bar-grow .9s var(--ease) .25s both; }
.motion .bars li:nth-child(2) i { animation-delay: .37s; }
.motion .bars li:nth-child(3) i { animation-delay: .49s; }
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Wider screens */
@media (min-width: 640px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sheet-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results { grid-template-columns: repeat(2, minmax(0, max-content)); }
  .timeline li { grid-template-columns: 12rem minmax(0, 1fr); }
}
@media (min-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .frame-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .case:nth-child(odd) .case-visual { order: 2; }
  .split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .split > .band-head { margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
  .split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .split-wide { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .study-meta { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; column-gap: clamp(32px, 5vw, 80px); }
  .study-meta .frame-label { grid-column: 1 / -1; }
  .study-meta .soft { max-width: 56ch; }
}
/* Cases stack over one another only when a whole case fits on screen */
@media (min-width: 900px) and (min-height: 700px) {
  .case, .hero { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); }
  .motion .hero > * { opacity: calc(1 - var(--cover, 0) * .55); }
  .motion .hero-title { transform: translateY(calc(var(--cover, 0) * -24px)); }
}
@media (max-width: 1259px) { .top-mail { display: none; } }
@media (max-width: 1099px) {
  .tabs-nav { position: static; transform: none; }
  :root { --header-h: 60px; }
}
@media (max-width: 899px) {
  .case-visual { order: -1; }
  .frame-in::before, .frame-in::after { display: none; }
  .tablet { width: min(72vw, 440px); padding: 9px; border-radius: 18px; --ry: 10deg; --rz: -3deg; }
  .case:nth-child(odd) .tablet { --ry: -10deg; --rz: 3deg; }
  .tablet img { border-radius: 8px; }
  .hero-title { font-size: clamp(3rem, 8.6vw, 9.2rem); }
  .roles { grid-row: 3; align-self: auto; margin-bottom: 0; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 4px; padding-block: 14px 84px; background: var(--bg); }
  .roles p, .roles p:first-child, .roles p:last-child { grid-column: 1; justify-self: center; text-align: center; transform: none; max-width: 32ch; padding: 0; }
  .roles p:last-child { color: var(--soft); }
  .hero { min-height: 0; }
  .stage { height: clamp(380px, 66vw, 560px); min-height: 0; --w: clamp(240px, 44vw, 400px); }
  .me-photo { --rise: 18px; --drop: 4px; }
  .mini { top: 50%; }
}
@media (max-width: 520px) {
  .hero-title { font-size: 16.4vw; flex-direction: column; align-items: center; }
  .hero-title .type { min-width: 0 !important; justify-content: center; }
  .btn-lg { padding-inline: 22px; font-size: 0.9375rem; max-width: 100%; }
  .stage { height: 420px; --w: 62vw; --r: calc(var(--w) * 3); }
  .top-links { display: none; }
  .mark .caps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .top-row { gap: 10px; }
  .top .btn { padding-inline: 14px; }
  .reach-row { grid-template-columns: minmax(0, 1fr); padding-block: 16px; }
  .reach-do { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
  .bars li { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr) 3.25rem; gap: 8px; }
  .outline { -webkit-text-stroke-width: 1.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .veil { display: none; }
  .case { position: relative !important; height: auto !important; }
  .hero { position: static !important; height: auto !important; }
}

.s-rule { height: 1px; background: #dcdcd9; margin-block: 4px; }
.mini-bars { display: grid; gap: 7px; }
.mini-bars i { display: block; height: 9px; border-radius: 5px; background: #dcdcd9; }
.mini-bars i:first-child { width: 92%; background: var(--tint); }
.mini-bars i:nth-child(2) { width: 60%; }
.mini-bars i:nth-child(3) { width: 48%; }

/* Work cards: funnel and lead board screens */
.funnel { display: grid; gap: 9px; margin-top: 2px; }
.funnel span { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.625rem; color: var(--soft); }
.funnel i { display: block; height: 18px; width: calc(var(--w) * 2); max-width: 100%; border-radius: 4px; background: #d6d6d3; transform-origin: 0 50%; animation: grow 6s var(--ease) infinite; }
.funnel span:nth-child(2) i { background: var(--tint); animation-delay: .25s; }
.funnel span:nth-child(3) i { animation-delay: .5s; }
@keyframes grow { 0% { transform: scaleX(0); } 18%, 86% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.leads { display: grid; gap: 7px; }
.leads span { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #e9e9e6; animation: feed 6s ease-in-out infinite; }
.leads span:nth-child(2) { animation-delay: .4s; } .leads span:nth-child(3) { animation-delay: .8s; } .leads span:nth-child(4) { animation-delay: 1.2s; } .leads span:nth-child(5) { animation-delay: 1.6s; }
.leads i { display: block; height: 8px; border-radius: 4px; background: #d2d2cf; width: 80%; }
.leads b { font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 7px; border-radius: 999px; border: 1px solid #c6c6c3; color: var(--soft); }
.leads b.hot { background: var(--tint); border-color: var(--tint); color: var(--signal-ink); }

/* Work sample pages and case sheets */
.sheet .nda { max-width: none; }
.page-head .btn { justify-self: start; }
@media (prefers-reduced-motion: reduce) {
  .funnel i, .leads span { animation: none; }
}

/* ---------- Work samples: Notion pages rebuilt in HTML ---------- */
.sample-tabs { margin: 0 0 4px; }
.sample-tabs .num { font-size: 0.75rem; opacity: .6; }
.tab .num { margin-right: 2px; }
.study { gap: 24px; }
.study:focus { outline: none; }
.nwin {
  --n-ink: #37352f; --n-soft: #6b6a66; --n-line: #e9e9e7; --n-wash: #f7f6f3;
  --n-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --n-mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", Courier, monospace;
  position: relative; min-width: 0; background: #fff; color: var(--n-ink); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .03), 0 40px 80px -48px rgba(0, 0, 0, .35);
  font-family: var(--n-font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
.nwin-bar { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 8px 14px; border-bottom: 1px solid var(--n-line); background: #fbfbfa; font-size: 14px; }
.nwin-dots { display: flex; gap: 6px; flex: none; }
.nwin-dots i { width: 11px; height: 11px; border-radius: 50%; background: #e3e2e0; }
.nwin-crumb { display: flex; gap: 6px; min-width: 0; flex: 1; color: var(--n-soft); white-space: nowrap; }
.nwin-crumb > span:last-child { color: var(--n-ink); overflow: hidden; text-overflow: ellipsis; }
.nwin-flag { flex: none; font-size: 12px; font-weight: 600; color: #b3150f; background: #fdebec; border-radius: 999px; padding: 2px 10px; }
.npage { max-width: 900px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) clamp(16px, 6vw, 96px) clamp(40px, 6vw, 88px); }
.npage-db { max-width: none; padding-inline: clamp(16px, 3vw, 40px); }
.n-icon { font-size: clamp(56px, 7vw, 78px); line-height: 1; margin-bottom: 18px; }
.npage .n-title { font-family: var(--n-font); font-weight: 700; font-stretch: 100%; text-transform: none; letter-spacing: 0; font-size: clamp(28px, 4vw, 40px); line-height: 1.2; color: var(--n-ink); margin-bottom: 16px; text-wrap: pretty; }
.npage-db .n-title { font-size: clamp(26px, 3vw, 32px); margin-bottom: 10px; }
.npage p { margin: 2px 0; padding: 3px 0; max-width: none; }
.npage b { font-weight: 600; }
.npage a { color: inherit; text-decoration: underline; text-decoration-color: rgba(55, 53, 47, .4); text-underline-offset: 2px; }
.npage a:hover { text-decoration-color: var(--n-ink); }
.npage .n-h2, .npage .n-h3 { font-family: var(--n-font); font-stretch: 100%; text-transform: none; letter-spacing: 0; line-height: 1.3; color: var(--n-ink); }
.npage .n-h2 { font-size: 1.5em; font-weight: 600; margin: 1.6em 0 4px; }
.npage .n-h3 { font-size: 1.25em; font-weight: 600; margin: 1.2em 0 4px; }
.n-hr { border: 0; border-top: 1px solid var(--n-line); margin: 18px 0; }
.n-callout { display: flex; gap: 10px; padding: 16px 18px 16px 14px; border-radius: 10px; margin: 6px 0; }
.n-callout .n-ico { flex: none; width: 24px; text-align: center; font-size: 1.1em; line-height: 1.45; }
.n-callout > div { min-width: 0; flex: 1; }
.n-callout p:first-child { padding-top: 0; }
.n-ul, .n-ol, .n-todo { margin: 2px 0; padding-left: 1.7em; }
.n-ul { list-style: disc; }
.n-ol { list-style: decimal; }
.n-ul li, .n-ol li { padding: 3px 0 3px 4px; }
.n-todo { list-style: none; padding-left: 2px; }
.n-todo li { display: flex; gap: 10px; padding: 3px 0; }
.n-todo i { flex: none; width: 16px; height: 16px; margin-top: 4px; border: 1.5px solid var(--n-ink); border-radius: 3px; }
.n-toc { margin: 8px 0; }
.n-toc li { font-size: 14px; }
.n-toc a { display: inline-block; padding: 4px 2px; color: var(--n-soft); text-decoration: none; border-bottom: 1px solid rgba(55, 53, 47, .16); line-height: 1.3; }
.n-toc a:hover { color: var(--n-ink); background: rgba(55, 53, 47, .06); }
.n-toc .n-toc-3 { padding-left: 22px; }
.n-scroll { overflow-x: auto; min-width: 0; margin: 6px 0; -webkit-overflow-scrolling: touch; }
.n-scroll:focus-visible { outline-offset: 2px; }
.n-table { border-collapse: collapse; font-size: 14px; line-height: 1.5; min-width: 100%; }
.n-table th, .n-table td { border: 1px solid var(--n-line); padding: 7px 9px; text-align: left; vertical-align: top; min-width: 110px; max-width: 280px; font-weight: 400; }
.n-table .n-th { background: var(--n-wash); font-weight: 600; }
.n-numbered tr > :first-child { min-width: 0; width: 44px; }
.n-code { background: var(--n-wash); border-radius: 10px; }
.n-code pre { margin: 0; padding: 28px 22px; font-family: var(--n-mono); font-size: 13px; line-height: 1.55; white-space: pre; color: var(--n-ink); }
.n-toggle { margin: 4px 0; }
.n-toggle summary { cursor: pointer; list-style: none; display: flex; gap: 8px; padding: 3px 0; border-radius: 4px; }
.n-toggle summary::-webkit-details-marker { display: none; }
.n-toggle summary::before { content: ""; flex: none; width: 0; height: 0; margin: 8px 2px 0 4px; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; transition: transform .2s ease; }
.n-toggle[open] summary::before { transform: rotate(90deg); }
.n-toggle > div { padding-left: 24px; }
.n-toggle summary:hover { background: rgba(55, 53, 47, .06); }
/* Notion colors: text, then backgrounds */
.npage .n-gray { color: #6b6a66; } .npage .n-brown { color: #8a5a44; } .npage .n-orange { color: #a85a07; } .npage .n-yellow { color: #8c6418; } .npage .n-green { color: #448361; }
.npage .n-blue { color: #2a6f98; } .npage .n-purple { color: #9065b0; } .npage .n-pink { color: #c14c8a; } .npage .n-red { color: #b93a35; }
.npage .n-gray_bg { background: #f1f1ef; } .npage .n-brown_bg { background: #f4eeee; } .npage .n-orange_bg { background: #fbecdd; } .npage .n-yellow_bg { background: #fbf3db; }
.npage .n-green_bg { background: #edf3ec; } .npage .n-blue_bg { background: #e7f3f8; } .npage .n-purple_bg { background: #f6f3f9; } .npage .n-pink_bg { background: #faf1f5; } .npage .n-red_bg { background: #fdebec; }
.npage .n-table td.n-gray { color: #6b6a66; }
/* Database: views, tags, board, calendar */
.n-dbbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--n-line); margin-bottom: 14px; padding-bottom: 6px; }
.n-views { display: flex; gap: 2px; overflow-x: auto; }
.n-view { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--n-soft); font: 500 14px/1.2 var(--n-font); cursor: pointer; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.n-view svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.n-view:hover { background: rgba(55, 53, 47, .06); }
.n-view[aria-selected="true"] { background: rgba(55, 53, 47, .08); color: var(--n-ink); }
.n-new-btn { flex: none; background: #2383e2; color: #fff; font-size: 14px; font-weight: 600; padding: 4px 12px; border-radius: 6px; }
.n-tag, .n-status { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 6px; border-radius: 4px; font-size: 12px; line-height: 1; white-space: nowrap; color: #32302c; }
.n-status { border-radius: 999px; padding: 0 8px 0 7px; }
.n-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.n-tag-gray { background: #e3e2e0; --dot: #91918e; } .n-tag-brown { background: #eee0da; --dot: #a27763; } .n-tag-orange { background: #fadec9; --dot: #cc782f; }
.n-tag-yellow { background: #fdecc8; --dot: #c29343; } .n-tag-green { background: #dbeddb; --dot: #548164; } .n-tag-blue { background: #d3e5ef; --dot: #5b97bd; }
.n-tag-purple { background: #e8deee; --dot: #a48bbe; } .n-tag-pink { background: #f5e0e9; --dot: #b35488; }
.n-db { border-collapse: collapse; font-size: 14px; min-width: 1180px; width: 100%; }
.n-db th { font-weight: 500; color: var(--n-soft); text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--n-line); white-space: nowrap; }
.n-db td { padding: 7px 8px; border-top: 1px solid var(--n-line); border-bottom: 1px solid var(--n-line); vertical-align: top; }
.n-db th + th, .n-db td + td { border-left: 1px solid var(--n-line); }
.n-db .n-cap { font-weight: 500; min-width: 300px; max-width: 360px; }
.n-db td .n-tag + .n-tag { margin-left: 4px; }
.n-nowrap { white-space: nowrap; }
.n-board { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 6px; }
.n-col { flex: 0 0 250px; border-radius: 12px; padding: 8px; }
.n-col-purple { background: #f9f6fb; } .n-col-blue { background: #f3f8fb; } .n-col-orange { background: #fdf6f0; } .n-col-yellow { background: #fdf9ee; } .n-col-green { background: #f3f8f3; } .n-col-gray { background: #f7f7f5; }
.n-col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; font-size: 14px; color: var(--n-soft); }
.n-col ul { display: grid; gap: 8px; }
.n-card { background: #fff; border-radius: 10px; padding: 10px 10px 8px; box-shadow: 0 0 0 1px rgba(15, 15, 15, .08), 0 2px 4px rgba(15, 15, 15, .05); font-size: 14px; line-height: 1.45; }
.npage .n-card p { margin: 0; padding: 0; }
.n-card > p:first-child { font-weight: 500; }
.npage .n-props { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; font-size: 12px; }
.n-prop { font-size: 12px; color: var(--n-ink); }
.n-new { color: var(--n-soft); font-size: 14px; padding: 8px 6px 2px; }
.n-calhead { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 8px; font-size: 14px; }
.n-month { font-weight: 600; }
.n-muted { color: var(--n-soft); }
.n-cal { min-width: 980px; }
.npage .n-dows { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; font-size: 12px; color: var(--n-soft); padding: 0 0 6px; margin: 0; }
.n-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--n-line); border-left: 1px solid var(--n-line); }
.n-day { position: relative; min-height: 116px; border-right: 1px solid var(--n-line); border-bottom: 1px solid var(--n-line); padding: 6px 6px 8px; min-width: 0; }
.n-weekend { background: #fbfbfa; }
.n-date { display: block; text-align: right; font-size: 12px; color: var(--n-soft); padding: 0 4px 4px; }
.n-out .n-date { color: #6b6a66; }
.n-day ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.n-card { min-width: 0; }
.n-day .n-card { padding: 6px 8px 7px; font-size: 12px; border-radius: 6px; }
.npage .n-day .n-props { margin-top: 5px; }
.n-clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 899px) {
  .nwin { border-radius: 12px; margin-inline: calc(var(--gutter-l) * -0.5); }
  .nwin-bar { gap: 10px; padding-inline: 12px; }
  .nwin-dots { display: none; }
  .nwin-crumb > span:first-child, .nwin-crumb > span:nth-child(2) { display: none; }
  .nwin-flag { font-size: 11px; padding: 2px 8px; }
  .npage { font-size: 15px; }
  .n-callout { padding: 14px 14px 14px 10px; }
}
@media (max-width: 520px) { .n-new-btn { display: none; } }

/* Results panel: the first card in the work deck, numbers in red, a closed box of four cells */
.case-results .frame-in { grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; text-align: center; gap: clamp(24px, 5vh, 56px); }
.results-title { font-family: var(--heavy); font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.035em; line-height: 0.9; font-size: clamp(2.4rem, 5.6vw, 5rem); }
.results { list-style: none; padding: 0; margin: 0; width: 100%; display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.results li { display: grid; gap: 8px; align-content: start; justify-items: start; text-align: left; padding: clamp(16px, 2.4vw, 28px) clamp(12px, 1.8vw, 28px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.r-n { font-family: var(--mono); font-size: 0.75rem; color: var(--soft); }
.r-v { display: block; font-family: var(--heavy); font-weight: 900; font-stretch: 112%; letter-spacing: -0.03em; line-height: 0.95; color: var(--signal); font-size: clamp(2rem, 4.4vw, 4rem); font-variant-numeric: tabular-nums; }
.r-k { font-size: clamp(0.875rem, 1.1vw, 1rem); color: var(--soft); max-width: 28ch; }
@media (min-width: 1000px) { .results { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.motion .case-results .results li { opacity: 0; translate: 0 22px; transition: opacity .7s ease, translate .7s var(--ease); }
.motion .case-results.in .results li { opacity: 1; translate: none; }
.motion .case-results.in .results li:nth-child(2) { transition-delay: .08s; }
.motion .case-results.in .results li:nth-child(3) { transition-delay: .16s; }
.motion .case-results.in .results li:nth-child(4) { transition-delay: .24s; }

/* How we work: five steps, shown above the contact section on every page */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1.5px solid var(--ink); counter-reset: none; }
.steps li { position: relative; display: grid; gap: 8px; align-content: start; padding: 22px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.s-n { font-family: var(--heavy); font-weight: 900; font-stretch: 112%; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; color: var(--signal); letter-spacing: -0.03em; }
.steps h3 { font-family: var(--heavy); font-weight: 800; font-stretch: 105%; font-size: 1.25rem; line-height: 1.2; text-transform: none; letter-spacing: 0; }
.steps p { color: var(--soft); font-size: 1rem; }
@media (min-width: 700px) and (max-width: 1099px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (min-width: 1100px) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .steps li { padding: 28px 24px 32px; border-bottom: 0; }
  .steps li:first-child { padding-left: 0; }
  .steps li + li { border-left: 1px solid var(--line); }
  .steps li + li::before { content: ""; position: absolute; left: -6px; top: 44px; width: 11px; height: 11px; border-top: 1.5px solid var(--signal); border-right: 1.5px solid var(--signal); transform: rotate(45deg); background: var(--bg); }
}
@media (max-width: 520px) {
  .case-results .frame-in { padding-inline: 14px; }
  .r-v { font-size: min(1.75rem, 7vw); letter-spacing: -0.04em; }
  .results li { padding: 16px 10px; }
}

/* Client quote: one big pull quote above How we work, on every page */
.praise { padding-block: calc(var(--band) * 0.85); }
.quote { margin: 0 auto; display: grid; gap: clamp(20px, 3vw, 36px); max-width: 1180px; position: relative; padding-left: clamp(0px, 6vw, 96px); }
.q-mark { position: absolute; left: 0; top: -0.18em; font-family: var(--serif); font-size: clamp(5rem, 11vw, 10rem); line-height: 1; color: var(--signal); }
.quote blockquote { margin: 0; }
.quote blockquote p { font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 3rem); line-height: 1.14; letter-spacing: -0.01em; max-width: 38ch; text-wrap: pretty; }
.quote blockquote em { font-style: italic; color: var(--signal); }
.quote figcaption { display: grid; gap: 4px; border-top: 1.5px solid var(--ink); padding-top: 16px; max-width: 520px; }
.q-who { font-weight: 700; font-size: 1rem; }
.q-where { color: var(--soft); font-size: 0.875rem; }
@media (max-width: 699px) {
  .quote { padding-left: 0; padding-top: 3.2rem; }
  .q-mark { top: -0.1em; font-size: 6rem; }
}

/* Headline word box: its width glides to each new word, so the line re-centers smoothly */
.motion .hero-title .type { justify-content: flex-start; overflow: visible; transition: width .6s cubic-bezier(.22, .8, .24, 1); }

/* Tab panels take focus after their tab; show it like every other focus stop */
[role="tabpanel"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 6px; }