/* r22 · V3 — dark studio, the work in depth. Led by by Crawford and Lusion, with Collins, Cuberto and Basic/Dept.
   Switchers on <body>, each written as tokens: colour--1..3 · bg--1..3 · comp--1..4 · hero--1..3 · work--1..3 · type--1..6 (type 3 = Syne + Manrope, his pick).
   Spacing scale only: 4 8 12 16 24 32 48 64 96 128 160 200. */

/* ── colour ─────────────────────────────────────────────────── */
body.colour--1 {
  --bg: #0F1114; --ink: #EEF1F4; --muted: #AFB7C0; --line: rgba(238,241,244,.12); --line-2: rgba(238,241,244,.24);
  --surf: #171A1F; --surf-2: #20242A; --accent: #8FB0C9; --btn-bg: #EEF1F4; --btn-ink: #0F1114; --focus: #8FB0C9;
  --f1: #24323F; --f2: #506C83; --f3: #3A2A2E; --s1: .95; --s2: .42; --s3: .8;
  --w1: 85%; --w2: 40%; --w3: 75%;
  --err: #FFB4A6;
}
body.colour--2 {
  --bg: #0A0B0D; --ink: #F0F1FA; --muted: #AAAEBB; --line: rgba(240,241,250,.12); --line-2: rgba(240,241,250,.24);
  --surf: #14161A; --surf-2: #1C1F25; --accent: #C1FF00; --btn-bg: #C1FF00; --btn-ink: #0A0B0D; --focus: #C1FF00;
  --f1: #121A3A; --f2: #1A2FFB; --f3: #2B2E3A; --s1: .95; --s2: .2; --s3: .8;
  --w1: 90%; --w2: 22%; --w3: 80%;
  --err: #FFB4A6;
}
body.colour--3 {
  --bg: #120B08; --ink: #F6EEE6; --muted: #BFAF9F; --line: rgba(246,238,230,.12); --line-2: rgba(246,238,230,.24);
  --surf: #1D1410; --surf-2: #271B16; --accent: #E3A857; --btn-bg: #F6EEE6; --btn-ink: #120B08; --focus: #E3A857;
  --f1: #4A1F1A; --f2: #8A5A2B; --f3: #E3A857; --s1: .8; --s2: .42; --s3: .12;
  --w1: 75%; --w2: 40%; --w3: 12%;
  --err: #FFB4A6;
}

/* ── type: six pairings, each set on its own terms (round 22b: Syne + Manrope kept, his pick; the other five new) ── */
body.type--1 { /* Clash Display + Satoshi: a sharp, slightly condensed display over a quiet geometric body */
  --f-d: "Clash Display", system-ui, sans-serif; --w-d: 600; --w-d2: 500; --t-d: -0.025em; --t-d2: -0.01em; --lh-d: 1.04; --case-d: none; --ds: .98; --ds2: 1;
  --f-b: "Satoshi", system-ui, sans-serif; --w-b: 400;
  --f-l: "Satoshi", system-ui, sans-serif; --w-l: 500; --tt-l: none; --ls-l: 0em; --sz-l: 15px; --fvs: normal;
}
body.type--2 { /* Cabinet Grotesk + Switzer: a heavy, characterful grotesk set tight, a Swiss body */
  --f-d: "Cabinet Grotesk", system-ui, sans-serif; --w-d: 800; --w-d2: 700; --t-d: -0.035em; --t-d2: -0.015em; --lh-d: 1.02; --case-d: none; --ds: .96; --ds2: .98;
  --f-b: "Switzer", system-ui, sans-serif; --w-b: 400;
  --f-l: "Switzer", system-ui, sans-serif; --w-l: 500; --tt-l: none; --ls-l: 0em; --sz-l: 15px; --fvs: normal;
}
body.type--3 { /* Syne + Manrope · Lusion: wide display, uppercase small labels (kept) */
  --f-d: "Syne", system-ui, sans-serif; --w-d: 600; --w-d2: 600; --t-d: -0.035em; --t-d2: -0.02em; --lh-d: 1.08; --case-d: none; --ds: .84; --ds2: .86;
  --f-b: "Manrope", system-ui, sans-serif; --w-b: 400;
  --f-l: "Manrope", system-ui, sans-serif; --w-l: 600; --tt-l: uppercase; --ls-l: .07em; --sz-l: 12.5px; --fvs: normal;
}
body.type--4 { /* Sora + DM Sans: a round, open geometric display, a friendly body */
  --f-d: "Sora", system-ui, sans-serif; --w-d: 600; --w-d2: 600; --t-d: -0.045em; --t-d2: -0.025em; --lh-d: 1.06; --case-d: none; --ds: .88; --ds2: .9;
  --f-b: "DM Sans", system-ui, sans-serif; --w-b: 400;
  --f-l: "DM Sans", system-ui, sans-serif; --w-l: 500; --tt-l: none; --ls-l: 0em; --sz-l: 15px; --fvs: normal;
}
body.type--5 { /* Panchang + Supreme: a very wide display set small, the nearest cousin of Syne's stance */
  --f-d: "Panchang", system-ui, sans-serif; --w-d: 600; --w-d2: 500; --t-d: -0.02em; --t-d2: -0.01em; --lh-d: 1.12; --case-d: none; --ds: .66; --ds2: .72;
  --f-b: "Supreme", system-ui, sans-serif; --w-b: 400;
  --f-l: "Supreme", system-ui, sans-serif; --w-l: 500; --tt-l: uppercase; --ls-l: .06em; --sz-l: 12.5px; --fvs: normal;
}
body.type--6 { /* Geist + Geist Mono labels: a precise grotesk with engineered labels */
  --f-d: "Geist", system-ui, sans-serif; --w-d: 600; --w-d2: 500; --t-d: -0.045em; --t-d2: -0.025em; --lh-d: 1.04; --case-d: none; --ds: 1; --ds2: 1;
  --f-b: "Geist", system-ui, sans-serif; --w-b: 400;
  --f-l: "Geist Mono", ui-monospace, monospace; --w-l: 500; --tt-l: uppercase; --ls-l: .04em; --sz-l: 11.5px; --fvs: normal;
}

/* ── components ─────────────────────────────────────────────── */
body.comp--1, body.comp--4 {
  --btn-h: 56px; --btn-r: 999px; --btn-fs: 16px; --btn-tt: var(--tt-l); --btn-ls: var(--ls-l); --btn-f: var(--f-l);
  --pri-bg: var(--btn-bg); --pri-ink: var(--btn-ink); --pri-line: transparent;
  --sec-bg: rgba(255,255,255,.07); --sec-ink: var(--ink); --sec-line: rgba(255,255,255,.16);
  --chip: 40px;
  --card-bg: rgba(255,255,255,.055); --card-line: rgba(255,255,255,.10); --card-r: 24px; --card-shadow: 0 32px 80px -40px rgba(0,0,0,.6);
  --in-bg: rgba(255,255,255,.05); --in-line: rgba(255,255,255,.14); --in-r: 12px; --in-pad: 16px; --in-bw: 1px;
  --nav-line: rgba(255,255,255,.12);
  --pill-line: rgba(255,255,255,.16);
}
body.comp--4 { /* the same glass, with no arrows anywhere */
  --pri-bg: rgba(255,255,255,.15); --pri-ink: var(--ink); --pri-line: rgba(255,255,255,.28);
  --sec-bg: rgba(255,255,255,.06); --sec-line: rgba(255,255,255,.18);
  --chip: 0px;
}
body.comp--2 {
  --btn-h: 52px; --btn-r: 999px; --btn-fs: 16px; --btn-tt: var(--tt-l); --btn-ls: var(--ls-l); --btn-f: var(--f-l);
  --pri-bg: var(--btn-bg); --pri-ink: var(--btn-ink); --pri-line: transparent;
  --sec-bg: #FFFFFF; --sec-ink: #0B0C0E; --sec-line: transparent;
  --chip: 0px;
  --card-bg: var(--surf); --card-line: transparent; --card-r: 20px; --card-shadow: none;
  --in-bg: var(--surf-2); --in-line: transparent; --in-r: 12px; --in-pad: 16px; --in-bw: 1px;
  --nav-line: transparent;
  --pill-line: transparent;
}
body.comp--3 {
  --btn-h: 44px; --btn-r: 999px; --btn-fs: 12px; --btn-tt: uppercase; --btn-ls: .06em; --btn-f: var(--f-l);
  --pri-bg: transparent; --pri-ink: var(--ink); --pri-line: var(--ink);
  --sec-bg: transparent; --sec-ink: var(--ink); --sec-line: var(--line-2);
  --chip: 0px;
  --card-bg: transparent; --card-line: var(--line-2); --card-r: 4px; --card-shadow: none;
  --in-bg: transparent; --in-line: transparent; --in-r: 0px; --in-pad: 0px; --in-bw: 0px;
  --nav-line: var(--line-2);
  --pill-line: var(--line-2);
}

