/* Runup — first page (hero), design prototype. Desktop is drawn on the founder's reference frame (1386 x 770),
   in frame units: 1u = frame width / 1386. Mobile has its own layout below. */
/* one type family across every page: Inter with optical sizes (its Display cut at large sizes) and its true italic */
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-opsz-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-opsz-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
/* serif used inside the example screens */
@font-face { font-family: "Sentient"; src: url("fonts/Sentient-Variable.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }

:root {
  --ink: #0b0b0b;
  --paper: #ffffff;
  --u: calc(min(100vw, 1600px) / 1386);
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- hero ---------- */
.hero { --fade: 46svh; position: relative; overflow: hidden; isolation: isolate; padding-bottom: var(--fade); }
/* the fade: the colour carries on below the first screen and eases out to white */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--fade) * 1.12); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .02) 6%, rgba(255, 255, 255, .07) 12%, rgba(255, 255, 255, .15) 18%, rgba(255, 255, 255, .26) 24%, rgba(255, 255, 255, .39) 30%, rgba(255, 255, 255, .53) 37%, rgba(255, 255, 255, .67) 44%, rgba(255, 255, 255, .79) 51%, rgba(255, 255, 255, .89) 58%, rgba(255, 255, 255, .95) 65%, rgba(255, 255, 255, .985) 72%, #fff 78%); }
.frame { --dy: max(0px, calc((100svh - 770 * var(--u)) / 2)); position: relative; width: calc(1386 * var(--u)); height: max(calc(770 * var(--u)), 100svh); margin: 0 auto; }
.frame__art { position: absolute; left: 0; top: var(--dy); width: 100%; height: calc(770 * var(--u)); }

