@view-transition { navigation: auto; }

@font-face { font-family: 'Archivo Fallback'; font-weight: 100 599; src: local('Liberation Sans'), local('LiberationSans'), local('Arimo'), local('Arial'), local('ArialMT'), local('Helvetica'); size-adjust: 98.9%; ascent-override: 88.8%; descent-override: 21.2%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Fallback'; font-weight: 600 1000; src: local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Arimo-Bold'), local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'); size-adjust: 103%; ascent-override: 85.2%; descent-override: 20.4%; line-gap-override: 0%; }

:root {
  --paper: #F2F2F2;
  --ink: #111112;
  --accent: #FF4A1C;
  --name: #F2400F;
  --blue: #211AF3;
  --fg: var(--ink); --bg: var(--paper);

  --rule: 1px;
  --mat: 8px;
  --mt: max(var(--mat), env(safe-area-inset-top));
  --mb: max(var(--mat), env(safe-area-inset-bottom));
  --ml: max(var(--mat), env(safe-area-inset-left));
  --mr: max(var(--mat), env(safe-area-inset-right));
  --et: calc(var(--mt) + var(--rule)); --eb: calc(var(--mb) + var(--rule));
  --el: calc(var(--ml) + var(--rule)); --er: calc(var(--mr) + var(--rule));
  --bar-top: 36px;
  --bar-bottom: 48px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-open: cubic-bezier(0.33, 1, 0.68, 1);
  --gutter: max(clamp(26px, 3.4vw, 48px), calc(var(--el) + 16px), calc(var(--er) + 16px));
  --max: 1680px;
  --pad: calc(var(--el) + var(--cp));
  --T: calc((100cqw - var(--el) - var(--er)) / 3);
  --cp: clamp(12px, 1.1vw, 21px);
  --cy: clamp(12px, 1.05vw, 18px);
  --read: 16px;
  --lead: clamp(17px, 1.25vw, 18px);
  --small: 13px;
}
@media (min-width: 900px) { :root { --mat: 12px; --bar-top: 40px; --bar-bottom: 52px; } }
@media (min-width: 1100px) { :root { --rule: 2px; } }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scrollbar-width: none; -webkit-text-size-adjust: 100%; background: var(--paper); scroll-padding-top: calc(var(--et) + var(--bar-top)); scroll-padding-bottom: calc(var(--eb) + var(--bar-bottom)); }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0; overflow-x: clip;
  background: var(--paper); color: var(--ink);
  font-family: 'Archivo', 'Archivo Fallback', system-ui, sans-serif; font-size: var(--read); line-height: 1.5; font-weight: 450;
  -webkit-font-smoothing: antialiased; text-wrap: pretty;
}
.hero, main, .band, .panel { container-type: inline-size; }
h1, h2, h3, h4, p, figure, dl, dd, ol, ul { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 60; padding: 12px 16px; background: var(--ink); color: var(--paper); font-weight: 700; }
.skip:focus { left: 12px; top: calc(var(--et) + var(--bar-top) + 12px); }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-skip-ink: none; text-underline-offset: .36em; }
a:hover { text-decoration-thickness: 3px; }

.frame { position: fixed; z-index: 45; top: var(--mt); bottom: var(--mb); left: var(--ml); right: var(--mr); pointer-events: none; box-shadow: 0 0 0 100vmax var(--paper); }
.frame i { position: absolute; background: var(--ink); }
.frame .t { top: 0; left: 0; right: 0; height: var(--rule); }
.frame .b { bottom: 0; left: 0; right: 0; height: var(--rule); }
.frame .l { top: 0; bottom: 0; left: 0; width: var(--rule); }
.frame .r { top: 0; bottom: 0; right: 0; width: var(--rule); }

