@font-face { font-family: Archivo; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(fonts/archivo-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Archivo; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(fonts/archivo-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --white: #FFFFFF;
  --ink: #1F2638;
  --black: #0B0E18;
  --bezel: #12141C;
  --metal: #3A3F4D;
  --metal-lit: #6B7180;
  --sand: #E9E1D2;
  --madder: #D8321C;
  --madder-deep: #8F1D0E;
  --madder-lit: #FF9A7E;
  --cobalt: #1F4FE0;
  --cobalt-lit: #7C9CFF;
  --green: #0B7A5B;
  --grey: #596072;
  --fade: #D5D8E0;
  --line: #E9EBF0;
  --grid: #F1F2F6;
  --on-dark: #B7BDCC;
  --shadow: 0 0 0 1px rgba(31, 38, 56, .1), 0 10px 22px -12px rgba(31, 38, 56, .28);
  --r: 6px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: Archivo, system-ui, sans-serif;
  --t-xs: clamp(13px, .9vw, 15px);
  --t-s: clamp(15px, 1.04vw, 18px);
  --t-m: clamp(17px, 1.18vw, 21px);
  --t-l: clamp(20px, 1.7vw, 25px);
  --t-xl: clamp(32px, 3.2vw, 52px);
  --t-xxl: clamp(40px, 5.6vw, 88px);
  --m: 16px;
  --g: 16px;
  --side: max(var(--m), calc((100% - 1760px) / 2));
  --inset: var(--m);
  --sec: clamp(72px, 10vw, 152px);
}
/* end tokens */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 var(--t-m)/1.45 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, p, ul, dl, dd, fieldset, pre { margin: 0; padding: 0; border: 0; }
h2 { text-wrap: balance; font-size: var(--t-xl); line-height: 1.06; font-weight: 600; letter-spacing: -.025em; }
p { text-wrap: pretty; }
img { display: block; -webkit-user-drag: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.dark :focus-visible { outline-color: var(--white); }
::selection { background: var(--madder); color: var(--white); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 60; padding: 12px 18px; background: var(--ink); color: var(--white); border-radius: var(--r); }
.skip:focus { top: 12px; }

/* Entrances: only once the script is here to finish them */
.js .rise { opacity: 0; translate: 0 10px; transition: opacity .5s var(--ease) var(--delay, 0s), translate .6s var(--ease) var(--delay, 0s); }
.js .rise.in { opacity: 1; translate: 0 0; }

/* Header */
.top { position: absolute; inset: 0 auto auto 0; z-index: 20; padding: 18px var(--m); padding-left: max(var(--m), calc((100vw - 1760px) / 2)); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.brand .stamp { width: 38px; height: 38px; }
.brand .word { width: 104px; height: 29px; position: relative; top: 3px; }
.top .brand { min-width: 44px; justify-content: center; }
.top .brand .word { display: none; }
#inspect { display: none; }
.actions { position: fixed; top: 18px; right: max(var(--m), calc((100vw - 1760px) / 2)); z-index: 40; display: flex; gap: 8px; transition: translate .45s var(--ease); }
.actions.away:not(:focus-within) { translate: 0 -84px; }
.pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--r); background: var(--ink); color: var(--white); font-size: var(--t-s); font-weight: 600; transition: background .2s, color .2s, box-shadow .2s, transform .2s var(--ease); }
.pill:active { transform: scale(.97); }
.pill.ghost { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--fade); }
.pill.ghost[aria-pressed="true"] { background: var(--madder); color: var(--white); box-shadow: none; }
.actions.on-dark .pill { background: var(--white); color: var(--ink); }
.actions.on-dark .pill.ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px var(--metal-lit); }
.actions.on-dark .pill.ghost[aria-pressed="true"] { background: var(--madder); color: var(--white); box-shadow: none; }

