/* ===== src/css/base.css ===== */
/* ==========================================================
   Design by Lucas · base.css (shared, owned by the foundation)
   tokens · reset · type · layout · PHOTOREAL KIT · motion states
   One key light from the top left: highlights sit on top-left
   edges, every shadow falls to the bottom right.
   Textures: tex/ (sources and licences in CREDITS.md)
   Section styles live in css/NN-<section>.css, never here.
   ========================================================== */

/* ---------- fonts: self-hosted subsets (tools/fetch_fonts.py, OFL 1.1, see CREDITS.md) ----------
   No request to Google: nothing leaves the site but the CDN scripts. Archivo is one variable file
   (width 62 to 100 %, weight 400 to 900) plus the one italic instance the headlines use (62 % / 900).
   head.html preloads Archivo (both) and Sedgwick, so the hero title paints in its own face. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 62% 100%; font-display: swap; src: url("fonts/archivo.woff2?v=47564a91") format("woff2"); }
@font-face { font-family: 'Archivo'; font-style: italic; font-weight: 900; font-stretch: 62%; font-display: swap; src: url("fonts/archivo-italic.woff2?v=47f96999") format("woff2"); }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/courier-prime-400.woff2?v=e558ff30") format("woff2"); }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/courier-prime-700.woff2?v=f0cb7df5") format("woff2"); }
@font-face { font-family: 'Sedgwick Ave Display'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/sedgwick-ave-display.woff2?v=de68285c") format("woff2"); }
/* metric-matched fallback while Archivo loads: cap height and line box of Archivo (cap 686, ascent 878,
   descent 210 per 1000) on local faces; text and body weights on Arial, the heavy (mostly condensed)
   headline weights on Arial Narrow Bold, so a swap neither moves lines nor jumps in width as much */
@font-face { font-family: 'Archivo Fallback'; font-weight: 100 750; src: local('Arial'), local('ArialMT'), local('Roboto'), local('Helvetica'); size-adjust: 95.8%; ascent-override: 91.6%; descent-override: 21.9%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Fallback'; font-weight: 751 1000; src: local('Arial Narrow Bold'), local('ArialNarrow-Bold'), local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'), local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 95.8%; ascent-override: 91.6%; descent-override: 21.9%; line-gap-override: 0%; }

:root {
  --paper: #EEE8DC;
  --paper-hi: #FAF7F0;
  --paper-lo: #E3DBCB;
  --ink: #141211;
  --ink-soft: #45403B;
  --red: #C41828;
  --red-dk: #9C1220;
  --tape: rgba(222, 205, 160, .8);
  --focus: var(--ink);

  --f-display: 'Archivo', 'Archivo Fallback', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --f-type: 'Courier Prime', 'Courier New', monospace;
  --f-marker: 'Sedgwick Ave Display', 'Marker Felt', 'Comic Sans MS', cursive;

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1320px;
  --ease: cubic-bezier(.2, .9, .25, 1.05);

  /* photoreal textures (CC0 ambientCG photoscans, see CREDITS.md) */
  --tile: 794px 1024px;                       /* display size of the three paper tiles */
  --tex-paper: url("tex/paper-bg.webp?v=6c1b6229");      /* the table: cream recycled paper */
  --tex-white: url("tex/paper-white.webp?v=4acf6cc6");   /* white photo / card stock */
  --tex-ink: url("tex/paper-ink.webp?v=771765dc");       /* black paper sheet */
  --tex-black: url("tex/strip-black.webp?v=bca0847a");   /* torn black strip (labels, strip behind type) */
  /* the table paper already multiplied by the sheet colour (tex/src/perf_bake.py): a runtime
     background-blend-mode made Safari blend every tile it painted while scrolling */
  --tex-lo: url("tex/paper-lo.webp?v=865598c1");
  --tex-red: url("tex/paper-red.webp?v=b2d7f7c7");
  /* masks are inlined as data URIs by build.py: CSS masks need same-origin images (file:// never is) */
  --mask-ink: url("data:image/webp;base64,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");
  --mask-stamp: url("data:image/webp;base64,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");

  /* shadows: warm brown on cream paper; .sheet-ink switches --sh-c to black */
  --sh-c: 48, 33, 18;
  --sh-rest:
    0 0 0 .5px rgba(var(--sh-c), .10),
    1px 1px 1px rgba(var(--sh-c), .22),
    2px 4px 5px -1px rgba(var(--sh-c), .16),
    7px 13px 16px -6px rgba(var(--sh-c), .22),
    18px 34px 44px -18px rgba(var(--sh-c), .30),
    inset 1px 1px 0 rgba(255, 255, 255, .75),
    inset -1px -1px 0 rgba(var(--sh-c), .10);
  --sh-lift:
    0 0 0 .5px rgba(var(--sh-c), .06),
    3px 5px 6px -1px rgba(var(--sh-c), .12),
    12px 22px 24px -8px rgba(var(--sh-c), .20),
    26px 50px 60px -18px rgba(var(--sh-c), .30),
    44px 80px 100px -30px rgba(var(--sh-c), .22),
    inset 1px 1px 0 rgba(255, 255, 255, .8),
    inset -1px -1px 0 rgba(var(--sh-c), .08);
  --sh-label: .5px .5px .5px rgba(var(--sh-c), .25), 2px 4px 6px -2px rgba(var(--sh-c), .3);
  --tilt: 7deg;

  /* torn outline for clip-path sheets (notes, quotes) */
  --torn: polygon(0% 1%, 3.8% 1.2%, 7.7% 2%, 11.5% 1%, 15.4% 1.1%, 19.2% 1.3%, 23.1% .4%, 26.9% 1.1%, 30.8% 1.4%, 34.6% 1.7%, 38.5% .2%, 42.3% .7%, 46.2% .2%, 50% 1.8%, 53.8% 1.5%, 57.7% .1%, 61.5% 2.2%, 65.4% 2.1%, 69.2% 1.4%, 73.1% 1.4%, 76.9% .3%, 80.8% 0%, 84.6% 1.2%, 88.5% .1%, 92.3% .4%, 96.2% .5%, 100% 0%, 99.3% 8.3%, 99.3% 16.7%, 98.7% 25%, 99.2% 33.3%, 99% 41.7%, 99.2% 50%, 98.9% 58.3%, 99.3% 66.7%, 99.6% 75%, 98.4% 83.3%, 98.4% 91.7%, 100% 97.8%, 96.2% 98.2%, 92.3% 99.2%, 88.5% 99.4%, 84.6% 99.2%, 80.8% 99.8%, 76.9% 98%, 73.1% 99%, 69.2% 97.8%, 65.4% 99%, 61.5% 97.5%, 57.7% 97.8%, 53.8% 100%, 50% 99.5%, 46.2% 97.6%, 42.3% 98.8%, 38.5% 97.5%, 34.6% 99%, 30.8% 99.8%, 26.9% 98.4%, 23.1% 98%, 19.2% 99.3%, 15.4% 99.8%, 11.5% 99.1%, 7.7% 97.5%, 3.8% 98%, .2% 100%, .4% 91.7%, .2% 83.3%, .1% 75%, 1.3% 66.7%, .3% 58.3%, .9% 50%, .7% 41.7%, .3% 33.3%, 1.2% 25%, .2% 16.7%, 1% 8.3%);
}

/* ---------- reset + type ---------- */

*, *::before, *::after { box-sizing: border-box; }
/* overflow-anchor: Safari now has CSS scroll anchoring, and it fought the scripted layout (ScrollTrigger
   refresh, the sticky tear and deal stages): after an anchor jump or a #kontakt deep link it shifted
   the page by a further ~320 px a moment later. Nothing here needs it (every image reserves its size). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; overflow-anchor: none; }
/* PERF (Safari): image-rendering is inherited. With the default (auto), WebKit paints a scaled image
   at low quality while anything on the page is being resized and, half a second after the last such
   paint, repaints EVERY element that drew a scaled image (the paper and tape textures are scaled on
   almost every card, label and button) in high quality: a 100 to 150 ms frame each time the scroll
   came to rest. optimizeQuality skips that low quality pass, so there is nothing to redo; at rest the
   pixels are the same high quality ones. Chrome and Firefox treat it as auto / smooth. */
html { image-rendering: optimizeQuality; }
body {
  margin: 0;
  /* the table: real paper + one window light from the top left */
  background:
    radial-gradient(1400px 1000px at 2% -8%, rgba(255, 251, 241, .55), rgba(255, 251, 241, 0) 70%) 0 0 / 100% 1600px no-repeat,
    radial-gradient(1100px 760px at 100% 820px, rgba(60, 40, 20, .085), rgba(60, 40, 20, 0) 72%) 0 0 / 100% 1600px no-repeat,
    var(--tex-paper) 0 0 / var(--tile),
    var(--paper);
  color: var(--ink);
  font-family: var(--f-display);
  font-stretch: 100%;
  font-size: 17px;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--red); color: #fff; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
[tabindex="-1"]:focus { outline: none; }   /* sections focused after an anchor jump */

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: -80px; z-index: 100;
  background: var(--ink); color: var(--paper-hi); padding: 12px 18px;
  font-weight: 700; text-decoration: none; transition: top .2s;
}
.skip:focus { top: 12px; }
.fx { position: absolute; width: 0; height: 0; overflow: hidden; }

.u-red { color: var(--red); }

/* ==========================================================
   PHOTOREAL KIT
   ========================================================== */

/* ---------- sheets: whole sections cut from coloured paper, laid on the table ---------- */
/* add to a section root together with .torn-top / .torn-bottom for the torn edges */

/* sheet colours: --tex-lo / --tex-red are the paper scan pre-multiplied by #F3F1EC / #D11B2F
   (same pixels as the old background-blend-mode: multiply); the flat colour is their mean */
.sheet-lo {
  --bg: var(--paper-lo);
  --edge-top: url("tex/edge-lo-top.webp?v=ae39c8b5");
  --edge-bottom: url("tex/edge-lo-bottom.webp?v=01412f39");
  background: var(--tex-lo) 0 0 / var(--tile), #E4DAC9;
}
.sheet-red {
  --bg: var(--red); --focus: #fff;
  --edge-top: url("tex/edge-red-top.webp?v=89f697d2");
  --edge-bottom: url("tex/edge-red-bottom.webp?v=0a6964c5");
  background: var(--tex-red) 0 0 / var(--tile), #C41928;
  color: #fff;
}
.sheet-ink {
  --bg: var(--ink); --focus: var(--paper-hi);
  --sh-c: 0, 0, 0;
  --edge-top: url("tex/edge-ink-top.webp?v=e3907061");
  --edge-bottom: url("tex/edge-ink-bottom.webp?v=20aef82a");
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 246, 230, .06), rgba(255, 246, 230, 0) 60%),
    var(--tex-ink) 0 0 / var(--tile),
    var(--ink);
  color: var(--paper-hi);
}

/* torn edges (images with real fibres; the bottom edge carries its own shadow).
   They use the root's ::before / ::after, so do not use those on a .torn-* root. */
.torn-top, .torn-bottom { position: relative; }
.torn-top::before, .torn-bottom::after {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; height: 43px; pointer-events: none;
  background: var(--edge-top, url("tex/edge-lo-top.webp?v=ae39c8b5")) 0 0 / 794px 43px repeat-x;
}
.torn-top::before { top: -40px; }
.torn-bottom::after { bottom: -40px; background-image: var(--edge-bottom, url("tex/edge-ink-bottom.webp?v=20aef82a")); }

/* textures below the fold wait for their section (first view budget): an inline script in tail.html
   adds .tex-on to a [data-section] root two screens before it scrolls in. Without JS nothing waits.
   A section may gate its own extra images the same way. */
html.js [data-section]:not(.tex-on) { --tex-ink: none; --tex-lo: none; --tex-red: none; --edge-top: none; --edge-bottom: none; }

/* ---------- paper card: a sheet of white stock resting on the table ---------- */
.paper {
  background: var(--tex-white) 0 0 / 410px auto, var(--paper-hi);
  color: var(--ink);
  box-shadow: var(--sh-rest);
}

/* ---------- print: photo / print on photo paper ----------
   markup: <figure class="print [print--gloss]" data-tilt style="--curl:.8">
             <span class="tape tape--top tape--a" aria-hidden="true"></span>
             <span class="print__img"><img ...></span>
             <figcaption>...</figcaption>
             <span class="print__light" aria-hidden="true"></span>
           </figure>
   paper sheet = ::before, lifted-corner shadow = ::after (--curl 0..1.3), light falloff = .print__light.
   [data-tilt] adds a gentle 3D tilt toward the pointer (core.js, fine pointers only). */
.print {
  position: relative;
  background: none;
  box-shadow: none;
  isolation: isolate;
  transition: translate .5s cubic-bezier(.2, .7, .2, 1), transform .45s cubic-bezier(.2, .7, .2, 1), scale .45s var(--ease), rotate .45s var(--ease);
}
.print::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 2px;
  background: var(--tex-white) 0 0 / 410px auto, #FAF7F0;
  box-shadow: var(--sh-rest);
  transition: box-shadow .45s ease;
}
.print::after {
  content: ""; position: absolute; z-index: -2;
  right: 4%; bottom: 4%; width: 44%; height: 38%;
  border-radius: 0 0 46% 0 / 0 0 60% 0;
  box-shadow: calc(var(--curl, 1) * 12px) calc(var(--curl, 1) * 15px) 16px 2px rgba(var(--sh-c), calc(var(--curl, 1) * .32));
  transform: rotate(3deg) skewX(10deg);
  transition: transform .45s ease, box-shadow .45s ease;
}
.print__light {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 2px;
  background:
    linear-gradient(132deg, rgba(255, 253, 246, .18) 0%, rgba(255, 253, 246, 0) 42%),
    radial-gradient(64% 56% at 100% 100%, rgba(45, 30, 15, calc(var(--curl, 1) * .17)) 0%, rgba(45, 30, 15, calc(var(--curl, 1) * .05)) 45%, rgba(45, 30, 15, 0) 76%);
  transition: opacity .45s ease;
}
.print__img { display: block; position: relative; overflow: hidden; background: #111; }
.print__img img { display: block; width: 100%; height: auto; }
.print__img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 1px 1.5px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .14);
}
/* glossy instant print: a soft window reflection that slides with the tilt */
.print--gloss .print__img::before {
  content: ""; position: absolute; z-index: 1; inset: -10% -70%; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, .16) 44%, rgba(255, 255, 255, .07) 52%, rgba(255, 255, 255, 0) 62%);
  mix-blend-mode: screen;
  transform: translateX(calc(var(--tx, 0) * -22%));
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.print:hover, .print:focus-within { scale: 1.018; }
/* tilt only while the pointer is on the print (no idle 3D layers) */
.print.is-tilt { transform: perspective(1100px) rotateX(calc(var(--ty, 0) * var(--tilt) * -1)) rotateY(calc(var(--tx, 0) * var(--tilt))); }
.print:hover::before, .print:focus-within::before { box-shadow: var(--sh-lift); }
.print:hover::after, .print:focus-within::after { transform: rotate(4deg) skewX(13deg) translate(4px, 6px); box-shadow: 16px 22px 26px 3px rgba(var(--sh-c), .24); }

/* ---------- masking tape: photographed paper tape, translucent, torn ends ----------
   <span class="tape tape--top|tape--tl|tape--tr [tape--a|b|c|d]" aria-hidden="true"></span>
   the parent must be position: relative. The contact shadow is baked into tex/tape-sh-*.webp
   (tex/src/perf_bake.py): a CSS filter on ~45 tapes was re-run on every paint in Safari. */
.tape {
  position: absolute; z-index: 4; pointer-events: none;
  width: 104px; aspect-ratio: 330 / 116;
  background: url("tex/tape-sh-a.webp?v=08c53856") center / 100% 100% no-repeat;
}
.tape--a { width: 104px; aspect-ratio: 330 / 116; background-image: url("tex/tape-sh-a.webp?v=08c53856"); }
.tape--b { width: 116px; aspect-ratio: 380 / 108; background-image: url("tex/tape-sh-b.webp?v=99e52745"); }
.tape--c { width: 80px; aspect-ratio: 260 / 120; background-image: url("tex/tape-sh-c.webp?v=50a7262a"); }
.tape--d { width: 76px; aspect-ratio: 250 / 122; background-image: url("tex/tape-sh-d.webp?v=b09c6801"); }
.tape--top { top: -19px; left: 50%; translate: -50% 0; rotate: -3deg; }
.tape--tl { top: -12px; left: -30px; rotate: -36deg; }
.tape--tr { top: -12px; right: -30px; rotate: 34deg; }

