/* ==============================================================================
   VELACCIO V2 — base: fuentes, tokens, temas, tipografía, botones, etiquetas.
   Provenance ref: VEL-PROV-9K4XQ7M2

   EL SISTEMA
   Pocas piezas, repetidas siempre igual (el método de Darkroom):
     · dos fondos: data-theme="light" (blanco) y data-theme="dark" (casi negro);
       "grey" solo para superficies suaves. La cabecera copia el tema de lo que
       tiene debajo.
     · dos voces: serif (Mackinac) para las frases que importan, grotesca
       (Acid) para todo lo demás. Tamaños contenidos: el aire hace el trabajo.
     · un botón partido (texto + flecha), un botón suave y etiquetas finas.
     · el toque Velaccio: la luz cálida (rojo → naranja → amarillo). Como luz
       (amanecer al pie de la portada, ocaso en lo alto de las secciones
       oscuras), en la placa de la flecha de los botones y como fondo de una
       sola sección por página (el trabajo) y del pie.
   ============================================================================== */

@font-face { font-family: "Acid"; src: url(../../fonts/1e6b37f27206a928a8d2.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Acid"; src: url(../../fonts/afef5c56776532b51181.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Acid"; src: url(../../fonts/e861a4b28072a7543250.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Mackinac"; src: url(../../fonts/75074b2cc39dc5353d06.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mackinac"; src: url(../../fonts/f2d01e571c719e55f630.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
/* The cookie banner (vel-consent.css) asks for "Acid Grotesk" by name — same files. */
@font-face { font-family: "Acid Grotesk"; src: url(../../fonts/1e6b37f27206a928a8d2.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Acid Grotesk"; src: url(../../fonts/afef5c56776532b51181.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Acid Grotesk"; src: url(../../fonts/e861a4b28072a7543250.woff2) format("woff2"); font-weight: 700; font-display: swap; }

/* Metric-matched fallbacks so nothing jumps when the webfonts swap in. */
@font-face { font-family: "Acid Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 101%; }
@font-face { font-family: "Mackinac Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 97%; }

:root {
  --vel-provenance: "VEL-PROV-9K4XQ7M2";

  --c-white: #FFFFFF;
  --c-black: #0D0D0D;
  --c-dark: #101010;
  --c-grey: #F3F3F1;
  --c-field: #EFEFEF;

  /* the Velaccio light: vermilion → orange → yellow. The red leans warmer than
     a pure red (hue 13° rather than 5°) so the ramp starts closer to its
     neighbour, while staying its own colour — there are still 11° between it
     and --c-orange, which reads as a clear step. --ember is the warm tone that
     still works as text on white (4.7:1). */
  --c-red: #F04A1C;
  --c-orange: #FF7417;
  --c-yellow: #FFC53A;
  --c-ember: #D23F19;
  /* The warm light is a grainy mesh, not a ramp: a yellow ground, red lobes
     lying on it, and an orange halo round each lobe where the two meet.
     Painted in layers, top first:
       1. grain — SVG fractal noise turned into sparse dark specks (the colour
          matrix keeps only the darker half of the noise, so it textures the
          colour without dulling it). Tiles at its own 180px size.
       2. three red lobes, tall and narrow, each with a solid core before it
          fades, so the red reads as red and not as a tint;
       3. an orange halo under each lobe, wider than it;
       4. the brand yellow, which is what shows in the gaps.
     The positions and sizes were generated (jittered slots, so the lobes
     spread out instead of clumping) and the one that looked right was kept.
     Percent sizes are relative to each box, so it stretches with whatever it
     paints — wide on the footer, squarer on a card — and stays the same mesh.
     Black text never drops below 5.7:1 on it (the red is the darkest point). */
  --warm-mesh:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .8 -.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(32% 87% at 15% 64%, rgba(240, 74, 28, 1) 19%, rgba(240, 74, 28, 0) 78%),
    radial-gradient(31% 87% at 58% 34%, rgba(240, 74, 28, 1) 23%, rgba(240, 74, 28, 0) 72%),
    radial-gradient(28% 88% at 76% 69%, rgba(240, 74, 28, 1) 24%, rgba(240, 74, 28, 0) 73%),
    radial-gradient(54% 115% at 22% 74%, rgba(255, 116, 23, .95), rgba(255, 116, 23, 0) 72%),
    radial-gradient(48% 115% at 61% 29%, rgba(255, 116, 23, .95), rgba(255, 116, 23, 0) 72%),
    radial-gradient(43% 115% at 76% 69%, rgba(255, 116, 23, .95), rgba(255, 116, 23, 0) 76%),
    linear-gradient(var(--c-yellow), var(--c-yellow));
  /* every warm surface is the mesh. The two names stay because the rules use
     both (--warm-x on full-width sections, --warm on everything else). */
  --warm: var(--warm-mesh);
  --warm-x: var(--warm-mesh);
  /* as light: on white it rises from the bottom with the red at the core
     (dawn); on dark it falls from the top with the yellow at the core (dusk).
     Light on dark is brightest in the middle, light on paper is densest. */
  --dawn:
    radial-gradient(24% 44% at 47% 100%, rgba(240, 74, 28, .9), rgba(240, 74, 28, 0) 78%),
    radial-gradient(42% 70% at 53% 100%, rgba(255, 116, 23, .78), rgba(255, 116, 23, 0) 78%),
    radial-gradient(30% 52% at 22% 100%, rgba(255, 144, 32, .34), rgba(255, 144, 32, 0) 76%),
    radial-gradient(68% 100% at 50% 100%, rgba(255, 197, 58, .5), rgba(255, 197, 58, 0) 80%);
  /* on dark the red ring stays narrow and thin: spread wide, red over black
     goes brown. The centres are nudged a few percent apart and a small
     tangerine blob sits off to one side, so the light looks cast rather than
     drawn with a compass — the red keeps its original width and alpha. */
  --glow:
    radial-gradient(18% 36% at 52% 0%, rgba(255, 197, 58, .95), rgba(255, 197, 58, 0) 80%),
    radial-gradient(32% 60% at 46% 0%, rgba(255, 116, 23, .85), rgba(255, 116, 23, 0) 80%),
    radial-gradient(22% 40% at 72% 0%, rgba(255, 144, 32, .42), rgba(255, 144, 32, 0) 78%),
    radial-gradient(48% 84% at 50% 0%, rgba(240, 74, 28, .5), rgba(240, 74, 28, 0) 80%);

  --f-sans: "Acid", "Acid Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Mackinac", "Mackinac Fallback", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);

  --gutter: 16px;
  --maxw: 1184px;
  --hd-h: 64px;
  --sec: clamp(96px, 11vw, 176px);
  --r: 8px;
  --r-l: 12px;

  interpolate-size: allow-keywords;
}
@media (min-width: 768px) { :root { --gutter: 24px; --hd-h: 72px; } }
@media (min-width: 1280px) { :root { --gutter: 32px; } }

/* ── temas ─────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg: var(--c-white); --fg: var(--c-black); --fg-2: #5E5E5E; --fg-3: #8A8A8A;
  --line: rgba(13, 13, 13, .12); --soft: #EDEDED; --soft-h: #E2E2E2; --field: var(--c-field);
  --inv-bg: var(--c-black); --inv-fg: #FFFFFF;
}
[data-theme="grey"] {
  --bg: var(--c-grey); --fg: var(--c-black); --fg-2: #5A5A5A; --fg-3: #858585;
  --line: rgba(13, 13, 13, .13); --soft: #E4E4E1; --soft-h: #D9D9D6; --field: #FFFFFF;
  --inv-bg: var(--c-black); --inv-fg: #FFFFFF;
}
[data-theme="dark"] {
  --bg: var(--c-dark); --fg: #FFFFFF; --fg-2: #A1A1A1; --fg-3: #7D7D7D;
  --line: rgba(255, 255, 255, .14); --soft: #1F1F1F; --soft-h: #2A2A2A; --field: #252525;
  --inv-bg: #FFFFFF; --inv-fg: var(--c-black);
}
/* the accent: the work section and the footer. Everything on it is black —
   secondary greys would fail on the red end. */
[data-theme="warm"] {
  --bg: var(--c-orange); --fg: var(--c-black); --fg-2: var(--c-black); --fg-3: rgba(13, 13, 13, .78);
  --line: rgba(13, 13, 13, .22); --soft: rgba(255, 255, 255, .32); --soft-h: rgba(255, 255, 255, .5); --field: rgba(255, 255, 255, .4);
  --inv-bg: var(--c-black); --inv-fg: #FFFFFF;
}
[data-theme] { background-color: var(--bg); color: var(--fg); }
[data-theme="warm"] { background-image: var(--warm-x); }

/* ── reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hd-h) + 16px); }
body {
  margin: 0; min-height: 100vh; font-family: var(--f-sans); font-size: 1rem; line-height: 1.5;
  background: var(--c-white); color: var(--c-black);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; margin: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--c-yellow); color: #0D0D0D; }
[hidden] { display: none !important; }

.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: -60px; z-index: 1000; background: var(--c-black); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: .875rem; transition: top .2s; }
.skip:focus { top: 12px; }

/* ── layout ────────────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: none; }
.wrap--narrow { max-width: calc(760px + var(--gutter) * 2); }
.sec { position: relative; padding-block: var(--sec); }
.sec--top0 { padding-top: 0; }
.sec--tight { padding-block: clamp(64px, 7vw, 112px); }

/* ── tipografía ────────────────────────────────────────────────────────────── */
/* Serif statements: the only "big" type on the site, and still not big. */
.t-hero { font-family: var(--f-serif); font-size: clamp(1.5rem, 1rem + 1.35vw, 2rem); line-height: 1.32; letter-spacing: -.02em; text-wrap: balance; }
.t-h2 { font-family: var(--f-serif); font-size: clamp(1.375rem, 1.1rem + .75vw, 1.75rem); line-height: 1.35; letter-spacing: -.02em; text-wrap: balance; }
.t-h2s { font-family: var(--f-sans); font-size: clamp(1.375rem, 1.1rem + .75vw, 1.75rem); line-height: 1.35; letter-spacing: .01em; text-wrap: balance; }
.t-h3 { font-family: var(--f-sans); font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); line-height: 1.25; letter-spacing: .01em; }
.t-h3s { font-family: var(--f-serif); font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); line-height: 1.3; letter-spacing: -.01em; }
.t-quote { font-family: var(--f-serif); font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem); line-height: 1.4; letter-spacing: -.015em; text-wrap: pretty; }
.t-num { font-family: var(--f-sans); font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.5rem); line-height: 1; letter-spacing: -.02em; font-feature-settings: "tnum" 1; }
.t-p { font-size: 1rem; line-height: 1.5; letter-spacing: .02em; text-wrap: pretty; }
.t-s { font-size: .875rem; line-height: 1.45; letter-spacing: .03em; text-wrap: pretty; }
.t-xs { font-size: .75rem; line-height: 1.4; letter-spacing: .02em; }
.t-serif-p { font-family: var(--f-serif); font-size: 1rem; line-height: 1.55; }
.c2 { color: var(--fg-2); }
.c3 { color: var(--fg-3); }
.mw-s { max-width: 34ch; }
.mw-m { max-width: 46ch; }
.mw-l { max-width: 60ch; }
.center { text-align: center; margin-inline: auto; }

/* ① — the numbered circle */
.nb {
  display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px currentColor; font-size: .6875rem; line-height: 1; font-feature-settings: "tnum" 1;
}

/* ── botones ───────────────────────────────────────────────────────────────── */
/* Split button: a label plate and an arrow plate, 2px apart. */
.bt {
  --b-bg: var(--inv-bg); --b-fg: var(--inv-fg);
  display: inline-flex; align-items: stretch; gap: 2px; height: 38px;
  font-size: .8125rem; line-height: 1; letter-spacing: .01em; white-space: nowrap; color: var(--b-fg);
  -webkit-tap-highlight-color: transparent;
}
.bt__t, .bt__a {
  display: inline-flex; align-items: center; justify-content: center; background: var(--b-bg); border-radius: 6px;
  transition: background-color .25s var(--ease-soft), transform .35s var(--ease);
}
.bt__t { padding: 0 20px 0 14px; min-width: 88px; justify-content: flex-start; }
/* the arrow plate carries the Velaccio light — except on the warm sections,
   where it would disappear into the background */
.bt__a { width: 38px; flex: none; overflow: hidden; background: var(--warm); color: var(--c-black); }
[data-theme="warm"] .bt__a { background: var(--b-bg); color: var(--b-fg); }
.bt__a svg { width: 13px; height: 13px; transition: transform .45s var(--ease); }
.bt:hover .bt__a svg, .bt:focus-visible .bt__a svg { transform: rotate(45deg); }
.bt:hover .bt__t, .bt:focus-visible .bt__t { transform: translateX(-2px); }
.bt:active .bt__t, .bt:active .bt__a { transform: scale(.97); }
.bt--lg { height: 44px; font-size: .875rem; }
.bt--lg .bt__a { width: 44px; }
.bt--full { width: 100%; }
.bt--full .bt__t { flex: 1; justify-content: center; }

/* soft pill ("ver servicio") */
.bs {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 6px;
  background: var(--soft); color: var(--fg); font-size: .8125rem; line-height: 1; letter-spacing: .01em; white-space: nowrap;
  transition: background-color .2s var(--ease-soft);
}
.bs:hover, .bs:focus-visible { background: var(--soft-h); }
.bs svg { width: 12px; height: 12px; }

/* outlined pill */
.bo {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--fg); color: var(--fg); font-size: .8125rem; line-height: 1; white-space: nowrap;
  transition: background-color .2s var(--ease-soft), color .2s var(--ease-soft);
}
.bo:hover, .bo:focus-visible { background: var(--fg); color: var(--bg); }

/* text link: underline draws in */
.tl { position: relative; display: inline-flex; align-items: center; gap: .35em; }
.tl::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.tl:hover::after, .tl:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.tl svg { width: 11px; height: 11px; }
.u { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ── etiquetas ─────────────────────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 3px;
  background: color-mix(in srgb, currentColor 11%, transparent); font-size: .6875rem; line-height: 1; letter-spacing: .01em; white-space: nowrap;
}
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
/* client / concept — the truth label, always visible where a brand appears */
.kind { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 6px; border-radius: 3px; font-size: .6875rem; line-height: 1; white-space: nowrap; }
.kind--glass { background: rgba(13, 13, 13, .5); color: #fff; box-shadow: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* chips: what a service includes (inBeat's pills). Rounded on purpose, so
   they never read as buttons. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips > * { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--c-grey); color: var(--c-black); font-size: .8125rem; letter-spacing: .005em; white-space: nowrap; }
.chips--s { gap: 4px; }
.chips--s > * { height: 24px; padding: 0 9px; font-size: .6875rem; }

/* ── medios ────────────────────────────────────────────────────────────────── */
/* the drawing that stands in for a piece: this website in a browser frame
   (web development) */
.art { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.art--site { background: linear-gradient(160deg, #F3F3F1, #E4E4E1); }
.art__browser { width: 80%; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .45), 0 0 0 1px rgba(13, 13, 13, .08); }
.art__bar { display: flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; background: #EFEFEF; color: #6E6E6E; font-size: .5625rem; }
.art__bar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(13, 13, 13, .18); }
.art__bar span { margin-left: 6px; padding: 1px 8px; border-radius: 3px; background: #fff; }
.art__browser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

.media { position: relative; overflow: hidden; background: #1A1A1A; isolation: isolate; }
.media > img, .media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media > video { opacity: 0; transition: opacity .6s var(--ease-soft); }
.media > video.is-on { opacity: 1; }

/* ── marcadores: datos pendientes ──────────────────────────────────────────── */
/* [DATO REAL], [LOGO CLIENTE REAL]… — visible on purpose, so nothing that still
   needs the team's data can ship looking finished. */
.ph {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  font-family: var(--f-sans); font-size: .75rem; letter-spacing: .02em; line-height: 1.2;
  padding: .3em .55em; border-radius: 4px; vertical-align: middle; white-space: nowrap;
  color: #6b21a8; background: rgba(167, 139, 250, .16); box-shadow: inset 0 0 0 1px rgba(109, 40, 217, .32);
}
[data-theme="dark"] .ph, .qa[open] .ph { color: #e9d5ff; background: rgba(167, 139, 250, .14); box-shadow: inset 0 0 0 1px rgba(233, 213, 255, .36); }
.ph-box {
  display: grid; place-items: center; text-align: center; padding: 16px;
  border: 1px dashed rgba(109, 40, 217, .45); border-radius: var(--r);
  background: repeating-linear-gradient(135deg, rgba(167, 139, 250, .07) 0 10px, transparent 10px 20px);
  color: #6b21a8; font-size: .8125rem;
}
[data-theme="dark"] .ph-box { color: #e9d5ff; border-color: rgba(233, 213, 255, .4); }

/* Review mode (?revision in the URL, or Alt+R) */
/* the viewer's "vídeo con marca de agua" note is for the team, not visitors */
html:not(.is-review) .viewer__wm { display: none; }
html.is-review [data-verify] { outline: 2px dashed #f59e0b; outline-offset: 3px; position: relative; }
html.is-review [data-verify]::after {
  content: "VERIFICAR · " attr(data-verify); position: absolute; left: 0; top: -22px; z-index: 5;
  font: 600 10px/1 var(--f-sans); letter-spacing: .04em; padding: 5px 7px; border-radius: 4px;
  background: #f59e0b; color: #111; white-space: nowrap; pointer-events: none; text-transform: none;
}
html.is-review .ph, html.is-review .ph-box { outline: 2px solid #a855f7; outline-offset: 2px; }
.review-badge {
  position: fixed; left: 12px; bottom: 12px; z-index: 900; padding: 8px 12px; border-radius: 8px;
  background: #f59e0b; color: #111; font: 600 12px/1.2 var(--f-sans); box-shadow: 0 6px 24px rgba(0,0,0,.2);
}

/* ── entrada ───────────────────────────────────────────────────────────────── */
/* Quiet: a short rise and fade. Only with JS up (html.js). */
.js [data-rv] { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-rv].is-in { opacity: 1; transform: none; }

/* ── transiciones entre páginas ────────────────────────────────────────────── */
/* Cross-document View Transitions: no JS, nothing that can hang. The header
   stays put; the new page wipes up over the old one, which is never darkened
   (no crossfades on this site). A piece that links to its case grows into the
   case's hero (view-transition-name: case-hero). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .6s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease-io) both; }
::view-transition-group(hd) { animation-duration: 0s; }
::view-transition-group(case-hero) { animation-duration: .7s; animation-timing-function: var(--ease-io); }
@keyframes vt-out { to { transform: translateY(-4vh); } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-rv] { opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* No scrollbar, on the page or on the panels that scroll on their own (the
   menu, the booking sheet): it still scrolls by wheel, touch and keyboard.
   It also means the page no longer jumps sideways when the menu locks it. */
html, .menu, .book__sheet { scrollbar-width: none; }
html::-webkit-scrollbar, .menu::-webkit-scrollbar, .book__sheet::-webkit-scrollbar { display: none; }

/* Lenis (smooth scroll, desktop only) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }