/* LOGOS — independent designer & developer. Mist pink and charcoal. Tokens, type and layout: see DESIGN.md. */

:root {
  --paper: #f4ecea;
  --paper-2: #eadbd7;
  --mist: #e7d2ce;
  --ink: #1e1d1f;
  --ink-2: #5d5455;
  --grey: #9a8c8b;
  --line: rgba(30, 29, 31, .14);
  --accent: #1e1d1f;
  --night: #1e1d1f;
  --bone: #f4ecea;
  --bone-2: #a99d9b;
  --m: clamp(16px, 2.5vw, 40px);
  --g: clamp(10px, 1.25vw, 20px);
  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "Geist", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --hd: 56px;
  --rad: clamp(8px, .8vw, 14px); /* the corners of a framed website picture */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); scrollbar-gutter: stable; }
body {
  margin: 0; background: transparent; color: var(--ink);
  font: 400 15px/1.5 var(--sans); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p, figure, dl, dd, ol, ul { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; }
main:focus { outline: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 8px; top: 8px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--paper); transform: translateY(-160%); }
.skip:focus { transform: none; }

/* ---------- type ---------- */
.mono { font: 400 11px/1.35 var(--mono); letter-spacing: .01em; text-transform: uppercase; }
.lead { font-size: clamp(21px, 2.15vw, 34px); line-height: 1.2; letter-spacing: -.022em; font-weight: 400; }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
.it { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); vertical-align: .08em; margin-right: .6em; }
.dot.is-live { animation: pulse 2.4s var(--ease) infinite; }
/* Client Project / Concept Project: a filled dot for client work, a ring for concepts */
.lb { color: var(--ink); white-space: nowrap; }
.lb::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 7px; vertical-align: .1em; box-shadow: inset 0 0 0 1px currentColor; }
.lb.is-client::before { background: currentColor; }
.cs-st .dot { background: transparent; box-shadow: inset 0 0 0 1.2px currentColor; }
.cs-st .dot.is-client { background: currentColor; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(30, 29, 31, .4); } 60% { box-shadow: 0 0 0 7px rgba(30, 29, 31, 0); } }
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -.12em; flex: none; }
.ulink { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease); padding-bottom: 1px; }
.ulink:hover { background-size: 0 1px; background-position: 100% 100%; }
/* a label that rolls up to a copy of itself on hover */
.roll { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.2; height: 1.2em; }
.roll > span { display: block; transition: transform .55s var(--ease); }
a:hover .roll > span, button:hover .roll > span { transform: translateY(-100%); }

/* ---------- grid ---------- */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-inline: var(--m); }

/* ---------- header: charcoal; bone while a dark section is under it (chrome.js → headerTone) ---------- */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hd);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: center;
  padding: 0 var(--m); color: var(--ink); pointer-events: none;
  font-size: 13px; line-height: 1; transition: transform .7s var(--ease), color .45s var(--ease);
}
html.is-dark-hd:not(.is-menu) .hd { color: var(--bone); }
.hd a, .hd button { pointer-events: auto; }
.hd-logo { grid-column: 1 / 3; font-weight: 600; letter-spacing: -.02em; font-size: 15px; }
.hd-logo sup { font-size: .55em; vertical-align: .55em; margin-left: 1px; font-weight: 500; }
.hd-nav { grid-column: 7 / 11; display: flex; gap: clamp(14px, 1.6vw, 28px); }
.hd-nav a { position: relative; }
.hd-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: currentColor; }
.hd-time { grid-column: 12 / 13; justify-self: end; font: 400 11px/1 var(--mono); text-transform: uppercase; }
/* sound switch: four bars that move while it plays */
.hd-snd { grid-column: 11 / 12; justify-self: end; display: inline-flex; align-items: center; gap: 8px; height: 40px; font: 400 11px/1 var(--mono); text-transform: uppercase; }
.hd-snd-bars { display: inline-flex; align-items: center; gap: 2px; height: 11px; }
.hd-snd-bars i { width: 1.5px; height: 100%; background: currentColor; transform: scaleY(.22); transition: transform .5s var(--ease); }
.hd-snd.is-on .hd-snd-bars i { animation: eq .9s var(--ease-io) infinite alternate; }
.hd-snd.is-on .hd-snd-bars i:nth-child(2) { animation-duration: .7s; animation-delay: -.4s; }
.hd-snd.is-on .hd-snd-bars i:nth-child(3) { animation-duration: 1.1s; animation-delay: -.2s; }
.hd-snd.is-on .hd-snd-bars i:nth-child(4) { animation-duration: .8s; animation-delay: -.6s; }
@keyframes eq { from { transform: scaleY(.22); } to { transform: scaleY(1); } }
/* sound is on but the browser waits for a tap: the bars breathe */
.hd-snd.is-waiting .hd-snd-bars { animation: wait 1.6s var(--ease-io) infinite; }
@keyframes wait { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.hd-menu, .qn { display: none; }
.hd.is-hidden { transform: translateY(-100%); }

/* phone menu */
.menu { position: fixed; inset: 0; z-index: 45; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--hd) + 24px) var(--m) calc(28px + env(safe-area-inset-bottom)); visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease-io), visibility 0s .8s; }
.menu nav { display: grid; gap: 2px; }
.menu nav a { font-size: clamp(44px, 14vw, 96px); font-weight: 500; letter-spacing: -.05em; line-height: 1.02; display: flex; align-items: baseline; gap: 12px; }
.menu nav a small { font: 400 11px/1 var(--mono); color: var(--grey); }
.menu-foot { margin-top: 36px; display: flex; justify-content: space-between; gap: 16px; }
.is-menu .menu { visibility: visible; clip-path: inset(0); transition: clip-path .8s var(--ease-io), visibility 0s; }