/* ── base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-b); font-weight: var(--w-b); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
@media (min-width: 1200px) { body { font-size: 18px; } }
@media (max-width: 767px) { body { font-size: 16px; } }
h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.skip { position: fixed; left: 16px; top: 16px; z-index: 100; padding: 12px 24px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); transform: translateY(-160%); transition: transform .3s; }
.skip:focus { transform: none; }
.wrap { max-width: 1440px; margin: 0 auto; padding-inline: clamp(20px, 3.5vw, 56px); }
main, .ft { position: relative; z-index: 1; }

/* one display treatment, set by the type choice */
.d1, .d2, .dfoot, .ft__name, .cc__name, .plan__price, .quote__q, .enq__h,
.step__t, .yes__t, .qa__t, .plan__name, .ft__nav a, .sheet__nav a, .hd__name {
  font-family: var(--f-d); font-weight: var(--w-d); letter-spacing: var(--t-d); text-transform: var(--case-d); font-variation-settings: var(--fvs);
}
.step__t, .yes__t, .qa__t, .plan__name, .quote__q { font-weight: var(--w-d2); letter-spacing: var(--t-d2); }
.d1 { font-size: calc(clamp(38px, 5.4vw, 84px) * var(--ds)); line-height: var(--lh-d); }
/* round 23: one type ladder at every width. On a phone and a tablet the section headings used to fall to the size of the
   quotes and sub-headings under them; their floor now keeps them clearly the larger (hero > heading > sub-heading > text) */
.d2 { font-size: calc(clamp(42px, 3.2vw + 18px, 68px) * var(--ds)); line-height: var(--lh-d); }
.dfoot { font-size: calc(clamp(56px, 10.4vw, 176px) * var(--ds)); line-height: var(--lh-d); }

[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
[data-split] .wi { display: inline-block; will-change: transform; }

/* ── background layer ───────────────────────────────────────── */
.ground { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ground > * { position: absolute; inset: 0; display: none; }
.ground__gl { width: 100%; height: 100%; }
body.bg--1 .ground__gl { display: block; }
html.no-gl body.bg--1 .ground__gl { display: none; }
body.bg--2 .ground__wash, html.no-gl body.bg--1 .ground__wash { display: block; }
.ground__wash {
  background:
    radial-gradient(55% 60% at 12% 18%, color-mix(in srgb, var(--f1) var(--w1), transparent) 0%, transparent 72%),
    radial-gradient(48% 52% at 88% 30%, color-mix(in srgb, var(--f2) var(--w2), transparent) 0%, transparent 70%),
    radial-gradient(60% 55% at 60% 96%, color-mix(in srgb, var(--f3) var(--w3), transparent) 0%, transparent 72%),
    var(--bg);
}
body.bg--3 .ground__grain, body.bg--3 .ground__marks { display: block; }
.ground__grain {
  opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ground__marks i { position: absolute; width: 13px; height: 13px; }
.ground__marks i::before, .ground__marks i::after { content: ""; position: absolute; background: var(--muted); opacity: .8; }
.ground__marks i::before { left: 6px; top: 0; width: 1px; height: 13px; }
.ground__marks i::after { top: 6px; left: 0; height: 1px; width: 13px; }
.ground__marks i:nth-child(1) { left: 18px; top: 18px; }
.ground__marks i:nth-child(2) { right: 18px; top: 18px; }
.ground__marks i:nth-child(3) { left: 18px; bottom: 18px; }
.ground__marks i:nth-child(4) { right: 18px; bottom: 18px; }

/* ── buttons ────────────────────────────────────────────────── */
.btn {
  --h: var(--btn-h);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: var(--h); padding: 0 28px; border-radius: var(--btn-r); border: 1px solid transparent; overflow: hidden; isolation: isolate;
  font-family: var(--btn-f); font-size: var(--btn-fs); font-weight: 500; text-transform: var(--btn-tt); letter-spacing: var(--btn-ls);
  white-space: nowrap; cursor: pointer; text-decoration: none; line-height: 1;
  transition: color .35s cubic-bezier(.22,1,.36,1), border-color .35s, background-color .35s, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.btn:hover::before { transform: scaleX(1); }
.btn:active { transform: scale(.97); }
.btn--pri { background: var(--pri-bg); color: var(--pri-ink); border-color: var(--pri-line); }
.btn--sec { background: var(--sec-bg); color: var(--sec-ink); border-color: var(--sec-line); }
.btn--pri::before { background: color-mix(in srgb, var(--pri-ink) 10%, var(--pri-bg)); }
.btn--sec::before { background: color-mix(in srgb, var(--sec-ink) 10%, var(--sec-bg)); }
.btn__c { display: inline-grid; place-items: center; flex: none; }
.btn__a { display: inline-block; transition: transform .4s cubic-bezier(.22,1,.36,1); }
/* comp 1: glass, a round chip that turns */
body.comp--1 .btn { padding: 0 8px 0 28px; backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
body.comp--1 .btn--sec { background: linear-gradient(var(--sec-bg), var(--sec-bg)), color-mix(in srgb, var(--bg) 45%, transparent); }
body.comp--1 .btn__c { width: var(--chip); height: var(--chip); border-radius: 50%; font-size: 17px; transition: transform .4s cubic-bezier(.22,1,.36,1); }
body.comp--1 .btn--pri .btn__c { background: var(--pri-ink); color: var(--pri-bg); }
body.comp--1 .btn--sec .btn__c { background: rgba(255,255,255,.1); color: var(--ink); }
body.comp--1 .btn:hover .btn__c { transform: rotate(45deg); }
body.comp--1 .btn--sec[href="#work"]:hover .btn__c { transform: translateY(3px); }
/* comp 4: glass, no arrows; the label is optically centred and the glass brightens and lifts */
body.comp--4 .btn { padding: 0 32px; gap: 0;
  background: linear-gradient(var(--pri-bg), var(--pri-bg)), color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 32px -16px rgba(0,0,0,.6); }
body.comp--4 .btn--sec { background: linear-gradient(var(--sec-bg), var(--sec-bg)), color-mix(in srgb, var(--bg) 55%, transparent); }
body.comp--4 .btn::before { display: none; }
body.comp--4 .btn__l { padding-top: 1px; }
body.comp--4 .btn:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.42);
  background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)), color-mix(in srgb, var(--bg) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 18px 40px -16px rgba(0,0,0,.7); }
body.comp--4 .btn:active { transform: translateY(0) scale(.98); }
body.comp--4 .btn__c, body.comp--4 .lnk__a { display: none; }
/* comp 2: solid, the arrow travels */
body.comp--2 .btn:hover .btn__a { transform: translate(3px, -3px); }
body.comp--2 .btn--sec[href="#work"]:hover .btn__a, body.comp--3 .btn--sec[href="#work"]:hover .btn__a { transform: translateY(3px); }
/* comp 3: hairline, fills on hover */
body.comp--3 .btn { gap: 8px; }
body.comp--3 .btn__c { font-size: 13px; }
body.comp--3 .btn::before { background: var(--ink); }
body.comp--3 .btn:hover { color: var(--bg); border-color: var(--ink); }
body.comp--3 .btn:hover .btn__a { transform: translate(2px, -2px); }

/* text links */
.lnk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--f-l); font-weight: var(--w-l); font-size: 16px; text-transform: var(--tt-l); letter-spacing: var(--ls-l); color: var(--ink); }
body.type--3 .lnk, body.type--5 .lnk, body.type--6 .lnk { font-size: 13px; }
.lnk__l { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size .45s cubic-bezier(.22,1,.36,1); }
.lnk:hover .lnk__l { background-size: 0 1px; background-position: 100% 100%; }
body.comp--4 .lnk:hover .lnk__l { background-size: 100% 1px; color: var(--accent); }
body.colour--2.comp--4 .lnk:hover .lnk__l { color: var(--ink); }
.lnk__a { display: inline-block; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.lnk:hover .lnk__a { transform: translate(3px, -3px); }

.chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font-family: var(--f-l); font-size: 14px; font-weight: var(--w-l); text-transform: var(--tt-l); letter-spacing: var(--ls-l); color: var(--ink); white-space: nowrap; }
body.type--3 .chip, body.type--5 .chip, body.type--6 .chip { font-size: 11.5px; }
.chip--mark::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
body.comp--3 .chip { border-radius: 4px; }