/* Hero */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; }
.guides { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(black 72%, transparent); mask-image: linear-gradient(black 72%, transparent); }
.guides line { stroke: var(--fade); stroke-width: 1; stroke-dasharray: 3 5; opacity: .7; }
.stage { position: absolute; inset: 0; z-index: 6; display: grid; place-content: start center; justify-items: center; padding-top: 25svh; pointer-events: none; }
.frame { position: relative; padding: .02em .1em; font-size: min(15.4vw, 30svh); pointer-events: auto; box-shadow: 0 0 0 1px var(--madder); }
.frame::before, .frame::after { content: ''; position: absolute; pointer-events: none; opacity: 0; transition: opacity .2s; }
.frame::before { inset: -100vh 0; border-inline: 1px solid var(--madder); }
.frame::after { inset: 0 -100vw; border-block: 1px solid var(--madder); }
.frame.drag::before, .frame.drag::after { opacity: .3; }
.js .frame { transition: opacity .5s var(--ease); }
.js:not(.fonts) .frame, .js:not(.fonts) .hint, .js:not(.fonts) .hero .piece, .js:not(.fonts) .hero .bubble, .js:not(.fonts) .hero .cur:not(.c-you) { opacity: 0; }
.js.fonts .hero .piece { animation: arrive 1s var(--ease) var(--in, 0s) backwards; }
.js.fonts .hero .bubble { animation: arrive .9s var(--ease) var(--in, 0s) backwards; }
.js.fonts .hint { animation: fade .6s var(--ease) .9s backwards; }
@keyframes fade { from { opacity: 0; } }
.frame h1 { font-size: 1em; line-height: 1.04; font-weight: 700; font-stretch: 100%; letter-spacing: -.035em; white-space: nowrap; user-select: none; }
.h { position: absolute; z-index: 1; width: 44px; height: 44px; margin: -22px; touch-action: none; }
.h::after { content: ''; position: absolute; left: 18px; top: 18px; width: 8px; height: 8px; background: var(--white); box-shadow: 0 0 0 1px var(--madder); transition: background .15s, transform .15s; }
.js.fonts .tl::after, .js.fonts .tc::after, .js.fonts .tr::after { animation: pop .45s var(--ease) .1s backwards; }
.js.fonts .ml::after, .js.fonts .mr::after { animation: pop .45s var(--ease) .2s backwards; }
.js.fonts .bl::after, .js.fonts .bc::after, .js.fonts .br::after { animation: pop .45s var(--ease) .3s backwards; }
@keyframes pop { from { transform: scale(0); } }
.h.held::after, .h:active::after { background: var(--madder); transform: scale(1.4); }
.tl { left: 0; top: 0; cursor: nwse-resize; } .tc { left: 50%; top: 0; cursor: ns-resize; } .tr { left: 100%; top: 0; cursor: nesw-resize; }
.ml { left: 0; top: 50%; cursor: ew-resize; } .mr { left: 100%; top: 50%; cursor: ew-resize; }
.bl { left: 0; top: 100%; cursor: nesw-resize; } .bc { left: 50%; top: 100%; cursor: ns-resize; } .br { left: 100%; top: 100%; cursor: nwse-resize; }
.readout { position: absolute; left: 50%; top: 100%; margin-top: 14px; translate: -50% 0; padding: 1px 7px; border-radius: 3px; background: var(--madder); color: var(--white); font-size: var(--t-xs); font-weight: 500; line-height: 1.5; letter-spacing: 0; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 12.6em; text-align: center; }
.hint { display: grid; place-items: center; min-height: 44px; margin-top: 38px; font-size: var(--t-s); color: var(--grey); }
.hint > * { grid-area: 1 / 1; transition: opacity .3s var(--ease), visibility .3s; }
.hint button { color: var(--ink); opacity: 0; visibility: hidden; pointer-events: auto; }
.changed .hint span { opacity: 0; }
.changed .hint button { opacity: 1; visibility: visible; transition-delay: .2s; }

.piece { position: absolute; z-index: 3; cursor: grab; touch-action: none; transform: translateY(calc(var(--sy, 0) * var(--d, 0) * 1px)); }
.hero .piece, .hero .bubble { transition: scale .35s var(--ease), filter .35s var(--ease); user-select: none; }
.hero .held { scale: 1.03; cursor: grabbing; z-index: 8; filter: drop-shadow(0 20px 24px rgba(31, 38, 56, .2)); }
.p-wire { display: none; left: 4.2%; top: 11.5%; rotate: -3deg; --in: .15s; }
.p-wire .mini { box-shadow: 0 0 0 1px rgba(31, 38, 56, .06), 0 12px 28px -14px rgba(31, 38, 56, .14); }
.p-design { left: 16px; bottom: 7%; width: min(58vw, 46svh); rotate: 2deg; --in: .3s; }
.p-phone { right: 18px; bottom: 5%; width: min(24vw, 20svh); rotate: 4deg; --in: .45s; }
@keyframes arrive { from { opacity: 0; translate: 0 36px; rotate: 0deg; } }

.bubble { position: absolute; z-index: 7; padding: 8px 14px 9px; background: var(--white); border-radius: 12px 12px 12px 3px; box-shadow: var(--shadow); font-size: var(--t-xs); line-height: 1.35; color: var(--ink); max-width: calc(100vw - 32px); }
.bubble.tail-top { border-radius: 3px 12px 12px 12px; }
.bubble.tail-right { border-radius: 12px 12px 3px 12px; }
.bubble b { font-weight: 600; }
.by-d { color: var(--madder); } .by-b { color: var(--cobalt); }
.bubble[data-drag] { cursor: grab; touch-action: none; }
.b-one { display: none; right: 6%; top: 25%; --in: .6s; }
.b-two { left: 16px; top: 63%; --in: .75s; }