/* ---------- cursor (fine pointers only) ---------- */
/* charcoal dot with a pale edge + a ring that follows a little later: visible on pink, white, pictures and charcoal */
.cur { position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; display: none; transition: opacity .3s; }
.has-cursor .cur { display: block; }
.cur-dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1.5px rgba(244, 236, 234, .95), 0 1px 6px rgba(30, 29, 31, .25); transition: transform .45s var(--ease), opacity .3s; }
.cur-ring { position: absolute; left: 0; top: 0; }
.cur-ring i { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(30, 29, 31, .55); box-shadow: 0 0 0 1px rgba(244, 236, 234, .45), inset 0 0 0 1px rgba(244, 236, 234, .45); transition: transform .6s var(--ease), border-color .4s, opacity .3s; }
.cur-label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.4); opacity: 0; white-space: nowrap; padding: 8px 12px 7px; border-radius: 99px; background: var(--ink); color: var(--paper); box-shadow: 0 0 0 1px rgba(244, 236, 234, .5); font: 500 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; transition: transform .45s var(--ease), opacity .25s; }
.cur.is-link .cur-dot { transform: scale(.7); }
.cur.is-link .cur-ring i { transform: scale(1.45); border-color: var(--ink); }
.cur.is-label .cur-dot, .cur.is-label .cur-ring i { transform: scale(0); opacity: 0; }
.cur.is-down .cur-ring i { transform: scale(.8); }
.cur.is-label .cur-label { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.cur.is-down .cur-label { transform: translate(-50%, -50%) scale(.9); }
.cur.is-hidden { opacity: 0; }

/* ---------- the world layer: one fixed canvas behind every page (site/js/core/worldhost.js) ---------- */
.world-layer { position: fixed; left: 0; top: 0; z-index: -1; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility 0s .9s; }
.world-layer.is-on.is-drawn { opacity: 1; visibility: visible; transition: opacity .9s var(--ease); }
.world-layer canvas { display: block; width: 100%; height: 100%; }
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
.has-cursor input, .has-cursor textarea { cursor: text; }

/* ---------- page transition layers ---------- */
.fx { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.fx-frame { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0; will-change: transform; background: var(--c, var(--paper-2)); }
.fx-frame img { position: absolute; left: 0; top: 0; max-width: none; will-change: transform; transform-origin: 0 0; }
.is-busy { cursor: progress; }
.is-busy main { pointer-events: none; }

/* ---------- pictures ---------- */
.im { position: relative; overflow: hidden; background: var(--c, var(--paper-2)); }
.im picture, .im img { width: 100%; height: 100%; }
.im img { object-fit: cover; object-position: 50% 0; }
.im.is-shot { box-shadow: 0 0 0 1px var(--line); }
.im.is-phone { border-radius: clamp(10px, 1.1vw, 18px); box-shadow: 0 0 0 1px var(--line); }
.cap { margin-top: 12px; color: var(--grey); display: flex; gap: 12px; }
.cap b { font-weight: 400; color: var(--ink); }

/* ---------- reveal states (set only once scripts run; the failsafe shows everything if they don't) ---------- */
html.js [data-rv] { opacity: 0; transform: translate3d(0, 28px, 0); }
html.js [data-rv].is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
html.js [data-rv="fade"] { transform: none; }
html.js [data-rv="img"] { opacity: 1; transform: none; clip-path: inset(8% 6% 8% 6%); }
html.js [data-rv="img"] img { transform: scale(1.12); }
html.js [data-rv="img"].is-in { clip-path: inset(0); transition: clip-path 1.25s var(--ease-io); transition-delay: var(--d, 0s); }
html.js [data-rv="img"].is-in img { transform: none; transition: transform 1.6s var(--ease-io); transition-delay: var(--d, 0s); }
.ln { display: block; overflow: hidden; padding: .14em 0 .08em; margin: -.14em 0 -.08em; }
.ln > span { display: block; }
html.js [data-lines] .ln > span { transform: translate3d(0, 105%, 0); }
html.js [data-lines].is-in .ln > span { transform: none; transition: transform 1.1s var(--ease); transition-delay: calc(var(--d, 0s) + var(--i, 0) * .07s); }
html.js:not(.is-ready) [data-rv], html.js:not(.is-ready) [data-lines] .ln > span, html.js:not(.is-ready) .mast-l { animation: failsafe 0s 4s forwards; }
@keyframes failsafe { to { opacity: 1; transform: none; clip-path: none; } }
html.is-still [data-rv], html.is-still [data-rv] img, html.is-still [data-lines] .ln > span, html.is-still .mast-l, html.is-still .cs-head { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }

/* ---------- home: hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding-top: calc(var(--hd) + clamp(28px, 6vh, 72px)); overflow: hidden; }
.hero-top { row-gap: 18px; align-items: start; }
.hero-role { grid-column: 1 / 4; }
.hero-loc { grid-column: 4 / 7; color: var(--ink-2); }
.hero-mid { margin-top: auto; padding-bottom: clamp(18px, 3.4vh, 36px); align-items: end; row-gap: clamp(22px, 4vh, 44px); }
.hero-what { grid-column: 1 / 10; font-size: clamp(30px, 3.9vw, 66px); line-height: 1.02; letter-spacing: -.045em; font-weight: 400; }
.hero-avail { grid-column: 1 / 5; }
.hero-down { grid-column: 9 / 13; justify-self: end; display: inline-flex; gap: 10px; align-items: center; }
.hero-down .ic { transition: transform .5s var(--ease); }
.hero-down:hover .ic { transform: translateY(3px); }
.mast { position: relative; margin: 0 var(--m); padding-bottom: clamp(10px, 1.6vw, 22px); font-weight: 600; font-size: calc((100vw - 2 * var(--m)) / 3.33); line-height: .74; letter-spacing: -.055em; white-space: nowrap; user-select: none; }
.mast-w { display: flex; align-items: flex-end; }
.mast-l { display: block; font-variation-settings: "wght" var(--w, 600); transform-origin: 50% 100%; will-change: transform; }
html.js .mast-l { transform: translate3d(0, 110%, 0); }
html.js .mast.is-in .mast-l { transform: translate3d(0, 0, 0) scaleY(var(--sy, 1)); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i) * .065s); }
html.js .mast.is-live .mast-l { transition: none; }
.mast-r { font-size: .16em; letter-spacing: 0; font-weight: 500; align-self: flex-start; margin: .2em 0 0 .25em; }
.mast-clip { display: block; overflow: hidden; padding-top: .06em; }
.mast.is-live .mast-clip { overflow: visible; }

/* ---------- home: the world (site/js/world) ---------- */
.wd { position: relative; }
/* two lengths of scrolling: the walk through the O, then the band of work (site/js/pages/band.js) */
.wd-a { height: 260svh; }
.wd-b { height: calc(var(--n, 6) * 62svh + 110svh); }
.wd.is-work .wd-b { height: calc(var(--n, 8) * 52svh + 70svh); }
.wd-c { height: 860svh; } /* why, three plans, six steps */
html:not(.js) .wd-a, html:not(.js) .wd-b, html:not(.js) .wd-c, html.is-still .wd-a, html.is-still .wd-b, html.is-still .wd-c, .wd.is-flat .wd-a, .wd.is-flat .wd-b, .wd.is-flat .wd-c { display: none; }
/* with the band in the world, the plain list of selected work isn't needed (it stays for no WebGL / reduced motion) */
.wd.is-live + .sw, .wd.is-live ~ .hp { display: none; }
/* home: the page ends over the world at dusk, the footer's words over the lantern */
.wd.is-live[data-journey] ~ .ft { background: linear-gradient(to top, rgba(30, 29, 31, .62), rgba(30, 29, 31, .3) 55%, rgba(30, 29, 31, 0)); }
.wd.is-live[data-journey] ~ .ft .ft-m { border-top-color: rgba(244, 236, 234, .2); }

/* ---------- home: where you are on the way — Index · Work · Pricing · Process · Contact, each a way to go there ---------- */
.rt { position: fixed; right: calc(var(--m) - 8px); top: 50%; z-index: 40; display: grid; gap: 2px; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s, color .5s var(--ease); }
.wd.is-live .rt { opacity: 1; visibility: visible; transition: opacity .9s var(--ease) .3s, visibility 0s; }
html.is-gate .rt, html.is-menu .rt { opacity: 0; visibility: hidden; }
.rt a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 24px; padding-left: 12px; color: var(--grey); }
.rt a span { opacity: 0; transform: translate3d(6px, 0, 0); transition: opacity .4s var(--ease), transform .5s var(--ease); text-shadow: 0 0 10px rgba(244, 236, 234, .9); }
.rt:hover a span, .rt a:focus-visible span, .rt a.is-on span { opacity: 1; transform: none; }
.rt a i { flex: none; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; transition: transform .5s var(--ease), background .4s var(--ease); }
.rt a.is-on { color: var(--ink); }
.rt a.is-on i { background: currentColor; transform: scale(1.35); }
.rt a:hover { color: var(--ink); }
/* over the dusk and the footer: light */
html.is-dark-hd .rt a { color: var(--bone-2); }
html.is-dark-hd .rt a.is-on, html.is-dark-hd .rt a:hover { color: var(--bone); }
html.is-dark-hd .rt a span { text-shadow: 0 0 10px rgba(30, 29, 31, .7); }
html:not(.js) .rt, html.is-still .rt, .wd.is-flat .rt { display: none; }

/* ---------- the way on after the work (home, world/journey.js): each plan in full at its stele, the steps over the stones ---------- */
.jx { position: absolute; left: 0; right: 0; top: 0; height: 100svh; pointer-events: none; }
.jx-p, .jx-s { position: absolute; left: 0; right: 0; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility 0s .7s, color .6s var(--ease); }
.wd.is-jp .jx-p, .wd.is-js .jx-s { opacity: 1; visibility: visible; transition: opacity .9s var(--ease) .1s, color .6s var(--ease); }
.wd.is-jp .jx-p a, .wd.is-js .jx-s a { pointer-events: auto; }
.jx-head { grid-column: 1 / 6; position: relative; display: grid; gap: 10px; }
.jx-k { color: var(--ink-2); }
.jx-k b { font-weight: 400; color: var(--ink); }
.jx-t { font-size: clamp(30px, 2.9vw, 50px); line-height: .96; letter-spacing: -.05em; font-weight: 400; }
.jx-t em { font-family: var(--serif); font-style: italic; letter-spacing: -.02em; font-size: 1.08em; }
/* pricing: the three listed (each a way to walk to its stele), the one at its stele in full */
.jx-p { top: 0; bottom: 0; display: flex; align-items: center; padding-top: var(--hd); }
.jx-p .grid { width: 100%; row-gap: 18px; }
/* the veils reach the stage's bottom (100lvh) even while the words keep to the screen left by the address bar (100svh) */
.jx-p::before { content: ""; position: absolute; inset: 0; bottom: calc(100svh - 100lvh); background: linear-gradient(to right, rgba(244, 236, 234, .92), rgba(244, 236, 234, .62) 36%, rgba(244, 236, 234, 0) 56%); pointer-events: none; }
.jx-tabs { grid-column: 1 / 6; position: relative; border-top: 1px solid var(--line); }
.jx-tabs a { display: grid; grid-template-columns: 28px 1fr auto; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--grey); transition: color .4s var(--ease), padding .5s var(--ease); }
.jx-tabs b { font-weight: 500; font-size: 15px; letter-spacing: -.02em; }
.jx-tabs i { font-style: normal; }
.jx-tabs li.is-on a { color: var(--ink); }
.jx-tabs li.is-on a span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px -12px; border-radius: 50%; background: currentColor; }
.jx-tabs a:hover { color: var(--ink); padding-left: 6px; }
.jx-plans { grid-column: 1 / 6; position: relative; display: grid; }
.jx-plan { grid-area: 1 / 1; display: grid; gap: 14px; align-content: start; opacity: 0; visibility: hidden; transform: translate3d(0, 12px, 0); transition: opacity .35s var(--ease), transform .6s var(--ease), visibility 0s .35s; }
.jx-plan.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--ease) .12s, transform .9s var(--ease) .12s; }
.jx-ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.jx-pn { display: grid; gap: 8px; justify-items: start; font: 500 clamp(26px, 2.3vw, 38px)/1 var(--sans); letter-spacing: -.045em; }
.jx-pn small { font-size: 10px; letter-spacing: .02em; font-weight: 400; background: var(--ink); color: var(--paper); padding: 5px 8px 4px; border-radius: 99px; }
.jx-pp { display: flex; align-items: baseline; gap: 3px; font: 400 clamp(40px, 3.6vw, 62px)/.86 var(--sans); letter-spacing: -.05em; white-space: nowrap; }
.jx-pp small { margin-right: 8px; color: var(--grey); letter-spacing: .01em; }
.jx-pp span { font-size: .4em; letter-spacing: -.02em; }
.jx-feat { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--line); padding-top: 14px; }
.jx-feat li { padding: 6px 11px 5px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); background: rgba(244, 236, 234, .55); font-size: 13px; line-height: 1.2; color: var(--ink-2); }
.jx-ps { max-width: 34ch; font-size: 15px; line-height: 1.4; letter-spacing: -.01em; color: var(--ink-2); }
.jx-pf { justify-self: start; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); transition: color .4s var(--ease), gap .5s var(--ease); }
.jx-pf .ic { width: 14px; height: 14px; }
.jx-pf:hover { color: var(--ink); gap: 10px; }
/* process: the five steps as a strip (done · here · ahead), the one the walk is at in one line. The words and their
   veil darken with the sky, little by little (--dusk 0…1, set by pages/home.js) */
.jx-s { bottom: calc(24px + env(safe-area-inset-bottom)); }
.jx-s::before, .jx-s::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-24px - env(safe-area-inset-bottom)); bottom: calc(-24px - env(safe-area-inset-bottom) - (100lvh - 100svh)); height: 100vh; height: 100lvh; pointer-events: none; }
.jx-s::before { background: linear-gradient(to top, rgba(244, 236, 234, .9), rgba(244, 236, 234, .55) 30%, rgba(244, 236, 234, 0) 52%); opacity: calc(1 - var(--dusk, 0)); }
.jx-s::after { background: linear-gradient(to top, rgba(30, 29, 31, .72), rgba(30, 29, 31, .36) 30%, rgba(30, 29, 31, 0) 52%); opacity: var(--dusk, 0); }
.jx-s .grid { position: relative; z-index: 1; row-gap: 16px; align-items: end; }
.jx-s .jx-head { grid-column: 1 / 8; }
.jx-bar { grid-column: 1 / 8; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.jx-bar a { position: relative; display: grid; gap: 4px; padding-top: 12px; color: var(--grey); transition: color .5s var(--ease); }
.jx-bar a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
.jx-bar a::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: 0 0; transition: transform .8s var(--ease); }
.jx-bar li.is-done a, .jx-bar li.is-on a { color: var(--ink); }
.jx-bar li.is-done a::after, .jx-bar li.is-on a::after { transform: none; }
.jx-bar b { font-weight: 500; font-size: 14px; letter-spacing: -.02em; }
.jx-bar a:hover { color: var(--ink); }
.jx-steps { grid-column: 1 / 8; position: relative; display: grid; }
.jx-steps li { grid-area: 1 / 1; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 10px; opacity: 0; visibility: hidden; transform: translate3d(0, 14px, 0); transition: opacity .4s var(--ease), transform .7s var(--ease), visibility 0s .4s; }
.jx-steps li.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .8s var(--ease) .12s, transform 1s var(--ease) .12s; }
.jx-steps b { font: 500 clamp(40px, 4.4vw, 76px)/.94 var(--sans); letter-spacing: -.055em; }
.jx-chip { justify-self: start; padding: 6px 10px 5px; border-radius: 99px; background: var(--ink); color: var(--paper); }
.jx-steps p { grid-column: 1 / -1; max-width: 46ch; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
/* the words' colours follow the sky where colours can be mixed; elsewhere they switch at dusk (.is-dusk) */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .jx-s { --k: calc(var(--dusk, 0) * 100%); color: color-mix(in srgb, var(--bone) var(--k), var(--ink)); }
  .jx-s .jx-k, .jx-steps p, .jx-bar a { color: color-mix(in srgb, var(--bone-2) var(--k), var(--ink-2)); }
  .jx-s .jx-k b, .jx-bar li.is-done a, .jx-bar li.is-on a { color: color-mix(in srgb, var(--bone) var(--k), var(--ink)); }
  .jx-bar a::before { background: color-mix(in srgb, rgba(244, 236, 234, .22) var(--k), var(--line)); }
  .jx-chip { background: color-mix(in srgb, var(--bone) var(--k), var(--ink)); color: color-mix(in srgb, var(--ink) var(--k), var(--paper)); }
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .wd.is-dusk .jx-s { color: var(--bone); }
  .wd.is-dusk .jx-s .jx-k, .wd.is-dusk .jx-steps p, .wd.is-dusk .jx-bar a { color: var(--bone-2); }
  .wd.is-dusk .jx-s .jx-k b, .wd.is-dusk .jx-bar li.is-done a, .wd.is-dusk .jx-bar li.is-on a { color: var(--bone); }
  .wd.is-dusk .jx-bar a::before { background: rgba(244, 236, 234, .2); }
  .wd.is-dusk .jx-chip { background: var(--bone); color: var(--ink); }
}
html:not(.js) .jx, html.is-still .jx, .wd.is-flat .jx { display: none; }