/* ---------- scissor-cut label: real black paper / red stock, glued flat ---------- */
.cutlabel {
  display: inline-block;
  font-family: var(--f-display); font-stretch: 75%; font-weight: 800;
  font-size: 15px; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  background: var(--tex-black) 50% 50% / 560px auto, var(--ink);
  color: var(--paper-hi);
  padding: 7px 11px 6px;
  rotate: -2deg;
  transform: skewX(-4deg);
  box-shadow: .5px .5px 0 rgba(0, 0, 0, .3), 1px 2px 2px -.5px rgba(var(--sh-c), .45), 3px 5px 7px -3px rgba(var(--sh-c), .35);
}
.cutlabel--ink { background: var(--tex-black) 50% 50% / 560px auto, var(--ink); }
.cutlabel--red { background: var(--tex-white) 0 0 / 300px auto, var(--red); background-blend-mode: multiply; color: #fff; }

/* ---------- typed label stuck on the page (section numbers, small tags) ---------- */
.label, .sechead__no {
  display: inline-block;
  font-family: var(--f-type); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  border: 2px solid var(--ink);
  background: var(--tex-white) 0 0 / 300px auto, var(--paper-hi);
  color: var(--ink);
  padding: 5px 10px 4px; rotate: -2deg;
  box-shadow: var(--sh-label);
}

/* ---------- felt marker: rough edges, uneven felt, ink multiplies into the paper ----------
   text: <p class="marker">…</p> · strokes: <svg class="scribble"><path pathLength="1" d="…"/></svg>
   filters #fx-marker / #fx-stamp live in head.html. On dark sheets the blend switches to normal.
   PERF: an SVG filter cannot run on the GPU, so Safari re-ran it (two feTurbulence at Retina
   resolution) whenever anything near it repainted while scrolling. will-change gives every marker,
   scribble and stamp its own layer: the filter is rendered once, and a stroke being drawn repaints
   only its own small layer. Keep it when you add one. */
.marker {
  font-family: var(--f-marker); color: #C51D2C;
  font-size: 26px; line-height: 1.05; rotate: -4deg;
  filter: url(#fx-marker); mix-blend-mode: multiply;
  will-change: transform;
}
.scribble {
  position: absolute; pointer-events: none; overflow: visible; fill: none;
  stroke: #C51D2C; stroke-linecap: round; stroke-linejoin: round;
  filter: url(#fx-marker); mix-blend-mode: multiply;
  will-change: transform;
}
.scribble path { vector-effect: non-scaling-stroke; stroke-width: 5.5px; stroke-opacity: .9; }
.sheet-ink .marker, .sheet-red .marker, .sheet-ink .scribble, .sheet-red .scribble { mix-blend-mode: normal; }

/* ---------- printed ink: type sits in the paper, not on the screen ---------- */
.ink {
  display: inline-block;
  padding: .16em .02em .05em; margin: -.16em -.02em -.05em;
  -webkit-mask: var(--mask-ink) 0 0 / 384px 384px; mask: var(--mask-ink) 0 0 / 384px 384px;
}

/* ---------- torn black paper strip behind a word ---------- */
.strip {
  display: inline-block; font-style: italic;
  background: var(--tex-black) 0 0 / 100% 100% no-repeat;
  color: var(--paper-hi);
  padding: .13em .24em .12em .16em;
  margin: -.02em 0 0 -.14em;
  rotate: -2.2deg;
}

/* ---------- print halftone (red AM raster, multiplies into the paper) ---------- */
.halftone {
  position: absolute; pointer-events: none;
  background: url("tex/halftone.webp?v=20f53f14") center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
}

/* ---------- rubber stamp with uneven ink ----------
   <div class="stamp" aria-hidden="true"><svg viewBox="0 0 200 200">…circles + text…</svg></div>
   position / size / rotation belong to the section */
.stamp {
  position: absolute; z-index: 6;
  aspect-ratio: 1;
  color: #C41828;
  mix-blend-mode: multiply;
  filter: url(#fx-stamp);
  -webkit-mask: var(--mask-stamp) center / 100% 100%; mask: var(--mask-stamp) center / 100% 100%;
  opacity: .95;
  pointer-events: none;
  will-change: transform;   /* own layer: the #fx-stamp filter renders once (see .marker) */
}
.stamp svg { display: block; width: 100%; height: 100%; overflow: visible; }
.stamp__line { fill: none; stroke: currentColor; stroke-width: 2.2; }
.stamp__line--fat { stroke-width: 5.5; }
.stamp__ring { fill: currentColor; font-family: var(--f-display); font-stretch: 75%; font-weight: 800; font-size: 16px; letter-spacing: .02em; text-transform: uppercase; }
.stamp__mid { fill: currentColor; font-family: var(--f-display); font-stretch: 62%; font-weight: 900; font-style: italic; font-size: 56px; }

/* ---------- buttons: stock glued onto a black offset sheet, soft contact shadow ---------- */
.btn {
  --sh: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;
  font-family: var(--f-display); font-stretch: 80%; font-weight: 800;
  font-size: 16px; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; text-decoration: none;
  padding: 14px 20px;
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--sh), 6px 7px 5px -1px rgba(var(--sh-c), .35), 1px 1px 1px rgba(var(--sh-c), .25);
  cursor: pointer;
  transition: translate .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover { translate: -2px -2px; box-shadow: 7px 7px 0 var(--sh), 9px 10px 8px -1px rgba(var(--sh-c), .32), 1px 1px 1px rgba(var(--sh-c), .2); }
.btn:active { translate: 3px 3px; box-shadow: 2px 2px 0 var(--sh), 3px 3px 2px rgba(var(--sh-c), .35); }
.btn--red { background: var(--tex-white) 0 0 / 300px auto, var(--red); background-blend-mode: multiply; color: #fff; }
.btn--red:hover { background-color: var(--red-dk); }
.btn--ghost, .btn--paper { background: var(--tex-white) 0 0 / 300px auto, var(--paper-hi); color: var(--ink); }
.btn--ink { background: var(--tex-black) 50% 50% / 560px auto, var(--ink); color: var(--paper-hi); --sh: var(--red); }
.btn--xl { font-size: 18px; padding: 17px 24px; }
.btn--block { width: 100%; }

/* ==========================================================
   SECTION SCAFFOLDING (shared header pattern)
   ========================================================== */

.sec { position: relative; padding: clamp(64px, 8vw, 120px) var(--gutter); overflow-x: clip; }
.sechead {
  position: relative; max-width: var(--maxw); margin: 0 auto clamp(40px, 5vw, 72px);
}
.sechead__title {
  font-stretch: 62%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(54px, 8.4vw, 124px); line-height: .86;
  max-width: 14ch;
  /* printed ink */
  padding-top: .16em; margin-top: calc(18px - .16em);
  -webkit-mask: var(--mask-ink) 0 0 / 384px 384px; mask: var(--mask-ink) 0 0 / 384px 384px;
}
.sechead__sub { font-size: clamp(17px, 1.35vw, 20px); max-width: 40ch; margin-top: 18px; color: var(--ink-soft); }
.sechead__marker { position: absolute; right: 4%; bottom: -34px; display: flex; align-items: flex-start; gap: 6px; }
.sechead__marker svg { width: 34px; height: 44px; margin-top: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sechead--light .sechead__title { color: var(--paper-hi); }
.sechead--light .sechead__sub { color: #CFC6B6; }
.sechead--light .sechead__no, .sechead__no--light { background: transparent; color: var(--paper-hi); border-color: currentColor; box-shadow: none; }

/* ==========================================================
   MOTION STATES (core.js)
   Content is visible by default: no JS, JS failed, CDN failed, reduced motion.
   html.dbl-pre is set inline in <head> only when motion may run; core.js removes it
   at boot in the same task that sets the start states, so nothing flashes.
   ========================================================== */

html.dbl-pre [data-reveal], html.dbl-pre [data-anim], html.dbl-pre [data-draw] { opacity: 0; }
.dbl-tw { transition: none !important; }
html.dbl-locked { overflow: hidden; }

/* Lenis 1.3.26 (MIT, darkroomengineering), dist/lenis.css + scroll-behavior fix */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
/* Lenis 1.3 adds .lenis-smooth only while it animates a wheel scroll, so html { scroll-behavior: smooth }
   stayed on for native scrolls (keys, focus, scrollbar) and fought Lenis: programmatic and keyboard
   scrolls stalled. Lenis needs scroll-behavior auto whenever it runs; static mode keeps native smooth. */
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .print.is-tilt { transform: none; }
}

/* ---------- responsive base (breakpoints: 1180 / 980 / 640) ---------- */

@media (max-width: 980px) {
  .sechead__marker { position: static; display: inline-block; margin-top: 16px; }
}

@media (max-width: 640px) {
  /* keyboard focus and anchors stop above the fixed call dock (10-nav) */
  html { scroll-padding-bottom: 96px; }
  body {
    font-size: 16.5px;
    background:
      radial-gradient(700px 900px at 0% -4%, rgba(255, 251, 241, .5), rgba(255, 251, 241, 0) 65%) 0 0 / 100% 1100px no-repeat,
      var(--tex-paper) 0 0 / 600px auto,
      var(--paper);
  }
  .sechead__title { font-size: clamp(50px, 15vw, 76px); }
  .tape { width: 82px; }
  .tape--a { width: 82px; } .tape--b { width: 90px; } .tape--c { width: 64px; } .tape--d { width: 60px; }
  .tape--tl { left: -20px; top: -10px; } .tape--tr { right: -20px; top: -10px; } .tape--top { top: -15px; }
  .print::after { box-shadow: 6px 8px 10px 0 rgba(var(--sh-c), .26); }
}

/* ===== src/css/10-nav.css ===== */
/* ==========================================================
   10 · nav (header + mobile menu + phone dock) · owner: nav agent
   The header box never changes height (no layout shift). Only the paper sheet inside it
   moves: full-width torn sheet at the top, a compact strip taped onto the page once the
   page scrolls (.is-compact from 10-nav.js).
   ========================================================== */

.nav {
  --nav-h: 78px;
  position: sticky; top: 0; z-index: 70;
  height: var(--nav-h);
  overflow-x: clip;                     /* tapes on the compact strip never widen the page */
  pointer-events: none;                 /* the box is taller than the compact strip */
}
.nav__sheet {
  position: absolute; inset: 0; pointer-events: auto;
  background: var(--tex-paper) 0 0 / var(--tile), var(--paper);
  transition: inset .5s var(--ease), filter .5s ease;
  /* own layer: its one drop-shadow (compact strip) is then drawn by the GPU, not repainted in
     software under the sticky header on every frame */
  will-change: transform;
}
/* torn bottom edge of the header sheet, with its shadow on the page */
.nav__sheet::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -40px; height: 43px; pointer-events: none;
  background: url("tex/torn-edge.webp?v=8ff86e71") 0 0 / 794px 43px repeat-x;
}
.nav__tape { opacity: 0; scale: 1.25; transition: opacity .25s ease, scale .35s var(--ease); }
.nav__tape--l { top: -14px; left: -34px; rotate: -38deg; }
.nav__tape--r { top: auto; bottom: -24px; right: -26px; rotate: -32deg; }

.nav__in {
  position: relative; height: 100%;
  max-width: 1440px; margin: 0 auto;
  display: flex; align-items: center; gap: clamp(16px, 2vw, 30px);
  padding: 4px var(--gutter) 0;
  transition: translate .5s var(--ease);
}
.nav__in > * { pointer-events: auto; }
.nav__logo { flex: none; display: block; rotate: -3deg; transition: rotate .25s var(--ease), scale .5s var(--ease); transform-origin: 0 50%; }
.nav__logo:hover { rotate: 2deg; }
.nav__logo img { display: block; width: 104px; height: auto; mix-blend-mode: multiply; }
.nav__main { display: flex; gap: clamp(14px, 1.6vw, 24px); }
.nav__main a {
  position: relative; isolation: isolate;
  font-stretch: 75%; font-weight: 800; font-size: 19px; letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
  padding: 6px 0; white-space: nowrap;
}
.nav__main a::after {
  content: ""; position: absolute; left: -3px; right: -3px; bottom: 2px; height: 6px;
  background: var(--red); rotate: -1.5deg; z-index: -1;
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.nav__main a:hover::after, .nav__main a[aria-current="true"]::after { transform: scaleX(1); }
.nav__sec { display: flex; gap: 18px; margin-left: auto; }
.nav__sec a { font-family: var(--f-type); font-weight: 700; font-size: 14px; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.nav__sec a:hover, .nav__sec a[aria-current="true"] { color: var(--red); text-decoration: underline; text-underline-offset: 4px; }
/* language switch: a typed paper tag with two cells, the current language punched out of red stock */
.nav__lang, .menu__lang {
  flex: none; display: inline-flex; align-items: stretch;
  border: 2px solid var(--ink);
  background: var(--tex-white) 0 0 / 300px auto, var(--paper-hi);
  box-shadow: var(--sh-label);
  font-family: var(--f-type); font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
  rotate: 2deg;
}
.nav__lang a, .menu__lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; padding: 7px 7px 6px; color: var(--ink); text-decoration: none;
}
.nav__lang a + a, .menu__lang a + a { border-left: 2px solid var(--ink); }
.nav__lang a:hover, .menu__lang a:hover { color: var(--red); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nav__lang a[aria-current="page"], .menu__lang a[aria-current="page"] {
  color: #fff; background: var(--tex-white) 0 0 / 300px auto, var(--red); background-blend-mode: multiply; text-decoration: none;
}
.menu__lang { margin-top: 26px; font-size: 15px; rotate: -1.5deg; }
.menu__lang a { min-width: 52px; min-height: 44px; }
.nav__cta { flex: none; font-size: 15px; padding: 11px 16px; box-shadow: 4px 4px 0 var(--ink), 5px 6px 4px -1px rgba(var(--sh-c), .35); }
.nav__burger {
  display: none; align-items: center; gap: 10px; margin-left: auto; min-height: 44px;
  background: var(--tex-black) 50% 50% / 560px auto, var(--ink); color: var(--paper-hi); border: 0; padding: 11px 14px; cursor: pointer;
  font-family: var(--f-type); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .06em;
  rotate: 1.5deg;
  box-shadow: var(--sh-label);
}
.nav__burger-lines { display: grid; gap: 5px; width: 20px; }
.nav__burger-lines i { display: block; height: 2px; background: currentColor; transition: transform .25s var(--ease); }
.nav__burger[aria-expanded="true"] .nav__burger-lines i:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burger-lines i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- compact: a strip of the same paper, taped onto the page ---------- */

.nav.is-compact .nav__sheet {
  inset: 7px max(12px, calc((100% - 1440px) / 2 + 12px)) 15px;
  filter: drop-shadow(0 5px 7px rgba(48, 33, 18, .2));
}
.nav.is-compact .nav__tape { opacity: 1; scale: 1; transition-delay: .18s; }
.nav.is-compact .nav__in { translate: 0 -4px; }
.nav.is-compact .nav__logo { scale: .8; }
html.menu-open .nav .nav__sheet { inset: 0; filter: none; }
html.menu-open .nav .nav__tape { opacity: 0; }
html.menu-open .nav .nav__in { translate: 0 0; }
html.menu-open .nav .nav__logo { scale: 1; }

/* ---------- menu overlay (tablet + phone) ---------- */

.menu {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  background: var(--tex-paper) 0 0 / var(--tile), var(--paper);
  padding: 112px var(--gutter) 40px;
}
.menu[hidden] { display: none; }
.menu__main a {
  display: flex; align-items: baseline; gap: 14px; text-decoration: none;
  font-stretch: 62%; font-weight: 900; font-size: clamp(50px, 14vw, 92px); line-height: .95; text-transform: uppercase;
  padding: 4px 0;
}
.menu__main a span { font-family: var(--f-type); font-size: 15px; font-weight: 700; color: var(--red); }
.menu__main li:nth-child(even) a { padding-left: 24px; }
.menu__cta { margin-top: 30px; max-width: 460px; }
.menu__sec { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.menu__sec a {
  display: inline-block; font-family: var(--f-type); font-weight: 700; font-size: 15px; text-decoration: none;
  border: 2px solid var(--ink); padding: 10px 12px;
  background: var(--tex-white) 0 0 / 300px auto, var(--paper-hi);
  box-shadow: var(--sh-label);
}
.menu__tel {
  display: inline-block; margin-top: 22px; color: #fff; text-decoration: none;
  background: var(--tex-white) 0 0 / 300px auto, var(--red); background-blend-mode: multiply;
  font-stretch: 70%; font-weight: 900; font-size: 30px; padding: 6px 14px; rotate: -2deg;
  box-shadow: var(--sh-label);
}

/* ---------- phone dock: a slim black paper bar ---------- */

.nav-dock { display: none; }

/* desktop just above the burger: the bar is full, a little less air between the items so the language tag fits */
@media (min-width: 1181px) and (max-width: 1279px) {
  .nav__in { gap: 16px; }
  .nav__main { gap: 14px; }
}

@media (max-width: 1180px) {
  .nav__sec { display: none; }
  .nav__burger { display: inline-flex; margin-left: 0; }
  .nav__cta { margin-left: auto; }
}
/* main links + CTA + burger fill the bar here: the language switch lives in the menu (.menu__lang).
   Without JS there is no burger (no menu), which leaves room for the tag next to the button. */
@media (min-width: 981px) and (max-width: 1180px) {
  html.js .nav__lang { display: none; }
  html:not(.js) .nav__lang { margin-left: auto; }
  html:not(.js) .nav__cta { margin-left: 0; }
  /* ...where it sits top right, in view as the menu opens (at the end of the menu it fell below the
     fold on a 768 to 900 px tall screen: iPad landscape, small laptops) */
  .menu__lang { position: absolute; top: 124px; right: var(--gutter); margin-top: 0; }
}

@media (max-width: 980px) {
  .nav__main { display: none; }
  .nav__lang { margin-left: auto; }
  .nav__cta { margin-left: 0; }
}
/* without JS the menu cannot open: no dead button (phones keep the dock, the footer has every link) */
html:not(.js) .nav__burger { display: none; }

@media (max-width: 640px) {
  .nav { --nav-h: 66px; }
  .nav__cta { display: none; }
  /* the tag stays small, the hit area grows to 44 px+ */
  .nav__lang a { position: relative; min-width: 40px; }
  .nav__lang a::after { content: ""; position: absolute; inset: -9px 0; }
  /* ...also in width: each half reaches past the tag's outer edge (the bar has no room for a wider tag at 320 px) */
  .nav__lang a:first-child::after { left: -5px; }
  .nav__lang a:last-child::after { left: -2px; right: -5px; }
  .nav__logo img { width: 92px; }
  .nav.is-compact .nav__sheet { inset: 6px 8px 12px; }
  .nav.is-compact .nav__in { translate: 0 -3px; }
  .nav.is-compact .nav__logo { scale: .84; }
  .nav__tape { width: 70px; }
  .nav__tape--l { left: -26px; top: -12px; }
  .nav__tape--r { right: -20px; bottom: -20px; }

  .nav-dock {
    display: flex; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    padding: 6px 8px max(6px, env(safe-area-inset-bottom));
    background: var(--tex-ink) 0 0 / var(--tile), var(--ink);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .08), 0 -6px 18px rgba(0, 0, 0, .28);
    --sh-c: 0, 0, 0; --focus: var(--paper-hi);
    transition: translate .35s var(--ease), visibility 0s;
  }
  .nav-dock .btn { min-height: 44px; padding: 9px 10px; font-size: 15px; border-color: #000; box-shadow: 2px 2px 0 #000; }
  .nav-dock .btn:active { translate: 2px 2px; box-shadow: 0 0 0 #000; }
  .nav-dock__call { flex: 0 0 auto; gap: 8px; padding-inline: 14px; }
  .nav-dock__call svg { fill: var(--red); flex: none; }
  .nav-dock__cta { flex: 1 1 auto; }
  /* with JS the dock waits for the hero buttons to scroll away and hides while reading down (10-nav.js) */
  .nav-dock.is-auto:not(.is-on), .nav-dock.is-auto.is-tucked { translate: 0 calc(100% + 8px); visibility: hidden; transition: translate .3s ease, visibility 0s .3s; }
  html.menu-open .nav-dock { translate: 0 calc(100% + 48px); visibility: hidden; }
}

/* ===== src/css/20-hero.css ===== */
/* ==========================================================
   20 · hero (+ tape marquee under it) · owner: hero agent
   Static, no-JS and reduced-motion state = the final state below.
   Motion (20-hero.js): intro on load, depth, and on desktop
   the scroll-driven tear (two halves of the hero sheet pull apart over the work).
   ========================================================== */

.hero { position: relative; overflow-x: clip; }
.hero__stick, .hero__half, .hero__sheet { position: relative; }
.hero__in {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(28px, 4.4vw, 72px); align-items: center;
  padding: clamp(36px, min(4.4vw, 6vh), 64px) var(--gutter) clamp(32px, min(4vw, 5.5vh), 60px);
}
.hero .kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.hero .kicker__place { font-family: var(--f-type); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }

.hero__title {
  font-stretch: 62%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(58px, min(9.4vw, 15.4vh), 142px); line-height: .86; letter-spacing: -.005em;
  margin-top: 22px;
}
.hero .hl { display: block; }
html.js .hero:not(.is-fonted) .hl { white-space: nowrap; }   /* fallback font is wider: no extra line, no shift */
.hero .circled { position: relative; display: inline-block; }
.hero .scribble--circle { left: -8%; top: -15%; width: 116%; height: 128%; }

/* marker note: arrow from the circled word to "10+ rokov" */
.hero__note {
  display: flex; align-items: flex-start; gap: 0;
  margin: 2px 0 0; width: fit-content; max-width: 100%;
  translate: 9% 0; rotate: -5deg;
  font-family: var(--f-marker); color: #C51D2C; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.05;
  filter: url(#fx-marker); mix-blend-mode: multiply;
  will-change: transform;   /* own layer: the marker filter renders once (base.css .marker) */
}
.hero__arrow { width: 74px; height: 56px; flex: none; margin-top: -6px; fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.hero__ntext { display: flex; flex-direction: column; padding-top: 20px; }
.hero__ln { display: block; }
.hero__note b { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; font-style: italic; font-size: 1.25em; letter-spacing: .01em; }

.hero__lead { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; max-width: 34ch; margin-top: 8px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px 18px; margin-top: 26px; }
.hero__tel { margin-top: 16px; font-family: var(--f-type); font-size: 15px; color: var(--ink-soft); }
.hero__tel a { color: var(--ink); font-weight: 700; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- collage: prints on the desk ----------
   .hero__snap = position (+ scroll depth), .hero__drop = the landing (GSAP),
   figure.print = rotation + pointer depth (CSS only, GSAP never touches it) */
.hero__collage { position: relative; aspect-ratio: 1 / 1.08; --px: 0; --py: 0; }
.halftone--hero { inset: 4% -16% -10% 6%; }
.hero__snap { position: absolute; }
.hero__snap--1 { width: 86%; left: 8%; top: 3%; z-index: 1; --depth: 6px; }
.hero__snap--2 { width: 70%; left: -5%; top: 57%; z-index: 2; --depth: 12px; }
.hero__snap--3 { width: 49%; right: -3%; top: 55%; z-index: 3; --depth: 18px; }
.hero__print {
  margin: 0; padding: 9px 9px 34px;
  rotate: var(--r);
  translate: calc(var(--px) * var(--depth, 8px)) calc(var(--py) * var(--depth, 8px));
}
.hero__print figcaption {
  position: absolute; left: 11px; right: 11px; bottom: 8px;
  font-family: var(--f-type); font-weight: 700; font-size: 13px; line-height: 1.2; color: #3F3A35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero__print .tape { scale: var(--hero-ts, 1); }
/* each print is its own layer: painted upright once (it is rotated), and the desktop pointer depth
   (translate) is compositing only, it never repaints the hero or its torn copy */
.hero__print { will-change: transform; }
/* the shadow a print casts while it is still in the air (only visible during the landing) */
.hero__fall {
  position: absolute; inset: 0; z-index: -3; border-radius: 2px; pointer-events: none;
  box-shadow: 26px 40px 38px -6px rgba(var(--sh-c), .36), 10px 16px 16px -6px rgba(var(--sh-c), .2);
  opacity: 0;
}
/* before the motion system boots, the hero print (LCP image) is already painted, just still
   in the air: transform only, never hidden. core.js lifts html.dbl-pre (3 s safety net). */
html.dbl-pre .hero__snap--1 .hero__drop { transform: translate(-26px, -46px) rotate(-5deg) scale(1.1); }
html.dbl-pre .hero__snap--1 .hero__fall { opacity: 1; transform: translate(10px, 16px); }

.hero__stamp { top: -15%; right: -4%; width: clamp(124px, 12vw, 170px); rotate: -13deg; }

/* ---------- soft fall-off of the window light (static, multiply, never over the title) ---------- */
.hero__light {
  position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden;
  mix-blend-mode: multiply;
  will-change: opacity;     /* faded by the tear: compositing only */
}
/* the room is a touch darker outside the light the window throws */
.hero__light::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 80% at 34% 28%, rgba(70, 48, 26, 0) 40%, rgba(70, 48, 26, .07) 100%);
}

/* ---------- the tear (desktop + motion only, classes + sizes from 20-hero.js) ----------
   The section grows by --hero-d (the tear distance) and pulls what follows up by the same
   amount, so the page height and every anchor stay exactly where they were. The sheet sticks
   while the tapes and the work section slide under it. */
.hero.hero--tear { z-index: 2; pointer-events: none; margin-bottom: calc(var(--hero-d, 0px) * -1); }
.hero.hero--tear::after { content: ""; display: block; height: var(--hero-d, 0px); }
.hero.hero--tear .hero__stick { position: sticky; top: calc(100vh - var(--hero-h, 100vh)); pointer-events: auto; }
/* PERF: both halves and both sheets are layers from the start, and the torn copy is built at idle
   after the intro, painted, and hidden by an empty clip (20-hero.js; Safari does not paint a layer
   at opacity 0 or visibility hidden, so revealing one cost a full-screen paint on the first scroll,
   and changing the stacking order re-composited the hero). The tear then only swaps two clips and
   moves layers. The shadow each half casts is a pre-blurred silhouette (.hero__shade, drawn once at
   idle, visible but clipped to the area under the opaque sheet until the tear): a filter:
   drop-shadow on these full-screen halves cost an 80 to 200 ms frame when the tear began. */
.hero.hero--tear .hero__half, .hero.hero--tear .hero__sheet { will-change: transform; }
/* the copy is inert (20-hero.js), so it never takes clicks or focus: no pointer-events switch here.
   Switching pointer-events at the tear start made Safari repaint the copy's sheet and its stamp
   (filter included) for the hit-test regions: a 50 ms frame on the first scroll. */
.hero__half--r { position: absolute; inset: 0; }
.hero__shade { position: absolute; pointer-events: none; will-change: transform; clip-path: inset(80px); }   /* 80 px = SM in 20-hero.js: at rest only the part under the opaque sheet */
.hero__half--r .hero__shade { clip-path: inset(0 0 0 100%); }   /* the copy's sheet is clipped away at rest, so is its shadow */
.hero__shade svg { display: block; overflow: visible; }
.hero.is-torn .hero__shade { clip-path: inset(-200px); }
.hero__rim { position: absolute; left: 0; top: 0; z-index: 20; pointer-events: none; overflow: visible; will-change: transform; }
.hero__rim path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- tape marquee: real tape, not flat bars ---------- */

.tapes { position: relative; height: clamp(120px, 11vw, 160px); overflow: hidden; }
/* the bands bend with the scroll (20-hero.js: GSAP x / rotation on top of the static rotate) */
.tapeband {
  position: absolute; left: -4%; width: 108%;
  white-space: nowrap; overflow: hidden;
  will-change: transform;
  padding: 11px 0 9px;
  box-shadow: 0 .5px .5px rgba(0, 0, 0, .25), 2px 5px 7px -3px rgba(var(--sh-c), .45), 6px 14px 20px -10px rgba(var(--sh-c), .4);
}
.tapeband::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 70%, rgba(0, 0, 0, .14));
}
.tapeband--ink { top: 16%; rotate: 1.8deg; background: var(--tex-black) 50% 50% / 1600px auto, var(--ink); color: var(--paper-hi); }
.tapeband--red { top: 42%; rotate: -2.4deg; background: var(--tex-white) 0 0 / 300px auto, var(--red); background-blend-mode: multiply; color: #fff; }
.tapeband__track { display: inline-flex; animation: hero-marquee 46s linear infinite; }
.tapeband--ink .tapeband__track { animation-direction: reverse; animation-duration: 60s; }
.tapeband span { font-stretch: 70%; font-weight: 900; font-size: clamp(20px, 2.1vw, 30px); text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; }
.tapeband--ink span { font-weight: 700; font-family: var(--f-type); font-stretch: 100%; font-size: clamp(14px, 1.2vw, 17px); letter-spacing: .08em; }
.tapes:hover .tapeband__track, .tapes.is-idle .tapeband__track { animation-play-state: paused; }   /* is-idle: off screen (20-hero.js) */

@keyframes hero-marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .tapeband__track { animation: none !important; }
}

/* ---------- responsive ---------- */

@media (min-width: 981px) {
  .hero__in { min-height: calc(100vh - 78px); }
  /* desktop: the hero is a piece of the table paper (same scan, offset by the 78 px header),
     so it can be pinned and torn over the work section. 20-hero.js re-copies the exact
     body background at runtime; this is the first paint. */
  .hero__sheet {
    background:
      radial-gradient(1400px 1000px at 2% -8%, rgba(255, 251, 241, .55), rgba(255, 251, 241, 0) 70%) 0 -78px / 100% 1600px no-repeat,
      radial-gradient(1100px 760px at 100% 820px, rgba(60, 40, 20, .085), rgba(60, 40, 20, 0) 72%) 0 -78px / 100% 1600px no-repeat,
      var(--tex-paper) 0 -78px / var(--tile),
      var(--paper);
  }
}

/* wide screens: the work is the hero, not the paper. The collage column grows (about 22 % at
   1600 px, 27 % at 1920 px) while the title column keeps room for "VÁŠ EXTERNÝ" on one line. */
@media (min-width: 1600px) {
  .hero__in { max-width: 1760px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

/* short laptop screens (1280 x 720, 1366 x 768): keep the hero buttons above the fold */
@media (min-width: 981px) and (max-height: 860px) {
  .hero__title { font-size: clamp(58px, min(9.4vw, 13vh), 142px); margin-top: 16px; }
  .hero__lead { max-width: 40ch; font-size: clamp(17px, 1.35vw, 19px); }
  .hero__ctas { margin-top: 20px; }
  .hero__tel { margin-top: 12px; }
}

@media (max-width: 980px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero__collage { max-width: 620px; width: 100%; margin: 24px auto 0; }
  .hero__note { translate: 0 0; }
}

@media (max-width: 640px) {
  .hero__in { padding-top: 30px; }
  .hero__title { font-size: clamp(50px, 16.2vw, 80px); }
  .hero__note { margin-top: 8px; font-size: 21px; translate: 3% 0; }
  .hero__arrow { width: 58px; height: 44px; }
  .hero__ntext { padding-top: 15px; }
  .hero__ctas .btn { width: 100%; }
  .hero__collage { aspect-ratio: 1 / 1.16; margin-top: 30px; }
  .hero__stamp { width: 104px; top: -10%; right: -2%; }
  .hero__print { padding: 6px 6px 26px; }
  .hero__print figcaption { font-size: 11.5px; bottom: 6px; left: 8px; right: 8px; }
  .hero__snap--1 { width: 90%; left: 4%; top: 6%; }
  .hero__snap--2 { width: 74%; left: -1%; top: 57%; }
  .hero__snap--3 { width: 54%; right: -1%; top: 55%; }
  .halftone--hero { inset: 6% -8% -4% 6%; }
}

/* ===== src/css/30-work.css ===== */
/* ==========================================================
   30 · work · owner: work agent
   contact sheet of prints on the desk + filter + project viewer (dialog.lb)
   + ECKERT page-flip book. Breakpoints 1180 / 980 / 640.
   ========================================================== */

.work { padding-top: clamp(48px, 6vw, 90px); }
.work .sechead { margin-bottom: clamp(28px, 3.4vw, 44px); }
.work .sechead__marker { right: 2%; bottom: -10px; }

/* ---------- filter: typed index tabs, the active one circled in red grease pencil ---------- */

.work__filter {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto clamp(48px, 5.4vw, 76px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px;
}
html:not(.js) .work__filter { display: none; }
.work__filterlbl {
  font-family: var(--f-type); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); margin-right: 2px;
}
.work__chip {
  position: relative; min-height: 44px;
  padding: 9px 14px 8px;
  font-family: var(--f-type); font-weight: 700; font-size: 14px; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink);
  background: var(--tex-white) 0 0 / 300px auto, var(--paper-hi);
  border: 2px solid var(--ink);
  box-shadow: var(--sh-label);
  rotate: var(--cr, -1.2deg);
  cursor: pointer;
  transition: translate .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.work__chip:nth-of-type(3n+2) { --cr: 1.4deg; }
.work__chip:nth-of-type(3n) { --cr: -.4deg; }
.work__chip:hover { translate: 0 -2px; box-shadow: .5px .5px .5px rgba(var(--sh-c), .25), 4px 7px 9px -3px rgba(var(--sh-c), .35); }
.work__chip[aria-pressed="true"] {
  background: var(--tex-black) 50% 50% / 560px auto, var(--ink);
  color: var(--paper-hi);
}
.work__loop { left: -15%; top: -34%; width: 130%; height: 168%; z-index: 1; }
/* plain (scaling) stroke so pathLength-based dashes match the stretched loop exactly */
.work__loop path { vector-effect: none; stroke-width: 3.4px; stroke-dasharray: 1 1.05; stroke-dashoffset: 1; transition: stroke-dashoffset .55s cubic-bezier(.6, .05, .3, 1); }
.work__chip[aria-pressed="true"] .work__loop path { stroke-dashoffset: 0; }
/* PERF: only the pressed chip's loop is rendered (hidden once it has been wiped off). Every loop
   carries the marker SVG filter, which Safari renders on the CPU, so the nine undrawn loops cost a
   60 to 70 ms frame each time the chip row was painted (scrolling into the work section). */
.work__loop { visibility: hidden; transition: visibility 0s .6s; }
.work__chip[aria-pressed="true"] .work__loop { visibility: visible; transition: none; }

/* ---------- the desk: 12-column scatter (editorial spans; uniform when filtered) ---------- */

.work__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(22px, 2.8vw, 44px); row-gap: clamp(56px, 5.8vw, 88px);
  align-items: start;
}
.work__item { position: relative; min-width: 0; }
.work__item[hidden] { display: none; }
.w--7 { grid-column: span 7; }
.w--5 { grid-column: span 5; }
.w--8 { grid-column: span 8; }
.w--4 { grid-column: span 4; }
.w--drop { margin-top: clamp(24px, 4vw, 64px); }
.w--up { margin-top: clamp(-34px, -1.6vw, 0px); }
.work__grid.is-filtered .work__item { grid-column: span 4; margin-top: 0; }
.work__float { position: relative; }
/* desktop: every print drifts with a scrubbed parallax (30-work.js); its own layer makes that
   compositing only (no repaint per frame in Safari, no re-raster in Chrome) */
@media (min-width: 981px) { html.dbl-live .work__float { will-change: transform; } }
/* the lifted corner's shadow fades in as the print lands (was a --curl tween that repainted the
   whole print for a second) */
.wcard::after { transition: transform .45s ease, box-shadow .45s ease, opacity .9s cubic-bezier(.3, .7, .3, 1); }
.wcard.is-flat::after { opacity: 0; }

/* a work card is a .print (photo paper, lifted corner, see base.css). PERF: it is rotated, so it is
   its own layer: painted upright once and turned by the GPU. Painted through the rotation (photo,
   paper texture, seven shadows), one print cost Safari 20 to 45 ms per paint. */
.wcard { padding: 10px 10px 18px; rotate: var(--r); will-change: transform; }
.wcard:hover, .wcard:focus-within { rotate: calc(var(--r) * .3); translate: 0 -7px; }
.wcard__media {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit;
  cursor: zoom-in; text-align: left;
}
/* the whole print is the click target; focus ring around the whole print */
.wcard__media::before { content: ""; position: absolute; inset: 0; z-index: 5; }
.wcard__media:focus-visible { outline: none; }
.wcard__media:focus-visible::before { outline: 3px solid var(--focus); outline-offset: 5px; }
.wcard .print__img img { transition: scale .8s cubic-bezier(.2, .7, .2, 1); }
.wcard:hover .print__img img { scale: 1.04; }
/* matte print: the paper tooth shows through the ink */
.wcard .print__img::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--tex-white) 0 0 / 410px auto;
  mix-blend-mode: multiply; opacity: .6;
}
/* category label: an index tab glued over the top edge, away from the tape */
.wcard > .cutlabel { position: absolute; top: -13px; left: 20px; z-index: 6; }
.wcard:has(> .tape--tl) > .cutlabel { left: auto; right: 22px; rotate: 2deg; }

/* more prints of the same job under the top one: they fan out on hover */
.wcard__under {
  position: absolute; z-index: -3; left: 7%; top: -24px; width: 90%; height: auto;
  rotate: -4deg;
  border: 8px solid #F7F3EA; border-bottom-width: 14px;
  background: #F7F3EA;
  box-shadow: 1px 1px 1px rgba(var(--sh-c), .2), 5px 10px 14px -6px rgba(var(--sh-c), .32);
  pointer-events: none;
  transition: rotate .55s var(--ease), translate .55s var(--ease);
}
.wcard__under--r { left: auto; right: -16px; top: -12px; width: 70%; rotate: 5deg; }
.wcard--stack:hover .wcard__under { rotate: -7.5deg; translate: -10px -9px; }
.wcard--stack:hover .wcard__under--r { rotate: 9deg; translate: 12px -10px; }

.wcard__txt { padding: 14px 6px 0; display: grid; gap: 6px; justify-items: start; }
.wcard__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  font-family: var(--f-type); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: #6A625A;
}
.wcard__no {
  display: inline-grid; place-items: center; min-width: 32px; height: 22px; padding: 1px 5px 0;
  border: 1.5px solid currentColor; color: var(--ink);
}
.wcard__txt h3 { font-stretch: 72%; font-weight: 900; font-size: clamp(25px, 2.15vw, 33px); line-height: .98; text-transform: uppercase; color: #181513; }
.wcard__cap { font-size: 15.5px; line-height: 1.42; color: var(--ink-soft); max-width: 46ch; }
.wcard__more {
  margin-top: 4px;
  font-family: var(--f-type); font-weight: 700; font-size: 13px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--red);
}
.wcard__more span { display: inline-block; transition: translate .3s var(--ease); }
.wcard:hover .wcard__more span { translate: 5px 0; }

/* the ECKERT print is a booklet: its corner is dog-eared and lifts on hover */
.wcard__dog {
  position: absolute; right: 0; bottom: 0; z-index: 2; width: 18px; height: 18px; pointer-events: none;
  background: linear-gradient(135deg, #FBF8F1 0%, #E4DDCF 38%, #C9C0AF 49.5%, rgba(20, 14, 8, .5) 50%, rgba(20, 14, 8, .12) 58%, #EDE7DB 70%, #F4F0E8 100%);
  box-shadow: -2px -2px 5px -2px rgba(20, 14, 8, .45);
  transition: width .5s var(--ease), height .5s var(--ease);
}
.wcard--book:hover .wcard__dog, .wcard--book:focus-within .wcard__dog { width: 58px; height: 58px; }

/* marker note next to the ECKERT print */
.work__note {
  position: absolute; right: 3%; bottom: -60px; z-index: 6; pointer-events: none;
  display: flex; align-items: flex-start; gap: 2px;
  font-size: 25px; rotate: -3deg;
}
.work__notearrow { width: 64px; height: 44px; flex: none; margin-top: -26px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

/* mobile: show the first six, the rest on demand (JS adds .is-short; without JS all show) */
.work__showwrap { display: none; text-align: center; margin-top: 40px; }

/* ---------- archive: a contact sheet, film strips printed on white photo paper ----------
   Kept cheap to paint: one shadow for the whole sheet, no filters or blend modes on the frames,
   the hover loop is a plain SVG stroke (no #fx-marker filter). */

.work__arch { max-width: var(--maxw); margin: clamp(84px, 9vw, 132px) auto 0; }
.work__arch[hidden] { display: none; }
.work__archhead {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 12px 30px;
  margin-bottom: clamp(30px, 3.4vw, 46px);
}
.work__archlbl { grid-column: 1 / -1; justify-self: start; }
.work__archtitle { font-stretch: 66%; font-weight: 900; font-size: clamp(46px, 5.6vw, 84px); line-height: .88; text-transform: uppercase; color: var(--ink); }
.work__archsub { max-width: 50ch; font-size: 16.5px; line-height: 1.45; color: var(--ink-soft); padding-bottom: .3em; }

.work__sheet { position: relative; padding: clamp(20px, 2.4vw, 34px) clamp(12px, 1.8vw, 28px) clamp(14px, 1.8vw, 24px); rotate: -.3deg; will-change: transform; }   /* rotated: own layer (see .wcard) */
.work__sheet .tape { z-index: 3; }
.work__sheetcap {
  display: flex; justify-content: space-between; gap: 16px; margin: 0 6px 12px;
  font-family: var(--f-type); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8A8178;
}
/* frames touch, so every row reads as one strip of film; the labels sit under it on the paper */
.work__frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; row-gap: clamp(20px, 2.2vw, 30px); }
.warch { position: relative; min-width: 0; }
.warch[hidden] { display: none; }
.warch__media {
  position: relative; display: block; padding: 15px 5px; color: inherit; text-decoration: none; cursor: zoom-in;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, #E9E2D3 7px 14px, transparent 14px 22px) 0 4px / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 7px, #E9E2D3 7px 14px, transparent 14px 22px) 0 calc(100% - 4px) / 100% 6px no-repeat,
    #0E0C0B;
}
.warch__media:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; z-index: 3; }
.warch__frame { position: relative; display: block; overflow: hidden; background: #1A1715; }
.warch__frame img { display: block; width: 100%; height: auto; transition: scale .6s cubic-bezier(.2, .7, .2, 1); }
.warch__media:hover .warch__frame img { scale: 1.04; }
.warch__no {
  position: absolute; left: 9px; bottom: 3px; z-index: 1;
  font-family: var(--f-type); font-weight: 700; font-size: 9px; line-height: 1; letter-spacing: .12em; color: #E7A13C;
}
/* spec work: a small red tag cut from paper, stuck on the frame */
.warch__kon {
  position: absolute; right: 7px; top: 7px; z-index: 1;
  padding: 5px 7px 4px; rotate: 3deg;
  font-family: var(--f-display); font-stretch: 75%; font-weight: 800; font-size: 11.5px; line-height: 1; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: var(--red);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25), 1px 2px 3px rgba(0, 0, 0, .4);
}
.warch__loop { position: absolute; left: -3%; top: -9%; width: 106%; height: 118%; z-index: 2; pointer-events: none; overflow: visible; fill: none; stroke: #D32234; stroke-linecap: round; }
/* scaling stroke (like .work__loop): a non-scaling one would measure the pathLength dashes in px */
.warch__loop path { vector-effect: none; stroke-width: 1.15px; stroke-dasharray: 1 1.05; stroke-dashoffset: 1; transition: stroke-dashoffset .55s cubic-bezier(.6, .05, .3, 1); }
.warch__media:hover .warch__loop path, .warch__media:focus-visible .warch__loop path { stroke-dashoffset: 0; }
.warch__tags {
  margin: 11px 8px 0;
  font-family: var(--f-type); font-weight: 700; font-size: 11.5px; line-height: 1.35; letter-spacing: .07em; text-transform: uppercase; color: #6A625A;
}
.warch__title { margin: 4px 8px 0; font-stretch: 72%; font-weight: 900; font-size: clamp(19px, 1.55vw, 23px); line-height: 1; text-transform: uppercase; color: #181513; }

/* JS shows the first rows; without JS every frame is there */
.work__arch.is-collapsed .warch:nth-child(n+9) { display: none; }
.work__archmore { display: none; text-align: center; margin-top: 34px; }
.work__arch.is-collapsed .work__archmore { display: block; }

/* ---------- end of the section: the ask ---------- */

.work__end {
  max-width: var(--maxw); margin: clamp(72px, 8vw, 120px) auto 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 30px;
}
/* the note is its own line; the marker (an SVG filter, rendered on the CPU in Safari) is only as wide
   as its words: on the full-width line its filter covered 1320 px, a 50 ms frame when it scrolled in */
.work__endnote { flex-basis: 100%; display: flex; justify-content: center; }
.work__endnote .marker { font-size: clamp(27px, 2.7vw, 36px); rotate: -2deg; }
.work__pin {
  min-height: 44px; display: inline-flex; align-items: center;
  font-family: var(--f-type); font-weight: 700; font-size: 15px; letter-spacing: .04em;
  text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 5px;
}

/* ==========================================================
   PROJECT VIEWER (dialog.lb): a dark desk, the print in the middle,
   a contact strip with red grease-pencil loops, the job card on the right
   ========================================================== */

/* opened with show(), not showModal() (30-work.js: the inert page behind a modal was repainted in
   Safari), so it is not in the top layer: it covers the header (z-index 70) by its own z-index, and
   its own background darkens the page as the ::backdrop did */
.lb {
  position: fixed; inset: 0; z-index: 1000; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: rgba(16, 14, 13, .35); color: var(--paper-hi);
  overflow: hidden auto; overscroll-behavior: contain;   /* a scroll container, so wheel never chains to the page */
}
.lb__bg {
  position: fixed; inset: 0;
  background:
    radial-gradient(80% 70% at 22% 12%, rgba(255, 240, 214, .075), rgba(255, 240, 214, 0) 62%),
    radial-gradient(70% 60% at 100% 100%, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 70%),
    var(--tex-ink) 0 0 / var(--tile),
    #100E0D;
}
.lb__desk {
  position: relative; z-index: 1; height: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 25vw, 372px); grid-template-rows: minmax(0, 1fr) auto;
  column-gap: clamp(28px, 3.2vw, 56px); row-gap: 16px;
  padding: 34px clamp(24px, 3.4vw, 56px) 22px;
}
.lb__close {
  position: absolute; top: 16px; right: 18px; z-index: 6; min-height: 44px;
  background: var(--tex-white) 0 0 / 300px auto, var(--red); background-blend-mode: multiply;
  color: #fff; border: 3px solid var(--ink); cursor: pointer;
  font-stretch: 80%; font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .04em;
  padding: 9px 14px; rotate: 3deg; box-shadow: 4px 4px 0 var(--ink), 5px 7px 8px rgba(0, 0, 0, .5);
}
.lb__close:focus-visible { outline-color: var(--paper-hi); }

.lb__stage { grid-column: 1; grid-row: 1; position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; }
.lb__print {
  position: relative; margin: 0;
  padding: 12px 12px 38px;
  background: var(--tex-white) 0 0 / 410px auto, var(--paper-hi);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .35), 1px 2px 2px rgba(0, 0, 0, .5), 8px 16px 22px -6px rgba(0, 0, 0, .6), 22px 44px 70px -20px rgba(0, 0, 0, .75);
  rotate: -.5deg;
  touch-action: pan-y;
}
.lb__print[hidden] { display: none; }
.lb__print .tape { z-index: 4; }
.lb__img { display: block; width: 640px; height: 360px; max-width: none; background: #111; }
.lb__light {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(128deg, rgba(255, 253, 246, .16) 0%, rgba(255, 253, 246, 0) 40%);
}
.lb__fcap {
  position: absolute; left: 14px; right: 14px; bottom: 10px;
  font-family: var(--f-type); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb__arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 5;
  width: 52px; height: 52px; display: grid; place-items: center; padding: 0;
  font: 800 22px/1 var(--f-display);
  color: var(--ink); background: var(--tex-white) 0 0 / 300px auto, var(--paper-hi);
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink), 4px 6px 8px rgba(0, 0, 0, .45);
  cursor: pointer;
}
.lb__arrow--prev { left: 0; rotate: -2deg; }
.lb__arrow--next { right: 0; rotate: 2deg; }
.lb__arrow[hidden] { display: none; }
.lb__arrow:disabled { opacity: .3; cursor: default; }
.lb__arrow:focus-visible { outline-color: var(--paper-hi); }

/* contact strip: film printed on white photo paper, frame numbers on the edge */
.lb__strip {
  grid-column: 1; grid-row: 2; justify-self: center; max-width: 100%; min-width: 0;
  padding: 8px 14px 4px; rotate: .4deg; color: var(--ink);
  display: grid; gap: 0;
}
.lb__strip[hidden] { display: none; }
.lb__count { font-family: var(--f-type); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.lb__film { overflow-x: auto; overflow-y: hidden; padding: 16px 6px 18px; scrollbar-width: thin; scrollbar-color: #8a8178 transparent; }
.lb__frames {
  position: relative; display: flex; width: max-content;
  padding: 13px 8px;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, #EDE6D8 7px 14px, transparent 14px 22px) 0 3px / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 7px, #EDE6D8 7px 14px, transparent 14px 22px) 0 calc(100% - 3px) / 100% 6px no-repeat,
    #0E0C0B;
}
.lb__frames li { position: relative; }
.lb__frame {
  position: relative; display: block; padding: 0 5px; margin: 0; border: 0; background: none; cursor: pointer;
}
.lb__frame img { display: block; height: 60px; width: auto; max-width: none; opacity: .55; transition: opacity .25s ease; }
.lb__frame:hover img, .lb__frame[aria-current="true"] img { opacity: 1; }
.lb__frame:focus-visible { outline-offset: 2px; }
.lb__fno {
  position: absolute; left: 7px; bottom: -12px;
  font-family: var(--f-type); font-weight: 700; font-size: 9px; line-height: 1; letter-spacing: .12em; color: #E7A13C;
}
.lb__loop { left: -9px; top: -17px; width: calc(100% + 18px); height: calc(100% + 34px); mix-blend-mode: normal; }
/* PERF: only the current frame's loop is rendered (hidden once it has been wiped off): each loop
   carries the marker SVG filter, which Safari renders on the CPU, and the invisible loops of every
   other frame were rendered too, in the frame that opened the viewer */
.lb__loop { visibility: hidden; transition: visibility 0s .7s; }
.lb__frame[aria-current="true"] .lb__loop { visibility: visible; transition: none; }
.lb__loop path { vector-effect: none; stroke-width: 3.2px; stroke-dasharray: 1 1.05; stroke-dashoffset: 1; transition: stroke-dashoffset .6s cubic-bezier(.6, .05, .3, 1) .05s; }
.lb__frame[aria-current="true"] .lb__loop path { stroke-dashoffset: 0; }

/* the job card */
.lb__info {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; position: relative;
  padding: 30px 26px 22px; rotate: .8deg;
  display: grid; gap: 10px; justify-items: start;
}
.lb__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.lb__tags .cutlabel { font-size: 13px; }
.lb__title { font-stretch: 66%; font-weight: 900; font-size: clamp(32px, 2.9vw, 46px); line-height: .92; text-transform: uppercase; margin-top: 6px; }
.lb__cap { font-size: 17px; line-height: 1.45; color: var(--ink-soft); }
.lb__lbl { margin-top: 6px; font-family: var(--f-type); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.lb__did { display: grid; gap: 4px; width: 100%; }
.lb__did li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.4; }
.lb__did li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 13px; height: 3px; border-radius: 2px;
  background: #C51D2C; rotate: -8deg;
}
.lb__cta { margin-top: 10px; }
.lb__nav { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.lb__pn {
  min-height: 44px; padding: 6px 2px; border: 0; background: none; cursor: pointer;
  font-family: var(--f-type); font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase;
}
.lb__pn:hover { color: var(--red); }
.lb__pos { font-family: var(--f-type); font-weight: 700; font-size: 13px; color: var(--ink-soft); }

/* PERF: the parts that animate in are layers for as long as the viewer exists, so each is painted
   once, upright (they are rotated), and is not painted again into the desk when its entrance ends */
.lb__bg { will-change: opacity; }
.lb__print, .lb__book, .lb__strip, .lb__info { will-change: transform; }

/* entrance without View Transitions (the photo itself is flipped in by JS) */
.lb--anim .lb__bg { animation: work-fade .4s ease both; }
.lb--anim .lb__info { animation: work-infoIn .65s cubic-bezier(.2, .8, .2, 1) .08s both; }
.lb--anim .lb__strip { animation: work-stripIn .6s cubic-bezier(.2, .8, .2, 1) .14s both; }
.lb--anim .lb__close { animation: work-fade .4s ease .2s both; }
.lb--out { animation: work-fadeOut .26s ease both; }
@keyframes work-fade { from { opacity: 0; } }
@keyframes work-fadeOut { to { opacity: 0; } }
@keyframes work-infoIn { from { opacity: 0; translate: 48px 0; rotate: 4deg; } }
@keyframes work-stripIn { from { opacity: 0; translate: 0 36px; } }

/* View Transitions: the photo grows out of its frame (names are set by JS only while it runs) */
html.work-vt::view-transition-group(work-shot) { animation-duration: .62s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
html.work-vt::view-transition-old(work-shot), html.work-vt::view-transition-new(work-shot) { animation-duration: .5s; }
html.work-vt::view-transition-old(root), html.work-vt::view-transition-new(root) { animation-duration: .42s; }
html.work-vt::view-transition-new(work-info) { animation: work-infoIn .7s cubic-bezier(.2, .8, .2, 1) .06s both; }
html.work-vt::view-transition-new(work-strip) { animation: work-stripIn .62s cubic-bezier(.2, .8, .2, 1) .12s both; }
html.work-vt::view-transition-old(work-info), html.work-vt::view-transition-old(work-strip) { animation: work-fadeOut .22s ease both; }

/* ==========================================================
   ECKERT page-flip book: CSS 3D, the turning page is 10 nested strips
   that bend like paper (js/30-work.js drives angles, shading, cast shadows)
   ========================================================== */

.lb__book { position: relative; display: grid; justify-items: center; gap: 14px; }
.lb__book[hidden] { display: none; }
.bk {
  --pw: 400px;
  position: relative; width: 800px; height: 282px;
  perspective: 2400px;
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.bk.is-drag { cursor: grabbing; }
.bk__pg {
  position: absolute; top: 0; height: 100%; width: 50%;
  background-color: #F4F1EA; background-repeat: no-repeat; background-size: 200% 100%;
}
/* page block thickness on the outer edges + the book's shadow on the desk */
.bk__pg--l {
  left: 0; background-position: 0 0;
  box-shadow: -1px 1px 0 #DCD5C8, -2px 2px 0 #EFEAE0, -3px 3px 0 #D2CABC, -4px 4px 0 #E8E2D7, -5px 5px 0 #C9C0B1,
    -10px 22px 40px -8px rgba(0, 0, 0, .75);
}
.bk__pg--r {
  left: 50%; background-position: 100% 0;
  box-shadow: 1px 1px 0 #DCD5C8, 2px 2px 0 #EFEAE0, 3px 3px 0 #D2CABC, 4px 4px 0 #E8E2D7, 5px 5px 0 #C9C0B1,
    14px 22px 40px -8px rgba(0, 0, 0, .75);
}
.bk__gutter {
  position: absolute; top: 0; bottom: 0; left: 41%; width: 18%; pointer-events: none;
  background: linear-gradient(90deg, rgba(40, 28, 16, 0) 0%, rgba(40, 28, 16, .08) 30%, rgba(24, 16, 8, .34) 49.2%, rgba(255, 255, 255, .22) 50.4%, rgba(40, 28, 16, .12) 62%, rgba(40, 28, 16, 0) 100%);
}
.bk__cast { position: absolute; top: 0; bottom: 0; width: 34%; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.bk__cast--r { left: 50%; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(18, 12, 6, .6), rgba(18, 12, 6, .18) 40%, rgba(18, 12, 6, 0)); }
.bk__cast--l { right: 50%; transform-origin: 100% 50%; background: linear-gradient(270deg, rgba(18, 12, 6, .6), rgba(18, 12, 6, .18) 40%, rgba(18, 12, 6, 0)); }
.bk__leaf { position: absolute; top: 0; height: 100%; left: 50%; width: 50%; transform-style: preserve-3d; pointer-events: none; visibility: hidden; }
.bk.is-flip .bk__leaf { visibility: visible; }
.bk__s { position: absolute; top: 0; left: 0; height: 100%; width: 10%; transform-style: preserve-3d; transform-origin: 0 50%; }
.bk__s .bk__s { left: 100%; width: 100%; }
.bk__f, .bk__b {
  position: absolute; top: 0; bottom: 0; left: 0; right: -.7px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-color: #F4F1EA; background-repeat: no-repeat;
  background-size: calc(var(--pw) * 2) 100%;
  background-position: calc(var(--pw) * var(--ox, 0) * -1) 0;
}
.bk__b { transform: rotateY(180deg); }
.bk__f::after, .bk__b::after { content: ""; position: absolute; inset: 0; background: rgba(22, 15, 8, var(--sh, 0)); }
/* single page mode (phones): the back of a turning page is plain paper with the print showing through */
.bk__g { position: absolute; inset: 0; display: none; opacity: .09; transform: scaleX(-1); background-repeat: no-repeat; background-size: calc(var(--pw) * 2) 100%; background-position: calc(var(--pw) * var(--ox, 0) * -1) 0; filter: grayscale(1) blur(.6px); }
.bk--single .bk__g { display: block; }
.bk--single .bk__b { background: var(--tex-white) 0 0 / 410px auto, #F6F2EA; }
.bk--single .bk__pg--l, .bk--single .bk__cast--l { display: none; }
.bk--single .bk__pg--r { left: 0; width: 100%; box-shadow: 1px 1px 0 #DCD5C8, 2px 2px 0 #EFEAE0, 3px 3px 0 #D2CABC, 10px 18px 30px -8px rgba(0, 0, 0, .75); }
.bk--single .bk__gutter { left: 0; width: 8%; background: linear-gradient(90deg, rgba(24, 16, 8, .3), rgba(24, 16, 8, 0)); }
.bk--single .bk__leaf { left: 0; width: 100%; }
.bk--single .bk__cast--r { left: 0; }
/* book mode: the arrows flank the hint under the book */
.lb--book .lb__arrow { top: calc(50% + var(--bkh, 280px) / 2 - 16px); translate: none; width: 46px; height: 46px; font-size: 20px; }
.lb--book .lb__arrow--prev { left: calc(50% - 240px); }
.lb--book .lb__arrow--next { right: calc(50% - 240px); }
.lb__hint { min-height: 44px; display: flex; align-items: center; font-family: var(--f-type); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #B9AFA2; }

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .work__note { display: none; }
  .work__frames { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .work__arch.is-collapsed .warch:nth-child(n+7) { display: none; }
}

@media (max-width: 980px) {
  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w--7, .w--5, .w--8, .w--4, .work__grid.is-filtered .work__item { grid-column: span 1; }
  .w--8 { grid-column: span 2; }
  .w--drop, .w--up { margin-top: 0; }

  /* viewer becomes one scrolling column */
  .lb { overflow-y: auto; }
  .lb__desk { display: flex; flex-direction: column; height: auto; min-height: 100%; padding: 72px clamp(14px, 4vw, 40px) 36px; gap: 18px; }
  .lb__close { position: fixed; top: 12px; right: 14px; }
  .lb__stage { flex: none; }
  .lb__strip { align-self: center; }
  .lb__info { align-self: stretch; margin-top: 10px; rotate: .5deg; }
}

@media (max-width: 640px) {
  .work__filter { gap: 10px 10px; }
  .work__filterlbl { flex-basis: 100%; }
  .work__chip { font-size: 13px; padding: 9px 11px 8px; }
  .work__grid { grid-template-columns: minmax(0, 1fr); row-gap: 50px; }
  .w--8 { grid-column: span 1; }
  .wcard { rotate: calc(var(--r) * .6); }
  .wcard > .cutlabel { top: -11px; left: 14px; font-size: 13.5px; }
  .wcard:has(> .tape--tl) > .cutlabel { right: 16px; }
  .wcard__under { top: -12px; border-width: 5px; border-bottom-width: 9px; }
  .wcard__under--r { right: -8px; top: -8px; }
  .wcard .print__img::before { display: none; }
  .wcard__txt h3 { font-size: 27px; }
  .work.is-short .work__item:nth-child(n+7) { display: none; }
  .work.is-short .work__showwrap { display: block; }
  .work__archhead { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .work__archsub { font-size: 16px; }
  .work__sheet { rotate: -.2deg; padding: 18px 8px 12px; }
  .work__frames { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .warch__media { padding: 12px 4px; }
  .warch__tags { margin: 9px 5px 0; font-size: 11px; letter-spacing: .05em; }
  .warch__title { margin: 3px 5px 0; font-size: 18px; }
  .warch__kon { right: 5px; top: 5px; font-size: 10.5px; padding: 4px 6px 3px; }
  .work__archbtn { width: 100%; }
  .work__end { gap: 16px; }
  .work__end .btn { width: 100%; }

  .lb__desk { padding: 70px 12px 32px; }
  .lb__print { padding: 8px 8px 32px; }
  .lb__fcap { left: 10px; right: 10px; bottom: 9px; font-size: 12px; }
  .lb__stage { padding-bottom: 58px; }
  .lb--book .lb__stage { padding-bottom: 0; }
  .lb__arrow { width: 46px; height: 46px; top: auto; bottom: 0; translate: none; }
  .lb__arrow--prev { left: 6px; }
  .lb__arrow--next { right: 6px; }
  .lb--book .lb__arrow--prev { left: 0; }
  .lb--book .lb__arrow--next { right: 0; }
  .lb__hint { font-size: 11.5px; }
  .lb__strip { padding: 8px 10px 2px; }
  .lb__frame img { height: 50px; }
  .lb__info { padding: 26px 18px 18px; }
  .lb__nav { flex-wrap: wrap; }
}

/* ===== src/css/35-projects.css ===== */
/* ==========================================================
   35 · projects (Vlastné projekty) · owner: projects agent
   root: <section class="sec proj sheet-ink torn-top torn-bottom" id="projekty" data-section="projects">
   + three case studies (dialog.proj-cs) right after it.
   PERF (Safari): every rotated or moving piece is its own layer (will-change: transform) and is
   painted once; no filters or blend modes on the pieces; the reel is a <video> (its own layer)
   that only plays while it is in view. Breakpoints 1180 / 980 / 640.
   ========================================================== */

.proj {
  --teal: #08C4BE;   /* DRIVN accent */
  margin-top: 28px;
  padding-top: clamp(84px, 9vw, 136px); padding-bottom: clamp(96px, 10vw, 150px);
}
.proj__in { max-width: var(--maxw); margin: 0 auto; }
.proj__head { margin-bottom: clamp(56px, 6vw, 96px); }
.proj__head .sechead__sub { max-width: 44ch; }
@media (min-width: 981px) {
  .proj__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: 48px; align-items: end; }
  .proj__head .sechead__no { grid-column: 1; justify-self: start; }
  .proj__head .sechead__title { grid-column: 1; }
  .proj__head .sechead__sub { grid-column: 2; grid-row: 2; margin: 0 0 .5em; }
}

/* shared bits of the cards */
.proj__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.proj__no {
  display: inline-grid; place-items: center; min-width: 32px; height: 22px; padding: 1px 5px 0;
  border: 1.5px solid currentColor;
  font-family: var(--f-type); font-weight: 700; font-size: 12.5px; letter-spacing: .08em;
}
.proj__lbl { margin-top: 4px; font-family: var(--f-type); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.proj__did { display: grid; gap: 4px; }
.proj__did li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.4; }
.proj__did li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 13px; height: 3px; border-radius: 2px;
  background: #C51D2C; rotate: -8deg;
}
.proj__ext {
  min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-type); font-weight: 700; font-size: 15px; letter-spacing: .04em;
  text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.proj__ext:hover { color: var(--red); }

/* play / pause on a reel: a small paper disc (shown by JS; no JS = the still) */
.proj__play {
  position: absolute; z-index: 6; width: 46px; height: 46px; padding: 0;
  display: grid; place-items: center; border-radius: 50%;
  color: var(--ink); background: var(--tex-white) 0 0 / 300px auto, var(--paper-hi);
  border: 2px solid var(--ink); box-shadow: 2px 3px 0 var(--ink), 3px 6px 8px rgba(0, 0, 0, .45);
  cursor: pointer; pointer-events: auto;
  transition: translate .18s ease;
}
.proj__play[hidden] { display: none; }
.proj__play:hover { translate: 0 -2px; }
.proj__play svg { width: 18px; height: 18px; fill: currentColor; }
.proj__play.is-on .proj__play-i, .proj__play:not(.is-on) .proj__pause-i { display: none; }

/* ==========================================================
   DRIVN: the collage on the desk + the typed project card
   ========================================================== */

.proj-drivn {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center;
  column-gap: clamp(36px, 4.4vw, 72px);
}

.proj-drivn__stage { position: relative; aspect-ratio: 740 / 640; }
/* the whole collage is one link; it lies under the pieces, which let the click through */
.proj-drivn__hit { position: absolute; inset: -2% -1%; z-index: 0; cursor: zoom-in; border-radius: 6px; }
.proj-drivn__hit:focus-visible { z-index: 20; outline: 3px solid var(--focus); outline-offset: 4px; }

/* PERF: each piece is rotated (and some drift with the scroll): its own layer, painted once */
.pd { position: absolute; pointer-events: none; will-change: transform; }
.pd > img { display: block; width: 100%; height: auto; }
.pd__print { padding: 9px; }
.pd__print .print__img { background: #0d0d0d; }
.pd--key { left: 1%; top: 6%; width: 72%; z-index: 1; rotate: -2deg; }
.pd--pola { left: 3%; top: 52%; width: 27%; z-index: 2; rotate: -6deg; }
.pd--reel { left: 50%; top: 27%; width: 30.5%; z-index: 3; rotate: 3deg; }
.pd--reel .pd__print { padding: 9px 9px 32px; }
.pd--phone { left: 80%; top: 43%; width: 20%; z-index: 4; rotate: 9deg; }
.pd--typak { left: 25%; top: 50%; width: 28.5%; z-index: 5; rotate: 3deg; }
.pd--sticker { left: -4%; top: -1%; width: 32%; z-index: 6; rotate: -9deg; }
/* a soft drop shadow under the phone and the polaroid (box shadows on their own layers, no filter);
   the brand character is an irregular cut-out and keeps only its baked paper edge */
.pd--phone::after, .pd--pola::after {
  content: ""; position: absolute; z-index: -1; left: 8%; right: 5%; top: 5%; bottom: 3%;
  border-radius: 14%;
  box-shadow: 10px 16px 26px 4px rgba(0, 0, 0, .55);
}
.pd--pola::after { border-radius: 2%; }

.pd__screen { position: relative; aspect-ratio: 9 / 16; }
.pd__screen img, .pd__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd__video { position: absolute; inset: 0; visibility: hidden; background: #0d0d0d; }
.pd--reel.is-playing .pd__video { visibility: visible; }
.pd__cap {
  position: absolute; left: 12px; right: 12px; bottom: 9px;
  font-family: var(--f-type); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap; text-align: right;
}
.pd__play { left: -16px; top: 16%; }

/* hover: the collage breathes apart a little (CSS on the inner prints, never on the GSAP pieces) */
.pd .print, .pd > img { transition: translate .6s var(--ease), rotate .6s var(--ease); }
.proj-drivn__stage:hover .pd--key .print { translate: -6px -4px; rotate: -.6deg; }
.proj-drivn__stage:hover .pd--reel .print { translate: 6px -10px; rotate: 1.4deg; }
.proj-drivn__stage:hover .pd--phone > img { translate: 10px 4px; rotate: 2deg; }
.proj-drivn__stage:hover .pd--sticker > img { translate: -4px -6px; rotate: -3deg; }
.proj-drivn__stage:hover .pd--typak > img { translate: -4px 6px; }

/* the project card: white stock taped on the sheet */
.proj-drivn__card {
  position: relative; display: grid; gap: 14px; justify-items: start;
  padding: clamp(28px, 2.6vw, 38px) clamp(24px, 2.4vw, 34px) clamp(24px, 2.4vw, 32px);
  rotate: .8deg; will-change: transform;   /* rotated: its own layer */
}
.proj-drivn__card .cutlabel { font-size: 14px; }
.proj-drivn__title { width: min(330px, 100%); margin: 6px 0 2px; }
.proj-drivn__title img { display: block; width: 100%; height: auto; }
.proj-drivn__lead { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.45; max-width: 36ch; }
.proj-drivn__feats { display: flex; flex-wrap: wrap; gap: 7px; }
.proj-drivn__feats li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 9px 4px; border: 1.5px solid var(--ink);
  font-family: var(--f-type); font-weight: 700; font-size: 12.5px; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase;
}
.proj-drivn__feats li::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--teal); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.proj-drivn__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 8px; }

/* marker note toward the collage (an SVG-filtered layer that hugs its words) */
.proj__note {
  position: absolute; left: 47%; top: -70px; z-index: 7; pointer-events: none;
  display: flex; align-items: flex-start; gap: 4px;
  font-size: clamp(25px, 2.1vw, 30px); rotate: -3deg; color: #E3283A;
}
.proj__notearrow { width: 60px; height: 46px; flex: none; order: -1; margin-top: 12px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================
   the two smaller projects: prints with more of the job fanned out under them
   ========================================================== */

.proj__minis {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start;
  column-gap: clamp(44px, 6vw, 110px);
  margin-top: clamp(110px, 11vw, 170px); padding: 0 clamp(0px, 2.4vw, 40px);
}
.proj-mini { position: relative; min-width: 0; }
.proj-mini--drop { margin-top: clamp(40px, 6vw, 96px); }

.proj-card { padding: 10px 10px 20px; rotate: var(--r); will-change: transform; }   /* rotated: own layer */
.proj-card:hover, .proj-card:focus-within { rotate: calc(var(--r) * .3); translate: 0 -7px; }
.proj-card__media { display: block; color: inherit; cursor: zoom-in; }
.proj-card__media::before { content: ""; position: absolute; inset: 0; z-index: 5; }
.proj-card__media:focus-visible { outline: none; }
.proj-card__media:focus-visible::before { outline: 3px solid var(--focus); outline-offset: 5px; }
.proj-card .print__img { aspect-ratio: 16 / 9; }
.proj-card .print__img img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s cubic-bezier(.2, .7, .2, 1); }
.proj-card__img--fit { background: #000; }
.proj-card .proj-card__img--fit img { object-fit: contain; }
.proj-card:hover .print__img img { scale: 1.04; }
.proj-card > .cutlabel { position: absolute; top: -13px; left: 20px; z-index: 6; font-size: 14px; }
.proj-card:has(> .tape--tr) > .cutlabel { left: 24px; rotate: 1.5deg; }

/* more prints of the same job under the top one: they fan out on hover */
.proj-card__under {
  position: absolute; z-index: -3; height: auto; pointer-events: none;
  border: 7px solid #F7F3EA; border-bottom-width: 12px; background: #F7F3EA;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .3), 6px 12px 16px -6px rgba(0, 0, 0, .55);
  transition: rotate .55s var(--ease), translate .55s var(--ease);
}
.proj-card__under--l { left: -6%; top: -34px; width: 56%; rotate: -6deg; }
.proj-card__under--r { right: -5%; top: -46px; width: 32%; rotate: 7deg; }
.proj-card__under--tall { width: 27%; top: -64px; }
.proj-card:hover .proj-card__under--l { rotate: -10deg; translate: -14px -12px; }
.proj-card:hover .proj-card__under--r { rotate: 12deg; translate: 14px -14px; }

.proj-card__txt { padding: 14px 6px 0; display: grid; gap: 6px; justify-items: start; color: var(--ink); }
.proj-card__txt .proj__meta { color: #6A625A; }
.proj-card__txt .proj__no { color: var(--ink); }
.proj-card__tags { font-family: var(--f-type); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.proj-card__txt h3 { font-stretch: 72%; font-weight: 900; font-size: clamp(27px, 2.4vw, 36px); line-height: .98; text-transform: uppercase; color: #181513; }
.proj-card__cap { font-size: 15.5px; line-height: 1.42; color: var(--ink-soft); max-width: 46ch; }
.proj-card__more { margin-top: 4px; font-family: var(--f-type); font-weight: 700; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--red); }
.proj-card__more span { display: inline-block; transition: translate .3s var(--ease); }
.proj-card:hover .proj-card__more span { translate: 5px 0; }

/* ==========================================================
   CASE STUDIES (dialog.proj-cs): a dark desk that scrolls, the story on a white card,
   the work below it. Opened with show() (js/35-projects.js), never showModal(): the inert page
   behind a modal dialog was repainted in Safari. Without JS the :target dialog shows (links #cs-*).
   ========================================================== */

.proj-cs {
  position: fixed; inset: 0; z-index: 1000; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--paper-hi);
  overflow: hidden auto; overscroll-behavior: contain;
}
html:not(.js) .proj-cs:target { display: block; }
.proj-cs__bg {
  position: fixed; inset: 0;
  background:
    radial-gradient(80% 70% at 18% 8%, rgba(255, 240, 214, .075), rgba(255, 240, 214, 0) 62%),
    radial-gradient(70% 60% at 100% 100%, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 70%),
    var(--tex-ink) 0 0 / var(--tile),
    #100E0D;
  will-change: opacity;
}
.proj-cs__close {
  position: fixed; top: 16px; right: 18px; z-index: 6; min-height: 44px;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--tex-white) 0 0 / 300px auto, var(--red); background-blend-mode: multiply;
  color: #fff; border: 3px solid var(--ink);
  font-stretch: 80%; font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .04em;
  padding: 9px 14px; rotate: 3deg; box-shadow: 4px 4px 0 var(--ink), 5px 7px 8px rgba(0, 0, 0, .5);
}
.proj-cs__close:focus-visible { outline-color: var(--paper-hi); }
/* language switch inside the case study (same typed tag as the header one, 10-nav.css): 10-nav.js opens the
   other language with this case study open */
.proj-cs__lang {
  position: fixed; top: 22px; left: 18px; z-index: 6; display: inline-flex;
  border: 2px solid var(--ink); background: var(--tex-white) 0 0 / 300px auto, var(--paper-hi); color: var(--ink);
  font-family: var(--f-type); font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
  rotate: -2deg; box-shadow: 3px 3px 0 var(--ink), 4px 6px 8px rgba(0, 0, 0, .45);
}
.proj-cs__lang a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 8px 7px 7px; color: inherit; text-decoration: none; }
.proj-cs__lang a::after { content: ""; position: absolute; inset: -8px 0; }   /* 44 px hit area */
.proj-cs__lang a + a { border-left: 2px solid var(--ink); }
.proj-cs__lang a:hover { color: var(--red); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.proj-cs__lang a[aria-current="page"] { color: #fff; background: var(--tex-white) 0 0 / 300px auto, var(--red); background-blend-mode: multiply; text-decoration: none; }
.proj-cs__lang a:focus-visible { outline-color: var(--paper-hi); }
.proj-cs__in { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 92px var(--gutter) 80px; }

/* ---------- head: the job card + the hero print ---------- */
.proj-cs__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center;
  gap: clamp(36px, 4.4vw, 72px);
}
.proj-cs--drivn .proj-cs__head { grid-template-columns: minmax(0, 1.4fr) minmax(0, .72fr); }
/* PERF: rotated and animated in: own layers */
.proj-cs__card, .proj-cs__hero { will-change: transform; }
.proj-cs__card {
  position: relative; display: grid; gap: 12px; justify-items: start;
  padding: clamp(28px, 3vw, 42px) clamp(24px, 2.8vw, 40px) clamp(26px, 2.6vw, 34px);
  rotate: -.6deg;
}
.proj-cs__tags { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.proj-cs__tags .cutlabel { font-size: 13px; }
.proj-cs__title { margin-top: 8px; font-stretch: 64%; font-weight: 900; font-size: clamp(44px, 5vw, 72px); line-height: .88; text-transform: uppercase; color: var(--ink); }
.proj-cs__title--logo { width: min(380px, 100%); }
.proj-cs__title--logo img { display: block; width: 100%; height: auto; }
.proj-cs__claim { font-family: var(--f-type); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.proj-cs__lead { font-size: clamp(17.5px, 1.4vw, 20px); line-height: 1.45; color: var(--ink); max-width: 48ch; }
.proj-cs__p { font-size: 16px; line-height: 1.55; color: var(--ink-soft); max-width: 56ch; }
.proj-cs__facts {
  width: 100%; margin: 6px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px;
  border-top: 2px solid var(--ink);
}
.proj-cs__facts div { padding: 10px 0 9px; border-bottom: 1px dashed rgba(20, 18, 17, .35); }
.proj-cs__facts dt { font-family: var(--f-type); font-weight: 700; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #6A625A; }
.proj-cs__facts dd { margin: 2px 0 0; font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.proj-cs__facts a { text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.proj-cs__hero { margin: 0; rotate: 1.3deg; justify-self: center; width: 100%; }
.proj-cs__reel { max-width: 360px; }
.proj-cs__print {
  position: relative; padding: 12px;
  background: var(--tex-white) 0 0 / 410px auto, var(--paper-hi);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .35), 1px 2px 2px rgba(0, 0, 0, .5), 8px 16px 22px -6px rgba(0, 0, 0, .6), 22px 44px 70px -20px rgba(0, 0, 0, .75);
}
.proj-cs__print > img { display: block; width: 100%; height: auto; background: #0d0d0d; }
.proj-cs__screen { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; background: #0d0d0d; }
.proj-cs__screen img, .proj-cs__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.proj-cs__video { position: absolute; inset: 0; visibility: hidden; }
.proj-cs__reel.is-playing .proj-cs__video { visibility: visible; }
.proj-cs__play { right: 22px; bottom: 22px; }
.proj-cs__fcap { margin-top: 14px; font-family: var(--f-type); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #B9AFA2; text-align: center; }

/* ---------- the parts below ---------- */
.proj-cs__part { margin-top: clamp(84px, 9vw, 132px); }
.proj-cs__no {
  display: inline-block; padding: 5px 10px 4px; rotate: -2deg;
  border: 2px solid currentColor; color: var(--paper-hi);
  font-family: var(--f-type); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.proj-cs__h { margin-top: 16px; max-width: 20ch; font-stretch: 64%; font-weight: 900; font-size: clamp(38px, 4.6vw, 66px); line-height: .9; text-transform: uppercase; }
.proj-cs__sub { margin-top: 14px; max-width: 58ch; font-size: 17px; line-height: 1.5; color: #CFC6B6; }

/* app screens: tall prints in a row */
.proj-cs__screens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; margin-top: 40px; }
.proj-cs__screens figure, .proj-cs__looks figure, .proj-cs__pair, .proj-cs__wide, .proj-cs__banner {
  margin: 0; padding: 8px 8px 0;
  background: var(--tex-white) 0 0 / 410px auto, var(--paper-hi);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .3), 1px 2px 2px rgba(0, 0, 0, .45), 10px 18px 26px -10px rgba(0, 0, 0, .7);
}
.proj-cs__screens li:nth-child(odd) figure { rotate: -1.2deg; }
.proj-cs__screens li:nth-child(even) figure { rotate: 1.1deg; translate: 0 14px; }
.proj-cs__screens img, .proj-cs__looks img, .proj-cs__pair img, .proj-cs__wide img, .proj-cs__banner img { display: block; width: 100%; height: auto; background: #0d0d0d; }
.proj-cs__screens figcaption, .proj-cs__looks figcaption, .proj-cs__pair figcaption {
  padding: 9px 4px 10px;
  font-family: var(--f-type); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}

/* identity board: one sheet of white stock, the brand pinned on it */
.proj-cs__board {
  position: relative; margin-top: 44px; padding: clamp(26px, 3.4vw, 52px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px); align-items: center;
  rotate: -.4deg;
}
.proj-cs__bd { margin: 0; min-width: 0; }
.proj-cs__bd img { display: block; width: 100%; height: auto; }
.proj-cs__bd figcaption { margin-top: 10px; font-family: var(--f-type); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #6A625A; }
.proj-cs__bd--logo { grid-column: 1 / span 7; grid-row: 1; padding-right: 4%; }
.proj-cs__bd--icon { grid-column: 8 / span 2; grid-row: 1; }
.proj-cs__bd--icon img { border-radius: 22%; box-shadow: 3px 6px 12px -4px rgba(0, 0, 0, .45); }
.proj-cs__bd--typak { grid-column: 10 / span 3; grid-row: 1 / span 2; rotate: 3deg; }
.proj-cs__bd--sticker { grid-column: 1 / span 5; grid-row: 2; rotate: -4deg; }
.proj-cs__bd--sw { grid-column: 6 / span 4; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.proj-cs__chip {
  display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4; padding: 8px;
  background: var(--c); color: #0D0D0D;
  font-family: var(--f-type); font-size: 11px; line-height: 1.25; letter-spacing: .04em;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, .3);
}
.proj-cs__chip b { font-weight: 700; text-transform: uppercase; }
.proj-cs__chip--ink { color: #F2EDE3; }
.proj-cs__chip--paper { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 1px 2px 3px rgba(0, 0, 0, .3); }

.proj-cs__wide { margin-top: 40px; padding-bottom: 8px; rotate: -.5deg; }
.proj-cs__banner { margin-top: 30px; padding-bottom: 8px; rotate: .4deg; }

/* Custom Clothes: four typed steps */
.proj-cs__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.proj-cs__steps li { padding: 22px 20px 24px; color: var(--ink); rotate: -1deg; }
.proj-cs__steps li:nth-child(even) { rotate: 1.2deg; translate: 0 12px; }
.proj-cs__steps b { display: block; font-stretch: 62%; font-weight: 900; font-size: 46px; line-height: .9; color: var(--red); }
.proj-cs__steps h4 { margin: 10px 0 6px; font-stretch: 72%; font-weight: 900; font-size: 21px; line-height: 1; text-transform: uppercase; }
.proj-cs__steps p { font-size: 15px; line-height: 1.45; color: var(--ink-soft); }

/* contact sheet: frames touch, every row reads as a strip of film */
.proj-cs__film {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px;
  margin-top: 40px; padding: clamp(18px, 2vw, 28px) clamp(12px, 1.6vw, 22px);
  background: var(--tex-white) 0 0 / 410px auto, var(--paper-hi);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .3), 1px 2px 2px rgba(0, 0, 0, .45), 14px 26px 40px -16px rgba(0, 0, 0, .7);
  rotate: -.3deg;
}
.proj-cs__film li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: 50%; }
.proj-cs__film figure {
  position: relative; margin: 0; padding: 15px 5px;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, #E9E2D3 7px 14px, transparent 14px 22px) 0 4px / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 7px, #E9E2D3 7px 14px, transparent 14px 22px) 0 calc(100% - 4px) / 100% 6px no-repeat,
    #0E0C0B;
}
.proj-cs__film img { display: block; width: 100%; height: auto; background: #1A1715; }
.proj-cs__film figcaption {
  position: absolute; left: 9px; bottom: 3px;
  font-family: var(--f-type); font-weight: 700; font-size: 9px; line-height: 1; letter-spacing: .12em; color: #E7A13C;
}

.proj-cs__squares { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin-top: 40px; }
.proj-cs__squares li { padding: 7px; background: var(--paper-hi); box-shadow: 1px 2px 2px rgba(0, 0, 0, .45), 8px 16px 22px -10px rgba(0, 0, 0, .7); rotate: -1deg; }
.proj-cs__squares li:nth-child(even) { rotate: 1.3deg; }
.proj-cs__squares img, .proj-cs__tiles img { display: block; width: 100%; height: auto; }
.proj-cs__tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.proj-cs__tiles li { padding: 5px; background: var(--paper-hi); box-shadow: 1px 2px 2px rgba(0, 0, 0, .45), 6px 10px 14px -8px rgba(0, 0, 0, .7); }
.proj-cs__tiles li:nth-child(3n+1) { rotate: -2deg; }
.proj-cs__tiles li:nth-child(3n+2) { rotate: 1.5deg; }

/* Masterclass: before / after, lessons, examples */
.proj-cs__pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 34px; margin-top: 40px; align-items: start; }
.proj-cs__pair--wide:first-child { rotate: -.8deg; }
.proj-cs__pair--wide:last-child { rotate: .9deg; }
.proj-cs__pair--duo { grid-column: 1 / -1; grid-row: 2; justify-self: center; width: min(620px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; rotate: -.5deg; }
.proj-cs__pair--duo figcaption { grid-column: 1 / -1; padding-top: 2px; }
.proj-cs__half { position: relative; display: block; }
.proj-cs__half .cutlabel { position: absolute; left: 10px; top: 10px; font-size: 13px; }
.proj-cs__pair--wide:last-of-type { grid-row: 1; grid-column: 2; }

.proj-cs__lessons {
  margin-top: 40px; padding: clamp(24px, 3vw, 44px) clamp(22px, 3vw, 48px);
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, auto); grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 64px); color: var(--ink); rotate: .4deg;
}
.proj-cs__lessons li {
  display: flex; align-items: baseline; gap: 14px; padding: 12px 0 11px;
  border-bottom: 1px dashed rgba(20, 18, 17, .32);
  font-stretch: 80%; font-weight: 800; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.2; text-transform: uppercase;
}
.proj-cs__lessons b { flex: none; min-width: 30px; font-family: var(--f-type); font-weight: 700; font-size: 14px; letter-spacing: .06em; color: var(--red); }

.proj-cs__looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 30px; margin-top: 40px; }
.proj-cs__looks li:nth-child(odd) figure { rotate: -.8deg; }
.proj-cs__looks li:nth-child(even) figure { rotate: 1deg; translate: 0 18px; }

/* end: the ask, then the other projects */
.proj-cs__end { margin-top: clamp(96px, 10vw, 140px); display: grid; gap: clamp(48px, 5vw, 72px); }
.proj-cs__ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 30px; }
.proj-cs__ctas .proj__ext { color: var(--paper-hi); }
.proj-cs__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 2px solid rgba(250, 247, 240, .25); padding-top: 28px; }
.proj-cs__pn {
  display: grid; gap: 6px; align-content: start; min-height: 44px; text-decoration: none; color: var(--paper-hi);
  font-stretch: 66%; font-weight: 900; font-size: clamp(28px, 3vw, 44px); line-height: .95; text-transform: uppercase;
}
.proj-cs__pn span { font-family: var(--f-type); font-stretch: 100%; font-weight: 700; font-size: 13px; line-height: 1.2; letter-spacing: .08em; color: #B9AFA2; }
.proj-cs__pn--next { justify-items: end; text-align: right; }
.proj-cs__pn:hover { color: #FF4555; }

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .proj__note { left: 44%; top: -64px; }
  .proj-cs__screens { gap: 32px 20px; }
}

@media (max-width: 980px) {
  .proj-drivn { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .proj-drivn__stage { width: min(100%, 720px); justify-self: center; }
  .proj-drivn__card { width: min(100%, 620px); justify-self: center; rotate: .5deg; }
  .proj__note { display: none; }
  .proj__minis { column-gap: 40px; padding: 0; }

  .proj-cs__head, .proj-cs--drivn .proj-cs__head { grid-template-columns: minmax(0, 1fr); }
  .proj-cs__hero { width: min(100%, 680px); }
  .proj-cs__reel { width: min(76%, 360px); }
  .proj-cs__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proj-cs__steps li:nth-child(even) { translate: none; }
  .proj-cs__board { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .proj-cs__bd--logo { grid-column: 1 / -1; grid-row: auto; padding-right: 0; }
  .proj-cs__bd--icon { grid-column: 1 / span 2; grid-row: auto; }
  .proj-cs__bd--typak { grid-column: 3 / span 4; grid-row: auto; justify-self: center; width: 70%; }
  .proj-cs__bd--sticker { grid-column: 1 / -1; grid-row: auto; justify-self: center; width: 80%; }
  .proj-cs__bd--sw { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 640px) {
  .proj { padding-top: 76px; padding-bottom: 92px; }
  .proj-drivn__stage { aspect-ratio: 358 / 476; width: 100%; }
  .pd--key { left: 0; top: 4%; width: 86%; }
  .pd--sticker { left: -3%; top: 0; width: 44%; }
  .pd--pola { left: 0; top: 32%; width: 38%; }
  .pd--reel { left: 39%; top: 24.5%; width: 44%; }
  .pd--reel .pd__print { padding: 7px 7px 26px; }
  .pd__cap { font-size: 10.5px; left: 8px; bottom: 7px; }
  .pd--phone { left: 75%; top: 40%; width: 24%; }
  .pd--typak { left: 6%; top: 60.5%; width: 40%; }
  .pd__print { padding: 7px; }
  .pd__play { left: -12px; top: 14%; width: 44px; height: 44px; }
  .proj-drivn__card { padding: 26px 20px 22px; }
  .proj-drivn__ctas .btn { width: 100%; }

  .proj__minis { grid-template-columns: minmax(0, 1fr); row-gap: 84px; margin-top: 96px; }
  .proj-mini--drop { margin-top: 0; }
  .proj-card { rotate: calc(var(--r) * .6); }
  .proj-card > .cutlabel { top: -11px; left: 14px; font-size: 13px; }
  .proj-card__under { border-width: 5px; border-bottom-width: 9px; }
  .proj-card__under--l { top: -22px; }
  .proj-card__under--r { top: -30px; }
  .proj-card__under--tall { top: -40px; }
  .proj-card__txt h3 { font-size: 29px; }

  /* clip: the tapes on the identity board reach past the screen edge (11 px of sideways scroll before) */
  .proj-cs__in { padding: 76px 14px 64px; overflow-x: clip; }
  .proj-cs__close { top: 12px; right: 12px; }
  .proj-cs__lang { top: 18px; left: 12px; }
  .proj-cs__card { padding: 26px 18px 22px; rotate: -.4deg; }
  .proj-cs__facts { grid-template-columns: minmax(0, 1fr); }
  .proj-cs__reel { width: min(84%, 340px); }
  .proj-cs__screens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .proj-cs__steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .proj-cs__steps li, .proj-cs__steps li:nth-child(even) { rotate: 0deg; }
  .proj-cs__film { grid-template-columns: minmax(0, 1fr); padding: 14px 8px; row-gap: 14px; }
  .proj-cs__film li:last-child:nth-child(odd) { width: 100%; }
  .proj-cs__squares { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .proj-cs__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .proj-cs__pairs { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .proj-cs__pair--duo, .proj-cs__pair--wide:last-of-type { grid-column: auto; grid-row: auto; }
  .proj-cs__lessons { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: minmax(0, 1fr); }
  .proj-cs__looks { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .proj-cs__looks li:nth-child(even) figure { translate: none; }
  .proj-cs__nav { grid-template-columns: minmax(0, 1fr); }
  .proj-cs__pn--next { justify-items: start; text-align: left; }
  .proj-cs__ctas .btn { width: 100%; }
}

/* ===== src/css/40-ai.css ===== */
/* ==========================================================
   40 · AI vizuály (before / after) · owner: AI agent
   root: <section class="sec ai" data-section="ai">
   A comparison = two prints taped together: the "po" print lies on top of the "pred" print,
   torn along a vertical seam. --pos (0..100, set by js) moves the tear: the po sheet is clipped
   at --pos and the seam track (torn white core, tapes, grip) is translated by the same --pos.
   ========================================================== */

.ai__in {
  max-width: var(--maxw); margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "head main" "pitch main" "cta main" "duo duo";
  grid-template-rows: auto auto 1fr auto;
  column-gap: clamp(40px, 5.5vw, 88px);
  align-items: start;
}
.ai .ai__head { grid-area: head; max-width: none; margin: 0 0 30px; }
.ai .ai__head .sechead__title { font-size: clamp(54px, 7.2vw, 108px); max-width: 10ch; }   /* column title scale, shared with services + testimonials */

/* ---------- pitch + CTA ---------- */
.ai__pitch { grid-area: pitch; max-width: 470px; }
.ai__pitch li {
  position: relative;
  padding: 13px 0 13px 32px;
  border-top: 2px dashed rgba(20, 18, 17, .28);
  font-size: clamp(17px, 1.3vw, 19px); font-weight: 600; line-height: 1.35;
}
.ai__pitch li:last-child { border-bottom: 2px dashed rgba(20, 18, 17, .28); }
.ai__pitch li::before {            /* a short red marker tick */
  content: ""; position: absolute; left: 3px; top: calc(13px + .6em);
  width: 17px; height: 4px; border-radius: 2px 3px 2px 3px;
  background: #C51D2C; rotate: -9deg;
}

.ai__cta { grid-area: cta; display: flex; flex-wrap: wrap; align-items: center; gap: 26px 30px; margin-top: 34px; }
.ai__course {
  --focus: var(--ink);
  display: grid; gap: 4px; justify-items: start;
  padding: 12px 20px 13px 18px;
  color: var(--paper-hi); text-decoration: none;
  background: var(--tex-black) 50% 50% / 560px auto, var(--ink);
  rotate: -1.6deg;
  box-shadow: .5px .5px 0 rgba(0, 0, 0, .3), 2px 4px 5px -1px rgba(var(--sh-c), .42), 9px 16px 20px -9px rgba(var(--sh-c), .38);
  transition: translate .25s var(--ease);
}
.ai__course:hover { translate: 0 -3px; }
.ai__course-k {
  font-family: var(--f-type); font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .14em; text-transform: uppercase;
  background: var(--tex-white) 0 0 / 300px auto, var(--red); background-blend-mode: multiply; color: #fff;
  padding: 4px 7px 3px; rotate: -2deg;
}
.ai__course-t { font-stretch: 70%; font-weight: 900; font-size: 23px; line-height: 1; text-transform: uppercase; letter-spacing: .01em; margin-top: 3px; }
.ai__course-s { display: flex; align-items: center; gap: 8px; font-family: var(--f-type); font-size: 14px; line-height: 1.3; color: #D8CFBF; }
.ai__course-s svg { flex: none; width: 24px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: translate .25s var(--ease); }
.ai__course:hover .ai__course-s svg { translate: 4px 0; }

/* ---------- layout of the prints ---------- */
.ai__cell { position: relative; }
.ai__cell--main { grid-area: main; padding-top: 6px; }
.ai__duo {
  grid-area: duo;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(40px, 5.5vw, 88px); align-items: start;
  margin-top: clamp(84px, 9vw, 132px);
}
.ai__cell--b { margin-top: clamp(40px, 6.5vw, 104px); }

/* marker note pointing at the first seam */
.ai .ai__note {
  position: absolute; z-index: 7; left: 21%; top: -46px;
  display: flex; align-items: flex-start; gap: 4px;
  font-size: 30px; rotate: -5deg; pointer-events: none; white-space: nowrap;
}
.ai .ai__note-arrow { position: relative; width: 74px; height: 50px; margin-top: 16px; }
.ai .ai__note-arrow path { stroke-width: 4px; }

/* ---------- the comparison print ---------- */
/* the print is rotated: as its own layer it is painted upright once and turned by the GPU (Safari
   painted every rotated photo, shadow and texture through a rotation on each repaint) */
.ai-cmp { position: relative; margin: 0; rotate: var(--r, 0deg); will-change: transform; }
.ai-cmp__stage { --pos: 50; --bd: clamp(7px, .85vw, 12px); --seam-y: 0px; }
/* the stage is a kit .print (paper shadow + curled corner + light), but it must not grow under the finger */
.ai .ai-cmp__stage.print:hover, .ai .ai-cmp__stage.print:focus-within { scale: none; }
html.js .ai-cmp__stage { cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
html.js .ai-cmp.is-drag .ai-cmp__stage { cursor: grabbing; }

.ai-cmp__sheet {
  position: relative;
  padding: var(--bd);
  /* matte print: a touch warmer and duller than the glossy one on top */
  background: linear-gradient(rgba(150, 120, 80, .07), rgba(150, 120, 80, .07)), var(--tex-white) 0 0 / 410px auto, #F2EEE5;
}
.ai-cmp__sheet img {
  display: block; width: 100%; height: auto; background: #151311;
  pointer-events: none; -webkit-user-drag: none;
}
.ai-cmp__sheet::after {          /* the photo sits in the paper, a hairline of shade on its edge */
  content: ""; position: absolute; inset: var(--bd); pointer-events: none;
  box-shadow: inset 0 1px 1.5px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .14);
}
/* the "po" print is cut at --pos by two layers moving against each other: the window
   (.ai-cmp__sheet--po, overflow hidden) slides right by --pos while its content (.ai-cmp__poin)
   slides back by the same amount, so the seam moves by compositing only. A clip-path at --pos
   repainted the whole print on every frame of the demo sweep and of every drag. */
.ai-cmp__sheet--po {
  position: absolute; inset: 0; padding: 0; background: none; overflow: hidden;
  translate: calc(var(--pos) * 1%) 0;
  will-change: transform;
}
.ai-cmp__sheet--po::after { content: none; }
.ai-cmp__poin {
  position: absolute; inset: 0; padding: var(--bd);
  background: var(--tex-white) 0 0 / 410px auto, #FBF9F4;
  translate: calc(var(--pos) * -1%) 0;
  will-change: transform;
}
.ai-cmp__poin::after {           /* the photo sits in the paper (as .ai-cmp__sheet::after) */
  content: ""; position: absolute; inset: var(--bd); pointer-events: none;
  box-shadow: inset 0 1px 1.5px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .14);
}
.ai-cmp__sheet--po img { height: 100%; object-fit: cover; }
.ai-cmp__poin::before {          /* gloss: a soft window reflection on the new print only */
  content: ""; position: absolute; z-index: 1; inset: var(--bd); pointer-events: none;
  background: linear-gradient(116deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .13) 41%, rgba(255, 255, 255, .05) 49%, rgba(255, 255, 255, 0) 60%);
  mix-blend-mode: screen;
}
.ai .ai-cmp__tag { position: absolute; z-index: 2; top: calc(var(--bd) + 12px); font-size: 14px; }
.ai .ai-cmp__sheet--pred .ai-cmp__tag { left: calc(var(--bd) + 12px); }
.ai .ai-cmp__sheet--po .ai-cmp__tag { right: calc(var(--bd) + 12px); rotate: 2.5deg; }

/* torn seam: white paper core with fibres (src/img/ai-seam.webp, 32 x 700 CSS px, tiles in y) */
.ai-cmp__tearclip { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.ai-cmp__track { position: absolute; inset: 0; pointer-events: none; translate: calc(var(--pos) * 1%) 0; will-change: transform; }
.ai-cmp__tear {
  position: absolute; top: 0; bottom: 0; left: -16px; width: 32px;
  background: url("img/ai-seam.webp?v=019ba28d") 0 var(--seam-y) / 32px 700px repeat-y;
}
html.js .ai:not(.tex-on) .ai-cmp__tear { background-image: none; }   /* loads with the section (base.css, tail.html) */
.ai-cmp__deco { z-index: 5; }
.ai .ai-cmp__tape { left: 0; translate: -50% 0; }
.ai .ai-cmp__tape--t { top: -15px; rotate: -6deg; }
.ai .ai-cmp__tape--b { top: auto; bottom: -15px; translate: -44% 0; rotate: 8deg; }

/* grip: a red vinyl dot sticker with two chevrons */
.ai-cmp__grip {
  position: absolute; top: 50%; left: 0;
  width: 50px; height: 50px; translate: -50% -50%; rotate: -8deg;
  display: grid; place-items: center; border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 44%),
    var(--tex-white) 0 0 / 300px auto,
    var(--red);
  background-blend-mode: normal, multiply, normal;
  box-shadow: .5px .5px .5px rgba(var(--sh-c), .4), 2px 4px 6px -1px rgba(var(--sh-c), .42), inset -1px -1.5px 1px rgba(0, 0, 0, .18), inset 1px 1px 1px rgba(255, 255, 255, .25);
  transition: scale .3s var(--ease);
}
.ai-cmp__grip svg { width: 27px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
html.js .ai-cmp__stage:hover .ai-cmp__grip, .ai-cmp.is-drag .ai-cmp__grip { scale: 1.1; }

/* the range input drives the seam for keyboard and screen readers; pointer drag is handled in js */
.ai-cmp__range {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; pointer-events: none;
  -webkit-appearance: none; appearance: none; background: none;
}
/* focus ring readable on dark and light photos: white ring on an ink halo */
.ai-cmp__range:focus-visible ~ .ai-cmp__deco .ai-cmp__grip {
  outline: 3px solid #fff; outline-offset: 3px;
  box-shadow: .5px .5px .5px rgba(var(--sh-c), .4), 2px 4px 6px -1px rgba(var(--sh-c), .42), inset -1px -1.5px 1px rgba(0, 0, 0, .18), inset 1px 1px 1px rgba(255, 255, 255, .25), 0 0 0 9px rgba(20, 18, 17, .88);
}
/* without js the seam stays in the middle: no dead controls */
html:not(.js) .ai-cmp__range, html:not(.js) .ai-cmp__grip, html:not(.js) .ai .ai__note { display: none; }

.ai .ai-cmp__cap { position: absolute; z-index: 6; left: 22px; bottom: -17px; font-size: 13px; }

/* ---------- pinned pair: the "pred" snapshot taped onto the corner of the finished print ---------- */
.ai-pair { position: relative; margin: 0; rotate: var(--r, 0deg); padding-top: clamp(34px, 4.4vw, 64px); will-change: transform; }   /* rotated: own layer (see .ai-cmp) */
.ai-pair__po { margin-left: 17%; padding: clamp(7px, .85vw, 12px); }
.ai-pair__pred {
  position: absolute; z-index: 3; left: 0; top: 0; width: 36%;
  padding: clamp(6px, .6vw, 9px); rotate: -6.5deg;
  will-change: transform;
}
.ai__cell--b .ai-pair__pred { width: 40%; rotate: -4deg; }
/* the snapshot sits on top of the print: a lifted shadow, it does not grow on hover */
.ai .ai-pair__pred::before { box-shadow: var(--sh-lift); }
.ai .ai-pair__pred:hover, .ai .ai-pair__pred:focus-within { scale: none; }
.ai .ai-pair__tape { top: -17px; }
.ai .ai-pair__tag { position: absolute; z-index: 4; font-size: 14px; }
.ai .ai-pair__po .ai-pair__tag { right: calc(clamp(7px, .85vw, 12px) + 12px); top: calc(clamp(7px, .85vw, 12px) + 12px); rotate: 2.5deg; }
.ai .ai-pair__pred .ai-pair__tag { left: 50%; bottom: -12px; translate: -50% 0; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .ai__in {
    max-width: 640px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "pitch" "cta" "main" "duo";
    grid-template-rows: none;
  }
  .ai__cell--main { margin-top: 92px; }
  .ai__duo { grid-template-columns: minmax(0, 1fr); row-gap: 84px; margin-top: 84px; }
  .ai__cell--b { margin-top: 0; }
  .ai .ai__note { left: 18%; }
  .ai__cell--b .ai-pair__po { margin-left: 22%; }
}

@media (max-width: 640px) {
  .ai .ai__head .sechead__title { font-size: clamp(50px, 15vw, 76px); }
  .ai__cta { gap: 22px; }
  .ai__cta .btn { width: 100%; }
  .ai .ai__note { font-size: 25px; top: -42px; left: 12%; }
  .ai .ai__note-arrow { width: 60px; height: 42px; margin-top: 12px; }
  .ai-cmp__grip { width: 46px; height: 46px; }
  .ai .ai-cmp__tag { font-size: 13px; top: calc(var(--bd) + 9px); }
  .ai .ai-cmp__sheet--pred .ai-cmp__tag { left: calc(var(--bd) + 9px); }
  .ai .ai-cmp__sheet--po .ai-cmp__tag { right: calc(var(--bd) + 9px); }
  .ai .ai-cmp__cap { left: 14px; font-size: 12px; }
  .ai-pair__po { margin-left: 12%; }
  .ai-pair__pred { width: 42%; }
  .ai__cell--b .ai-pair__pred { width: 44%; }
  .ai .ai-pair__tag { font-size: 13px; }
}

/* ===== src/css/50-services.css ===== */
/* ==========================================================
   50 · services (project index + monthly retainer receipt) · owner: services agent
   root: <section class="sec services sheet-lo torn-top torn-bottom" data-section="services">
   ========================================================== */

.services { margin-bottom: 40px; }
.services__in {
  max-width: var(--maxw); margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "head side" "list side";
  grid-template-rows: auto 1fr;
  column-gap: clamp(40px, 6vw, 104px);
  align-items: start;
}
.services .services__head { grid-area: head; max-width: none; margin: 0 0 44px; }
.services .sechead__title { font-size: clamp(54px, 7.2vw, 108px); }   /* column title scale, shared with ai + testimonials */

/* ---------- project index ---------- */
.srv { grid-area: list; }
.srv__row {
  position: relative;
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 12px; align-items: start;
  padding: 24px 0 22px;
}
.srv__rule { position: absolute; left: 0; right: 0; top: 0; border-top: 2px dashed rgba(20, 18, 17, .32); }
.srv__row:last-child { border-bottom: 2px dashed rgba(20, 18, 17, .32); }
.srv__no { font-family: var(--f-type); font-weight: 700; font-size: 16px; color: var(--red); padding-top: .55em; transition: color .3s ease; }
.srv__h {
  font-stretch: 66%; font-weight: 900; font-size: clamp(32px, 3.5vw, 54px); line-height: .95; text-transform: uppercase;
  /* the name rises out of this line on scroll (js); padding keeps the diacritics inside the clip */
  overflow: clip; padding: .16em 0 .08em; margin: -.16em 0 -.08em;
  transition: color .3s ease;
}
.srv__link { color: inherit; text-decoration: none; }
.srv__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }     /* the whole row is the link */
.srv__link:focus-visible { outline: none; }
.srv__link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 3px; }
.srv__name { display: inline-block; transition: translate .45s var(--ease); }
.srv__nm {
  background: linear-gradient(transparent 56%, rgba(196, 24, 40, .9) 56%, rgba(196, 24, 40, .9) 86%, transparent 86%) no-repeat 0 0 / 0% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .5s var(--ease);
  padding: 0 .06em; margin-left: -.06em;
}
.srv__row:hover .srv__nm, .srv__link:focus-visible .srv__nm { background-size: 100% 100%; }
.srv__p { font-size: 17px; color: var(--ink-soft); margin-top: 8px; max-width: 52ch; transition: color .3s ease; }
.srv__body { transition: opacity .35s ease; }
.srv__go {
  grid-column: 3; align-self: center;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-type); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--red);
}
.srv__go svg { width: 26px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (hover: hover) and (pointer: fine) {
  .srv__row:hover .srv__name { translate: 10px 0; }
  .srv__go { opacity: 0; translate: -12px 0; transition: opacity .3s ease, translate .45s var(--ease); }
  .srv__row:hover .srv__go, .srv__row:focus-within .srv__go { opacity: 1; translate: 0 0; }
  /* while the pointer moves over the list, the other rows step back a little (never below .75) */
  .srv.is-dim .srv__row:not(.is-on) .srv__body { opacity: .76; }
  .srv.is-dim .srv__row:not(.is-on) .srv__no { color: rgba(196, 24, 40, .62); }
}
@media not all and (hover: hover) and (pointer: fine) {
  .srv__go span { display: none; }
}

/* polaroid in the gutter between the list and the receipt, level with the hovered row
   (js sets its width from the gutter, fine pointers only) */
.srv-peek {
  position: fixed; left: 0; top: 0; z-index: 40;
  width: 200px;
  pointer-events: none; visibility: hidden;
  transition: visibility 0s .4s;
}
.srv-peek.is-on { visibility: visible; transition-delay: 0s; }
.srv-peek__card {
  position: relative; display: block;
  padding: 8px 8px 36px;
  background: var(--tex-white) 0 0 / 410px auto, var(--paper-hi);
  box-shadow: var(--sh-lift);
  opacity: 0; scale: .55;
  transition: opacity .22s ease, scale .5s var(--ease);
}
.srv-peek.is-on .srv-peek__card { opacity: 1; scale: 1; }
.services .srv-peek__tape { top: -17px; }
.srv-peek__img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #151311; }
.srv-peek__img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; scale: 1.08;
  transition: opacity .3s ease, scale .8s var(--ease);
}
.srv-peek__img img.is-cur { opacity: 1; scale: 1; }
.srv-peek__img::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 1px 1.5px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .14); }
.srv-peek__cap {
  position: absolute; left: 12px; right: 12px; bottom: 13px;
  font-family: var(--f-type); font-weight: 700; font-size: 13px; line-height: 1.2; color: #3F3A35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media not all and (hover: hover) and (pointer: fine) { .srv-peek { display: none; } }

/* ---------- the retainer: a thermal paper receipt, stamped ---------- */
.services__side {
  grid-area: side; position: sticky; top: 104px;
  justify-self: end; width: 100%; max-width: 430px; padding-top: 18px;
}
@media (max-height: 840px) { .services__side { position: relative; top: 0; } }

/* the paper is masked (zig-zag tear), so its shadow is a filter on this wrapper. PERF: a layer
   (the scrubbed rotation in 50-services.js is then compositing only) with ONE drop-shadow, which
   Safari draws on the GPU; the crisp contact edge is a zig-zag silhouette behind the paper (::before).
   Three stacked drop-shadows were re-rendered in software on every paint of the receipt. */
.rcpt {
  position: relative; rotate: var(--r, 0deg);
  will-change: transform;
  filter: drop-shadow(8px 17px 15px rgba(var(--sh-c), .3));
}
.rcpt::before {
  --z: 6px;
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(var(--sh-c), .3); translate: 0 .5px;
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / calc(2 * var(--z)) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / calc(2 * var(--z)) 51% repeat-x;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / calc(2 * var(--z)) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / calc(2 * var(--z)) 51% repeat-x;
}
.services .rcpt__tape { top: -17px; z-index: 2; }
.rcpt__paper {
  --z: 6px;   /* tooth of the tear-off edge */
  position: relative;
  padding: 38px clamp(22px, 2.4vw, 32px) 36px;
  color: #272422;
  font-family: var(--f-type); font-size: 14.5px; line-height: 1.45;
  background:
    linear-gradient(90deg, rgba(70, 55, 40, .07), rgba(70, 55, 40, 0) 10%, rgba(70, 55, 40, 0) 84%, rgba(70, 55, 40, .09)),       /* receipts curl along their length */
    linear-gradient(180deg, rgba(70, 55, 40, 0) 33%, rgba(70, 55, 40, .06) 36.7%, rgba(255, 255, 255, .75) 37%, rgba(255, 255, 255, 0) 39.5%), /* one fold */
    linear-gradient(155deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 38%),                                                         /* window light, top left */
    var(--tex-white) 0 0 / 410px auto,
    #FCFBF7;
  /* zig-zag tear-off edges top and bottom (conic-gradient mask, technique by Temani Afif, css-tip.com) */
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / calc(2 * var(--z)) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / calc(2 * var(--z)) 51% repeat-x;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / calc(2 * var(--z)) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / calc(2 * var(--z)) 51% repeat-x;
}
.rcpt__shop {
  text-align: center;
  font-family: var(--f-display); font-stretch: 62%; font-weight: 900; font-size: 36px; line-height: 1;
  text-transform: uppercase; letter-spacing: .03em;
  padding-top: .1em;
  -webkit-mask: var(--mask-ink) 0 0 / 384px 384px; mask: var(--mask-ink) 0 0 / 384px 384px;
}
.rcpt__meta { text-align: center; font-size: 12.5px; line-height: 1.4; margin-top: 8px; color: #4A4541; }
.rcpt__title {
  margin-top: 18px; padding: 10px 0 9px;
  border-top: 1.5px dashed rgba(39, 36, 34, .6); border-bottom: 1.5px dashed rgba(39, 36, 34, .6);
  text-align: center; font-family: var(--f-type); font-weight: 700; font-size: 15px; line-height: 1.3;
  letter-spacing: .08em; text-transform: uppercase;
}
.rcpt__for { text-align: center; font-size: 13.5px; margin: 12px 0 14px; }
.rcpt__items li { display: flex; align-items: baseline; gap: 6px; margin: 7px 0; }
.rcpt__items span { flex: 0 1 auto; }
.rcpt__items i { flex: 1 1 14px; min-width: 14px; border-bottom: 2px dotted rgba(39, 36, 34, .45); translate: 0 -.3em; }
.rcpt__items b { flex: none; white-space: nowrap; }
.rcpt__sum { position: relative; margin-top: 16px; padding-top: 14px; border-top: 4px double rgba(39, 36, 34, .7); }
.rcpt__sum-k { font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.rcpt__price {
  font-family: var(--f-display); font-stretch: 62%; font-weight: 900; font-style: italic;
  font-size: clamp(78px, 7.4vw, 108px); line-height: .84; letter-spacing: -.01em;
  color: var(--ink);
  margin-top: 6px; padding: .06em .1em 0 0;
  -webkit-mask: var(--mask-ink) 0 0 / 384px 384px; mask: var(--mask-ink) 0 0 / 384px 384px;
}
.rcpt__price small { font-size: .3em; font-style: normal; vertical-align: .95em; margin-right: .08em; }
.rcpt__tax { font-weight: 700; font-size: 13px; margin-top: 6px; }
.rcpt__fine { margin-top: 16px; padding-top: 12px; border-top: 1.5px dashed rgba(39, 36, 34, .45); text-align: center; font-size: 12.5px; line-height: 1.45; }
.services .rcpt__stamp { right: -6px; top: 50%; width: clamp(118px, 10vw, 140px); translate: 0 -44%; rotate: -14deg; }
.rcpt__tick { fill: none; stroke: currentColor; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.rcpt__bar { display: block; width: 74%; height: 40px; margin: 22px auto 6px; fill: #272422; }
.rcpt__thanks { text-align: center; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.rcpt__cta { margin-top: 34px; }
.rcpt__call { margin-top: 14px; text-align: center; font-family: var(--f-type); font-size: 14px; color: var(--ink-soft); }
.rcpt__call a { font-weight: 700; color: var(--ink); text-underline-offset: 3px; white-space: nowrap; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .services__in { column-gap: 48px; }
  .rcpt__paper { font-size: 12.5px; padding-left: 20px; padding-right: 20px; }
  .rcpt__items i { min-width: 8px; flex-basis: 8px; }
}

@media (max-width: 980px) {
  .services__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "list" "side"; grid-template-rows: none; }
  .services__side { position: relative; top: 0; justify-self: center; max-width: 440px; padding-top: 0; margin-top: 76px; }
  .rcpt__paper { font-size: 14px; padding-left: 28px; padding-right: 28px; }
}

@media (max-width: 640px) {
  .services .sechead__title { font-size: clamp(50px, 15vw, 76px); }
  .services .services__head { margin-bottom: 30px; }
  .srv__row { grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 8px; padding: 20px 0 18px; }
  .srv__no { font-size: 14px; }
  .srv__h { font-size: clamp(30px, 9vw, 40px); }
  .srv__p { font-size: 16px; }
  .rcpt__paper { padding: 34px 18px 30px; font-size: 12.5px; }
  .rcpt__items i { min-width: 8px; flex-basis: 8px; }
  .rcpt__shop { font-size: 32px; }
  .rcpt__price { font-size: 84px; }
  .services .rcpt__stamp { width: 112px; right: -4px; }
}

/* ===== src/css/60-process.css ===== */
/* ==========================================================
   60 · process (four index cards dealt onto the desk) · owner: process agent
   Static (no JS, reduced motion, CDN down): a plain 4 / 2 / 1 column list.
   .is-pin (set by motion() on desktops ≥ 981 × 761): the section becomes a pinned
   100vh stage with its own table texture, aligned to the body tile (--pr-bgy).
   ========================================================== */

.process { --pgap: clamp(26px, 3.2vw, 52px); }
.process__head { position: relative; }
.process .sechead__title { max-width: none; font-size: clamp(54px, 6.5vw, 94px); }

/* step counter, only on the pinned stage */
.process__count {
  display: none;
  position: absolute; right: 0; top: -2px;
  font-family: var(--f-type); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.process__count b {
  display: inline-block; min-width: 1.05em; margin: 0 .08em 0 .18em;
  font-family: var(--f-display); font-stretch: 62%; font-weight: 900; font-size: 46px; line-height: .8; letter-spacing: 0;
  color: var(--red); vertical-align: -.12em;
}

.psteps {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pgap);
}
.pstep { position: relative; rotate: var(--r); translate: 0 var(--y, 0); }
/* four steps climbing to the right (translate is visual only; the list reserves the room) */
.psteps { padding-bottom: 114px; }
.pstep:nth-child(1) { --y: 114px; }
.pstep:nth-child(2) { --y: 72px; }
.pstep:nth-child(3) { --y: 38px; }
.pstep:nth-child(4) { --y: 0px; }
/* PERF: the card is a layer and casts ONE drop-shadow, which Safari draws on the GPU; the crisp
   contact edge of the old first shadow is a torn silhouette painted behind the paper (::before).
   Three stacked drop-shadows were re-rendered in software every time the card was painted. */
.pstep__card {
  position: relative; height: 100%;
  will-change: transform;
  filter: drop-shadow(6px 12px 12px rgba(var(--sh-c), .3));
}
.pstep__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  clip-path: var(--torn); background: rgba(var(--sh-c), .3); translate: .5px 1px;
}
/* the soft shadow of a card still in the air (only visible while it is dealt) */
.pstep__lift {
  position: absolute; z-index: -1; inset: 10% 5% 0 9%;
  border-radius: 8px; background: rgba(40, 26, 12, .42); filter: blur(22px);
  visibility: hidden;
}

/* index card: white stock, red head rule, light blue ruling, key light top left */
.pstep__paper {
  position: relative; height: 100%;
  padding: 78px 22px 46px 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 36%),
    radial-gradient(95% 70% at 100% 100%, rgba(60, 40, 20, .11) 0%, rgba(60, 40, 20, 0) 72%),
    linear-gradient(180deg, transparent 74px, rgba(196, 24, 40, .62) 74px 76px, transparent 76px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(52, 86, 128, .19) 31px 32px) 0 76px / 100% 100% no-repeat,
    var(--tex-white) 0 0 / 410px auto,
    var(--paper-hi);
  clip-path: var(--torn);
}
.pstep h3 {
  font-stretch: 70%; font-weight: 900; font-size: clamp(25px, 2.15vw, 31px); line-height: 32px;
  text-transform: uppercase; letter-spacing: .005em;
}
.pstep p { padding-top: 3px; font-size: 18px; line-height: 32px; color: var(--ink-soft); }

/* marker numeral (black felt marker) and tick (red) */
.process .pstep__no { left: 14px; top: 6px; width: 50px; height: 66px; stroke: #1E1B19; }
.process .pstep__no path { stroke-width: 7.5px; stroke-opacity: .92; }
.process .pstep__tick { right: 14px; top: 10px; width: 60px; height: 52px; }
.process .pstep__tick path { stroke-width: 6.5px; }

/* tape: all at the top edge, each a little different */
.pstep .tape { top: -17px; }
.pstep:nth-child(2) .tape { left: 46%; rotate: 4deg; }
.pstep:nth-child(3) .tape { left: 54%; rotate: -5deg; }
.pstep:nth-child(4) .tape { left: 44%; rotate: 2.5deg; }

/* marker arrow across the gap to the next card */
.process .pstep__arrow {
  z-index: 6; top: 44%; right: calc(-1 * var(--pgap) - 12px);
  width: calc(var(--pgap) + 24px); height: 34px;
  rotate: -24deg;
}
.process .pstep__arrow path { stroke-width: 4.5px; }

/* "handed over" stamp on the last card */
.process .pstep__stamp { width: 124px; right: -30px; bottom: -44px; rotate: -12deg; }

/* ---------- pinned stage (motion, desktop) ----------
   CSS sticky, not a GSAP pin: a position:fixed switch counts as a layout shift (CLS ~1 per pin),
   a sticky offset does not. The section grows by the deal length (--pr-pin, set in JS) and the
   stage sticks to the top of the window while the scrubbed timeline plays. */
.process.is-pin { padding: 0; }
.process.is-pin::after { content: ""; display: block; height: var(--pr-pin, 2048px); }
.process.is-pin .process__stage {
  position: sticky; top: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  padding: clamp(100px, 13vh, 132px) var(--gutter) clamp(36px, 7vh, 72px);
  /* the table under a pinned stage: same tile as body, shifted to its page offset */
  background: var(--tex-paper) 0 var(--pr-bgy, 0px) / var(--tile), var(--paper);
}
.process.is-pin .process__count { display: block; }
.process__desk { position: relative; max-width: var(--maxw); margin-inline: auto; }
.process.is-pin .process__desk { width: 100%; margin-block: auto; }
.process.is-pin .pstep__lift { will-change: transform; }
/* larger notes on the stage, so the desk is filled while it holds */
.process.is-pin .pstep__paper { min-height: clamp(300px, 42vh, 430px); padding: 90px 26px 50px 28px; }
.process.is-pin .pstep h3 { font-size: clamp(29px, 2.6vw, 38px); }
.process.is-pin .pstep p { font-size: clamp(18px, 1.4vw, 20px); }
.process.is-pin .pstep__arrow { display: none; }

/* red marker path under the steps: only on the pinned stage (static desktop keeps the arrows) */
.process .process__path { display: none; }
/* the image is the 1360 x 190 line (103 % of the widest desk) plus a 12 px margin for the felt edge;
   it stretches with the desk like the SVG did. Revealed by a clip on its own layer (60-process.js). */
.process.is-pin .process__path {
  display: block; position: absolute; z-index: 0; pointer-events: none;
  left: calc(-1.5% - 12px); width: calc(103% + 24px); max-width: none; bottom: -52px; height: 214px;
  mix-blend-mode: multiply;
  will-change: transform;
}
.process.is-pin .pstep { z-index: 1; }
/* short laptop screens (1280 x 720): the stage must fit the window while it sticks */
@media (max-height: 860px) {
  .process.is-pin .pstep__paper { min-height: 0; padding-top: 80px; padding-bottom: 38px; }
  .process.is-pin .pstep h3 { font-size: clamp(26px, 2.3vw, 32px); }
  .process.is-pin .pstep p { font-size: 17.5px; }
  .process.is-pin .process__stage { padding-top: 92px; padding-bottom: 44px; }
}

@media (max-width: 1180px) {
  .pstep__paper { padding-left: 20px; padding-right: 18px; }
  .pstep p { font-size: 16.5px; }
}

@media (max-width: 980px) {
  .process .sechead__title { font-size: clamp(54px, 8.4vw, 100px); max-width: 12ch; }
  .psteps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .pstep:nth-child(2) .pstep__arrow { display: none; }
  .psteps { padding-bottom: 0; }
  .psteps .pstep:nth-child(n) { --y: 0px; }
  .psteps .pstep:nth-child(even) { --y: 22px; }
  .process .pstep__arrow { rotate: 0deg; }
}

@media (max-width: 640px) {
  .process .sechead__title { font-size: clamp(50px, 15vw, 76px); }
  .psteps { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .psteps .pstep:nth-child(n) { --y: 0px; }
  .process .pstep__arrow { display: none; }
  .pstep__paper { padding: 78px 22px 38px 22px; }
  .pstep h3 { font-size: 28px; }
  .pstep p { font-size: 17px; }
  .process .pstep__stamp { width: 106px; right: -8px; bottom: -34px; }
}

/* ===== src/css/70-testimonials.css ===== */
/* ==========================================================
   70 · testimonials (a stack of client notes) + trust strip · owner: testimonials agent
   Static (no JS, reduced motion): notes in a 2 / 1 column grid.
   Deck (html.js + motion allowed): the notes stack in one grid cell; depth comes from
   data-d (0 = top), set by 70-testimonials.js; transforms are read back from the same vars.
   ========================================================== */

.quotes { padding-top: clamp(40px, 5vw, 72px); }
.quotes__in { max-width: var(--maxw); margin: 0 auto; }
.quotes .sechead__title { font-size: clamp(54px, 6.6vw, 96px); }   /* "o spolupráci" must fit the head column on one line */

/* ---------- the notes ---------- */
.qdeck {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 4.6vw, 68px);
  max-width: 1180px; margin: 0 auto;
}
.qnote { position: relative; rotate: var(--r0); }
.qnote:nth-child(even) { margin-top: clamp(0px, 4vw, 56px); }
/* PERF: each note is a layer with ONE drop-shadow (drawn by the GPU in Safari) plus a torn
   silhouette for the crisp contact edge (::before); three stacked drop-shadows were re-rendered in
   software whenever the note was painted (a 300 ms frame when the deck scrolled in) */
.qnote__in {
  position: relative; height: 100%;
  will-change: transform;
  filter: drop-shadow(7px 14px 14px rgba(var(--sh-c), .28));
}
.qnote__in::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  clip-path: var(--torn); background: rgba(var(--sh-c), .3); translate: .5px 1px;
}
.qnote__paper {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  padding: 80px clamp(26px, 3.6vw, 54px) 40px;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .40) 0%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(90% 70% at 100% 100%, rgba(60, 40, 20, .10) 0%, rgba(60, 40, 20, 0) 72%),
    var(--tex-white) 0 0 / 410px auto,
    var(--paper-hi);
  clip-path: var(--torn);
}
/* big opening quote, printed red */
.qnote__paper::before {
  content: "„"; position: absolute; left: clamp(20px, 3vw, 44px); top: -64px;
  font-stretch: 62%; font-weight: 900; font-size: 150px; line-height: 1; color: var(--red);
}
/* English page (site/en/): the English opening quote; it sits high in its line, so the box starts lower */
html[lang="en"] .qnote__paper::before { content: "\201C"; top: 12px; }
.qnote { --qlh: 40px; }
.qnote blockquote p {
  font-stretch: 86%; font-weight: 500; font-size: clamp(21px, 1.95vw, 28px); line-height: var(--qlh);
  letter-spacing: -.003em;
}
.qnote figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: auto; padding-top: 22px; }
.qnote__name {
  font-family: var(--f-marker); font-size: 32px; line-height: 1; color: var(--red);
  rotate: -3deg; filter: url(#fx-marker); mix-blend-mode: multiply;
  will-change: transform;   /* own layer (base.css .marker): inside the note's layer Safari re-ran the
                               filter whenever the note was painted, a 35 ms frame as the deck came in */
}
.qnote figcaption small { flex-basis: 100%; font-family: var(--f-type); font-weight: 700; font-size: 14px; letter-spacing: .02em; color: var(--ink-soft); }

/* marker highlight: translucent felt-tip red that multiplies into the paper, rough ends */
.qnote mark {
  color: inherit;
  padding: 0 .14em; margin: 0 -.1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23D2253A' fill-opacity='.5' d='M3 9 C 30 6 70 7 110 5 C 150 4 178 6 197 8 C 199 16 198 26 196 34 C 160 36 110 37 70 36 C 40 35 18 35 4 33 C 2 25 1 16 3 9 Z'/%3E%3Cpath fill='%23D2253A' fill-opacity='.2' d='M8 12 C 60 10 140 9 192 12 L 191 18 C 140 15 60 16 9 18 Z'/%3E%3C/svg%3E") 0 58% / 100% 72% no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  mix-blend-mode: multiply;
  transition: background-size .7s cubic-bezier(.3, .7, .2, 1) .3s;
}

/* paper types */
.qnote--lined .qnote__paper {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .40) 0%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(90% 70% at 100% 100%, rgba(60, 40, 20, .10) 0%, rgba(60, 40, 20, 0) 72%),
    linear-gradient(90deg, transparent 30px, rgba(196, 24, 40, .45) 30px 32px, transparent 32px),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--qlh) - 1px), rgba(52, 86, 128, .17) calc(var(--qlh) - 1px) var(--qlh)) 0 var(--qrule, -7px) / 100% 100% repeat-y,
    var(--tex-white) 0 0 / 410px auto,
    var(--paper-hi);
}
.qnote--grid .qnote__paper {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .40) 0%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(90% 70% at 100% 100%, rgba(60, 40, 20, .10) 0%, rgba(60, 40, 20, 0) 72%),
    linear-gradient(90deg, rgba(52, 86, 128, .13) 1px, transparent 1px) 11px 0 / 18px 18px,
    linear-gradient(180deg, rgba(52, 86, 128, .13) 1px, transparent 1px) 0 8px / 18px 18px,
    var(--tex-white) 0 0 / 410px auto,
    #FBF9F4;
}
.qnote--kraft .qnote__paper {
  background:
    linear-gradient(135deg, rgba(255, 250, 238, .35) 0%, rgba(255, 250, 238, 0) 34%),
    radial-gradient(90% 70% at 100% 100%, rgba(60, 40, 20, .12) 0%, rgba(60, 40, 20, 0) 72%),
    var(--tex-paper) 0 0 / 600px auto,
    #EDE2CB;
  background-blend-mode: normal, normal, multiply, normal;
}
.qnote--ink .qnote__paper {
  --sh-c: 0, 0, 0;
  background:
    linear-gradient(135deg, rgba(255, 246, 230, .09) 0%, rgba(255, 246, 230, 0) 40%),
    var(--tex-ink) 0 0 / var(--tile),
    var(--ink);
  color: var(--paper-hi);
}
.qnote--ink .qnote__name { color: #E5303F; mix-blend-mode: normal; }
.qnote--ink figcaption small { color: #BDB4A4; }
/* on black stock a red marker reads as an underline stroke under white type */
.qnote--ink mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23C41828' d='M3 22 C 40 19 90 21 130 19 C 160 18 182 19 197 21 C 199 27 198 33 196 37 C 160 39 110 39 70 38 C 40 38 18 38 4 37 C 2 32 2 27 3 22 Z'/%3E%3C/svg%3E");
  background-position: 0 100%; background-size: 100% 100%;
  mix-blend-mode: normal;
}

/* ---------- controls (deck mode only) ---------- */
.qctl { display: none; }
.qctl__btn {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px; padding: 0;
  border: 3px solid var(--ink);
  background: var(--tex-white) 0 0 / 300px auto, var(--paper-hi);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink), 5px 6px 5px -1px rgba(var(--sh-c), .3);
  cursor: pointer;
  transition: translate .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.qctl__btn svg { width: 28px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.qctl__btn:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--ink), 8px 9px 8px -1px rgba(var(--sh-c), .28); color: var(--red); }
.qctl__btn:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--ink), 2px 2px 2px rgba(var(--sh-c), .3); }
.qctl__count { display: flex; align-items: baseline; gap: 8px; min-width: 112px; justify-content: center; }
.qctl__count b { font-stretch: 62%; font-weight: 900; font-size: 64px; line-height: .8; color: var(--red); font-variant-numeric: tabular-nums; }
.qctl__count span { font-family: var(--f-type); font-weight: 700; font-size: 16px; letter-spacing: .06em; color: var(--ink-soft); }
.qctl__hint { font-size: 24px; margin-left: 14px; rotate: -6deg; white-space: nowrap; }

/* ---------- trust strip: a torn strip of card taped onto the table ---------- */
.qtrust {
  position: relative; z-index: 1;
  max-width: 1180px; margin: clamp(64px, 8vw, 112px) auto 0;
  rotate: -.6deg;
  will-change: transform;   /* a layer with one GPU drop-shadow; the contact edge is ::before */
  filter: drop-shadow(6px 12px 12px rgba(var(--sh-c), .18));
}
.qtrust::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(var(--sh-c), .3); translate: .5px 1px;
  clip-path: polygon(0% 6%, 1.2% 0%, 98.6% 3%, 100% 0%, 99.2% 22%, 100% 47%, 99.1% 71%, 100% 100%, 1.4% 96%, 0% 100%, .9% 76%, 0% 52%, .8% 27%);
}
.qtrust .tape--tl { left: -26px; top: -10px; }
.qtrust .tape--tr { right: -24px; top: -12px; }
.qtrust__list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 30%),
    var(--tex-white) 0 0 / 410px auto,
    var(--paper-hi);
  clip-path: polygon(0% 6%, 1.2% 0%, 98.6% 3%, 100% 0%, 99.2% 22%, 100% 47%, 99.1% 71%, 100% 100%, 1.4% 96%, 0% 100%, .9% 76%, 0% 52%, .8% 27%);
}
.qtrust li {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 22px clamp(14px, 2vw, 28px) 22px clamp(16px, 2vw, 30px);
  font-stretch: 74%; font-weight: 800; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.15;
  text-transform: uppercase; letter-spacing: .015em;
}
.qtrust li + li { border-left: 2px dashed rgba(20, 18, 17, .28); }
.qtrust b { color: var(--red); font-weight: 900; }
.quotes .qtrust__tick { position: relative; flex: none; width: 34px; height: 30px; }
.quotes .qtrust__tick path { stroke-width: 4.5px; }

/* ==========================================================
   DECK MODE (JS on, motion allowed): one stack of notes
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.js .quotes__in {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "head deck" "ctl deck";
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 5vw, 88px);
  }
  html.js .quotes__head { grid-area: head; margin: 0; }
  html.js .qdeck {
    grid-area: deck;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
    width: 100%; max-width: 680px; margin: 26px 0 0 auto;
    padding: 0 40px 34px 0;
  }
  html.js .qnote {
    grid-area: 1 / 1; margin: 0; rotate: none;
    z-index: calc(10 - var(--d));
    --d: 0; --ox: 0px; --oy: 0px; --rot: var(--r0); --s: 1;
    transform: translate(var(--ox), var(--oy)) rotate(var(--rot)) scale(var(--s));
    transition: transform .55s var(--ease);
    touch-action: pan-y;
  }
  html.js .qnote[data-d="1"] { --d: 1; --ox: 14px; --oy: 10px; --rot: var(--r); --s: .985; }
  html.js .qnote[data-d="2"] { --d: 2; --ox: 25px; --oy: 20px; --rot: var(--r); --s: .97; }
  html.js .qnote[data-d="3"] { --d: 3; --ox: 34px; --oy: 28px; --rot: var(--r); --s: .955; }
  html.js .qnote.is-fly { z-index: 20; transition: none; }
  html.js .qnote.is-back, html.js .qnote.is-drag { transition: none; }
  html.js .qnote.is-drag { z-index: 20; cursor: grabbing; user-select: none; -webkit-user-select: none; }
  html.js .qnote.is-drag .qnote__in { filter: drop-shadow(16px 30px 28px rgba(var(--sh-c), .3)); }
  html.js .quotes.is-deck .qnote.is-top { cursor: grab; }
  html.js .quotes.is-deck .qnote.is-top.is-drag { cursor: grabbing; }
  /* the top note's highlights are drawn when it comes up; the others wait */
  html.js .quotes.is-deck .qnote:not(.is-top) mark,
  html.js .quotes.q-wait .qnote mark { background-size: 0% 72%; transition: none; }
  html.js .quotes.is-deck .qnote--ink:not(.is-top) mark,
  html.js .quotes.q-wait .qnote--ink mark { background-size: 0% 100%; }

  html.js .qctl { grid-area: ctl; display: flex; align-items: center; gap: 14px; margin-top: clamp(32px, 4vw, 56px); }
}

@media (max-width: 1180px) {
  .qnote { --qlh: 36px; --qrule: 2px; }
}

@media (max-width: 980px) {
  .qnote { --qlh: 34px; --qrule: 6px; }
  .qtrust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qtrust li:nth-child(3) { border-left: 0; }
  .qtrust li:nth-child(n+3) { border-top: 2px dashed rgba(20, 18, 17, .28); }
}

@media (max-width: 980px) and (prefers-reduced-motion: no-preference) {
  html.js .quotes__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "deck" "ctl"; grid-template-rows: auto; }
  html.js .qdeck { margin: 8px auto 0; max-width: 620px; }
  html.js .qctl { justify-content: center; margin-top: 30px; }
}

@media (max-width: 640px) {
  .quotes .sechead__title { font-size: clamp(50px, 15vw, 76px); }
  .qdeck { grid-template-columns: minmax(0, 1fr); gap: 46px; }
  .qnote:nth-child(even) { margin-top: 0; }
  .qnote__paper { padding: 70px 24px 30px 26px; }
  .qnote__paper::before { font-size: 128px; left: 18px; top: -56px; }
  .qnote { --qlh: 32px; --qrule: 0px; }
  .qnote blockquote p { font-size: 19.5px; }
  .qnote--lined .qnote__paper { background-position: 0 0, 0 0, -10px 0, 0 var(--qrule), 0 0, 0 0; }
  .qnote__name { font-size: 29px; }
  .qtrust { margin-top: 64px; rotate: -.4deg; }
  .qtrust .tape--tl { left: -10px; }
  .qtrust .tape--tr { right: -8px; }
  .qtrust__list { grid-template-columns: minmax(0, 1fr); }
  .qtrust li { padding: 15px 18px; font-size: 17px; }
  .qtrust li + li { border-left: 0; border-top: 2px dashed rgba(20, 18, 17, .28); }
}

@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  html.js .qdeck { padding: 0 26px 26px 0; }
  html.js .qnote[data-d="1"] { --ox: 9px; --oy: 8px; }
  html.js .qnote[data-d="2"] { --ox: 17px; --oy: 15px; }
  html.js .qnote[data-d="3"] { --ox: 24px; --oy: 21px; }
  html.js .qctl { gap: 10px; flex-wrap: wrap; }
  html.js .qctl__count { min-width: 92px; }
  html.js .qctl__count b { font-size: 54px; }
  html.js .qctl__hint { flex-basis: 100%; text-align: center; margin: 4px 0 0; font-size: 22px; }
}

/* ===== src/css/80-clients.css ===== */
/* ==========================================================
   80 · clients · owner: clients agent
   root: <section class="sec clients sheet-ink torn-top torn-bottom" data-section="clients">
   STATIC (no JS, reduced motion, CDN down): the logo polaroids hang in rows on a straight
   twine (a swipeable row on phones), the other names wrap as labels.
   LIVE (.clients.cl-live, set by js/80-clients.js): one sagging rope across the sheet, the
   polaroids slide along it (drag, toss, sway with scroll); the names ride a curved cut line
   (.cl-names.is-path, CSS offset-path).
   ========================================================== */

.clients {
  --pw: 264px;          /* polaroid width */
  --cl-gap: 54px;       /* space between two polaroids on the line */
  --cl-pad: 10px;       /* polaroid side border */
  --cl-chin: 50px;      /* polaroid bottom border (caption) */
  --band-h: 236px;      /* height of the names band in path mode */
  margin-top: 36px; margin-bottom: clamp(76px, 7vw, 104px);   /* table paper between the black and the red sheet */
  padding-top: clamp(72px, 8vw, 120px); padding-bottom: clamp(64px, 7vw, 108px);
}
.clients__head { margin-bottom: clamp(30px, 4vw, 56px); }

/* "drag me" marker note, only when the line can actually be dragged */
.clients__hint {
  display: none; position: absolute; right: 2%; bottom: 6px;
  align-items: center; gap: 8px; color: #E8283A; rotate: -4deg;
}
.clients__hint .marker { font-size: clamp(24px, 2.2vw, 30px); color: inherit; rotate: 0deg; }
.clients__hint svg {
  width: 74px; height: 26px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  filter: url(#fx-marker);
  will-change: transform;   /* own layer: the marker filter renders once */
}
.clients.cl-live .clients__hint { display: flex; }
.clients:not(.cl-live) .cl-stage__help { display: none; }   /* the arrows only exist in live mode */

/* ---------- the twine (static rows: one segment per polaroid, joined) ---------- */
.clients .cl-line {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 78px 26px; padding-top: 30px;
}
.clients .cl-pin { position: relative; }
.clients .cl-pin::before {
  content: ""; position: absolute; z-index: 1; top: -2px; left: -14px; right: -14px; height: 3.5px; border-radius: 2px;
  background:
    repeating-linear-gradient(112deg, rgba(92, 68, 36, .75) 0 1.3px, rgba(92, 68, 36, 0) 1.3px 4.1px),
    linear-gradient(#E4D2A8, #B99D6C 70%, #8E764F);
  box-shadow: 5px 9px 5px -1px rgba(0, 0, 0, .55);
}
.clients .cl-hang { position: relative; rotate: var(--r); transform-origin: 50% 0; }

/* ---------- wooden clothes peg with a steel spring ---------- */
.clients .cl-peg {
  position: absolute; z-index: 3; top: -27px; left: 50%; width: 17px; height: 70px; margin-left: -8.5px;
  border-radius: 3px 3px 5px 5px / 3px 3px 9px 9px;
  background:
    repeating-linear-gradient(178deg, rgba(120, 78, 38, 0) 0 2.6px, rgba(120, 78, 38, .16) 2.6px 3.4px, rgba(120, 78, 38, 0) 3.4px 6.2px),
    linear-gradient(90deg, #A47E52 0%, #E6CC9C 26%, #DDBF8D 55%, #C29D6B 78%, #8E6B42 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 244, 220, .55),
    inset -1px -1px 0 rgba(70, 42, 14, .45),
    1px 1px 1px rgba(0, 0, 0, .5),
    4px 7px 7px -1px rgba(0, 0, 0, .6);
}
/* steel spring coil */
.clients .cl-peg::before {
  content: ""; position: absolute; top: 16px; left: -4px; right: -4px; height: 10px; border-radius: 5px;
  background:
    linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .45)),
    repeating-linear-gradient(90deg, #F2F2EF 0 1.1px, #A9A9A5 1.1px 2.2px, #4D4D4B 2.2px 3.1px);
  box-shadow: 1px 2px 2px rgba(0, 0, 0, .6);
}
/* the gap between the two prongs */
.clients .cl-peg::after {
  content: ""; position: absolute; left: 7.5px; width: 2px; top: 30px; bottom: 7px; border-radius: 1px;
  background: linear-gradient(rgba(60, 36, 12, .55), rgba(60, 36, 12, .25));
}

/* ---------- instant print (white frame, wide chin) ---------- */
.clients .cl-pola {
  position: relative; margin: 6px 0 0;
  padding: var(--cl-pad) var(--cl-pad) 0;
  background: var(--tex-white) 0 0 / 410px auto, var(--paper-hi);
  color: var(--ink);
  border-radius: 1.5px;
  box-shadow:
    0 0 0 .5px rgba(0, 0, 0, .35),
    1px 2px 2px rgba(0, 0, 0, .5),
    6px 12px 12px -4px rgba(0, 0, 0, .55),
    16px 30px 34px -12px rgba(0, 0, 0, .75),
    inset 1px 1px 0 rgba(255, 255, 255, .85),
    inset -1px -1px 0 rgba(60, 40, 20, .12);
  transition: translate .35s var(--ease);
}
/* one key light from the top left; the lower right corner curls away from it */
.clients .cl-pola::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 253, 246, .22) 0%, rgba(255, 253, 246, 0) 40%),
    radial-gradient(60% 50% at 100% 100%, rgba(45, 30, 15, .16), rgba(45, 30, 15, 0) 75%);
}
.clients .cl-pola__img { display: block; position: relative; overflow: hidden; aspect-ratio: 1.6; background: #111; }
.clients .cl-pola__img img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.clients .cl-pola__img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .2);
}
/* gloss: a window reflection; slides with the swing (js sets --gl) */
.clients .cl-pola__gloss {
  position: absolute; z-index: 1; inset: -10% -80%; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, .13) 45%, rgba(255, 255, 255, .05) 52%, rgba(255, 255, 255, 0) 60%);
  mix-blend-mode: screen;
  transform: translateX(calc(var(--gl, 0) * 1%));
  will-change: transform;   /* slides with the swing every frame: its own layer, the polaroid never repaints */
}
.clients .cl-pola figcaption {
  display: flex; align-items: center; min-height: var(--cl-chin);
  padding: 4px 2px 6px;
  font-family: var(--f-type); font-weight: 700; font-size: 13.5px; line-height: 1.2; letter-spacing: -.01em;
}
.clients .cl-pola:hover { translate: 0 -3px; }

/* ---------- arrows (live only) ---------- */
.clients .cl-ctrl { display: none; }
.clients .cl-btn {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; cursor: pointer;
  background: var(--tex-white) 0 0 / 300px auto, var(--paper-hi); color: var(--ink);
  border: 0; border-radius: 2px;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .3), 1px 2px 2px rgba(0, 0, 0, .5), 5px 9px 10px -3px rgba(0, 0, 0, .6), inset 1px 1px 0 #fff;
  transition: translate .18s ease;
}
.clients .cl-btn:nth-child(1) { rotate: -3deg; }
.clients .cl-btn:nth-child(2) { rotate: 2deg; }
.clients .cl-btn:hover { translate: 0 -2px; }
.clients .cl-btn:active { translate: 1px 2px; }
.clients .cl-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- LIVE: one rope across the whole sheet ---------- */
.clients.cl-live .cl-stage {
  position: relative; margin-inline: calc(var(--gutter) * -1);
  height: calc(var(--pw) * .8 + 172px);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
}
.clients.cl-live .cl-stage.is-drag { cursor: grabbing; }
.clients.cl-live .cl-stage:focus-visible { outline-offset: -6px; }
.clients.cl-live .cl-line { display: block; position: absolute; inset: 0; max-width: none; margin: 0; padding: 0; overflow: visible; }
.clients.cl-live .cl-pin { position: absolute; left: 0; top: 0; width: var(--pw); transform-origin: 50% 0; will-change: transform; }
.clients.cl-live .cl-pin::before { display: none; }
.clients.cl-live .cl-hang { rotate: none; }
.clients .cl-rope { display: none; }
.clients.cl-live .cl-rope { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; will-change: transform; }
.clients .cl-rope path { fill: none; stroke-linecap: round; }
/* the rope's shadow on the sheet: a soft wide stroke under a narrow one (was a Gaussian blur filter,
   re-run on every frame the rope bounced) */
.clients .cl-rope__shade { stroke: rgba(0, 0, 0, .17); stroke-width: 9; transform: translate(6px, 11px); }
.clients .cl-rope__shade--core { stroke: rgba(0, 0, 0, .28); stroke-width: 4.5; }
.clients .cl-rope__base { stroke: #C3A876; stroke-width: 3.6; }
.clients .cl-rope__twist { stroke: rgba(88, 64, 34, .8); stroke-width: 3.6; stroke-dasharray: 1.3 3; }
.clients .cl-rope__hi { stroke: rgba(255, 246, 222, .55); stroke-width: 1; transform: translate(-.6px, -1px); }
.clients.cl-live .cl-ctrl { display: flex; gap: 12px; position: absolute; z-index: 5; right: var(--gutter); bottom: 0; }

/* ---------- other clients: labels (static: a wrapped row) ---------- */
.clients .cl-names {
  max-width: var(--maxw); margin: clamp(48px, 6vw, 80px) auto 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
}
.clients .cl-names__lead { font-size: 34px; color: #F2EEE6; }
.clients .cl-names__cut { display: none; }
.clients .cl-names__list { display: flex; flex-wrap: wrap; gap: 12px; }
.clients .cl-tag {
  font-stretch: 72%; font-weight: 800; font-size: clamp(17px, 1.6vw, 22px); line-height: 1; text-transform: uppercase; white-space: nowrap;
  padding: 9px 13px 8px;
}
.clients .cl-tag--nocaps { text-transform: none; }
/* white label stock */
.clients .cl-tag:nth-child(4n+1) {
  background: var(--tex-white) 0 0 / 300px auto, var(--paper-hi); color: var(--ink); rotate: -2deg;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .3), 1px 2px 2px rgba(0, 0, 0, .5), 4px 7px 8px -3px rgba(0, 0, 0, .55), inset 1px 1px 0 #fff;
}
/* red stock */
.clients .cl-tag:nth-child(4n+2) {
  background: var(--tex-white) 0 0 / 300px auto, var(--red); background-blend-mode: multiply; color: #fff; rotate: 1.5deg;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, .5), 4px 7px 8px -3px rgba(0, 0, 0, .55), inset 1px 1px 0 rgba(255, 255, 255, .25);
}
/* chalk outline straight on the black sheet */
.clients .cl-tag:nth-child(4n+3) { border: 2px solid rgba(250, 247, 240, .9); color: var(--paper-hi); rotate: -1deg; }
/* masking tape with a typewritten name (two layers of the scan: the tape is nearly opaque on black) */
.clients .cl-tag:nth-child(4n+4) {
  /* the tape's contact shadow is baked into tape-sh-b (a CSS drop-shadow re-ran on every frame the label moved) */
  background: url("tex/tape-sh-b.webp?v=99e52745") center / 100% 100% no-repeat, url("tex/tape-sh-b.webp?v=99e52745") center / 100% 100% no-repeat;
  color: #24201B; rotate: 2.4deg; padding: 11px 22px 10px;
  font-family: var(--f-type); font-stretch: 100%; font-weight: 700; font-size: clamp(15px, 1.3vw, 18px);
}

/* ---------- LIVE: names ride a curved cut line ---------- */
.clients .cl-names.is-path { display: block; max-width: none; margin-inline: calc(var(--gutter) * -1); }
.clients .cl-names.is-path .cl-names__lead { margin: 0 0 -18px var(--gutter); position: relative; z-index: 2; width: fit-content; }
.clients .cl-names.is-path .cl-names__band {
  position: relative; height: var(--band-h);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
}
.clients .cl-names.is-path .cl-names__band.is-drag { cursor: grabbing; }
.clients .cl-names.is-path .cl-names__cut { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.clients .cl-names__cut path { fill: none; stroke: rgba(250, 247, 240, .3); stroke-width: 1.5; stroke-dasharray: 9 8; }
.clients .cl-names.is-path .cl-names__list { position: absolute; inset: 0; display: block; }
.clients .cl-names.is-path .cl-tag {
  position: absolute; left: 0; top: 0;
  /* the tilt goes into offset-rotate: the rotate property would pivot around the box's start position */
  rotate: none;
  offset-path: var(--cl-path); offset-anchor: 50% 50%; offset-rotate: auto var(--tilt, 0deg); offset-distance: 0px;
  will-change: transform;   /* moved along the path every frame: compositing only */
}
.clients .cl-names.is-path .cl-tag:nth-child(4n+1) { --tilt: -3deg; }
.clients .cl-names.is-path .cl-tag:nth-child(4n+2) { --tilt: 4deg; }
.clients .cl-names.is-path .cl-tag:nth-child(4n+3) { --tilt: -1deg; }
.clients .cl-names.is-path .cl-tag:nth-child(4n+4) { --tilt: 3deg; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .clients { --pw: 236px; --cl-gap: 46px; }
  .clients .cl-line { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 74px 30px; }
}

@media (max-width: 980px) {
  .clients__hint { position: static; margin-top: 14px; }
}

@media (max-width: 640px) {
  .clients { --pw: 184px; --cl-gap: 30px; --cl-pad: 8px; --cl-chin: 42px; --band-h: 168px; }
  /* static: a swipeable row on the twine */
  .clients .cl-line {
    display: flex; gap: var(--cl-gap);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 34px var(--gutter) 34px; scroll-padding-inline: var(--gutter);
  }
  .clients .cl-line::-webkit-scrollbar { display: none; }
  .clients .cl-pin { flex: 0 0 var(--pw); scroll-snap-align: center; }
  .clients .cl-pin::before { left: calc(var(--cl-gap) / -2); right: calc(var(--cl-gap) / -2); }
  .clients .cl-peg { top: -20px; width: 13px; height: 52px; margin-left: -6.5px; }
  .clients .cl-peg::before { top: 12px; height: 8px; }
  .clients .cl-peg::after { left: 5.5px; top: 23px; }
  .clients .cl-pola figcaption { font-size: 12px; }
  .clients.cl-live .cl-stage { height: calc(var(--pw) * .8 + 156px); }
  .clients .cl-names__lead { font-size: 28px; }
  .clients .cl-tag { font-size: 16px; padding: 8px 11px 7px; }
  .clients .cl-tag:nth-child(4n+4) { font-size: 14px; padding: 10px 18px 9px; }
}

/* ===== src/css/90-contact.css ===== */
/* ==========================================================
   90 · contact · owner: contact agent
   root: <section class="sec contact sheet-red torn-top" id="kontakt" data-section="contact">
   Red sheet: headline, phone strip, Instagram line, name. Below, a postcard of white card stock holds the form:
   message side (stickers + ruled message) | address side (postage stamp, postmark, sender lines).
   States: .pc__field.is-bad / .is-ok (validation), .pc__form.is-busy / .is-done (js/90-contact.js).
   ========================================================== */

.contact {
  margin-top: clamp(40px, 5vw, 80px);
  padding-bottom: clamp(80px, 9vw, 140px);
}
.contact__in {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  grid-template-areas: "head call" "card card";
  gap: clamp(30px, 4vw, 60px) clamp(40px, 6vw, 96px); align-items: end;
}

/* ---------- headline ---------- */
.contact .ct-head { grid-area: head; }
.contact .ct-title {
  font-stretch: 62%; font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: clamp(88px, 13vw, 196px); line-height: .82; letter-spacing: -.01em; color: var(--ink);
  margin: calc(22px - .12em) 0 22px; padding-top: .12em;
  -webkit-mask: var(--mask-ink) 0 0 / 384px 384px; mask: var(--mask-ink) 0 0 / 384px 384px;   /* printed into the red stock */
}
.contact .ct-title__l { display: block; }
.contact .ct-lead { font-size: clamp(18px, 1.5vw, 21px); max-width: 34ch; }

/* ---------- phone, second channel, name ---------- */
.contact .ct-call { grid-area: call; position: relative; padding-bottom: 6px; }
.contact .ct-call__note { display: flex; align-items: flex-end; gap: 2px; margin: 0 0 -6px 4%; color: var(--ink); }
.contact .ct-call__note .marker { color: var(--ink); font-size: clamp(24px, 2.1vw, 30px); rotate: -5deg; }
.contact .ct-call__arrow {
  width: 66px; height: 52px; flex: none; overflow: visible; margin-bottom: -22px;
  fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  filter: url(#fx-marker);
  will-change: transform;   /* own layer: the marker filter renders once */
}
/* the number on a torn strip of black paper */
.contact .ct-tel {
  display: block; width: fit-content; max-width: 100%;
  margin: 10px 0 22px;
  background: var(--tex-black) 0 0 / 100% 100% no-repeat;
  color: #fff; text-decoration: none; white-space: nowrap;
  font-stretch: 68%; font-weight: 900; font-size: clamp(40px, 4.7vw, 68px); line-height: 1;
  padding: .2em .36em .17em .28em; rotate: -1.6deg;
  filter: drop-shadow(1px 1px .5px rgba(40, 0, 0, .35)) drop-shadow(5px 9px 7px rgba(40, 0, 0, .4));
  transition: rotate .3s var(--ease), translate .3s var(--ease);
  will-change: transform;   /* own layer: its two shadows render once, not with every tile of the red sheet */
}
.contact .ct-tel:hover { rotate: 0deg; translate: 0 -2px; }
.contact .ct-alt { margin: 0 0 18px 2%; font-size: clamp(17px, 1.4vw, 19px); }
.contact .ct-alt a {
  display: inline-flex; align-items: center; min-height: 44px; gap: 4px;
  color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.contact .ct-alt a:hover { text-decoration-color: var(--paper-hi); }
/* signed note: a slip of white stock taped onto the red sheet, the signature in blue ballpoint.
   No filter or blend mode here: the ink repaints while it is written, keep that paint cheap. */
.contact .ct-sign {
  --sh-c: 52, 4, 8;
  position: relative; width: min(100%, 336px); margin: 14px 0 0 2%;
  padding: 18px 22px 15px 18px;
  background: var(--tex-white) 0 0 / 410px auto, #FBF9F3;
  color: var(--ink);
  rotate: -2deg;
  box-shadow: 0 0 0 .5px rgba(var(--sh-c), .14), 1px 2px 2px rgba(var(--sh-c), .3), 6px 12px 16px -6px rgba(var(--sh-c), .42);
  will-change: transform;   /* the pen repaints only this small layer while it writes */
}
.contact .ct-sign .tape { top: -15px; }
.contact .ct-sign__ink { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 1124 / 586; overflow: visible; margin: 0 0 -12px -2px; }
.contact .ct-name {
  margin: 0; padding-top: 8px; border-top: 1.5px solid rgba(20, 18, 17, .5);
  font-family: var(--f-type); font-size: 13.5px; line-height: 1.45; color: var(--ink-soft);
}

/* ---------- the postcard ---------- */
.contact .pc { grid-area: card; width: 100%; max-width: 1200px; justify-self: center; margin-top: clamp(12px, 2.4vw, 36px); }
.contact .pc__card {
  --focus: var(--ink); --sh-c: 52, 4, 8;
  position: relative; rotate: -.7deg;
  will-change: transform;   /* rotated: own layer, painted upright once (see 30-work.css .wcard) */
  background: var(--tex-white) 0 0 / 410px auto, var(--paper-hi);
  color: var(--ink);
  padding: clamp(28px, 3.4vw, 48px);
  box-shadow: var(--sh-rest);
}
/* key light from the top left, a soft fall-off to the lower right */
.contact .pc__card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(130deg, rgba(255, 253, 246, .5) 0%, rgba(255, 253, 246, 0) 38%),
    radial-gradient(70% 60% at 100% 100%, rgba(60, 30, 15, .08), rgba(60, 30, 15, 0) 70%);
}
.contact .pc__form { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr); }
.contact .pc__msg, .contact .pc__addr { transition: opacity .45s ease, filter .45s ease; }
.contact .pc__msg { padding-right: clamp(26px, 3.4vw, 52px); }
.contact .pc__addr { position: relative; padding-left: clamp(26px, 3.4vw, 52px); border-left: 1.5px solid rgba(20, 18, 17, .6); }
.contact .pc__spine {
  position: absolute; left: -15px; top: 50%; translate: 0 -50%;
  writing-mode: vertical-rl; rotate: 180deg;
  font-family: var(--f-type); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap;
  color: rgba(20, 18, 17, .5); background: none;
}
.contact .pc__title {
  font-stretch: 62%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(42px, 4vw, 60px); line-height: .9; margin-bottom: 20px;
}

/* ---------- stickers (checkbox chips; services preselects value "Mesačný paušál") ---------- */
.contact .chips { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.contact .chips legend {
  float: left; width: 100%; padding: 0; margin-bottom: 12px;
  font-family: var(--f-type); font-weight: 700; font-size: 13.5px; letter-spacing: .07em; text-transform: uppercase;
}
.contact .chips legend small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-soft); margin-left: 6px; }
.contact .chips label { position: relative; display: inline-flex; cursor: pointer; }
.contact .chips input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.contact .chips span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px 14px 9px 12px; border: 1.5px dashed rgba(20, 18, 17, .55); border-radius: 9px;
  font-stretch: 78%; font-weight: 800; font-size: 15.5px; line-height: 1; letter-spacing: .02em; text-transform: uppercase;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .2s, rotate .25s var(--ease), translate .2s var(--ease);
}
/* plus while it waits on the sheet */
.contact .chips span::before {
  content: ""; flex: none; width: 10px; height: 10px;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}
.contact .chips label:hover span { border-style: solid; translate: 0 -1px; }
/* checked: a die-cut vinyl sticker stuck onto the card (white cut margin, soft shadow) */
.contact .chips input:checked + span {
  background: var(--tex-white) 0 0 / 300px auto, var(--red); background-blend-mode: multiply;
  color: #fff; border: 1.5px solid transparent; rotate: var(--r);
  box-shadow: 0 0 0 3.5px #FFFDF8, 0 0 0 4px rgba(20, 18, 17, .14), 2px 4px 5px rgba(60, 20, 10, .32), 6px 10px 12px -6px rgba(60, 20, 10, .3);
  animation: contact-stick .36s var(--ease);
}
.contact .chips label:nth-child(even) input:checked + span { background: var(--tex-black) 50% 50% / 560px auto, var(--ink); }
.contact .chips input:checked + span::before {
  width: 6px; height: 11px; margin: -3px 2px 0 1px; background: none;
  border-right: 2.6px solid currentColor; border-bottom: 2.6px solid currentColor; rotate: 42deg;
}
.contact .chips input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 6px; }
@keyframes contact-stick { 0% { scale: 1.16; } 55% { scale: .95; } 100% { scale: 1; } }

/* ---------- writing lines ---------- */
.contact .pc__field { position: relative; margin-bottom: 14px; }
.contact .pc__field label, .contact .pc__k {
  display: block; font-family: var(--f-type); font-weight: 700; font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft);
}
.contact .pc__field label small { font-weight: 400; letter-spacing: .02em; text-transform: none; margin-left: 4px; }
.contact .pc__field input {
  display: block; width: 100%; min-height: 46px;
  font-family: var(--f-display); font-size: 19px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  padding: 8px 34px 5px 2px;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.contact .pc__field--msg textarea {
  display: block; width: 100%; min-height: 200px; resize: vertical;
  font-family: var(--f-display); font-size: 18px; line-height: 32px; color: var(--ink);
  border: 0; border-radius: 0; padding: 0 30px 0 2px; margin-top: 6px;
  background: repeating-linear-gradient(transparent 0 30px, rgba(20, 18, 17, .34) 30px 32px) 0 0 / 100% 32px local, transparent;
  transition: background-color .15s;
}
.contact .pc__field input::placeholder, .contact .pc__field textarea::placeholder { color: #8A827A; }
.contact .pc__field input:focus { outline: none; border-bottom-color: var(--red); box-shadow: 0 2px 0 var(--red); background-color: rgba(196, 24, 40, .05); }
.contact .pc__field textarea:focus {
  outline: none; background-color: rgba(196, 24, 40, .045);
  background-image: repeating-linear-gradient(transparent 0 30px, rgba(196, 24, 40, .7) 30px 32px);
}
/* a teacher's red pen under a wrong line */
.contact .pc__field.is-bad input {
  border-bottom-color: transparent; box-shadow: none; background-color: rgba(196, 24, 40, .06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 4c4-4 8-4 12 0s8 4 12 0' fill='none' stroke='%23C41828' stroke-width='2.2'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: 0 100%; background-size: 24px 8px;
}
.contact .pc__field.is-bad textarea { background-color: rgba(196, 24, 40, .06); background-image: repeating-linear-gradient(transparent 0 30px, rgba(196, 24, 40, .85) 30px 32px); }
.contact .pc__err {
  font-family: var(--f-type); font-weight: 700; font-size: 13.5px; line-height: 1.35; color: var(--red-dk);
  margin-top: 6px;
}
.contact .pc__err:empty { display: none; }
.contact .pc__sug {
  font: inherit; color: var(--ink); background: none; border: 0; padding: 4px 0; margin: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
/* a pen tick once a line is right */
.contact .pc__field.is-ok::after {
  content: ""; position: absolute; right: 9px; bottom: 15px; width: 7px; height: 14px;
  border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); rotate: 40deg;
  animation: contact-tick .3s var(--ease);
}
.contact .pc__field--msg.is-ok::after { bottom: auto; top: 2px; }
@keyframes contact-tick { from { scale: .2; opacity: 0; } to { scale: 1; opacity: 1; } }

/* ---------- address side ---------- */
.contact .pc__post { position: relative; height: 132px; margin-bottom: 4px; }
.contact .pc__stampw { position: absolute; right: -4px; top: -6px; rotate: 3deg; will-change: transform; filter: drop-shadow(.5px .5px .3px rgba(48, 33, 18, .35)) drop-shadow(2px 3px 3px rgba(48, 33, 18, .22)); }
.contact .pc__stamp {
  position: relative; display: block; width: 112px; padding: 7px; background: #FBF8F1;
  /* perforated edge */
  -webkit-mask: radial-gradient(circle, transparent 3.1px, #000 3.6px) -5px -5px / 10px 10px, linear-gradient(#000 0 0) center / calc(100% - 9px) calc(100% - 9px) no-repeat;
  mask: radial-gradient(circle, transparent 3.1px, #000 3.6px) -5px -5px / 10px 10px, linear-gradient(#000 0 0) center / calc(100% - 9px) calc(100% - 9px) no-repeat;
}
.contact .pc__stamp img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #0D0C0C; }
.contact .pc__stamp i {
  position: absolute; left: 0; right: 0; top: 10px; text-align: center;
  font-family: var(--f-type); font-style: normal; font-weight: 700; font-size: 7.5px; letter-spacing: .24em; text-transform: uppercase; color: #F1ECE2;
}
.contact .pc__mark { right: 64px; top: 12px; width: 200px; aspect-ratio: 260 / 200; color: #1E1C24; rotate: -9deg; opacity: .86; }
.contact .pc__mark-mid { fill: currentColor; font-family: var(--f-display); font-stretch: 70%; font-weight: 800; font-size: 22px; }
.contact .pc__mark-sub { fill: currentColor; font-family: var(--f-type); font-weight: 700; font-size: 14px; }
.contact .pc__k { margin-bottom: 2px; color: var(--red); }
.contact .pc__k--from { margin-top: 8px; margin-bottom: 6px; }
.contact .pc__to {
  font-style: normal; font-family: var(--f-type); font-size: 16px; line-height: 32px;
  margin: 0 0 18px; padding: 0 2px;
  background: repeating-linear-gradient(transparent 0 30px, rgba(20, 18, 17, .26) 30px 31.5px, transparent 31.5px 32px);
}
.contact .pc__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact .pc__send { margin-top: 12px; }
.contact .pc__form.is-busy .pc__send { cursor: progress; opacity: .75; }
.contact .pc__status { font-family: var(--f-type); font-weight: 700; font-size: 14.5px; line-height: 1.4; color: var(--red-dk); margin-top: 12px; }
.contact .pc__status:empty { margin: 0; }
.contact .pc__status a { color: inherit; }
.contact .pc__gdpr { margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.contact .pc__gdpr a { color: var(--ink); font-weight: 700; text-decoration-color: var(--red); text-underline-offset: 3px; }

/* ---------- after sending: stamp + note ---------- */
.contact .pc__form.is-done .pc__msg, .contact .pc__form.is-done .pc__addr { opacity: .4; filter: saturate(.6); }
.contact .pc__form.is-done .pc__status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the note says it; the live region still announces it */
.contact .pc__ok { left: 28%; top: 52%; width: min(400px, 46%); aspect-ratio: 320 / 120; transform: translate(-50%, -50%) rotate(-9deg); color: #C41828; }
.contact .pc__ok[hidden] { display: none; }
.contact .pc__ok-txt { fill: currentColor; font-family: var(--f-display); font-stretch: 62%; font-weight: 900; font-style: italic; font-size: 66px; letter-spacing: .03em; }
.contact .pc__done {
  position: absolute; z-index: 7; right: -22px; top: 50%; width: min(440px, 50%);
  translate: 0 -50%; rotate: 1.6deg;
  filter: drop-shadow(1px 2px 2px rgba(60, 20, 10, .3)) drop-shadow(8px 16px 16px rgba(60, 20, 10, .3));
}
.contact .pc__done[hidden] { display: none; }
.contact .pc__done-in {
  background: var(--tex-white) 0 0 / 410px auto, #FFFDF8; color: var(--ink);
  clip-path: var(--torn);
  padding: 40px clamp(24px, 3vw, 36px) 32px;
}
.contact .pc__done-title { font-stretch: 62%; font-weight: 900; font-size: clamp(34px, 3vw, 44px); line-height: .95; text-transform: uppercase; }
.contact .pc__done-title:focus { outline: none; }
.contact .pc__done-txt { margin-top: 12px; font-size: 17px; line-height: 1.5; }
.contact .pc__done-txt a { font-weight: 700; color: var(--ink); text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.contact .pc__done-act { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .contact .pc__form { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .contact__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "call" "card"; align-items: start; }
  .contact .ct-call { margin-top: -6px; }
}

@media (max-width: 760px) {
  .contact .pc__form { grid-template-columns: minmax(0, 1fr); }
  .contact .pc__msg { padding-right: 0; }
  .contact .pc__addr { padding-left: 0; border-left: 0; border-top: 1.5px solid rgba(20, 18, 17, .6); margin-top: 26px; padding-top: 22px; }
  .contact .pc__spine { display: none; }
  .contact .pc__ok { left: 50%; top: 55%; width: min(360px, 84%); }   /* near the note and the send button */
  .contact .pc__done { left: 4%; right: 4%; width: auto; top: auto; bottom: 8%; translate: none; }
}

@media (max-width: 640px) {
  .contact .ct-title { font-size: clamp(84px, 27vw, 120px); }
  .contact .ct-tel { font-size: clamp(34px, 10.6vw, 46px); }
  .contact .ct-call__note { margin-left: 0; }
  .contact .ct-alt { margin-left: 0; }
  .contact .ct-sign { margin-left: 0; width: min(100%, 300px); padding: 15px 18px 13px 15px; }
  .contact .pc__card { rotate: -.4deg; padding: 24px 18px 26px; }
  .contact .pc__title { font-size: 44px; }
  .contact .chips { gap: 9px; }
  .contact .chips span { font-size: 14.5px; padding: 10px 12px 9px 10px; }
  /* phones: straight from the message to the sender fields, no postage and address in between */
  .contact .pc__post, .contact .pc__k, .contact .pc__to { display: none; }
  .contact .pc__addr { margin-top: 22px; padding-top: 18px; }
}

/* ===== src/css/99-footer.css ===== */
/* ==========================================================
   99 · footer · owner: footer agent
   root: <footer class="foot sheet-ink torn-top" data-section="footer">
   Black sheet, kept short (the contact postcard is the last big visual): logo + marker thank-you,
   pills (socials, side projects), contact / business identity / privacy columns, the base row.
   ========================================================== */

.foot {
  color: var(--paper);
  padding: clamp(60px, 5.2vw, 80px) var(--gutter) 24px;
  overflow-x: clip;
}
.foot__in { max-width: var(--maxw); margin: 0 auto; }

/* ---------- head: logo + marker thank-you | pills ---------- */
.foot__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px 48px; }
.foot .foot__thanks { margin-top: 10px; }
.foot .foot__thanks .marker { display: inline-block; color: #F2EEE6; font-size: clamp(24px, 2.2vw, 32px); rotate: -3deg; }

/* ---------- pills ---------- */
.foot .ft-pills { display: flex; flex-wrap: wrap; gap: 14px 30px; }
.foot .ft-pills ul { display: flex; flex-wrap: wrap; gap: 12px; }
.foot .ft-pill {
  display: inline-flex; align-items: center; min-height: 46px; padding: 12px 20px 11px;
  background: var(--tex-white) 0 0 / 300px auto, var(--paper-hi); color: var(--ink);
  border-radius: 999px; text-decoration: none; rotate: var(--r);
  font-stretch: 78%; font-weight: 800; font-size: 16px; line-height: 1; letter-spacing: .03em; text-transform: uppercase;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .3), 1px 2px 2px rgba(0, 0, 0, .5), 5px 9px 10px -4px rgba(0, 0, 0, .6), inset 1px 1px 0 #fff;
  transition: rotate .25s var(--ease), translate .25s var(--ease), background-color .2s, color .2s;
}
.foot .ft-pill::after {
  content: ""; width: 11px; height: 11px; margin-left: 10px; flex: none; translate: 0 -1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 9.5l7-7M4 2.5h5.5V8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 9.5l7-7M4 2.5h5.5V8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.foot .ft-pill:hover { rotate: 0deg; translate: 0 -3px; background-color: var(--ink); background-image: none; color: var(--paper-hi); box-shadow: 0 0 0 2px var(--paper-hi), 5px 9px 10px -4px rgba(0, 0, 0, .6); }
.foot .ft-pill--red { background: var(--tex-white) 0 0 / 300px auto, var(--red); background-blend-mode: multiply; color: #fff; box-shadow: 1px 2px 2px rgba(0, 0, 0, .5), 5px 9px 10px -4px rgba(0, 0, 0, .6), inset 1px 1px 0 rgba(255, 255, 255, .25); }
.foot .ft-pill--tape {
  border-radius: 0; padding: 13px 24px 12px;
  background: url("tex/tape-sh-a.webp?v=08c53856") center / 100% 100% no-repeat, url("tex/tape-sh-a.webp?v=08c53856") center / 100% 100% no-repeat;
  color: #24201B; font-family: var(--f-type); font-stretch: 100%; font-weight: 700; font-size: 15px; letter-spacing: .02em;
  box-shadow: none; filter: drop-shadow(1px 2px 1.5px rgba(0, 0, 0, .55));
}
.foot .ft-pill--tape:hover { box-shadow: none; background: url("tex/tape-sh-a.webp?v=08c53856") center / 100% 100% no-repeat, url("tex/tape-sh-a.webp?v=08c53856") center / 100% 100% no-repeat; color: var(--red-dk); }

/* ---------- columns ---------- */
.foot__cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
  margin-top: clamp(32px, 3.4vw, 48px); padding-top: clamp(22px, 2.2vw, 30px);
  border-top: 1px solid rgba(238, 232, 220, .16);
}
.foot__brand { display: flex; align-items: center; gap: 24px; }
.foot__logo { display: block; flex: none; width: 104px; height: auto; rotate: -4deg; box-shadow: 5px 5px 0 var(--red), 7px 9px 8px rgba(0, 0, 0, .5); }
.foot__claim { font-family: var(--f-type); font-weight: 700; font-size: 15px; line-height: 1.45; color: #D8CFBE; }
.foot__h { font-family: var(--f-type); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #CDBE98; margin-bottom: 10px; }
.foot__cols ul li { margin-bottom: 4px; font-size: 16px; }
.foot__legal { font-size: 15px; line-height: 1.55; color: #E4DCCD; }
.foot__cols a, .foot__top { text-decoration: none; display: inline-block; padding: 3px 0; }
.foot__cols a:hover, .foot__top:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.foot__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  border-top: 1px solid rgba(238, 232, 220, .18); margin-top: clamp(22px, 2.2vw, 30px); padding-top: 14px;
  font-family: var(--f-type); font-size: 14px; color: #BDB4A4;
}

@media (max-width: 980px) {
  .foot__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .foot { padding-bottom: 88px; }        /* room for the call bar on phones */
  .foot__head { gap: 28px; }
  .foot__logo { width: 84px; }
  .foot__claim { font-size: 14px; }
  .foot .ft-pills { gap: 12px; }
  .foot .ft-pill { font-size: 15px; padding: 12px 16px 11px; }
  .foot .ft-pill--tape { font-size: 14px; padding: 13px 20px 12px; }
  .foot__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 20px; }
  .foot__cols > :nth-child(2) { grid-column: 1 / -1; order: 3; }
  .foot__cols ul li { margin-bottom: 0; }
  .foot__cols a, .foot__top { padding: 10px 0; }   /* 44 px rows for thumbs */
}