.cur { position: absolute; z-index: 9; width: 18px; height: 20px; pointer-events: none; }
.cur svg { display: block; width: 18px; height: 20px; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(31, 38, 56, .3)); }
.cur path { fill: var(--c); stroke: var(--white); stroke-width: 1.5; stroke-linejoin: round; }
.cur i { position: absolute; left: 14px; top: 17px; padding: 1px 7px; border-radius: 2px 7px 7px 7px; background: var(--c); color: var(--white); font: 500 var(--t-xs)/1.5 var(--font); white-space: nowrap; box-shadow: 0 0 0 1.5px var(--white); }
.c-design { --c: var(--madder); left: 72%; top: 44%; }
.c-design i { left: auto; right: 14px; border-radius: 7px 2px 7px 7px; }
.c-build { --c: var(--cobalt); left: 70%; top: 60%; }
.js.fonts .c-build { animation: cur-in .5s var(--ease) 1s backwards, walk-build 17s cubic-bezier(.45, 0, .2, 1) 2.4s infinite; }
.c-ai { --c: var(--green); left: 8%; top: 50%; }
.js.fonts .c-ai { animation: cur-in .5s var(--ease) 1.15s backwards, walk-ai 23s cubic-bezier(.45, 0, .2, 1) 6s infinite; }
.js.fonts .c-design { animation: cur-in .5s var(--ease) .85s backwards; }
.c-you { --c: var(--ink); left: 0; top: 0; opacity: 0; transition: opacity .2s; }
.c-you svg { display: none; }
.inspecting .c-you { visibility: hidden; }
@keyframes cur-in { from { opacity: 0; } }
@keyframes walk-build { 0%, 20% { translate: 0 0; } 28%, 52% { translate: -4vw 9vh; } 60%, 84% { translate: 3vw 4vh; } 92%, 100% { translate: 0 0; } }
@keyframes walk-ai { 0%, 26% { translate: 0 0; } 34%, 62% { translate: -9vw 2vh; } 70%, 90% { translate: 6vw -3vh; } 97%, 100% { translate: 0 0; } }

/* Statement */
.quote { height: 110svh; }
.q-stick { position: sticky; top: 15svh; height: 70svh; display: grid; place-content: center; justify-items: center; gap: 32px; padding: 0 var(--m); text-align: center; }
.q-text { position: relative; max-width: 13em; font-size: var(--t-xxl); line-height: 1.04; font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
.q-text span { color: var(--line); transition: color .3s; }
.q-text span.on { color: var(--ink); }
.q-caret { position: absolute; left: 0; top: 0; width: 3px; height: 1em; background: var(--madder); transition: translate .22s var(--ease), opacity .2s; pointer-events: none; }

/* Services */
.services { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 var(--side) var(--sec); }
.card-col + .card-col { margin-top: 20px; }
.card { --pad: 20px; --art: clamp(84px, 24vw, 112px); --beside: 0; position: relative; display: block; padding: var(--pad) var(--pad) calc(var(--pad) + var(--art)); border-radius: var(--r); color: var(--white); overflow: hidden; isolation: isolate; background: var(--madder); }
.art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.card h2 { padding-right: 28px; font-size: 28px; text-wrap: initial; }
.card h2 br { display: none; }
.card p { margin-top: 8px; max-width: 26em; font-size: var(--t-s); line-height: 1.36; }
.go { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; transition: transform .4s var(--ease); }
.go path { fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card { transition: transform .5s var(--ease); }
.card:active { transform: scale(.992); }
.cap { margin-top: 10px; padding: 0 4px; max-width: 28em; font-size: var(--t-s); line-height: 1.4; color: var(--grey); }

/* Dark */
.dark { background: var(--black); color: var(--white); padding: var(--sec) var(--side) 0; }
.panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.panel-copy { display: flex; flex-direction: column; align-items: flex-start; }
.lead { margin-top: 28px; font-size: var(--t-l); line-height: 1.28; font-weight: 500; letter-spacing: -.012em; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; border-radius: var(--r); background: var(--madder); color: var(--white); font-weight: 600; font-size: var(--t-s); transition: transform .3s var(--ease), background .2s; }
.btn:active { transform: scale(.98); }
.panel .btn { margin-top: 32px; }

.laptop { padding-inline: 3%; }
.lid { position: relative; padding: 1.5% 1.3% 1.3%; background: var(--bezel); border-radius: 12px 12px 0 0; box-shadow: inset 0 0 0 1px var(--metal), inset 0 1px 0 var(--metal-lit); }
.lid::before { content: ''; position: absolute; left: 50%; top: 3px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--metal); }
.lid .mini { border-radius: 2px; box-shadow: none; }
.screens { display: grid; }
.screens .mini { grid-area: 1 / 1; opacity: 0; transition: opacity 0s .42s; }
.screens .mini.now { z-index: 1; opacity: 1; transition: opacity .42s var(--ease); }
.base { position: relative; width: 106%; height: clamp(11px, 1vw, 16px); margin-left: -3%; border-radius: 1px 1px 12px 12px / 1px 1px 100% 100%; background: linear-gradient(90deg, var(--metal), transparent 6%, transparent 94%, var(--metal)), linear-gradient(var(--metal-lit) 1px, var(--metal) 1px, var(--metal) 50%, var(--bezel)); box-shadow: 0 1px 0 var(--bezel); }
.base::before { content: ''; position: absolute; left: 50%; top: 0; width: 13%; height: 38%; translate: -50% 0; border-radius: 0 0 7px 7px; background: linear-gradient(var(--bezel), var(--metal)); }
.scrub-cap { margin-top: auto; padding-top: 32px; min-height: calc(3.9em + 32px); font-size: var(--t-l); line-height: 1.3; font-weight: 500; letter-spacing: -.012em; transition: opacity .22s var(--ease); }
.scrub-cap.swap { opacity: 0; transition-duration: .12s; }
.scrub input { display: block; width: 100%; height: 44px; margin: 24px 0 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: grab; }
.scrub input:active { cursor: grabbing; }
.scrub input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--madder) var(--p, 0%), var(--metal-lit) var(--p, 0%)); }
.scrub input::-moz-range-track { height: 2px; background: var(--metal-lit); }
.scrub input::-moz-range-progress { height: 2px; background: var(--madder); }
.scrub input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px var(--black), 0 0 0 5px var(--madder); }
.scrub input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px var(--black), 0 0 0 5px var(--madder); }
.scrub input::-webkit-slider-thumb { transition: scale .2s var(--ease); }
.scrub-ticks { position: relative; height: 44px; }
.scrub-ticks button { position: absolute; left: calc(9px + (100% - 18px) * var(--i) / 4); top: 0; min-height: 44px; min-width: 44px; padding: 0 4px; translate: -50% 0; font-size: var(--t-xs); color: transparent; white-space: nowrap; transition: color .2s, font-weight .2s; }
.scrub-ticks button:first-child { left: 0; translate: 0 0; padding-left: 0; }
.scrub-ticks button:last-child { left: auto; right: 0; translate: 0 0; padding-right: 0; }
.scrub-ticks button.on { color: var(--white); }
.scrub-ticks button.on { font-weight: 600; }
.scrub-ticks button::before { content: ''; position: absolute; top: -24px; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: var(--metal-lit); transition: background .2s; }
.scrub-ticks button:first-child::before { left: 7px; }
.scrub-ticks button:last-child::before { left: auto; right: 7px; }
.scrub-ticks button.past::before { background: var(--madder); }
.scrub-ticks button.on::before { background: transparent; }