.tbar {
  position: fixed; z-index: 40; top: var(--et); left: var(--el); right: var(--er); height: var(--bar-top);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; background: var(--paper); color: var(--ink);
  font-size: 13px; font-weight: 600; line-height: 1.2;
}
.tbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--rule); background: var(--ink); }
.tbar .grp { display: flex; min-width: 0; }
.tbar .c { position: relative; display: flex; align-items: center; min-width: 0; padding: 0 var(--cp) var(--rule); white-space: nowrap; }
.tbar .c::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--rule); background: var(--ink); }
.tbar > .c:first-child::before, .tbar > .grp:first-child > .c:first-child::before { display: none; }
.tbar .fill, .tbar .open { display: none; }
.tbar time { font-variant-numeric: tabular-nums; }
.tbar a { text-decoration: none; }
.tbar a:hover .t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.tbar a:focus-visible { outline-offset: -6px; }
.tbar .m { display: block; overflow: hidden; padding-bottom: .2em; margin-bottom: -.2em; }
.tbar .t { display: block; transition: transform 400ms var(--ease-out); }
html.js .who[data-hide]:not(.on) .t { transform: translateY(120%); }
html.js .who[data-hide]:focus-visible .t { transform: none; }
.tbar .case-c { display: none; flex: 1 1 auto; }
@media (min-width: 700px) {
  .tbar { grid-template-columns: minmax(0, 1fr) auto auto; }
  .tbar .open, .tbar .case-c { display: flex; }
}
@media (min-width: 1280px) {
  .tbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tbar .fill { display: flex; }
  .tbar .grp.end .open { flex: 1 1 auto; }
}

.menu {
  position: fixed; z-index: 40; bottom: var(--eb); left: var(--el); right: var(--er); height: var(--bar-bottom);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--paper);
}
.menu::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--rule); background: var(--ink); pointer-events: none; }
.menu a {
  position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden;
  padding: var(--rule) 8px 0; text-decoration: none; color: var(--ink);
  font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 0; font-stretch: 100%; line-height: 1;
  transition: color 200ms var(--ease-out);
}
.menu a::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--ink); transform-origin: 50% 100%; scale: 1 0; transition: scale 200ms var(--ease-out); }
html.js .menu a.on { color: var(--paper); }
html.js .menu a.on::before { scale: 1 1; }
@media (hover: hover) {
  .menu a:hover { color: var(--paper); }
  .menu a:hover::before { scale: 1 1; }
}
.menu a + a::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--rule); background: var(--ink); }
@media (hover: hover) {
  html.js .menu a.on + a:hover::after, html.js .menu a:hover + a.on::after { background: var(--paper); }
}
.menu .lb { display: block; transition: transform 600ms var(--ease-out); }
.menu a:focus-visible { outline: 3px solid var(--accent); outline-offset: -6px; }
@media (min-width: 600px) {
  .menu a { justify-content: flex-start; padding-inline: var(--cp); font-size: 14px; font-stretch: 125%; }
}

.hero { padding-top: calc(var(--et) + var(--bar-top)); }
.hname { position: relative; padding: clamp(15px, 2.2vh, 27px) var(--pad); font-weight: 900; }
.hname::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--rule); background: var(--ink); }
.name {
  display: block; color: var(--name); text-transform: uppercase; white-space: nowrap;
  font-size: clamp(54px, 6vw, 128px); line-height: .84; letter-spacing: -0.035em; font-stretch: 112%;
}
.hero-row { display: grid; }
.hero-row p { position: relative; padding: var(--cy) var(--pad) clamp(21px, 2.5vh, 30px); font-size: var(--lead); line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; }
.hero-row p + p::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--rule); background: var(--ink); }
.hero-row strong { font-weight: 800; }
.hero { box-shadow: 0 var(--rule) 0 0 var(--ink); }

