/* Mr. Brightside, Variant C (4 Oct 2026). Page styles for /, /da/ and privacy.html (its chrome; round 10).
styles.css stays only for demo/ and 404.html. The scroll engine (assets/sc) is unedited; this file themes it.
Desktop (>= 1024px) reproduces the Figma frame 15:649 on a 1512 grid scaled by --u.
Phone and tablet (< 1024px) follow frame 16:115 on a 390 grid scaled by --u, as normal flow. */
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/InstrumentSerif-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/SpaceGrotesk-Variable.ttf") format("truetype"); font-weight: 300 700; font-display: swap; }
:root {
--butter: #F5EEDC; --butter-deep: #EBE1C8; --espresso: #28231F; --vermilion: #D84B32;
--periwinkle: #C6C9E8; --action: #C9432D; --white: #FFFFFF;
--serif: "Instrument Serif", Georgia, serif;
--sans: "Space Grotesk", Arial, sans-serif;
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--u: calc(min(100vw, 560px) / 390); /* phone grid unit */
--g: calc(20 * var(--u)); /* side gutter */
--nav-h: 75px;
/* scroll-craft tokens, in our palette */
--sc-canvas: var(--butter); --sc-surface: var(--butter-deep); --sc-ink: var(--espresso);
--sc-ink-soft: var(--espresso); --sc-accent: var(--vermilion); --sc-accent-ink: var(--white);
--sc-font-display: var(--serif); --sc-font-text: var(--sans);
}
@media (min-width: 1024px) {
:root { --u: calc(min(100vw, 1600px) / 1512); --g: calc(48 * var(--u)); --nav-h: calc(88 * var(--u)); }
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--nav-h); }
body {
margin: 0; background: var(--butter); color: var(--espresso);
font-family: var(--sans); font-size: 17px; line-height: 1.5; letter-spacing: 0;
-webkit-font-smoothing: antialiased; overflow-x: clip;
}
p, h1, h2, h3, figure, blockquote, ul, ol { margin: 0; }
h1, h2, h3 { font-weight: 400; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--espresso); color: var(--butter); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
:root { caret-color: var(--espresso); accent-color: var(--espresso); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 120; padding: 10px 14px; background: var(--espresso); color: var(--butter); text-decoration: none; }
.skip:focus { top: 12px; }
@media (max-width: 1023.98px) { .d { display: none !important; } }
@media (min-width: 1024px) { .m { display: none !important; } }
/* ---------- Type ---------- */
.c-grot { font-family: var(--sans); font-weight: 700; text-transform: uppercase; line-height: 0.82; letter-spacing: -0.05em; display: block; }
/* The 82% rule: each hand-broken display line is scaled on its own, never the container. */
.c-dl { display: block; width: 121.95122%; transform: scaleX(0.82); transform-origin: left center; font-family: var(--serif); font-weight: 400; line-height: 0.85; white-space: nowrap; }
.c-dl > span { display: inline-block; }
.c-dl--c { margin-left: -10.97561%; transform-origin: center; text-align: center; }
.c-dl--inline { display: inline-block; width: auto; }
.c-statement { font-family: var(--serif); font-size: calc(30 * var(--u)); line-height: 1.08; }
.c-statement.d > span, .c-pull__quote p > span { display: block; white-space: nowrap; }
.c-h2 { font-family: var(--serif); font-size: calc(40 * var(--u)); line-height: 1; }
.c-h3 { font-family: var(--sans); font-weight: 700; font-size: calc(20 * var(--u)); line-height: 1.2; letter-spacing: -0.005em; }
.c-body-l { font-size: calc(16 * var(--u)); line-height: 1.55; }
.c-label-serif { font-family: var(--serif); font-size: calc(28 * var(--u)); line-height: 0.88; }
.c-eyebrow { display: flex; gap: 10px; align-items: center; font-family: var(--sans); font-weight: 500; font-size: 13px; line-height: 1.2; letter-spacing: 0.18em; text-transform: uppercase; }
/* Numerals are decoration (aria-hidden; the name beside them carries the meaning), so they keep the comp's vermilion. */
.c-eyebrow__n { color: var(--vermilion); }
.c-kicker { font-weight: 500; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; }
/* Line masks for entrances: the line's inner box rises from below its own edge. */
.c-mask { display: block; overflow: hidden; padding-block: 0.06em 0.16em; margin-block: -0.06em -0.16em; }
.c-mask > * { display: block; }
/* ---------- Buttons ---------- */
.c-btn { display: inline-flex; text-decoration: none; height: 60px; -webkit-tap-highlight-color: transparent; transition: transform 160ms var(--ease-out); }
.c-btn__arrow { width: 60px; display: grid; place-items: center; background: var(--espresso); color: var(--butter); }
.c-btn__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease-out); }
.c-btn__label { display: flex; align-items: center; padding: 0 26px; background: var(--action); color: var(--white); font-weight: 500; font-size: 16px; line-height: 1; white-space: nowrap; }
.c-btn--s { height: 44px; }
.c-btn--s .c-btn__arrow { width: 44px; }
.c-btn--s .c-btn__arrow svg { width: 18px; height: 18px; }
.c-btn--s .c-btn__label { padding: 0 18px; font-size: 14px; }
.c-btn--dark .c-btn__arrow { background: var(--butter); color: var(--espresso); }
.c-btn:active { transform: scale(0.97); }
/* Hover (after Extrafazant's button): the arrow box swaps ends. It folds away on the left, its twin (c.js) unfolds on the
right and the label slides across. Nothing leaves the button's box, so a reveal mask never cuts it (Qasim, 4 Oct).
Flat: no shadow, no glow, no colour change. */
.c-btn { position: relative; overflow: hidden; flex-shrink: 0; } /* overflow:hidden drops the flex min-width, so a row would squeeze the label (round 9: cut to "Book a" under reduced motion) */
.c-btn > .c-btn__arrow:not(.c-btn__arrow--end) { transform-origin: left center; }
.c-btn__arrow--end { position: absolute; top: 0; right: 0; height: 100%; transform: scaleX(0); transform-origin: right center; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.c-btn__arrow, .c-btn__label { transition: transform 320ms var(--ease-out); }
.c-btn:hover > .c-btn__arrow:not(.c-btn__arrow--end) { transform: scaleX(0); }
.c-btn:hover > .c-btn__label { transform: translateX(calc(-1 * var(--aw, 60px))); }
.c-btn:hover > .c-btn__arrow--end { transform: scaleX(1); }
}
/* The link component (Figma Link, page 01): label, arrow box, and a vermilion scribble from the first letter to the box's
right edge. The wave is stretched to the link's width (preserveAspectRatio none; the stroke stays 2px). Without
"none" the SVG kept its 120x10 ratio inside the 100% x 10px box and drew a short wave centred under the middle words. */
.c-scribble { position: relative; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; font-size: 22px; text-decoration: none; padding-bottom: 12px; min-height: 44px; }
.c-scribble::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; pointer-events: none;
background: url("data:image/svg+xml;utf8,") 0 0 / 100% 100% no-repeat; }
/* Hover redraws the scribble left to right (Extrafazant's link): the line is always there at rest, the hand draws it again. */
@keyframes c-redraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .c-scribble:hover::after { animation: c-redraw 560ms var(--ease-out); } }
.c-scribble--btn { padding: 0 0 12px; border: 0; background: none; color: inherit; font-family: var(--sans); font-weight: 400; line-height: 1.5; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.c-scribble--btn[aria-expanded="true"] .c-scribble__box svg { rotate: 180deg; }
.c-scribble__box { width: 22px; height: 22px; display: grid; place-items: center; background: var(--vermilion); color: var(--white); }
.c-scribble__box svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* ---------- Stickers ---------- */
.c-sticker { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border: 2px solid var(--espresso); border-radius: 999px; font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.005em; white-space: nowrap; rotate: var(--r, 0deg); z-index: 3; }
.c-sticker__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--vermilion); flex: none; }
.c-sticker--vermilion { background: var(--vermilion); color: var(--white); }
.c-sticker--vermilion .c-sticker__dot { background: var(--white); }
.c-sticker--periwinkle { background: var(--periwinkle); color: var(--espresso); }
.c-sticker--periwinkle .c-sticker__dot { background: var(--espresso); }
.c-sticker--butter { background: var(--butter); color: var(--espresso); }
.c-sticker--espresso { background: var(--espresso); color: var(--butter); }
/* ---------- Photos ---------- */
.c-ph { overflow: hidden; background: var(--butter-deep); }
.c-ph img, .c-ph picture { width: 100%; height: 100%; object-fit: cover; }
/* ---------- Nav ---------- */
.c-nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); padding: 0 var(--g); display: flex; align-items: center; justify-content: space-between; background: var(--butter); transition: transform 240ms var(--ease-out); }
.c-nav.is-hidden { transform: translateY(-100%); transition-duration: 200ms; }
.c-nav__mark img { width: calc(120 * var(--u)); height: auto; }
.c-nav__links { display: none; }
.c-nav__end { display: flex; align-items: center; gap: 12px; }
.c-nav__end > .c-btn, .c-nav__end > .c-lang { display: none; }
.c-nav__menu { min-height: 44px; padding: 0 17px; border: 1px solid var(--espresso); border-radius: 999px; background: transparent; color: var(--espresso); font: 400 15px/1 var(--sans); cursor: pointer; }
@media (min-width: 1024px) {
.c-nav__mark img { width: calc(170 * var(--u)); }
.c-nav__links { display: flex; gap: 32px; padding: 12px 28px; border: 1px solid var(--espresso); border-radius: 999px; font-size: 15px; position: absolute; left: 50%; transform: translateX(-50%); }
.c-nav__links a { text-decoration: none; }
.c-nav__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.c-nav__end > .c-btn, .c-nav__end > .c-lang { display: inline-flex; }
.c-nav__menu { display: none; }
}
.c-lang { position: relative; }
.c-lang .lang__btn { min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--espresso); border-radius: 999px; background: transparent; color: var(--espresso); font: 500 13px/1 var(--sans); letter-spacing: 0.12em; cursor: pointer; }
.c-lang .lang__menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 140px; padding: 6px 0; background: var(--butter); border: 1px solid var(--espresso); z-index: 60; }
.c-lang .lang__menu[hidden] { display: none; }
.c-lang .lang__menu a { display: block; padding: 10px 16px; text-decoration: none; font-size: 15px; }
.c-lang .lang__menu a[aria-current="true"] { text-decoration: underline; text-underline-offset: 4px; }
.c-lang--menu .lang__menu { right: auto; left: 0; top: auto; bottom: calc(100% + 8px); }
.c-menu { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 18px var(--g) 32px; border: 0; background: var(--butter); color: var(--espresso); }
.c-menu[open] { display: flex; flex-direction: column; gap: 32px; }
.c-menu::backdrop { background: var(--butter); }
.c-menu__top { display: flex; justify-content: space-between; align-items: center; }
.c-menu__top img { width: 120px; }
.c-menu__links { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.c-menu__links a { font-family: var(--serif); font-size: 44px; line-height: 1.1; text-decoration: none; padding: 4px 0; }
.c-menu .c-lang { margin-top: auto; }
/* ---------- Sections, phone first ---------- */
.c-sec { padding: calc(72 * var(--u)) var(--g); }
.c-hero { padding: calc(var(--nav-h) + 28 * var(--u)) var(--g) 0; position: relative; }
.c-hero__l1 .c-grot { font-size: calc(52 * var(--u)); }
.c-hero__l2 .c-dl, .c-hero__l3 .c-dl { font-size: calc(81 * var(--u)); }
.c-hero__copy { margin-top: calc(20 * var(--u)); }
.c-hero__copy .c-body-l { max-width: 46ch; }
.c-hero__actions { margin-top: calc(20 * var(--u)); display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.c-hero__cards { position: relative; height: calc(330 * var(--u)); margin-top: calc(20 * var(--u)); }
.c-card { position: absolute; }
.c-card__frame { position: relative; overflow: hidden; }
.c-card--dunes { left: 0; top: calc(40 * var(--u)); width: calc(280 * var(--u)); transform-origin: center; }
.c-card--dunes .c-card__frame { padding: calc(10 * var(--u)); background: var(--butter-deep); rotate: calc(var(--rot, 1) * 3deg); }
.c-card--dunes img { aspect-ratio: 520 / 360; width: 100%; object-fit: cover; }
.c-card--gate { left: calc(210 * var(--u)); top: 0; width: calc(140 * var(--u)); z-index: 2; }
.c-card--gate .c-card__frame { padding: calc(8 * var(--u)); background: var(--periwinkle); rotate: calc(var(--rot, 1) * -6deg); }
.c-card--gate img { aspect-ratio: 230 / 290; width: 100%; object-fit: cover; }
.c-hero__sticker { --r: 5deg; left: calc(50 * var(--u)); top: calc(268 * var(--u)); font-size: calc(17 * var(--u)); padding: calc(10 * var(--u)) calc(20 * var(--u)); }
.c-marquee { margin: 0 calc(-1 * var(--g)); height: 56px; background: var(--espresso); color: var(--butter); overflow: hidden; display: flex; align-items: center; }
.c-marquee__track { display: block; white-space: nowrap; font-weight: 700; text-transform: uppercase; font-size: 30px; letter-spacing: -0.05em; line-height: 0.82; will-change: transform; }
.c-marquee__track i { font-style: normal; display: inline-block; margin: 0 0.35em; font-weight: 400; }
.c-wwd .c-eyebrow { margin-bottom: calc(24 * var(--u)); }
.c-wwd__kitchen { margin: calc(24 * var(--u)) 0; aspect-ratio: 350 / 260; }
.c-wwd__more { font-family: var(--sans); font-size: 17px; line-height: 1.5; }
.c-wyg .c-eyebrow, .c-who .c-eyebrow, .c-beyond .c-eyebrow, .c-wwa .c-eyebrow { margin-bottom: calc(20 * var(--u)); }
.c-cols { display: grid; gap: calc(28 * var(--u)); margin-top: calc(32 * var(--u)); }
.c-col__ph { aspect-ratio: 350 / 240; margin-bottom: 12px; }
.c-col__n { color: var(--espresso); font-weight: 500; font-size: 13px; letter-spacing: 0.18em; margin-bottom: 6px; }
.c-rules { margin-top: 12px; }
.c-rules li { border-top: 1px solid var(--espresso); padding: 12px 0; font-size: 15px; line-height: 1.5; }
.c-kicker { margin-bottom: 8px; }
.c-product { background: var(--espresso); color: var(--butter); }
.c-product__stage { padding: calc(72 * var(--u)) var(--g); display: flex; flex-direction: column; align-items: center; text-align: center; }
.c-product__title { display: flex; align-items: flex-end; gap: calc(10 * var(--u)); margin: calc(20 * var(--u)) 0 calc(28 * var(--u)); }
.c-product__title .c-grot { font-size: calc(56 * var(--u)); }
.c-product__title .c-dl { font-size: calc(93 * var(--u)); line-height: 0.75; }
.c-stack { position: relative; width: 100%; max-width: 560px; aspect-ratio: 350 / 420; }
.c-stack__back { display: none; position: absolute; inset: 0; }
.c-stack__front { position: absolute; inset: 0; border: 10px solid var(--butter); background: var(--espresso); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; }
.c-stack__label { font-weight: 500; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--butter); }
.c-stack__text { font-family: var(--serif); font-size: calc(26 * var(--u)); line-height: 1.05; }
.c-stack__text span { display: block; }
.c-product__cta { margin-top: calc(28 * var(--u)); }
.c-who__sub { margin-top: 16px; }
.c-beyond { background: var(--periwinkle); }
.c-beyond .c-eyebrow__n { color: var(--espresso); } /* vermilion on periwinkle fails, even as decoration */
.c-beyond__list { margin-top: 24px; }
.c-beyond__list li { border-top: 1px solid var(--espresso); padding: 16px 0 18px; display: grid; gap: 16px; }
.c-beyond__list p { font-size: 15px; line-height: 1.6; }
.c-beyond__list strong { display: block; font-size: 17px; font-weight: 700; margin-bottom: 8px; line-height: 1.4; }
.c-beyond__list img { width: 100%; height: 100%; object-fit: cover; }
.c-how { background: var(--butter); }
.c-how__stage { padding: calc(var(--nav-h) * 0 + 64 * var(--u)) var(--g) calc(40 * var(--u)); display: flex; flex-direction: column; }
.c-how__title { margin: calc(14 * var(--u)) 0 calc(14 * var(--u)); }
.c-how__title .c-grot { font-size: calc(52 * var(--u)); }
.c-how__title .c-dl { font-size: calc(96 * var(--u)); line-height: 0.88; }
.c-how__easy { display: block; overflow: hidden; padding: 0.04em 0 0.2em; margin: -0.04em 0 -0.2em; }
.c-how__sub { margin-bottom: calc(14 * var(--u)); }
.c-steps { display: grid; gap: 14px; }
.c-step { padding: 22px; }
.c-step__n { font-weight: 500; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; }
.c-step__t { font-family: var(--serif); font-size: 26px; line-height: 1.05; margin: 12px 0 10px; }
.c-step__b { font-size: 14px; line-height: 1.55; }
.c-step--1 { background: var(--butter-deep); }
.c-step--2 { background: var(--periwinkle); }
.c-step--3 { background: var(--action); color: var(--white); } /* Action red, not vermilion: white small text needs 4.5:1 */
.c-step--4 { background: var(--espresso); color: var(--butter); }
.c-how__cta { margin-top: calc(20 * var(--u)); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; font-size: 14px; }
.c-pull { padding: calc(72 * var(--u)) 0 0; }
.c-pull__quote { padding: 0 var(--g); }
.c-pull__quote p { font-family: var(--serif); font-size: calc(34 * var(--u)); line-height: 1; }
/* the line that used to sit under the quote is a sticker on the film (19 Oct), so it stays readable over the picture */
.c-pause { position: relative; }
/* in the open sky, clear of the harbour film's boat (bottom left) and the sun's reflection */
.c-pull__sticker { --r: -4deg; left: 16px; top: 16px; max-width: calc(100% - 32px); white-space: normal; font-size: 15px; padding: 10px 16px; }
.c-pause { margin-top: calc(40 * var(--u)); height: calc(300 * var(--u)); overflow: hidden; }
.c-pause__img { position: relative; height: 115%; margin-top: -7.5%; }
.c-pause__img img, .c-pause__img picture { width: 100%; height: 100%; object-fit: cover; }
.c-wwa__title { font-size: calc(32 * var(--u)); }
.c-wwa__studio { aspect-ratio: 350 / 240; margin: calc(24 * var(--u)) 0; }
/* The form: on espresso, behind "Write to us instead". */
.c-write { max-width: 720px; margin: 48px auto 0; text-align: left; }
.c-write[hidden] { display: none; }
.c-write .c-h3 { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; }
.c-write__intro { margin: 12px 0 24px; }
.form { display: grid; grid-template-columns: 1fr; gap: 18px 24px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 500; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.field input, .field textarea { width: 100%; min-width: 0; appearance: none; border: 0; border-bottom: 1px solid var(--butter); border-radius: 0; background: transparent; color: var(--butter); font: 17px/1.5 var(--sans); padding: 10px 0; }
.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--butter); outline-offset: 4px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-bottom-width: 2px; }
.field__error { font-size: 14px; color: var(--butter); }
.field__error::before { content: "! "; font-weight: 700; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__check { min-height: 65px; }
.form__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.send { display: inline-flex; align-items: center; gap: 14px; height: 60px; padding: 0 0 0 26px; border: 0; background: var(--action); color: var(--white); font: 500 16px/1 var(--sans); cursor: pointer; }
.send__arrow { width: 60px; height: 60px; display: grid; place-items: center; background: var(--butter); color: var(--espresso); }
.send__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.send:disabled { background: transparent; color: var(--butter); outline: 1px solid var(--butter); outline-offset: -1px; cursor: not-allowed; }
.form__privacy { font-size: 14px; }
.form__status { font-size: 15px; }
.form__status a, .form-success a { color: var(--butter); }
.form-success { padding: 24px 0; }
.form-success .subhead { font-family: var(--serif); font-size: 34px; }
@media (min-width: 720px) { .form { grid-template-columns: 1fr 1fr; } .field--wide { grid-column: 1 / -1; } }
.c-footer { background: var(--espresso); color: var(--butter); padding: 56px var(--g) 24px; overflow: hidden; }
.c-footer__line { font-family: var(--serif); font-size: 40px; line-height: 0.95; }
.c-footer__cols { display: grid; gap: 28px; margin-top: 28px; }
.c-footer__col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font-size: 16px; }
.c-footer__col a { text-decoration: none; min-height: 24px; }
.c-footer__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.c-footer__h { font-weight: 500; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; }
.c-footer__mark { margin-top: 32px; overflow: hidden; }
.c-footer__mark img { width: 100%; transform: translateY(var(--fm, 0%)); }
.c-footer__legal { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; font-size: 13px; padding-bottom: env(safe-area-inset-bottom); }
/* Phone sticky bar (frame 16:281). */
@media (min-width: 1024px) { .c-footer__legal { padding-bottom: 0; } }
/* ---------- Desktop: the 1512 comp, scaled ---------- */
@media (min-width: 1024px) {
.c-sec { position: relative; padding: 0; }
.ab, .c-desk > * { position: absolute; }
/* 01 Hero (frame y 88..1148) */
.c-hero { height: calc(1148 * var(--u)); padding: 0; }
.c-hero > * { position: absolute; }
.c-hero__title { left: 0; top: 0; width: 100%; }
.c-hero__l1 { position: absolute; left: calc(42 * var(--u)); top: calc(198 * var(--u)); }
.c-hero__l1 .c-grot { font-size: calc(168 * var(--u)); }
.c-hero__l2 { position: absolute; left: calc(278 * var(--u)); top: calc(352 * var(--u)); width: calc(1186 * var(--u)); }
.c-hero__l2 .c-dl { font-size: calc(var(--hero-serif, 168.5) * var(--u)); }
.c-hero__copy { left: calc(48 * var(--u)); top: calc(575 * var(--u)); width: calc(470 * var(--u)); margin: 0; }
.c-hero__copy .c-body-l { font-size: calc(22 * var(--u)); line-height: 1.5; max-width: none; }
.c-hero__actions { margin-top: calc(32 * var(--u)); gap: calc(70 * var(--u)); flex-wrap: nowrap; }
.c-hero__cards { left: 0; top: 0; width: 100%; height: 100%; margin: 0; pointer-events: none; }
.c-hero__cards a { pointer-events: auto; }
.c-card--dunes { left: calc(792 * var(--u)); top: calc(660 * var(--u)); width: calc(544 * var(--u)); }
.c-card--dunes .c-card__frame { padding: calc(12 * var(--u)); }
.c-card--gate { left: calc(1242 * var(--u)); top: calc(593 * var(--u)); width: calc(254 * var(--u)); }
.c-card--gate .c-card__frame { padding: calc(12 * var(--u)); }
.c-hero__sticker { left: calc(700 * var(--u)); top: calc(978 * var(--u)); font-size: calc(22 * var(--u)); padding: calc(14 * var(--u)) calc(26 * var(--u)); }
.c-marquee { left: 0; right: 0; top: calc(1064 * var(--u)); height: calc(84 * var(--u)); margin: 0; }
.c-marquee__track { font-size: calc(52 * var(--u)); }
/* 02 What we do (h 1176) */
.c-wwd { height: calc(1176 * var(--u)); }
.c-wwd > * { position: absolute; }
.c-wwd .c-eyebrow { left: calc(48 * var(--u)); top: calc(120 * var(--u)); margin: 0; }
.c-wwd .c-statement { left: calc(560 * var(--u)); top: calc(110 * var(--u)); width: calc(900 * var(--u)); font-size: calc(52 * var(--u)); }
.c-wwd__note { left: calc(48 * var(--u)); top: calc(640 * var(--u)); width: calc(320 * var(--u)); font-size: calc(17 * var(--u)); }
.c-wwd__kitchen { left: calc(944 * var(--u)); top: calc(526 * var(--u)); width: calc(520 * var(--u)); height: calc(640 * var(--u)); margin: 0; aspect-ratio: auto; }
.c-wwd__fire { left: calc(560 * var(--u)); top: calc(656 * var(--u)); width: calc(300 * var(--u)); height: calc(380 * var(--u)); }
.c-wwd__sticker { --r: -5deg; left: calc(162 * var(--u)); top: calc(882 * var(--u)); font-size: calc(22 * var(--u)); padding: calc(14 * var(--u)) calc(26 * var(--u)); }
/* 03 What you get (h 1104) */
.c-wyg { height: calc(1104 * var(--u)); }
.c-wyg > .c-eyebrow { position: absolute; left: calc(48 * var(--u)); top: calc(100 * var(--u)); margin: 0; }
.c-wyg > .c-h2, .c-who > .c-h2, .c-beyond > .c-h2 { position: absolute; left: calc(560 * var(--u)); top: calc(90 * var(--u)); width: calc(860 * var(--u)); font-size: calc(64 * var(--u)); }
/* What you get: the headline starts on the middle column's edge (528 on this grid), not 560, which sat 24px off it (Qasim, 4 Oct). */
.c-wyg > .c-h2 { left: calc(528 * var(--u)); }
.c-cols { position: absolute; left: calc(48 * var(--u)); top: calc(226 * var(--u)); width: calc(1408 * var(--u)); margin: 0; grid-template-columns: repeat(3, 1fr); gap: calc(32 * var(--u)); }
.c-wyg .c-col__ph { aspect-ratio: 448 / 520; margin-bottom: calc(28 * var(--u)); }
/* round 9: the title under the eyebrow on the left, the picker over card 03 on the right, the cards below */
.c-wyg > .c-eyebrow { top: calc(84 * var(--u)); }
.c-wyg > .c-wyg__title { position: absolute; left: calc(48 * var(--u)); top: calc(122 * var(--u)); width: calc(900 * var(--u)); }
.c-wyg__title .c-grot { font-size: calc(58 * var(--u)); }
.c-wyg__title .c-dl { font-size: calc(92 * var(--u)); }
.c-wyg > .c-pick { position: absolute; left: calc(800 * var(--u)); top: calc(150 * var(--u)); width: calc(656 * var(--u)); margin: 0; }
.c-wyg .c-pick__l { margin-bottom: calc(12 * var(--u)); font-size: calc(12 * var(--u)); }
.c-wyg .c-kind { font-size: calc(18 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); }
.c-wyg .c-pick__d { margin-top: calc(14 * var(--u)); font-size: calc(16 * var(--u)); }
.c-wyg .c-cols { top: calc(304 * var(--u)); }
/* round 10: one espresso stage behind the three screens; the engine runs in the open between them (round 12: no wires) */
.c-wyg .c-col { position: relative; z-index: 1; }
.c-wyg .c-col .c-col__n { width: calc(40 * var(--u)); height: calc(40 * var(--u)); margin-bottom: calc(18 * var(--u)); font-size: calc(13 * var(--u)); }
.c-wyg .c-col .c-h3 { font-size: calc(30 * var(--u)); }
.c-wyg .c-col__p { margin-top: calc(12 * var(--u)); padding-right: calc(28 * var(--u)); font-size: calc(16 * var(--u)); }
.c-wyg__rail { display: block; position: absolute; left: 0; right: 0; top: calc(568 * var(--u)); height: 1px; background: rgba(40, 35, 31, 0.22); transform-origin: left center; }
.c-wyg__stage { display: block; position: absolute; left: 0; right: 0; top: 0; height: calc(520 * var(--u)); background: var(--espresso); }
.c-wyg .c-col__ph, .c-wyg .c-viz { background: none; }
.c-wyg .u-win { outline-color: rgba(245, 238, 220, 0.2); } /* the office header is espresso too: a hairline keeps its edge on the stage */
.c-col__n { margin-bottom: calc(8 * var(--u)); }
.c-h3 { font-size: calc(26 * var(--u)); }
.c-rules { margin-top: calc(24 * var(--u)); }
.c-rules li { padding: calc(13 * var(--u)) 0; font-size: calc(15 * var(--u)); }
/* 04 Product (h 1100), pinned: the stage is one viewport, the comp is fitted inside it */
.c-product__stage { --s: min(var(--u), calc(100svh / 1060)); height: 100svh; padding: 0; display: block; }
.c-product__stage > * { position: absolute; left: 50%; translate: -50% 0; }
.c-product__stage > .c-label-serif { top: calc(60 * var(--s)); font-size: calc(40 * var(--s)); white-space: nowrap; }
.c-product__title { top: calc(106 * var(--s)); margin: 0; gap: calc(28 * var(--s)); }
.c-product__title .c-grot { font-size: calc(150 * var(--s)); }
.c-product__title .c-dl { font-size: calc(var(--prod-serif, 185) * var(--s)); line-height: 0.62; }
.c-stack { top: calc(350 * var(--s)); width: calc(720 * var(--s)); height: calc(460 * var(--s)); max-width: none; aspect-ratio: auto; }
.c-stack__back { display: block; width: calc(700 * var(--s)); height: calc(440 * var(--s)); inset: auto; left: calc(10 * var(--s)); top: calc(10 * var(--s)); }
.c-stack__back--v { background: var(--vermilion); translate: calc(26 * var(--s)) calc(-40 * var(--s)); rotate: 3deg; }
.c-stack__back--p { background: var(--periwinkle); translate: calc(-12 * var(--s)) calc(-36 * var(--s)); rotate: -2deg; }
.c-stack__label { font-size: 13px; color: var(--butter); }
.c-stack__text { font-size: calc(40 * var(--s)); }
/* GSAP tweens this button directly and clears CSS translate (rule 7), so it is centred by margins, not translate. */
.c-product__stage > .c-product__cta { top: calc(870 * var(--s)); left: 0; right: 0; width: max-content; margin: 0 auto; translate: none; }
/* 05 Who it's for (h 1180) */
.c-who { height: calc(1180 * var(--u)); }
.c-who > .c-eyebrow { position: absolute; left: calc(48 * var(--u)); top: calc(100 * var(--u)); margin: 0; }
.c-who__sub { position: absolute; left: calc(560 * var(--u)); top: calc(240 * var(--u)); width: calc(700 * var(--u)); margin: 0; font-size: calc(22 * var(--u)); line-height: 1.5; }
.c-who .c-cols { top: calc(360 * var(--u)); }
.c-who .c-col__ph { aspect-ratio: 448 / 440; margin-bottom: calc(28 * var(--u)); }
.c-who .c-h3 { min-height: calc(92 * var(--u)); }
.c-who .c-rules { margin-top: 0; }
/* 06 Beyond bookings (h 860) */
.c-beyond { height: calc(860 * var(--u)); }
.c-beyond > .c-eyebrow { position: absolute; left: calc(48 * var(--u)); top: calc(100 * var(--u)); margin: 0; }
.c-beyond__list { position: absolute; left: calc(560 * var(--u)); top: calc(330 * var(--u)); width: calc(904 * var(--u)); margin: 0; }
.c-beyond__list li { grid-template-columns: calc(180 * var(--u)) 1fr; gap: calc(40 * var(--u)); padding: calc(14 * var(--u)) 0; align-items: start; }
.c-beyond__list picture { height: calc(120 * var(--u)); }
.c-beyond__list p { font-size: calc(22 * var(--u)); padding-top: calc(10 * var(--u)); }
.c-beyond__list strong { font-size: calc(26 * var(--u)); margin-bottom: calc(4 * var(--u)); }
.c-beyond__link { position: absolute; left: calc(48 * var(--u)); top: calc(760 * var(--u)); }
/* 07 How it works (h 969), pinned: fitted to the viewport */
.c-how__stage { --s: min(var(--u), calc(100svh / 900)); height: 100svh; padding: 0; display: block; }
.c-how__stage > * { position: absolute; }
.c-how__stage > .c-label-serif { left: 50%; translate: -50% 0; top: calc(48 * var(--s)); font-size: calc(40 * var(--s)); white-space: nowrap; }
.c-how__title { left: 50%; translate: -50% 0; top: calc(100 * var(--s)); margin: 0; display: flex; align-items: flex-end; gap: calc(26 * var(--s)); white-space: nowrap; }
.c-how__title .c-grot { font-size: calc(135 * var(--s)); }
.c-how__title .c-dl { font-size: calc(var(--easy-serif, 174) * var(--s)); line-height: 0.72; }
.c-how__sub { left: 50%; translate: -50% 0; top: calc(262 * var(--s)); margin: 0; font-size: calc(22 * var(--s)); white-space: nowrap; }
.c-steps { left: 50%; translate: -50% 0; top: calc(340 * var(--s)); width: calc(1416 * var(--s)); grid-template-columns: repeat(4, 1fr); gap: calc(24 * var(--s)); }
.c-step { height: calc(344 * var(--s)); padding: calc(28 * var(--s)); }
.c-step__t { font-size: calc(34 * var(--s)); margin: calc(58 * var(--s)) 0 calc(18 * var(--s)); }
.c-step__b { font-size: calc(15 * var(--s)); }
.c-how__cta { left: 50%; translate: -50% 0; top: calc(740 * var(--s)); margin: 0; flex-direction: row; align-items: center; gap: 24px; font-size: 16px; white-space: nowrap; }
/* 08 Pull line + pause (h 1240) */
.c-pull { height: calc(1240 * var(--u)); padding: 0; position: relative; }
.c-pull__quote { position: absolute; left: calc(168 * var(--u)); top: calc(140 * var(--u)); width: calc(1200 * var(--u)); padding: 0; }
.c-pull__quote p { font-size: calc(88 * var(--u)); line-height: 1; }
.c-pull__quote p > span { display: block; }
.c-pull__sticker { left: calc(168 * var(--u)); top: calc(190 * var(--u)); max-width: none; white-space: nowrap; font-size: calc(24 * var(--u)); padding: calc(14 * var(--u)) calc(26 * var(--u)); }
.c-pause { position: absolute; left: 0; right: 0; top: calc(540 * var(--u)); height: calc(700 * var(--u)); margin: 0; }
/* 09 Who we are (h 1040) */
.c-wwa { height: calc(1040 * var(--u)); }
.c-wwa > * { position: absolute; }
.c-wwa > .c-eyebrow { left: calc(48 * var(--u)); top: calc(100 * var(--u)); margin: 0; }
.c-wwa__title { left: calc(560 * var(--u)); top: calc(90 * var(--u)); width: calc(900 * var(--u)); font-size: calc(52 * var(--u)); }
.c-wwa__studio { left: calc(560 * var(--u)); top: calc(420 * var(--u)); width: calc(460 * var(--u)); height: calc(340 * var(--u)); margin: 0; aspect-ratio: auto; }
.c-wwa__night { left: calc(1044 * var(--u)); top: calc(360 * var(--u)); width: calc(420 * var(--u)); height: calc(560 * var(--u)); }
.c-wwa__body { left: calc(560 * var(--u)); top: calc(800 * var(--u)); width: calc(420 * var(--u)); font-size: calc(17 * var(--u)); }
/* Footer */
.c-footer { padding: calc(96 * var(--u)) calc(48 * var(--u)) calc(32 * var(--u)); }
.c-footer__top { display: flex; justify-content: space-between; align-items: flex-start; }
.c-footer__line { font-size: calc(72 * var(--u)); line-height: 0.88; }
.c-footer__line span { display: block; }
.c-footer__cols { display: flex; gap: calc(96 * var(--u)); margin: 0; }
.c-footer__col { gap: 12px; }
.c-footer__mark { margin-top: calc(72 * var(--u)); }
.c-footer__legal { margin-top: calc(72 * var(--u)); }
}
/* ---------- Motion states. The stylesheet ships the final state; script only adds a starting state
(html.mb-motion, added in the same statement that mounts the engine) and takes it away again. ---------- */
/* Hero intro (released as the loader leaves) */
/* Stickers elsewhere drop once on entry */
/* Line-by-line statements: each line rises once, inside a mask */
/* The easy part writes in, left to right (clip on the wrapper, never on the type box) */
html.mb-motion .c-how__easy { clip-path: inset(-0.1em calc((1 - var(--w, 1)) * 100%) -0.3em -0.1em); }
@media (min-width: 1024px) {
}
/* Reduced motion: a complete, still page. c.js never adds mb-motion here; this is the belt to that brace. */
@media (prefers-reduced-motion: reduce) {
.c-nav, .c-btn, .c-btn__arrow, .c-btn__label { transition: none; }
:is(.c-viz, .c-wyg__biz, .c-pick__d, .c-col__v) > [data-b], .c-seg__thumb, .c-kind { transition: none !important; } /* the businesses switch at once */
.c-nav.is-hidden { transform: none; }
.c-pause { clip-path: none !important; }
}
/* Phone deck for How it works: the cards stack in one slot, each a step lower (pinned only if it fits) */
@media (max-width: 1023.98px) {
.c-how.is-deck .c-steps { grid-template-areas: "s"; }
.c-how.is-deck .c-step { grid-area: s; margin-top: calc(var(--k, 0) * 12px); }
.c-how.is-deck .c-step--1 { --k: 0; } .c-how.is-deck .c-step--2 { --k: 1; } .c-how.is-deck .c-step--3 { --k: 2; } .c-how.is-deck .c-step--4 { --k: 3; }
.c-how.is-deck .c-how__stage { padding-top: calc(var(--nav-h) + 8px); }
}
/* An inline 82% line keeps its unscaled layout width; give the slack back so centred headings centre on the ink. */
.c-how__title .c-dl--inline { margin-right: -0.80em; }
.c-product__title .c-dl--inline { margin-right: -0.52em; }
/* Pinned stages hold absolute children. Without the engine (reduced motion, no JS) they still need a containing
block; :where() keeps this at zero specificity so the engine's .sc-stage { position: sticky } wins when it runs. */
:where(.c-how__stage, .c-product__stage) { position: relative; }
/* White on vermilion is 4.22:1, so sticker text stays large (>= 18.66px bold) at every width. */
.c-hero__sticker { font-size: max(19px, calc(17 * var(--u))); }
@media (min-width: 1024px) { .c-hero__sticker { font-size: max(19px, calc(22 * var(--u))); } }
@media (min-width: 1024px) {
/* The button row keeps its real size while the comp scales; keep the scribble link and the lower-left sticker clear of it. */
.c-hero .c-scribble { font-size: max(16px, calc(22 * var(--u))); }
}
/* Contrast (Figma comp fix, frontend-notes 2026-09-11): vermilion is a display colour. Small numerals go espresso;
the accent moves to a short vermilion rule before the eyebrow, which only needs 3:1 as a graphic (3.65:1). */
.c-eyebrow__n { color: inherit; }
.c-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--vermilion); flex: none; }
.c-beyond .c-eyebrow::before { background: var(--espresso); }
.c-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
/* The legal line never breaks inside (at 360 it wrapped after the "·", round 10); when it and the privacy link do not
fit side by side, the link moves to its own line. */
.c-footer__legal { flex-wrap: wrap; row-gap: 8px; }
.c-footer__legal p { white-space: nowrap; }
/* ======================================================================================================
v2: fixed scenes (4 Oct, after Qasim's walk). GSAP + ScrollTrigger + Lenis, self-hosted in assets/vendor.
Nothing here hides anything unless html.mb-motion is set, and c.js sets that only when it runs the motion.
====================================================================================================== */
main { position: relative; background: var(--butter); }
/* Masks: a line (or a block) rises out of its own box. Never opacity. */
.c-m { display: block; overflow: hidden; padding-block: 0.08em 0.2em; margin-block: -0.08em -0.2em; }
.c-m__i { display: block; }
.c-w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.06em 0.18em; margin-block: -0.06em -0.18em; }
.c-w__i { display: inline-block; }
.c-grot .c-w { padding-inline: 0.02em; margin-inline: -0.02em; }
/* Rules draw left to right in motion (the static border stays without script) */
html.mb-motion .c-rules li, html.mb-motion .c-beyond__list li { border-top: 0; position: relative; }
.c-rule { display: none; }
html.mb-motion .c-rule { display: block; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: currentColor; transform-origin: left center; }
/* Scenes: a tall wrapper, a sticky stage. Heights come from c.js (motion only). */
.c-scene, .c-panel, .c-writesec { position: relative; }
html.mb-motion .c-scene.is-scene > section { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
html.mb-motion .c-scene.is-fit > section > * { margin-left: var(--ox, 0px); }
html.mb-motion .c-scene.is-fit > section > .c-hero__title, html.mb-motion .c-scene.is-fit > section > .c-hero__cards { margin-left: var(--ox, 0px); }
html.mb-motion .c-scene[data-scene="hero"].is-scene .c-hero { padding: 0; }
html.mb-motion .c-hero__cards { overflow: visible; }
html.mb-motion .c-card--dunes { z-index: 1; will-change: transform; }
/* Pull scene: the photo is the whole stage, opened from a window; the quote sits above it */
@media (min-width: 1024px) {
html.mb-motion .c-scene[data-scene="pull"].is-scene .c-pause { top: 0; bottom: 0; height: auto; z-index: 0; }
html.mb-motion .c-scene[data-scene="pull"].is-scene .c-pull__quote { z-index: 1; }
html.mb-motion .c-scene[data-scene="pull"].is-scene .c-pull__quote { top: calc(120 * var(--u)); }
html.mb-motion .c-scene[data-scene="pull"].is-scene .c-pause__img { height: 100%; margin: 0; }
}
/* The form section (moved out of the held final scene) */
.c-writesec { background: var(--espresso); color: var(--butter); padding: 0 var(--g) 1px; }
.c-writesec .c-write { margin: 0 auto; padding: 24px 0 72px; }
.c-writesec:has(.c-write[hidden]) { padding: 0; }
/* Footer curtain: the page lifts off a footer that waits underneath */
html.mb-motion.curtain main { z-index: 2; }
html.mb-motion.curtain .c-footer { position: relative; z-index: 1; will-change: transform; }
/* Step cards sit above each other in DOM order while being dealt */
.c-step { position: relative; }
.c-step:nth-child(1) { z-index: 1; } .c-step:nth-child(2) { z-index: 2; } .c-step:nth-child(3) { z-index: 3; } .c-step:nth-child(4) { z-index: 4; }
@media (prefers-reduced-motion: reduce) { .c-marquee__track { transform: none !important; } }
/* Masked groups keep their own layout inside the mask */
.c-hero__actions > .c-m, .c-how__cta > .c-m { width: 100%; }
.c-hero__actions > .c-m > .c-m__i { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.c-how__cta > .c-m > .c-m__i { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
@media (min-width: 1024px) {
.c-hero__actions > .c-m > .c-m__i { gap: calc(70 * var(--u)); flex-wrap: nowrap; }
.c-how__cta > .c-m > .c-m__i { flex-direction: row; align-items: center; gap: 24px; }
}
.c-eyebrow .c-m { flex: 0 1 auto; }
.c-eyebrow .c-m__i { display: flex; gap: 10px; align-items: center; flex-wrap: inherit; }
html.mb-motion .c-scene[data-scene="final"].is-scene .c-final { pointer-events: none; }
html.mb-motion .c-scene[data-scene="final"].is-scene .c-final a, html.mb-motion .c-scene[data-scene="final"].is-scene .c-final button { pointer-events: auto; }
/* Every panel carries its own ground, so it can slide over a held scene */
.c-sec { background: var(--butter); }
.c-beyond { background: var(--periwinkle); }
.c-hero__actions > .c-m { width: max-content; max-width: 100vw; }
.c-panel > .c-marquee { margin: 0; }
/* Cards thrown in from the sides must never widen the page (a phone widens its layout viewport otherwise).
overflow: clip makes no scroll container, so the sticky stages still stick. */
html, main { overflow-x: clip; }
/* ---------- Phase 4 (4 Oct): link and final-call stickers ---------- */
/* The link component is one unit: label and arrow box on one row, the scribble under both (Figma Link, page 01). */
.c-scribble { display: inline-flex; flex-wrap: nowrap; width: max-content; max-width: 100%; }
.c-m--outer { display: inline-block; vertical-align: top; }
@media (min-width: 1024px) {
/* Figma: x 48, bottom aligned with the last row of the list (row 3 ends at 765 in the 860 frame). */
.c-beyond__link, .c-beyond > .c-m--outer { position: absolute; left: calc(48 * var(--u)); top: auto; bottom: calc(95 * var(--u)); }
.c-beyond > .c-m--outer > .c-beyond__link { position: static; }
.c-beyond__link { font-size: max(16px, calc(22 * var(--u))); }
}
.c-fl { display: block; padding: 0.22em 0.12em 0.34em; margin: -0.22em -0.12em -0.34em; }
html.mb-motion .c-fl {
--pen: 1;
-webkit-mask-image: linear-gradient(90deg, #000 calc(var(--pen) * 140% - 40%), transparent calc(var(--pen) * 140%));
mask-image: linear-gradient(90deg, #000 calc(var(--pen) * 140% - 40%), transparent calc(var(--pen) * 140%));
}
/* ---------- Who it's for, B5 (Qasim, 4 Oct): tilted photo cards with status stickers ---------- */
.c-who5 { text-align: center; }
.c-who5__eyebrow { justify-content: center; }
.c-who5 .c-eyebrow .c-m__i { justify-content: center; }
.c-who5__title { margin-top: 18px; }
.c-who5__title .c-grot { display: inline; }
.c-who5__title .c-dl--inline { line-height: 0.8; }
.c-who5__cards { display: grid; gap: 76px; margin-top: 60px; justify-items: center; }
.c-wcard { width: 100%; max-width: 340px; text-align: left; }
.c-wcard__frame { position: relative; padding: 12px; rotate: var(--tilt, 0deg); }
.c-wcard__frame--v { background: var(--vermilion); }
.c-wcard__frame--e { background: var(--espresso); }
.c-wcard__frame--p { background: var(--periwinkle); }
.c-wcard__ph { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--butter-deep); }
.c-wcard__ph img, .c-wcard__ph picture { width: 100%; height: 100%; object-fit: cover; }
.c-wcard__ph::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to bottom, rgba(40, 35, 31, 0), rgba(40, 35, 31, 0.62)); pointer-events: none; }
.c-wcard__label { position: absolute; left: 16px; right: 12px; bottom: 14px; z-index: 1; margin: 0; color: var(--white); font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: -0.045em; line-height: 0.9; font-size: 34px; }
.c-wcard__tag { position: absolute; z-index: 3; top: -22px; left: 26px; font-size: 19px; padding: 9px 18px; }
.c-wcard--1 { --tilt: 4deg; } .c-wcard--2 { --tilt: 0deg; } .c-wcard--3 { --tilt: -4deg; }
.c-wcard--1 .c-wcard__tag { --r: -8deg; } .c-wcard--2 .c-wcard__tag { --r: 3deg; } .c-wcard--3 .c-wcard__tag { --r: 7deg; }
.c-wcard__body { margin-top: 26px; padding-left: 24px; font-size: 16px; line-height: 1.6; max-width: 32ch; }
@media (min-width: 1024px) {
.c-who5 { height: auto; min-height: 0; padding: calc(96 * var(--u)) calc(48 * var(--u)) calc(110 * var(--u)); }
.c-who5 > .c-eyebrow { position: static; }
.c-who5__title { margin-top: calc(34 * var(--u)); }
.c-who5__title .c-grot { font-size: calc(124 * var(--u)); }
.c-who5__title .c-dl--inline { font-size: calc(184 * var(--u)); margin-right: -0.42em; }
.c-who5__cards { grid-template-columns: repeat(3, calc(360 * var(--u))); justify-content: center; gap: calc(64 * var(--u)); margin-top: max(calc(78 * var(--u)), 64px); align-items: start; } /* px floor: the stickers keep 19px type, so below ~1240 the put-down crossed the headline (round 9, 1024) */
.c-wcard { max-width: none; }
.c-wcard__frame { padding: calc(14 * var(--u)); }
.c-wcard__label { font-size: calc(44 * var(--u)); left: calc(18 * var(--u)); bottom: calc(16 * var(--u)); }
.c-wcard--1 .c-wcard__label { font-size: calc(38 * var(--u)); }
.c-wcard__tag { top: calc(-26 * var(--u)); left: calc(36 * var(--u)); font-size: max(19px, calc(20 * var(--u))); padding: calc(10 * var(--u)) calc(20 * var(--u)); }
.c-wcard__body { margin-top: calc(40 * var(--u)); padding-left: calc(28 * var(--u)); font-size: max(16px, calc(18 * var(--u))); }
html.mb-motion .c-scene[data-scene="who"].is-scene .c-who5 { padding-top: calc(70 * var(--u)); }
}
@media (max-width: 1023.98px) {
.c-who5__title .c-grot { font-size: calc(52 * var(--u)); }
.c-who5__title .c-dl--inline { font-size: calc(84 * var(--u)); }
.c-who5__title .c-fl { white-space: normal; }
.c-wcard--1 { --tilt: 2.5deg; } .c-wcard--3 { --tilt: -2.5deg; }
}
/* ---------- How it works, B5 (Qasim, 4 Oct): tilted colour cards; still the peak ---------- */
.c-how5__title .c-grot { display: inline; }
.c-how5__cards { display: grid; gap: 16px; }
.c-hcard { padding: 22px 24px 30px; min-height: 180px; rotate: var(--tilt, 0deg); }
.c-hcard__n { font-weight: 500; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; }
.c-hcard__t { font-family: var(--serif); font-size: 28px; line-height: 1.06; margin-top: 36px; }
.c-hcard--1 { background: var(--butter-deep); --tilt: 1.2deg; }
.c-hcard--2 { background: var(--periwinkle); --tilt: -1.3deg; }
.c-hcard--3 { background: var(--action); color: var(--white); --tilt: 0.8deg; } /* Action red: white small text needs 4.5:1 (vermilion gives 4.22) */
.c-hcard--4 { background: var(--espresso); color: var(--butter); --tilt: -1.5deg; }
@media (min-width: 1024px) {
.c-how5__title { left: 50%; translate: -50% 0; top: calc(96 * var(--s)); white-space: nowrap; }
.c-how5__title .c-grot { font-size: calc(150 * var(--s)); }
.c-how5__title .c-dl--inline { font-size: calc(240 * var(--s)); line-height: 0.75; margin-right: -0.27em; }
.c-how5__cards { left: 50%; translate: -50% 0; top: calc(420 * var(--s)); width: calc(1320 * var(--s)); grid-template-columns: repeat(4, 1fr); gap: calc(24 * var(--s)); }
.c-hcard { min-height: 0; height: calc(276 * var(--s)); padding: calc(26 * var(--s)) calc(28 * var(--s)); }
.c-hcard__t { font-size: calc(34 * var(--s)); margin-top: calc(70 * var(--s)); }
.c-how__stage > .c-how__cta { top: calc(770 * var(--s)); }
}
@media (max-width: 1023.98px) {
.c-how5__title { margin: 12px 0 28px; }
.c-how5__title .c-grot { font-size: calc(56 * var(--u)); }
.c-how5__title .c-dl--inline { font-size: calc(92 * var(--u)); }
.c-how__cta { margin-top: 28px; }
}
.c-wcard--1 .c-wcard__frame { --tilt: 4; } .c-wcard--2 .c-wcard__frame { --tilt: 0; } .c-wcard--3 .c-wcard__frame { --tilt: -4; }
.c-wcard__frame { rotate: calc(var(--tilt, 0) * 1deg); }
.c-hcard--1 { --tilt: 1.2; } .c-hcard--2 { --tilt: -1.3; } .c-hcard--3 { --tilt: 0.8; } .c-hcard--4 { --tilt: -1.5; }
.c-hcard { rotate: calc(var(--tilt, 0) * 1deg); }
@media (max-width: 1023.98px) { .c-wcard--1 .c-wcard__frame { --tilt: 2.5; } .c-wcard--3 .c-wcard__frame { --tilt: -2.5; } }
/* the space between the grotesk and the serif word is the display size, not the body size */
.c-who5__title .c-dl--inline, .c-how5__title .c-dl--inline { margin-left: 0.18em; }
@media (min-width: 1024px) { .c-how5__title { top: calc(118 * var(--s)); } .c-how5__cards { top: calc(440 * var(--s)); } .c-how__stage > .c-how__cta { top: calc(785 * var(--s)); } }
.c-who5__kicker { text-align: center; }
.c-who5__kicker .c-m__i { display: block; }
@media (min-width: 1024px) {
.c-who5__kicker { font-size: calc(40 * var(--u)); }
.c-who5__title { margin-top: calc(14 * var(--u)); }
}
@media (max-width: 1023.98px) {
.c-who5__kicker { font-size: 26px; }
}
/* ---------- Hero dune video (approved 4 Oct): plays inside the card, fades in over the still once it is really playing ---------- */
.c-card__media { position: relative; }
.c-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 600ms var(--ease-out); pointer-events: none; }
.c-card__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .c-card__video { display: none; } }
/* A reveal mask only rises vertically, so it clips vertically only: a row wider than its column (the hero's button row)
must never be cut sideways. overflow-y: clip leaves overflow-x visible (clip, unlike hidden, does not force both axes). */
.c-m, .c-w { overflow: visible; overflow-y: clip; }
/* ======================================================================================================
Round 8 (4 Oct): the close, rebuilt as one block (it replaces seven rounds of overrides).
D: the question centred at scale, one button, a burst of four stickers framing it (never over a letter or the button).
B2: split; the spires as a tilted print that bookends the hero's dune card, its sticker on the print, clear of the type.
?close=b2|d is applied before first paint (head script); html[data-close] carries the default.
====================================================================================================== */
html:not([data-close="b2"]) .c-close--b2, html[data-close="b2"] .c-close--d { display: none; }
.c-final { position: relative; overflow: hidden; background: var(--espresso); color: var(--butter); }
html.mb-motion .c-scene[data-scene="final"].is-fit > section > * { margin-left: 0; }
html.mb-motion .c-scene[data-scene="who"].is-fit > section > * { margin-left: 0; } /* centred flow, like final */ /* --ox is for absolute comps, not flow */
.c-final__title .c-grot { white-space: nowrap; }
.c-final__sub .c-fl { display: inline-block; }
.c-btn--xl { height: max(64px, calc(72 * var(--u))); }
.c-btn--xl .c-btn__arrow { width: max(64px, calc(72 * var(--u))); }
.c-btn--xl .c-btn__label { font-size: max(17px, calc(19 * var(--u))); padding: 0 max(28px, calc(34 * var(--u))); }
.c-final__actions > .c-m { width: 100%; }
.c-final .c-scribble { font-size: clamp(17px, calc(19 * var(--u)), 21px); }
/* ---- D ---- */
.c-close--d { display: flex; justify-content: center; align-items: center; padding: 72px var(--g) 40px; text-align: center; }
.c-closed__core { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 440px; }
.c-closed__title .c-fl { text-align: center; }
.c-closed__title .c-grot { font-size: calc(44 * var(--u)); line-height: 0.82; letter-spacing: -0.05em; }
.c-closed__title .c-dl--inline { font-size: calc(96 * var(--u)); line-height: 0.8; margin-top: 2px; }
.c-close--d .c-final__sub { margin-top: 26px; font-size: 18px; }
.c-close--d .c-final__actions, .c-close--d .c-final__actions > .c-m > .c-m__i { display: flex; justify-content: center; }
.c-close--d .c-final__actions { margin-top: 26px; }
.c-final__alt { margin-top: 14px; }
.c-burst { display: contents; }
/* phone and tablet: the burst is part of the column, two above the question and two below the link, so nothing can overlap */
.c-burst__s { position: relative; font-size: 15px; padding: 8px 15px; gap: 8px; }
.c-burst__s.c-sticker--vermilion { font-size: 19px; padding: 9px 18px; } /* white on vermilion stays >= 18.66px bold */
.c-burst__s .c-sticker__dot { width: 8px; height: 8px; }
.c-burst__s--1 { order: -2; align-self: flex-start; --r: -6deg; margin-bottom: 10px; }
.c-burst__s--2 { order: -1; align-self: flex-end; --r: 5deg; margin-bottom: 30px; }
.c-burst__s--3 { order: 1; align-self: flex-start; --r: 4deg; margin-top: 34px; }
.c-burst__s--4 { order: 2; align-self: flex-end; --r: -5deg; margin-top: 10px; }
@media (min-width: 1024px) {
.c-close--d { min-height: 100svh; padding: calc(150 * var(--u)) var(--g); }
.c-closed__core { width: max-content; max-width: none; }
.c-closed__title .c-grot { font-size: calc(150 * var(--u)); }
.c-closed__title .c-dl--inline { font-size: calc(252 * var(--u)); line-height: 0.78; margin-top: calc(4 * var(--u)); }
.c-close--d .c-final__sub { margin-top: calc(44 * var(--u)); font-size: max(18px, calc(24 * var(--u))); }
.c-close--d .c-final__actions { margin-top: calc(34 * var(--u)); }
.c-final__alt { margin-top: calc(18 * var(--u)); }
/* a frame of four around the question: two above its top corners, two below the link, each its own tilt */
.c-burst__s { position: absolute; font-size: max(19px, calc(22 * var(--u))); padding: calc(13 * var(--u)) calc(24 * var(--u)); gap: 10px; }
.c-burst__s.c-sticker--vermilion { font-size: max(19px, calc(22 * var(--u))); padding: calc(13 * var(--u)) calc(24 * var(--u)); }
.c-burst__s .c-sticker__dot { width: 10px; height: 10px; }
.c-burst__s--1 { left: 1%; bottom: calc(100% + 30px + 24 * var(--u)); margin: 0; }
.c-burst__s--2 { right: -2%; bottom: calc(100% + 30px + 46 * var(--u)); margin: 0; }
/* the lower pair flanks the button and the link (not below them), so the last strip of the close above the footer
curtain is empty ground and never two stickers on their own */
.c-burst__s--3 { left: auto; right: calc(50% + max(130 * var(--u), 105px) + 44px); top: auto; bottom: calc(14px + 58 * var(--u)); margin: 0; }
.c-burst__s--4 { left: calc(50% + max(130 * var(--u), 105px) + 44px); right: auto; top: auto; bottom: calc(2px + 4 * var(--u)); margin: 0; }
}
/* ---- B2 ---- */
.c-close--b2 { display: flex; flex-direction: column; text-align: left; }
.c-closeb__side { order: -1; padding: 76px var(--g) 0; }
.c-closeb__print { position: relative; margin: 0 auto; width: min(86%, 440px); }
.c-closeb__frame { --tilt: -2.5; padding: 10px; background: var(--butter-deep); rotate: calc(var(--tilt) * 1deg); }
.c-closeb__frame picture, .c-closeb__frame img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.c-closeb__frame picture { overflow: hidden; }
.c-closeb__tag { --r: -6deg; position: absolute; left: -12px; top: -22px; font-size: 19px; padding: 9px 18px; }
.c-closeb__text { padding: 48px var(--g) 84px; }
.c-closeb__for { font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.c-closeb__for i { font-style: normal; margin: 0 0.5em; }
.c-closeb__title { margin-top: 20px; }
.c-closeb__title .c-grot { font-size: calc(43 * var(--u)); line-height: 0.82; letter-spacing: -0.05em; }
.c-closeb__title .c-dl { font-size: calc(92 * var(--u)); line-height: 0.8; }
.c-close--b2 .c-final__sub { margin-top: 24px; font-size: 18px; }
.c-close--b2 .c-final__actions, .c-close--b2 .c-final__actions > .c-m > .c-m__i { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.c-close--b2 .c-final__actions { margin-top: 28px; }
@media (min-width: 1024px) {
.c-close--b2 { display: grid; grid-template-columns: 1.08fr 0.92fr; align-items: center; min-height: 100svh; }
.c-closeb__side { order: 0; padding: calc(96 * var(--u)) calc(88 * var(--u)) calc(96 * var(--u)) calc(24 * var(--u)); }
.c-closeb__print { width: min(100%, calc(560 * var(--u))); }
.c-closeb__frame { --tilt: 3; padding: calc(14 * var(--u)); }
.c-closeb__tag { left: calc(-34 * var(--u)); top: calc(-30 * var(--u)); font-size: max(19px, calc(22 * var(--u))); padding: calc(13 * var(--u)) calc(24 * var(--u)); }
.c-closeb__text { padding: calc(110 * var(--u)) calc(24 * var(--u)) calc(110 * var(--u)) var(--g); }
.c-closeb__for { font-size: 13px; letter-spacing: 0.18em; }
.c-closeb__title { margin-top: calc(34 * var(--u)); }
.c-closeb__title .c-grot { font-size: calc(90 * var(--u)); }
.c-closeb__title .c-dl { font-size: calc(190 * var(--u)); line-height: 0.8; }
.c-close--b2 .c-final__sub { margin-top: calc(46 * var(--u)); font-size: max(18px, calc(24 * var(--u))); }
.c-close--b2 .c-final__actions, .c-close--b2 .c-final__actions > .c-m > .c-m__i { flex-direction: row; align-items: center; gap: calc(44 * var(--u)); }
.c-close--b2 .c-final__actions { margin-top: calc(40 * var(--u)); }
}
/* A .c-fl line's padding is in the h2's em (body size), but mask-image clips everything outside the padded box, so a
display serif's descender (the "y") was cut off with a stray dot left below it. Pad the serif line in display units. */
.c-final__title .c-fl--serif { padding-bottom: calc(34 * var(--u)); margin-bottom: calc(-34 * var(--u)); }
@media (min-width: 1024px) { .c-final__title .c-fl--serif { padding-bottom: calc(72 * var(--u)); margin-bottom: calc(-72 * var(--u)); } }
/* Optical centring of D's question, measured by ink (r8-centre.mjs): the grotesk's -0.05em tracking after its last letter
pushes the ink right of the box, and the serif's side bearings push it left. Both corrections are in the line's own em. */
.c-closed__title .c-grot { display: inline-block; margin-right: -0.087em; padding-right: 0.174em; }
.c-closed__title .c-dl--inline > span { padding-left: 0.05em; }
/* Round 9, the Danish page (/da/): "DIN HJEMMESIDE," is 15% wider than "YOUR WEBSITE,". It fits from 768 up; on phones the
first line steps down so it stays one line, at the width the English line has (measured: 52u wrapped at 390 and 360). */
@media (max-width: 1023.98px) {
html[lang="da"] .c-hero__l1 .c-grot { font-size: calc(45 * var(--u)); }
/* "SELVE produktet." and "din virksomhed." are a fifth wider than "THE product." / "your business."; measured to end
where the English ends at 390 and 360 (r9-lines.mjs) */
html[lang="da"] .c-product__title .c-grot { font-size: calc(46 * var(--u)); }
html[lang="da"] .c-product__title .c-dl { font-size: calc(76 * var(--u)); }
html[lang="da"] .c-who5__title .c-dl--inline { font-size: calc(70 * var(--u)); }
}
/* Close D's two Danish lines, centred by ink: "K…M" and "d…?" carry different side bearings than the English, measured
at -5.5px / +4.5px at 1512, in proportion at every width (r8-centre.mjs), so the correction is in em */
html[lang="da"] .c-closed__title .c-grot { position: relative; left: 0.038em; }
html[lang="da"] .c-closed__title .c-dl--inline { position: relative; left: -0.017em; }
/* ---------- "What you get" (18 Oct, round 2): one enquiry told across the three cards, as real miniatures of the UI,
not drawings. Emma writes on the website (01), the reply goes out in the owner's words (02), it lands in the back
office and gets booked (03); round 4 (19 Oct) made 02 and 03 read as our own back office. One clock in c.js drives all three. The markup is the finished state, so reduced
motion and no-JS show the story complete. Sized by the card (container units).
Radius rule inside the miniatures: windows 10px, fields and buttons 6px, back-office tags 3px, chips round. ---------- */
.c-ph--viz { container-type: size; }
@media (max-width: 1023.98px) { .c-wyg .c-ph--viz { aspect-ratio: 1; } }
.c-viz { --ink: var(--espresso); --hair: rgba(40, 35, 31, 0.16); width: 100%; height: 100%; display: grid; place-items: center;
font-family: var(--sans); color: var(--ink); font-size: 3.3cqw; line-height: 1.35; }
.c-viz--site { background: var(--periwinkle); }
.c-viz--flow { background: var(--espresso); --ink: var(--butter); --hair: rgba(245, 238, 220, 0.16); }
.c-viz--office { background: var(--butter-deep); }
.c-viz b { font-weight: 500; }
.c-viz small { display: block; font-size: 0.78em; opacity: 0.64; }
.u-win { width: 84%; background: var(--butter); border-radius: 10px; overflow: hidden; outline: 1px solid var(--hair); }
/* Round 7 (19 Oct): three kinds of business take turns on the same three cards (a stay, an appointment, a quote).
Each card holds one finished window per business, stacked in one cell; the section's data-biz says which one shows. */
/* Round 10 (20 Oct): a change of business is a wave, never a fade. The old window wipes up and out, the new one wipes
up in, column after column (--i); the serif line and the line under the switch roll through their masks the same
way. c.js marks the outgoing one data-st="out" so it stays visible while it leaves. */
:is(.c-viz, .c-wyg__biz, .c-pick__d, .c-col__v) > [data-b] { grid-area: 1 / 1; }
.c-wyg:not([data-biz="0"]) :is(.c-viz, .c-wyg__biz, .c-pick__d, .c-col__v) > [data-b="0"], .c-wyg:not([data-biz="1"]) :is(.c-viz, .c-wyg__biz, .c-pick__d, .c-col__v) > [data-b="1"], .c-wyg:not([data-biz="2"]) :is(.c-viz, .c-wyg__biz, .c-pick__d, .c-col__v) > [data-b="2"] { visibility: hidden; }
.c-viz > [data-b] { clip-path: inset(-2px); transition: clip-path 0.75s var(--ease-out) calc(0.3s + var(--i, 0) * 0.08s); }
.c-wyg:not([data-biz="0"]) .c-viz > [data-b="0"], .c-wyg:not([data-biz="1"]) .c-viz > [data-b="1"], .c-wyg:not([data-biz="2"]) .c-viz > [data-b="2"] { clip-path: inset(100% -2px -2px -2px); transition: none; }
.c-wyg .c-viz > [data-b][data-st="out"] { clip-path: inset(-2px -2px 100% -2px); transition: clip-path 0.4s var(--ease-in-out) calc(var(--i, 0) * 0.08s), visibility 0s calc(0.42s + var(--i, 0) * 0.08s); }
.c-col:nth-of-type(2) .c-viz { --i: 1; } .c-col:nth-of-type(3) .c-viz { --i: 2; }
:is(.c-wyg__biz, .c-pick__d, .c-col__v) > [data-b] { translate: 0 0; transition: translate 0.7s var(--ease-out) 0.22s; }
.c-wyg:not([data-biz="0"]) :is(.c-wyg__biz, .c-pick__d, .c-col__v) > [data-b="0"], .c-wyg:not([data-biz="1"]) :is(.c-wyg__biz, .c-pick__d, .c-col__v) > [data-b="1"], .c-wyg:not([data-biz="2"]) :is(.c-wyg__biz, .c-pick__d, .c-col__v) > [data-b="2"] { translate: 0 110%; transition: none; }
.c-wyg :is(.c-wyg__biz, .c-pick__d, .c-col__v) > [data-b][data-st="out"] { translate: 0 -110%; transition: translate 0.4s var(--ease-in-out), visibility 0s 0.4s; }
/* Round 9 (19 Oct, after Superb's solutions block): the title names the business that is playing. Round 10: the
switch is one pill like the nav's, with an espresso thumb that slides to the business; its ring fills as the turn
runs (--p, c.js). On desktop, scrolling through the held section steps through the three. */
.c-wyg__title { margin: 0; font-weight: 400; }
.c-wyg__title .c-m { padding-top: 0.24em; margin-top: -0.24em; } /* room for the accent on "ÉT" */
.c-wyg__title .c-grot { font-size: 40px; }
.c-wyg__title .c-dl { font-size: 62px; }
.c-dl > .c-wyg__biz { display: inline-grid; } /* .c-dl > span would make it inline-block: the three would sit side by side */
.c-pick { margin-top: 28px; }
.c-pick__l { margin: 0 0 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.64; }
.c-seg { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(40, 35, 31, 0.3); }
.c-seg__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: var(--espresso); transition: translate 0.6s var(--ease-in-out); }
.c-wyg[data-biz="1"] .c-seg__thumb { translate: 100% 0; } .c-wyg[data-biz="2"] .c-seg__thumb { translate: 200% 0; }
.c-kind { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.55em; min-width: 0; padding: 0.85em 0.6em; border: 0; border-radius: 999px;
background: none; color: var(--espresso); font: inherit; font-size: 13px; font-weight: 500; line-height: 1.15; cursor: pointer; transition: color 0.35s ease 0.1s, background-color 0.25s ease; }
.c-kind:hover:not([aria-pressed="true"]) { background: rgba(40, 35, 31, 0.07); }
.c-kind:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }
.c-kind[aria-pressed="true"] { color: var(--butter); cursor: default; }
.c-kind__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-kind__ic { position: relative; flex: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(40, 35, 31, 0.24); transition: box-shadow 0.35s ease, color 0.35s ease 0.1s; }
.c-kind__ic svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* round 11: the ring around the playing one's icon fills as its turn runs */
.c-kind__bar { --p: 1; position: absolute; inset: 0; border-radius: 50%; opacity: 0; background: conic-gradient(var(--vermilion) calc(var(--p) * 1turn), transparent 0);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); }
.c-kind[aria-pressed="true"] .c-kind__ic { color: var(--vermilion); box-shadow: inset 0 0 0 1px rgba(245, 238, 220, 0.2); }
.c-kind[aria-pressed="true"] .c-kind__bar { opacity: 1; }
.c-pick__d { display: grid; overflow: hidden; margin: 12px 0 0; font-size: 14px; line-height: 1.4; }
.c-pick__d b { font-weight: 500; }
.c-pick__d b + span { opacity: 0.68; }
/* round 11 (20 Oct): the captions under the stage are one line each, under a node that follows the story: the step
playing is vermilion, the ones done are espresso, the ones to come are open (data-step, c.js). On desktop the nodes
sit on a rail that fills as the request travels; without motion all three are done and the rail is full. */
.c-wyg .c-col__n { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%; background: var(--espresso); color: var(--butter);
font-size: 11px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease; }
.c-wyg[data-step="0"] .c-col:nth-of-type(1) .c-col__n, .c-wyg[data-step="1"] .c-col:nth-of-type(2) .c-col__n, .c-wyg[data-step="2"] .c-col:nth-of-type(3) .c-col__n { background: var(--vermilion); color: var(--white); }
.c-wyg[data-step="0"] .c-col:nth-of-type(n + 2) .c-col__n, .c-wyg[data-step="1"] .c-col:nth-of-type(3) .c-col__n { background: var(--butter); color: var(--espresso); box-shadow: inset 0 0 0 1px rgba(40, 35, 31, 0.4); }
.c-wyg .c-h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.05; letter-spacing: -0.005em; }
.c-col__p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; opacity: 0.74; }
.c-col__v { display: grid; overflow: hidden; text-wrap: pretty; } /* round 12: each step's sentence rolls to the one for the business playing */
.c-wyg__rail i { position: absolute; left: 0; right: 0; top: -0.5px; height: 2px; background: var(--vermilion); transform-origin: left center; transform: scaleX(var(--p, 1)); }
@media (max-width: 1023.98px) { .c-kind__ic, .c-wyg__stage, .c-wyg__rail { display: none; } .c-kind__name { white-space: normal; text-align: center; } }
/* 01 the website */
.u-chrome { display: flex; align-items: center; gap: 0.8em; padding: 0.7em 0.9em; border-bottom: 1px solid var(--hair); }
.u-dots { display: flex; gap: 0.35em; } .u-dots i { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--hair); }
.u-addr { flex: 1; text-align: center; font-size: 0.78em; opacity: 0.6; margin-right: 2.5em; }
/* 01 the website (round 6, 19 Oct): the Lead Engine's price estimate as our demo sites run it (KERNE): pick a
pattern, slide the area, tick the extras, and the range from the owner's own price table follows; then send. */
.u-nav { display: flex; align-items: baseline; gap: 0.9em; padding: 0.7em 1.1em; font-size: 0.74em; }
.u-nav b { margin-right: auto; font-family: var(--serif); font-size: 1.5em; font-weight: 400; letter-spacing: -0.01em; }
.u-nav span { opacity: 0.6; } .u-nav .is-on { opacity: 1; padding: 0.25em 0.8em; border-radius: 99px; background: var(--espresso); color: var(--butter); white-space: nowrap; }
.u-page { padding: 0.85em 1.1em 1.1em; }
.u-prog { display: flex; align-items: center; gap: 0.7em; margin: 0 0 0.8em; font-size: 0.72em; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.u-progn { opacity: 0.5; font-variant-numeric: tabular-nums; }
.u-bar { display: flex; gap: 0.3em; margin-left: auto; }
.u-bar i { width: 1.7em; height: 3px; border-radius: 2px; background: rgba(40, 35, 31, 0.16); }
.u-bar i:nth-child(-n + 3) { background: var(--espresso); }
.u-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35em; margin-bottom: 0.8em; }
.u-tile { display: flex; align-items: center; gap: 0.45em; min-width: 0; padding: 0.5em 0.55em; border-radius: 6px; background: var(--white); box-shadow: inset 0 0 0 1px rgba(40, 35, 31, 0.28); font-size: 0.74em; white-space: nowrap; overflow: hidden; transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
.u-tile svg { flex: none; width: 1.5em; height: 1.5em; fill: currentColor; }
.u-tile.is-on { background: var(--espresso); color: var(--butter); box-shadow: none; }
.u-area { margin-bottom: 0.85em; }
.u-area p { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 0.55em; }
.u-area .u-lab { margin: 0; }
.u-m2 { font-variant-numeric: tabular-nums; }
.u-slider { --v: 0.493; position: relative; display: block; height: 4px; border-radius: 2px; background: rgba(40, 35, 31, 0.16); }
.u-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: 2px; background: var(--espresso); }
.u-thumb { position: absolute; top: 50%; left: calc(var(--v) * 100%); width: 1.05em; height: 1.05em; margin: -0.525em 0 0 -0.525em; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--espresso); }
.u-extras { display: flex; gap: 0.35em; margin-bottom: 0.8em; font-size: 0.74em; }
.u-chk { display: flex; align-items: center; gap: 0.45em; padding: 0.4em 0.65em; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(40, 35, 31, 0.28); white-space: nowrap; transition: box-shadow 0.3s ease; }
.u-chk > i { position: relative; flex: none; width: 1em; height: 1em; border-radius: 3px; box-shadow: inset 0 0 0 1.2px currentColor; transition: background-color 0.25s ease; }
.u-chk > i::after { content: ""; position: absolute; left: 0.34em; top: 0.13em; width: 0.26em; height: 0.52em; border: solid var(--butter); border-width: 0 1.5px 1.5px 0; rotate: 45deg; opacity: 0; transition: opacity 0.2s ease; }
.u-chk.is-on { box-shadow: inset 0 0 0 1px var(--espresso); }
.u-chk.is-on > i { background: var(--espresso); } .u-chk.is-on > i::after { opacity: 1; }
.u-lab { display: block; font-size: 0.72em; opacity: 0.64; margin-bottom: 0.3em; }
/* the stay: the dates as a week (arrive and leave dark, the nights between light, a taken day struck), guests as a stepper */
.u-days { margin-bottom: 0.8em; }
.u-days p { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 0.45em; }
.u-days .u-lab { margin: 0; }
.u-nights { font-variant-numeric: tabular-nums; transition: opacity 0.3s ease; }
.u-days:not(.is-set) .u-nights { opacity: 0; }
.u-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25em; }
.u-week i { padding: 0.4em 0; border-radius: 6px; background: var(--white); box-shadow: inset 0 0 0 1px rgba(40, 35, 31, 0.2); font-style: normal; font-size: 0.74em; text-align: center; font-variant-numeric: tabular-nums; transition: background-color 0.25s ease, color 0.25s ease; }
.u-week .is-off { background: none; opacity: 0.4; text-decoration: line-through; }
.u-week .is-in { background: rgba(40, 35, 31, 0.14); box-shadow: none; }
.u-week .is-a, .u-week .is-d { background: var(--espresso); color: var(--butter); box-shadow: none; }
.u-step b { display: flex; align-items: center; gap: 0.55em; margin-left: 0.2em; font-variant-numeric: tabular-nums; }
.u-step b i { font-style: normal; opacity: 0.5; }
/* the appointment: the idea as a typed field */
.u-field { display: flex; align-items: baseline; gap: 0.7em; margin: 0 0 0.7em; padding: 0.5em 0.7em; border-radius: 6px; background: var(--white); box-shadow: inset 0 0 0 1px rgba(40, 35, 31, 0.28); font-size: 0.8em; white-space: nowrap; overflow: hidden; }
.u-field .u-lab { flex: none; margin: 0; font-size: 0.9em; }
.u-field [data-type] { min-height: 1.35em; }
.u-field.is-typing [data-type]::after { content: ""; display: inline-block; width: 1px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: currentColor; }
.u-est { margin: 0 0 0.75em; padding: 0.75em 0.9em; border-radius: 6px; background: var(--espresso); color: var(--butter); }
.u-est p { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; margin: 0; font-size: 0.68em; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.u-pill { padding: 0.2em 0.7em; border: 1px solid rgba(245, 238, 220, 0.4); border-radius: 99px; letter-spacing: 0; text-transform: none; font-weight: 400; white-space: nowrap; }
.u-est b { display: block; margin-top: 0.15em; font-family: var(--serif); font-size: 1.9em; font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.u-est small { font-size: 0.7em; }
.u-send { position: relative; display: inline-grid; min-width: 6.4em; height: 2.4em; border-radius: 6px; background: var(--espresso); color: var(--butter); font-size: 0.86em; font-weight: 500; }
.u-send > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 0.45em; padding: 0 1.2em; transition: opacity 0.25s ease, translate 0.25s ease; }
.u-send__b { opacity: 0; translate: 0 0.4em; }
.u-send[data-sent="true"] .u-send__a { opacity: 0; translate: 0 -0.4em; }
.u-send[data-sent="true"] .u-send__b { opacity: 1; translate: 0 0; }
.u-tick { width: 0.42em; height: 0.75em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: 45deg; translate: 0 -0.1em; }
/* 02 the automation (round 6): the engine's own run on her request, not a conversation. Each step waits dimmed, runs
(vermilion ring), then is done (filled), and the line between fills; the clock counts the time to reply, 0:38. */
.u-run { width: 86%; }
.u-rhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; padding-bottom: 0.9em; margin-bottom: 1.1em; border-bottom: 1px solid var(--hair); }
.u-clock { text-align: right; }
.u-clock b { display: flex; align-items: center; justify-content: flex-end; gap: 0.35em; margin-top: 0.1em; font-size: 1.5em; line-height: 1; font-variant-numeric: tabular-nums; }
.u-spin, .u-done { flex: none; width: 0.55em; height: 0.55em; }
.u-spin { display: none; border: 1.5px solid var(--hair); border-top-color: var(--vermilion); border-radius: 50%; animation: u-spin 0.8s linear infinite; }
.u-done { position: relative; border-radius: 50%; background: var(--vermilion); }
.u-run[data-live="1"] .u-spin { display: block; } .u-run[data-live="1"] .u-done { display: none; }
@keyframes u-spin { to { rotate: 360deg; } }
.u-nodes { list-style: none; margin: 0; padding: 0; }
.u-node { position: relative; padding: 0 0 0.95em 1.7em; opacity: 0.34; transition: opacity 0.35s ease; }
.u-node:last-child { padding-bottom: 0; }
.u-node.is-on, .u-node.is-done { opacity: 1; }
.u-node::before { content: ""; position: absolute; left: 0; top: 0.32em; width: 0.7em; height: 0.7em; border-radius: 50%; box-sizing: border-box; box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.u-node.is-on::before { box-shadow: inset 0 0 0 1.5px var(--vermilion), 0 0 0 0.25em rgba(216, 75, 50, 0.28); }
.u-node.is-done::before { background: var(--vermilion); box-shadow: none; }
.u-node:not(:last-child)::after { content: ""; position: absolute; left: calc(0.35em - 0.5px); top: 1.2em; bottom: 0.15em; width: 1px;
background: linear-gradient(var(--vermilion), var(--vermilion)) no-repeat top / 100% 0%, var(--hair); transition: background-size 0.45s ease; }
.u-node.is-done::after { background-size: 100% 100%, auto; }
.u-node p { display: flex; align-items: baseline; gap: 1em; margin: 0; }
.u-node p b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-node time { font-size: 0.78em; font-variant-numeric: tabular-nums; opacity: 0.64; }
.u-node small { margin-top: 0.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 03 the back office (round 6): the jobs board of our own back office (New, Quote sent, Won), drawn fresh in the
site's colours. Her card lands under New already replied to, then moves along as the owner sends the quote and she
accepts; the counts follow, and her job shows under Coming up. */
.u-office { width: 88%; }
.u-obar { display: flex; align-items: center; gap: 0.9em; padding: 0.65em 1em; background: var(--espresso); color: var(--butter); font-size: 0.78em; }
.u-obar b { margin-right: auto; font-size: 1.15em; }
.u-obar span { opacity: 0.6; padding: 0.2em 0.5em; border-radius: 4px; }
.u-obar .is-on { opacity: 1; background: rgba(245, 238, 220, 0.16); }
.u-obody { padding: 0.9em 1em 1em; }
.u-today { margin: 0 0 0.8em; }
.u-today b { display: block; font-size: 1.9em; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.u-today small { margin-top: 0.35em; font-variant-numeric: tabular-nums; }
.u-board { --gap: 0.45em; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 5.1em 5.1em; gap: var(--gap); margin-bottom: 0.9em; font-size: 0.8em; }
.u-colh { display: flex; align-items: center; justify-content: space-between; gap: 0.4em; margin: 0; padding-bottom: 0.35em; border-bottom: 1px solid var(--hair); font-size: 0.9em; font-weight: 500; white-space: nowrap; }
.u-colh span { overflow: hidden; text-overflow: ellipsis; }
.u-colh i { font-style: normal; font-weight: 400; opacity: 0.6; font-variant-numeric: tabular-nums; }
.u-card { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 0.5em 0.55em; border-radius: 6px; background: var(--white); box-shadow: inset 0 0 0 1px var(--hair); }
.u-card b, .u-card small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-card small { font-size: 0.86em; }
.u-tag { align-self: flex-start; max-width: 100%; padding: 0.15em 0.45em; border-radius: 3px; font-style: normal; font-size: 0.82em; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-tag--s2 { box-shadow: inset 0 0 0 1px rgba(40, 35, 31, 0.5); }
.u-tag--s4 { background: var(--periwinkle); }
.u-tag--s6 { background: var(--espresso); color: var(--butter); }
.u-card--her { --col: 2; grid-area: 3 / 1; translate: calc(var(--col) * (100% + var(--gap))) 0; box-shadow: inset 0 0 0 1.5px var(--vermilion); }
.u-stat { display: inline-grid; justify-items: start; min-width: 0; }
.u-stat > * { grid-area: 1 / 1; opacity: 0; transition: opacity 0.3s ease; }
.u-stat[data-s="1"] .s1, .u-stat[data-s="2"] .s2, .u-stat[data-s="3"] .s3 { opacity: 1; }
/* Round 12 (20 Oct): each kind of business gets the back office it really runs on. Bookings: a calendar of the houses,
nights across the top; Anna's stay draws in across her nights. Appointments: the day planner, one column per artist;
Laura's session is pencilled in, then offered, then booked. Price estimates keep the pipeline board above.
The one that is hers says where it stands (.u-stat), and its look follows: held (dashed), deposit (periwinkle), paid or booked (espresso). */
.u-occ { display: grid; grid-template-columns: 5.4em repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(3, 3em); margin-bottom: 0.9em; font-size: 0.8em; }
.u-occ__d { padding-bottom: 0.3em; border-bottom: 1px solid var(--hair); text-align: center; line-height: 1.1; font-variant-numeric: tabular-nums; }
.u-occ__d small { display: block; font-size: 0.78em; opacity: 0.6; }
.u-occ__r { grid-column: 1; align-self: center; font-size: 0.8em; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-occ__lane { grid-column: 2 / -1; border-bottom: 1px solid var(--hair); background: repeating-linear-gradient(90deg, var(--hair) 0 1px, transparent 1px calc(100% / 7)); }
.u-stay, .u-blk { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; overflow: hidden; border-radius: 4px; line-height: 1.15; transition: background-color 0.4s ease, color 0.4s ease; }
.u-stay { align-self: center; height: 2.45em; margin: 0 0.2em; padding: 0 0.5em; transform-origin: left center; }
.u-stay--cut { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.u-stay > b, .u-stay > small, .u-blk > b, .u-blk > small, .u-stay .u-stat > *, .u-blk .u-stat > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-stay > small, .u-blk > small, .u-stay .u-stat, .u-blk .u-stat { font-size: 0.82em; }
.u-stay > small, .u-blk > small { opacity: 0.8; }
.u-stay.u-tag--s2, .u-blk.u-tag--s2 { background: var(--white); }
.u-plan { display: grid; grid-template-columns: 2em repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(14, 0.98em); column-gap: 0.35em; margin-bottom: 0.9em; font-size: 0.8em; }
.u-plan__a { grid-row: 1; margin-bottom: 0.25em; padding-bottom: 0.3em; border-bottom: 1px solid var(--hair); font-weight: 500; }
.u-plan__t { grid-column: 1; padding-top: 0.2em; font-size: 0.78em; line-height: 1; opacity: 0.6; font-variant-numeric: tabular-nums; }
.u-plan__lane { grid-column: 2 / -1; grid-row: 2 / -1; background: repeating-linear-gradient(180deg, var(--hair) 0 1px, transparent 1px calc(100% / 7)); }
.u-blk { justify-content: flex-start; margin: 0.12em 0; padding: 0.3em 0.45em; transform-origin: center top; }
.u-stay--her, .u-blk--her { z-index: 1; box-shadow: inset 0 0 0 1.5px var(--vermilion); }
:is(.u-stay--her, .u-blk--her):has(.u-stat[data-s="1"]) { background: var(--butter); box-shadow: none; outline: 1.5px dashed var(--vermilion); outline-offset: -1.5px; }
:is(.u-stay--her, .u-blk--her):has(.u-stat[data-s="2"]) { background: var(--periwinkle); }
:is(.u-stay--her, .u-blk--her):has(.u-stat[data-s="3"]) { background: var(--espresso); color: var(--butter); }
.u-plab { margin: 0 0 0.35em; font-size: 0.74em; font-weight: 500; opacity: 0.64; }
.u-soon { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45em; }
.u-soon li { display: flex; align-items: center; gap: 0.8em; }
.u-soon .u-who { flex: 1; min-width: 0; } .u-soon .u-who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-date { flex: none; width: 2.9em; padding: 0.2em 0; display: grid; justify-items: center; line-height: 1.1; border: 1px solid rgba(40, 35, 31, 0.5); border-radius: 3px; }
.u-date small { font-size: 0.6em; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; }
.u-date b { font-size: 1.1em; font-variant-numeric: tabular-nums; }
.u-soon .u-slot--new .u-date { background: var(--vermilion); border-color: var(--vermilion); color: var(--white); }
/* ---------- The product deck (18 Oct, round 2): the three cards are three chapters, dealt one at a time and each held
long enough to read: Lead Engine (keep your website), the all-in-one, and what both come with. ---------- */
.c-stack { aspect-ratio: auto; display: grid; gap: 22px; text-align: left; }
.c-stack__back, .c-stack__front { display: block; position: relative; inset: auto; }
.c-stack__back--v { background: var(--vermilion); color: var(--white); }
.c-stack__back--p { background: var(--periwinkle); color: var(--espresso); }
.c-stack__front { border: 8px solid var(--butter); background: var(--espresso); color: var(--butter); }
.c-deck { padding: 26px 24px 28px; display: grid; gap: 22px; align-content: start; }
.c-deck__k { margin: 0; font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.c-deck__t { margin: 12px 0 0; font-family: var(--serif); font-weight: 400; font-size: 38px; line-height: 0.98; letter-spacing: -0.01em; }
.c-deck__b { margin: 14px 0 0; font-size: 15px; line-height: 1.5; max-width: 34ch; }
/* Round 8 (19 Oct): the two product cards are the product, not more UI. Each draws what you get as the design system's
card stack: labelled slabs, a serif line each, the outcome inverted to espresso. Lead Engine is a chain that starts
at your own website (a dashed slab: yours, as it is), runs through the engine (its reply clock fills) and ends in your
back office, a vermilion dot travelling the wire. The all-in-one is the same three layers fused into one object,
opening and closing again: built as one. Flat states only; still under reduced motion. */
.d-chain, .d-fused { display: grid; align-content: center; }
@media (max-width: 1023.98px) { .d-chain, .d-fused { --s: 1px; } } /* desktop takes the stage's --s */
.d-slab, .d-layer { position: relative; display: grid; gap: calc(6 * var(--s)); padding: calc(14 * var(--s)) calc(18 * var(--s)) calc(16 * var(--s)); }
.d-slab small, .d-layer small { font-size: calc(11 * var(--s)); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; opacity: 0.8; }
.d-slab small b, .d-layer small b { font-weight: 500; }
.d-slab em, .d-layer em { font-family: var(--serif); font-style: normal; font-size: calc(30 * var(--s)); line-height: 0.95; letter-spacing: -0.01em; white-space: nowrap; }
/* Lead Engine: the chain */
.d-slab--yours { outline: 1.5px dashed rgba(255, 255, 255, 0.75); outline-offset: -1.5px; }
.d-slab--engine { background: var(--white); color: var(--espresso); padding-right: calc(76 * var(--s)); }
.d-slab--engine small { opacity: 0.6; }
.d-slab--out { background: var(--espresso); color: var(--butter); }
.d-clock { --a: 1; position: absolute; right: calc(18 * var(--s)); top: 50%; translate: 0 -50%; display: grid; justify-items: center; gap: calc(4 * var(--s));
font-size: calc(12 * var(--s)); font-weight: 500; font-variant-numeric: tabular-nums; }
.d-clock i { width: calc(30 * var(--s)); height: calc(30 * var(--s)); border-radius: 50%;
background: conic-gradient(var(--vermilion) calc(var(--a) * 360deg), rgba(40, 35, 31, 0.12) 0); -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 64%); mask: radial-gradient(closest-side, transparent 62%, #000 64%); }
.d-wire { position: relative; justify-self: start; margin-left: calc(26 * var(--s)); width: 1.5px; height: calc(26 * var(--s)); background: rgba(255, 255, 255, 0.7); }
.d-wire i { position: absolute; left: 50%; top: 100%; width: calc(9 * var(--s)); height: calc(9 * var(--s)); margin: calc(-4.5 * var(--s)) 0 0 calc(-4.5 * var(--s)); border-radius: 50%; background: var(--white); }
/* All-in-one: the fused stack */
.d-fused { position: relative; }
.d-layer { --o: 1; box-shadow: inset 0 0 0 1px rgba(40, 35, 31, 0.28); }
/* closed, the back two show only their label like folder tabs; their lines appear as the stack opens */
.d-layer:not(:nth-child(3)) em { opacity: clamp(0, (var(--o) - 0.7) * 3.4, 1); }
.d-layer:nth-child(1) { background: var(--butter); }
.d-layer:nth-child(2) { background: var(--white); margin: calc((-40 + 40 * var(--o)) * var(--s)) 0 0 calc(22 * var(--s)); }
.d-layer:nth-child(3) { background: var(--espresso); color: var(--butter); box-shadow: none; margin: calc((-40 + 40 * var(--o)) * var(--s)) 0 0 calc(44 * var(--s)); }
.d-one { display: flex; align-items: center; gap: calc(8 * var(--s)); margin-top: calc(16 * var(--s)); font-size: calc(12 * var(--s)); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.d-one i { width: calc(9 * var(--s)); height: calc(9 * var(--s)); border-radius: 50%; background: var(--vermilion); }
@property --a { syntax: ""; inherits: true; initial-value: 1; }
@property --o { syntax: ""; inherits: true; initial-value: 1; }
@media (prefers-reduced-motion: no-preference) {
.d-wire:nth-of-type(2) i { animation: d-run 4.8s linear infinite; }
.d-wire:nth-of-type(4) i { animation: d-run 4.8s linear infinite 1.9s; }
.d-clock { animation: d-clock 4.8s linear infinite; }
.d-slab--out em { animation: d-land 4.8s steps(1) infinite; }
.d-layer { animation: d-open 6.4s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
}
@keyframes d-run { 0% { top: 0; opacity: 0; } 4% { opacity: 1; } 22% { top: 100%; opacity: 1; } 26%, 100% { top: 100%; opacity: 0; } }
@keyframes d-clock { 0%, 20% { --a: 0; } 40%, 100% { --a: 1; } }
@keyframes d-land { 0%, 60% { opacity: 0.55; } 61%, 100% { opacity: 1; } }
@keyframes d-open { 0%, 18% { --o: 0; } 40%, 70% { --o: 1; } 92%, 100% { --o: 0; } }
.c-deck__list { list-style: none; margin: 0; padding: 0; display: grid; }
.c-deck__list li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid rgba(245, 238, 220, 0.22); }
.c-deck__list b { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1; }
.c-deck__list span { font-size: 14px; opacity: 0.8; }
@media (min-width: 1024px) {
.c-stack { display: block; }
.c-stack__back, .c-stack__front { position: absolute; }
.c-stack__back { left: calc(10 * var(--s)); top: calc(10 * var(--s)); }
.c-stack__front { inset: 0; border-width: 10px; }
.c-deck { grid-template-columns: 1fr 0.92fr; align-items: center; align-content: stretch; gap: calc(44 * var(--s)); padding: calc(44 * var(--s)) calc(50 * var(--s)); }
.c-deck__k { font-size: max(12px, calc(14 * var(--s))); }
.c-deck__t { margin-top: calc(18 * var(--s)); font-size: calc(62 * var(--s)); }
.c-deck__b { margin-top: calc(20 * var(--s)); font-size: max(14px, calc(18 * var(--s))); }
.c-deck__list li { padding: calc(16 * var(--s)) 0; gap: calc(4 * var(--s)); }
.c-deck__list b { font-size: calc(34 * var(--s)); }
.c-deck__list span { font-size: max(13px, calc(16 * var(--s))); }
}