.line-wrap { position: relative; margin: 0 calc(var(--m) * -1); overflow: clip; }
.line-wrap .guides { -webkit-mask-image: linear-gradient(transparent, black 45%); mask-image: linear-gradient(transparent, black 45%); }
.line-wrap .guides line { stroke: var(--metal); opacity: 1; }
.one-line { position: relative; max-width: 13.4em; margin: 0 auto; padding: clamp(88px, 13vw, 200px) var(--m); text-align: center; font-size: var(--t-xxl); line-height: 1.12; font-weight: 600; letter-spacing: -.03em; }
.one-line .ch { opacity: 0; }
.one-line .ch.on { opacity: 1; }
.car { position: absolute; left: 0; top: 0; width: 3px; height: 1em; background: var(--c); opacity: 0; letter-spacing: 0; transition: opacity .2s; }
.car.show { opacity: 1; }
.car i { transition: opacity .4s var(--ease) .8s; }
.c-r.rest i, .c-b.rest i { opacity: 0; }
.car i { position: absolute; left: 0; bottom: 100%; margin-bottom: 3px; padding: 1px 7px; border-radius: 7px 7px 7px 2px; background: var(--c); color: var(--white); font: 500 var(--t-xs)/1.5 var(--font); }
.car.flip i { left: auto; right: 0; bottom: auto; top: 100%; margin: 3px 0 0; border-radius: 7px 2px 7px 7px; }
.c-r { --c: var(--madder); } .c-b { --c: var(--cobalt); background: var(--cobalt-lit); }

