/* 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; }
/* (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);
}
.glass:hover { background: rgba(153, 153, 153, .32); }
.glass:active { transform: scale(.97); }
.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);
}
.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: 24px;
  width: min(400px, calc(100vw - 32px)); padding: 22px 24px 20px;
  border-radius: 24px; 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 6px; font: 400 16px/24px var(--font); letter-spacing: -.01em; }
.cookie__text { margin: 0; font: 400 14px/20px 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: 8px; margin-top: 18px; }
.cookie__btn { flex: 1 1 auto; height: 40px; padding: 0 16px; white-space: nowrap; }
/* 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; }
.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 14px/20px 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: 16px; } }
@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; } /* onion mark only, in a round pill */
.topbar__logo img { height: 22px; width: auto; }
.topbar__menu { justify-self: center; }
.topbar__menu-lines, .topbar__menu-lines::after {
  display: block; width: 16px; height: 1.5px; background: currentColor; border-radius: 2px;
}
.topbar__menu-lines { position: relative; transform: translateY(-3px); }
.topbar__menu-lines::after { content: ''; position: absolute; top: 6px; }
.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;
}
.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: 600 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;
}

/* Menu button morphs into a close cross while the menu is open. */
.topbar__menu-lines, .topbar__menu-lines::after { transition: transform .45s var(--ease), top .45s var(--ease); }
.topbar__menu[aria-expanded="true"] .topbar__menu-lines { transform: rotate(45deg); }
.topbar__menu[aria-expanded="true"] .topbar__menu-lines::after { top: 0; transform: rotate(-90deg); }

/* ---------- Drop-down menu ----------
   A darker, more blurred cousin of the glass pills; sizes taken from the
   Kota menu (items 24/32, links 14/20, ~420px panel, 24px corners). */
.menu {
  position: fixed; z-index: 49; top: 76px; left: 50%;
  width: min(420px, calc(100vw - 32px)); padding: 24px 32px 28px;
  border-radius: 24px; 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: 50% 0;
  transform: translateX(-50%) translateY(-8px) scale(.96); opacity: 0; visibility: hidden;
  transition: transform .5s var(--ease), opacity .3s, visibility 0s linear .5s;
}
.menu.is-open {
  transform: translateX(-50%) translateY(0) scale(1); opacity: 1; visibility: visible;
  transition: transform .5s var(--ease), opacity .3s, visibility 0s;
}
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.menu__list a {
  display: block; padding: 16px 0;
  font: 400 24px/32px var(--font); letter-spacing: -.01em; color: #fff; text-decoration: none;
  transition: opacity .3s, transform .4s var(--ease);
}
.menu__list a:hover { opacity: .65; transform: translateX(4px); }
.menu__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 22px; }
.menu__links a {
  font: 400 14px/20px var(--font); letter-spacing: -.005em;
  color: rgba(255, 255, 255, .6); text-decoration: none; transition: color .3s;
}
.menu__links a:hover { color: #fff; }
.menu__links a:first-of-type { margin-left: auto; } /* FAQ · Contact on the right, EN | FR on the left */
.menu a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .menu, .menu.is-open { transition: none; } }

/* 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: 160px var(--gutter) 96px;
  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;
}
.about__slide {
  /* Natural proportions, centred: never cropped, whatever the image ratio. */
  position: absolute; left: 50%; top: 50%;
  width: auto; height: auto; max-width: 64%; max-height: 76%;
  opacity: 0; transform: translate(-50%, -50%) scale(1.04);
  transition: opacity .6s var(--ease), transform .9s var(--ease);
}
.about__slide.is-active { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.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, 3.05vw, 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: 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, 12.5vw, 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: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 .6s; }
.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 .6s 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) 32px; }
  .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; }
.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; }
.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;
}
.legal__nav a:hover { background: #3A3A3A; color: #fff; }
.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); }

/* ---------- Footer (same structure as the original site's) ----------
   Black ground, Kota type scale: taglines and links 14/20, bottom row 12/16. */