.ln { display: block; overflow: hidden; padding-top: .1em; margin-top: -.1em; }
.li { display: block; }
.wm { display: inline-block; vertical-align: top; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.wi { display: inline-block; }
html.js:not(.ready) [data-lines]:not(.split) { color: transparent; }
html.js:not(.ready) .li { transform: translateY(1.05em); }
html.js:not(.ready) .wi { transform: translateY(1.65em); }
html.js:not(.ready) .tbar .t { transform: translateY(1.5em); }
html.js:not(.ready) .menu .lb { transform: translateY(2.6em); }
html.js.ready .li { transition: transform 600ms var(--ease-out); }
html.js.ready .ln + .ln .li { transition-delay: 80ms; }
html.js.ready .wi { transition: transform 600ms var(--ease-out) var(--ld, 0ms); }
html.js:not(.ready) .switch .panel { clip-path: inset(100vh 0 0 0); }
html.js.ready:not(.done) .switch .panel { clip-path: inset(0); transition: clip-path 700ms var(--ease-out) 150ms; }
html.hold body { visibility: hidden; }
html.still :is(.li, .wi, .tbar .t, .menu .lb, .switch .panel) { transition: none !important; }

.strip {
  background: var(--ink); color: var(--paper); padding: clamp(10px, 1vw, 17px) var(--pad) clamp(8px, .85vw, 14px);
  font-weight: 900; text-transform: uppercase; font-size: clamp(22px, 1.8vw, 36px); line-height: .86; letter-spacing: -0.03em; font-stretch: 100%;
}

.band { position: relative; background: var(--bg); color: var(--fg); }
.band + .band { border-top: var(--rule) solid var(--ink); }
.bi { --pt: clamp(21px, 3vh, 36px); --pb: clamp(54px, 7.5vh, 96px); padding: var(--pt) var(--pad) var(--pb); }
.band ::selection { background: var(--fg); color: var(--bg); }

.pname {
  font-weight: 900; text-transform: uppercase; white-space: nowrap; line-height: .8; letter-spacing: -0.035em;
  font-size: clamp(40px, 5.5vw, 100px); font-stretch: 112%; padding-top: .06em;
}
.pname a { text-decoration: none; }

.cells {
  display: grid; grid-template-columns: auto minmax(0, 1fr); margin: clamp(14px, 2vh, 21px) calc(-1 * var(--pad)) 0;
  border-block: var(--rule) solid var(--fg); font-weight: 600; line-height: 1.35;
}
.cells > * { padding: var(--cy) var(--cp); }
.cells > :first-child { padding-left: var(--pad); font-variant-numeric: tabular-nums; font-weight: 700; }
.cells > :last-child { padding-right: var(--pad); }
.cells > * + * { border-left: var(--rule) solid var(--fg); }
.cells > .go { grid-column: 1 / -1; border-left: 0; border-top: var(--rule) solid var(--fg); padding-left: var(--pad); }
.go { position: relative; z-index: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-decoration: none; font-weight: 700; transition: color 180ms var(--ease-out); }
.go::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--fg); transform-origin: 50% 100%; scale: 1 0; transition: scale 180ms var(--ease-out); }
.go:hover, .go:focus-visible { color: var(--bg); }
.go:hover::before, .go:focus-visible::before { scale: 1 1; }
.go:focus-visible { outline: var(--rule) solid var(--bg); outline-offset: -8px; }
.go span { display: inline-block; font-size: 1.2em; line-height: 1; transition: transform 180ms var(--ease-out); }
.go:hover span, .go:focus-visible span { transform: translateX(4px); }

.teaser { max-width: 46ch; font-size: var(--lead); line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; }
.bodyrow { margin-top: clamp(21px, 3.3vh, 36px); max-width: calc(50cqw + var(--max) / 2 - var(--pad)); }
.smaak .bodyrow { max-width: none; }

.cap, figcaption { font-size: var(--small); line-height: 1.5; font-weight: 400; color: color-mix(in srgb, var(--fg) var(--capmix, 72%), var(--bg)); }
.cap strong, figcaption strong { font-weight: 650; color: var(--fg); }

.facts { display: grid; margin: clamp(30px, 4.5vh, 48px) calc(-1 * var(--pad)) 0; border-top: var(--rule) solid var(--fg); }
.facts > div { padding: var(--cy) var(--cp) clamp(21px, 2.7vh, 30px); }
.facts > div:first-child { padding-left: var(--pad); }
.facts > div:last-child { padding-right: var(--pad); }
.facts > div + div { border-top: var(--rule) solid var(--fg); padding-left: var(--pad); }
.facts dt { font-weight: 800; }
.facts dd { margin: 6px 0 0; max-width: 46ch; }
.kyp > .bi { --pb: 0px; }