/* Details */
.details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; padding: var(--sec) var(--side) 0; }
.d-copy p { margin-top: 24px; max-width: 26em; color: var(--grey); }
.d-copy .btn { margin-top: 32px; min-width: 11.5em; }
.dark-btn { background: var(--ink); }
.d-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; position: relative; }
.sheet { display: flex; flex-direction: column; justify-content: space-between; min-height: 168px; padding: 16px; border-radius: var(--r); font-size: var(--t-s); line-height: 1.3; box-shadow: var(--shadow); transition: transform .9s var(--ease); }
.s-mid { grid-column: 1 / -1; min-height: 240px; z-index: 3; color: var(--white); background: var(--madder); }
.s-left { z-index: 1; background: var(--sand); color: var(--ink); }
.s-right { z-index: 2; background: var(--ink); color: var(--white); }
.js .d-stack.in .sheet { transition-delay: .05s; }
.js .d-stack .bubble { opacity: 0; translate: 0 12px; transition: opacity .5s var(--ease) var(--in), translate .6s var(--ease) var(--in); }
.js .d-stack.in .bubble { opacity: 1; translate: 0 0; }
.b-four { --in: .55s; } .b-three { --in: .75s; }
.sheet > span { text-wrap: balance; }
.s-left strong { font-size: clamp(30px, 2.7vw, 40px); line-height: 1; font-weight: 700; letter-spacing: -.03em; }
.ring { flex: none; display: grid; place-items: center; align-self: flex-end; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--white); font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.glyph { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; font-size: 140px; line-height: 1; font-weight: 700; }
.m { position: absolute; left: -16px; right: -16px; top: var(--top, 50%); height: 1px; background: rgba(255, 255, 255, .6); font: 500 var(--t-xs)/1 var(--font); }
.m span { position: absolute; left: 16px; bottom: 5px; }
.m-base span { bottom: auto; top: 6px; }
.g-a i { display: inline-block; width: 0; height: 0; }
.d-stack .bubble { position: static; grid-column: 1 / -1; z-index: 4; }

.colophon { max-width: 26em; margin-top: clamp(48px, 5vw, 72px); font-size: var(--t-m); }
.measures p { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 9px 0; max-width: none; border-top: 1px solid var(--line); font-size: var(--t-s); line-height: 1.3; color: var(--ink); }
.measures span { color: var(--grey); }
.measures b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.d-copy .m-note { margin-top: 0; max-width: none; padding-top: 9px; border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--grey); }

/* Start */
.start { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; padding: var(--sec) var(--side); }
.s-form { align-self: start; }
.s-lead { margin-top: 12px; color: var(--grey); }
.s-collage { display: none; position: relative; aspect-ratio: 1 / .82; }
.s-collage .piece { transform: none; }
.p-a { left: 0; top: 10%; width: 76%; rotate: -2deg; animation: none; cursor: default; }
.p-b { right: 3%; top: 22%; width: 25%; rotate: 4deg; animation: none; cursor: default; }
.b-five { left: 8%; top: 68%; }
.s-form textarea { display: block; width: 100%; field-sizing: content; min-height: 2.6em; margin-top: 28px; padding: 8px 0 12px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; font-size: var(--t-l); line-height: 1.3; font-weight: 500; letter-spacing: -.012em; resize: none; transition: border-color .2s, box-shadow .2s; }
.s-form textarea::placeholder { color: var(--grey); opacity: 1; }
.s-form textarea:focus { outline: 0; border-color: var(--madder); box-shadow: 0 1px 0 var(--madder); }
.s-form fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.s-form fieldset label { position: relative; cursor: pointer; }
.s-form fieldset input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.s-form fieldset span { display: flex; justify-content: center; align-items: center; min-height: 44px; padding: 0 16px; padding-inline: 8px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--fade); font-size: var(--t-s); font-weight: 500; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.s-form input:checked + span { background: var(--ink); color: var(--white); box-shadow: none; }
.s-form input:focus-visible + span { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.s-row { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px 24px; margin-top: 28px; }
.link { min-height: 44px; font-size: var(--t-s); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .2s; }
.s-count { margin-top: 8px; font-size: var(--t-s); text-align: right; color: var(--grey); }
.s-count:empty { display: none; }
.s-note { min-height: 1.4em; margin-top: 8px; font-size: var(--t-s); text-align: right; color: var(--green); transition: opacity .4s var(--ease); }
.s-note.gone { opacity: 0; }

.foot { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 16px; padding: 18px var(--side); border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--grey); }
.foot p { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.f-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 500; transition: color .2s; }
.f-mail { justify-self: end; display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 500; transition: color .2s; }

/* Privacy: one column of plain reading, the same at every size */
.note { max-width: 38rem; margin-inline: auto; padding: 112px var(--m) 72px; }
.note h1 { font-size: var(--t-xxl); line-height: 1.04; font-weight: 700; letter-spacing: -.035em; }
.note-lead { margin-top: 20px; font-size: var(--t-l); line-height: 1.3; font-weight: 500; }
.note h2 { margin-top: 48px; font-size: var(--t-l); line-height: 1.2; }
.note h2 + p { margin-top: 12px; }
.note p + p { margin-top: 16px; }
.note p a:not(.pill) { text-decoration: underline; text-underline-offset: .18em; transition: color .2s; }
.note-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 8px; font-size: var(--t-s); font-weight: 500; transition: color .2s; }
.note p.note-end { display: flex; justify-content: flex-end; margin-top: 48px; }

