/*
 * Bretzel — labs-lab.css (draft)
 * Our Labs in the home's language (5h). Today: the live page (its own styles in labs-lab-e.css,
 * scoped to .lb-e) between the home's nav and footer. The page picked: each lab on its own paper
 * on the desk, what's in it as an index that opens a row at a time, under one of three heroes
 * (1 · Crumpled, with the notes of the work behind its line; 2 · On the desk; 3 · Tracing paper).
 */

/* ════════════════════════════════════════
   TODAY — the live content under a strip of the home's paper
════════════════════════════════════════ */
/* the nav, printed on a strip of the home's grid paper above the page: the paper and its light
   are sized as for a full-screen sheet, so the strip is the top of the home's hero */
.opt-d .hero.lb-head {
  min-height: 0; padding-bottom: clamp(14px, 2.2vh, 24px);
  background-size: max(100%, 177.78svh) auto; background-position: 50% 0;
}
.opt-d .hero.lb-head::before { background: radial-gradient(ellipse 80vw 70svh at 40vw 35svh, rgba(255, 250, 240, 0.10), rgba(40, 30, 20, 0.14) 100%); }

/* the page you're on: the hand has already underlined it (nav, menu, footer) */
a[aria-current="page"] .hl path { stroke-dashoffset: 0; }

/* today's content as it is live, but in the logo's orange, and with the normal cursor (the live
   site hides it for its own, which isn't on this page) */