/* /services and /about: the first screen stands in the world (pages/stand.js); the page slides up over it on paper */
html.js:not(.is-still) .ph.sx { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(40px, 9vh, 100px); }
.ph.sx .grid { position: relative; }
.ph.sx::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(244, 236, 234, .78), rgba(244, 236, 234, 0) 46%); pointer-events: none; }
.ph.sx { position: relative; }
.ph.sx ~ section, .ph.sx ~ .ft { position: relative; }
html.js:not(.is-still) .ph.sx ~ section { background: var(--paper); }
html.js:not(.is-still) .ph.sx.is-flat { min-height: 0; display: block; }
/* the stage is as tall as the largest viewport, so nothing shows below it when a phone's address bar folds away */
.wd-stick { position: sticky; top: 0; height: 100vh; height: 100lvh; min-height: 480px; overflow: hidden; }
html:not(.js) .wd-stick, html.is-still .wd-stick, .wd.is-flat .wd-stick { height: 100svh; }
.wd-poster { position: absolute; inset: 0; background: var(--mist); }
.wd-poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.wd-poster { transition: opacity 1s var(--ease); }
.wd.is-live .wd-poster { opacity: 0; visibility: hidden; transition: opacity 1s var(--ease), visibility 0s 1s; }
.wd-ui { position: absolute; left: 0; right: 0; top: 0; height: 100svh; pointer-events: none; padding: calc(var(--hd) + clamp(24px, 5vh, 64px)) 0 calc(22px + env(safe-area-inset-bottom)); display: grid; grid-template-rows: auto 1fr auto; }
.wd-top { align-items: start; row-gap: 18px; }
.wd-t { grid-column: 1 / 8; font: 400 clamp(40px, 5.2vw, 92px)/.94 var(--sans); letter-spacing: -.055em; }
.wd-t em { font-family: var(--serif); font-style: italic; letter-spacing: -.025em; font-size: 1.1em; }
/* what LOGOS does and the starting price, under the line */
.wd-intro { grid-column: 1 / 6; display: grid; gap: 12px; justify-items: start; margin-top: clamp(4px, 1.4vh, 14px); }
.wd-lead { max-width: 34ch; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.35; letter-spacing: -.015em; color: var(--ink-2); }
.wd-from { color: var(--ink); }
/* the first visit's cue: a dot runs down a fine line into a small O — scroll, into the O (pages/home.js) */
.wd-cue { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--bone); filter: drop-shadow(0 1px 10px rgba(30, 29, 31, .35)); visibility: hidden; opacity: 0; transition: opacity 1.4s var(--ease), visibility 0s 1.4s; }
.wd.is-cue .wd-cue { visibility: visible; opacity: 1; transition: opacity 1.4s var(--ease) .8s; }
.cue-line { position: relative; display: block; width: 1px; height: 54px; background: rgba(244, 236, 234, .32); }
.cue-line b { position: absolute; left: -2.5px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: cue 2.6s var(--ease-io) infinite; }
.cue-o { display: block; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; animation: cue-o 2.6s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: translate3d(0, -6px, 0); opacity: 0; } 14% { opacity: 1; } 68% { transform: translate3d(0, 56px, 0); opacity: 1; } 82%, 100% { transform: translate3d(0, 66px, 0) scale(.3); opacity: 0; } }
@keyframes cue-o { 0%, 66% { transform: scale(1); } 78% { transform: scale(1.3); } 100% { transform: scale(1); } }
.wd-fade { will-change: opacity, transform; }

/* the band of work: the project in the middle, under it */
.gx { position: absolute; left: 0; right: 0; top: 0; height: 100svh; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility 0s .7s; }
.wd.is-band .gx { opacity: 1; visibility: visible; transition: opacity .9s var(--ease) .15s; }
.gx::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100lvh; background: linear-gradient(to top, rgba(244, 236, 234, .8), rgba(244, 236, 234, 0) 40%); pointer-events: none; }
.gx-in { position: absolute; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom)); row-gap: 12px; align-items: end; }
.gx-k { grid-column: 1 / 13; display: flex; align-items: center; gap: 18px; color: var(--ink-2); }
.gx-count b { font-weight: 400; color: var(--ink); }
.gx-all { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; color: var(--ink); pointer-events: auto; }
.gx-list { grid-column: 1 / 13; position: relative; height: clamp(112px, 10.4vw, 176px); }
.gx-item { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .45s var(--ease), transform .7s var(--ease); }
.gx-item.is-on, .gx-item:focus-within { opacity: 1; transform: none; transition: opacity .8s var(--ease) .12s, transform 1s var(--ease) .12s; }
/* name and what it is on the left, one line about it and the way in on the right */
.gx-a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27em); column-gap: var(--g); row-gap: 10px; align-items: end; pointer-events: none; }
.gx-item.is-on .gx-a, .gx-item:focus-within .gx-a { pointer-events: auto; }
.gx-name { grid-column: 1; font: 400 clamp(40px, 5vw, 88px)/.92 var(--sans); letter-spacing: -.055em; }
.gx-tags { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ink-2); }
.gx-tags span + span::before { content: "/"; margin-right: 12px; color: var(--grey); }
.gx-sum { grid-column: 2; grid-row: 1; align-self: end; justify-self: end; text-align: right; font-size: 15px; line-height: 1.42; color: var(--ink-2); }
.gx-go { grid-column: 2; grid-row: 2; justify-self: end; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 99px; background: var(--ink); color: var(--paper); transition: transform .5s var(--ease); }
.gx-a:hover .gx-go { transform: translate3d(4px, 0, 0); }
/* /work: the page's head sits over the band; without the world it is simply the top of the page */
html:not(.js) .wd.is-work .wd-stick, html.is-still .wd.is-work .wd-stick, .wd.is-work.is-flat .wd-stick { position: static; height: auto; min-height: 0; overflow: visible; }
html:not(.js) .gx, html.is-still .gx, .wd.is-flat .gx { display: none; }

/* entry: the first visit of a session waits for the world, then one button lets it in (with sound) */
.gate { position: fixed; inset: 0; z-index: 95; display: none; background: var(--paper); color: var(--ink); transition: opacity 1.2s var(--ease), visibility 0s 1.2s; }
html.js.is-gate .gate { display: grid; }
html.is-gate, html.is-gate body { overflow: hidden; }
.gate-top, .gate-bot { position: absolute; left: var(--m); right: var(--m); display: flex; justify-content: space-between; gap: 16px; }
.gate-top { top: 0; height: var(--hd); align-items: center; font-size: 13px; }
.gate-top b { font-weight: 600; letter-spacing: -.02em; font-size: 15px; }
.gate-top b sup { font-size: .55em; vertical-align: .55em; margin-left: 1px; font-weight: 500; }
.gate-bot { bottom: calc(22px + env(safe-area-inset-bottom)); color: var(--ink-2); }
.gate-mid { place-self: center; display: grid; justify-items: center; }
.gate-mid > * { grid-area: 1 / 1; }
.gate-load { display: grid; justify-items: center; gap: 18px; transition: opacity .6s var(--ease), transform .8s var(--ease); }
.gate-num { font: italic 400 clamp(84px, 13vw, 190px)/.85 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: center; }
.gate-bar { position: relative; width: min(220px, 48vw); height: 1px; background: var(--line); overflow: hidden; }
.gate-bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.gate-enter { position: relative; width: clamp(150px, 15vw, 210px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font: italic 400 clamp(34px, 3.2vw, 46px)/1 var(--serif); letter-spacing: -.01em; opacity: 0; visibility: hidden; transform: scale(.92); transition: opacity .9s var(--ease), transform 1.1s var(--ease), color .5s var(--ease), visibility 0s .9s; }
.gate-enter { color: var(--paper); }
.gate-enter::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ink); border: 1px solid var(--ink); transition: transform .8s var(--ease), background 1s var(--ease), border-color 1s var(--ease); }
.gate-enter span { position: relative; }
.gate-enter:hover::before { transform: scale(1.06); }
.gate-enter:focus-visible { outline: none; }
.gate-enter:focus-visible::before { box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--ink); }
.gate.is-ready .gate-load { opacity: 0; transform: translateY(-14px); }
.gate.is-ready .gate-enter { opacity: 1; visibility: visible; transform: none; transition: opacity .9s var(--ease) .15s, transform 1.1s var(--ease) .15s, color .5s var(--ease), visibility 0s; }
.gate.is-out { opacity: 0; visibility: hidden; pointer-events: none; }
.gate.is-out .gate-enter::before { transform: scale(9); background: transparent; border-color: transparent; transition: transform 1.4s var(--ease), border-color 1.2s var(--ease); }