.rv { clip-path: inset(0 0 100% 0); transition: clip-path 700ms var(--ease-open) var(--d, 0s); }
.rv.in { clip-path: inset(-40px); }

.cmp img, .woon-crop { outline: var(--rule) solid var(--fg); outline-offset: 0; }

.compare { display: grid; gap: 14px; }
.cmp { display: grid; gap: 16px; }
.cmp figure { position: relative; }
.cmp img { width: 100%; }
.cmp figcaption { position: absolute; top: 12px; left: 12px; padding: 4px 10px; font-size: var(--small); font-weight: 700; background: var(--ink); color: #F3F2FF; }
.cmp input, .cmp .seam, .cmp .knob { display: none; }
html.js .compare .cmp { position: relative; gap: 0; grid-template-areas: "s"; aspect-ratio: 2844 / 1600; overflow: hidden; background: var(--bg, #F4F5FB); container-type: inline-size; outline: var(--rule) solid var(--fg); cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
html.js .compare .cmp img { outline: 0; }
html.js .compare .cmp figure { grid-area: s; }
html.js .compare .cmp img { height: 100%; object-fit: cover; object-position: left top; }
html.js .compare .cmp .after { clip-path: inset(0 0 0 var(--pos, 50%)); }
html.js .compare .cmp .after figcaption { left: auto; right: 12px; }
html.js .compare .cmp input { display: block; grid-area: s; position: relative; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; -webkit-appearance: none; appearance: none; }
html.js .compare .cmp .seam { display: block; grid-area: s; position: relative; z-index: 2; pointer-events: none; }
html.js .compare .cmp .seam::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; translate: calc(var(--p, 50) * 1cqw) 0; width: 3px; margin-left: -1.5px; background: var(--blue); }
html.js .compare .cmp .knob { display: grid; position: absolute; z-index: 2; top: 50%; left: 0; translate: calc(var(--p, 50) * 1cqw) 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: #F3F2FF; color: var(--blue); border: 3px solid var(--blue); place-items: center; pointer-events: none; transition: transform 400ms var(--ease-out); }
.cmp .knob svg { width: 24px; height: 24px; }
.cmp:hover .knob { transform: scale(1.08); }
.cmp:active .knob { transform: scale(.9); }
.cmp:not(.ptr):has(input:focus-visible) .knob { outline: 3px solid var(--fg, #F3F2FF); outline-offset: 5px; }
html.js .compare .cmp input:focus-visible { outline: 0; }

.kyp-top { display: grid; gap: clamp(24px, 4vh, 40px); }

.phones { display: flex; gap: clamp(16px, 2.6vw, 48px); align-items: flex-start; }
.phones figure { flex: 0 1 375px; min-width: 0; display: grid; gap: 12px; align-content: start; }
.phones .ph { display: block; border: clamp(5px, .45vw, 8px) solid var(--fg); border-radius: clamp(20px, 2.3vw, 40px); overflow: hidden; background: var(--fg); }
.phones .ph img { width: 100%; }
.phones figure:nth-child(2) { margin-top: var(--step); }
.phones figure:nth-child(3) { margin-top: calc(var(--step) * 2); }
.phones figure:nth-child(4) { margin-top: calc(var(--step) * 3); }
.phones { --step: clamp(12px, 1.7vw, 32px); }

.small .body { display: grid; gap: 28px clamp(28px, 4vw, 64px); }
.pic { display: block; text-decoration: none; }
.smaak-pic { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; }
.crop { display: block; overflow: hidden; width: 100%; }
.crop svg { display: block; width: 100%; height: auto; }
.woon-crop { background: #fff; }
.wooly-pair { display: flex; gap: clamp(16px, 3vw, 48px); justify-content: flex-start; align-items: flex-start; }
.wooly-pair .crop { flex: 0 1 287px; min-width: 0; border-radius: 13% / 6.2%; }
.wooly-pair .crop:nth-child(even) { margin-top: clamp(24px, 3.4vw, 64px); }

.numa-stage { display: grid; gap: 21px; }
.shot { display: block; }
.devices img { outline: 1px solid rgba(240, 240, 238, .18); outline-offset: -1px; }
.devices { display: flex; gap: clamp(12px, 1.6vw, 24px); align-items: flex-end; }
.devices figure { display: grid; gap: 10px; min-width: 0; }
.devices .ipad { flex: 0 1 72%; }
.devices .iphone { flex: 0 1 25%; }
.devices .ipad img { border-radius: clamp(8px, 1.2vw, 18px); }
.devices .iphone img { border-radius: 12% / 5.6%; }
.why { max-width: 46ch; }

.exp { --bg: var(--paper); --fg: var(--ink); }
.strip + .numa { border-top: var(--rule) solid var(--fg); }
.row3 { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.row3 > * { padding: var(--cy) var(--cp) clamp(18px, 2.2vh, 24px); min-width: 0; }
.row3 > :first-child { padding-left: var(--pad); }
.row3 > :last-child { padding-right: var(--pad); }
.row3 > * + * { border-left: var(--rule) solid var(--fg); }
.job + .job, .kit { border-top: var(--rule) solid var(--fg); }
.job > .d { grid-column: 1 / -1; border-left: 0; border-top: var(--rule) solid var(--fg); padding-left: var(--pad); }
.job .when { font-variant-numeric: tabular-nums; font-weight: 600; }
.job h4 { margin: 0; font-size: var(--lead); line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; }
.job .role-t { font-weight: 600; margin-top: 4px; }
.job p.d { max-width: none; }
.job p.d, .kit p { text-wrap: pretty; }
.kit { grid-template-columns: minmax(0, 1fr); }
.kit > * { padding-left: var(--pad); padding-right: var(--pad); }
.kit > * + * { border-left: 0; border-top: var(--rule) solid var(--fg); }
.kit h4 { margin: 0 0 6px; font-size: var(--read); font-weight: 800; }

.contact { --bg: var(--ink); --fg: var(--paper); padding-bottom: calc(var(--bar-bottom) + var(--eb)); }
.contact .bi { --pt: clamp(54px, 9vh, 112px); --pb: clamp(42px, 6.7vh, 84px); }
.contact ::selection { background: var(--accent); color: var(--ink); }
.contact .lead { max-width: 34ch; font-size: var(--lead); line-height: 1.35; font-weight: 600; }
.mail {
  display: inline-block; margin: clamp(15px, 3vh, 30px) 0 clamp(18px, 2.7vh, 30px); position: relative; max-width: 100%;
  color: var(--accent); font-weight: 900; font-size: min(calc(11.7vw - 5px), max(5vw, 48px), 92px); line-height: .9; letter-spacing: -0.04em;
  font-stretch: 78%; text-decoration: none; white-space: nowrap; padding-bottom: .24em;
}
.mail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .04em; background: currentColor; transform-origin: 50% 0; transition: transform 180ms var(--ease-out); }
.mail:hover::after, .mail:focus-visible::after { transform: scaleY(1.8); }
.btn {
  position: relative; z-index: 0; display: inline-grid; align-items: center; justify-items: start; min-height: 48px; padding: 0 21px;
  border: var(--rule) solid var(--fg); border-radius: 0; cursor: pointer; font-size: var(--read); font-weight: 700;
  background: none; color: var(--fg); transition: color 180ms var(--ease-out);
}
.btn::before { content: ""; position: absolute; z-index: -1; inset: -1px;  background: var(--fg); transform-origin: 50% 100%; scale: 1 0; transition: scale 180ms var(--ease-out); }
.btn:hover, .btn:active, .btn:focus-visible { color: var(--bg); }
.btn:hover::before, .btn:active::before, .btn:focus-visible::before { scale: 1 1; }
.btn:focus-visible { outline: var(--rule) solid var(--bg); outline-offset: -8px; }
.btn span, .btn::after { grid-area: 1 / 1; }
.btn::after { content: "Copy address"; visibility: hidden; }

html.js .switch { overflow-x: clip; overflow-anchor: none; }
html.js .switch > .track { display: grid; grid-template-columns: 100% 100%; align-items: start; transform: translateX(calc(var(--i, 0) * -100%)); }
html.js .switch .panel[data-panel="work"] { grid-column: 1; grid-row: 1; }
html.js .switch .panel[data-panel="projects"] { grid-column: 2; grid-row: 1; }
.switch:is([data-active="work"], [data-default="work"]:not([data-active])) > .track { --i: 0; }
.switch:is([data-active="projects"], [data-default="projects"]:not([data-active])) > .track { --i: 1; }
html.js .switch:is([data-active="work"], [data-default="work"]:not([data-active])):not(.moving) .panel[data-panel="projects"],
html.js .switch:is([data-active="projects"], [data-default="projects"]:not([data-active])):not(.moving) .panel[data-panel="work"] { display: none; }
.switch.moving > .track { transition: transform 600ms var(--ease-io); }
.switch.moving { position: relative; z-index: 1; }

@media (min-width: 900px) {
  .hero-row { grid-template-columns: calc(2 * var(--T) + var(--el)) minmax(0, 1fr); }
  .hero-row p { max-width: none; }
  .hero-row p:first-child { padding-right: max(var(--cp), calc(100% - var(--pad) - 22em)); }
  .hero-row p + p { padding-left: var(--cp); }
  .hero-row p + p::before { left: 0; right: auto; top: 0; bottom: 0; width: var(--rule); height: auto; }

  .cells, .row3 { grid-template-columns: calc(var(--T) + var(--el)) var(--T) minmax(0, 1fr); }
  .cells > .go { grid-column: auto; border-top: 0; border-left: var(--rule) solid var(--fg); padding-left: var(--cp); }
  .job > .d { grid-column: auto; border-top: 0; border-left: var(--rule) solid var(--fg); padding-left: var(--cp); }
  .kit { grid-template-columns: calc(var(--T) + var(--el)) var(--T) minmax(0, 1fr); }
  .kit > * { padding-left: var(--cp); padding-right: var(--cp); }
  .kit > :first-child { padding-left: var(--pad); }
  .kit > :last-child { padding-right: var(--pad); }
  .kit > * + * { border-top: 0; border-left: var(--rule) solid var(--fg); }
  .facts { grid-template-columns: calc(var(--T) + var(--el)) minmax(0, 1fr); }
  .facts > div + div { border-top: 0; border-left: var(--rule) solid var(--fg); padding-left: var(--cp); }

  .head { display: grid; grid-template-columns: calc(2 * var(--T) + var(--el) - var(--pad)) minmax(0, 1fr); column-gap: calc(var(--cp) + var(--rule)); align-items: end; }
  .head .teaser { padding-bottom: .2em; }
  .small .body { grid-template-columns: calc(var(--T) + var(--el) - var(--pad)) minmax(0, 1fr); column-gap: var(--rule); align-items: start; }
  .small .teaser { padding-right: var(--cp); }
  .smaak .pic { margin-right: calc(-1 * var(--pad)); margin-bottom: calc(-1 * var(--pb)); }
  .smaak .bodyrow { margin-top: 0; }
  .smaak .teaser { padding-top: clamp(21px, 3.3vh, 36px); }
  .wooly .body { grid-template-columns: calc(2 * var(--T) + var(--el) - var(--pad)) minmax(0, 1fr); }
  .wooly .body { column-gap: calc(var(--cp) + var(--rule)); }
  .wooly .teaser { grid-column: 2; grid-row: 1; padding-right: 0; }
  .wooly .pic { grid-column: 1; grid-row: 1; }
  .numa-stage { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 0; }
  .numa-stage .shot { grid-column: 1 / 11; grid-row: 1; }
  .numa-stage .devices { grid-column: 6 / 13; grid-row: 2; margin-top: -24%; position: relative; z-index: 1; }
  .numa-stage .devices img { box-shadow: 0 0 0 clamp(6px, .6vw, 10px) var(--bg); }
  .numa-stage .why { grid-column: 1 / 6; grid-row: 2; padding-top: clamp(30px, 4.5vh, 54px); padding-right: var(--cp); }
}
@media (min-width: 1100px) {
  .kyp-top { grid-template-columns: calc(var(--T) + var(--el) - var(--pad)) minmax(0, 1fr); column-gap: var(--rule); align-items: start; }
  .kyp-top .teaser { padding-right: var(--cp); }
}
@media (max-width: 899px) {
  .head > * + * { margin-top: clamp(14px, 2vh, 21px); }
  .phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(16px, 3vw, 32px); }
  .phones figure { margin-top: 0 !important; }
  .phones figure:nth-child(even) { translate: 0 var(--step); }
  .phones { padding-bottom: var(--step); --step: clamp(28px, 8vw, 64px); }
  .devices { margin-top: 4px; }
  .smaak .pic, .wooly .pic { order: -1; }
  .smaak .pic, .numa .shot { margin-inline: calc(-1 * var(--pad)); }
  .woon .pic { margin-right: calc(-1 * var(--pad)); }
  .numa .shot img, .smaak .pic img { outline: 0; }
  .cells > :nth-child(2), .row3 > :nth-child(2) { padding-right: var(--pad); }
}
@media (max-width: 599px) {
  .name { font-size: calc(16.4vw - 7px); font-stretch: 66%; }
  .pname { font-size: calc(14.5vw - 6px); font-stretch: 78%; }
  html.js .compare .cmp { aspect-ratio: 4 / 3; }
  html.js .compare .cmp .knob { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .phones .ph { border-width: 4px; border-radius: 18px; }
  .wooly-pair { flex-wrap: wrap; }
  .wooly-pair .crop { flex: 0 0 calc(50% - clamp(16px, 3vw, 48px) / 2); }
  .woon-crop { aspect-ratio: 480 / 400; }
  .woon-crop svg { width: 200%; }
  .devices { flex-wrap: wrap; justify-content: flex-end; }
  .devices .ipad { flex: 0 0 100%; }
  .devices .iphone { flex: 0 0 60%; }
}

.case-hero { padding-top: calc(var(--et) + var(--bar-top)); border-bottom: var(--rule) solid var(--ink); }
.case-hero .bi { padding-top: clamp(18px, 3vh, 30px); padding-bottom: clamp(27px, 3.8vh, 42px); }
.case-hero .eyebrow { font-weight: 700; }
.case-hero .pname { margin-top: 8px; font-size: max(7.5vw, 56px); }
.case-h { position: relative; z-index: 1; margin-top: clamp(15px, 2.2vh, 24px); max-width: 38ch; font-size: clamp(21px, 3.15vw, 37px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.case-hero .sub { margin-top: 10px; font-size: var(--lead); font-weight: 500; }
.case-hero .meta { margin-top: 14px; }

.case-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: clamp(21px, 3vh, 36px) calc(-1 * var(--pad)) 0; border-top: var(--rule) solid var(--fg); line-height: 1.35; }
.case-hero .case-facts { margin-bottom: calc(-1 * clamp(27px, 3.8vh, 42px)); }
.case-facts > div { min-width: 0; padding: var(--cy) var(--cp) clamp(15px, 2vh, 21px); }
.case-facts > :nth-child(odd) { padding-left: var(--pad); }
.case-facts > :nth-child(even) { border-left: var(--rule) solid var(--fg); padding-right: var(--pad); }
.case-facts > :nth-child(n+3) { border-top: var(--rule) solid var(--fg); }
.case-facts dt { font-size: var(--small); font-weight: 700; }
.case-facts dd { margin: 4px 0 0; font-weight: 600; }
@media (min-width: 900px) {
  .case-facts { grid-template-columns: calc(var(--T) + var(--el)) var(--T) minmax(0, 1fr) minmax(0, 1fr); }
  .case-facts > :nth-child(n) { padding-inline: var(--cp); border-top: 0; border-left: var(--rule) solid var(--fg); }
  .case-facts > :first-child { padding-left: var(--pad); border-left: 0; }
  .case-facts > :last-child { padding-right: var(--pad); }
}

@media (min-width: 1100px) {
  .case-hero .bi { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(30px, 3vw, 54px); align-items: end; }
  .case-hero .eyebrow, .case-hero .case-facts { grid-column: 1 / -1; }
  .case-hero .pname { grid-column: 1; grid-row: 3 / span 3; align-self: end; }
  .case-hero .case-h, .case-hero .sub, .case-hero .meta { grid-column: 2; }
  .case-h { font-size: clamp(21px, 2.2vw, 35px); }
}

.case { padding: clamp(27px, 3.8vh, 48px) var(--gutter) clamp(54px, 9vh, 105px); }
.prose > * { max-width: 680px; margin-inline: auto; }
.prose p + p, .prose p + :is(ol, ul), .prose :is(ol, ul) + p { margin-top: 1.1em; }
.prose .open { font-size: var(--lead); line-height: 1.45; font-weight: 500; letter-spacing: -0.005em; }
.prose h2 { margin-top: clamp(42px, 6.7vh, 72px); margin-bottom: 14px; font-size: var(--lead); line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
.prose h3 { margin-top: clamp(27px, 4vh, 42px); margin-bottom: 10px; font-size: var(--read); line-height: 1.25; font-weight: 800; }
.prose h2 + h3 { margin-top: 0; }
.prose p, .prose li { font-size: 17px; line-height: 1.6; }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose ul { list-style: disc; padding-left: 1.4em; }
.prose li + li { margin-top: .35em; }
.prose .wide { max-width: 1240px; margin-block: clamp(30px, 5.2vh, 54px); }
.prose .wide + :is(h2, h3) { margin-top: 0; }
.prose figure { display: grid; gap: 14px; }
.prose figure > img, .pair2 img, .case-grid img { background: #fff; outline: var(--rule) solid var(--ink); outline-offset: 0; }
.prose figcaption, .prose .compare .cap { max-width: 680px; }
.prose .cap { font-size: var(--small); line-height: 1.5; }
.pair2 { display: grid; grid-template-columns: var(--pair, minmax(0, 1fr) minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); align-items: start; }
.case .compare { --fg: var(--ink); }

.case-phones { --phb: clamp(5px, .45vw, 8px); display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, calc(var(--w, 375px) + 2 * var(--phb)))); justify-content: center; align-items: start; gap: clamp(24px, 3.4vh, 40px) clamp(16px, 2.6vw, 40px); }
.case-phones > figure { display: grid; gap: 12px; align-content: start; min-width: 0; }
.case-phones .ph { display: block; width: fit-content; max-width: 100%; border: var(--phb) solid var(--fg); border-radius: clamp(20px, 2.3vw, 40px); overflow: hidden; background: var(--fg); }

.case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 360px)), 1fr)); align-items: start; gap: clamp(24px, 3.4vh, 40px) clamp(16px, 2vw, 32px); }
.case-grid > figure { display: grid; gap: 12px; align-content: start; min-width: 0; }

.next { border-top: var(--rule) solid var(--ink); }
.next .bi { padding-bottom: 0; }
.next .cells { grid-template-columns: minmax(0, 1fr); border-bottom: 0; margin-top: clamp(15px, 2.2vh, 24px); }
.next .cells > .go { grid-column: auto; border: 0; padding-left: var(--pad); }
@media (max-width: 899px) {
  .case-phones { grid-template-columns: repeat(2, minmax(0, calc(var(--w, 375px) + 2 * var(--phb)))); }
}
@media (max-width: 599px) {
  .case-h { max-width: none; text-wrap: wrap; font-size: clamp(18px, 5vw, 21px); }
  .pair2 { grid-template-columns: minmax(0, 1fr); }
  .case-phones { --phb: 4px; }
  .case-phones .ph { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .rv { clip-path: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}