.lb-e {
  cursor: auto;
  --clr-orange: #FF8738; --clr-orange-10: rgba(255, 135, 56, 0.10);
  --clr-orange-15: rgba(255, 135, 56, 0.15); --clr-orange-20: rgba(255, 135, 56, 0.20);
}
.lb-e .btn-primary:hover { background: #EE7128; box-shadow: rgba(255, 135, 56, 0.3) 0 12px 32px; }

/* ════════════════════════════════════════
   THE HERO — the line printed in the middle, the hand rings TWO
════════════════════════════════════════ */
.lb-kicker { font: 600 12px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.66; margin-bottom: clamp(18px, 3vh, 32px); }
.lb-print {
  font: 400 clamp(48px, min(8.6vw, 15.5vh), 150px)/0.94 var(--hero); text-transform: uppercase;
  letter-spacing: -0.035em; color: var(--ink);
}
.lb-two { position: relative; display: inline-block; }
/* --ek: the ring image's width per width of the ellipse it was drawn on; the ellipse spans the word and a bit */
.lb-ring {
  --rw: calc(2.95em * var(--ek));
  position: absolute; left: calc(50% - var(--fx) * var(--rw)); top: calc(50% - var(--fy) * var(--rw) * var(--ar));
  width: var(--rw); height: auto; pointer-events: none;
}
.lb-copy .sub { margin-top: clamp(18px, 3vh, 30px); }

.lb-print .ln { position: relative; display: inline-block; }

/* 1 · Crumpled: a sheet crumpled into a ball and opened out again, its folds still in it, rendered
   in 3D (render_unfold.py --still), in two strengths (the draft bar's Paper). The print, the pencil
   and the ink lie on it by multiplying, so they take its light and shadow, as on a real sheet */
.opt-d .hero.lb-hero--crumpled { background: #EDEAE1 url('/assets/lab/img/lab/labs/paper-strong-2k.jpg') center / cover no-repeat; }
html.paper-medium .opt-d .hero.lb-hero--crumpled { background-image: url('/assets/lab/img/lab/labs/paper-medium-2k.jpg'); }
@media (min-width: 1700px), (min-resolution: 2dppx) and (min-width: 1000px) {
  .opt-d .hero.lb-hero--crumpled { background-image: url('/assets/lab/img/lab/labs/paper-strong-4k.jpg'); }
  html.paper-medium .opt-d .hero.lb-hero--crumpled { background-image: url('/assets/lab/img/lab/labs/paper-medium-4k.jpg'); }
}
.lb-hero--crumpled::before { display: none; }
.lb-hero--crumpled::after { opacity: 0.12; }
.lb-hero--crumpled :is(.lb-kicker, .lb-print, .sub) { mix-blend-mode: multiply; }

/* the draft bar's Intro · Film: the 4K film of the sheet put down crumpled and opened out
   (render_unfold.py); the hero then rests on the film's own last frame, and the page is printed
   on it: the nav, the line, the notes, the tapes, one after another. Landscape screens only; a
   phone, or reduced motion, gets the still straight away */
html.intro-film .opt-d .hero.lb-hero--crumpled { background-image: url('/assets/lab/img/lab/labs/unfold-end-2k.jpg'); }
@media (min-width: 1700px), (min-resolution: 2dppx) and (min-width: 1000px) {
  html.intro-film .opt-d .hero.lb-hero--crumpled { background-image: url('/assets/lab/img/lab/labs/unfold-end-4k.jpg'); }
}
.lbv { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; display: none; pointer-events: none; transition: opacity 0.7s ease; }
.lbc-pre .lb-hero--crumpled .lbv, .lb-hero--crumpled.lbc-play .lbv, .lb-hero--crumpled.lbc-fade .lbv { display: block; }
.lb-hero--crumpled.lbc-fade .lbv { opacity: 0; }
/* until the film shows, the desk under it */
.lbc-pre .opt-d .hero.lb-hero--crumpled, .opt-d .hero.lb-hero--crumpled.lbc-play { background: none; box-shadow: none; }
.lb-hero--crumpled :is(.nav, .rule, .lb-kicker, .lb-print .ln, .sub, .ctas, .an, .an-both) {
  transition: opacity 0.5s ease, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
:is(.lbc-pre .lb-hero--crumpled, .lb-hero--crumpled.lbc-play) :is(.nav, .rule, .lb-kicker, .lb-print .ln, .sub, .ctas, .an, .an-both) {
  opacity: 0; translate: 0 10px; transition: none;
}
.lb-hero--crumpled.lbc-done .rule { transition-delay: 0.08s; }
.lb-hero--crumpled.lbc-done .lb-kicker { transition-delay: 0.18s; }
.lb-hero--crumpled.lbc-done .lb-print .ln:nth-of-type(1) { transition-delay: 0.3s; }
.lb-hero--crumpled.lbc-done .lb-print .ln:nth-of-type(2) { transition-delay: 0.5s; }
.lb-hero--crumpled.lbc-done .lb-print .ln:nth-of-type(3) { transition-delay: 0.7s; }
.lb-hero--crumpled.lbc-done .sub { transition-delay: 1s; }
.lb-hero--crumpled.lbc-done .ctas { transition-delay: 1.2s; }
.lb-hero--crumpled.lbc-done .an { transition-delay: 1.6s; }
.lb-hero--crumpled.lbc-done .an-both { transition-delay: 2.2s; }

/* the notes of the work behind the line (build_labs.notes): pencil, in em of the title, on the
   words they're about; the hand's last word in orange by the two tapes */
.an { position: absolute; max-width: none; height: auto; mix-blend-mode: multiply; pointer-events: none; user-select: none; }
.ctas { position: relative; }
.an-both { position: absolute; left: calc(100% + 18px); top: -18px; display: block; width: clamp(150px, 12.5vw, 200px); mix-blend-mode: multiply; pointer-events: none; }
.an-both__t { display: block; width: 100%; height: auto; }
.an-both__a { display: block; width: 46%; height: auto; margin: 4px 0 0 -14%; }

/* 2 · On the desk: the line printed in white on the desk, and under it each lab's paper, small,
   with its tape button stuck on it */
.opt-d .hero.lb-hero--desk { background: none; box-shadow: none; color: #F4F1EA; }
.lb-hero--desk::before { background: radial-gradient(ellipse 75% 65% at 50% 38%, rgba(255, 250, 240, 0.05), rgba(0, 0, 0, 0.28) 100%); mix-blend-mode: normal; }
.lb-hero--desk .nav__logo img { mix-blend-mode: normal; }
.lb-hero--desk .rule { border-top-color: rgba(244, 241, 234, 0.8); mix-blend-mode: normal; }
.lb-hero--desk .lb-print { color: #F4F1EA; font-size: clamp(46px, min(7.6vw, 13vh), 132px); }
.lb-hero--desk .sub { color: rgba(244, 241, 234, 0.82); }
.lbd-papers { display: flex; justify-content: center; align-items: flex-start; gap: clamp(26px, 5vw, 96px); margin-top: clamp(30px, 5vh, 60px); }
.lbd-paper {
  position: relative; display: block; width: clamp(150px, 23vw, 360px); aspect-ratio: 1.42; padding: 5% 6%;
  rotate: var(--r); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 34px rgba(0, 0, 0, 0.42);
  transition: opacity 0.5s ease, translate 0.45s cubic-bezier(0.22, 1, 0.36, 1), scale 0.6s cubic-bezier(0.22, 1, 0.36, 1), rotate 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.lbd-paper--sketch { background: #F3F0E8 url('/assets/lab/img/lab/labs/sketch-tile.jpg') 0 0 / 300px repeat; }
.lbd-paper--blue { background: #1B468F url('/assets/lab/img/lab/labs/blue-tile.jpg') 0 0 / 300px repeat; }
.lbd-draw { display: block; width: 100%; height: 100%; object-fit: contain; }
.lbd-paper--sketch .lbd-draw { mix-blend-mode: multiply; }
.lbd-tape { position: absolute; left: 50%; top: -20px; height: clamp(34px, 3.4vw, 52px); width: auto; translate: -50% 0; rotate: var(--tr); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }
.lbd-paper:hover, .lbd-paper:focus-visible { translate: 0 -6px; rotate: calc(var(--r) * 0.4); }
.lbd-paper:focus-visible { outline: 2px dashed var(--orange); outline-offset: 8px; }

/* 3 · Tracing paper: a sheet of vellum laid over the two labs' papers, both drawings showing
   through it, soft and pale (vellum-wide / vellum-tall: the papers and the vellum, one image) */
.opt-d .hero.lb-hero--vellum { background: #EEEDE7 url('/assets/lab/img/lab/labs/vellum-wide.jpg') center / cover no-repeat; }
@media (max-aspect-ratio: 1/1) { .opt-d .hero.lb-hero--vellum { background-image: url('/assets/lab/img/lab/labs/vellum-tall.jpg'); } }

/* ════════════════════════════════════════
   THE HERO, three ways, each one gesture on the home's grid paper (hero D's sheet, nav, sub,
   tape buttons and Bretzi); the labs' tapes in their colours, orange and lime
════════════════════════════════════════ */
/* A · Correction: AN AGENCY. printed, a strip of tape over it, TWO LABS. written on the strip */
.opt-d .lb-h--a .print { font-size: clamp(44px, min(8.2vw, 14vh), 150px); }

/* B · Torn & taped: the sheet torn down the middle and taped back. The tear (a layer sized and
   placed like the paper) lies over the print, so the words are torn too; the strips over it */
.opt-d .lb-h--b .copy { z-index: auto; }
.lb-h--b .print, .lb-h--b .sub { position: relative; z-index: 3; }
.lb-h--b .tb-tear {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: url('/assets/lab/img/lab/labs/tear-b-2k.png') center / cover no-repeat;
}
@media (min-width: 1700px), (min-resolution: 2dppx) and (min-width: 1000px) {
  .lb-h--b .tb-tear { background-image: url('/assets/lab/img/lab/labs/tear-b-4k.png'); }
}
.lb-h--b .tb-roofline, .lb-h--b .ctas { position: relative; z-index: 5; }
.lb-h--b .tb-roofline { font-size: clamp(44px, min(8.2vw, 14vh), 150px); line-height: 1; margin: -0.14em 0 0.06em; }
.tb-roof { position: relative; display: block; margin-inline: auto; filter: drop-shadow(0 1px 1px rgba(30, 24, 18, 0.18)); }
.lb-h--b .ctas { gap: 14px 72px; }
.tb-pin { position: absolute; left: 50%; z-index: 5; width: clamp(110px, 9vw, 170px); height: auto; translate: -50% 0; pointer-events: none; }
.tb-pin--top { top: 18%; rotate: -2deg; }
.tb-pin--bot { bottom: 7%; rotate: 3deg; }
.lb-h--b .bretzi-chat { z-index: 7; }
.opt-d .lb-h--b .print { font-size: clamp(44px, min(8.2vw, 14vh), 150px); }

/* C · The knot: the line printed smaller; under it the bretzel knot drawn by hand, the labs'
   tapes stuck on its loops, an arrow up to where they cross: YOUR BUSINESS */
.opt-d .lb-h--c .print { font-size: clamp(38px, min(5.8vw, 10vh), 104px); }
.lb-h--c .sub { margin-top: clamp(10px, 1.8vh, 22px); }
.kn { --ah: clamp(60px, 9vh, 104px); position: relative; width: min(34vw, 53vh); margin-top: clamp(14px, 2.6vh, 34px); }
.kn-knot { display: block; width: 100%; height: auto; }
.kn-at { position: absolute; z-index: 2; translate: -50% -50%; }
.kn-tape img { height: clamp(34px, 4.4vh, 52px); }
.kn-yours { position: absolute; z-index: 2; width: 0; height: 0; pointer-events: none; }
.kn-up { position: absolute; left: 0; top: 0; height: var(--ah); width: auto; translate: calc(-1 * var(--tx)) calc(-1 * var(--ty)); }
.kn-note { position: absolute; left: 0; top: calc(var(--ah) * 0.97); height: clamp(18px, 2.3vh, 26px); width: auto; translate: -50% 0; }

@media (max-width: 900px) {
  .opt-d .lb-h--a .print, .opt-d .lb-h--b .print, .lb-h--b .tb-roofline { font-size: calc((100vw - 2 * var(--pad)) / 7.9); }
  .opt-d .lb-h--c .print { font-size: calc((100vw - 2 * var(--pad)) / 13.4); }
  .kn { width: min(86vw, 52vh); }
  .kn-tape img { height: 28px; }
  .lb-h--b .ctas { gap: 12px 40px; }
}

/* ════════════════════════════════════════
   THE PAGE — each lab on its own paper; what's in it, an index that opens a row at a time
════════════════════════════════════════ */
.lb-main { padding-bottom: clamp(36px, 5vw, 80px); }
.lb-main .tear--close { margin-top: clamp(40px, 5vw, 88px); }

/* an index: a number and a name per row; pointing at a row circles its number by hand, clicking
   it opens what's in it (one open at a time); on the desk it's printed in paper white */
.lbx { padding: clamp(64px, 7vw, 120px) var(--pad) 0; color: #ece9e2; interpolate-size: allow-keywords; }
.lbx__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px 40px; }
.lbx__list { --rule: rgba(244, 241, 234, 0.22); --fg: #F4F1EA; --fg-2: rgba(244, 241, 234, 0.62); margin-top: clamp(28px, 3.4vw, 56px); border-top: 1px solid var(--rule); }
.lbx__row { border-bottom: 1px solid var(--rule); }
.lbx__sum {
  display: grid; grid-template-columns: clamp(52px, 6vw, 100px) minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: clamp(16px, 1.7vw, 26px) 0; cursor: pointer; list-style: none;
}
.lbx__sum::-webkit-details-marker { display: none; }
.lbx__n { position: relative; justify-self: start; padding: 0 6px; font: 600 14px/1 var(--sans); letter-spacing: 0.1em; color: var(--fg-2); }
.lbx__ring { position: absolute; left: calc(50% - var(--fx) * 3.4em); top: calc(50% - var(--fy) * 3.4em * var(--ar)); width: 3.4em; height: auto; pointer-events: none; }
.lbx__row[open] .lbx__ring path { stroke-dashoffset: 0 !important; }
.lbx__t {
  font: 400 calc(var(--t-size) * 0.8)/0.95 var(--hero); text-transform: uppercase; letter-spacing: -0.035em; color: var(--fg);
  transition: translate 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.lbx__sum:hover .lbx__t, .lbx__row[open] .lbx__t { translate: 10px 0; }
/* a printed plus that turns into a cross */
.lbx__x { position: relative; flex: none; width: 18px; height: 18px; color: var(--fg); transition: rotate 0.3s ease; }
.lbx__x::before, .lbx__x::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; }
.lbx__x::after { rotate: 90deg; }
.lbx__row[open] .lbx__x { rotate: 45deg; }
.lbx__more {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px clamp(28px, 4vw, 72px);
  padding: 0 0 clamp(26px, 2.8vw, 44px) calc(clamp(52px, 6vw, 100px) + 26px);
}
.lbx__d { max-width: 54ch; font: 400 clamp(16px, 1.2vw, 19px)/1.6 var(--sans); color: var(--fg); opacity: 0.82; }
.lbx__i { list-style: none; display: flex; flex-wrap: wrap; align-content: start; gap: 10px 24px; font: 600 12px/1.6 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); }
/* opening and closing slide, where the browser can */
.lbx__row::details-content { block-size: 0; overflow-y: clip; transition: block-size 0.45s cubic-bezier(0.22, 1, 0.36, 1), content-visibility 0.45s allow-discrete; }
.lbx__row[open]::details-content { block-size: auto; }
/* the questions: the same index, set smaller */
.lbx__list--q .lbx__t { font: 600 clamp(19px, 1.9vw, 30px)/1.25 var(--sans); text-transform: none; letter-spacing: -0.01em; }
.lbx__list--q .lbx__more { grid-template-columns: minmax(0, 1fr); }

/* each lab on its own paper, lying on the desk */
.lc-lab { padding: clamp(56px, 6vw, 104px) var(--pad) 0; }
.lc-sheet {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: start;
  gap: clamp(24px, 3.4vw, 64px); padding: clamp(40px, 4.6vw, 80px) clamp(24px, 4.6vw, 80px);
  rotate: var(--r, 0deg); interpolate-size: allow-keywords;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 20px 44px rgba(0, 0, 0, 0.36);
}
/* one light over the sheet, as over the hero's */
.lc-sheet::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: multiply;
  background: radial-gradient(ellipse 90% 80% at 32% 28%, rgba(255, 255, 255, 0.06), rgba(20, 16, 12, 0.16) 100%);
}
.lc-sheet > * { position: relative; z-index: 1; }
.lc-sheet--sketch { --r: -0.45deg; color: var(--ink); background: #F3F0E8 url('/assets/lab/img/lab/labs/sketch-tile.jpg') 0 0 / 600px repeat; }
.lc-sheet--blue { --r: 0.4deg; color: #EEF3FA; background: #1B468F url('/assets/lab/img/lab/labs/blue-tile.jpg') 0 0 / 600px repeat; }
.lc-sheet--sketch .mx-title { color: var(--ink); }
.lc-sheet--blue .mx-title { color: #F1F5FB; }
/* the index on the paper: ink on the drawing pad, white on the blueprint, a size down from the desk's */
.lc-sheet .lbx__list { margin-top: clamp(24px, 2.8vw, 44px); }
.lc-sheet--sketch .lbx__list { --rule: rgba(21, 21, 21, 0.18); --fg: var(--ink); --fg-2: rgba(21, 21, 21, 0.56); }
.lc-sheet--blue .lbx__list { --rule: rgba(238, 243, 250, 0.3); --fg: #F1F5FB; --fg-2: rgba(238, 243, 250, 0.7); }
.lc-sheet .lbx__sum { grid-template-columns: 48px minmax(0, 1fr) auto; padding: clamp(13px, 1.3vw, 19px) 0; }
.lc-sheet .lbx__t { font-size: clamp(19px, 1.9vw, 30px); }
.lc-sheet .lbx__more { grid-template-columns: minmax(0, 1fr); padding-left: calc(48px + 26px); }
.lc-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: clamp(28px, 3vw, 46px); }
.lc-cta img { height: clamp(42px, 4vw, 58px); width: auto; }
.lc-fig { margin: clamp(0px, 2vw, 36px) 0 0; }
.lc-draw { display: block; width: 100%; height: auto; }
.lc-sheet--sketch .lc-draw { mix-blend-mode: multiply; }
/* the blueprint is taped down at its top corners */
.lc-tape { position: absolute; top: -16px; z-index: 2; width: clamp(92px, 9vw, 150px); height: auto; rotate: var(--tr); pointer-events: none; }
.lc-tape--l { left: -26px; }
.lc-tape--r { right: -26px; }

/* Bretzi, stuck on the Digital Lab: the way into the chat, as on the home (hero D's styles come
   later in the page, so these name the class twice) */
.bretzi-chat.bretzi-chat--lab { width: clamp(88px, 8.4vw, 140px); }
.bretzi-chat.lc-bretzi { position: relative; right: auto; bottom: auto; flex: none; margin-right: clamp(0px, 2vw, 32px); }
.bretzi-chat.lba-bretzi, .bretzi-chat.lbf-bretzi { position: relative; right: auto; bottom: auto; flex: none; }

/* ════════════════════════════════════════
   01 / 02 — the labs, four ways (the draft bar's Labs row)
════════════════════════════════════════ */
.lbb__v { display: none; }
html.lbb-w1 .lbb__v[data-v="w1"], html.lbb-w2 .lbb__v[data-v="w2"], html.lbb-w3 .lbb__v[data-v="w3"] { display: block; }

/* A · Notes: each lab's drawing is the index. A number sits at the end of each leader line, the
   service's name printed beside it; pointing at it, the hand circles the number; clicking it lays
   the service's card on the drawing */
.lba-lab { padding: clamp(56px, 6vw, 104px) var(--pad) 0; }
.lba-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px 40px; color: #ece9e2; }
.lba-side { display: flex; align-items: flex-end; gap: clamp(16px, 2.4vw, 40px); }
.lba-side .btn-tape img { height: clamp(42px, 4vw, 58px); width: auto; }
.lba-paper {
  position: relative; margin-top: clamp(28px, 3.4vw, 56px); aspect-ratio: 2400 / 1500; container-type: inline-size;
  rotate: var(--r, 0deg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 20px 44px rgba(0, 0, 0, 0.36);
}
.lba-paper::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply;
  background: radial-gradient(ellipse 90% 80% at 32% 28%, rgba(255, 255, 255, 0.06), rgba(20, 16, 12, 0.16) 100%);
}
.lba-paper--sketch { --r: -0.35deg; color: var(--ink); background: #F3F0E8 url('/assets/lab/img/lab/labs/sketch-tile.jpg') 0 0 / 600px repeat; }
.lba-paper--blue { --r: 0.3deg; color: #F1F5FB; background: #1B468F url('/assets/lab/img/lab/labs/blue-tile.jpg') 0 0 / 600px repeat; }
.lba-draw { position: absolute; inset: 0; width: 100%; height: 100%; }
.lba-paper--sketch .lba-draw { mix-blend-mode: multiply; }
.lba-call {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 0.8em; translate: -1.6em -50%;
  padding: 0.5em 0.3em; border: 0; background: none; color: inherit; cursor: pointer; text-align: left;
  font: 600 clamp(11px, 1.05cqw, 14px)/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.lba-call--l { flex-direction: row-reverse; translate: calc(-100% + 1.6em) -50%; text-align: right; }
.lba-call .lbx__n { color: inherit; opacity: 0.85; }
.lba-call__t { transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.lba-call:hover .lba-call__t, .lba-call[aria-expanded="true"] .lba-call__t { translate: 4px 0; }
.lba-call--l:hover .lba-call__t, .lba-call--l[aria-expanded="true"] .lba-call__t { translate: -4px 0; }
.lba-call[aria-expanded="true"] .lbx__ring path { stroke-dashoffset: 0 !important; }
.lba-call:focus-visible { outline: 2px dashed var(--orange); outline-offset: 2px; }
/* the note: a ruled index card laid on the drawing, the text on its lines */
.lba-note {
  --ch: 68cqw;
  position: absolute; z-index: 4; width: clamp(360px, 31cqw, 460px); container-type: inline-size; color: var(--ink);
  translate: -1.2em 2.4em; rotate: -1.2deg;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.26)) drop-shadow(0 18px 26px rgba(0, 0, 0, 0.24));
}
.lba-note--l { translate: calc(-100% + 1.2em) 2.4em; rotate: 1deg; }
.lba-note[hidden] { display: none; }
.lba-note__card { display: block; width: 100%; height: auto; }
.lba-note__t { position: absolute; left: 6cqw; right: 30cqw; bottom: calc(var(--ch) * (1 - var(--head)) + 1.6cqw); font: 400 4.2cqw/1.05 var(--hero); text-transform: uppercase; letter-spacing: -0.005em; }
.lba-note__t span { display: block; margin-bottom: 1.2cqw; font: 600 2.6cqw/1 var(--sans); letter-spacing: 0.14em; color: var(--grey-ink); }
.lba-note__body { position: absolute; left: 6cqw; right: 6cqw; top: calc(var(--ch) * var(--head)); }
.lba-note__d { font: 400 3.45cqw/7.2cqw var(--sans); color: #2c2a26; }
.lba-note__i { font: 600 2.45cqw/7.2cqw var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-ink); }
.lba-note__x { position: absolute; right: 3.4cqw; top: calc(var(--ch) * var(--head) - 8cqw); width: 6cqw; height: 6cqw; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.lba-note__x .lbx__x { width: 2.6cqw; height: 2.6cqw; rotate: 45deg; }
.lba-list { display: none; }

/* B · Contents: both labs on one sheet torn out of the notebook, as a book's contents. A line
   leads to each service's number; pointing at it, the hand circles it; it opens where it is */
.lbi { padding-top: clamp(48px, 5.4vw, 92px); interpolate-size: allow-keywords; }
.lbi-sheet { color: var(--ink); padding: calc(var(--te) + clamp(22px, 3vw, 48px)) clamp(22px, 5.4vw, 92px) clamp(40px, 5vw, 84px); }
.lbi-kicker { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); font: 600 12px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.lbi-kicker span:last-child { opacity: 0.62; }
.lbi-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5.4vw, 104px); margin-top: clamp(30px, 3.6vw, 60px); }
.lbi-head .mx-title { color: var(--ink); }
.lbi-list { margin-top: clamp(20px, 2.4vw, 38px); }
.lbi-row { border-bottom: 1px solid rgba(21, 21, 21, 0.14); }
.lbi-sum { display: flex; align-items: baseline; gap: 12px; padding: clamp(13px, 1.3vw, 19px) 0; cursor: pointer; list-style: none; }
.lbi-sum::-webkit-details-marker { display: none; }
.lbi-t { font: 500 clamp(18px, 1.55vw, 23px)/1.25 var(--sans); transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.lbi-sum:hover .lbi-t, .lbi-row[open] .lbi-t { translate: 6px 0; }
.lbi-dots { flex: 1; min-width: 28px; border-bottom: 2px dotted rgba(21, 21, 21, 0.3); translate: 0 -0.32em; }
.lbi-sum .lbx__n { color: rgba(21, 21, 21, 0.62); }
.lbi-row[open] .lbx__ring path { stroke-dashoffset: 0 !important; }
.lbi-row::details-content { block-size: 0; overflow-y: clip; transition: block-size 0.45s cubic-bezier(0.22, 1, 0.36, 1), content-visibility 0.45s allow-discrete; }
.lbi-row[open]::details-content { block-size: auto; }
.lbi-more { padding: 0 0 clamp(18px, 2vw, 28px); }
.lbi-d { max-width: 52ch; font: 400 16px/1.6 var(--sans); color: #3a3732; }
.lbi-i { margin-top: 10px; font: 600 11.5px/1.75 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-ink); }
.lbi-foot { margin-top: clamp(26px, 3vw, 48px); }
.lbi-foot .btn-tape img { height: clamp(42px, 4vw, 58px); width: auto; }

/* C · Card file: each lab a pile of ruled index cards, each set a strip lower, so only their tabs
   show; clicking one pulls that card out and lays it on the front of the pile, its service written on it */
.lbf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(36px, 5.4vw, 104px); padding: clamp(56px, 6vw, 104px) var(--pad) 0; }
.lbf-lab { container-type: inline-size; }
.lbf-head { color: #ece9e2; }
.lbf-file {
  --ch: 68cqw; --strip: 15cqw;
  position: relative; margin-top: clamp(28px, 3.2vw, 52px);
  height: calc(var(--ch) + (var(--n) - 1) * var(--strip)); transition: height 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
/* a card out lies one tab lower than the pile's front, so every other tab still shows */
.lbf-file.has-open { height: calc(var(--ch) + var(--n) * var(--strip)); }
.lbf-card {
  position: absolute; left: 0; right: 0; top: calc(var(--k) * var(--strip)); z-index: calc(var(--k) + 1); rotate: var(--r);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.36)) drop-shadow(0 10px 16px rgba(0, 0, 0, 0.26));
  transition: top 0.55s cubic-bezier(0.22, 1, 0.36, 1), rotate 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.lbf-card.is-open { top: calc(var(--n) * var(--strip)); z-index: 20; rotate: calc(var(--r) * -1.6); }
.lbf-card__img { display: block; width: 100%; height: auto; }
.lbf-tab {
  position: absolute; left: 0; right: 0; top: calc(var(--ch) * var(--top, 0.069)); height: calc(var(--strip) - var(--ch) * 0.069);
  display: flex; align-items: center; gap: 2.4cqw; padding: 0 30cqw 0 5cqw; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left;
}
.lbf-n { font: 600 2.4cqw/1 var(--sans); letter-spacing: 0.12em; color: var(--grey-ink); }
.lbf-t { font: 400 3.3cqw/1.05 var(--hero); text-transform: uppercase; letter-spacing: -0.005em; transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.lbf-tab:hover .lbf-t, .lbf-card.is-open .lbf-t { translate: 4px 0; }
.lbf-tab .lbx__x { flex: none; width: 2.4cqw; height: 2.4cqw; margin-left: 0.6cqw; }
.lbf-card.is-open .lbf-tab .lbx__x { rotate: 45deg; }
.lbf-tab:focus-visible { outline: 2px dashed var(--orange); outline-offset: -4px; }
.lbf-body { position: absolute; left: 5cqw; right: 5cqw; top: calc(var(--ch) * var(--head)); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.lbf-card.is-open .lbf-body { opacity: 1; pointer-events: auto; transition-delay: 0.3s; }
.lbf-d { font: 400 3.3cqw/7.2cqw var(--sans); color: #2c2a26; }
.lbf-i { font: 600 2.35cqw/7.2cqw var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-ink); }
.lbf-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: clamp(24px, 3vw, 48px); }
.lbf-foot .btn-tape img { height: clamp(42px, 4vw, 58px); width: auto; }

/* D · Proof: the services in print on the desk, the one you're on bright; beside them the real
   project that proves it, a photo print taped down, its result written by hand on the border.
   Pointing at a service puts its print down; clicking it opens what's in it */
.lbp-lab { padding: clamp(64px, 7vw, 120px) var(--pad) 0; }
.lbp-lab + .lbp-lab { padding-top: clamp(104px, 11vw, 190px); }
.lbp-head { color: #ece9e2; }
.lbp-foot { margin-top: clamp(26px, 3vw, 46px); }
.lbp-foot .btn-tape img { height: clamp(42px, 4vw, 58px); width: auto; }
.lbp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(32px, 4vw, 80px); margin-top: clamp(32px, 3.8vw, 64px); }
.lbp-list { border-top: 1px solid rgba(244, 241, 234, 0.2); interpolate-size: allow-keywords; }
.lbp-row { border-bottom: 1px solid rgba(244, 241, 234, 0.2); }
.lbp-sum {
  display: grid; grid-template-columns: clamp(52px, 5vw, 80px) minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: clamp(18px, 1.8vw, 28px) 0; cursor: pointer; list-style: none; color: #F4F1EA;
}
.lbp-sum::-webkit-details-marker { display: none; }
.lbp-sum .lbx__n { color: rgba(244, 241, 234, 0.6); }
.lbp-t {
  font: 400 calc(var(--t-size) * 0.52)/1 var(--hero); text-transform: uppercase; letter-spacing: -0.02em;
  opacity: 0.42; transition: opacity 0.3s ease, translate 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* the one you're on is bright, and its number circled */
.lbp-row.is-on .lbp-t, .lbp-sum:hover .lbp-t, .lbp-sum:focus-visible .lbp-t { opacity: 1; translate: 8px 0; }
.lbp-row.is-on .lbx__ring path, .lbp-row[open] .lbx__ring path { stroke-dashoffset: 0 !important; }
.lbp-sum .lbx__x { width: 18px; height: 18px; color: #F4F1EA; opacity: 0.6; }
.lbp-row[open] .lbx__x { rotate: 45deg; opacity: 1; }
.lbp-row::details-content { block-size: 0; overflow-y: clip; transition: block-size 0.45s cubic-bezier(0.22, 1, 0.36, 1), content-visibility 0.45s allow-discrete; }
.lbp-row[open]::details-content { block-size: auto; }
.lbp-more { padding: 0 0 clamp(22px, 2.4vw, 36px) calc(clamp(52px, 5vw, 80px) + 22px); }
.lbp-d { max-width: 52ch; font: 400 clamp(16px, 1.15vw, 18px)/1.6 var(--sans); color: #cfcac0; }
.lbp-i { margin-top: 12px; font: 600 12px/1.7 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244, 241, 234, 0.58); }
/* the proof: one print at a time, put down on the desk. The stage has a set size, and every print
   is fitted inside it by its height (all the same height, never wider than the column), so no
   print ever reaches into the next lab, whatever the screen */
.lbp-proofs { position: sticky; top: 14vh; height: clamp(340px, 32vw, 580px); container-type: size; }
.lbp-proof { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s 0.25s; }
.lbp-proof.is-on { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
.lbp-print {
  position: relative; display: block; width: min(96cqw, calc(84cqh * var(--ar))); container-type: inline-size; rotate: var(--r, 0deg);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4)) drop-shadow(0 18px 26px rgba(0, 0, 0, 0.34));
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lbp-proof.is-on .lbp-print, .lbp-proof.is-on .lbp-bretzi { animation: lbp-drop 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes lbp-drop { from { opacity: 0; translate: 0 -26px; scale: 1.05; } to { opacity: 1; translate: 0 0; scale: 1; } }
.lbp-print:hover { transform: translateY(-4px) rotate(calc(var(--r, 0deg) * -0.5)); }
.lbp-print:focus-visible { outline: 2px dashed var(--orange); outline-offset: 6px; }
.lbp-img { display: block; width: 100%; height: auto; }
.lbp-tape { position: absolute; left: 50%; top: -3.6%; width: 30%; height: auto; translate: -50% 0; rotate: var(--tr, -3deg); pointer-events: none; }
.lbp-cap { position: absolute; left: 4.5%; right: 4.5%; display: flex; flex-direction: column; justify-content: center; gap: 2.2cqw; color: var(--ink); }
.lbp-who { font: 500 2.6cqw/1.2 var(--sans); color: var(--grey-ink); }
.lbp-who b { font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-right: 0.6em; }
.lbp-note { display: block; width: auto; height: 5.4cqw; max-width: 100%; }
/* Bretzi proves the Digital Lab's custom work himself: the sticker opens the chat */
.lbp-proof--bretzi { align-content: center; justify-items: center; gap: 22px; }
.bretzi-chat.lbp-bretzi { position: relative; right: auto; bottom: auto; width: min(46cqw, 52cqh); rotate: -6deg; }
.lbp-said { display: grid; justify-items: center; gap: 12px; color: #F4F1EA; text-align: center; }
.lbp-said .lbp-note { height: clamp(22px, 2.2vw, 32px); }
.lbp-said .lbp-who { font-size: 13px; color: rgba(244, 241, 234, 0.62); }
.lbp-said .lbp-who b { color: #F4F1EA; }

/* ════════════════════════════════════════
   THE LABS' SECTIONS, three ways (2026-11-02): the home's world, real work as proof,
   as little on show as possible
════════════════════════════════════════ */
/* the proof of each lab: a photo print of a real project, taped down, its caption on the strip */
.lx-print {
  position: relative; display: block; container-type: inline-size; rotate: var(--r, -0.6deg);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.38)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.3));
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lx-print:hover { transform: translateY(-4px) rotate(0.4deg); }
.lx-img { display: block; width: 100%; height: auto; }
.lx-tape { position: absolute; top: -3.2%; width: 18%; height: auto; rotate: var(--tr); pointer-events: none; }
.lx-tape--l { left: -3%; }
.lx-tape--r { right: -3%; }
.lx-cap { position: absolute; left: 4.4%; right: 4.4%; display: flex; align-items: center; gap: 2.4cqw; color: var(--ink); }
.lx-cap b { font: 400 3.1cqw/1 var(--hero); text-transform: uppercase; letter-spacing: -0.005em; }
.lx-cap span { flex: 1; font: 500 2.1cqw/1.2 var(--sans); color: var(--grey-ink); }
.lx-cap em { font: 600 1.6cqw/1 var(--sans); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 0.22cqw solid var(--orange); padding-bottom: 0.3cqw; }

/* v1 · Two halves: the hero's torn sheet goes on, each lab on its half. Their torn edges face each
   other across a hair of desk (the same tear, in strips that repeat down the page) and three
   strips of tape hold them together */
.lh { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: clamp(56px, 6vw, 104px) var(--pad) 0; }
.lh-half { position: relative; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.42)) drop-shadow(0 18px 28px rgba(0, 0, 0, 0.3)); }
.lh-half--l { margin-right: -22px; }
.lh-half--r { margin-left: -22px; }
.lh-paper {
  position: relative; height: 100%; color: var(--ink); interpolate-size: allow-keywords;
  padding: clamp(44px, 4.6vw, 76px) clamp(48px, 4.2vw, 72px) clamp(40px, 4.2vw, 68px);
  background: #EFEBE3 url('/assets/lab/img/lab/home/nb-tile-2k.jpg') 0 0 / 1920px auto repeat;
}
.lh-half--l .lh-paper {
  -webkit-mask: linear-gradient(#000 0 0) left top / calc(100% - 47px) 100% no-repeat, url('/assets/lab/img/lab/labs/edge-l-mask.png') right top / 48px 800px repeat-y;
  mask: linear-gradient(#000 0 0) left top / calc(100% - 47px) 100% no-repeat, url('/assets/lab/img/lab/labs/edge-l-mask.png') right top / 48px 800px repeat-y;
}
.lh-half--r .lh-paper {
  -webkit-mask: linear-gradient(#000 0 0) right top / calc(100% - 47px) 100% no-repeat, url('/assets/lab/img/lab/labs/edge-r-mask.png') left top / 48px 800px repeat-y;
  mask: linear-gradient(#000 0 0) right top / calc(100% - 47px) 100% no-repeat, url('/assets/lab/img/lab/labs/edge-r-mask.png') left top / 48px 800px repeat-y;
}
.lh-half--l .lh-paper::after, .lh-half--r .lh-paper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 48px; pointer-events: none; }
.lh-half--l .lh-paper::after { right: 0; background: url('/assets/lab/img/lab/labs/edge-l-core.png') right top / 48px 800px repeat-y; }
.lh-half--r .lh-paper::after { left: 0; background: url('/assets/lab/img/lab/labs/edge-r-lit.png') left top / 48px 800px repeat-y; }
.lh-half--l .lh-paper { padding-right: clamp(64px, 5.4vw, 92px); }
.lh-half--r .lh-paper { padding-left: clamp(64px, 5.4vw, 92px); }
.lh-head .mx-title { color: var(--ink); }
.lh-list { margin-top: clamp(26px, 3vw, 46px); border-top: 2px solid var(--ink); }
.lh-row { border-bottom: 1px solid rgba(21, 21, 21, 0.16); }
.lh-sum { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: clamp(14px, 1.3vw, 20px) 0; cursor: pointer; list-style: none; }
.lh-sum::-webkit-details-marker { display: none; }
.lh-sum .lbx__n { color: rgba(21, 21, 21, 0.55); }
.lh-t { font: 400 clamp(16px, 1.45vw, 23px)/1.12 var(--hero); text-transform: uppercase; letter-spacing: -0.015em; transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.lh-sum:hover .lh-t, .lh-row[open] .lh-t { translate: 6px 0; }
.lh-row[open] .lbx__ring path { stroke-dashoffset: 0 !important; }
.lh-sum .lbx__x { width: 16px; height: 16px; color: var(--ink); }
.lh-row[open] .lbx__x { rotate: 45deg; }
.lh-row::details-content { block-size: 0; overflow-y: clip; transition: block-size 0.45s cubic-bezier(0.22, 1, 0.36, 1), content-visibility 0.45s allow-discrete; }
.lh-row[open]::details-content { block-size: auto; }
.lh-more { padding: 0 0 20px 60px; }
.lh-d { max-width: 50ch; font: 400 15.5px/1.6 var(--sans); color: #3a3732; }
.lh-i { margin-top: 10px; font: 600 11px/1.7 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-ink); }
.lh-w, .lt-note__w { margin-top: 10px; font: 500 13.5px/1.5 var(--sans); }
.lh-w span, .lt-note__w span { margin-right: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-ink); }
.lh-w a, .lt-note__w a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(21, 21, 21, 0.35); }
.lh-w a:hover, .lt-note__w a:hover { text-decoration-color: var(--orange); }
.lh-print { width: min(100%, 640px); margin: clamp(34px, 3.6vw, 60px) auto 0; }
.lh-half--r .lh-print { --r: 0.7deg; }
.lh-foot { margin-top: clamp(30px, 3vw, 48px); }
.lh-foot .btn-tape img { height: clamp(40px, 3.6vw, 54px); width: auto; }
.lh-pin { position: absolute; left: 50%; z-index: 3; width: clamp(110px, 9vw, 160px); height: auto; translate: -50% 0; pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(30, 24, 18, 0.25)); }
.lh-pin--1 { top: calc(clamp(56px, 6vw, 104px) + 6%); rotate: -3deg; }
.lh-pin--2 { top: 52%; rotate: 2deg; }
.lh-pin--3 { bottom: 5%; rotate: -1.5deg; }

/* v2 · Black cards: the home's card (its 03), one per service, on a torn notebook sheet per lab:
   the lab's colour floods it on hover, a click opens what's in it */
.lk-lab { padding-top: clamp(48px, 5vw, 88px); }
.lk-sheet { color: var(--ink); padding: calc(var(--te) + clamp(26px, 3vw, 48px)) clamp(22px, 4.2vw, 72px) clamp(44px, 4.6vw, 78px); }
.lk-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px 40px; }
.lk-head .mx-title { color: var(--ink); }
.lk-head .btn-tape img { height: clamp(42px, 4vw, 58px); width: auto; }
.mx-e .needs.lk-needs { padding: 0; margin-top: clamp(30px, 3.4vw, 56px); background: none; }
.lk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: clamp(16px, 1.7vw, 28px); }
.mx-e .needs .need.lk-card { padding: 0; }
.lk-sum {
  all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; width: 100%;
  min-height: clamp(180px, 15.5vw, 240px); padding: clamp(24px, 2.1vw, 34px) clamp(20px, 1.8vw, 28px) clamp(22px, 1.9vw, 30px); cursor: pointer;
}
.lk-sum:focus-visible { outline: 2px dashed var(--door); outline-offset: -8px; }
.mx-e .needs .lk-card .need__title { display: block; margin: 16px 0 0; font-size: clamp(20px, 1.75vw, 29px); line-height: 1; }
.lk-x { position: relative; margin-top: auto; align-self: flex-end; width: 20px; height: 20px; color: var(--door); transition: rotate 0.3s ease, color 0.4s; }
.lk-x::before, .lk-x::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; }
.lk-x::after { rotate: 90deg; }
.lk-card.is-open .lk-x { rotate: 45deg; }
.lk-more { padding: 0 clamp(20px, 1.8vw, 28px) clamp(22px, 1.9vw, 30px); }
.lk-d { margin-bottom: 20px; font: 400 15px/1.55 var(--sans); color: rgba(255, 255, 255, 0.82); transition: color 0.4s; }
.mx-e .needs .lk-card .need__list { margin-bottom: 26px; }
.mx-e .needs .lk-card .need__proof { margin-bottom: 0; }
@media (hover: hover) {
  .mx-e .needs .lk-card:hover .lk-d { color: rgba(8, 8, 8, 0.82); }
  .mx-e .needs .lk-card:hover .lk-x { color: #080808; }
}

/* v3 · On the desk: one big print of real work per lab, as the home's 01; its four services on
   tapes stuck round it, and a tape opens its note on the print */
.lt-lab { padding: clamp(64px, 7vw, 120px) var(--pad) 0; }
.lt-head { color: #ece9e2; }
.lt-stage {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr) minmax(0, 1fr); align-items: center;
  margin-top: clamp(34px, 4vw, 66px);
}
.lt-col { position: relative; z-index: 2; display: grid; gap: clamp(46px, 7vw, 120px); }
.lt-col--l { justify-items: end; margin-right: -4.5vw; }
.lt-col--r { justify-items: start; margin-left: -4.5vw; }
.lt-tape {
  padding: 0; border: 0; background: none; cursor: pointer; rotate: var(--r);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.28));
  transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1), rotate 0.3s ease, filter 0.3s ease;
}
.lt-tape img { display: block; height: clamp(36px, 3.2vw, 52px); width: auto; max-width: none; }
.lt-tape:hover, .lt-tape[aria-expanded="true"] { translate: 0 -4px; rotate: calc(var(--r) * 0.3); }
.lt-tape[aria-expanded="true"] { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)) drop-shadow(0 16px 20px rgba(0, 0, 0, 0.34)); }
.lt-tape:focus-visible { outline: 2px dashed var(--orange); outline-offset: 6px; }
.lt-print { --r: -0.8deg; }
.lt-note {
  position: absolute; left: 50%; top: 50%; z-index: 4; width: min(480px, 40vw); translate: -50% -50%; rotate: -1.2deg;
  padding: clamp(30px, 2.6vw, 40px) clamp(26px, 2.4vw, 38px) clamp(24px, 2.2vw, 34px); color: var(--ink);
  background: #EFEBE3 url('/assets/lab/img/lab/home/nb-tile-2k.jpg') 0 0 / 1920px auto repeat;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3), 0 26px 44px rgba(0, 0, 0, 0.4);
}
.lt-note[hidden] { display: none; }
.lt-note__tape { position: absolute; left: 50%; top: -18px; width: 34%; height: auto; translate: -50% 0; rotate: var(--tr); pointer-events: none; }
.lt-note__n { font: 600 12px/1 var(--sans); letter-spacing: 0.14em; color: var(--grey-ink); }
.lt-note__t { margin-top: 10px; font: 400 clamp(22px, 2vw, 30px)/1 var(--hero); text-transform: uppercase; letter-spacing: -0.02em; }
.lt-note__d { margin-top: 14px; font: 400 15.5px/1.6 var(--sans); color: #3a3732; }
.lt-note__i { margin-top: 12px; font: 600 11px/1.7 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-ink); }
.lt-note__x { position: absolute; right: 14px; top: 14px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.lt-note__x .lbx__x { width: 14px; height: 14px; rotate: 45deg; }
.lt-foot { display: flex; justify-content: center; margin-top: clamp(36px, 4vw, 64px); }
.lt-foot .btn-tape img { height: clamp(42px, 4vw, 58px); width: auto; }

/* ════════════════════════════════════════
   THE LABS' SECTIONS with the home's wow (2026-11-02): one gesture that moves, per version
════════════════════════════════════════ */
/* the details a service opens: what it is, what you get, the work that proves it */
.lx-d { max-width: 52ch; font: 400 16px/1.6 var(--sans); }
.lx-i { margin-top: 10px; font: 600 11.5px/1.7 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.62; }
.lx-w { margin-top: 10px; font: 500 13.5px/1.5 var(--sans); }
.lx-w span { margin-right: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.62; }
.lx-w a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: currentColor; text-decoration-thickness: 1px; }
.lx-w a:hover { text-decoration-color: var(--orange); }

/* w1 · Rewrite: the agency's word for each service, printed; the hand strikes it (the marker's own
   stroke, stretched across each line of it) and writes what you actually get under it */
.rw-lab { padding-top: clamp(48px, 5vw, 88px); }
.rw-sheet { color: var(--ink); padding: calc(var(--te) + clamp(26px, 3vw, 48px)) clamp(22px, 5vw, 88px) clamp(40px, 4.6vw, 78px); }
.rw-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px 40px; }
.rw-head .mx-title { color: var(--ink); }
.rw-head .btn-tape img { height: clamp(42px, 4vw, 58px); width: auto; }
.rw-list { margin-top: clamp(28px, 3.4vw, 56px); border-top: 2px solid var(--ink); interpolate-size: allow-keywords; }
.rw-row { border-bottom: 1px solid rgba(21, 21, 21, 0.16); }
.rw-sum { display: grid; grid-template-columns: clamp(40px, 4vw, 64px) minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: clamp(18px, 1.9vw, 30px) 0; cursor: pointer; list-style: none; }
.rw-sum::-webkit-details-marker { display: none; }
.rw-n { padding-top: 0.5em; font: 600 13px/1 var(--sans); letter-spacing: 0.12em; color: var(--grey-ink); }
.rw-pair { display: grid; gap: clamp(8px, 0.9vw, 14px); }
.rw-was { font: 400 calc(var(--t-size) * 0.66)/1.02 var(--hero); text-transform: uppercase; letter-spacing: -0.03em; }
.rw-was span {
  background: url('/assets/lab/img/lab/labs/hand/rw-strike.webp') left 58% / 0% 0.78em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 0.42s cubic-bezier(0.6, 0, 0.3, 1), color 0.42s ease;
}
.rw-row.is-struck .rw-was span { background-size: 100% 0.78em; color: rgba(21, 21, 21, 0.5); }
.rw-is { display: block; min-height: 1px; }
.rw-ink { display: block; height: calc(var(--t-size) * 0.62); width: auto; max-width: 100%; margin: -0.1em 0 0 0.3em; rotate: -1deg; mix-blend-mode: multiply; }
.rw-sum .lbx__x { width: 18px; height: 18px; margin-top: 0.7em; color: var(--ink); }
.rw-row[open] .lbx__x { rotate: 45deg; }
.rw-row::details-content { block-size: 0; overflow-y: clip; transition: block-size 0.45s cubic-bezier(0.22, 1, 0.36, 1), content-visibility 0.45s allow-discrete; }
.rw-row[open]::details-content { block-size: auto; }
.rw-more { padding: 0 0 clamp(20px, 2vw, 32px) calc(clamp(40px, 4vw, 64px) + 14px); color: #2e2b27; }

/* w2 · Print trail: the services in big print on the desk; pointing at one throws prints of its real
   projects onto the desk under the pointer; they land under the words, which read through them */
.pt-lab { position: relative; padding: clamp(64px, 7vw, 120px) var(--pad) 0; --pw: clamp(190px, 17vw, 300px); --pw-p: clamp(140px, 12vw, 220px); }
.pt-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.pt-print {
  position: absolute; height: auto; translate: -50% -50%; rotate: var(--r); opacity: 0; scale: 1.14;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.38)) drop-shadow(0 18px 26px rgba(0, 0, 0, 0.34));
  transition: opacity 0.22s ease, scale 0.36s cubic-bezier(0.3, 1.4, 0.5, 1), translate 0.45s ease;
}
.pt-print.is-in { opacity: 1; scale: 1; }
.pt-print.is-out { opacity: 0; translate: -50% -60%; scale: 1.04; transition: opacity 0.4s ease, translate 0.45s ease, scale 0.45s ease; }
.pt-head { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px 40px; color: #ece9e2; }
.pt-head .btn-tape img { height: clamp(42px, 4vw, 58px); width: auto; }
.pt-hint--touch { display: none; }
@media (hover: none) { .pt-hint--mouse { display: none; } .pt-hint--touch { display: block; } }
.pt-hint { position: relative; z-index: 2; margin-top: 18px; font: 600 11.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244, 241, 234, 0.5); }
.pt-list { position: relative; z-index: 2; margin-top: clamp(26px, 3vw, 48px); border-top: 1px solid rgba(244, 241, 234, 0.22); mix-blend-mode: difference; interpolate-size: allow-keywords; }
.pt-row { border-bottom: 1px solid rgba(244, 241, 234, 0.22); }
.pt-sum { display: grid; grid-template-columns: clamp(52px, 6vw, 100px) minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: clamp(14px, 1.5vw, 24px) 0; cursor: pointer; list-style: none; color: #F4F1EA; }
.pt-sum::-webkit-details-marker { display: none; }
.pt-sum .lbx__n { color: rgba(244, 241, 234, 0.6); }
.pt-t { font: 400 calc(var(--t-size) * 0.86)/0.95 var(--hero); text-transform: uppercase; letter-spacing: -0.035em; transition: translate 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.pt-sum:hover .pt-t, .pt-row[open] .pt-t { translate: 12px 0; }
.pt-sum:hover .lbx__ring path, .pt-row[open] .lbx__ring path { stroke-dashoffset: 0 !important; }
.pt-sum .lbx__x { width: 20px; height: 20px; color: #F4F1EA; }
.pt-row[open] .lbx__x { rotate: 45deg; }
.pt-row::details-content { block-size: 0; overflow-y: clip; transition: block-size 0.45s cubic-bezier(0.22, 1, 0.36, 1), content-visibility 0.45s allow-discrete; }
.pt-row[open]::details-content { block-size: auto; }
.pt-more { padding: 0 0 clamp(22px, 2.4vw, 36px) calc(clamp(52px, 6vw, 100px) + 26px); color: #F4F1EA; }

/* w3 · The knot: a section the page holds still while you scroll through it; the frames of the film
   (render_knot.py) play on a canvas, and each lab's services come in while the camera is on its loop */
.kn3 { position: relative; height: calc(var(--frames) * 2.9vh + 100vh); }
.kn3-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.kn3-cv {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  /* the film's desk fades into the page's, where the section starts and ends */
  -webkit-mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent);
}
.kn3 [data-from] { opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s 0.45s, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1); translate: 0 14px; }
.kn3 [data-from].is-on { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 0.45s ease, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.kn3-intro { position: absolute; left: 0; right: 0; bottom: 5vh; text-align: center; color: #F4F1EA; }
.kn3-kicker { display: inline-block; padding: 7px 12px; border-radius: 3px; background: rgba(12, 12, 14, 0.55); font: 600 12px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; }
.kn3-line { margin-top: 12px; font: 400 var(--t-size)/0.95 var(--hero); text-transform: uppercase; letter-spacing: -0.035em; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
.kn3-line--s { font-size: calc(var(--t-size) * 0.62); }
.kn3-line span { color: var(--orange); }
.kn3-outro { position: absolute; left: 0; right: 0; top: 7.5vh; text-align: center; color: #F4F1EA; }
.kp { position: absolute; top: 50%; width: min(40vw, 560px); translate: 0 -50%; color: #F4F1EA; }
.kp.is-on { translate: 0 -50%; }
.kn3 .kp[data-from] { translate: 0 calc(-50% + 14px); }
.kn3 .kp[data-from].is-on { translate: 0 -50%; }
.kp--brand { left: var(--pad); }
.kp--digital { right: var(--pad); }
.kp-head .mx-title { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
.kp-list { margin-top: clamp(22px, 2.6vw, 40px); border-top: 1px solid rgba(244, 241, 234, 0.26); }
.kp-row {
  all: unset; box-sizing: border-box; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; padding: clamp(11px, 1.1vw, 16px) 0; border-bottom: 1px solid rgba(244, 241, 234, 0.26); cursor: pointer;
}
.kp-row .lbx__n { color: rgba(244, 241, 234, 0.62); }
.kp-t { font: 400 clamp(16px, 1.45vw, 24px)/1.1 var(--hero); text-transform: uppercase; letter-spacing: -0.015em; transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.kp-row:hover .kp-t, .kp-row[aria-expanded="true"] .kp-t { translate: 6px 0; }
.kp-row:hover .lbx__ring path, .kp-row[aria-expanded="true"] .lbx__ring path { stroke-dashoffset: 0 !important; }
.kp-row .lbx__x { width: 16px; height: 16px; color: #F4F1EA; }
.kp-row[aria-expanded="true"] .lbx__x { rotate: 45deg; }
.kp-row:focus-visible { outline: 2px dashed var(--orange); outline-offset: 4px; }
.kp-foot { margin-top: clamp(22px, 2.6vw, 40px); }
.kp-foot .btn-tape img { height: clamp(40px, 3.6vw, 54px); width: auto; }
.kp-note {
  position: absolute; left: calc(100% + clamp(24px, 3vw, 56px)); top: 50%; translate: 0 -50%; z-index: 4; width: min(460px, 34vw); rotate: -1deg;
  padding: 30px 30px 26px; color: var(--ink); background: #EFEBE3 url('/assets/lab/img/lab/home/nb-tile-2k.jpg') 0 0 / 1920px auto repeat;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3), 0 26px 44px rgba(0, 0, 0, 0.4);
}
.kp--digital .kp-note { left: auto; right: calc(100% + clamp(24px, 3vw, 56px)); rotate: 1deg; }
.kp-note[hidden] { display: none; }
.kp-note .lt-note__t { margin-bottom: 12px; }
.kp-more { color: #2e2b27; }

/* ════════════════════════════════════════
   SMALL SCREENS
════════════════════════════════════════ */
@media (max-width: 900px) {
  .lbx__head { flex-direction: column; align-items: flex-start; }
  .lbx__more { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .lc-sheet { grid-template-columns: minmax(0, 1fr); }
  .lc-fig { order: -1; margin: 0 -6px; }
  .lc-sheet .lbx__more { padding-left: 0; }
  .lc-tape { width: 84px; top: -12px; }
  .lc-tape--l { left: -14px; }
  .lc-tape--r { right: -14px; }
  .lc-foot { flex-wrap: wrap; }
  .lbd-papers { gap: 18px; }
  .lbd-paper { width: calc(50% - 9px); max-width: 260px; }
  /* A: the drawing keeps its numbers, circled; what they are is the index under it */
  .lba-head { flex-direction: column; align-items: flex-start; }
  .lba-call { pointer-events: none; }
  .lba-call__t, .lba-note { display: none !important; }
  .lba-call .lbx__ring path { stroke-dashoffset: 0 !important; }
  .lba-list { display: block; }
  .lba-list .lbx__more { padding-left: 0; }
  /* B: the two columns one under the other */
  .lbi-cols { grid-template-columns: minmax(0, 1fr); }
  /* C: one pile under the other, bigger type on the cards */
  .lbf { grid-template-columns: minmax(0, 1fr); }
  .lbf-file { --strip: 17cqw; }
  .lbf-t { font-size: 4.6cqw; }
  .lbf-n { font-size: 3.2cqw; }
  .lbf-tab { padding-right: 28cqw; }
  .lbf-d { font-size: 4cqw; }
  .lbf-i { display: none; }
  /* D: the proof of the service you open lies under the list */
  .lbp-grid { grid-template-columns: minmax(0, 1fr); }
  .lbp-proofs { position: relative; top: auto; height: min(100vw - 2 * var(--pad), 440px); }
  .lbp-t { font-size: clamp(20px, 5.6vw, 30px); }
  .lbp-more { padding-left: 0; }
}
@media (max-width: 900px) {
  /* the sections with motion, on a phone */
  .rw-more, .pt-more { padding-left: 0; }
  .rw-head, .pt-head { flex-direction: column; align-items: flex-start; }
  .pt-lab { --pw: 48vw; --pw-p: 36vw; }
  .kn3-cv { height: 56vw; top: 9vh;
    -webkit-mask-image: radial-gradient(ellipse 62% 64% at 50% 50%, #000 62%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 64% at 50% 50%, #000 62%, transparent 100%); }
  .kp { top: auto; bottom: 0; width: auto; left: var(--pad) !important; right: var(--pad) !important; translate: 0 0 !important; padding-bottom: 18px; }
  .kn3 .kp[data-from] { translate: 0 14px !important; }
  .kn3 .kp[data-from].is-on { translate: 0 0 !important; }
  .kp-note { position: fixed; left: 50% !important; right: auto !important; top: 50%; width: min(92vw, 440px); translate: -50% -50%; }
  .kn3-intro, .kn3-outro { top: calc(9vh + 56vw + 28px); bottom: auto; }
  /* the labs' sections on a phone: the halves one under the other, two cards a row, the tapes
     under the print */
  .lh { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .lh-half--l, .lh-half--r { margin: 0; }
  .lh-pin { display: none; }
  .lh-more { padding-left: 0; }
  .lk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-stage { grid-template-columns: minmax(0, 1fr); }
  .lt-col { order: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 16px; margin: 22px 0 0 !important; }
  .lt-col--r { margin-top: 14px !important; }
  .lt-note { width: min(92vw, 460px); top: 34%; }
  /* on a phone the line fills the sheet: no margins for the notes; the ring stays */
  .an, .an-both { display: none; }
}
@media (max-width: 600px) {
  /* the long tapes (START A … PROJECT) set smaller, so they fit a phone's sheet */
  .lc-cta img, .lbi-foot .btn-tape img, .lba-side .btn-tape img, .lbf-foot .btn-tape img,
  .lh-foot .btn-tape img, .lk-head .btn-tape img, .lt-foot .btn-tape img,
  .rw-head .btn-tape img, .pt-head .btn-tape img, .kp-foot .btn-tape img { height: 34px; }
  .lk-grid { grid-template-columns: minmax(0, 1fr); }
  .lk-sum { min-height: 0; }
  .mx-e .needs .lk-card .need__title { font-size: 24px; margin-bottom: 18px; }
  .lbd-tape { height: 30px; top: -14px; }
}
@media (prefers-reduced-motion: reduce) {
  .lbx__x, .lbx__t, .lbd-paper, .lba-call__t, .lbi-t, .lbf-t, .lbf-file, .lbf-card, .lbf-body, .lbp-t, .lbp-print { transition: none; }
  .lbx__row::details-content, .lbi-row::details-content, .lbp-row::details-content { transition: none; }
  .lbp-proof.is-on .lbp-print, .lbp-proof.is-on .lbp-bretzi { animation: none; }
}

/* the page as picked: the hero's lab tapes glide down to the lab's first card, clear of the floating logo */
#brand-lab, #digital-lab { scroll-margin-top: clamp(120px, 17vh, 170px); }
@media (prefers-reduced-motion: no-preference) { html:has(body.pg-labs) { scroll-behavior: smooth; } }