/* Raw'Onion — v2 site
   Tokens mirror the live site (styles.css): black ground, Inter Tight,
   same easing. Each service layer overrides --l-* with its own palette. */
/* Inter Tight, self-hosted (no request to Google: GDPR). One variable
   file per subset covers every weight used (300–800). */
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(fonts/inter-tight-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #000;
  --text: #E2E6E3;
  --dim: rgba(226, 230, 227, .56);
  --accent: #C2457F; /* site accent lifted for contrast on black */
  --font: 'Inter Tight', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: 28px; /* same side inset as the original site (--nav-pad-x) */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
@media (max-width: 640px) { :root { --gutter: 16px; } }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
/* Touch screens: no grey tap flash, and no focus ring left on a button
   after tapping it (Safari keeps it until you tap elsewhere). Keyboards on
   a fine pointer keep the ring. */
html { -webkit-tap-highlight-color: transparent; }
/* Controls (not content): a long press doesn't select their label or pop
   iOS's link preview, and a tap fires at once (no double-tap zoom wait).
   Hover states sit in (hover: hover) and (pointer: fine) queries, so a tap
   on a phone never leaves one stuck on. */
button, .glass {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; touch-action: manipulation;
}
/* (The ring rule sits at the end of this file, so it wins over every
   component's own ring.) */

/* ---------- Glass pills ----------
   Frosted capsule in the spirit of madebykota.com: a translucent tint with
   backdrop blur, a hairline dark ring, soft inner shading on the sides
   (::before) and a thin white rim light top and bottom (::after). */
.glass {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px; border-radius: 999px;
  font: 400 14px/20px var(--font); letter-spacing: -.005em; /* Kota: 14/20, 400, -0.07px */
  color: #fff; text-decoration: none;
  background: rgba(153, 153, 153, .2);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 0; cursor: pointer;
  /* One hairline ring (half a CSS px = one device pixel on retina). */
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .26);
  transition: background .3s, transform .5s var(--ease);
}
.glass::before, .glass::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
}
.glass::before {
  z-index: -1;
  box-shadow: inset -20px 0 20px -26px rgba(0, 0, 0, .42), inset 20px 0 20px -26px rgba(0, 0, 0, .42);
}
.glass::after {
  opacity: .55;
  box-shadow:
    inset 0 4px 1px -4px #fff, inset 0 -4px 1px -4px #fff,
    inset 0 1px 0 rgba(255, 255, 255, .88), inset 0 -1px 0 rgba(255, 255, 255, .88),
    inset 0 40px 10px -40px rgba(255, 255, 255, .96), inset 0 -40px 10px -40px rgba(255, 255, 255, .96);
}
@media (hover: hover) and (pointer: fine) { .glass:hover { background: rgba(153, 153, 153, .32); } }
.glass:active { transform: scale(.97); transition: background .3s, transform .16s var(--ease); } /* quick in, the .5s settle on release */
.glass:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 999px; }
.glass--round { width: 48px; padding: 0; }
.glass--lg { height: 56px; padding: 0 30px; }

/* Light grounds (About, the light service layers, the top bar over them).
   The dark-ground recipe above nearly vanishes on white, so here the glass
   reads the way Kota's does on its light pages: a visibly darker grey body
   graded top to bottom, shading just inside the top edge, a crisp white
   rim along the bottom and side vignetting (no drop shadow). */