/* ---------- home: selected work ---------- */
.sw { padding: clamp(100px, 16vh, 200px) 0 clamp(60px, 10vh, 120px); }
.sw-hd { align-items: end; padding-bottom: 18px; margin-bottom: clamp(36px, 6vh, 72px); border-bottom: 1px solid var(--line); margin-inline: var(--m); padding-inline: 0; }
.sw-hd h2 { grid-column: 1 / 5; font: 500 clamp(32px, 4.2vw, 64px)/.95 var(--sans); letter-spacing: -.05em; }
.sw-hd h2 sup { font: 400 11px/1 var(--mono); vertical-align: 2.6em; margin-left: 6px; letter-spacing: 0; }
.sw-hd p { grid-column: 7 / 10; }
.sw-hd a { grid-column: 10 / 13; justify-self: end; display: inline-flex; gap: 8px; align-items: center; }
.pj { margin-bottom: clamp(90px, 15vh, 190px); }
.pj:last-child { margin-bottom: 0; }
.pj-a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-inline: var(--m); row-gap: 16px; align-items: start; transition: opacity .6s var(--ease); }
.pj-media { position: relative; aspect-ratio: var(--ar, 16 / 10); perspective: 1200px; }
.pj-media .im { position: absolute; inset: 0; transform-origin: 50% 50%; }
.pj-meta { display: grid; gap: 4px; align-content: start; }
.pj-n { color: var(--grey); }
.pj-name { font-size: clamp(26px, 2.5vw, 40px); font-weight: 500; letter-spacing: -.04em; line-height: 1; margin: 2px 0 8px; }
.pj-tags { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-2); }
.pj-tags span + span::before { content: "/"; margin-right: 14px; color: var(--grey); }
/* each project sits differently on the grid */
.pj--a .pj-media { grid-column: 1 / 13; --ar: 2 / 1; }
.pj--a .pj-meta { grid-column: 1 / 13; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: baseline; }
.pj--a .pj-n { grid-column: 1 / 2; }
.pj--a .pj-name { grid-column: 2 / 7; margin: 0; }
.pj--a .pj-tags { grid-column: 7 / 13; justify-content: flex-end; }
.pj--b .pj-media { grid-column: 5 / 13; grid-row: 1; --ar: 16 / 10; }
.pj--b .pj-meta { grid-column: 1 / 4; grid-row: 1; align-self: end; }
.pj--c .pj-media { grid-column: 1 / 9; grid-row: 1; --ar: 16 / 10; }
.pj--c .pj-meta { grid-column: 10 / 13; grid-row: 1; }
.pj--d .pj-media { grid-column: 3 / 11; --ar: 3 / 2; }
.pj--d .pj-meta { grid-column: 3 / 11; grid-template-columns: 1fr auto; column-gap: var(--g); }
.pj--d .pj-n { grid-column: 1 / -1; }
.pj--e .pj-media { grid-column: 2 / 9; grid-row: 1; --ar: 16 / 10; }
.pj--e .pj-media img { object-position: 50% 0; }
.pj--e .pj-meta { grid-column: 10 / 13; grid-row: 1; align-self: center; }
.pj--f .pj-a { padding-inline: 0; }
.pj--f .pj-media { grid-column: 1 / 13; --ar: 21 / 9; }
.pj--f .pj-meta { grid-column: 1 / 13; padding-inline: var(--m); grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: baseline; }
.pj--f .pj-n { grid-column: 1 / 2; }
.pj--f .pj-name { grid-column: 2 / 7; margin: 0; }
.pj--f .pj-tags { grid-column: 7 / 13; justify-content: flex-end; }
/* hover (fine pointers): the project leans toward the pointer, everything else steps back */
.sw.is-hover .pj-a { opacity: .28; }
.sw.is-hover .pj-a.is-on { opacity: 1; }
.pj-a.is-on .pj-n { color: var(--accent); }

/* ---------- home: statement, services, contact ---------- */
.st { padding: clamp(80px, 14vh, 180px) 0; }
/* home: the prices, three lines */
.hp { padding: clamp(90px, 15vh, 180px) 0 clamp(90px, 14vh, 170px); }
.hp .grid { row-gap: 18px; align-items: start; }
.hp-k { grid-column: 1 / 4; color: var(--grey); padding-top: .9em; }
.hp-t { grid-column: 4 / 13; font-size: clamp(40px, 5vw, 88px); line-height: .95; letter-spacing: -.05em; font-weight: 400; margin-bottom: clamp(16px, 3vh, 36px); }
.hp-t em { font-family: var(--serif); font-style: italic; letter-spacing: -.02em; font-size: 1.08em; }
.hp-list { grid-column: 4 / 13; border-top: 1px solid var(--line); }
.hp-list li { border-bottom: 1px solid var(--line); }
.hp-list a { display: grid; grid-template-columns: 1fr auto 20px; align-items: center; gap: 18px; padding: clamp(16px, 2.4vh, 24px) 0; transition: padding .6s var(--ease); }
.hp-list a:hover { padding-left: 12px; }
.hp-n { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: clamp(22px, 2.2vw, 36px); letter-spacing: -.04em; font-weight: 500; line-height: 1.05; }
.hp-n small { font-size: 10.5px; letter-spacing: .02em; font-weight: 400; background: var(--mist); padding: 6px 9px 5px; border-radius: 99px; }
.hp-p { display: flex; align-items: baseline; gap: 8px; font-size: clamp(22px, 2.2vw, 36px); letter-spacing: -.04em; white-space: nowrap; }
.hp-p small { font-size: 11px; letter-spacing: .02em; color: var(--grey); }
.hp-list .ic { width: 18px; height: 18px; color: var(--grey); }
.hp-fine { grid-column: 4 / 13; margin-top: 14px; color: var(--grey); }
.hp-steps { grid-column: 4 / 13; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; color: var(--ink-2); }
.hp-steps b { font-weight: 400; color: var(--grey); }
.hp-a { grid-column: 4 / 13; justify-self: start; display: inline-flex; gap: 10px; align-items: center; margin-top: 14px; height: 46px; padding: 0 22px; border-radius: 99px; background: var(--ink); color: var(--paper); transition: transform .5s var(--ease); }
.hp-a:hover { transform: translateY(-2px); }
/* the end of every page: one sentence, one button, one line */
.ft { background: var(--ink); color: var(--bone); padding: clamp(44px, 8vh, 84px) 0 calc(22px + env(safe-area-inset-bottom)); }
.ft .grid { row-gap: 22px; align-items: center; }
.ft-t { grid-column: 1 / 8; font-size: clamp(30px, 3.4vw, 56px); line-height: 1; letter-spacing: -.045em; font-weight: 400; }
.ft-t em { font-family: var(--serif); font-style: italic; letter-spacing: -.02em; font-size: 1.08em; }
/* the lantern's O, small: the light at the end of the way */
.ft-o { display: inline-block; width: .7em; height: .7em; margin-right: .32em; border-radius: 50%; border: 2px solid #ffd9bb; box-shadow: 0 0 16px 2px rgba(255, 190, 150, .5), inset 0 0 10px rgba(255, 190, 150, .4); vertical-align: -.02em; }
.ft-wa { grid-column: 8 / 13; justify-self: end; display: inline-flex; align-items: center; gap: 12px; padding: 11px 24px 11px 15px; border-radius: 99px; background: var(--bone); color: var(--ink); font-size: 18px; letter-spacing: -.02em; line-height: 1.1; transition: transform .5s var(--ease), background .4s var(--ease); }
.ft-wa .ic { width: 24px; height: 24px; }
.ft-wa span { display: grid; gap: 3px; }
.ft-wa small { font-size: 10px; color: var(--ink-2); }
.ft-wa:hover { transform: translateY(-2px); background: #fff; }
.ft-m { grid-column: 1 / 13; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 22px; color: var(--bone-2); border-top: 1px solid rgba(244, 236, 234, .14); padding-top: 16px; margin-top: clamp(6px, 2vh, 20px); }
.ft-c { display: flex; gap: 18px; }
.ft-c a:hover { color: var(--bone); }

/* ---------- page heads (work, about, services, contact) ---------- */
.ph { padding: calc(var(--hd) + clamp(56px, 13vh, 150px)) 0 clamp(40px, 7vh, 80px); }
.ph .grid { row-gap: 0; }
.ph-k { grid-column: 1 / 13; color: var(--grey); margin-bottom: clamp(16px, 2.4vh, 26px); }
.ph-t { grid-column: 1 / 13; font: 400 clamp(44px, 5.6vw, 100px)/.96 var(--sans); letter-spacing: -.05em; }
.ph-t em, .ab-lead em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; font-size: 1.08em; }
.ph-t sup { font: 400 11px/1 var(--mono); letter-spacing: 0; vertical-align: top; position: relative; top: .55em; margin-left: 2px; }
.ph-sub { grid-column: 1 / 8; margin-top: clamp(22px, 3.4vh, 34px); max-width: 34em; color: var(--ink-2); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.5; }

/* ---------- /work index ---------- */
/* /work: every project as a big card, with a filter by kind (pages/work.js) */
.wx { padding: clamp(60px, 10vh, 120px) 0 clamp(80px, 14vh, 160px); position: relative; }
.wx-hd { align-items: end; row-gap: 18px; margin-bottom: clamp(28px, 4vw, 56px); }
.wx-t { grid-column: 1 / 7; font: 400 clamp(40px, 4.6vw, 80px)/.92 var(--sans); letter-spacing: -.055em; }
.wx-t sup { font: 400 11px/1 var(--mono); letter-spacing: .01em; vertical-align: top; position: relative; top: .3em; margin-left: 8px; }
.wx-f { grid-column: 7 / 13; justify-self: end; display: none; flex-wrap: wrap; gap: 6px; }
.wx-f.is-on { display: flex; }
.wx-f button { height: 34px; padding: 0 14px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); transition: background .4s var(--ease), color .4s var(--ease); }
.wx-f button b { font-weight: 400; color: var(--grey); margin-left: 4px; }
.wx-f button:hover { color: var(--ink); }
.wx-f button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.wx-f button[aria-pressed="true"] b { color: var(--bone-2); }
.wx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) var(--g); padding: 0 var(--m); }
.wx-card[hidden] { display: none; }
/* before the experiments: what they are, and that they are not what a plan's price buys */
.wx-sep { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.wx-sep .mono { grid-column: 1 / 5; }
.wx-sep p:last-child { grid-column: 5 / 11; color: var(--ink-2); font-size: 16px; line-height: 1.4; letter-spacing: -.01em; }
.wx-a { display: grid; gap: 16px; }
.wx-media { position: relative; border-radius: var(--rad); overflow: hidden; }
.wx-media .im { aspect-ratio: 16 / 10; border-radius: var(--rad); }
.wx-media img { transition: transform 1.1s var(--ease); }
.wx-a:hover .wx-media img { transform: scale(1.025); }
.wx-meta { display: grid; grid-template-columns: 34px 1fr auto; column-gap: 10px; row-gap: 8px; align-items: baseline; }
.wx-n { color: var(--grey); }
.wx-name { font: 500 clamp(24px, 2.2vw, 36px)/1 var(--sans); letter-spacing: -.045em; }
.wx-go { font-size: 20px; transition: transform .5s var(--ease); }
.wx-a:hover .wx-go { transform: translate3d(3px, -3px, 0); }
.wx-tags { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--ink-2); }
.wx-tags span + span::before { content: "/"; margin-right: 10px; color: var(--grey); }