/* The page in miniature: one drawing, five stages, all sizes in cqw */
.mini { container-type: inline-size; position: relative; aspect-ratio: 16 / 10.4; overflow: hidden; border-radius: var(--r); background: var(--white); box-shadow: var(--shadow); user-select: none; }
.m-bar { display: flex; align-items: center; gap: .8cqw; height: 4.4cqw; padding: 0 1.6cqw; background: var(--grid); box-shadow: inset 0 -1px 0 var(--line); }
.m-bar i { width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--fade); }
.m-bar span { position: absolute; left: 50%; translate: -50% 0; padding: .3cqw 5cqw; border-radius: .6cqw; background: var(--white); font-size: 1.3cqw; line-height: 1.2; color: var(--grey); }
.m-page { position: relative; display: flex; flex-direction: column; height: calc(100% - 4.4cqw); padding: 1.6cqw 1.8cqw 1.8cqw; }
.m-nav { display: flex; justify-content: space-between; align-items: center; transition: opacity .3s; }
.m-brand { display: flex; align-items: center; gap: .7cqw; }
.m-brand img:first-child { width: 2.8cqw; height: 2.8cqw; }
.m-brand img:last-child { width: 7.6cqw; height: 2.1cqw; position: relative; top: .2cqw; }
.m-pill { padding: .7cqw 1.6cqw; border-radius: .5cqw; background: var(--ink); color: var(--white); font-size: 1.25cqw; font-weight: 600; line-height: 1; transition: background .4s, color .3s; }
.m-word { flex: 1; display: grid; place-items: center; transition: opacity .3s; }
.m-word span { position: relative; white-space: nowrap; padding: 0 1cqw; font-size: 11cqw; line-height: 1.04; font-weight: 700; letter-spacing: -.035em; color: var(--ink); transition: color .4s, background .4s, box-shadow .4s, font-size .2s var(--ease); }
.m-word u { position: absolute; width: .8cqw; height: .8cqw; margin: -.4cqw; background: var(--white); box-shadow: 0 0 0 1px var(--madder); opacity: 0; transition: opacity .3s; }
.m-word u:nth-of-type(1) { left: 0; top: 0; } .m-word u:nth-of-type(2) { left: 100%; top: 0; }
.m-word u:nth-of-type(3) { left: 0; top: 100%; } .m-word u:nth-of-type(4) { left: 100%; top: 100%; }
.m-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9cqw; height: 37%; transition: opacity .3s; }
.m-cards div { padding: 1.2cqw; border-radius: .5cqw; background-color: var(--madder); background-image: radial-gradient(rgba(255, 154, 126, .55) .22cqw, transparent .26cqw); background-size: 1cqw 1cqw; transition: background .4s, box-shadow .4s; }
.m-cards b { display: block; max-width: 8em; text-wrap: balance; color: var(--white); font-size: 1.9cqw; line-height: 1.05; font-weight: 600; letter-spacing: -.02em; transition: color .3s; }
.m-q { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 12cqw; opacity: 0; transition: opacity .35s; background: var(--white); }
.m-q p { font-size: 5.4cqw; line-height: 1.1; font-weight: 700; letter-spacing: -.028em; color: var(--ink); text-align: center; text-wrap: balance; }
.m-q i { display: inline-block; width: .4cqw; height: 1em; margin-left: .4cqw; vertical-align: -.14em; background: var(--madder); }
.m-code { position: absolute; inset: 0; padding: 3.4cqw 3cqw; background: var(--bezel); color: var(--on-dark); font: 400 3cqw/1.56 ui-monospace, Consolas, monospace; opacity: 0; transition: opacity .35s; }
.m-code s { display: inline-block; width: 4.6cqw; color: var(--metal-lit); text-decoration: none; }
.m-code b { color: var(--madder-lit); font-weight: 400; }
.m-code em { color: var(--white); font-style: normal; }
.m-code q { color: var(--sand); quotes: none; }