.card { background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--card-r); box-shadow: var(--card-shadow); }

/* ── header ─────────────────────────────────────────────────── */
.hd { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.hd::before { content: ""; position: absolute; inset: 0 0 -40px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 94%, transparent) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 55%, transparent 100%); }
.hd.is-hidden { transform: translateY(-110%); }
.hd__in { max-width: 1440px; margin: 0 auto; padding: 20px clamp(20px, 3.5vw, 56px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.hd__name { justify-self: start; font-size: calc(22px * var(--ds2)); min-height: 44px; display: inline-flex; align-items: center; letter-spacing: -0.01em; }
.hd__nav { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 70%, #ffffff 6%); box-shadow: inset 0 0 0 1px var(--nav-line); }
body.comp--2 .hd__nav { background: var(--surf); }
body.comp--3 .hd__nav { background: color-mix(in srgb, var(--bg) 80%, transparent); }
.hd__nav a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-family: var(--f-l); font-size: var(--sz-l); font-weight: var(--w-l); text-transform: var(--tt-l); letter-spacing: var(--ls-l); color: var(--ink); transition: background-color .3s, color .3s; }
body.comp--3 .hd__nav a { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.hd__nav a:hover { background: rgba(255,255,255,.08); }
.hd__nav a[aria-current] { background: var(--ink); color: var(--bg); }
.hd__cta { justify-self: end; --h: min(var(--btn-h), 48px); }
body.comp--1 .hd__cta .btn__c { width: 34px; height: 34px; }
body.comp--1 .hd__cta { padding-left: 22px; padding-right: 7px; }
body.comp--4 .hd__cta { padding: 0 24px; }
.hd .btn { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.comp--1 .hd .btn--pri { background: var(--pri-bg); }
body.comp--4 .hd .btn { background: color-mix(in srgb, var(--bg) 66%, #ffffff 16%); }
/* round 22b audit: the header's button is the capsule's twin. Same outer height (48), same 1px rim tone, the label at
   the nav's size and weight, and no drop shadow, so nothing about it reads bigger than the capsule beside it. The
   brighter fill alone marks it as the one action. (By Crawford and Lusion both size the header button to the nav.) */
.hd .hd__cta { --h: 48px; font-size: var(--sz-l); font-weight: var(--w-l); }
body.comp--1 .hd .hd__cta, body.comp--4 .hd .hd__cta { border-color: transparent; box-shadow: inset 0 0 0 1px var(--nav-line); }
body.comp--4 .hd .hd__cta { padding: 0 22px; background: color-mix(in srgb, var(--bg) 58%, #ffffff 16%); }
body.comp--4 .hd .hd__cta:hover { transform: none; border-color: transparent; background: color-mix(in srgb, var(--bg) 48%, #ffffff 24%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
body.comp--3 .hd .hd__cta { border-color: var(--line-2); }
.hd__menu { display: none; justify-self: end; align-items: center; gap: 12px; height: 44px; padding: 0 16px 0 20px; border-radius: 999px; border: 1px solid var(--pill-line); background: color-mix(in srgb, var(--bg) 70%, #ffffff 6%); cursor: pointer; font-family: var(--f-l); font-size: 15px; font-weight: var(--w-l); text-transform: var(--tt-l); letter-spacing: var(--ls-l); }
body.comp--2 .hd__menu { background: var(--surf); }
.hd__menu-i { display: grid; gap: 5px; width: 18px; }
.hd__menu-i i { height: 1.5px; background: currentColor; transition: transform .3s; }
.hd__menu[aria-expanded="true"] .hd__menu-i i:first-child { transform: translateY(3.25px) rotate(45deg); }
.hd__menu[aria-expanded="true"] .hd__menu-i i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.sheet { position: fixed; inset: 0; z-index: 40; background: var(--bg); padding: 120px clamp(20px, 3.5vw, 56px) 48px; display: flex; flex-direction: column; justify-content: space-between; }
.sheet[hidden] { display: none; }
.sheet__nav { display: grid; gap: 8px; }
.sheet__nav a { font-size: calc(40px * var(--ds2)); line-height: 1.2; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sheet__cta { align-self: stretch; }
@media (max-width: 899px) {
  .hd__in { grid-template-columns: 1fr auto; padding-block: 16px; }
  .hd__nav, .hd__cta { display: none; }
  .hd__menu { display: inline-flex; }
}

/* ── 1 + 2 · one stage: the first screen and the work (round 19's field, ported) ─────────────────────────────────
   The first screen and the work stand on one stage that holds still while you fly (v3-field.js, v3-field3d.js).
   Hero (body.hero--1..3) varies one thing: where the ring of phones sits against the heading.
   Work (body.work--1..3) varies one thing: how each project is shown in the field.
   html.flat (reduced motion, or no GPU): the two sections sit one after another, still. */
:root { --ease-x: cubic-bezier(.16, 1, .3, 1); --ease-q: cubic-bezier(.25, 1, .5, 1); --hd-h: 88px; --gut: clamp(20px, 3.5vw, 56px); }
@media (max-width: 899px) { :root { --hd-h: 76px; } }
.rooms { position: relative; }
.rmark { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
.field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; opacity: 0; transition: opacity 1s var(--ease-x); }
.field.is-on { opacity: 1; }
.room { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.room.is-vis { visibility: visible; }
.room a, .room button { pointer-events: auto; }

/* the heading block: laid out by the grid; on the way into the field it moves with the camera */
.hero__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-content: center;
  padding-top: var(--hd-h); padding-bottom: 64px; pointer-events: none; }
.hero__text { position: relative; z-index: 3; grid-column: 1 / 7; transform-origin: 50% 50%; }
.hero__h { font-size: calc(clamp(50px, 5.6vw, 96px) * var(--ds)); line-height: var(--lh-h, 1); letter-spacing: var(--tr-h, var(--t-d)); text-wrap: balance; max-width: none; }
.hero__h .w { padding-top: .12em; margin-top: -.12em; }
/* the heading is fitted by measuring it: nothing on it may transition, not even the reduced-motion page's tiny ones */
.hero__h, .hero__h *, html.still .hero__h, html.still .hero__h * { transition: none !important; }   /* the masks open upward too, so tall capitals are never clipped */
.hero__intro { margin-top: 24px; max-width: 38ch; font-size: clamp(17px, 1.25vw, 20px); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.hero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__time { position: absolute; z-index: 3; right: var(--gut); bottom: 24px; display: flex; align-items: center; gap: 8px; margin: 0;
  font-family: var(--f-l); font-weight: var(--w-l); font-size: 13px; letter-spacing: .02em; color: var(--muted); font-variant-numeric: tabular-nums; }
body.type--3 .hero__time, body.type--5 .hero__time, body.type--6 .hero__time { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.hero__time time { color: var(--ink); }
.hero__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
@media (min-width: 1441px) { .hero__time { right: calc((100vw - 1440px) / 2 + var(--gut)); } }

/* the hero heading, set for each face: leading and tracking for a large first statement */
body.type--1 { --lh-h: 1; --tr-h: -0.03em; }
body.type--2 { --lh-h: .98; --tr-h: -0.04em; }
body.type--3 { --lh-h: 1.04; --tr-h: -0.032em; }
body.type--4 { --lh-h: 1.02; --tr-h: -0.05em; }
body.type--5 { --lh-h: 1.1; --tr-h: -0.025em; }
body.type--6 { --lh-h: 1; --tr-h: -0.05em; }

/* the ring of phones: the first screen of each site we made, turning slowly round its own axis */
.cyl { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; right: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.cyl.is-drag { cursor: grabbing; }
.cyl__stage { position: absolute; inset: 0; perspective: var(--cp, 1400px); perspective-origin: 50% var(--cpo, 50%); }
.cyl__ring { position: absolute; left: 50%; top: var(--cy, 52%); width: var(--pw, 220px); height: calc(var(--pw, 220px) * 2.099);
  margin: calc(var(--pw, 220px) * -1.05) 0 0 calc(var(--pw, 220px) * -.5); transform-style: preserve-3d; will-change: transform; }
/* a phone: a thin near-black bezel, the edge catching the light, and a soft shadow tinted to the ground */
.cf { position: absolute; inset: 0; display: block; padding: calc(var(--pw) * .028); border: 0; margin: 0; border-radius: calc(var(--pw) * .15); cursor: inherit; color: inherit;
  background: linear-gradient(165deg, #2B2E34 0%, #111215 26%, #0A0B0D 70%, #15171B 100%);
  box-shadow: 0 calc(var(--pw) * .16) calc(var(--pw) * .34) calc(var(--pw) * -.1) color-mix(in srgb, var(--bg) 35%, #000), 0 calc(var(--pw) * .04) calc(var(--pw) * .08) color-mix(in srgb, var(--bg) 50%, #000);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cf::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(255,255,255,.06); }
.cf__scr { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--pw) * .122); background: #000; }
.cf__scr img { width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; -webkit-user-drag: none; }
.cf__dim, .cf__sh, .cf__l, .cf__r { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.cf__dim { background: var(--bg); opacity: 0; }
/* the glass catches a band of light as the phone turns to you */
.cf__sh { background: linear-gradient(112deg, transparent 34%, rgba(255,255,255,.13) 47%, rgba(255,255,255,.02) 56%, transparent 64%); opacity: 0; }
/* turned away, its far edge falls into shadow, so the side phones read as curved round the ring */
.cf__l { background: linear-gradient(90deg, rgba(0,0,0,.7), rgba(0,0,0,.18) 55%, transparent); opacity: 0; }
.cf__r { background: linear-gradient(270deg, rgba(0,0,0,.7), rgba(0,0,0,.18) 55%, transparent); opacity: 0; }
.cf__tag { position: absolute; z-index: 2; left: 50%; bottom: calc(var(--pw) * .09); transform: translateX(-50%); height: 26px; padding: 0 10px; font-size: 12px;
  background: color-mix(in srgb, var(--bg) 94%, #000); border-color: rgba(255,255,255,.22); }
.cf:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
/* the light the front phone stands in, and its shadow on the ground */
.cyl__pool { position: absolute; left: 50%; top: var(--cy, 52%); width: calc(var(--pw) * 3.6); height: calc(var(--pw) * 3.6); transform: translate(-50%, -52%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 4%, transparent) 56%, transparent); }
.cyl__pool::after { content: ""; position: absolute; left: 50%; top: calc(52% + var(--pw) * 1.18); width: 74%; height: 9%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 20%, #000 80%), transparent); opacity: .85; }
.cyl__cap { position: absolute; left: 0; right: 0; top: calc(var(--cy, 52%) + var(--pw) * 1.05 + 28px); margin: 0; display: flex; justify-content: center; align-items: center; gap: 12px;
  font-family: var(--f-l); font-weight: var(--w-l); font-size: 14px; letter-spacing: .01em; color: var(--muted); text-transform: var(--tt-l); transition: opacity .5s var(--ease-x); pointer-events: none; }
body.type--3 .cyl__cap, body.type--5 .cyl__cap, body.type--6 .cyl__cap { font-size: 12px; letter-spacing: .06em; }
.cyl__cap b { font-weight: inherit; color: var(--ink); }
.cyl__cap .chip { height: 26px; padding: 0 10px; font-size: 12px; }
.cyl__cap.is-mv { opacity: 0; }

/* Hero 1 · as in round 19: the heading left, the ring right */
body.hero--1 .cyl { left: 50%; }
/* Hero 2 · the heading across the top, the ring of phones standing whole below it */
body.hero--2 .hero__grid { align-content: start; padding-top: calc(var(--hd-h) + clamp(24px, 4vh, 48px)); }
body.hero--2 .hero__text { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
body.hero--2 .hero__h { grid-column: 1 / -1; }
body.hero--2 .hero__intro { grid-column: 1 / 6; margin-top: 32px; }
body.hero--2 .hero__acts { grid-column: 8 / 13; justify-content: flex-end; margin-top: 32px; }
body.hero--2 .cyl { left: 0; top: auto; height: var(--rise-h, 58%); }

/* ── the work: one project's name at the foot, the screens round you ── */
.work__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding-bottom: clamp(24px, 3.2vh, 40px); pointer-events: none; }
.gbar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% + 120px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 80%, transparent) 42%, color-mix(in srgb, var(--bg) 96%, transparent) 70%); }
.gbar__in { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: last baseline; padding-top: 24px; }
.gbar__in::before { content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); height: 1px; background: var(--line); }
.gbar__count { grid-column: 1 / 4; display: flex; align-items: baseline; gap: 16px; font-family: var(--f-l); font-weight: var(--w-l); font-size: 13px; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.gbar__no { color: var(--accent); min-width: 2ch; }
body.colour--2 .gbar__no { color: var(--ink); }
.gbar__line { position: relative; align-self: center; width: clamp(64px, 8vw, 128px); height: 1px; background: var(--line-2); }
.gbar__line i { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.gbar__projs { grid-column: 4 / 10; display: grid; justify-items: center; text-align: center; min-width: 0; }
.gp { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; min-width: 0; visibility: hidden; transition: visibility 0s .6s; }
.gp.is-on { visibility: visible; transition: none; }
.gp > * { overflow: hidden; }
.gp__r { display: block; transform: translateY(105%); transition: transform .9s var(--ease-x); }
.gp.is-on .gp__r { transform: none; }
.gp__what .gp__r { transition-delay: .06s; }
.gp__name { font-size: calc(clamp(30px, 3.4vw, 56px) * var(--ds)); line-height: 1.08; padding-bottom: .06em; white-space: nowrap; }
.gp__what { margin-top: 8px; font-family: var(--f-l); font-weight: var(--w-l); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.gbar__nav { grid-column: 10 / 13; justify-self: end; display: flex; align-items: baseline; gap: 8px; }
.gbar__act { display: grid; justify-items: end; margin-right: 8px; }
.gbar__go { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease-x), transform .6s var(--ease-x), visibility 0s .4s; }
.gbar__go.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity .5s var(--ease-x) .1s, transform .7s var(--ease-x) .1s, visibility 0s; }
.gbar .btn { --h: 48px; }
body.comp--1 .gbar .btn .btn__c { width: 34px; height: 34px; }
body.comp--1 .gbar .btn { padding-left: 22px; padding-right: 7px; }
body.comp--4 .gbar .btn { padding: 0 24px; }
.gbar__tag { align-self: center; }
.gbar__duo { display: inline-flex; align-items: center; gap: 12px; }   /* ASG: says it is a concept, beside its page link */
.gbar__arrow { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; cursor: pointer; color: var(--ink);
  border: 1px solid var(--sec-line); background: var(--sec-bg); transition: border-color .35s, background-color .35s, color .35s, transform .35s var(--ease-q), opacity .35s; }
body.comp--1 .gbar__arrow, body.comp--4 .gbar__arrow { background: linear-gradient(var(--sec-bg), var(--sec-bg)), color-mix(in srgb, var(--bg) 70%, transparent); }
/* over the moving field a blur behind the glass would be redrawn every frame: the bar's glass is drawn without it */
.gbar .btn { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.comp--1 .gbar .btn--sec, body.comp--4 .gbar .btn--sec { background: linear-gradient(var(--sec-bg), var(--sec-bg)), color-mix(in srgb, var(--bg) 70%, transparent); }
body.comp--2 .gbar__arrow { background: var(--surf-2); border-color: transparent; color: var(--ink); }
body.comp--3 .gbar__arrow { border-radius: 4px; background: transparent; }
.gbar__arrow:hover { border-color: var(--ink); transform: translateY(-2px); }
body.comp--2 .gbar__arrow:hover { background: var(--ink); color: var(--bg); }
body.comp--3 .gbar__arrow:hover { background: var(--ink); color: var(--bg); }
.gbar__arrow[aria-disabled="true"] { opacity: .32; cursor: default; transform: none; border-color: var(--sec-line); }
body.comp--3 .chip.gbar__tag { border-radius: 4px; }
/* the concept's label, on each of its screens in the field */
.fchips { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fchip { position: absolute; left: 0; top: 0; height: 26px; padding: 0 10px; font-size: 12px; opacity: 0; will-change: transform, opacity; transition: opacity .25s ease-out;
  background: color-mix(in srgb, var(--bg) 94%, #000); border-color: rgba(255,255,255,.22); }   /* solid: it sits on pale screens too */
@media (max-width: 1000px) {
  .gbar__in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t t" "c n"; row-gap: 16px; padding-top: 18px; align-items: center; }
  .gbar__projs { grid-area: t; }
  .gbar__count { grid-area: c; align-items: center; }
  .gbar__nav { grid-area: n; align-items: center; gap: 6px; }
}
@media (max-width: 760px) {
  .gp__name { font-size: calc(30px * var(--ds)); }
  .gp__what { font-size: 11.5px; margin-top: 6px; }
  .gbar__line { width: 40px; }
  .gbar .btn { --h: 44px; }
  .gbar__arrow { width: 44px; height: 44px; }
  .gbar__act { margin-right: 4px; }
  body.comp--1 .gbar .btn { padding-left: 16px; padding-right: 5px; }
  body.comp--4 .gbar .btn { padding: 0 18px; }
}
/* round 23 · a phone: the bar under the work was wider than the screen (the next arrow fell off the edge). The button now
   sits between the two arrows, the counter gives up its room, and the concept says so under its name */
.gp__concept { display: none; }
@media (max-width: 600px) {
  .gbar__in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "t t t" "p a n"; column-gap: 12px; }
  .gbar__count { display: none; }
  .gbar__nav { display: contents; }
  .gbar__act { grid-area: a; justify-self: center; justify-items: center; margin: 0; }
  #gPrev { grid-area: p; } #gNext { grid-area: n; }
  .gbar__duo .gbar__tag { display: none; }
  .gp__concept { display: inline; }
}

/* ── phone: the heading above, the ring below it ── */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  .hero__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; align-content: start; padding-top: calc(var(--hd-h) + 16px); }
  .hero__text, body.hero--2 .hero__text { grid-column: 1 / -1; }
  body.hero--2 .hero__grid { padding-top: calc(var(--hd-h) + 16px); }
  body.hero--2 .hero__intro { margin-top: 16px; }
  body.hero--2 .hero__text { display: block; }
  .hero__intro { margin-top: 16px; font-size: 16px; }
  .hero__acts, body.hero--2 .hero__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }
  .hero__acts .btn { --h: 52px; padding-inline: 16px; }
  body.comp--1 .hero__acts .btn { padding: 0 6px 0 18px; justify-content: space-between; }
  body.comp--1 .hero__acts .btn__c { width: 36px; height: 36px; }
  .cyl, body.hero--1 .cyl { left: 0; top: auto; height: var(--rise-h, 46%); }
  .hero__time { display: none; }
}
@media (max-width: 380px) { .hero__acts .btn { padding-inline: 12px; font-size: 15px; } }

/* ── the still version (reduced motion, or no GPU): one section after another ── */
.wlist { display: none; }
html.flat .stage { position: relative; height: auto; overflow: visible; }
html.flat .room { position: relative; inset: auto; visibility: visible; pointer-events: auto; }
html.flat .hero { height: 100vh; height: 100svh; min-height: 640px; max-height: 1100px; overflow: hidden; }
html.flat .field, html.flat .gbar, html.flat .fchips { display: none; }
html.flat .work { padding-block: clamp(72px, 9vw, 144px); }
html.flat .work__h { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; max-width: 14ch; margin: 0 0 64px; }
html.flat .work__h { margin-left: max(var(--gut), calc((100vw - 1440px) / 2 + var(--gut))); }
html.flat .wlist { display: grid; gap: clamp(64px, 8vw, 128px); }
.wl { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.wl__vis { grid-column: 1 / 9; position: relative; padding-right: 9%; }
.wl__d { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #000; border: 6px solid #0B0C0E;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 48px 96px -40px color-mix(in srgb, var(--bg) 30%, #000); }
.wl__p { position: absolute; right: 0; bottom: -6%; width: 22%; aspect-ratio: 390 / 844; overflow: hidden; border-radius: 16% / 7.4%; background: #000; border: 4px solid #0B0C0E;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 32px 64px -24px color-mix(in srgb, var(--bg) 30%, #000); }
.wl__img, .wl__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wl__film { display: none; }
body.work--2 .wl__film { display: block; }
body.work--2 .wl__img { display: none; }
body.work--2 .wl[data-p="asg"] .wl__img { display: block; }
body.work--3 .wl__p { display: none; }
body.work--3 .wl__vis { grid-column: 1 / -1; padding-right: 0; }
body.work--3 .wl__txt { grid-column: 1 / 8; margin-top: 32px; }
.wl__txt { grid-column: 9 / 13; }
.wl__name { font-family: var(--f-d); font-weight: var(--w-d); letter-spacing: var(--t-d); font-size: calc(clamp(30px, 3vw, 48px) * var(--ds)); line-height: 1.08; }
.wl__what { margin-top: 12px; font-family: var(--f-l); font-weight: var(--w-l); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.wl__line { margin-top: 16px; color: var(--muted); max-width: 40ch; }
.wl__act { margin-top: 24px; }
.wl__duo { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
@media (max-width: 899px) {
  .wl { grid-template-columns: 1fr; }
  .wl__vis, .wl__txt, body.work--3 .wl__vis, body.work--3 .wl__txt { grid-column: 1; }
  .wl__txt { margin-top: 48px; }
}

/* ── forms ──────────────────────────────────────────────────── */
.form { display: grid; gap: 20px; }
.fld { display: grid; gap: 8px; min-width: 0; }
.fld__l { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.4; }
.fld__opt { color: var(--muted); font-weight: 400; }
.fld__i { width: 100%; height: 54px; padding: 0 var(--in-pad); border-radius: var(--in-r); background: var(--in-bg); border: var(--in-bw) solid var(--in-line); color: var(--ink); font-size: 17px; outline: none; transition: border-color .25s, box-shadow .25s; }
body.comp--3 .fld__i { border-bottom: 1px solid var(--line-2); }
.fld__i--ta { height: auto; min-height: 112px; padding-block: 14px; resize: vertical; line-height: 1.5; }
.fld__i:hover { border-color: var(--line-2); }
.fld__i:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent); }
body.comp--3 .fld__i:focus { box-shadow: 0 1px 0 0 var(--focus); border-bottom-color: var(--focus); }
.fld__i[aria-invalid="true"] { border-color: var(--err); }
body.comp--3 .fld__i[aria-invalid="true"] { border-bottom-color: var(--err); }
.fld__e { font-size: 15px; color: var(--err); line-height: 1.4; }
.fld__e:empty { display: none; }
.form__end { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; }
.form__note { color: var(--muted); font-size: 16px; }
.sent:empty { display: none; }
.sent__p { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; outline: none; }
.sent__p::before { content: ""; display: block; width: 32px; height: 2px; background: var(--accent); margin-bottom: 24px; }

/* ── sections ───────────────────────────────────────────────── */
.sec { padding-block: clamp(72px, 11vw, 176px); }
.sec__h { max-width: 18ch; }

/* play buttons (reduced motion only) */
.play { position: absolute; z-index: 4; right: 16px; top: 16px; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--ink); cursor: pointer; font-family: var(--f-l); font-size: 14px; font-weight: 500; }
.play__i { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.play[aria-pressed="true"] .play__i { width: 9px; height: 12px; border: 0; box-shadow: inset 3px 0 0 currentColor, inset -3px 0 0 currentColor; }
.hero .play { top: auto; bottom: 24px; right: clamp(20px, 3.5vw, 56px); }

/* ── 3 · what clients say ───────────────────────────────────── */
.words__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; margin-bottom: 64px; }
.words__head .sec__h { grid-column: 1 / 8; }
.review-note { grid-column: 9 / 13; justify-self: end; max-width: 34ch; display: flex; gap: 12px; align-items: baseline; font-size: 13px; line-height: 1.45; color: var(--muted); padding: 12px 16px; border: 1px dashed var(--line-2); border-radius: 12px; }
.review-note::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translateY(-1px); }
.quote { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; padding-block: clamp(64px, 8vw, 128px); border-top: 1px solid var(--line); }
.quote__no { grid-column: 1 / 2; font-family: var(--f-l); font-size: 13px; letter-spacing: .04em; color: var(--accent); padding-top: 1em; }
body.colour--2 .quote__no { color: var(--muted); }
.quote__q { grid-column: 2 / 12; }
.quote__q p { font-size: calc(clamp(30px, 4.4vw, 72px) * var(--ds2)); line-height: 1.14; letter-spacing: var(--t-d); text-wrap: balance; }
.quote__by { grid-column: 2 / 12; display: flex; align-items: center; gap: 16px; font-family: var(--f-l); font-size: 15px; font-weight: var(--w-l); text-transform: var(--tt-l); letter-spacing: var(--ls-l); color: var(--muted); }
.quote__by::before { content: ""; width: 48px; height: 1px; background: var(--accent); }
.quote--flip .quote__q, .quote--flip .quote__by { grid-column: 3 / 13; }
.quote--flip .quote__no { grid-column: 2 / 3; }
.phone { position: relative; overflow: hidden; background: #000; border-radius: 26px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 5px #08090A, 0 0 0 6px rgba(255,255,255,.14); }
.phone video, .phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ── 4 · how it works ───────────────────────────────────────── */
.how .sec__h { margin-bottom: 64px; }
.steps-wrap { position: relative; }
.rail { position: absolute; left: 5px; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.rail__fill { position: absolute; inset: 0; background: var(--accent); transform-origin: 50% 0; transform: none; }
html.motion .rail__fill { transform: scaleY(0); }
html.clean .rail__fill { transform: none; }
.steps { display: grid; }
.step { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: baseline; padding: 40px 0 40px 48px; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__dot { position: absolute; left: 0; top: 52px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .4s, box-shadow .4s; }
.step.is-lit .step__dot, html:not(.motion) .step__dot, html.clean .step__dot { background: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); }
.step__no { grid-column: 1 / 2; display: block; font-family: var(--f-l); font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--muted); }
.step__t { grid-column: 2 / 7; font-size: calc(clamp(24px, 2.4vw, 38px) * var(--ds2)); line-height: 1.15; }
.step__p { grid-column: 7 / 13; color: var(--muted); max-width: 52ch; }

/* ── 5 · made to be easy to say yes to ──────────────────────── */
.why .sec__h { max-width: 13ch; }
.yes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.yes__card { display: flex; flex-direction: column; padding: 12px; overflow: hidden; }
.yes__card--a { grid-column: 1 / 8; } .yes__card--b { grid-column: 8 / 13; }
.yes__card--c { grid-column: 1 / 6; } .yes__card--d { grid-column: 6 / 13; }
.yes__card--e { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.yes__card--e .vis { grid-column: 1 / 8; }
.yes__card--e .yes__txt { grid-column: 8 / 13; padding: 24px 24px 24px 0; }
.vis { position: relative; overflow: hidden; border-radius: max(calc(var(--card-r) - 8px), 2px); background: color-mix(in srgb, var(--bg) 70%, #ffffff 4%); height: clamp(260px, 26vw, 400px); container-type: size; }
.yes__card--c .vis, .yes__card--d .vis, .yes__card--e .vis { height: clamp(240px, 22vw, 330px); }
.yes__txt { padding: 24px 16px 16px; }
.yes__t { font-size: calc(clamp(22px, 1.8vw, 28px) * var(--ds2)); line-height: 1.2; }
.yes__p { margin-top: 12px; color: color-mix(in srgb, var(--muted) 84%, var(--ink)); max-width: 52ch; }
.vf { position: absolute; overflow: hidden; border-radius: 10px; box-shadow: 0 40px 80px -36px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.09); }
.vf img { width: 100%; height: 100%; object-fit: cover; }
/* one next step: the page falls away and leaves its one button */
.vf--desk { left: 50%; top: 50%; width: min(90cqw, 134cqh); aspect-ratio: 16 / 10; transform: translate(-50%, -50%); }   /* fits any box the layouts give it */
.vf__veil { display: none; }
.vf__ring { position: absolute; left: 66.875%; top: 23.67%; width: 9.86%; height: 4.22%; border-radius: 3px; outline: 2px solid var(--accent); outline-offset: 3px;
  box-shadow: 0 0 0 200vmax color-mix(in srgb, var(--bg) 62%, transparent); opacity: 0; }
.vf__ptr { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,.6), 0 6px 14px rgba(0,0,0,.4); transform: translate(20cqw, 80cqh); opacity: 0; }
.vf--desk { container-type: size; }
.is-in .vf__ring { animation: ring 6.5s cubic-bezier(.22,1,.36,1) infinite; }
.is-in .vf__ptr { animation: ptr 6.5s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes ring { 0%, 34% { opacity: 0; } 46%, 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ptr { 0% { opacity: 0; transform: translate(18cqw, 86cqh) scale(1); } 10% { opacity: 1; } 40% { transform: translate(71cqw, 24cqh) scale(1); } 44% { transform: translate(71cqw, 24cqh) scale(.7); } 48% { transform: translate(71cqw, 24cqh) scale(1); } 86% { opacity: 1; transform: translate(71cqw, 24cqh) scale(1); } 100% { opacity: 0; transform: translate(71cqw, 24cqh); } }
html.still .vf__ring, html.clean .vf__ring { opacity: 1; animation: none; }
/* phone first */
.vf--ghost { left: 8%; top: 14%; width: 64%; aspect-ratio: 16 / 10; opacity: .32; }
.vis--phone .phone { position: absolute; right: 14%; top: 50%; height: 84%; aspect-ratio: 390 / 844; transform: translateY(-50%); border-radius: 24px; }
/* best work, shown large */
.vf--grow { left: 50%; top: 50%; width: 100%; height: 100%; border-radius: 0; transform: translate(-50%, -50%) scale(.46); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.1); }
.vf--grow img { object-position: 22% 70%; transform: scale(1.5); transform-origin: 22% 70%; }
.is-in .vf--grow { animation: grow 7s cubic-bezier(.65,0,.35,1) infinite; }
.is-in .vf--grow img { animation: growi 7s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes grow { 0%, 12% { transform: translate(-50%, -50%) scale(.46); border-radius: 14px; } 46%, 86% { transform: translate(-50%, -50%) scale(1); border-radius: 0; } 100% { transform: translate(-50%, -50%) scale(.46); border-radius: 14px; } }
@keyframes growi { 0%, 12% { transform: scale(1.5); } 46%, 86% { transform: scale(1); } 100% { transform: scale(1.5); } }
html.still .vf--grow, html.clean .vf--grow { transform: translate(-50%, -50%) scale(1); animation: none; }
html.still .vf--grow img, html.clean .vf--grow img { transform: none; animation: none; }
/* quick on a phone: the page paints in from the top, fast */
.vis--fast .phone { position: absolute; left: 50%; top: 50%; height: 86%; aspect-ratio: 390 / 844; transform: translate(-50%, -50%); border-radius: 24px; }
.paint { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(6, 1fr); }
.paint i { background: linear-gradient(90deg, var(--surf-2), color-mix(in srgb, var(--surf-2) 70%, #ffffff 8%), var(--surf-2)); transform-origin: 50% 0; transform: scaleY(0); }
.paint__bar { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.is-in .paint i { animation: paint 5s cubic-bezier(.22,1,.36,1) infinite; }
.is-in .paint i:nth-child(2) { animation-delay: .06s; } .is-in .paint i:nth-child(3) { animation-delay: .12s; } .is-in .paint i:nth-child(4) { animation-delay: .18s; } .is-in .paint i:nth-child(5) { animation-delay: .24s; } .is-in .paint i:nth-child(6) { animation-delay: .3s; }
.is-in .paint__bar { animation: pbar 5s cubic-bezier(.22,1,.36,1) infinite; }
@keyframes paint { 0%, 6% { transform: scaleY(1); } 22%, 100% { transform: scaleY(0); } }
@keyframes pbar { 0% { transform: scaleX(0); opacity: 1; } 18% { transform: scaleX(1); opacity: 1; } 26%, 100% { transform: scaleX(1); opacity: 0; } }
/* tested: one page on three screens, each ticked */
/* round 22b: the three stand on one line and all fit, sized from the box (--u), so no screen is cut at the bottom; the
   tablet shows the site's own tablet layout, captured at 834 x 1112 */
.devs { position: absolute; inset: 0; container-type: size; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 9cqh; --u: min(1cqh, .56cqw); }
.dev { position: relative; display: block; flex: none; }
.dev__s { display: block; width: 100%; height: 100%; overflow: hidden; background: #000; border-radius: 8px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.12); }
.dev__s img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dev--d { height: calc(66 * var(--u)); aspect-ratio: 16 / 10; z-index: 1; }
.dev--t { height: calc(58 * var(--u)); aspect-ratio: 3 / 4; margin-left: calc(-8 * var(--u)); z-index: 2; }
.dev--t .dev__s { border-radius: 10px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.85), 0 0 0 4px #08090A, 0 0 0 5px rgba(255,255,255,.14); }
.dev--p { height: calc(46 * var(--u)); aspect-ratio: 390 / 844; margin-left: calc(-4 * var(--u)); z-index: 3; }
.dev--p .dev__s { border-radius: 12px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.85), 0 0 0 3px #08090A, 0 0 0 4px rgba(255,255,255,.14); }
.tick { position: absolute; right: -10px; top: -10px; width: 26px; height: 26px; }
.tick circle { fill: var(--accent); }
.tick path { fill: none; stroke: var(--bg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 0; }
.motion .tick { transform: scale(0); }
.motion .is-in .tick { animation: tickin 6s cubic-bezier(.34,1.56,.64,1) infinite; }
.motion .is-in .tick path { animation: tickp 6s ease infinite; }
.motion .is-in .dev--t .tick, .motion .is-in .dev--t .tick path { animation-delay: .5s; }
.motion .is-in .dev--p .tick, .motion .is-in .dev--p .tick path { animation-delay: 1s; }
@keyframes tickin { 0%, 8% { transform: scale(0); } 16%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes tickp { 0%, 14% { stroke-dashoffset: 16; } 24%, 100% { stroke-dashoffset: 0; } }
html.clean .tick { transform: none !important; animation: none !important; }
html.clean .tick path { stroke-dashoffset: 0 !important; animation: none !important; }

/* ── 6 · pricing ────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-top: 64px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 3.4vw, 48px); }
.plan--main { grid-column: 1 / 8; background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03) 60%), var(--card-bg); border-color: rgba(255,255,255,.16); }
body.comp--2 .plan--main { background: var(--surf-2); }
body.comp--3 .plan--main { background: transparent; border-color: var(--ink); }
.plan--main::before { content: ""; position: absolute; left: 32px; right: 32px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.plan--shop { grid-column: 8 / 13; background: transparent; box-shadow: none; border-color: var(--line-2); }
.plan__name { font-size: calc(clamp(24px, 1.8vw, 28px) * var(--ds2)); line-height: 1.2; }
.plan__price { margin-top: 24px; font-size: calc(clamp(64px, 8.4vw, 136px) * var(--ds)); line-height: 1; letter-spacing: var(--t-d); white-space: nowrap; font-variant-numeric: lining-nums; }
.plan__price--from { font-size: calc(clamp(44px, 4.6vw, 72px) * var(--ds)); line-height: 1.05; white-space: normal; }
.plan__from { display: block; font-family: var(--f-b); font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-bottom: 8px; }
.plan__under { margin-top: 16px; color: var(--muted); }
/* round 23: the website's offer price, the usual price struck through above it */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plan__deal { margin-top: 16px; }
.plan__tag { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 4px 12px; border-radius: 999px; font-family: var(--f-l); font-weight: var(--w-l); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.plan__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
body.comp--3 .plan__tag { border-radius: 4px; }
.plan__deal + .plan__price { margin-top: 16px; }
.plan__was { display: block; margin-bottom: 8px; font-family: var(--f-b); font-weight: 400; font-size: clamp(20px, 1.6vw, 24px); letter-spacing: 0; color: var(--muted); text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, var(--muted) 80%, transparent); }
.plan__list { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.plan--shop .plan__list { grid-template-columns: 1fr; }
.plan__list li { position: relative; padding: 14px 0 14px 32px; border-top: 1px solid var(--line); line-height: 1.45; }
.plan__list li::before { content: ""; position: absolute; left: 0; top: 16px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); }
.plan__list li::after { content: ""; position: absolute; left: 7px; top: 20px; width: 6px; height: 10px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.plan--shop .plan__list li::before { background: var(--muted); }
.plan__end { margin-top: auto; padding-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.plan__fine { flex: 1 1 260px; color: var(--muted); font-size: 15px; line-height: 1.5; }

/* ── 7 · questions ──────────────────────────────────────────── */
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.faq__h { grid-column: 1 / 5; max-width: 10ch; }
.qa { grid-column: 6 / 13; border-bottom: 1px solid var(--line); }
.qa__item { border-top: 1px solid var(--line); }
.qa__b { width: 100%; min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; background: none; border: 0; text-align: left; cursor: pointer; }
.qa__t { font-size: calc(clamp(20px, 1.6vw, 24px) * var(--ds2)); line-height: 1.3; transition: color .3s; }
.qa__b:hover .qa__t { color: var(--accent); }
body.colour--2 .qa__b:hover .qa__t { color: var(--ink); }
.qa__i { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform .4s cubic-bezier(.22,1,.36,1), background-color .3s; }
.qa__i::before, .qa__i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.qa__i::after { transform: rotate(90deg); }
.qa__item.is-open .qa__i { transform: rotate(180deg); background: rgba(255,255,255,.06); }
.qa__item.is-open .qa__i::after { transform: rotate(0deg); }
.qa__p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.22,1,.36,1); }
.qa__item.is-open .qa__p { grid-template-rows: 1fr; }
.qa__pi { overflow: hidden; }
.qa__pi p { padding: 0 64px 32px 0; color: var(--muted); max-width: 58ch; }
.qa__item:not(.is-open) .qa__pi { visibility: hidden; transition: visibility 0s .5s; }

/* ── 8 · enquiry ────────────────────────────────────────────── */
.enq__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 24px; align-items: start; padding-bottom: clamp(96px, 10vw, 160px); scroll-margin-top: 96px; }
.enq__grid .ft__h { position: relative; grid-column: 1 / -1; grid-row: 1; }
@media (min-width: 900px) { .enq__grid .ft__h .w:last-child { display: block; width: fit-content; } }   /* "out?" on its own line, the form beside it */
.enq__head { grid-column: 1 / 6; grid-row: 2; padding-top: 32px; }
.enq__intro { color: var(--muted); max-width: 30ch; }
.enq__card { grid-column: 7 / 13; grid-row: 1 / 3; align-self: start; padding: clamp(24px, 3.4vw, 48px); }

/* ── footer ─────────────────────────────────────────────────── */
.ft { padding: clamp(128px, 14vw, 220px) 0 32px; overflow: hidden; }
.ft::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 86%, #000000 14%) 30%); }
.ft__top { padding-bottom: clamp(64px, 7vw, 112px); }
.ft__h { max-width: none; }
.ft__mid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; padding: 48px 0 64px; border-top: 1px solid var(--line); }
.ft__nav { grid-column: 1 / 9; display: grid; justify-items: start; }
.ft__nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: calc(clamp(34px, 4.2vw, 68px) * var(--ds)); line-height: 1.12; color: var(--muted); transition: color .35s, transform .5s cubic-bezier(.22,1,.36,1); }
.ft__nav a:hover { color: var(--ink); transform: translateX(12px); }
.ft__aside { grid-column: 9 / 13; justify-self: end; display: grid; justify-items: end; gap: 16px; }
.ft__wa .lnk__l { font-size: 18px; }
.ft__name { font-size: 18vw; line-height: .9; white-space: nowrap; letter-spacing: -0.03em; margin: 0 0 0 -.04em; padding-bottom: .06em; color: var(--ink); }
.ft__base { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line); }
.ft__c, .ft__time { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; }
.ft__time time { color: var(--ink); }
.ft__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }

/* the pointer label over the films */
.tag-cursor { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; }
.tag-cursor span { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; margin: 16px 0 0 16px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); font-family: var(--f-l); font-size: 14px; font-weight: 500; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .35s cubic-bezier(.22,1,.36,1); }
body.comp--4 .tag-cursor span { background: color-mix(in srgb, var(--bg) 60%, #ffffff 18%); color: var(--ink); border: 1px solid rgba(255,255,255,.3); }
.tag-cursor.is-on span { opacity: 1; transform: none; }
/* over the ring: a round handle with two arrows */
.tag-cursor.is-drag span { width: 64px; height: 64px; padding: 0; margin: -32px 0 0 -32px; justify-content: center; border-radius: 50%; }
.tag-cursor.is-drag span svg { display: block; }

/* ── mid widths ─────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .yes__card--a, .yes__card--b, .yes__card--c, .yes__card--d { grid-column: span 6; }
  .plan--main, .plan--shop { grid-column: 1 / -1; }
  .faq__h { grid-column: 1 / 6; } .qa { grid-column: 6 / 13; }
}

/* ── phone ──────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .words__head, .quote, .why__grid, .faq__grid, .enq__grid, .ft__top, .ft__mid, .plans, .yes { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; }
  .words__head .sec__h, .review-note { grid-column: 1 / -1; justify-self: start; }
  .review-note { margin-top: 24px; }
  .how .sec__h { margin-bottom: 64px; }
  .step { grid-template-columns: 1fr; padding: 32px 0 32px 40px; row-gap: 12px; }
  .step__dot { top: 38px; }
  .step__no, .step__t, .step__p { grid-column: 1; }
  .yes { gap: 16px; }
  .yes__card--a, .yes__card--b, .yes__card--c, .yes__card--d, .yes__card--e { grid-column: 1 / -1; }
  .yes__card--e { display: flex; align-items: stretch; }   /* the wide layout centres it; in a column that shrank the picture to nothing */
  .yes__card--e .yes__txt { padding: 24px 16px 16px; }
  .vis, .yes__card--c .vis, .yes__card--d .vis, .yes__card--e .vis { height: 280px; }
  .plans { gap: 16px; }
  .plan--main, .plan--shop { grid-column: 1 / -1; }
  .plan__list { grid-template-columns: 1fr; }
  .plan--main::before { left: 24px; right: 24px; }
  .faq__h, .qa, .enq__head, .enq__card { grid-column: 1 / -1; }
  .faq__h { margin-bottom: 48px; max-width: 14ch; }
  .enq__head { position: static; grid-row: 2; padding-top: 24px; margin-bottom: 32px; }
  .enq__card { grid-row: 3; }
  .qa__pi p { padding-right: 0; }
  .ft__nav, .ft__aside { grid-column: 1 / -1; justify-self: start; justify-items: start; }
  .ft__aside { margin-top: 48px; }
  .ft__base { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 767px) {
  .form__end .btn, .plan__end .btn { width: 100%; }
  body.comp--1 .form__end .btn, body.comp--1 .plan__end .btn { justify-content: space-between; }
}

/* reduced motion without ?motion=1: a designed static page */
@media (prefers-reduced-motion: reduce) {
  html.still *, html.still *::before, html.still *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* labels set in uppercase faces take a smaller button size */
body.type--3 .btn, body.type--5 .btn, body.type--6 .btn { --btn-fs: 13px; }
body:not(.work--2) .wlist > .play { display: none; }

/* on a narrow phone the heading and both buttons stay; the intro gives its room to the ring of phones */
@media (max-width: 599px) { .hero__intro { display: none; } .hero__acts, body.hero--2 .hero__acts { margin-top: 24px; } }
.cyl__cap { top: calc(var(--cy, 52%) + var(--pw) * 1.05 + 20px); }
body.hero--2 .cyl__cap { top: calc(var(--cy, 52%) + var(--pw) * 1.13 + 14px); }

/* Work 3 · the screen floats over a full-bleed, softly blurred and darkened picture of that client's own site */
.wbg { position: absolute; inset: 0; display: none; pointer-events: none; overflow: hidden; }
body.work--3 .wbg { display: block; }
html.flat .wbg { display: none; }
.wbg i { position: absolute; inset: -6%; background: center / cover no-repeat; opacity: 0; will-change: opacity; }
.wbg i[data-p="wc"] { background-image: url("../_media/wc-sec-home-blur.jpg"); }
.wbg i[data-p="iag"] { background-image: url("../_media/iag-sec-range-blur.jpg"); }
.wbg i[data-p="asg"] { background-image: url("../_media/asg-sec-design-blur.jpg"); }
.wbg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 42%, color-mix(in srgb, var(--bg) 58%, transparent), color-mix(in srgb, var(--bg) 86%, transparent) 100%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 40%, transparent), transparent 30%, transparent 62%, color-mix(in srgb, var(--bg) 92%, transparent)); }

/* ── first paint: the page shows the ring at rest before any script has run ──────────────────────────────────────
   The ring's size comes from the script; until then these defaults follow the same rules, and the page's still of the
   three front phones (.cf--still) stands at the resting place. The script keeps the still until its own phones have
   their pictures, then takes it away. No phone is drawn before its picture has loaded: never a black slab. */
.cyl { --pw: min(14.5vw, 28.5vh, 300px); --rz: calc(var(--pw) * 1.35); --cp: calc(var(--pw) * 7); --cy: 50%; --tilt: 0deg; --th1: 51.43deg; }
body.hero--2 .cyl { --pw: min(16vw, calc((100vh - 520px) / 2.18), 300px); --rz: calc(var(--pw) * 2); --cp: calc(var(--pw) * 6.2); --cy: calc(22px + var(--pw) * 1.09); --cpo: calc(var(--cy) - var(--pw) * .8); --tilt: -7deg; --th1: 36deg; height: calc(100% - 436px); }
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  .cyl { --pw: min(32vw, calc((46vh - 56px) / 2.1), 200px); --cy: calc((46vh - 44px) / 2 + 4px); }
  body.hero--2 .cyl { --pw: min(30vw, calc((46vh - 60px) / 2.18), 200px); --cy: calc(14px + var(--pw) * 1.09); --tilt: -5deg; height: 46%; }
}
.cyl__ring { transform: translateZ(calc(var(--rz) * -1)) rotateX(var(--tilt)); }
.cf--still { transform: rotateY(var(--th, 0deg)) translateZ(var(--rz)); pointer-events: none; }
.cf--still.l { --th: calc(var(--th1) * -1); }
.cf--still.r { --th: var(--th1); }
.cf:not(.is-ok) { background: transparent; box-shadow: none; }
.cf:not(.is-ok) > *, .cf:not(.is-ok)::after { visibility: hidden; }

/* the work's bar belongs to the work room: until that room is the one in view, nothing of it shows (some of its parts
   set themselves visible, which would otherwise show through a hidden room) */
html:not(.flat) .room:not(.is-vis) .gbar, html:not(.flat) .room:not(.is-vis) .gbar *,
html:not(.flat) .room:not(.is-vis) .fchips, html:not(.flat) .room:not(.is-vis) .fchips * { visibility: hidden !important; }