.topbar .glass.is-on-light,
.about .glass,
.drawer .glass,
.core .glass,
.split .glass {
  background: linear-gradient(180deg, rgba(110, 110, 110, .3) 0%, rgba(140, 140, 140, .2) 55%, rgba(150, 150, 150, .15) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .32);
}
.topbar .glass.is-on-light::before,
.about .glass::before,
.drawer .glass::before,
.core .glass::before,
.split .glass::before {
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, .1),
    inset 14px 0 14px -12px rgba(0, 0, 0, .13),
    inset -14px 0 14px -12px rgba(0, 0, 0, .13);
}
.topbar .glass.is-on-light::after,
.about .glass::after,
.drawer .glass::after,
.core .glass::after,
.split .glass::after {
  opacity: 1;
  box-shadow:
    inset 0 -1.5px 0 #fff,
    inset 0 -8px 9px -6px rgba(255, 255, 255, .85),
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 7px 8px -7px rgba(255, 255, 255, .45);
}
@media (hover: hover) and (pointer: fine) {
.topbar .glass.is-on-light:hover,
.about .glass:hover,
.drawer .glass:hover,
.core .glass:hover,
.split .glass:hover {
  background: linear-gradient(180deg, rgba(110, 110, 110, .36) 0%, rgba(140, 140, 140, .26) 55%, rgba(150, 150, 150, .2) 100%);
}
}
.topbar .glass.is-on-light:focus-visible,
.about .glass:focus-visible,
.drawer .glass:focus-visible,
.core .glass:focus-visible,
.split .glass:focus-visible { outline-color: #111; }

/* ---------- Cookie consent ----------
   The drop-down menu's frosted panel, small, bottom left. Both answers are
   the same button, side by side: refusing is as easy as accepting. */
.cookie {
  position: fixed; z-index: 48; left: var(--gutter); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); /* clear of the home indicator */
  width: min(320px, calc(100vw - 32px)); padding: 16px 18px 16px;
  border-radius: 20px; color: #fff;
  background: rgba(38, 38, 40, .62);
  -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2);
  box-shadow:
    0 0 0 .5px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(255, 255, 255, .08);
  transform-origin: 0 100%;
  transform: translateY(8px) scale(.96); opacity: 0;
  transition: transform .5s var(--ease), opacity .3s;
}
.cookie[hidden] { display: none; }
.cookie.is-open { transform: none; opacity: 1; }
.cookie__title { margin: 0 0 4px; font: 400 12px/16px var(--font); letter-spacing: -.005em; }
.cookie__text { margin: 0; font: 400 12px/16px var(--font); letter-spacing: -.005em; color: rgba(255, 255, 255, .7); }
.cookie__text a { color: #fff; text-underline-offset: 3px; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.cookie__btn { flex: 1 1 auto; height: 32px; padding: 0 12px; white-space: nowrap; font-size: 12px; line-height: 16px; }
/* On the card's dark glass, the buttons are a lighter, clearer glass. */
.cookie .glass {
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .28);
}
.cookie .glass::before { box-shadow: none; }
.cookie .glass::after { opacity: .7; }
@media (hover: hover) and (pointer: fine) { .cookie .glass:hover { background: rgba(255, 255, 255, .2); } }
.cookie__main[hidden], .cookie__prefs[hidden] { display: none; }
/* Customise: one switch per category. */
.cookie__cat {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.cookie__cat:first-child { padding-top: 4px; }
.cookie__cat-name { margin: 0; font: 400 12px/16px var(--font); color: #fff; }
.cookie__cat-desc { margin: 2px 0 0; font: 400 12px/16px var(--font); color: rgba(255, 255, 255, .6); }
.cookie__switch {
  position: relative; flex: none; width: 40px; height: 24px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .18); cursor: pointer; transition: background .25s;
}
.cookie__switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .25s var(--ease);
}
.cookie__switch[aria-checked="true"] { background: rgba(255, 255, 255, .6); }
.cookie__switch[aria-checked="true"]::after { transform: translateX(16px); }
.cookie__switch:disabled { cursor: default; opacity: .55; }
.cookie__switch:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 640px) { .cookie { left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .cookie { transition: none; } }
.footer__cookies { cursor: pointer; }

/* ---------- Top bar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 20px var(--gutter);
  /* viewport-fit=cover: keep clear of the notch and rounded corners. */
  padding: max(20px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 20px max(var(--gutter), env(safe-area-inset-left));
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar__logo { justify-self: start; }
.topbar__menu { justify-self: center; }
.topbar__right { justify-self: end; display: flex; align-items: center; gap: 8px; }

/* Language switch: lives in the drop-down menu, a hairline capsule with
   the current language filled in (site.js). */
.menu__lang {
  order: -1; display: inline-flex; padding: 2px; gap: 2px; border-radius: 999px; /* first, on the left */
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .35);
}
.menu__lang-opt {
  min-width: 36px; height: 24px; padding: 0 10px; border: 0; border-radius: 999px; cursor: pointer;
  font: 400 12px/16px var(--font); letter-spacing: .02em;
  color: rgba(255, 255, 255, .64); background: transparent; transition: color .3s, background .3s;
}
@media (hover: hover) and (pointer: fine) { .menu__lang-opt:hover { color: #fff; } }
.menu__lang-opt[aria-pressed="true"] { color: #111; background: #fff; }
.menu__lang-opt:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Loader (loader.js) ----------
   Light grey screen: "Loading…" left, the counter right, one solid black
   silhouette in the middle. At the end the onion zooms in to fill the
   screen, then the loader fades out over the hero. */
.loader {
  position: fixed; inset: 0; z-index: 100;
  display: none; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--gutter); background: #F3F4F6; color: #111;
  overflow: hidden; transition: opacity .4s ease;
}
.loader.is-done { opacity: 0; pointer-events: none; }
.loader__text, .loader__count { opacity: var(--text-out, 1); font: 400 14px/20px var(--font); letter-spacing: -.005em; text-transform: uppercase; }
.loader__count { justify-self: end; font-variant-numeric: tabular-nums; }
.loader__stage { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.loader__shape { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* loader.js resizes it to zoom, keeping it vector-sharp */
.loader__shape { fill: #000; opacity: 0; }
/* Shown only while loader.js runs it (never without JS). */
/* Still shown while it fades out (.is-done), after is-loading is gone. */
html.is-loading .loader, .loader.is-done { display: grid; }
html.is-loading, html.is-loading body { overflow: hidden; }

/* Shared pause/play icon for every looping animation (WCAG 2.2.2). */
.pause-icon { position: relative; width: 10px; height: 12px; }
.pause-icon::before, .pause-icon::after { content: ''; position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 1px; background: currentColor; }
.pause-icon::before { left: 0; } .pause-icon::after { right: 0; }
[aria-pressed="true"] > .pause-icon::before { width: 0; height: 0; left: 1px; background: none; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
[aria-pressed="true"] > .pause-icon::after { display: none; }

/* Keyboard: first Tab stop jumps past the opening screen. */
.skip-link {
  position: fixed; z-index: 120; left: 16px; top: 16px; padding: 10px 16px; border-radius: 999px;
  background: #fff; color: #111; font: 500 14px/20px var(--font); text-decoration: none;
  transform: translateY(-200%); transition: transform .3s var(--ease);
}
.about:focus { outline: none; } /* skip-link target */
.skip-link:focus { transform: none; outline: 2px solid #111; outline-offset: 2px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Top bar as plain type (all pages) ----------
   The mark is a small cube with alternating ink and orange R ⎯ O diamonds
   turned by the scroll (site.js); "Menu" is a word. Both read the ground
   under them (.is-on-light, site.js): white on dark, ink on light. */
.topbar__mark, .topbar__word { color: #fff; --inv: #111; transition: none; }
.topbar__mark.is-on-light, .topbar__word.is-on-light { color: #111; --inv: #fff; }
.topbar__mark { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px; text-decoration: none; }
/* A small cube (ink, orange, ink, orange diamonds) turned by the page's scroll.
   Each face is placed by the script round the cube's axis, the ones turned
   away hidden, so nothing pops in or gets cut by its neighbours. */
.cube { position: relative; width: 26px; height: 26px; }
.cube__f { position: absolute; inset: 0; display: grid; place-items: center; transform-origin: 50% 50% -13px; will-change: transform, opacity; }
.tmark { position: relative; display: grid; place-items: center; width: 16px; height: 16px; }
.tmark::before { content: ''; position: absolute; inset: 0; background: currentColor; transform: rotate(45deg); }
/* One diamond face of two is the orange signature, whatever the ground. */
.tmark--red::before { background: #F43C00; }
.tmark--red b { color: #fff; }
.tmark b { position: relative; font: 600 5.5px/1 var(--font); letter-spacing: .02em; color: var(--inv); white-space: nowrap; }
.topbar__word { padding: 12px 6px; border: 0; background: none; font: 500 14px/20px var(--font); letter-spacing: .01em; cursor: pointer; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a.topbar__word:hover { text-decoration: underline; text-underline-offset: 3px; } }
.topbar__right .topbar__word { margin-right: -6px; }
.topbar__word[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 3px; }
.topbar__mark:focus-visible, .topbar__word:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }


/* ---------- Drop-down menu: the onion ----------
   The menu is cut to the onion silhouette (assets/onion-shape.svg, 800 x
   1000): the blur sits on .menu itself, with the mask, so the glass follows
   the shape. Its stem rises just under "Menu / Close"; the links sit in the
   bulb, centred. Sizes follow --ow, the onion's width.
   Glass (.menu__glass, four layers): fill, (unused), inner shade along the
   outline (onion-shade.svg), then a sheen on the bulb's shoulder and a shade
   at its base; on the dark glass only, a very faint rim (onion-rim.svg).
   Dark glass and white type by default; over a light ground (.is-light, set
   from the ground under the menu by site.js / the commerces page) pale glass
   and ink type.
   Opening: it grows from the word (a clip opening from the top, 0.75 s,
   decelerating), the links last, one after the other; closing draws it back
   up, quicker (0.4 s). CSS transitions, so it can be interrupted. */
.menu {
  --ow: min(480px, calc((100svh - 80px) * .72), calc(100vw * 1.25));
  position: fixed; z-index: 49; left: 50%;
  top: calc(68px - var(--ow) * .0375); width: var(--ow); height: calc(var(--ow) * 1.25);
  padding: calc(var(--ow) * .61) calc(var(--ow) * .26) 0;
  color: #fff; text-align: center;
  -webkit-mask: url(assets/onion-shape.svg) center / 100% 100% no-repeat; mask: url(assets/onion-shape.svg) center / 100% 100% no-repeat;
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  transform: translateX(-50%); visibility: hidden;
  clip-path: inset(0 0 100% 0); transition: clip-path .4s cubic-bezier(.55, 0, .75, .2), visibility 0s linear .4s;
}
.menu.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .75s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.menu__glass { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.menu > :not(.menu__glass) { position: relative; z-index: 1; }
.menu__glass i { position: absolute; inset: 0; }
.menu__glass i:nth-child(1) { background: rgba(26, 26, 28, .74); }
.menu__glass i:nth-child(2) { display: none; }
.menu__glass i:nth-child(3) { background: url(assets/onion-shade.svg) center / 100% 100% no-repeat; }
.menu__glass i:nth-child(4) {
  background: url(assets/onion-rim.svg) center / 100% 100% no-repeat,
    radial-gradient(38% 9% at 50% 53%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)),
    radial-gradient(42% 11% at 50% 85%, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0));
}
.menu.is-light { color: #111; }
.menu.is-light .menu__glass i:nth-child(1) { background: rgba(244, 244, 244, .62); }
.menu.is-light .menu__glass i:nth-child(3) { background: url(assets/onion-shade-light.svg) center / 100% 100% no-repeat; }
.menu.is-light .menu__glass i:nth-child(4) {
  background: radial-gradient(38% 9% at 50% 53%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
    radial-gradient(42% 11% at 50% 85%, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0));
}
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list a {
  display: block; padding: calc(var(--ow) * .006) 0;
  font: 400 calc(var(--ow) * .031)/1.25 var(--font); letter-spacing: -.01em; color: inherit; text-decoration: none;
  transition: opacity .3s;
}
@media (hover: hover) and (pointer: fine) { .menu__list a:hover { opacity: .65; } }
.menu__list a:active { opacity: .5; transition: opacity .1s; }
/* The way to the businesses page (or back to the studio), with the R ⎯ O diamond. */
.menu__offer {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: calc(var(--ow) * .018); padding: calc(var(--ow) * .016) 0; border-top: 1px solid rgba(255, 255, 255, .16);
  font: 400 calc(var(--ow) * .025)/1.3 var(--font); color: inherit; text-decoration: none; transition: opacity .3s;
}
.menu.is-light .menu__offer { border-top-color: rgba(0, 0, 0, .12); }
.menu__offer span:first-child { display: inline-flex; align-items: center; }
.menu__offer span:first-child::before { content: ''; flex: none; width: 23px; height: 23px; margin: -6px 9px -6px -3px; background: url(assets/ro-diamond.svg) center / contain no-repeat; }
.menu__offer span:last-child { display: none; }
@media (hover: hover) and (pointer: fine) { .menu__offer:hover { opacity: .65; } }
.menu__offer:active { opacity: .5; }
.menu__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; padding-top: calc(var(--ow) * .016); }
.menu__links a { font: 400 12px/16px var(--font); letter-spacing: -.005em; color: rgba(255, 255, 255, .6); text-decoration: none; transition: color .3s; }
.menu.is-light .menu__links a { color: rgba(17, 17, 17, .6); }
@media (hover: hover) and (pointer: fine) {
  .menu__links a:hover { color: #fff; }
  .menu.is-light .menu__links a:hover, .menu.is-light .menu__lang-opt:hover { color: #111; }
}
.menu__links a:active, .menu__lang-opt:active { opacity: .6; }
.menu__lang-opt { height: 22px; min-width: 32px; font-size: 11px; }
.menu.is-light .menu__lang { box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .3); }
.menu.is-light .menu__lang-opt { color: rgba(17, 17, 17, .6); }
.menu.is-light .menu__lang-opt[aria-pressed="true"] { color: #fff; background: #111; }
.menu a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
.menu.is-light a:focus-visible, .menu.is-light .menu__lang-opt:focus-visible { outline-color: #111; }
/* The links arrive after the onion has grown, one after the other. */
.menu__list li, .menu__offer, .menu__links { opacity: 0; transform: translateY(8px); transition: opacity .15s, transform .15s; }
.menu.is-open .menu__list li, .menu.is-open .menu__offer, .menu.is-open .menu__links { opacity: 1; transform: none; transition: opacity .4s ease-out, transform .5s cubic-bezier(.22, 1, .36, 1); }
.menu.is-open .menu__list li:nth-child(1) { transition-delay: .3s; }
.menu.is-open .menu__list li:nth-child(2) { transition-delay: .34s; }
.menu.is-open .menu__list li:nth-child(3) { transition-delay: .38s; }
.menu.is-open .menu__list li:nth-child(4) { transition-delay: .42s; }
.menu.is-open .menu__list li:nth-child(5) { transition-delay: .46s; }
.menu.is-open .menu__offer { transition-delay: .5s; }
.menu.is-open .menu__links { transition-delay: .54s; }
@media (prefers-reduced-motion: reduce) {
  .menu, .menu.is-open, .menu__list li, .menu__offer, .menu__links { transition: none !important; }
}

/* Each top-bar pill switches to dark ink when the colour right under it is
   light (.is-on-light, set per pill by site.js), so a pill over the black
   reel card stays white even while the page around it is light. */
.topbar .glass { transition: color .4s; }
.topbar .glass.is-on-light { color: #111; }
.topbar__logo.is-on-light img { filter: invert(1); }

/* ---------- About (opening screen, after madebykota.com) ----------
   Kota type scale: label 12/16, lede 44/52, stat label 14/20,
   number 180/164, description 20/28. */
.about {
  position: relative; min-height: 100svh;
  display: grid; grid-template-columns: 34.7% 1fr;
  padding: clamp(104px, 15vh, 160px) var(--gutter) clamp(48px, 9vh, 96px); /* sized by the screen's height too, so it all fits */
  background: #fff; color: #111;
}
.about__media { position: relative; }
.about__card {
  position: relative; width: min(310px, 62%); aspect-ratio: 16 / 9;
  margin-top: 8px; background: #000; overflow: hidden;
}
/* The About card reuses the Graphic Design wall and camera, scaled to this slot. */
.about__card .wall__cap { left: 12px; right: 12px; bottom: 8px; gap: 2px 6px; font-size: 12px; line-height: 14px; }
.about__card .wall__count { font-size: 10px; line-height: 12px; }
.about__arrows { position: absolute; z-index: 3; left: 0; bottom: 0; display: flex; gap: 8px; } /* above the figures, which overlap them on small screens */
.about .glass { color: #111; }
.about__arrows .glass span { font-size: 18px; line-height: 1; }
.about__body { display: flex; flex-direction: column; max-width: 920px; }
.about__eyebrow { margin: 0 0 16px; font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: -.005em; }
.about__lede {
  margin: 0; font-size: clamp(28px, min(3.05vw, 5.2vh), 44px); line-height: 1.18; font-weight: 400; letter-spacing: -.02em;
}
.about__intro { margin: 24px 0 0; max-width: 900px; text-wrap: balance; font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: -.005em; color: rgba(17, 17, 17, .7); }
.about__stats { margin-top: auto; padding-top: clamp(48px, 10vh, 120px); display: grid; }
.about__stat {
  grid-area: 1 / 1;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  opacity: 0; pointer-events: none;
  transition: opacity .45s ease; /* a plain cross-fade: entries never move */
}
.about__stat.is-active { opacity: 1; pointer-events: auto; }
.about__label { margin: 0 0 20px; font-size: 14px; line-height: 20px; font-weight: 400; color: rgba(17, 17, 17, .6); letter-spacing: -.005em; }
.about__num {
  margin: 0; font-size: clamp(96px, min(12.5vw, 20vh), 180px); line-height: .91; font-weight: 400; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.about__desc { margin: 0 0 8px; max-width: 340px; font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: -.005em; }

/* Opening reveal: lede and stat rise in once on load. */
@media (prefers-reduced-motion: no-preference) {
  .about__eyebrow, .about__lede, .about__intro, .about__stats, .about__media { animation: aboutRise 1.1s var(--ease) both; }
  .about__lede { animation-delay: .08s; }
  .about__intro { animation-delay: .12s; }
  .about__stats { animation-delay: .2s; }
  .about__media { animation-delay: .14s; }
}
@keyframes aboutRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Phones and tablets: one column, arrows beside the figures. */
@media (max-width: 1024px) {
  .about { grid-template-columns: 1fr; padding: 96px var(--gutter) 40px; gap: 32px; }
  /* Arrows place against the section, so the column itself must not be a
     positioning box (its rise animation would make it one): animate the
     card instead. */
  .about__media { position: static; animation: none; }
  @media (prefers-reduced-motion: no-preference) { .about__card { animation: aboutRise 1.1s var(--ease) .14s both; } }
  .about__card { width: min(62%, 420px); margin: 0; }
  /* Arrows sit at the bottom right, beside the figures they step through. */
  .about__arrows { left: auto; right: var(--gutter); bottom: 48px; }
  .about__stats { padding-top: 48px; }
  .about__stat { padding-right: 112px; }
  .about__stat { flex-direction: column; align-items: flex-start; gap: 16px; }
  .about__desc { font-size: 16px; line-height: 24px; }
  .about__intro { margin-top: 16px; font-size: 16px; line-height: 24px; }
}
/* Phones: the card spans the full width, gutter to gutter. */
@media (max-width: 767px) { .about__card { width: 100%; } }

/* ---------- Intro ---------- */
.intro {
  min-height: 100svh; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 120px var(--gutter) 48px;
  position: relative;
}
.intro__title {
  margin: 0; font-weight: 800; letter-spacing: -.045em; line-height: .88;
  font-size: clamp(56px, 13vw, 220px);
}
.intro__title .line { overflow: visible; } /* letters fly in from anywhere */
.intro__title, .intro__sub { position: relative; z-index: 2; }
.intro__hint { z-index: 2; }
/* Resting slot of the poster, beside the title; layers.js animates it from
   the whole screen down to here (box size, so the image stays sharp). */
.intro__media {
  position: absolute; z-index: 1; margin: 0; overflow: hidden; border-radius: 8px;
  right: var(--gutter); bottom: 48px; width: min(30vw, 460px); aspect-ratio: 4 / 3;
}
.intro__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
@media (max-width: 860px) {
  /* Just above the title (its two lines are 1.76 × the title size). */
  .intro__media { bottom: calc(132px + 1.76 * clamp(56px, 13vw, 220px)); width: 56vw; }
}
.intro__title .ch { display: inline-block; opacity: 0; will-change: transform, opacity; }
.is-static .intro__title .ch { opacity: 1; }
.intro__sub { margin: 28px 0 0; font-size: clamp(16px, 1.6vw, 20px); color: var(--dim); }
.intro__hint {
  position: absolute; right: var(--gutter); bottom: 48px; margin: 0;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.intro__hint::after { content: ' ↓'; }

/* ---------- Peel stage ---------- */
.peel__stage {
  position: relative;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.layer {
  position: absolute; inset: 0;
  background: var(--l-bg);
  color: var(--l-ink);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.layer + .layer { visibility: hidden; } /* layers.js reveals them */

.layer--landing   { --l-bg: #FFFFFF; --l-ink: #111111; --l-accent: #111111; --l-dim: rgba(17, 17, 17, .64); }
.layer--marketing { --l-bg: #FFFFFF; --l-ink: #0F1720; --l-accent: #0F1720; --l-dim: rgba(15, 23, 32, .64); }
.layer--motion    { --l-bg: #FFFFFF; --l-ink: #17131C; --l-accent: #17131C; --l-dim: rgba(23, 19, 28, .64); }
.layer--graphic   { --l-bg: #FFFFFF; --l-ink: #1A1410; --l-accent: #1A1410; --l-dim: rgba(26, 20, 16, .64); }

.layer__inner {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  padding: 96px var(--gutter) 64px;
  transform-origin: 50% 60%;
  will-change: transform;
}
.layer__text { position: relative; z-index: 2; max-width: 520px; }

.layer__eyebrow {
  margin: 0 0 20px;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--l-dim);
}
.layer__title {
  margin: 0 0 24px;
  font-size: clamp(52px, 7.2vw, 128px);
  font-weight: 800; letter-spacing: -.05em; line-height: .88;
  color: var(--l-accent);
}
/* Padding + negative margin keep italic overhangs out of the clip. */
.line { display: block; overflow: hidden; padding: 0 .12em .06em 0; margin-right: -.12em; }
.line > span { display: inline-block; }

/* ---------- Outro: FAQ + closing call ----------
   Kota's light grey ground for both sections. As on madebykota.com, the
   ground turns black through one long, still gradient that starts in the
   lower part of the closing section and runs on into the footer. */
.outro { background: #EFEFEF; color: #111; }

/* FAQ (after madebykota.com): title 64/72, anthracite cards (#2E2E2E), 24px radius,
   questions and answers 16/24. */
/* One full screen on black, content centred in it. */
.faq {
  background: #000; color: #fff;
  min-height: 100vh; min-height: 100svh; padding: 112px var(--gutter) 64px;
  display: flex; flex-direction: column; justify-content: center;
}
.faq__head, .faq__grid { width: 100%; }
.faq__head, .faq__grid { max-width: 1270px; margin: 0 auto; }
.faq__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 28px; margin-bottom: 64px; }
.faq__title { margin: 0; font-size: 64px; line-height: 72px; font-weight: 400; letter-spacing: -.03em; }
/* Letters fly in from the white page above (site.js initFaqTitle). */
.faq__word { display: inline-block; white-space: nowrap; }
.faq__ch { display: inline-block; transform-origin: 50% 50%; }
.faq__ask { height: 36px; padding: 0 18px; }
.faq__foot { display: flex; justify-content: flex-end; } /* under the right-hand cards, flush with their edge */
.faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.faq__col { display: grid; gap: 20px; }
.faq__item { background: #2E2E2E; border-radius: 24px; color: #fff; }
.faq__q { margin: 0; font: inherit; }
.faq__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 32px 28px; border: 0; border-radius: 24px; background: none; cursor: pointer; text-align: left;
  font: 400 16px/24px var(--font); letter-spacing: -.005em; color: #fff;
}
.faq__btn:active { background: rgba(255, 255, 255, .05); }
.faq__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 24px; }
.faq__icon { position: relative; flex: none; width: 16px; height: 16px; transition: transform .5s var(--ease); }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; border-radius: 1px; }
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon { transform: rotate(45deg); } /* + becomes × */
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.faq__a > div { overflow: hidden; visibility: hidden; transition: visibility 0s linear .5s; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__item.is-open .faq__a > div { visibility: visible; transition: none; }
.faq__a p { margin: 0; padding: 0 28px 32px; max-width: 640px; font-size: 16px; line-height: 24px; font-weight: 400; color: rgba(255, 255, 255, .6); }
@media (prefers-reduced-motion: reduce) { .faq__a, .faq__icon { transition: none; } }

/* Closing call: one screen, the photo fully visible (no veil, no fade at
   the top). Its lower part starts the gradient that the footer finishes
   (.footer--fade). */
.core {
  position: relative; overflow: hidden;
  --core-photo: min(100vh, 56.3vw); --core-photo: min(100svh, 56.3vw);
  --core-tail: 420px;
  min-height: calc(var(--core-photo) + var(--core-tail));
  display: flex; align-items: flex-end; justify-content: center; text-align: center;
}
.core::after {
  content: ''; position: absolute; z-index: 1; left: 0; right: 0; pointer-events: none;
  /* Starts under the photo, so the monitor's foot stays sharp. */
  top: calc(var(--core-photo) - 1px); bottom: 0;
  /* Opens on the grey of the photo's floor, so the floor runs on and lightens. */
  background: linear-gradient(#ABABAB 0%, #EFEFEF 30%,
              #E6E6E6 50%, #D2D2D2 70%, #BDBDBD 86%, #A8A8A8 100%);
}
/* The photo spans the full width at its own 16:9 ratio, so the screen in it
   is never cut on the sides; on very wide windows it is capped at one screen
   tall and only the empty grey above and below the monitor is trimmed.
   The title sits below it. */
.core__photo { position: absolute; left: 0; top: 0; width: 100%; height: var(--core-photo); overflow: hidden; }
/* The photo's floor melts into the grey the gradient below starts on. */
.core__photo::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 9%; pointer-events: none;
  background: linear-gradient(rgba(171, 171, 171, 0), #ABABAB);
}
.core__frame { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 2000 / 1126; transform: translateY(-50%); }
.core__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }

/* Power-on. Without script (or with reduced motion) the screen simply
   shows the wordmark. site.js arms it (screen off), then turns it on. */
.core__screen { position: absolute; left: 18.4%; top: 15.986%; width: 63.15%; height: 60.657%;
  overflow: hidden; border-radius: 0.6% / 1.1%; }
/* The wordmark sits like the hero's: full width minus the gutters, centred. */
.core__wm { position: absolute; left: 2.9%; width: 94.2%; top: 50%; height: auto; transform: translateY(-50%);
  overflow: visible; }
.core__shutter, .core__flash, .core__line { display: none; }
.core.is-armed .core__shutter { display: block; position: absolute; inset: 0; }
.core__shutter::before, .core__shutter::after {
  content: ''; position: absolute; left: 0; right: 0; height: 50.5%;
  background: radial-gradient(140% 120% at 30% 0%, #141414, #050505 60%);
  transition: transform .85s cubic-bezier(.7, 0, .2, 1) .45s;
}
.core__shutter::before { top: 0; transform-origin: top; }
.core__shutter::after { bottom: 0; transform-origin: bottom; }
.core.is-on .core__shutter::before, .core.is-on .core__shutter::after { transform: scaleY(0); }
.core.is-armed .core__flash { display: block; position: absolute; inset: 0; background: #fff; opacity: 0; }
.core.is-on .core__flash { animation: core-flash 1.7s ease-out .45s both; }
.core.is-armed .core__line { display: block; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: #fff; box-shadow: 0 0 14px 3px rgba(255, 255, 255, .55); transform: scaleX(0); opacity: 0; }
.core.is-on .core__line { animation: core-line 1.15s cubic-bezier(.3, .7, .2, 1) forwards; }
@keyframes core-line {
  0% { transform: scaleX(0); opacity: 1; }
  40% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes core-flash {
  0% { opacity: .45; }
  100% { opacity: 0; }
}
/* A band of light crosses the glass once after power-on, then each time the
   section comes back into view or the pointer passes over the screen. */
.core__glare { position: absolute; inset: 0; pointer-events: none; }
.core__glare::before {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 30%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .07) 40%,
              rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .07) 60%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-120%) skewX(-14deg); opacity: 0;
}
.core__glare.is-sweeping::before { animation: core-glare 2.4s cubic-bezier(.45, 0, .25, 1); }
@keyframes core-glare {
  0% { transform: translateX(-120%) skewX(-14deg); opacity: 1; }
  100% { transform: translateX(400%) skewX(-14deg); opacity: 1; }
}
/* Phones: the photo is short, so the title comes up closer to it. */
@media (max-width: 700px) { .core { --core-tail: 250px; } }
/* Title and button sit at the bottom, on the light start of the gradient (Kota). */
.core__inner { position: relative; z-index: 2; padding: 0 var(--gutter) 3vh; }
.core__title {
  margin: 0 0 32px; font-weight: 800; letter-spacing: -.045em; line-height: .92;
  font-size: clamp(40px, 6vw, 104px);
}
.core__cta { gap: 12px; }
.core .glass { color: #111; }

@media (max-width: 860px) {
  .faq { padding: 112px var(--gutter) 64px; }
  .faq__head { flex-direction: column; align-items: flex-start; padding: 0; margin-bottom: 40px; }
  .faq__title { font-size: 36px; line-height: 44px; letter-spacing: -.02em; }
  .faq__grid { grid-template-columns: 1fr; gap: 12px; }
  .faq__col { gap: 12px; }
  .faq__btn { padding: 24px 22px; }
  .faq__a p { padding: 0 22px 24px; }
}

/* ---------- Contact drawer ----------
   Slides in from the right over a dimmed page (contact.js toggles
   .is-open; without JS, :target opens it). Light panel, Kota type scale:
   label 12/16, title 44/52, text 14/20, fields 16/24. */
.drawer { position: fixed; inset: 0; z-index: 80; visibility: hidden; transition: visibility 0s linear .5s; }
.drawer.is-open, .drawer:target { visibility: visible; transition: none; }
.drawer__scrim {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .5s var(--ease);
}
.drawer__panel {
  position: absolute; top: 8px; right: 8px; bottom: 8px; width: min(560px, calc(100vw - 16px));
  overflow-y: auto; overscroll-behavior: contain;
  /* Spacing grows with the screen height; the details sit at the bottom. */
  display: flex; flex-direction: column;
  padding: clamp(64px, 9vh, 104px) 40px 32px; border-radius: 24px; background: #EFEFEF; color: #111;
  transform: translateX(calc(100% + 16px)); transition: transform .5s var(--ease);
}
.drawer.is-open .drawer__scrim, .drawer:target .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel, .drawer:target .drawer__panel { transform: none; }
.drawer__close { position: absolute; top: 20px; right: 20px; color: #111; text-decoration: none; }
.drawer__close span { font-size: 22px; line-height: 1; }
.drawer__head { margin-bottom: clamp(28px, 5vh, 56px); }
.drawer .contact__lede { margin: 0; }
.drawer__title { margin: 0 0 12px; font-size: 44px; line-height: 52px; font-weight: 400; letter-spacing: -.02em; }
.drawer .glass { color: #111; }
.drawer .contact__facts {
  margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(17, 17, 17, .12);
  grid-template-columns: repeat(2, auto); justify-content: space-between; gap: 20px 16px; /* two rows of two */
}
.drawer .form-field { margin-bottom: clamp(20px, 3.2vh, 32px); }
.drawer .contact__form, .drawer .contact__sent { margin-bottom: 32px; }
/* Spare height is shared evenly between the rows, so the send button
   still lands low, just above the details. */
.drawer .contact__form { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
/* Message: a white rounded box rather than an underline. */
.drawer .form-field--grow textarea {
  height: clamp(88px, 13vh, 132px); padding: 12px 16px; resize: vertical;
  background: #fff; border: 1px solid rgba(17, 17, 17, .1); border-radius: 12px;
  transition: border-color .3s, box-shadow .3s;
}
.drawer .form-field--grow textarea:focus { border-color: rgba(17, 17, 17, .4); }
.drawer .form-field--grow textarea:focus-visible { box-shadow: 0 0 0 1px #111; }
.drawer .form-field--grow textarea::placeholder { color: rgba(17, 17, 17, .5); }
html.drawer-open { overflow: hidden; }
@media (max-width: 640px) {
  .drawer__panel { top: 0; right: 0; bottom: 0; width: 100vw; border-radius: 0; padding: 80px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px)); }
  .drawer__title { font-size: 36px; line-height: 44px; }
  .drawer .contact__facts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .drawer__panel, .drawer__scrim { transition: none; } }

.contact__lede { margin: 0 0 40px; max-width: 340px; font-size: 14px; line-height: 20px; font-weight: 400; }
.contact__facts { margin: 0; display: grid; gap: 20px; }
.contact__facts dt { font-size: 12px; line-height: 16px; color: rgba(17, 17, 17, .64); margin-bottom: 4px; }
.contact__facts dd { margin: 0; font-size: 14px; line-height: 20px; }
.contact__facts a { color: inherit; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.form-field label { font-size: 12px; line-height: 16px; color: rgba(17, 17, 17, .64); }
.form-field input, .form-field select, .form-field textarea {
  font: 400 16px/24px var(--font); color: #111; background: transparent;
  border: 0; border-bottom: 1px solid rgba(17, 17, 17, .25); border-radius: 0; padding: 8px 0;
  transition: border-color .3s;
}
.form-field textarea { resize: vertical; }
.form-field select:has(option[value=""]:checked) { color: rgba(17, 17, 17, .5); } /* "Choose…" reads as a placeholder */
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-bottom-color: #111; }
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible { box-shadow: 0 2px 0 #111; }
.form-field__error { display: none; font-size: 12px; line-height: 16px; color: #B42318; }
.form-field.is-invalid input { border-bottom-color: #B42318; }
.form-field.is-invalid .form-field__error { display: block; }
.contact__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.contact__notice { margin: 12px 0 0; font-size: 12px; line-height: 16px; color: rgba(17, 17, 17, .64); }
.contact__notice a { color: inherit; }
.contact__form.is-sending button[type="submit"] { opacity: .6; pointer-events: none; }
.contact__error { margin: 0; font-size: 14px; line-height: 20px; color: #B42318; }
.contact__error a { color: inherit; }
.contact__sent { align-self: start; outline: none; }
/* Sent: the confirmation takes the form's place with a short rise rather
   than popping in (rare moment, once per message). @starting-style gives it
   a first frame to animate from as `hidden` comes off; browsers without it
   just show it, as before. */
.contact__sent:not([hidden]) { transition: opacity .4s var(--ease), transform .4s var(--ease); }
@starting-style { .contact__sent:not([hidden]) { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  @starting-style { .contact__sent:not([hidden]) { transform: none; } } /* fade only */
}
.contact__sent-title { margin: 0 0 8px; font-size: 44px; line-height: 52px; letter-spacing: -.02em; }
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Legal pages (generated by _build/build_legal.py) ----------
   Same palette as the FAQ: black ground, white text, grey secondary text
   and anthracite (#2E2E2E) surfaces. Full text in both languages, the one
   matching <html lang> shown. Unfilled company details show in yellow. */
.page-legal { background: #000; }
/* Into a legal page: the page fades to black (.page-veil, site.js), the
   legal page holds on black, then its content comes in slowly: the title
   first, the text a beat later, the bars last. Opacity on a gentle curve
   (a strong ease-out made it pop in), the rise on the site's ease. */
.page-veil { position: fixed; inset: 0; z-index: 200; background: #000; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.page-veil.is-on { opacity: 1; pointer-events: auto; }
@keyframes legalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes legalLift { from { transform: translateY(24px); } to { transform: none; } }
.page-legal .legal__head { animation: legalFade 1.1s ease .15s both, legalLift 1.4s var(--ease) .15s both; }
.page-legal .legal__body { animation: legalFade 1.1s ease .3s both, legalLift 1.4s var(--ease) .3s both; }
.page-legal .topbar, .page-legal .footer { animation: legalFade 1.1s ease .45s both; }
.page-legal .about__eyebrow { animation: none; } /* the head brings it in; no second rise inside it */
@media (prefers-reduced-motion: reduce) {
  .page-legal .legal__head, .page-legal .legal__body { animation: legalFade 1.1s ease .15s both; } /* fade only, no rise */
}
.legal { color: #fff; padding: 160px var(--gutter) 120px; outline: none; }
.legal__head, .legal__body { max-width: 760px; margin: 0 auto; }
.legal__title { margin: 0 0 12px; font-size: 64px; line-height: 72px; font-weight: 400; letter-spacing: -.03em; }
.legal__date { margin: 0 0 32px; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, .6); }
.legal__nav { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.legal__nav a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px;
  font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .8); text-decoration: none;
  background: #2E2E2E; transition: background .3s, color .3s;
}
@media (hover: hover) and (pointer: fine) { .legal__nav a:hover { background: #3A3A3A; color: #fff; } }
.legal__nav a:active { background: #3A3A3A; }
.legal__nav a[aria-current="page"] { background: #fff; color: #111; }
.legal__nav a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.legal__body { font-size: 16px; line-height: 26px; font-weight: 400; color: rgba(255, 255, 255, .6); }
.legal__body .legal__lede { font-size: 20px; line-height: 30px; font-weight: 400; margin: 0 0 40px; color: #fff; }
.legal__body h2 { margin: 48px 0 16px; font-size: 24px; line-height: 32px; font-weight: 400; letter-spacing: -.01em; color: #fff; }
.legal__body p { margin: 0 0 16px; }
.legal__body ul { margin: 0 0 16px; padding-left: 20px; }
.legal__body li { margin-bottom: 8px; }
.legal__body strong { font-weight: 500; color: #fff; }
.legal__body a { color: #fff; text-underline-offset: 3px; }
.legal__body a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }
.legal__body code { font-size: 14px; color: #fff; background: #2E2E2E; padding: 1px 6px; border-radius: 4px; }
.legal__facts { margin: 0 0 24px; padding: 8px 24px; display: grid; background: #2E2E2E; border-radius: 24px; }
.legal__facts div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.legal__facts div:last-child { border-bottom: 0; }
.legal__facts dt { font-size: 14px; color: rgba(255, 255, 255, .6); }
.legal__facts dd { margin: 0; color: #fff; }
mark.todo { background: #FFE066; color: #111; padding: 0 4px; border-radius: 3px; font-weight: 400; }
html:not([lang="fr"]) [data-lang-block="fr"], html[lang="fr"] [data-lang-block="en"] { display: none; }
@media (max-width: 640px) {
  .legal { padding: 112px var(--gutter) 80px; }
  .legal__title { font-size: 36px; line-height: 44px; letter-spacing: -.02em; }
  .legal__facts div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- 404 page ---------- */
.notfound {
  min-height: 100vh; min-height: 100svh; padding: 40px var(--gutter);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.notfound__mark img { height: 40px; width: auto; margin-bottom: 40px; }
.notfound__code { margin: 0; font-size: clamp(96px, 18vw, 220px); line-height: .9; font-weight: 800; letter-spacing: -.05em; }
.notfound__title { margin: 24px 0 12px; font-size: clamp(24px, 3vw, 44px); line-height: 1.18; font-weight: 400; letter-spacing: -.02em; }
.notfound__text { margin: 0 0 40px; font-size: 14px; line-height: 20px; color: var(--dim); }

/* ---------- The signature: the orange diamond with R ⎯ O ----------
   The studio's mark in place of every orange dot (the cursor's own
   diamond, cursor.js, is the same at the same size: a 16 px square turned
   45°, so 23 px across). As a background: url(assets/ro-diamond.svg). */

/* ---------- Footer (same structure as the original site's) ----------
   Raw'Onion orange ground (#F43C00), Kota type scale: taglines and links
   14/20, bottom row 12/16. */
.footer { background: #F43C00; color: #fff; padding: 64px var(--gutter) 32px; }
/* After the closing call the footer carries on its gradient into the orange
   (mixed in OKLab, so the grey warms up instead of going muddy brown). */
.footer--fade { /* continues the closing section's gradient (index.html) */
  padding-top: 200px;
  background: linear-gradient(#A8A8A8 0, #C98A6E 120px, #E8582A 260px, #F43C00 400px);
  background: linear-gradient(in oklab, #A8A8A8 0, #D27A55 140px, #F43C00 400px);
}
.footer__top {
  /* Tagline left, links centred, back-to-top control right. */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 48px; padding-bottom: 64px;
}
.footer__contact { justify-self: end; }
@media (max-width: 640px) {
  .footer__top { grid-template-columns: 1fr; gap: 32px; }
  .footer__brand { align-items: center; text-align: center; }
  .footer__links { justify-content: center; }
  .footer__contact { justify-self: center; }
}
.footer__brand { display: flex; flex-direction: column; gap: 10px; }
.footer__tagline { margin: 0; font-size: 14px; line-height: 20px; font-weight: 400; color: rgba(255, 255, 255, .64); }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.footer__links a, .footer__legal a { display: inline-block; padding: 6px 0; } /* 28px+ tap targets */
.footer__links a, .footer__contact a:not(.glass) { font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .72); text-decoration: none; transition: color .3s; }
@media (hover: hover) and (pointer: fine) { .footer__links a:hover, .footer__contact a:not(.glass):hover { color: #fff; } }
.footer__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer__wordmark { padding: 56px 0 24px; border-top: 1px solid rgba(255, 255, 255, .12); }
.footer__wm { display: block; width: 100%; height: auto; overflow: visible; }
/* Each letter flies in on scroll (site.js, initWordmark), like the intro. */
.wm__l { fill: #fff; transform-box: fill-box; transform-origin: center; }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, .64);
}
.footer__legal { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
/* Back-to-top: round dark glass button with a thin chevron. */
.footer__totop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.footer__legal a { color: inherit; text-decoration: none; transition: color .3s; }
@media (hover: hover) and (pointer: fine) { .footer__legal a:hover { color: #fff; } }
.footer__links a:active, .footer__contact a:not(.glass):active, .footer__legal a:active { opacity: .6; }
.footer a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

/* ---------- The businesses offer (after the service layers, offer.js) ----------
   One screen held in place: the monitor photo (its screen measured in the
   photo, below), a site per trade on its
   screen, then the screen grows into the orange panel. */
.offer { position: relative; height: 100vh; height: 100svh; background: #F6F6F6; color: #111; overflow: hidden; }
.offer__stage { position: absolute; inset: 0; }
.offer__title { position: absolute; z-index: 1; left: var(--gutter); right: var(--gutter); top: clamp(88px, 13svh, 140px); margin: 0; text-align: center;
  font-size: clamp(30px, 4.6vw, 76px); line-height: 1.02; font-weight: 400; letter-spacing: -.04em; text-wrap: balance; }
.offer__w { color: rgba(17, 17, 17, .22); transition: color .5s var(--ease); }
.offer__w.is-on { color: #F43C00; }
.offer__or { color: rgba(17, 17, 17, .22); }
.offer__device { position: absolute; left: 50%; bottom: 0; width: min(150vw, 148svh); transform: translateX(-50%); }
.offer__monitor { display: block; width: 100%; height: auto; max-width: none; }
.offer__screen { position: absolute; left: 23.79%; top: 17.30%; width: 52.42%; height: 52.52%; overflow: hidden; background: #050505; }
/* (The glass measured 1034 x 581 px at 471, 193 in the 1976 x 1110 photo;
   the box bleeds half a pixel under the bezel so no white edge shows.) */
/* Each capture keeps its own proportions (cover: cropped, never stretched). */
.offer__site { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; max-width: none; opacity: 0; }
.offer__light { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #fff; box-shadow: 0 0 24px 6px rgba(255, 255, 255, .8); transform: scaleX(0); }
.offer__panel { position: absolute; inset: 0; z-index: 2; background: #F43C00; color: #fff; display: grid; place-items: center; padding: 0 var(--gutter);
  clip-path: inset(var(--pt, 50%) var(--pr, 50%) var(--pb, 50%) var(--pl, 50%) round var(--pr-r, 0px)); pointer-events: none; }
.offer.is-open .offer__panel { pointer-events: auto; }
.offer__in { max-width: 1100px; display: grid; justify-items: center; gap: 28px; text-align: center; }
.offer__big { margin: 0; font-size: clamp(40px, 6.4vw, 104px); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.offer__text { margin: 0; max-width: 48ch; font-size: 18px; line-height: 26px; color: rgba(255, 255, 255, .85); }
/* Without the scroll scene (reduced motion, no GSAP): the monitor on its
   first site, then the offer in full below it. */
.offer.is-static { height: auto; }
.offer.is-static .offer__stage { position: relative; display: grid; }
.offer.is-static .offer__title { position: relative; top: auto; padding-top: 104px; }
.offer.is-static .offer__device { position: relative; left: auto; transform: none; margin: 32px auto 0; }
.offer.is-static .offer__site:first-child { opacity: 1; }
.offer.is-static .offer__w:first-child { color: #F43C00; }
.offer.is-static .offer__panel { position: relative; clip-path: none; pointer-events: auto; padding-block: 104px; }
@media (max-width: 640px) { .offer__device { width: 150vw; bottom: 16svh; } .offer__text { font-size: 16px; line-height: 24px; } }
.faq__a a { color: #fff; text-underline-offset: 3px; }

/* ---------- Hero: the peel (hero.js) ---------- */
.hero {
  /* On phones Safari lets the page show around its floating toolbar, all
     the way down to the screen's edge, below the viewport itself: the hero
     is as tall as that visible page (--screen-h: the screen minus the status
     bar, set by the inline script in <head>), so no strip of the white About
     below ever shows, and it ends exactly at the screen's edge. Its bottom
     line and its wordmark stay placed on the visible viewport (svh). */
  --hero-h: 100vh;
  position: relative; height: var(--hero-h); overflow: hidden; color: #fff;
  background: #000 url(media/hero-onion-wide.webp) center / cover no-repeat;
  --under-bars: 0px;
}
@supports (height: 100lvh) { .hero { --hero-h: 100lvh; --under-bars: calc(var(--hero-h) - 100svh); } }
@media (hover: none) and (pointer: coarse) { .hero { --hero-h: max(100lvh, var(--screen-h, 100lvh)); } }
/* Tall screens: the onion whole, as the canvas draws it (hero.js). */
@media (max-aspect-ratio: 1 / 1) { .hero { background-size: 160% auto; } }
/* A reload within the session skips the loader: the hero then opens from
   black too (hero.js fades the photo in, then the letters), so the photo
   and the plain wordmark must not show before its canvas is live. */
html.loader-skip .hero:not(.is-live) { background-image: none; }
html.loader-skip .hero:not(.is-live) .hero__wordmark { visibility: hidden; }
/* The veil canvas paints the onion photo + the white wordmark; the peel
   (WebGL 2) draws over it once live, and the veil alone is the fallback. */
.hero__wordmark {
  position: absolute; left: var(--gutter); right: var(--gutter); top: 50%; top: min(50%, 50svh);
  width: calc(100% - var(--gutter) * 2); height: auto; transform: translateY(-50%);
}
.hero__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; visibility: hidden; }
.hero.is-gl.is-live .hero__gl { visibility: visible; }
.hero.is-live .hero__wordmark { visibility: hidden; }
.hero__hint {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(40px + var(--under-bars)); margin: 0; text-align: center;
  font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, .64); pointer-events: none;
  transition: opacity .6s;
}
.hero__note {
  position: absolute; z-index: 2; left: var(--gutter); bottom: calc(40px + var(--under-bars)); margin: 0;
  font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -.005em; pointer-events: none;
  color: rgba(255, 255, 255, .7); /* light grey; the clock stays white */
}
/* Small texts sit on the photo: a soft shadow keeps them legible. */
.hero__note, .hero__hint { text-shadow: 0 1px 12px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .6); }
.hero__clock { font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }
.hero__clock::before { content: ' | '; }
.hero__actions { position: absolute; z-index: 2; right: var(--gutter); bottom: calc(32px + var(--under-bars)); display: flex; align-items: center; gap: 8px; }
@media (max-width: 640px) {
  .hero__hint { display: none; }
  .hero__note { bottom: calc(32px + var(--under-bars)); padding-right: 64px; }
  .hero__actions { bottom: calc(24px + var(--under-bars)); }
}

/* Pause buttons inside the cards. */
/* Dims the card as the next layer opens over it (layers.js). */
.reel__veil { position: absolute; inset: 0; z-index: 20; background: #000; opacity: 0; pointer-events: none; }
.reel__pause, .about__pause { position: absolute; z-index: 4; width: 36px; height: 36px; }
.about__pause { right: 8px; bottom: 8px; }
.about .about__pause { color: #fff; background: rgba(255, 255, 255, .16); } /* sits on the black card */
.reel__pause { left: 24px; bottom: 24px; }
.reel.is-paused .reel__track { animation-play-state: paused; }
/* Only the layer in view plays (data-live, set by layers.js). */
.layer[data-live="0"] .reel__track { animation-play-state: paused; }

/* ---------- Landing layer: split text + reel card (after madebykota.com/services) ---------- */
.layer__inner--split { display: block; padding: 0; }
.split {
  position: absolute; left: var(--gutter); top: 0; bottom: 0;
  width: calc(50% - var(--gutter) - 120px); max-width: none; /* clear gap before the reel card */
  display: grid; grid-template-rows: 1fr auto 1fr auto; padding: 96px 0 40px;
}
.split__head { grid-row: 2; align-self: end; }
.split .layer__eyebrow { text-transform: none; font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: -.005em; color: var(--l-ink); margin-bottom: 16px; }
.split .layer__title { font-size: 64px; line-height: 72px; font-weight: 400; letter-spacing: -.03em; margin-bottom: 40px; color: var(--l-ink); }
.split__body {
  grid-row: 3; align-self: start;
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 32px;
  padding-top: 32px; border-top: 1px solid color-mix(in srgb, var(--l-ink) 16%, transparent);
}
.split__facts { margin: 0; display: grid; gap: 24px; align-content: start; }
.split__facts dt, .split__facts dd { font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: -.005em; }
.split__facts dt { color: var(--l-dim); margin-bottom: 8px; }
.split__facts dd { margin: 0; }
.split__desc { margin: 0; font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -.005em; }
.split__foot { grid-row: 4; display: flex; align-items: flex-end; gap: 24px; }
@media (min-width: 861px) {
  /* Equal padding top and bottom + two flexible rows around the module
     keep "Our services → description" centred on the page's mid-line;
     the price row is pinned to the bottom, out of that flow. */
  .split { grid-template-rows: 1fr auto auto 1fr; padding: 40px 0; }
  .split__foot { position: absolute; left: 0; right: 0; bottom: 40px; }
}
.split .glass { color: var(--l-ink); }

.reel {
  position: absolute; z-index: 3;
  top: 8px; right: 8px; bottom: 8px; width: calc(50% - 8px);
  background: #000; border-radius: 32px; overflow: hidden;
}
.reel__viewport {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 88%, transparent);
          mask-image: linear-gradient(transparent, #000 10%, #000 88%, transparent);
}
.reel__track { width: min(82%, 1100px); margin: 0 auto; animation: reelScroll 26s linear infinite; }
.layer--marketing .reel__viewport { -webkit-mask-image: none; mask-image: none; }
/* Marketing: a fanned deck of site pages in 3D (marketing-stack.js sets
   each page's pose; CSS transitions do the motion). */
.stack { position: absolute; inset: 0; display: grid; place-items: center; container-type: size; perspective: 1600px; }
.stack__deck {
  position: relative; width: min(70cqw, 52cqh * 16 / 9); aspect-ratio: 16 / 9;
  margin-top: 16cqh; transform-style: preserve-3d; transform: rotateX(12deg);
}
.stack__page {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 0; border-radius: 8px;
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .12), 0 24px 50px rgba(0, 0, 0, .55);
  backface-visibility: hidden; will-change: transform, opacity;
  transition: transform 1s var(--ease), opacity .8s var(--ease), filter .8s var(--ease);
}
.stack__page.is-out { transition: transform .75s cubic-bezier(.5, 0, .2, 1), opacity .75s, filter .8s; }
@media (prefers-reduced-motion: reduce) { .stack__page { transition: none; } }

/* Motion: one animated photo filling the card instead of a scrolling reel. */
/* Landing Page: one page at a time; a cursor clicks its call to action and
   the next page opens in a circle from there (landing-click.js places the
   pages, the cursor and the ring). */
.layer--landing .reel__viewport { -webkit-mask-image: none; mask-image: none; }
.click { position: absolute; inset: 0; z-index: 0; isolation: isolate; overflow: hidden; } /* its layers stay under the card's menu and pause button */
.click__slide { position: absolute; inset: 0; background: #000; }
.click__bg { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; max-width: none; object-fit: cover; filter: blur(28px) brightness(.45) saturate(1.2); }
.click__fg { position: absolute; display: block; max-width: none; border-radius: 6px; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.click__shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.click__ring { position: absolute; z-index: 5; left: 0; top: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 1.5px solid #fff; opacity: 0; pointer-events: none; }
.click__cursor { position: absolute; z-index: 6; left: 0; top: 0; width: 22px; height: 22px; margin: -2px 0 0 -3px; transform-origin: 3px 2px; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.click__foot { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 30%; pointer-events: none; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); } /* keeps the caption legible on light pages */
.click__cap { z-index: 7; }
@media (max-width: 860px) { .click__cursor { width: 16px; height: 16px; } }

/* Graphic Design: the works on a tilted wall, the camera diving into one
   at a time (graphic-wall.js sets the transforms and the caption). */
.layer--graphic .reel__viewport { -webkit-mask-image: none; mask-image: none; }
.wall { position: absolute; inset: 0; overflow: hidden; perspective: 1400px; }
.wall__tilt { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.wall__plane { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.wall__cell { position: absolute; display: block; width: 420px; max-width: none; height: 315px; object-fit: cover; border-radius: 4px; }
.wall__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55)); }
.wall__cap {
  position: absolute; z-index: 3; left: 76px; right: 45%; bottom: 31px; margin: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
  font-size: 14px; line-height: 20px; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
}
.wall__line { display: block; overflow: hidden; }
.wall__line > span { display: inline-block; }
.wall__count { font-size: 12px; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .wall__cap { right: 16px; bottom: 32px; left: 72px; } }
.reel__track--static { animation: none; position: relative; width: 100%; height: 100%; }
.layer--motion .reel { background: #0B0A0C; }
.layer--motion .reel__viewport { -webkit-mask-image: none; mask-image: none; }
@keyframes reelScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.reel__menu {
  position: absolute; right: 36px; bottom: 30px; margin: 0; padding: 0; list-style: none;
  text-align: right; display: grid; gap: 4px;
}
.reel__menu button {
  font: 400 14px/20px var(--font); letter-spacing: -.005em; color: rgba(255, 255, 255, .6);
  background: none; border: 0; padding: 0; cursor: pointer; transition: color .3s;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .8), 0 0 2px rgba(0, 0, 0, .6); /* stays legible over light images */
}
.reel__menu button[aria-current="true"] { color: #fff; }
@media (hover: hover) and (pointer: fine) { .reel__menu button:hover { color: #fff; } }
.reel__menu button:active { opacity: .6; }
/* The current service's marker: a short rule after its name. */
.reel__menu-line { display: inline-block; width: 14px; height: 1px; margin-left: 6px; vertical-align: middle; background: currentColor; }
@media (prefers-reduced-motion: reduce) { .reel__track { animation: none; } }

/* ---------- Motion: the phone photo, brought to life ----------
   The photo (1448x1086) is laid out at its native pixel size in .mi__scene,
   which motion-image.js scales to cover the card. .mi__screen is a 300x716
   "screen" warped with a matrix3d onto the phone's glass in the photo, so
   the type lands in the photo's own perspective; its lines play in on a
   loop (also driven by motion-image.js). */
.mi { position: absolute; inset: 0; overflow: hidden; background: #0d1114; }
.mi__scene {
  position: absolute; left: 50%; top: 50%; width: 1448px; height: 1086px;
  transform-origin: 0 0; will-change: transform;
}
.mi__photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mi__screen {
  --mi-red: #FF3B2E;
  position: absolute; left: 0; top: 0; width: 300px; height: 716px;
  transform-origin: 0 0;
  border-radius: 34px; background: #030303;
  /* Clips like overflow: hidden, but leaves 8px above the box for the
     lock screen, which reaches higher up the glass than the stories. */
  clip-path: inset(-8px 0 0 0 round 34px);
  color: #ECECEC; font-family: var(--font);
}
.mi__top { position: absolute; left: 16px; right: 18px; top: 34px; display: flex; align-items: center; gap: 7px; }
.mi__top img { height: 17px; width: auto; }
.mi__top span { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.mi__burger, .mi__burger::before, .mi__burger::after { display: block; width: 16px; height: 1.5px; background: currentColor; }
.mi__burger { margin-left: auto; position: relative; }
.mi__burger::before, .mi__burger::after { content: ''; position: absolute; left: 0; }
.mi__burger::before { top: -5px; } .mi__burger::after { top: 5px; }
.mi__p { position: absolute; left: 14px; right: 10px; margin: 0; font-size: 33px; line-height: 36px; font-weight: 600; letter-spacing: -.03em; }
.mi__p--1 { top: 128px; }
.mi__p--2 { top: 368px; }
.mi__l { display: block; overflow: hidden; padding-bottom: 3px; }
.mi__l > span { display: inline-block; transform: translateY(105%); }
.mi__red { color: var(--mi-red); }
.mi__list {
  position: absolute; left: 16px; bottom: 26px; margin: 0; padding: 0; list-style: none;
  font: 400 11px/15px ui-monospace, 'SF Mono', Menlo, monospace; color: rgba(236, 236, 236, .75); letter-spacing: .02em;
}
.mi__list li { white-space: nowrap; overflow: hidden; width: 0; }
.mi__arrow { position: absolute; right: 22px; bottom: 34px; font-size: 22px; line-height: 1; color: var(--mi-red); opacity: 0; }

/* The screen's reel: stories (one shown at a time, motion-image.js), their
   progress bars, and the lock screen that opens it. */
.mi { cursor: pointer; } /* a click skips to the next story */
.mi__story { position: absolute; inset: 0; visibility: hidden; }
.mi__story.is-on { visibility: inherit; } /* not "visible": that would show through a hidden layer */
.mi__mark { position: absolute; left: 50%; top: 150px; width: 150px; height: auto; margin-left: -75px; overflow: visible; }
.mi__mark path { fill: #ECECEC; fill-opacity: 0; stroke: #ECECEC; stroke-width: 6; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: 50% 100%; }
.mi__cap--mark { top: 400px; }
/* MOTION: one svg in screen pixels. The heart pours into the letters, a
   drop falls from the N and the logo grows back around it, all as GSAP
   MorphSVG tweens on the paths (motion-image.js). */
.mi__type { position: absolute; left: 0; top: 0; width: 300px; height: 716px; overflow: visible; }
.mi__type path { fill: #ECECEC; }
.mi__cap--type { top: 330px; text-align: center; left: 10px; }
.mi__bars { position: absolute; left: 14px; right: 14px; top: 14px; display: flex; gap: 4px; opacity: 0; }
.mi__bars i { flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.mi__bars b { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.mi__lock {
  /* 8px taller at the top than the screen box: the lock screen's lit
     ground reaches the top of the glass (its content stays put). */
  position: absolute; inset: -8px 0 0 0; text-align: center; visibility: hidden; border-radius: 34px;
  background: radial-gradient(130% 70% at 50% 0%, #2b2b2b, #080808 72%);
}
.mi__lock.is-on { visibility: inherit; }
.mi__date { position: absolute; left: 0; right: 0; top: 82px; margin: 0; font-size: 14px; line-height: 18px; font-weight: 500; color: rgba(236, 236, 236, .82); }
.mi__time { position: absolute; left: 0; right: 0; top: 102px; margin: 0; font-size: 80px; line-height: 1; font-weight: 600; letter-spacing: -.035em; }
.mi__note {
  position: absolute; left: 10px; right: 10px; top: 308px; display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, .14); text-align: left; opacity: 0;
}
.mi__icon { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--mi-red); display: grid; place-items: center; }
.mi__icon img { height: 18px; width: auto; }
.mi__note-body { flex: 1; min-width: 0; }
.mi__note-head { display: flex; justify-content: space-between; margin: 0; font-size: 12px; line-height: 15px; }
.mi__note-head b { font-weight: 600; }
.mi__note-when { color: rgba(236, 236, 236, .55); }
.mi__note-text { margin: 0; font-size: 12.5px; line-height: 16px; color: rgba(236, 236, 236, .9); }
.mi__home { position: absolute; left: 50%; bottom: 9px; width: 104px; height: 4px; margin-left: -52px; border-radius: 3px; background: rgba(255, 255, 255, .8); }

/* ---------- Small screens: stack media above text ---------- */
@media (max-width: 860px) {
  .layer__inner {
    grid-template-columns: 1fr; grid-template-rows: auto auto;
    align-content: center; gap: 28px; padding-top: 80px; padding-bottom: 96px;
  }
  .split {
    width: auto; right: var(--gutter); top: calc(72px + 36svh); padding: 18px 0 24px;
    grid-template-rows: auto auto 1fr auto; gap: 16px;
  }
  .split__head { grid-row: 1; }
  .split__body { grid-row: 2; grid-template-columns: 1fr; gap: 14px; padding-top: 16px; }
  .split__facts { grid-template-columns: 1fr 1fr; }
  .split .layer__title { margin-bottom: 0; font-size: 36px; line-height: 44px; letter-spacing: -.02em; }
  .split__foot { grid-row: 4; }
  .split .glass--lg { height: 48px; padding: 0 22px; }
  .reel { top: 72px; left: 8px; right: 8px; bottom: auto; width: auto; height: 36svh; border-radius: 24px; }
  .reel__menu { display: none; }
}
/* Short phones (iPhone SE and the like): a smaller card and tighter type,
   so the whole service, "Start a project" included, fits on screen. */
@media (max-width: 860px) and (max-height: 700px) {
  .reel { top: 64px; height: 28svh; }
  .split { top: calc(64px + 28svh); padding: 12px 0 16px; gap: 10px; }
  .split .layer__eyebrow { margin-bottom: 6px; }
  .split .layer__title { font-size: 28px; line-height: 34px; }
  .split__body { gap: 10px; padding-top: 12px; }
  .split__facts { gap: 12px; }
  .split__facts dt { margin-bottom: 4px; }
  .split__desc { font-size: 13px; line-height: 18px; }
  .split .glass--lg { height: 44px; }

}

/* ---------- Reduced motion / no JS libs: plain stacked sections ---------- */
.is-static .peel__stage { height: auto; overflow: visible; }
.is-static .layer { position: relative; min-height: 100svh; visibility: visible; }
.is-static .layer__inner { position: relative; min-height: 100svh; }

/* Touch screens: no focus ring left on a tapped button (see the top). */
@media (hover: none) and (pointer: coarse) {
  *:focus-visible { outline: none !important; }
}