/* ---------- case study ---------- */
.cs-hero { position: relative; padding: calc(var(--hd) + clamp(10px, 2.4svh, 28px)) var(--m) 0; }
/* the whole first screen of the site, 16:10, as large as fits above a glimpse of the title (band.js measures it) */
.cs-hero .im { width: min(100%, calc((100svh - var(--hd) - clamp(10px, 2.4svh, 28px) - clamp(96px, 15svh, 170px)) * 1.6)); aspect-ratio: 16 / 10; margin: 0 auto; border-radius: var(--rad); }
.cs-head { position: relative; z-index: 2; padding-top: clamp(22px, 3.4svh, 40px); }
.cs-head .grid { row-gap: 10px; align-items: baseline; }
.cs-k { grid-column: 1 / 4; color: var(--grey); }
.cs-st { grid-column: 4 / 13; justify-self: end; }
.cs-t { grid-column: 1 / 13; font-size: clamp(54px, 8.8vw, 168px); line-height: .86; letter-spacing: -.06em; font-weight: 500; margin: 6px 0 clamp(18px, 2.6vw, 34px); white-space: nowrap; }
.cs-facts { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); border-top: 1px solid var(--line); padding-top: 12px; }
.cs-facts > div { grid-column: span 2; display: grid; gap: 4px; align-content: start; }
.cs-facts > div.is-w { grid-column: span 3; }
.cs-facts > div.is-st { grid-column: 1 / 13; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.cs-facts dt { color: var(--grey); }
.cs-facts dd { font-size: 14px; line-height: 1.35; }
.cs-facts a { display: inline-flex; gap: 6px; align-items: center; }
.cs-ov { position: relative; z-index: 1; background: var(--paper); padding: clamp(90px, 16vh, 200px) 0 clamp(80px, 13vh, 170px); }
.cs-ov-k { grid-column: 1 / 4; padding-top: .7em; }
.cs-ov-t { grid-column: 4 / 12; }
.cs-ov-sum { grid-column: 4 / 9; margin-top: 30px; color: var(--ink-2); }

.cb { margin-bottom: clamp(90px, 15vh, 190px); }
.cb-text .grid { row-gap: 10px; }
.cb-text .mono { grid-column: 1 / 4; padding-top: .7em; }
.cb-text p.lead { grid-column: 4 / 11; }
.cb-text.is-r .mono { grid-column: 5 / 7; }
.cb-text.is-r p.lead { grid-column: 7 / 13; }
.cb-frame figure { grid-column: 2 / 12; }
.cb-frame.is-wide figure { grid-column: 1 / 13; }
.cb-frame.is-mid figure { grid-column: 3 / 11; }
.cb-frame .im { aspect-ratio: var(--ar); }
.cb-pair .grid { row-gap: 14px; align-items: start; }
.cb-pair figure:nth-child(1) { grid-column: 1 / 8; }
.cb-pair figure:nth-child(2) { grid-column: 9 / 13; margin-top: clamp(80px, 20vh, 260px); }
.cb-pair .im { aspect-ratio: var(--ar); }
.cb-pair .cap { grid-column: 1 / 8; }
/* every screen at a glance: a tilted wall on the project's colour; the columns drift as it passes (pages/case.js) */
.cw { position: relative; height: clamp(560px, 118vh, 1180px); overflow: hidden; background: var(--pc); color: var(--pf); margin-top: clamp(40px, 8vh, 100px); }
.cw-wall { position: absolute; left: 50%; top: 50%; width: 150%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 30px); align-items: start; transform: translate(-50%, -54%) perspective(2600px) rotateX(24deg) rotateZ(-13deg); }
.cw-col { display: grid; gap: clamp(16px, 1.8vw, 30px); will-change: transform; }
.cw-col:nth-child(2) { margin-top: 22%; }
.cw-col:nth-child(3) { margin-top: 8%; }
.cw-col:nth-child(4) { margin-top: 30%; }
.cw .im { border-radius: clamp(6px, .6vw, 10px); box-shadow: 0 40px 70px -40px rgba(20, 16, 18, .45), 0 0 0 1px rgba(20, 16, 18, .06); }
.cw .im.is-desk { aspect-ratio: 16 / 10; }
.cw .im.is-phone { aspect-ratio: 9 / 19.5; width: 60%; justify-self: center; border-radius: clamp(12px, 1.3vw, 22px); }
.cw-cap { position: absolute; left: var(--m); right: var(--m); bottom: clamp(18px, 3vh, 32px); display: flex; justify-content: space-between; gap: 16px; }
.cw-cap span { padding: 7px 10px 6px; border-radius: 99px; background: var(--pc); }
.cb-phones { background: var(--pc); color: var(--pf); padding: clamp(80px, 14vh, 170px) 0 clamp(60px, 10vh, 120px); }
.cb-phones .grid { align-items: start; }
.cb-phones figure { grid-column: span 3; }
.cb-phones figure:nth-of-type(1) { grid-column: 2 / 5; margin-top: clamp(40px, 10vh, 120px); }
.cb-phones figure:nth-of-type(2) { grid-column: 6 / 9; }
.cb-phones figure:nth-of-type(3) { grid-column: 10 / 13; margin-top: clamp(80px, 18vh, 220px); }
.cb-phones .im { aspect-ratio: var(--ar); box-shadow: none; }
.cb-phones .cap { grid-column: 1 / 13; color: inherit; opacity: .7; margin-top: clamp(40px, 8vh, 80px); }
/* the visual direction (system block): the site's colours as fields, its typefaces as a list */
.cb-system .grid { row-gap: clamp(28px, 5vh, 48px); }
.cb-system .cb-side { grid-column: 1 / 5; display: grid; gap: 16px; align-content: start; }
.cb-system .cb-side .lead { font-size: clamp(19px, 1.6vw, 26px); }
.sys-col { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.sys-col li { display: grid; grid-template-rows: auto auto auto; gap: 6px; padding-right: 10px; }
.sys-col i { display: block; height: clamp(120px, 22vh, 220px); background: var(--sw); box-shadow: inset 0 0 0 1px rgba(30, 29, 31, .08); margin-bottom: 8px; }
.sys-col b { font-weight: 500; font-size: 15px; letter-spacing: -.02em; }
.sys-col span { color: var(--grey); }
.sys-type { grid-column: 6 / 13; border-top: 1px solid var(--line); }
.sys-type li { display: grid; grid-template-columns: 9rem 1fr; align-items: baseline; gap: 4px 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sys-type span { color: var(--grey); }
.sys-type b { font-weight: 400; font-size: clamp(26px, 2.6vw, 42px); letter-spacing: -.045em; line-height: 1; }
.sys-type small { grid-column: 2; color: var(--ink-2); font-size: 14px; }
/* a screen recording of the live site (motion block): on the project's colour, words beside it */
.cb-motion { background: var(--pc); color: var(--pf); padding: clamp(80px, 14vh, 170px) 0; }
.cb-motion .grid { align-items: center; row-gap: 28px; }
.cb-motion .cb-side { display: grid; gap: 16px; }
.cb-motion .cb-side .mono { opacity: .72; }
.cb-motion .cb-side .lead { font-size: clamp(19px, 1.6vw, 26px); }
.cb-motion.is-m .cb-side { grid-column: 2 / 6; }
.cb-motion.is-m .cb-vid { grid-column: 7 / 11; justify-self: center; width: min(100%, 360px); }
.cb-motion.is-d .cb-side { grid-column: 1 / 4; align-self: end; }
.cb-motion.is-d .cb-vid { grid-column: 4 / 13; }
.cb-vid { margin: 0; }
.cb-vid video { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); background: rgba(0, 0, 0, .08); }
.cb-vid.is-m video { border-radius: clamp(18px, 2vw, 30px); }
.cb-vid.is-d video { border-radius: clamp(6px, .6vw, 10px); }
.cb-rec { display: inline-flex; align-items: center; gap: 8px; }
.cb-rec i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 2.4s var(--ease) infinite; }
html.is-still .cb-rec i { animation: none; }
.cb-sticky .grid { align-items: start; }
.cb-sticky .cb-side { grid-column: 1 / 5; position: sticky; top: calc(var(--hd) + 24px); display: grid; gap: 18px; }
.cb-sticky .cb-side .lead { font-size: clamp(19px, 1.6vw, 26px); }
.cb-sticky .cb-stack { grid-column: 5 / 13; display: grid; gap: clamp(40px, 8vh, 100px); }
.cb-sticky .im { aspect-ratio: var(--ar); }
.cb-detail .grid { align-items: center; row-gap: 20px; }
.cb-detail figure { grid-column: 1 / 8; }
.cb-detail figure .im { aspect-ratio: var(--ar); max-width: var(--mw); }
.cb-detail .cb-side { grid-column: 9 / 13; display: grid; gap: 14px; }
.cb-detail .cb-side .lead { font-size: clamp(19px, 1.6vw, 26px); }
.cb-detail.is-r figure { grid-column: 6 / 13; grid-row: 1; justify-self: end; width: 100%; }
.cb-detail.is-r .cb-side { grid-column: 1 / 5; grid-row: 1; }
.cb-bleed .im { aspect-ratio: var(--ar); }
/* a whole section taller than a screen: the window stays in view while the section scrolls through it (case.js) */
.cb-browse .cb-bw { grid-column: 2 / 12; container-type: inline-size; }
.cb-browse .cb-track { --win: min(62.5cqw, 74svh); height: calc(var(--win) + (var(--r) * 100cqw - var(--win)) * .8); }
.cb-browse .cb-pin { position: sticky; top: calc((100svh - var(--win)) / 2); height: var(--win); }
.cb-browse .im.is-window { height: 100%; border-radius: var(--rad); }
.cb-browse .im.is-window picture { display: block; height: auto; }
.cb-browse .im.is-window img { position: absolute; left: 0; top: 0; width: 100%; height: auto; will-change: transform; }
.cb-bar { position: absolute; right: 7px; top: 7px; width: 3px; height: 40px; border-radius: 3px; background: rgba(30, 29, 31, .38); box-shadow: 0 0 0 1px rgba(244, 236, 234, .5); pointer-events: none; }
.cb-browse .cap { grid-column: 2 / 12; margin-top: 14px; }
html:not(.js) .cb-browse .cb-track, html.is-still .cb-browse .cb-track { height: auto; }
html:not(.js) .cb-browse .cb-pin, html.is-still .cb-browse .cb-pin { position: static; height: auto; }
html:not(.js) .cb-browse .im.is-window, html.is-still .cb-browse .im.is-window { height: auto; aspect-ratio: var(--ar); }
html:not(.js) .cb-browse .im.is-window img, html.is-still .cb-browse .im.is-window img { position: static; }
html:not(.js) .cb-bar, html.is-still .cb-bar { display: none; }
@supports not (width: 1cqw) {
  .cb-browse .cb-track { height: auto; }
  .cb-browse .cb-pin { position: static; height: auto; }
  .cb-browse .im.is-window { height: auto; aspect-ratio: var(--ar); }
  .cb-browse .im.is-window img { position: static; }
  .cb-bar { display: none; }
}
.cb-scroll .grid { align-items: start; }
.cb-scroll .cb-side { grid-column: 2 / 6; position: sticky; top: calc(var(--hd) + 24px); display: grid; gap: 18px; }
.cb-scroll .cb-side .lead { font-size: clamp(19px, 1.6vw, 26px); }
.cb-scroll .cb-phone { grid-column: 8 / 12; }
.cb-scroll .im { aspect-ratio: 390 / 844; }
.cb-scroll .im img { height: auto; object-fit: initial; position: absolute; top: 0; will-change: transform; }
.cb-scroll .cb-track { height: var(--track, 220svh); }
.cb-scroll .cb-pin { position: sticky; top: calc(50svh - min(42svh, 46vw)); }