/* colour field: CSS fallback first, canvas with grain on top once rendered */
.field {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 100% 100%, rgba(251, 201, 54, .9), transparent 60%),
    radial-gradient(45% 60% at 72% 100%, rgba(183, 142, 249, .85), transparent 70%),
    radial-gradient(40% 55% at 47% 102%, rgba(249, 122, 42, .9), transparent 70%),
    radial-gradient(45% 70% at 95% 55%, rgba(63, 214, 241, .8), transparent 70%),
    var(--paper);
  -webkit-mask-image: linear-gradient(147deg, transparent 52%, #000 74%);
          mask-image: linear-gradient(147deg, transparent 52%, #000 74%);
  --field-frame: auto; --field-recipe: desktop;
}
.field > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.field.is-rendered { background: var(--paper); -webkit-mask-image: none; mask-image: none; }

/* nav */
.nav { position: absolute; left: 0; top: 0; right: 0; height: calc(96 * var(--u)); }
.logo { position: absolute; left: calc(55 * var(--u)); top: calc(36 * var(--u)); width: calc(134 * var(--u)); display: block; border-radius: 4px; }
.logo img { width: 100%; height: auto; display: block; }
.nav__links { position: absolute; left: calc(223 * var(--u)); top: calc(33 * var(--u)); margin: 0; padding: 0; list-style: none; display: flex; gap: calc(34.5 * var(--u)); font-size: max(14px, calc(16.6 * var(--u))); line-height: calc(24 * var(--u)); letter-spacing: -0.006em; }
.nav__links a { display: block; }
.nav__links a:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.nav__menu { display: none; }

/* headline with the rotating word */
.headline { position: absolute; left: calc(86 * var(--u)); top: calc(230 * var(--u)); margin: 0; font-weight: 420; font-size: calc(84 * var(--u)); line-height: 1; letter-spacing: -0.034em; font-optical-sizing: none; white-space: nowrap; }
/* ?hero=bold — the bold variant (set like "Be the next…"), kept for comparison */
.hero-bold .headline { font-weight: 860; letter-spacing: -0.041em; font-optical-sizing: auto; }
.hero-bold .rotator__sizer, .hero-bold .rotator__word { font-style: italic; letter-spacing: -0.036em; }
.hero-bold .rotator { margin-left: 0.27em; }
.rotator { position: relative; display: inline-block; margin-left: 0.44em; vertical-align: baseline; }
.rotator__sizer { visibility: hidden; }
.rotator__word { position: absolute; left: 0; top: 0; white-space: nowrap; transition: transform .62s cubic-bezier(.22, 1, .36, 1), opacity .5s ease; }
.rotator__word.is-below { transform: translateY(.42em); opacity: 0; transition: none; }
.rotator__word.is-above { transform: translateY(-.42em); opacity: 0; }

.sub { position: absolute; left: calc(88 * var(--u)); top: calc(431 * var(--u)); width: calc(600 * var(--u)); margin: 0; font-size: max(15px, calc(18.4 * var(--u))); line-height: max(20px, calc(24 * var(--u))); letter-spacing: -0.008em; }
.ctas { position: absolute; left: calc(87 * var(--u)); top: calc(520 * var(--u)); display: flex; gap: calc(10 * var(--u)); }
.btn { display: inline-flex; align-items: center; justify-content: center; height: max(38px, calc(40 * var(--u))); padding: 0 max(14px, calc(17 * var(--u))); border-radius: 999px; background: var(--ink); color: #fff; font-size: max(13px, calc(13.2 * var(--u))); font-weight: 450; letter-spacing: -0.004em; white-space: nowrap; transition: background-color .2s ease, transform .2s ease; }
.btn:hover { background: #2a2a2a; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline-offset: 3px; border-radius: 999px; }

/* the team */
.cast { position: absolute; inset: 0; pointer-events: none; }
.char { --cw: calc(var(--dw) * var(--u)); position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: var(--cw); aspect-ratio: var(--ar); }
.char img { width: 100%; height: 100%; display: block; }
.char__body { position: absolute; inset: 0; animation: bob var(--bob, 6s) ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
.eyes { position: absolute; inset: 0; transform: translate(var(--lx, 0px), var(--ly, 0px)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.eye { position: absolute; left: calc(var(--ex) * 1%); top: calc(var(--ey) * 1%); width: calc(var(--el) / 100 * var(--cw)); height: calc(var(--et) / 100 * var(--cw)); background: #fff; border-radius: 999px; transform: translate(-50%, -50%) rotate(var(--ea)) scaleX(var(--blink, 1)); transition: transform .09s ease-in; }
.char.is-blinking { --blink: .28; }
.char--cloud { --bob: 6.2s; } .char--hex { --bob: 5.4s; } .char--gear { --bob: 6.8s; }
.char--orb { --bob: 5.8s; } .char--burst { --bob: 7.2s; } .char--tri { --bob: 6.4s; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(calc(-6 * var(--u))) rotate(1.6deg); }
}

/* pause control for the moving parts (WCAG 2.2.2) */

/* the next page is designed separately */
.next { min-height: 40vh; display: grid; place-items: center; color: #6b6b6b; font-size: 14px; border-top: 1px solid #eee; }

/* ---------- mobile ---------- */
@media (max-width: 1023px) {
  .frame { --mv: min(1vw, 6.4px); width: auto; height: auto; min-height: 100svh; padding: 14px 16px 36svh; display: flex; flex-direction: column; }
  .hero { --fade: 44svh; }
  .hero::after { background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .03) 5%, rgba(255, 255, 255, .1) 10%, rgba(255, 255, 255, .22) 15%, rgba(255, 255, 255, .37) 20%, rgba(255, 255, 255, .53) 25%, rgba(255, 255, 255, .68) 30%, rgba(255, 255, 255, .81) 35%, rgba(255, 255, 255, .9) 40%, rgba(255, 255, 255, .96) 45%, rgba(255, 255, 255, .99) 50%, #fff 55%); }
  .frame__art { display: contents; }
  .br-d { display: none; }
  .headline, .cast, .sub, .ctas { width: 100%; max-width: 640px; }
  /* mobile shows the lower-right part of the same composition: a wider frame, anchored low */
  .field { --field-frame: br 0.47 0.5; }
  .nav { position: relative; height: 54px; display: flex; align-items: center; justify-content: space-between; }
  .logo { position: relative; left: 0; top: 0; width: 100px; }
  .nav__menu { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 500 14px/1 var(--sans); cursor: pointer; }
  .nav__links { display: none; position: absolute; left: 0; right: 0; top: 60px; z-index: 5; flex-direction: column; gap: 0; padding: 6px; background: #fff; border: 1px solid #ececec; border-radius: 16px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .25); font-size: 17px; line-height: 1.2; }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 14px 12px; border-radius: 10px; }
  .headline { position: relative; left: auto; top: auto; margin-top: 9svh; font-size: clamp(40px, 11.2vw, 64px); line-height: 1.02; letter-spacing: -0.04em; white-space: normal; }
  .headline__l1 { display: block; }
  .rotator { margin-left: 0.2em; }
  .cast { position: relative; inset: auto; height: calc(34 * var(--mv)); margin-top: calc(-3 * var(--mv)); }
  .char { --cw: calc(var(--mw) * var(--mv)); left: calc(var(--mx) * 1%); top: calc(var(--my) * var(--mv)); }
  .sub { position: relative; left: auto; top: auto; max-width: 30em; margin-top: 2px; font-size: 17px; line-height: 1.4; }
  .ctas { position: relative; left: auto; top: auto; margin-top: 22px; gap: 8px; flex-wrap: wrap; }
  .btn { height: 46px; padding: 0 18px; font-size: 14.5px; }
  @keyframes bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(1.6deg); } }
}

/* ?freeze: the reference pose for side-by-side captures (no bob, no rotation) */
.is-frozen .char__body { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .char__body { animation: none; }
  .eyes, .eye, .btn { transition: none; }
}

/* =====================================================================================================
   Page 2 — "Be the next…": examples carousel. Drawn on the founder's reference frame (2000 x 1117):
   1v = frame width / 2000. Phone screens are drawn in the same reference pixels, scaled by --s.
   ===================================================================================================== */
:root { --v: calc(min(100vw, 1600px) / 2000); --vt: calc(min(100vw, 2400px) / 2000); --bg2: #ffffff; }

/* sticky header: appears once the hero's own nav has scrolled away */
.bar { position: fixed; z-index: 50; left: 0; right: 0; top: 0; height: calc(105 * var(--v)); background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .05); transform: translateY(-102%); visibility: hidden; transition: transform .35s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .35s; }
.bar.is-shown { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.bar__in { position: relative; width: calc(2000 * var(--v)); height: 100%; margin: 0 auto; }
.bar__logo { position: absolute; left: calc(113 * var(--v)); top: calc(35 * var(--v)); width: calc(141 * var(--v)); display: block; }
.bar__logo img { width: 100%; height: auto; display: block; }
.bar__links { position: absolute; left: calc(50% - 5 * var(--v)); top: calc(37 * var(--v)); transform: translateX(-50%); display: flex; gap: calc(55 * var(--v)); margin: 0; padding: 0; list-style: none; font-size: calc(20.3 * var(--v)); line-height: calc(30 * var(--v)); letter-spacing: -0.008em; }
.bar__links a:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.bar__cta { position: absolute; right: calc(109 * var(--v)); top: calc(27 * var(--v)); height: calc(50 * var(--v)); padding: 0 calc(28 * var(--v)); font-size: calc(19.5 * var(--v)); font-weight: 450; }
.bar__menu { display: none; }

.examples { position: relative; background: var(--bg2); overflow: hidden; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.examples__frame { position: relative; width: calc(2000 * var(--v)); height: calc(330 * var(--v)); margin: 0 auto; }
.bt-title { position: absolute; left: 50%; top: calc(173 * var(--v)); transform: translateX(-50%); margin: 0; font-weight: 620; font-size: calc(121 * var(--v)); line-height: 1; letter-spacing: -0.038em; white-space: nowrap; }
.bt-title em { font-style: italic; letter-spacing: -0.033em; }

.track { position: relative; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  --pad: calc(72 * var(--vt)); padding: calc(12 * var(--vt)) 0 calc(54 * var(--vt)); scroll-padding-left: var(--pad); }
.track::-webkit-scrollbar { display: none; }
.track:focus-visible { outline-offset: -4px; }
.cards { display: flex; gap: calc(30 * var(--vt)); margin: 0; padding: 0 var(--pad); list-style: none; width: max-content; }
.card { --s: var(--vt); flex: none; width: calc(306 * var(--s)); padding-left: calc(2 * var(--s)); scroll-snap-align: start; }
.card__label { display: flex; align-items: center; gap: calc(21 * var(--vt)); height: calc(48 * var(--vt)); margin: 0 0 calc(18 * var(--vt)) calc(10 * var(--vt)); font-size: calc(19.4 * var(--vt)); font-weight: 450; letter-spacing: -0.01em; white-space: nowrap; }
.ico { width: calc(48 * var(--vt)); height: calc(48 * var(--vt)); border-radius: calc(12 * var(--vt)); display: grid; place-items: center; flex: none; color: #fff; background: var(--c); background-image: linear-gradient(160deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 60%); }
.ico svg { width: 52%; height: 52%; }

/* the phone */
.phone { position: relative; width: calc(302 * var(--s)); height: calc(686 * var(--s)); border-radius: calc(49 * var(--s)); background: #070707;
  box-shadow: 0 0 0 calc(1.2 * var(--s)) #9c9c9c, 0 0 0 calc(2.6 * var(--s)) #d4d4d2, 0 calc(26 * var(--s)) calc(40 * var(--s)) calc(-24 * var(--s)) rgba(0, 0, 0, .28); }
.phone::before, .phone::after { content: ""; position: absolute; left: calc(-3.6 * var(--s)); width: calc(2.4 * var(--s)); border-radius: 2px; background: #b8b8b6; }
.phone::before { top: calc(118 * var(--s)); height: calc(46 * var(--s)); }
.phone::after { top: calc(176 * var(--s)); height: calc(46 * var(--s)); }
.screen { position: absolute; inset: calc(9 * var(--s)); border-radius: calc(40 * var(--s)); overflow: hidden; background: #fff; color: #111; font-family: var(--sans); }
.screen--dark { background: #0d0d0d; color: #fff; }
.screen--cream { background: #f6f1ea; }

/* everything inside a screen is placed in reference pixels: x, baseline, font size (and line height) */
.t { position: absolute; left: calc(var(--x) * var(--s)); top: calc((var(--b) - (var(--lh, var(--fs)) - var(--fs) * var(--sum, 1.21)) / 2 - var(--fs) * var(--asc, .969)) * var(--s));
  font-size: calc(var(--fs) * var(--s)); line-height: calc(var(--lh, var(--fs)) * var(--s)); white-space: nowrap; font-weight: var(--w, 400); letter-spacing: var(--ls, -0.01em); }
.t.r { left: auto; right: calc(var(--r) * var(--s)); }
.t.c { left: calc(var(--cx) * var(--s)); transform: translateX(-50%); }
.serif { font-family: "Sentient", Georgia, serif; --asc: .93; --sum: 1.2; letter-spacing: -0.012em; }
.bx { position: absolute; left: calc(var(--x) * var(--s)); top: calc(var(--y) * var(--s)); width: calc(var(--w) * var(--s)); height: calc(var(--h) * var(--s)); border-radius: calc(var(--rd, 0) * var(--s)); }
img.bx { object-fit: cover; display: block; }
.ui-ico { position: absolute; left: calc(var(--x) * var(--s)); top: calc(var(--y) * var(--s)); width: calc(var(--z, 18) * var(--s)); height: calc(var(--z, 18) * var(--s)); transform: translate(-50%, -50%); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-ico.f { fill: currentColor; stroke: none; }
.pill { position: absolute; left: calc(var(--x) * var(--s)); top: calc(var(--y) * var(--s)); width: calc(var(--w) * var(--s)); height: calc(var(--h) * var(--s)); border-radius: calc(var(--rd, 999) * var(--s)); display: grid; place-items: center; font-size: calc(var(--fs, 14) * var(--s)); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.sb { position: absolute; left: 0; right: 0; top: 0; height: calc(40 * var(--s)); }
.sb .time { position: absolute; left: calc(26 * var(--s)); top: calc(13 * var(--s)); font-size: calc(13 * var(--s)); line-height: 1; font-weight: 600; letter-spacing: 0; }
.sb svg { position: absolute; right: calc(16 * var(--s)); top: calc(14 * var(--s)); width: calc(52 * var(--s)); height: calc(12 * var(--s)); fill: currentColor; }
.stars { color: #f5b301; }
.screen--dark .stars { color: #fff; }

@media (max-width: 1023px) {
  :root { --v: calc(100vw / 860); }
  .bar { height: 60px; }
  .bar__in { width: auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; }
  .bar__logo { position: static; width: 100px; }
  .bar__links { display: none; }
  .bar__cta { position: static; height: 40px; padding: 0 16px; font-size: 14px; }
  .examples__frame { width: auto; height: auto; padding: 56px 16px 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
  .bt-title { position: static; transform: none; font-size: clamp(44px, 12.5vw, 86px); letter-spacing: -0.04em; }
  .only-examples .examples__frame { padding-top: 92px; }
  .track { --pad: 16px; padding: 8px 0 32px; }
  .cards { gap: 14px; }
  .card { --s: calc(min(66vw, 280px) / 306); }
  .card__label { gap: 10px; height: 34px; margin: 0 0 12px 4px; font-size: 15px; }
  .ico { width: 34px; height: 34px; border-radius: 9px; }
}
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } .track { scroll-behavior: auto; } }
.tile { overflow: hidden; }
.tile--lines { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .0) 0 calc(9 * var(--s)), rgba(255, 255, 255, .55) calc(9 * var(--s)) calc(10.4 * var(--s))), radial-gradient(circle at 70% 30%, rgba(255, 255, 255, .5) 0 calc(14 * var(--s)), transparent calc(15 * var(--s))); }

/* capture helper: page 2 alone, header showing */
.only-examples .hero, .only-examples .next { display: none; }
.only-examples .bar { transform: none; visibility: visible; transition: none; position: absolute; }

/* page 2 rises into view as you arrive (JS adds .js-reveal; reduced motion and no-JS show it straight away) */
.js-reveal .reveal { opacity: 0; translate: 0 calc(34px + 2vh); transition: opacity .9s cubic-bezier(.22, 1, .36, 1), translate .9s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--ri, 0) * 70ms); }
.js-reveal .examples.is-in .reveal { opacity: 1; translate: 0 0; }

/* =====================================================================================================
   Page 3 — the process. Drawn on the founder's reference (752 x 1344): 1q = frame width / 752.
   One spine (the project moving through time), short coloured branches (work starting), small agents,
   pieces of the business appearing. The spine and branches draw with the scroll (process.js).
   ===================================================================================================== */
:root { --q: calc(min(100vw, 1600px) / 752); --p-ink: #26211d; --p-grey: #6f6962; --p-spine: #3b322c; }
.process { position: relative; background: #fff; padding: 16svh 0 32svh; }
.process__frame { position: relative; width: calc(752 * var(--q)); height: calc(1352 * var(--q)); margin: 0 auto; }
.p-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.p-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.p-spine { stroke: var(--p-spine); stroke-width: 2.6px; }
.p-branch { stroke-width: 1.9px; }
.p-steps { list-style: none; margin: 0; padding: 0; }
.p-steps p, .p-steps dl, .p-steps dd { margin: 0; }
.pa { position: absolute; z-index: 1; left: calc(var(--x, 0) * var(--q)); top: calc(var(--y, 0) * var(--q)); }

/* A · the founder's message */
.p-bubble { width: calc(164 * var(--q)); height: calc(27 * var(--q)); border-radius: calc(9 * var(--q)); background: #f2f1ef; display: grid; place-items: center; font-size: calc(8.8 * var(--q)); line-height: 1; color: #2b2723; letter-spacing: -0.006em; white-space: nowrap; }
.p-sent { font-size: calc(6.2 * var(--q)); line-height: 1.3; color: #a39d95; }

/* on-spine moments: the line passes behind them */
.p-label { left: calc(376.5 * var(--q)); transform: translateX(-50%); padding: 0 calc(6 * var(--q)); background: #fff; font-size: calc(8.4 * var(--q)); line-height: 1.45; color: var(--p-grey); white-space: nowrap; }

/* agent + pointer + status */
.p-head { display: flex; align-items: center; white-space: nowrap; }
.p-agent { height: calc(20 * var(--q)); width: auto; display: block; flex: none; }
.p-cursor { width: calc(5 * var(--q)); height: calc(6 * var(--q)); margin: 0 calc(12 * var(--q)) 0 calc(4 * var(--q)); background: var(--c); clip-path: polygon(0 0, 100% 50%, 0 100%); flex: none; }
.p-status { font-size: max(12px, calc(8 * var(--q))); line-height: 1.2; color: var(--p-grey); letter-spacing: -0.004em; }

/* typographic outputs */
.p-lines p { font-family: "Sentient", Georgia, serif; font-size: calc(12.3 * var(--q)); line-height: calc(17.5 * var(--q)); color: var(--p-ink); letter-spacing: -0.01em; white-space: nowrap; }

/* E · brand direction: the supplied LUMA board, shown as it is */
.p-board { width: calc(272 * var(--q)); height: auto; aspect-ratio: 1344 / 752; display: block; border-radius: calc(5 * var(--q)); box-shadow: 0 0 0 1px rgba(40, 50, 45, .06), 0 calc(14 * var(--q)) calc(28 * var(--q)) calc(-16 * var(--q)) rgba(40, 50, 45, .3); }

/* F · suppliers */
.p-table { width: calc(272 * var(--q)); font-size: max(12px, calc(7.8 * var(--q))); color: #4a443e; }
.p-table div { display: grid; grid-template-columns: calc(98 * var(--q)) 1fr; align-items: center; height: calc(31 * var(--q)); }
.p-table div + div { border-top: 1px solid #ecebe8; }
.p-table dt, .p-table dd { white-space: nowrap; }

/* G · economics */
.p-nums { display: flex; }
.p-nums div { display: flex; flex-direction: column; }
.p-nums div:nth-child(1) { width: calc(84 * var(--q)); }
.p-nums div:nth-child(2) { width: calc(101 * var(--q)); }
.p-nums dd { order: 1; font-family: "Sentient", Georgia, serif; font-size: calc(21 * var(--q)); line-height: 1; letter-spacing: -0.02em; color: var(--p-ink); }
.p-nums dt { order: 2; margin-top: calc(6.5 * var(--q)); font-size: max(12px, calc(7.4 * var(--q))); line-height: 1.3; color: #77716b; }

/* H · the LUMA product page, rebuilt in HTML from the founder's storefront reference (photos as supplied) */
.p-pdp { --luma: #12403b; width: calc(276 * var(--q)); height: calc(178 * var(--q)); border-radius: calc(7 * var(--q)); background: #faf9f6; overflow: hidden;
  box-shadow: 0 0 0 1px #e9e7e2, 0 calc(14 * var(--q)) calc(30 * var(--q)) calc(-16 * var(--q)) rgba(40, 50, 45, .26); }
.p-pdp > *, .p-pdp__info > * { position: absolute; margin: 0; }
.p-pdp__chrome { left: 0; right: 0; top: 0; height: calc(14 * var(--q)); background: #fff; border-bottom: 1px solid #edebe7; display: flex; align-items: center; gap: calc(2.6 * var(--q)); padding-left: calc(7 * var(--q)); }
.p-pdp__chrome i { width: calc(3.4 * var(--q)); height: calc(3.4 * var(--q)); border-radius: 50%; background: #e2dfda; }
.p-pdp__chrome span { position: absolute; left: 50%; transform: translateX(-50%); padding: calc(1.4 * var(--q)) calc(9 * var(--q)); border-radius: 999px; background: #f3f2ef; font-size: calc(4.4 * var(--q)); color: #8b867e; white-space: nowrap; }
.p-pdp__bar { left: 0; right: 0; top: calc(14 * var(--q)); height: calc(17 * var(--q)); padding: 0 calc(11 * var(--q)); display: flex; align-items: center; gap: calc(7 * var(--q)); border-bottom: 1px solid #ebe8e3; }
.p-pdp__logo { font-family: "Sentient", Georgia, serif; font-size: calc(9 * var(--q)); letter-spacing: .26em; color: var(--luma); margin-right: auto; }
.p-pdp__nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: calc(11 * var(--q)); font-size: calc(4.8 * var(--q)); color: #2f2f2c; }
.p-pdp__bar svg { width: calc(7 * var(--q)); height: calc(7 * var(--q)); fill: none; stroke: #2f2f2c; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.p-pdp__thumbs { left: calc(11 * var(--q)); top: calc(39 * var(--q)); display: flex; flex-direction: column; gap: calc(3 * var(--q)); }
.p-pdp__thumbs img { width: calc(18 * var(--q)); height: calc(20 * var(--q)); object-fit: cover; display: block; }
.p-pdp__thumbs img.on { outline: 1px solid var(--luma); outline-offset: calc(.8 * var(--q)); }
.p-pdp__img { left: calc(34 * var(--q)); top: calc(39 * var(--q)); width: calc(110 * var(--q)); height: calc(128 * var(--q)); object-fit: cover; object-position: 44% 50%; display: block; }
.p-pdp__info { position: absolute; left: calc(156 * var(--q)); right: calc(11 * var(--q)); top: calc(42 * var(--q)); bottom: 0; }
.p-pdp__title { top: 0; font-family: "Sentient", Georgia, serif; font-size: calc(12.5 * var(--q)); line-height: 1; color: var(--luma); letter-spacing: -0.01em; white-space: nowrap; }
.p-pdp__price { top: calc(17 * var(--q)); font-size: calc(8 * var(--q)); line-height: 1; color: #1f1f1d; }
.p-pdp__size { top: calc(29 * var(--q)); font-size: calc(4.6 * var(--q)); color: #77746e; }
.p-pdp__note { top: calc(39 * var(--q)); right: 0; font-size: calc(4.6 * var(--q)); line-height: 1.5; color: #5d5a55; }
.p-pdp__btn { top: calc(55 * var(--q)); left: 0; right: 0; height: calc(15 * var(--q)); background: #141414; color: #fff; display: grid; place-items: center; font-size: max(10px, calc(5.4 * var(--q))); letter-spacing: .01em; }
.p-pdp__perks { top: calc(76 * var(--q)); left: 0; right: 0; display: flex; gap: calc(7 * var(--q)); font-size: calc(3.9 * var(--q)); color: #3d3b37; white-space: nowrap; }
.p-pdp__perks span { display: flex; align-items: center; gap: calc(2.4 * var(--q)); }
.p-pdp__perks span + span { padding-left: calc(7 * var(--q)); border-left: 1px solid #e3e0da; }
.p-pdp__perks svg { width: calc(6 * var(--q)); height: calc(6 * var(--q)); fill: none; stroke: #3d3b37; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.p-pdp__acc { top: calc(87 * var(--q)); left: 0; right: 0; display: flex; flex-direction: column; font-size: calc(4.6 * var(--q)); color: #2f2f2c; }
.p-pdp__acc span { position: relative; height: calc(12 * var(--q)); display: flex; align-items: center; border-top: 1px solid #e6e3dd; }
.p-pdp__acc span:last-child { border-bottom: 1px solid #e6e3dd; }
.p-pdp__acc span::after { content: ""; position: absolute; right: calc(1 * var(--q)); width: calc(5 * var(--q)); height: calc(5 * var(--q));
  background: linear-gradient(#3d3b37, #3d3b37) center / 100% 1px no-repeat, linear-gradient(#3d3b37, #3d3b37) center / 1px 100% no-repeat; }

/* I · launch content: two creator videos and the campaign image, as supplied, in a small fanned deck */
.p-deck { width: calc(204 * var(--q)); height: calc(128 * var(--q)); }
.p-card { position: absolute; margin: 0; overflow: hidden; border-radius: calc(6 * var(--q)); background: #e9e6e0; transform-origin: 50% 100%;
  box-shadow: 0 calc(8 * var(--q)) calc(18 * var(--q)) calc(-8 * var(--q)) rgba(30, 40, 38, .38), 0 0 0 1px rgba(0, 0, 0, .05); }
.p-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.p-card--a { left: 0; top: calc(12 * var(--q)); width: calc(81 * var(--q)); height: calc(108 * var(--q)); transform: rotate(-5deg); z-index: 1; }
.p-card--c { left: calc(138 * var(--q)); top: calc(8 * var(--q)); width: calc(66 * var(--q)); height: calc(117 * var(--q)); transform: rotate(5deg); z-index: 2; }
.p-card--b { left: calc(64 * var(--q)); top: 0; width: calc(86 * var(--q)); height: calc(115 * var(--q)); z-index: 3; }
.p-chip { position: absolute; z-index: 1; left: calc(4 * var(--q)); top: calc(4 * var(--q)); display: flex; align-items: center; gap: calc(1.8 * var(--q)); padding: calc(1.6 * var(--q)) calc(3.6 * var(--q)) calc(1.6 * var(--q)) calc(2.6 * var(--q));
  border-radius: 999px; background: rgba(255, 255, 255, .9); color: #1f1f1d; font-size: max(9px, calc(4 * var(--q))); font-weight: 500; line-height: 1; white-space: nowrap; }
.p-chip svg { width: calc(5 * var(--q)); height: calc(5 * var(--q)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.p-vtoggle { position: absolute; z-index: 1; right: calc(4 * var(--q)); bottom: calc(4 * var(--q)); width: max(22px, calc(11 * var(--q))); height: max(22px, calc(11 * var(--q))); border-radius: 50%;
  border: 0; padding: 0; display: grid; place-items: center; background: rgba(20, 20, 20, .38); color: #fff; cursor: pointer; }
.p-vtoggle svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.p-vtoggle .i-play { fill: currentColor; stroke: none; margin-left: 8%; }
.p-vtoggle[aria-pressed="false"] .i-play, .p-vtoggle[aria-pressed="true"] .i-pause { display: none; }
.p-vtoggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.p-note { left: calc(376.5 * var(--q)); transform: translateX(-50%); font-size: max(11px, calc(6.4 * var(--q))); color: #a39d95; white-space: nowrap; }

/* reveals: tied to the drawing line by process.js (no JS or reduced motion: everything shows) */
.js-process .process .rv { opacity: 0; translate: 0 12px; transition: opacity .6s cubic-bezier(.22, 1, .36, 1), translate .6s cubic-bezier(.22, 1, .36, 1); }
.js-process .process .rv.on { opacity: 1; translate: 0 0; }

/* ---------- smaller screens: the spine moves to the left, everything reads in one column ---------- */
@media (max-width: 1099px) {
  :root { --q: min(2px, calc((100vw - 80px) / 212)); }
  .process { padding: 12svh 0 20svh; }
  .process__frame { width: auto; height: auto; margin: 0; padding: 0 16px 0 60px; }
  .pa { position: relative; left: auto; top: auto; }
  .p-founder { margin-left: -44px; }
  .p-bubble { width: max-content; height: auto; padding: 11px 16px; border-radius: 14px; font-size: 15px; }
  .p-steps .p-sent { margin: 6px 0 0 6px; font-size: 11px; }
  .p-steps .p-label { left: auto; transform: none; padding: 0; background: none; margin: 40px 0 36px; font-size: 14px; }
  .p-step[data-kind="branch"], .p-step[data-kind="plain"] { margin-top: 40px; }
  .p-step[data-kind="after"] { margin-top: 4px; }
  .p-lines, .p-table, .p-nums, .p-board, .p-deck { margin-top: 14px; }
  .p-lines p { white-space: normal; }
  .p-board { width: 100%; max-width: 560px; border-radius: 8px; }
  .p-table { width: 100%; max-width: 420px; }
  .p-table div { grid-template-columns: 1fr; height: auto; padding: 9px 0; gap: 2px; }
  .p-table dt { font-weight: 500; color: var(--p-ink); }
  .p-nums { gap: 22px; }
  .p-nums div:nth-child(1), .p-nums div:nth-child(2) { width: auto; }
  /* the product page, on phones: a light product card. One photo, the name and price, the button; the rest of the
     page (thumbnails, size, description, perks, accordion) is left to the desktop version */
  .p-pdp { --q: 1.5px; width: 100%; max-width: 340px; height: auto; padding-bottom: 14px; display: flex; flex-direction: column; border-radius: 12px; }
  .p-pdp > *, .p-pdp__info > * { position: relative; left: auto; right: auto; top: auto; }
  .p-pdp__bar { position: relative; height: 34px; padding: 0 14px; }
  .p-pdp__logo { font-size: 13px; }
  .p-pdp__bar svg { width: 13px; height: 13px; }
  .p-pdp__nav, .p-pdp__thumbs, .p-pdp__size, .p-pdp__note, .p-pdp__perks, .p-pdp__acc { display: none; }
  .p-pdp__img { order: 2; width: 100%; height: auto; aspect-ratio: 4 / 3; margin: 0; }
  .p-pdp__info { order: 3; position: relative; left: auto; right: auto; top: auto; padding: 14px 14px 0;
    display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px 12px; }
  .p-pdp__title { font-size: 19px; line-height: 1.15; white-space: normal; }
  .p-pdp__price { font-size: 15px; }
  .p-pdp__btn { grid-column: 1 / -1; height: 40px; border-radius: 999px; font-size: 14px; }
  .p-deck { --q: min(1.9px, calc((100vw - 84px) / 210)); }
  .p-note { left: auto; transform: none; margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) { .js-process .process .rv { transition: none; } }
.only-process .hero, .only-process .examples, .only-process .bar { display: none; }
.p-card--a .p-vtoggle { right: auto; left: calc(4 * var(--q)); }