.footer { background: #000; color: #fff; padding: 64px var(--gutter) 32px; }
/* After the closing call the footer carries on its gradient to black. */
.footer--fade { /* continues the closing section's gradient (index.html) */
  padding-top: 200px;
  background: linear-gradient(#A8A8A8 0, #8A8A8A 50px, #666 110px, #3E3E3E 170px, #1E1E1E 240px, #0A0A0A 320px, #000 400px);
}
.footer__top {
  /* Taglines left, links centred on the page, LinkedIn 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; }
.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__social { font-size: 14px; }
.footer__wordmark { padding: 16px 0 32px; }
.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;
  padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, .64);
}
.footer__legal { display: flex; align-items: center; gap: 8px; }
.footer__end { display: flex; align-items: center; gap: 16px; }
/* 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; }
.footer__legal a:hover { color: #fff; }
.footer a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

/* ---------- Hero: the wordmark veil (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 the screen (--screen-h, measured by the inline script in
     <head>), so no strip of the white About below ever shows. 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; } }
/* Until the canvas has painted (or without JS) the hero's own background
   photo and the plain wordmark image stand in; the field stays hidden. */
.hero:not(.is-live) .hero__bg { visibility: hidden; }
/* 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; }
.hero__bg { position: absolute; inset: 0; background: #000; }
/* Behind the veil: the site's images on concentric rings, like a cut
   onion's layers, each turning its own way (markup generated by
   build_layers.py). */
.rings { position: absolute; inset: 0; overflow: hidden; }
.ring {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  animation: ringTurn var(--dur) linear infinite; animation-direction: var(--dir);
}
.ring__item {
  position: absolute; left: 0; top: 0; width: var(--w); height: auto; max-width: none;
  border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  /* centred on the ring's centre, turned to its angle, pushed out to the ring */
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--r) * -1));
}
@keyframes ringTurn { to { transform: rotate(360deg); } }
.hero.is-paused .ring, .hero.is-away .ring { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ring { animation: none; } }
/* The canvas paints the onion photo + the white wordmark (hero.js). */
.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.is-live .hero__wordmark { visibility: hidden; }
.hero__hint {
  position: absolute; 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; 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; 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. */
.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, .reel.is-paused .field__item { animation-play-state: paused; }
/* Only the layer in view plays (data-live, set by layers.js). */
.layer[data-live="0"] .reel__track, .layer[data-live="0"] .field__item { 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; }
.reel__item { display: block; width: 100%; height: auto; margin-bottom: 9vh; border-radius: 4px; }
/* Marketing: a 3D field of site thumbnails flying toward the viewer
   (after madebykota.com). Each item sits at its own x/y offset from the
   vanishing point and travels the same z path; negative delays spread them
   along it so the field is always full. */
.layer--marketing .reel__viewport { -webkit-mask-image: none; mask-image: none; }
.field { position: absolute; inset: 0; overflow: hidden; perspective: 900px; }
.field__item {
  position: absolute; left: calc(50% + var(--x)); top: calc(50% + var(--y));
  width: var(--w); height: auto; border-radius: 3px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  animation: fieldFly 18s linear infinite;
  will-change: transform, opacity;
}
@keyframes fieldFly {
  0%   { transform: translate(-50%, -50%) translateZ(-1800px); opacity: 0; }
  14%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) translateZ(560px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .field__item { animation: none; transform: translate(-50%, -50%) translateZ(-400px); }
}
/* 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. */
.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:hover, .reel__menu button[aria-current="true"] { color: #fff; }
/* 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; overflow: hidden;
  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; }
.mi__word {
  position: absolute; left: 0; right: 0; top: 236px; margin: 0; display: flex; justify-content: center;
  font-size: 60px; line-height: 1; font-weight: 800; letter-spacing: -.02em;
}
.mi__word span { display: inline-block; transform-origin: 50% 100%; opacity: 0; }
.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 {
  position: absolute; inset: 0; text-align: center; visibility: hidden;
  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: 74px; 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: 94px; margin: 0; font-size: 80px; line-height: 1; font-weight: 600; letter-spacing: -.035em; }
.mi__note {
  position: absolute; left: 10px; right: 10px; top: 300px; 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__item { margin-bottom: 4vh; }
  .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; }
}