[data-stage="question"] .m-q { opacity: 1; }
[data-stage="wire"] .m-brand { width: 10.8cqw; height: 2.8cqw; background: var(--grid); box-shadow: inset 0 0 0 1px var(--fade); }
[data-stage="wire"] .m-brand img { visibility: hidden; }
[data-stage="wire"] .m-pill { background: var(--white); color: transparent; box-shadow: inset 0 0 0 1px var(--fade); }
[data-stage="wire"] .m-word span, [data-stage="wire"] .m-cards div { color: transparent; background: linear-gradient(to top right, transparent calc(50% - .5px), var(--fade) calc(50% - .5px), var(--fade) calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(to bottom right, transparent calc(50% - .5px), var(--fade) calc(50% - .5px), var(--fade) calc(50% + .5px), transparent calc(50% + .5px)); box-shadow: inset 0 0 0 1px var(--fade); }
[data-stage="wire"] .m-cards b { color: transparent; }
[data-stage="design"] .m-word span { box-shadow: 0 0 0 1px var(--madder); }
[data-stage="design"] .m-word u { opacity: 1; }
[data-stage="code"] .m-code { opacity: 1; }

.mini[data-phone] { aspect-ratio: 9 / 19; border-radius: 15% / 7%; background: var(--white); box-shadow: 0 0 0 3px var(--bezel), 0 0 0 4px var(--metal), var(--shadow); }
.mini[data-phone] .m-bar { display: none; }
.mini[data-phone] .m-page { height: 100%; padding: 16cqw 6cqw 6cqw; }
.mini[data-phone] .m-page::before { content: ''; position: absolute; left: 50%; top: 3.6cqw; width: 26cqw; height: 6.4cqw; translate: -50% 0; border-radius: 4cqw; background: var(--bezel); }
.mini[data-phone] .m-brand { gap: 0; }
.mini[data-phone] .m-brand img:first-child { width: 12cqw; height: 12cqw; }
.mini[data-phone] .m-brand img:last-child { display: none; }
.mini[data-phone] .m-pill { padding: 2.8cqw 5cqw; font-size: 4.8cqw; }
.mini[data-phone][data-stage="wire"] .m-brand { width: 12cqw; height: 12cqw; }
.mini[data-phone] .m-word span { font-size: 19cqw; padding: 0 2cqw; }
.mini[data-phone] .m-cards { grid-template-columns: 1fr; gap: 2.4cqw; height: auto; }
.mini[data-phone] .m-cards div { padding: 4.4cqw; min-height: 17cqw; border-radius: 1.6cqw; background-size: 3.2cqw 3.2cqw; background-image: radial-gradient(rgba(255, 154, 126, .4) .5cqw, transparent .6cqw); }
.mini[data-phone][data-stage="wire"] .m-cards div { background-image: linear-gradient(to top right, transparent calc(50% - .5px), var(--fade) calc(50% - .5px), var(--fade) calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(to bottom right, transparent calc(50% - .5px), var(--fade) calc(50% - .5px), var(--fade) calc(50% + .5px), transparent calc(50% + .5px)); background-size: 100% 100%; }
.mini[data-phone] .m-cards b { font-size: 7cqw; }

/* Inspect */
body.inspecting, body.inspecting * { cursor: crosshair !important; }
.ins { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.ins-box { position: fixed; box-shadow: 0 0 0 1.5px var(--madder); background: rgba(216, 50, 28, .06); }
.ins-gap { position: fixed; background: var(--madder); }
.ins-gap b { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 1px 5px; border-radius: 3px; background: var(--madder); color: var(--white); font: 600 var(--t-xs)/1.4 var(--font); white-space: nowrap; }
.ins-tag { position: fixed; display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 0; padding: 12px 14px; max-width: 320px; border-radius: var(--r); background: var(--ink); color: var(--white); font: 400 var(--t-xs)/1.4 var(--font); box-shadow: var(--shadow); font-variant-numeric: tabular-nums; }
.ins-tag dt { color: var(--on-dark); }
.ins-tag dd { font-weight: 500; }
.ins-tag .t { grid-column: 1 / -1; margin-bottom: 4px; font-weight: 700; font-size: var(--t-s); }

@media (hover: hover) {
  .pill:hover { background: var(--madder); }
  .pill.ghost:not([aria-pressed="true"]):hover { background: var(--grid); }
  .actions.on-dark .pill:hover { background: var(--sand); }
  .actions.on-dark .pill.ghost:not([aria-pressed="true"]):hover { background: var(--metal); }
  .h:hover::after { background: var(--madder); transform: scale(1.4); }
  .hero .piece:not(.held):hover, .hero .bubble:not(.held):hover { scale: 1.012; }
  .card:hover .go { transform: translate(3px, -3px); }
  .btn:hover { background: var(--madder-deep); }
  .dark-btn:hover { background: var(--madder); }
  
  .scrub input:hover::-webkit-slider-thumb { scale: 1.12; }
  .s-form fieldset label:hover span { box-shadow: inset 0 0 0 1px var(--ink); }
  .link:hover { color: var(--madder); }
  .f-mail:hover, .f-link:hover, .note p a:not(.pill):hover, .note-back:hover { color: var(--madder); }
}
@media (hover: none) {
  .piece, .bubble[data-drag] { touch-action: pan-y; }
}
/* A phone is the base above. Each block below only adds what more room allows. */
@media (min-width: 560px) {
  /* Too wide for a band: words on the left, the drawing on the right */
  .card { --beside: 1; min-height: 190px; padding: 24px 50% 24px 24px; }
}
@media (min-width: 761px) {
  :root { --m: 24px; --g: 24px; --inset: calc(var(--m) + (100% - 2 * var(--m) + var(--g)) / 12); }
  .top .brand { min-width: 0; }
  .top .brand .word { display: block; }
  #inspect { display: inline-flex; }
  .hero { min-height: 640px; }
  .stage { place-content: center; padding-top: 0; }
  .frame { font-size: min(12.4vw, 27svh); }
  .hint { margin-top: 44px; }
  .bubble { max-width: none; white-space: nowrap; }
  .p-wire { display: block; width: min(24vw, 30svh); top: 12%; }
  .p-design { left: 6.4%; bottom: auto; top: 64%; width: min(40vw, 34svh); }
  .p-phone { right: 4.6%; bottom: auto; top: 56%; width: min(17vw, 15svh); }
  .b-one { display: block; top: 24%; }
  .b-two { left: 34%; top: 86%; }
  .c-design { left: 74%; top: 60%; }
  .c-design i { left: 14px; right: auto; border-radius: 2px 7px 7px 7px; }
  .c-build { left: 18%; top: 26%; }
  .c-ai { left: 66%; top: 88%; }
  .scrub-ticks button { color: var(--on-dark); }
  .s-collage { display: block; width: 100%; max-width: 480px; justify-self: center; order: 1; }
  .s-form fieldset { display: flex; flex-wrap: wrap; align-items: center; }
  .s-form fieldset span { display: inline-flex; padding-inline: 16px; }
  .scrub { width: 100%; max-width: 640px; justify-self: center; }
  .foot { grid-template-columns: 1fr auto 1fr; gap: 16px; }
  .foot p { grid-column: auto; justify-content: flex-end; gap: 24px; }
  .f-mail { justify-self: auto; }
  .d-stack { --w: clamp(190px, 16.5vw, 250px); display: block; height: clamp(440px, 42vw, 620px); }
  .sheet { position: absolute; top: 50%; left: 50%; width: var(--w); min-height: 0; aspect-ratio: 3 / 4.3; padding: 22px; }
  .s-mid { min-height: 0; transform: translate(-50%, -50%); }
  .s-left { padding-right: calc(var(--w) * .36); transform: translate(-118%, -48%) rotate(-5deg); }
  .s-right { padding-left: calc(var(--w) * .4); transform: translate(18%, -48%) rotate(5deg); }
  .js .d-stack:not(.in) .s-left, .js .d-stack:not(.in) .s-right { transform: translate(-50%, -50%); }
  .glyph { font-size: clamp(140px, 12.5vw, 190px); }
  .m { left: -22px; right: -22px; }
  .m span { left: 22px; }
  .d-stack .bubble { position: absolute; }
  .b-three { left: calc(50% - var(--w) * .5 - 26px); top: calc(50% + var(--w) * .717 - 12px); }
  .b-four { right: calc(50% - var(--w) * 1.18 + 26px); top: calc(50% - var(--w) * .717 - 44px); }
}
@media (min-width: 1001px) {
  /* Three across. The band for the drawing answers to the screen's height too, so no card fills a laptop */
  .services { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--g); }
  .card-col { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  .card-col + .card-col { margin-top: 0; }
  .card { --beside: 0; --pad: clamp(24px, 2.2vw, 36px); --art: clamp(120px, min(14vw, 24svh), 240px); min-height: 0; padding: var(--pad) var(--pad) calc(var(--pad) + var(--art)); }
  .card h2 { padding-right: 0; font-size: var(--t-xl); min-height: 2.12em; }
  .card h2 br { display: inline; }
  .card p { margin-top: 14px; font-size: var(--t-m); }
  .go { right: clamp(14px, 1.4vw, 22px); top: clamp(14px, 1.4vw, 22px); }
  .cap { margin-top: 14px; padding: 0 6px; }
  .panel { grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); margin-inline: calc((100% + var(--g)) / 12); }
  .details { grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); padding-inline: max(var(--inset), calc((100% - 1760px) / 2)); }
  .start { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); padding-inline: max(var(--inset), calc((100% - 1760px) / 2)); }
  .s-collage { order: 0; max-width: none; }
  .scrub { max-width: none; }
  .s-form fieldset { display: grid; }
  .s-form fieldset span { display: flex; padding-inline: 8px; }
  .s-form { margin-top: 6.8%; }
  /* The pieces answer to height as well as width, so a wide short screen never crowds the word */
  .p-wire { left: 4.2%; top: 11.5%; width: min(17vw, 30svh); }
  .p-design { top: 61%; width: min(25vw, 44svh); }
  .p-phone { top: 40%; width: min(10.6vw, 19svh); }
  .b-one { right: var(--m); top: 22%; }
  .b-two { left: 29%; top: 73%; }
  .c-ai { left: 58%; top: 80%; }
}
@media (min-width: 1281px) {
  .s-form fieldset { display: flex; flex-wrap: wrap; align-items: center; }
  .s-form fieldset span { display: inline-flex; padding-inline: 16px; }
}
@media (min-width: 1401px) {
  .b-one { right: 6%; top: 25%; }
}
@media (min-width: 761px) and (hover: hover) {
  .js .d-stack.in:hover .sheet { transition: transform .5s var(--ease); }
  .js .d-stack.in:hover .s-left { transform: translate(-122%, -48%) rotate(-7deg); }
  .js .d-stack.in:hover .s-right { transform: translate(22%, -48%) rotate(7deg); }
  .scrub-ticks button:hover { color: var(--white); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .rise { opacity: 1; translate: 0 0; }
}