.cs-close { padding: clamp(60px, 12vh, 160px) 0 clamp(120px, 22vh, 260px); text-align: left; }
.cs-close-t { grid-column: 2 / 12; font-size: clamp(36px, 6vw, 108px); line-height: .96; letter-spacing: -.055em; font-weight: 500; }
.cs-note { grid-column: 2 / 9; margin-top: 28px; color: var(--ink-2); line-height: 1.55; }
.cs-close-a { grid-column: 2 / 12; margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px 30px; }
.cs-close-a a { display: inline-flex; gap: 8px; align-items: center; }

/* ---------- 3D ending ---------- */
.end { position: relative; z-index: 4; height: 300svh; background: var(--night); color: var(--bone); }
html.is-still .end, html:not(.js) .end { height: 100svh; }
html.is-still .cb-scroll .cb-track { height: auto; }
html.is-still .cb-scroll .cb-pin { position: static; }

.end-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.end-still { position: absolute; left: 50%; top: 50%; width: min(64vw, 960px); aspect-ratio: var(--ar, 16 / 10); transform: translate(-50%, -50%); }
.end-still .im { position: absolute; inset: 0; }
/* the ending in the world (case.js): the stage is a window onto it; the words are charcoal over the light world */
.end.is-world { background: transparent; color: var(--ink); }
.end.is-world .end-still { visibility: hidden; }
.end.is-world .end-ui { opacity: 0; }
.end.is-world .end-ui::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100vh; height: 100lvh; top: 0; background: linear-gradient(to top, rgba(244, 236, 234, .82), rgba(244, 236, 234, 0) 42%); pointer-events: none; z-index: -1; }
.end.is-world .end-top, .end.is-world .end-bot { color: var(--ink-2); }
.end.is-world .end-name, .end.is-world .end-bot b { color: var(--ink); }
.end.is-world .end-bar { background: var(--line); }
.end.is-world .end-bar i { background: var(--ink); }
.end-ui { position: absolute; inset: 0; z-index: 1; pointer-events: none; padding: calc(var(--hd) + 16px) var(--m) calc(22px + env(safe-area-inset-bottom)); display: grid; grid-template-rows: auto 1fr auto; }
.end-top { display: flex; justify-content: space-between; color: var(--bone-2); }
.end-name { align-self: end; font-size: clamp(44px, 8vw, 150px); line-height: .88; letter-spacing: -.06em; font-weight: 500; color: var(--bone); }
.end-bot { display: flex; justify-content: space-between; align-items: end; margin-top: 18px; color: var(--bone-2); }
.end-bot b { color: var(--bone); font-weight: 400; }
.end-link { position: absolute; inset: 0; z-index: 2; }
.end-link:focus-visible { outline-offset: -8px; }
.end-bar { position: absolute; left: var(--m); right: var(--m); bottom: 0; height: 1px; background: rgba(236, 236, 232, .14); }
.end-bar i { position: absolute; inset: 0; background: var(--bone); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
/* pull up at the top of a case study: the previous project, coming down from under the header (case.js) */
.pull { position: fixed; left: 50%; top: calc(var(--hd) + 12px); z-index: 45; display: grid; justify-items: center; gap: 6px; padding: 12px 18px 13px; border-radius: 18px; background: var(--ink); color: var(--paper); text-align: center; transform: translate3d(-50%, calc((var(--pull, 0) - 1) * 18px), 0) scale(calc(.94 + var(--pull, 0) * .06)); opacity: calc(var(--pull, 0) * 1.6); pointer-events: none; transition: transform .45s var(--ease), opacity .3s; }
.pull.is-on { transition: none; }
.pull b { font: 500 15px/1.1 var(--sans); letter-spacing: -.02em; text-transform: none; }
.pull span { color: var(--bone-2); }
.pull-line { width: 40px; height: 2px; border-radius: 2px; background: rgba(244, 236, 234, .22); overflow: hidden; position: relative; }
.pull-line::after { content: ""; position: absolute; inset: 0; background: var(--paper); transform-origin: 0 50%; transform: scaleX(var(--pull, 0)); }
.pull:focus-visible { --pull: 1; pointer-events: auto; }
.cs-out { background: var(--paper); padding: 0 0 clamp(60px, 10vh, 120px); }
.cs-out .grid { border-top: 1px solid var(--line); padding-top: 18px; margin-inline: var(--m); padding-inline: 0; row-gap: 12px; }
.cs-out a { display: inline-flex; gap: 8px; align-items: center; }
.cs-out-a { grid-column: 1 / 5; }
.cs-out-b { grid-column: 5 / 9; }
.cs-out-c { grid-column: 9 / 13; justify-self: end; }

/* ---------- services ---------- */
.pl { padding: 0 var(--m) clamp(80px, 14vh, 160px); }
.pl-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: clamp(22px, 3.4vh, 34px) 0; border-top: 1px solid var(--line); align-items: start; row-gap: 14px; }
.pl-row:last-child { border-bottom: 1px solid var(--line); }
.pl-n { grid-column: 1 / 2; color: var(--grey); padding-top: .5em; }
.pl-name { grid-column: 2 / 6; font-size: clamp(26px, 2.8vw, 46px); letter-spacing: -.045em; line-height: 1; font-weight: 500; }
.pl-name small { display: block; margin-top: 12px; font: 400 11px/1.35 var(--mono); letter-spacing: .01em; text-transform: uppercase; color: var(--accent); }
.pl-desc { grid-column: 6 / 9; display: grid; gap: 14px; }
.pl-desc > p:first-child { font-size: 17px; line-height: 1.35; letter-spacing: -.015em; }
.pl-desc ul { color: var(--ink-2); display: grid; gap: 3px; }
.pl-desc li::before { content: "—"; color: var(--grey); margin-right: 8px; }
.pl-k { color: var(--grey); margin-bottom: 6px; }
.pl-fit { color: var(--ink-2); }
.pl-fine { color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.pl-fine .mono { color: var(--grey); margin-right: 6px; }
/* made to fit: beyond the plans, in three short lines */
.pl-x { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: clamp(22px, 3.4vh, 34px) 0; border-top: 1px solid var(--line); }
.pl-xh { grid-column: 1 / 4; display: grid; gap: 4px; align-content: start; padding-right: 12px; }
.pl-xh .pl-k { margin: 0; }
.pl-xt { font-size: 15px; line-height: 1.35; letter-spacing: -.01em; color: var(--ink-2); }
.pl-xa { grid-column: 4 / 13; justify-self: start; display: inline-flex; gap: 8px; align-items: center; margin-top: 18px; color: var(--ink); }
.pl-xa .ic { width: 14px; height: 14px; }
.pl-not .pl-fine { max-width: 40ch; }
.pl-x ul { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g); row-gap: 14px; }
.pl-x li { display: grid; gap: 4px; }
.pl-x b { font-weight: 500; font-size: 17px; letter-spacing: -.02em; }
.pl-x span { color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.pl-ex ul { display: flex; flex-wrap: wrap; gap: 8px; color: inherit; }
.pl-ex li { width: clamp(96px, 8.4vw, 150px); }
.pl-ex li::before { display: none; }
.pl-ex a { display: grid; gap: 6px; }
.pl-ex .im { aspect-ratio: 16 / 10; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); transition: transform .6s var(--ease); }
.pl-ex a:hover .im { transform: translate3d(0, -3px, 0); }
.pl-ex span { font-size: 10px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-ex span small { display: block; margin-top: 2px; font-size: 9px; color: var(--grey); }
.pl-from { display: block; font-size: 11px; letter-spacing: .01em; text-transform: uppercase; color: var(--grey); margin-bottom: 12px; font-weight: 400; line-height: 1; }
.pl-row.is-feat { position: relative; isolation: isolate; }
.pl-row.is-feat .pl-name small { display: table; padding: 6px 10px 5px; border-radius: 99px; background: var(--ink); color: var(--paper); }
.pl-row.is-feat::before { content: ""; position: absolute; inset: -1px calc(-1 * var(--m)) 0; background: var(--mist); opacity: .5; z-index: -1; }
.pl-price { grid-column: 9 / 12; font-size: clamp(40px, 4.6vw, 76px); letter-spacing: -.05em; line-height: .9; font-weight: 500; }
.pl-price small { font-size: .32em; letter-spacing: -.01em; margin-right: 4px; vertical-align: .9em; font-weight: 500; }
.pl-go { grid-column: 12 / 13; justify-self: end; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s; }
.pl-go .ic { width: 18px; height: 18px; }
.pl-row:hover .pl-go, .pl-go:focus-visible { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pl-note { padding: 22px 0 0; display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; color: var(--ink-2); }
.sec { padding: clamp(70px, 12vh, 150px) 0; border-top: 1px solid var(--line); margin-inline: var(--m); }
.sec .grid { padding: 0; row-gap: 22px; }
.sec-k { grid-column: 1 / 4; padding-top: .55em; }
.sec-t { grid-column: 4 / 13; font-size: clamp(30px, 3.6vw, 58px); letter-spacing: -.05em; line-height: 1; font-weight: 500; }
.steps { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g); row-gap: 28px; margin-top: 18px; }
.steps li { display: grid; gap: 10px; align-content: start; border-top: 1px solid var(--line); padding-top: 14px; }
.steps h3 { font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
.steps p { color: var(--ink-2); font-size: 14px; }
.steps .is-pay .mono { color: var(--accent); }
.faq { grid-column: 4 / 13; margin-top: 10px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; font-size: clamp(17px, 1.5vw, 22px); letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; width: 14px; height: 14px; flex: none; margin-top: .35em; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1px; background: currentColor; transition: transform .5s var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq details p { padding: 0 0 22px; max-width: 46em; color: var(--ink-2); }

/* ---------- about ---------- */
.ab-lead { grid-column: 1 / 10; max-width: 26em; font-size: clamp(22px, 2.1vw, 34px); line-height: 1.22; letter-spacing: -.03em; font-weight: 400; }
.ab-cols { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); row-gap: 18px; margin-top: clamp(40px, 7vh, 80px); color: var(--ink-2); }
.ab-cols p:first-child { color: var(--ink); }
.ab-code { margin: 0 var(--m); background: var(--ink); color: var(--bone); padding: clamp(24px, 3vw, 44px); overflow: hidden; font: 400 clamp(11px, .95vw, 14px)/1.65 var(--mono); }
.ab-code pre { margin: 0; white-space: pre; overflow-x: auto; }
.ab-code .k { color: #e6bfb8; }
.ab-code .s { color: var(--bone-2); }
.ab-code .c { color: #6c6d72; }
.ab-wall { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--g); padding: 0 var(--m); }
.ab-wall figure:nth-child(1) { grid-column: 2 / 6; }
.ab-wall figure:nth-child(2) { grid-column: 7 / 10; margin-top: 22vh; }
.ab-wall figure:nth-child(3) { grid-column: 10 / 13; margin-top: 7vh; margin-left: var(--g); }
.ab-wall .im { aspect-ratio: var(--ar); }
.caps { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); }
.caps li { border-top: 1px solid var(--line); padding: 14px 0 18px; display: grid; gap: 6px; }
.caps li b { font-weight: 500; font-size: 18px; letter-spacing: -.02em; }
.caps li span { color: var(--ink-2); font-size: 14px; }

/* ---------- contact ---------- */

/* /contact: the end of the way at dusk (pages/contact.js) — one sentence and WhatsApp, over the lantern */
.cx { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; color: var(--bone); background: var(--night); padding-bottom: calc(clamp(32px, 7vh, 80px) + env(safe-area-inset-bottom)); }
html.js:not(.is-still) .cx:not(.is-flat) { background: transparent; }
.cx::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(30, 29, 31, .5), rgba(30, 29, 31, 0) 42%); pointer-events: none; }
.cx-in { position: relative; align-items: end; row-gap: 22px; }
.cx-t { grid-column: 1 / 9; font: 400 clamp(40px, 5.4vw, 96px)/.95 var(--sans); letter-spacing: -.055em; }
.cx-t em { font-family: var(--serif); font-style: italic; letter-spacing: -.02em; font-size: 1.08em; }
.cx-wa { grid-column: 9 / 13; justify-self: end; display: inline-flex; align-items: center; gap: 14px; height: 64px; padding: 0 26px 0 22px; border-radius: 99px; background: var(--bone); color: var(--ink); font-size: 18px; letter-spacing: -.02em; transition: transform .5s var(--ease); }
.cx-wa .ic { font-size: 22px; }
.cx-wa small { display: block; margin-top: 3px; font-size: 10px; letter-spacing: .02em; color: var(--ink-2); }
.cx-wa:hover { transform: translate3d(0, -3px, 0); }
.cx-sub { grid-column: 1 / 7; max-width: 40ch; color: var(--bone-2); font-size: 17px; line-height: 1.4; letter-spacing: -.01em; }
.cx-more { grid-column: 9 / 13; justify-self: end; display: inline-flex; align-items: center; gap: 8px; color: var(--bone-2); transition: color .4s var(--ease); }
.cx-more .ic { width: 14px; height: 14px; }
.cx-more:hover { color: var(--bone); }
/* the project planner (contact): answers → a WhatsApp message the visitor sends themselves */
.pi { position: relative; background: var(--night); color: var(--bone); padding: clamp(64px, 12vh, 140px) 0 clamp(56px, 10vh, 110px); }
.pi .grid { row-gap: 18px; }
.pi-k { grid-column: 1 / 4; color: var(--bone-2); }
.pi-t { grid-column: 4 / 13; font: 400 clamp(34px, 4vw, 68px)/.98 var(--sans); letter-spacing: -.05em; }
.pi-t em { font-family: var(--serif); font-style: italic; letter-spacing: -.02em; font-size: 1.06em; }
.pi-sub { grid-column: 4 / 10; color: var(--bone-2); font-size: 16px; line-height: 1.45; }
.pi-f { grid-column: 4 / 13; display: grid; gap: 30px; margin-top: clamp(18px, 4vh, 40px); }
.pi-f fieldset { border: 0; margin: 0; padding: 18px 0 0; border-top: 1px solid rgba(244, 236, 234, .16); display: grid; gap: 14px; min-width: 0; }
.pi-f legend, .pi-in label { float: left; width: 100%; padding: 0; color: var(--bone-2); }
.pi-in label i, .pi-f legend i { font-style: normal; margin-left: 8px; color: rgba(244, 236, 234, .4); }
.pi-ch { display: flex; flex-wrap: wrap; gap: 8px; }
.pi-c { position: relative; cursor: pointer; }
.pi-c input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pi-c span { display: inline-grid; gap: 2px; padding: 10px 16px 9px; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(244, 236, 234, .28); font-size: 15px; letter-spacing: -.015em; line-height: 1.15; transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }
.pi-c small { font-size: 9.5px; color: var(--bone-2); transition: color .35s var(--ease); }
.pi-c:hover span { box-shadow: inset 0 0 0 1px rgba(244, 236, 234, .7); }
.pi-c input:checked + span { background: var(--bone); color: var(--ink); box-shadow: none; }
.pi-c input:checked + span small { color: var(--ink-2); }
.pi-c input:focus-visible + span { outline: 2px solid var(--bone); outline-offset: 3px; }
.pi-in { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(244, 236, 234, .16); }
.pi-in input, .pi-in textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(244, 236, 234, .32); color: var(--bone); font: 400 18px/1.4 var(--sans); letter-spacing: -.015em; padding: 8px 0 10px; border-radius: 0; resize: vertical; transition: border-color .35s var(--ease); }
.pi-in input::placeholder, .pi-in textarea::placeholder { color: rgba(244, 236, 234, .36); }
.pi-in input:focus, .pi-in textarea:focus { outline: none; border-bottom-color: var(--bone); }
.pi-go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding-top: 8px; }
.pi-btn { display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 26px 0 20px; border-radius: 99px; background: var(--bone); color: var(--ink); font-size: 17px; letter-spacing: -.02em; transition: transform .5s var(--ease), background .4s var(--ease); }
.pi-btn .ic { width: 22px; height: 22px; }
.pi-btn:hover { transform: translate3d(0, -2px, 0); background: #fff; }
.pi-btn:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; }
.pi-fine { max-width: 46ch; color: var(--bone-2); line-height: 1.5; }
.pi-nojs { grid-column: 4 / 13; display: none; font-size: 18px; }
.pi-nojs a { text-decoration: underline; text-underline-offset: 4px; }
html:not(.js) .pi-f { display: none; }
html:not(.js) .pi-nojs { display: block; }

/* 404 */
.nf { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--m) 40px; }
.nf-t { font-size: clamp(120px, 34vw, 560px); font-weight: 600; letter-spacing: -.07em; line-height: .78; }
.nf-a { margin-top: 30px; display: flex; justify-content: space-between; }

/* ---------- tablets ---------- */
@media (max-width: 1024px) {
  .wd-t { grid-column: 1 / 10; }
  .hd-nav { grid-column: 5 / 11; }
  .hero-what { grid-column: 1 / 12; }
  .pj--e .pj-media { grid-column: 1 / 9; --ar: 16 / 10; }
  .pj--e .pj-meta { grid-column: 9 / 13; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- phones ---------- */
@media (max-width: 767px) {
  .wd-a { height: 190svh; }
  .wd-c { height: 760svh; }
  /* the route is for wide screens only */
  .rt { display: none; }
  /* phones: each plan and each step sits low, its stele or stone in view above it */
  .jx-p { align-items: flex-end; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .jx-p::before { background: linear-gradient(to top, rgba(244, 236, 234, .96), rgba(244, 236, 234, .86) 44%, rgba(244, 236, 234, 0) 66%); }
  .jx-p .grid { row-gap: 12px; }
  .jx-head, .jx-tabs, .jx-plans, .jx-s .jx-head, .jx-bar, .jx-steps { grid-column: 1 / 13; }
  .wd-intro { grid-column: 1 / 13; gap: 10px; }
  .wd-lead { font-size: 15px; max-width: 30ch; }
  .wx-sep .mono, .wx-sep p:last-child { grid-column: 1 / 13; }
  .cs-note { grid-column: 1 / 13; }
  .cx-sub { grid-column: 1 / 13; font-size: 15px; }
  .jx-head { gap: 6px; }
  .jx-t { font-size: 22px; }
  /* the three plans listed are the pricing's own heading on a phone */
  .jx-p .jx-head { display: none; }
  .jx-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border-top: 0; }
  .jx-tabs a { grid-template-columns: 1fr; gap: 2px; padding: 8px 0 0; border-bottom: 0; border-top: 2px solid var(--line); }
  .jx-tabs li.is-on a { border-top-color: currentColor; }
  .jx-tabs li.is-on a span::before { display: none; }
  .jx-tabs b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .jx-ps { display: none; }
  .jx-tabs i { font-size: 10px; }
  .jx-plan { gap: 10px; }
  .jx-pn { font-size: 24px; gap: 6px; }
  .jx-pp { font-size: 38px; }
  .jx-feat { gap: 5px; padding-top: 10px; }
  .jx-feat li { font-size: 12px; padding: 5px 9px 4px; }
  .jx-s { bottom: calc(18px + env(safe-area-inset-bottom)); }
  .jx-s::before { background: linear-gradient(to top, rgba(244, 236, 234, .96), rgba(244, 236, 234, .8) 34%, rgba(244, 236, 234, 0) 58%); }
  .jx-s::after { background: linear-gradient(to top, rgba(30, 29, 31, .82), rgba(30, 29, 31, .55) 34%, rgba(30, 29, 31, 0) 58%); }
  .jx-s .grid { row-gap: 12px; }
  .jx-bar { gap: 4px; }
  .jx-bar a { padding-top: 8px; }
  .jx-bar b { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .jx-steps b { font-size: 38px; }
  .jx-steps p { font-size: 14px; }
  .wd-b { height: calc(var(--n, 6) * 48svh + 80svh); }
  .wd.is-work .wd-b { height: calc(var(--n, 8) * 44svh + 60svh); }
  /* home, the work space: the words sit in the sky above the pictures, the water and reflections below stay clear */
  .gx-in { bottom: calc(82px + env(safe-area-inset-bottom)); }
  .gx-list { grid-column: 1 / 13; height: clamp(76px, 21vw, 92px); }
  .gx-a { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .gx-all, .gx-sum, .gx-go, .gx-tags span:nth-child(n+3) { display: none; }
  .gx-name { font-size: clamp(36px, 10.6vw, 48px); }
  .gx-in { row-gap: 10px; }
  .wd-t { grid-column: 1 / 13; font-size: clamp(40px, 11.6vw, 56px); }
  .gate-bot { flex-direction: column; gap: 4px; }
  :root { --hd: 52px; }
  body { font-size: 15px; }
  .mono { font-size: 10.5px; }
  .hd { grid-template-columns: 1fr auto; column-gap: 12px; padding-right: calc(var(--m) + 104px); }
  .hd-logo { grid-column: 1; }
  .hd-nav, .hd-time { display: none; }
  .hd-snd { grid-column: 2; height: 44px; padding: 0 8px; }
  .hd-snd-l { display: none; }
  /* the menu: a solid pill outside the blended header, legible over the world, pictures and dark sections alike */
  .hd-menu { position: fixed; top: calc((var(--hd) - 38px) / 2); right: var(--m); z-index: 52; display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 15px 0 17px; border-radius: 99px; background: var(--ink); color: var(--paper); font: 400 11px/1 var(--mono); text-transform: uppercase; box-shadow: 0 0 0 1px rgba(244, 236, 234, .2), 0 8px 22px -12px rgba(30, 29, 31, .55); }
  .hd-menu i { position: relative; width: 16px; height: 6px; }
  .hd-menu i::before, .hd-menu i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
  .hd-menu i::before { top: 0; }
  .hd-menu i::after { bottom: 0; }
  .is-menu .hd-menu i::before { transform: translateY(2.25px) rotate(45deg); }
  .is-menu .hd-menu i::after { transform: translateY(-2.25px) rotate(-45deg); }

  .hero { padding-top: calc(var(--hd) + 26px); }
  .hero-top { row-gap: 14px; }
  .hero-role { grid-column: 1 / 8; }
  .hero-loc { grid-column: 8 / 13; text-align: right; }
  .hero-what { grid-column: 1 / 13; font-size: clamp(28px, 8.4vw, 40px); }
  .hero-avail { grid-column: 1 / 13; }
  .hero-down { display: none; }
  .mast { font-size: calc((100vw - 2 * var(--m)) / 3.4); }

  .sw-hd h2 { grid-column: 1 / 9; }
  .sw-hd p { display: none; }
  .sw-hd a { grid-column: 9 / 13; }
  .pj { margin-bottom: 72px; }
  .pj .pj-a { row-gap: 14px; }
  /* phones see each site's whole desktop picture, landscape — nothing cut away */
  .pj .pj-media, .pj--a .pj-media, .pj--b .pj-media, .pj--c .pj-media, .pj--d .pj-media, .pj--e .pj-media, .pj--f .pj-media { grid-column: 1 / 13; grid-row: auto; --ar: 16 / 10; }
  .pj--f .pj-a { padding-inline: var(--m); }
  .pj--e .pj-media img { object-position: 50% 0; }
  .pj .pj-meta, .pj--a .pj-meta, .pj--b .pj-meta, .pj--c .pj-meta, .pj--d .pj-meta, .pj--e .pj-meta, .pj--f .pj-meta { grid-column: 1 / 13; grid-row: auto; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; padding-inline: 0; }
  .pj .pj-n { grid-column: 1; }
  .pj .pj-name, .pj--a .pj-name, .pj--f .pj-name { grid-column: 2; margin: 0; font-size: 26px; }
  .pj .pj-tags, .pj--a .pj-tags, .pj--f .pj-tags { grid-column: 1 / 3; justify-content: flex-start; margin-top: 6px; }

  .hp-k, .hp-t, .hp-list, .hp-a, .hp-steps, .hp-fine { grid-column: 1 / 13; }
  .hp-k { padding: 0; }
  .hp-list a { grid-template-columns: 1fr auto; gap: 12px; }
  .hp-list .ic { display: none; }
  .hp-n, .hp-p { font-size: 21px; }
  .ft .grid { row-gap: 18px; }
  .ft-t, .ft-wa { grid-column: 1 / 13; justify-self: start; }
  .ft-t { font-size: 30px; }
  .cb-browse .cb-bw, .cb-browse .cap { grid-column: 1 / 13; }
  .cb-browse .cb-track { --win: min(112cqw, 66svh); }
  /* the quick bar: work, prices, WhatsApp — away from the first screen, the menu and page changes (chrome.js) */
  .qn { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 44; display: flex; gap: 2px; padding: 4px; border-radius: 99px; background: var(--ink); color: var(--paper); box-shadow: 0 0 0 1px rgba(244, 236, 234, .16), 0 12px 30px -12px rgba(30, 29, 31, .6); transform: translate3d(-50%, calc(100% + 30px), 0); opacity: 0; visibility: hidden; transition: transform .7s var(--ease), opacity .5s var(--ease), visibility 0s .7s; }
  .qn a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 99px; }
  .qn a[aria-current] { background: rgba(244, 236, 234, .14); }
  .qn .qn-wa { background: var(--paper); color: var(--ink); padding: 0 16px 0 12px; }
  .qn-wa .ic { width: 17px; height: 17px; }
  html.is-qn .qn { transform: translate3d(-50%, 0, 0); opacity: 1; visibility: visible; transition: transform .8s var(--ease), opacity .5s var(--ease), visibility 0s; }
  html.is-menu .qn, html.is-gate .qn, html.is-busy .qn { transform: translate3d(-50%, calc(100% + 30px), 0); opacity: 0; visibility: hidden; }

  .ph-t { font-size: clamp(40px, 11.4vw, 58px); }
  .ph-sub { grid-column: 1 / 13; }
  .ab-lead { grid-column: 1 / 13; font-size: clamp(21px, 6vw, 26px); }

  .wx-hd { row-gap: 14px; }
  .cx-t, .cx-wa, .cx-more { grid-column: 1 / 13; }
  .cx-more { justify-self: start; }
  .pi-k, .pi-t, .pi-sub, .pi-f, .pi-nojs { grid-column: 1 / 13; }
  .pi-t { font-size: 34px; }
  .pi-sub { font-size: 15px; }
  .pi-c span { font-size: 14px; padding: 9px 14px 8px; }
  .pi-btn { width: 100%; justify-content: center; }
  .cx-wa { justify-self: start; height: 58px; font-size: 16px; }
  .pl-xh, .pl-x ul, .pl-xa { grid-column: 1 / 13; }
  .pl-xh { margin-bottom: 14px; }
  .pl-x ul { grid-template-columns: 1fr; }
  .cw { height: 96svh; }
  .cw-wall { width: 210%; transform: translate(-50%, -52%) perspective(1600px) rotateX(22deg) rotateZ(-14deg); }
  .wx-t, .wx-f { grid-column: 1 / 13; justify-self: start; }
  .wx-f button { height: 32px; padding: 0 12px; }
  .wx-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .wx-meta { grid-template-columns: 28px 1fr auto; }
  .wx-name { font-size: 26px; }

  .cs-k { grid-column: 1 / 7; }
  .cs-st { grid-column: 7 / 13; }
  .cs-t { font-size: clamp(44px, 14.2vw, 72px); white-space: normal; }
  .cs-facts { row-gap: 14px; }
  .cs-facts > div, .cs-facts > div.is-w { grid-column: span 6; }
  .cs-ov-k, .cs-ov-t, .cs-ov-sum { grid-column: 1 / 13; }
  .cs-ov-k { padding: 0 0 14px; }
  .cb-text .mono, .cb-text p.lead, .cb-text.is-r .mono, .cb-text.is-r p.lead { grid-column: 1 / 13; }
  .cb-frame figure, .cb-frame.is-wide figure, .cb-frame.is-mid figure { grid-column: 1 / 13; }
  .cb-pair figure:nth-child(1), .cb-pair figure:nth-child(2), .cb-pair .cap { grid-column: 1 / 13; margin-top: 0; }
  .cb-pair .grid { row-gap: 18px; }
  .cb-phones .grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
  .cb-phones .grid::-webkit-scrollbar { display: none; }
  .cb-phones figure, .cb-phones figure:nth-of-type(n) { flex: 0 0 64vw; margin-top: 0; scroll-snap-align: center; }
  .cb-phones .cap { padding: 0 var(--m); }
  .cb-motion .cb-side, .cb-motion.is-m .cb-side, .cb-motion.is-d .cb-side, .cb-motion .cb-vid, .cb-motion.is-m .cb-vid, .cb-motion.is-d .cb-vid { grid-column: 1 / 13; }
  .cb-motion.is-m .cb-vid { width: min(78vw, 330px); }
  .cb-system .cb-side, .sys-col, .sys-type { grid-column: 1 / 13; }
  .sys-col { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .sys-col i { height: 92px; }
  .sys-type li { grid-template-columns: 1fr; }
  .sys-type small { grid-column: 1; }
  .cb-sticky .cb-side, .cb-sticky .cb-stack, .cb-scroll .cb-side, .cb-scroll .cb-phone { grid-column: 1 / 13; position: static; }
  .cb-sticky .cb-stack { margin-top: 26px; gap: 18px; }
  .cb-scroll .cb-phone { margin-top: 26px; padding: 0 12vw; }
  .cb-scroll .cb-track { height: auto; }
  .cb-scroll .cb-pin { position: static; }
  .cb-scroll .im { aspect-ratio: 390 / 700; }
  .cb-detail figure, .cb-detail.is-r figure, .cb-detail .cb-side, .cb-detail.is-r .cb-side { grid-column: 1 / 13; grid-row: auto; }
  .cs-close-t, .cs-close-a { grid-column: 1 / 13; }
  .cs-out-a, .cs-out-b, .cs-out-c { grid-column: 1 / 13; justify-self: start; }
  .end { height: 240svh; }
  .end-still { width: 72vw; aspect-ratio: var(--arm, 390 / 844); max-height: 62svh; width: auto; height: 62svh; }
  .end-name { font-size: clamp(40px, 13vw, 64px); }

  .pl-row { grid-template-columns: 1fr auto; }
  .pl-n { display: none; }
  .pl-name { grid-column: 1 / 2; }
  .pl-price { grid-column: 2 / 3; grid-row: 1; justify-self: end; font-size: 40px; }
  .pl-desc { grid-column: 1 / 3; }
  .pl-go { grid-column: 1 / 3; justify-self: start; width: auto; height: auto; border-radius: 99px; padding: 12px 16px; gap: 8px; display: inline-flex; }
  .pl-go::before { content: attr(data-label); font: 400 11px/1 var(--mono); text-transform: uppercase; }
  .sec-k, .sec-t, .steps, .faq { grid-column: 1 / 13; }
  .steps { grid-template-columns: 1fr; }
  .ab-cols, .caps { grid-column: 1 / 13; grid-template-columns: 1fr; }
  .ab-wall figure:nth-child(n) { grid-column: 1 / 13; margin-top: 0; }
  .ab-wall figure:nth-child(2), .ab-wall figure:nth-child(3) { grid-column: span 6; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}