/* ==========================================================================
   Manuelino — portfolio
   Tokens first, then chrome, then sections in page order.
   ========================================================================== */

:root {
  --bg: #07080c;
  --card: #0d1016;
  --tile-hover: #0c1017;
  --text: #e9edf3;
  --muted: rgba(233, 237, 243, .66);
  --muted-2: rgba(233, 237, 243, .58);
  --muted-3: rgba(233, 237, 243, .45);
  --muted-4: rgba(233, 237, 243, .3);
  --line: rgba(233, 237, 243, .12);
  --line-2: rgba(233, 237, 243, .14);
  --outline: rgba(233, 237, 243, .1);
  --accent: #5ab7ff;
  --accent-hover: #96d3ff;
  --accent-55: rgba(90, 183, 255, .55);
  --accent-45: rgba(90, 183, 255, .45);
  --accent-22: rgba(90, 183, 255, .22);
  --accent-16: rgba(90, 183, 255, .16);
  --accent-10: rgba(90, 183, 255, .1);
  --stripe: repeating-linear-gradient(115deg, #161a24 0 14px, #0f1219 14px 28px);

  --pad-x: 32px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --sans: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Bodoni Moda", Didot, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--bg); }

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent); }

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font: 700 12px var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform .3s ease;
}
.skip-link:focus-visible { transform: none; color: var(--bg); }

/* ---------- keyframes ---------- */
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes scrub { 0% { left: 12%; } 50% { left: 76%; } 100% { left: 12%; } }
@keyframes glowdrift {
  0% { transform: translate(-6%, 2%) scale(1); }
  50% { transform: translate(8%, -4%) scale(1.18); }
  100% { transform: translate(-6%, 2%) scale(1); }
}
@keyframes glowdrift2 {
  0% { transform: translate(4%, -3%) scale(1.1); }
  50% { transform: translate(-7%, 5%) scale(.92); }
  100% { transform: translate(4%, -3%) scale(1.1); }
}
@keyframes cue {
  0% { transform: translateY(0); opacity: .25; }
  50% { transform: translateY(9px); opacity: 1; }
  100% { transform: translateY(0); opacity: .25; }
}
@keyframes blink { 0%, 45% { opacity: 1; } 50%, 100% { opacity: .15; } }

/* ==========================================================================
   Global chrome
   ========================================================================== */

/* The hero has drifting glows and timeline strips; everything below it used
   to be flat black. This layer carries that atmosphere down the whole page.
   It sits at z-index -1 so it paints over the body background but under every
   bit of content — no section paints its own background, so it shows through
   all of them. Soft radial gradients do the work with no filter: blur(), which
   at this size would cost far more than it adds. */
.ambient {
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* --scroll is written by the scroll handler: the field drifts as the page
     moves, so the background never looks like the same still frame twice. */
  transform: translate3d(0, calc(var(--scroll, 0) * -10vh), 0);
}
/* No mix-blend-mode here: .ambient makes its own stacking context (z-index
   plus transform), so the children would blend against transparency and the
   mode would do nothing. Straight alpha over the page background instead. */
.ambient i {
  position: absolute;
  display: block;
  border-radius: 50%;
}
.ambient i:nth-child(1) {
  left: -14%; top: 4%; width: 62%; height: 48%;
  background: radial-gradient(circle at 45% 45%, rgba(90, 183, 255, .26), rgba(30, 80, 220, .12) 48%, transparent 70%);
  animation: glowdrift 34s ease-in-out infinite;
}
.ambient i:nth-child(2) {
  right: -12%; top: 38%; width: 56%; height: 52%;
  background: radial-gradient(circle at 55% 50%, rgba(130, 225, 255, .18), rgba(20, 50, 140, .12) 50%, transparent 72%);
  animation: glowdrift2 46s ease-in-out infinite;
}
.ambient i:nth-child(3) {
  left: 26%; bottom: -12%; width: 54%; height: 46%;
  background: radial-gradient(circle at 50% 50%, rgba(120, 90, 255, .16), transparent 68%);
  animation: glowdrift 58s ease-in-out infinite reverse;
}
/* A whisper of the hero's timeline strips, far too faint to fight the text. */
.ambient::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(to bottom, rgba(233, 237, 243, .028) 0 1px, transparent 1px 88px);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

.scrub-track {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  height: 1px;
  background: var(--line);
  z-index: 56;
  pointer-events: none;
}
.scrub-fill { height: 100%; width: 0; background: var(--accent); }

.timecode {
  position: fixed;
  bottom: 32px; right: 28px;
  z-index: 57;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(233, 237, 243, .5);
  pointer-events: none;
}

/* ---------- header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  z-index: 58;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--pad-x);
  backdrop-filter: blur(8px);
}

.wordmark { display: flex; align-items: baseline; gap: 10px; }
.wordmark__dot { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.wordmark__name {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-stretch: 112%;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  flex-wrap: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(233, 237, 243, .68);
}
.site-nav a { color: inherit; white-space: nowrap; transition: color .3s ease; }
.site-nav a:hover,
.site-nav a[aria-current="true"] { color: var(--accent); }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(233, 237, 243, .22);
  border-radius: 999px;
  padding: 6px 12px;
  background: none;
  color: rgba(233, 237, 243, .55);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  cursor: pointer;
  transition: border-color .3s ease;
}
.lang-toggle:hover { border-color: var(--accent-45); }
.lang-toggle__on { color: var(--accent); }

/* ---------- mobile nav ---------- */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(233, 237, 243, .22);
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(7, 8, 12, .5);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars { display: inline-flex; flex-direction: column; gap: 3px; width: 14px; }
.nav-toggle__bars span { height: 1.5px; background: currentColor; border-radius: 2px; }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 59;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 96px 28px 40px;
  background: #07080c;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .35s ease, transform .35s var(--ease), visibility .35s;
}
.mobile-nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.mobile-nav__close {
  display: flex;
  position: absolute;
  top: 18px;
  right: var(--pad-x);
  gap: 8px;
}

.mobile-nav > a {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 800;
  font-stretch: 110%;
  font-size: clamp(26px, 8vw, 44px);
  letter-spacing: -.02em;
}
.mobile-nav .lang-toggle { font-size: 11px; font-weight: 400; letter-spacing: .14em; }
.mobile-nav__foot {
  margin-top: 28px;
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ---------- floating CTA ---------- */

/* ---------- shared bits ---------- */
.section { padding: 72px var(--pad-x); }
/* The hero already ends on 132px of its own padding: a second helping here
   left a dead black band between it and the first thing worth looking at. */
.work { padding-top: 0; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 50px;
}
.section-head h2 {
  margin: 0;
  font-weight: 800;
  font-stretch: 110%;
  font-size: clamp(30px, 4.6vw, 80px);
  line-height: .94;
  letter-spacing: -.03em;
}
.section-head p {
  margin: 0;
  max-width: 32ch;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(233, 237, 243, .6);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 24px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .35s var(--ease), background .3s ease, border-color .3s ease, color .3s ease;
}
.pill--primary { background: var(--accent); color: var(--bg); }
.pill--primary:hover { background: var(--accent-hover); color: var(--bg); transform: translateY(-2px); }
.pill--ghost { border: 1px solid rgba(233, 237, 243, .25); color: var(--text); }
.pill--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* Only hidden once JS is confirmed running, so a script failure (or a paused
   IntersectionObserver) can never leave the page blank. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Hero
   ========================================================================== */

/* Opaque on purpose: the page-wide .ambient layer sits behind everything, and
   letting it show through here would stack a second set of glows on top of
   the hero's own. The hero brings its own atmosphere and needs a clean base. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 124px var(--pad-x) 132px;
  overflow: hidden;
  background: var(--bg);
}

.hero__tracks {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .85;
  mask-image: radial-gradient(120% 90% at 50% 45%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 45%, #000, transparent 78%);
}
.trk {
  position: absolute;
  left: 0; right: 0;
  overflow: hidden;
  transition: opacity .45s ease, transform .5s var(--ease);
}
.trk__row { display: flex; gap: 6px; width: 200%; height: 100%; animation: drift var(--dur) linear infinite; }
.trk__row span {
  height: 100%;
  border-radius: 3px;
  background: rgba(233, 237, 243, .055);
  box-shadow: inset 0 0 0 1px rgba(233, 237, 243, .05);
}
.trk__row span:nth-child(3n + 1) { background: var(--accent-22); }
.trk__row span:nth-child(6n + 2) { background: var(--accent-10); }

.playhead {
  position: absolute;
  top: 6%; bottom: 6%;
  left: 38%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(90, 183, 255, .75), transparent);
  box-shadow: 0 0 18px 2px rgba(90, 183, 255, .28);
  animation: scrub 19s ease-in-out infinite;
}

.hero__glows {
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  filter: blur(90px);
  opacity: .72;
  mix-blend-mode: screen;
}
.hero__glows i {
  position: absolute;
  border-radius: 50%;
  display: block;
}
.hero__glows i:nth-child(1) {
  left: -5%; top: 14%; width: 62%; height: 70%;
  background: radial-gradient(circle at 40% 40%, rgba(90, 183, 255, .5), rgba(30, 80, 220, .2) 55%, transparent 72%);
  animation: glowdrift 22s ease-in-out infinite;
}
.hero__glows i:nth-child(2) {
  right: -8%; top: -6%; width: 55%; height: 66%;
  background: radial-gradient(circle at 60% 50%, rgba(130, 225, 255, .3), rgba(20, 50, 140, .22) 55%, transparent 72%);
  animation: glowdrift2 28s ease-in-out infinite;
}
.hero__glows i:nth-child(3) {
  left: 28%; bottom: -18%; width: 52%; height: 52%;
  background: radial-gradient(circle at 50% 50%, rgba(120, 90, 255, .16), transparent 70%);
}

.hero__cursor {
  position: absolute;
  left: 0; top: 0;
  width: 520px; height: 520px;
  margin: -260px 0 0 -260px;
  z-index: 2;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 200, 255, .17), transparent 62%);
  opacity: 0;
  transition: opacity .5s ease;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(7, 8, 12, .62), rgba(7, 8, 12, .15) 40%, rgba(7, 8, 12, .86));
}


.hero__content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4.2vh, 52px);
}

.rec {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.rec__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: blink 1.6s steps(1, end) infinite;
}

.hero h1 {
  margin: 0;
  font-weight: 800;
  font-stretch: 108%;
  font-size: clamp(44px, min(9.4vw, 15vh), 168px);
  line-height: .88;
  letter-spacing: -.035em;
  text-wrap: balance;
  max-width: 16em;
}
.word {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -.01em;
  transition: opacity .35s ease, transform .45s var(--ease);
}
.word[data-out="true"] { opacity: 0; transform: translateY(-8px); }
.word[data-in="true"] { opacity: 0; transform: translateY(6px); }

.hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
/* The sentence runs 121 characters. Sharing the row with the buttons capped
   it at ~666px and broke it over two lines, so it takes the full row and the
   buttons drop beneath it — one line from roughly 1150px up. */
.hero__row p {
  margin: 0;
  flex: 1 1 100%;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 100%;
  text-wrap: balance;
}
.hero__row { justify-content: flex-start; }
.hero__ctas { margin-left: auto; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Centred, and reading as one object: a hairline rising into the label and a
   travelling dot below it, rather than a word with an arrow beside it. */
.hero__foot {
  position: relative;
  z-index: 5;
  margin-top: clamp(28px, 5vh, 60px);
  display: flex;
  justify-content: center;
}
.hero__foot a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .28em;
  text-indent: .28em;
  text-transform: uppercase;
  color: var(--muted-3);
  transition: color .35s ease;
}
.hero__foot a:hover { color: var(--accent); }
/* The rail is the track; the dot falls down it on a loop. */
.hero__foot .rail-v {
  position: relative;
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, transparent, var(--line-2) 30%, transparent);
  overflow: hidden;
}
.hero__foot .rail-v::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 3px;
  margin-left: -1px;
  border-radius: 50%;
  background: var(--accent);
  animation: fall 2.4s var(--ease) infinite;
}
.hero__foot a:hover .rail-v { background: linear-gradient(to bottom, transparent, var(--accent-45) 30%, transparent); }

@keyframes fall {
  0% { transform: translateY(-6px); opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateY(46px); opacity: 0; }
}

.label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(233, 237, 243, .5);
}


/* ==========================================================================
   Work reels — two trails running in opposite directions, CSS-driven.
   ========================================================================== */

/* The hero is opaque and the ambient field starts right under it, so without
   this the glows could cut in on a hard horizontal line. The strip fades the
   solid hero base into the field. z-index -1 puts it in the same layer as
   .ambient but later in DOM order, so it covers the glows while staying
   under every bit of text. */
.work { position: relative; }
.work::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 220px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--bg), transparent);
}

.work__hint {
  margin: -18px 0 26px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-4);
}

/* Full-bleed: the trails run edge to edge even though the section is padded. */
.reel {
  overflow: hidden;
  margin-inline: calc(var(--pad-x) * -1);
  padding-block: 6px;
}
.reel + .reel { margin-top: 20px; }
/* Each set of cards is duplicated in the markup, so translating the track by
   exactly half its width lands on an identical frame — the loop never seams.
   The gap lives in each card's margin so the two halves stay equal. */
.reel__track {
  display: flex;
  width: max-content;
  animation: reel 70s linear infinite;
  will-change: transform;
}
.reel--rev .reel__track { animation-duration: 84s; animation-direction: reverse; }
.reel:hover .reel__track,
.reel:focus-within .reel__track { animation-play-state: paused; }
@keyframes reel { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Each card is a <button>: it opens the video in the lightbox rather than
   navigating away, so everything inside has to be phrasing content — spans,
   not divs. */
.card {
  position: relative;
  flex: 0 0 auto;
  width: min(72vw, 380px);
  margin-right: 20px;
  aspect-ratio: 16 / 9;
  color: inherit;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.card__inner {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
  transition: border-color .35s ease, transform .35s var(--ease);
}
.card:hover .card__inner,
.card:focus-visible .card__inner { border-color: var(--accent-45); transform: translateY(-4px); }
.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-image: var(--stripe);
}
.card__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(233, 237, 243, .5);
  background: rgba(7, 8, 12, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--text);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.card:hover .card__play,
.card:focus-visible .card__play { background: var(--accent); border-color: var(--accent); color: var(--bg); }
/* Thumbnails are loud — bright yellows and pinks — so the kicker needs more
   cover under it than a plain two-stop gradient gives. */
.card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 8, 12, .95) 0%, rgba(7, 8, 12, .78) 26%, rgba(7, 8, 12, .22) 62%, transparent 85%);
}
.card__copy {
  position: absolute;
  left: 20px; bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card__kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.card__name {
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: -.02em;
}

/* Touch has no hover, so a moving card is a moving tap target. There the
   trails stop and become ordinary swipeable rows, and the duplicate set is
   dropped so nothing shows up twice. */
/* Touch keeps the motion too — a trail that only moves on desktop isn't the
   effect. Tapping a moving card would be a coin flip, so the first touch
   freezes that row (data-paused, set in site.js) and the tap that follows
   lands on a card standing still. */
.reel[data-paused="true"] .reel__track { animation-play-state: paused; }
/* The strip plays videos now, so the way into the written case studies is a
   line of links under it rather than a pill on every card. */
.work__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.work__links > span { color: var(--muted-4); }
.work__links a { color: var(--muted-2); }
.work__links a:hover { color: var(--accent); }

/* ---------- lightbox ---------- */
/* .lightbox sets display:flex, which outranks the UA's [hidden]{display:none}
   — without this the overlay would never actually hide. */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: rgba(4, 5, 8, .93);
  backdrop-filter: blur(10px);
}
.lightbox__frame {
  position: relative;
  width: min(94vw, 1180px);
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: #000;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 1);
}
.lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lightbox__close {
  position: absolute;
  top: 22px; right: 24px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(7, 8, 12, .6);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
}
.lightbox__close:hover { border-color: var(--accent-45); color: var(--accent); }
.lightbox__caption {
  position: absolute;
  left: 24px; bottom: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-3);
}

/* ==========================================================================
   Creators
   ========================================================================== */

.expand {
  display: grid;
  grid-template-columns: 5fr 1fr 1fr 1fr;
  gap: 8px;
  height: 460px;
  transition: grid-template-columns .55s var(--ease), grid-template-rows .55s var(--ease);
}
.panel {
  position: relative;
  min-width: 76px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--stripe);
  cursor: pointer;
  transition: border-color .45s ease;
}
.panel__photo {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}
.panel__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: grayscale(1) brightness(.5);
  transition: transform .6s var(--ease), filter .5s ease, object-position .6s var(--ease);
}
.panel__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(7, 8, 12, .97) 0%, rgba(7, 8, 12, .9) 32%, rgba(7, 8, 12, .62) 58%, rgba(7, 8, 12, .25) 82%, transparent);
}
.panel__open {
  position: absolute;
  left: 22px; right: 22px; bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease .1s;
}
.panel__kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.panel__name {
  font-weight: 800;
  font-stretch: 112%;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -.025em;
}
.panel__blurb {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(233, 237, 243, .62);
  max-width: 38ch;
}
.panel__stats {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.panel__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.panel__tags span {
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.panel__cta {
  margin-top: 6px;
  align-self: flex-start;
  pointer-events: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
/* The whole open tile is the link. A stretched overlay anchor does it: a
   pseudo-element on .panel__cta would only cover .panel__open, since that is
   the nearest positioned ancestor, not the panel. The visible CTA stays as
   the labelled link for screen readers and keyboard; this one is hidden from
   both. Only the open panel gets a hit area — on a collapsed one a click
   still just opens it, which is what makes this work on touch: first tap
   opens, second tap follows the link. */
.panel__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
}
.panel[data-active="true"] .panel__hit { display: block; }
.panel[data-active="true"] { cursor: pointer; }
.panel[data-active="true"]:hover .panel__cta { color: var(--accent-hover); }
/* Decorative label — never intercept the click meant for the tile. */
.panel__closed { pointer-events: none; }
.panel__closed {
  position: absolute;
  left: 14px; bottom: 18px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(7, 8, 12, .72);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transform-origin: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity .3s ease;
}
.panel[data-active="true"] { border-color: var(--accent-45); }
.panel[data-active="true"] .panel__photo img { filter: none; transform: scale(1.03); object-position: center 38%; }
.panel[data-active="true"] .panel__open { opacity: 1; }
.panel[data-active="true"] .panel__closed { opacity: 0; }

/* ==========================================================================
   Services + process
   ========================================================================== */

/* Four services, so the grid is 2x2 rather than auto-fit: three columns
   left the fourth tile orphaned on its own row, in the same bottom-left
   corner the floating CTA occupies. */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
}
.tile {
  position: relative;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--outline);
  padding: 34px 26px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .4s ease;
}
.tile:hover { background: var(--tile-hover); }
.tile__line {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.tile:hover .tile__line { transform: scaleX(1); }
.tile__ico { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }
.tile__ico [data-part] { transition: transform .6s var(--ease), stroke .4s ease; }
.tile__kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--accent);
}
.tile h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.tile p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted-2); }

/* icon hover choreography */
.tile:hover [data-part="head"] { transform: translateX(18px); }
.tile:hover [data-part="fill"] { transform: scaleX(3.2); }
.tile:hover [data-part="play"] { transform: scale(1.25); transform-origin: 21px 20px; }
.tile:hover [data-part="wave"] { stroke: var(--accent); }
.tile:hover [data-part="hill"] { transform: translateY(-3px); }
.tile:hover [data-part="b1"] { transform: scaleY(1.7); }
.tile:hover [data-part="b2"] { transform: scaleY(.55); transition-delay: .05s; }
.tile:hover [data-part="b3"] { transform: scaleY(.4); transition-delay: .1s; }
.tile:hover [data-part="b4"] { transform: scaleY(1.5); transition-delay: .15s; }
.tile:hover [data-part="b5"] { transform: scaleY(1.9); transition-delay: .2s; }
[data-part^="b"] { transform-origin: center 20px; }

.process { margin-top: 90px; }
.process__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(233, 237, 243, .5);
}
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 16px;
}
.step {
  position: relative;
  overflow: hidden;
  padding: 24px 24px 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(233, 237, 243, .045), rgba(233, 237, 243, .012));
  display: flex;
  flex-direction: column;
  transition: border-color .4s ease, transform .5s var(--ease);
}
.step:hover { border-color: var(--accent-45); transform: translateY(-4px); }
.step__num {
  position: absolute;
  right: 14px; top: -14px;
  font-weight: 900;
  font-stretch: 118%;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -.05em;
  color: rgba(233, 237, 243, .055);
  pointer-events: none;
  transition: color .45s ease, transform .5s var(--ease);
}
.step:hover .step__num { color: var(--accent-16); transform: translateY(4px); }
.step__sprockets { display: flex; gap: 7px; margin-bottom: 20px; }
.step__sprockets span { width: 9px; height: 13px; border-radius: 2px; background: rgba(233, 237, 243, .09); }
.step__kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--accent);
  margin-bottom: 10px;
}
.step h3 { margin: 0 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.step p { margin: 0 0 22px; font-size: 13.5px; line-height: 1.6; color: var(--muted-2); }
.step__bar { margin-top: auto; height: 2px; background: rgba(233, 237, 243, .1); }
.step__bar i {
  display: block;
  height: 100%;
  width: var(--fill);
  background: var(--accent);
  transform: scaleX(.35);
  transform-origin: left;
  transition: transform .7s var(--ease);
}
.step:hover .step__bar i { transform: scaleX(1); }

/* ==========================================================================
   About
   ========================================================================== */

/* The text column runs much longer than the one-sentence card beside it, so
   the columns are weighted rather than equal, and the tools moved out to a
   full-width row underneath — otherwise the right side ended in ~320px of
   empty page. */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 56px;
  align-items: start;
}
.about__tools {
  margin-top: clamp(40px, 6vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.about__col { display: flex; flex-direction: column; gap: 24px; }
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(233, 237, 243, .5);
}
.about h2 {
  margin: 0;
  font-weight: 800;
  font-stretch: 110%;
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: .98;
  letter-spacing: -.03em;
}
.about h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
/* 58ch left ~150px of the column unused. 76ch fills it while staying inside
   a comfortable measure; the column itself is what caps the line now. */
.about p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); max-width: 76ch; }

.divider-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-3);
}

.tools { display: flex; flex-wrap: wrap; gap: 12px; }
.tool {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 24px 15px 15px;
  border: 1px solid var(--line-2);
  border-radius: 13px;
  background: rgba(233, 237, 243, .03);
  transition: border-color .4s ease, background .4s ease, transform .45s var(--ease);
}
.tool:hover { border-color: var(--accent-45); background: rgba(233, 237, 243, .06); transform: translateY(-3px); }
.tool img { width: 56px; height: 56px; border-radius: 10px; transition: transform .45s var(--ease); }
.tool:hover img { transform: scale(1.1) rotate(-4deg); }
.tool__name { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.tool__role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-3);
}

/* "Come lavoriamo" — one sentence, so it is set as a statement rather than
   as body copy in a box: quotation mark, display size, accent rule, and a
   way out to the contact section. */
.spec-card {
  position: relative;
  align-self: start;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 38px 34px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(90, 183, 255, .10), transparent 60%),
    var(--card);
  transition: border-color .45s ease;
}
.spec-card:hover { border-color: var(--accent-45); }
/* An oversized quote mark, set in the display face and kept faint. */
.spec-card::before {
  content: "\201C";
  position: absolute;
  top: -22px;
  right: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 150px;
  line-height: 1;
  color: var(--accent);
  opacity: .13;
  pointer-events: none;
}
.spec-card__title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.spec-card__title::after {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--accent-45);
}
.spec-card p {
  margin: 0;
  position: relative;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  letter-spacing: -.005em;
  color: var(--text);
  text-wrap: pretty;
}
.spec-card__cta {
  position: relative;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  padding-block: 10px;
  border-bottom: 1px solid var(--accent-22);
  transition: color .3s ease, border-color .3s ease;
}
.spec-card__cta:hover { color: var(--accent-hover); border-color: var(--accent); }
.spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.spec-row span:first-child { color: var(--muted-3); }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact {
  position: relative;
  padding: 72px var(--pad-x) 96px;
  overflow: hidden;
}
.contact__glow {
  position: absolute;
  left: 50%; bottom: -40%;
  width: 80vw; height: 70vh;
  transform: translateX(-50%);
  pointer-events: none;
  filter: blur(100px);
  opacity: .6;
  background: radial-gradient(circle, rgba(90, 183, 255, .32), transparent 66%);
}
.contact__head { position: relative; max-width: 46ch; }
.contact__head p { margin-top: 14px; }

/* Booking left, written brief right — two parallel options, equal weight. */
.contact__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}
.contact h2 {
  margin: 0;
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(38px, 6vw, 100px);
  line-height: .9;
  letter-spacing: -.035em;
}
.contact p { margin: 0; max-width: 38ch; font-size: 15px; line-height: 1.7; color: var(--muted); }

/* The three channels sit in one horizontal strip above the two options,
   rather than as a vertical list inside a column. */
.contact__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 44px 0 56px;
  background: var(--line-2);
  border-block: 1px solid var(--line-2);
}
.link-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  background: var(--bg);
  font-size: 15px;
  font-weight: 600;
  transition: color .3s ease, background .35s ease;
}
.link-row:hover { color: var(--accent); background: var(--tile-hover); }
.link-row__ico {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(233, 237, 243, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(233, 237, 243, .75);
  transition: border-color .35s ease, color .35s ease, transform .45s var(--ease);
}
.link-row:hover .link-row__ico { border-color: var(--accent); color: var(--accent); transform: scale(1.08); }
.link-row__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.link-row__label { line-height: 1.2; }
.link-row__meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--muted-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brief {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  padding: 34px 30px 30px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: rgba(233, 237, 243, .03);
  backdrop-filter: blur(8px);
}
.brief__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-3);
}
/* Each field is a labelled pair. The label used to be visually hidden with the
   placeholder standing in for it — which vanished on the first keystroke and
   sat at 2.4:1, under AA, while being the only thing naming the field. */
.brief__field { display: flex; flex-direction: column; gap: 7px; }
.brief__field-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.brief input,
.brief textarea {
  background: rgba(233, 237, 243, .04);
  /* .38 rather than the site's --line-2 (.14): a control boundary has to clear
     3:1 under WCAG 1.4.11, and .14 measured 1.47 against the field. */
  border: 1px solid rgba(233, 237, 243, .38);
  border-radius: 4px;
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  resize: vertical;
  transition: border-color .3s ease, background .3s ease;
}
/* .50 clears 4.5:1 on the field; the label above carries the meaning either way. */
.brief input::placeholder,
.brief textarea::placeholder { color: rgba(233, 237, 243, .5); }
.brief input:hover,
.brief textarea:hover { border-color: rgba(233, 237, 243, .55); }
/* `outline: none` used to sit here and, at (0,1,1), beat the global
   :focus-visible rule at (0,1,0) — so tabbing into the form lost the ring
   entirely. The ring stays; the accent border is the resting emphasis. */
.brief input:focus-visible,
.brief textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}
.brief input:focus,
.brief textarea:focus { border-color: var(--accent); background: rgba(233, 237, 243, .06); }
.brief [aria-invalid="true"] { border-bottom-color: #ff7a7a; }
.brief__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: none;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.brief__submit {
  align-self: flex-start;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
}
.brief__note { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-4); }
.brief__status { font-size: 13.5px; line-height: 1.5; color: var(--accent); min-height: 0; }
.brief__status[data-state="error"] { color: #ff9b9b; }

.footer-row {
  position: relative;
  margin-top: 90px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-4);
}

/* ==========================================================================
   Case study pages
   ========================================================================== */

.case-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.case-tab {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.case-tab:hover { border-color: var(--accent); color: var(--accent); }
.case-tab[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }

.case-hero {
  position: relative;
  min-height: 76svh;
  display: flex;
  align-items: flex-end;
  padding: 150px var(--pad-x) 80px;
  overflow: hidden;
}
.case-hero__bg {
  position: absolute;
  inset: -40px;
  background-image: var(--cover);
  background-size: cover;
  background-position: center;
  filter: blur(26px);
  opacity: .38;
}
.case-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg) 4%, rgba(7, 8, 12, .72) 52%, rgba(7, 8, 12, .34));
}
.case-hero__inner { position: relative; display: flex; flex-direction: column; gap: 22px; max-width: 1100px; }
.case-hero h1 {
  margin: 0;
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(46px, 9vw, 140px);
  line-height: .86;
  letter-spacing: -.04em;
}
.case-hero p { margin: 0; max-width: 56ch; font-size: 16px; line-height: 1.65; color: var(--muted); }
.case-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.case-facts div { display: flex; flex-direction: column; gap: 6px; }
.case-facts span:first-child { color: var(--muted-4); }
.case-facts span:last-child { color: var(--muted); }

.case-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 64px;
  align-items: start;
}
.case-two h2 {
  margin: 0;
  font-weight: 800;
  font-stretch: 110%;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.case-two p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
.case-list { display: flex; flex-direction: column; }
.case-list div {
  display: flex;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--muted-2);
}
.case-list div:last-child { border-bottom: 1px solid var(--line); }
.case-list span:first-child {
  flex: none;
  width: 82px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--accent);
  padding-top: 3px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 14px;
}
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  background-image: var(--stripe);
  cursor: pointer;
  padding: 0;
  transition: transform .45s var(--ease), border-color .35s ease;
}
/* The 480/640 covers are 4:3 with letterbox bars; cropping to the 16:9 box
   lands on the frame itself. */
.video > img, .thumb > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video:hover { transform: scale(1.014); border-color: var(--accent-45); }
/* 48 and 64 thumbnails in one grid is a wall of scrolling, so the long ones
   open on a dozen and expand from a button. Pure CSS: the script only flips
   data-collapsed. */
/* Mollu and Tumblurr only have six videos each. In the three-column grid the
   page read as unfinished, so there they go two-up and twice the size: the
   same material, laid out as a choice rather than a shortage. */
.video-grid[data-sparse="true"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }

/* ---------- showcase: one big player, the rest as a playlist ----------
   Mollu and Tumblurr have six videos each. A trail would loop every few
   seconds and read as repetition, so with few items the answer is bigger and
   interactive rather than faster: pick from the list, the choice fills the
   main frame, click the frame to play it. */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.showcase__main {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--stripe);
  cursor: pointer;
  transition: border-color .35s ease;
}
.showcase__main:hover, .showcase__main:focus-visible { border-color: var(--accent-45); }
.showcase__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showcase__title {
  position: absolute;
  left: 20px; right: 20px; bottom: 16px;
  text-align: left;
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.3;
  color: var(--text);
}
.showcase__list { display: flex; flex-direction: column; gap: 8px; }
.showcase__item {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease;
}
.showcase__item:hover { background: var(--tile-hover); }
.showcase__item[aria-current="true"] { border-color: var(--accent-45); background: var(--tile-hover); }
/* height:auto matters — the img carries a height attribute, which lands as a
   presentational hint and would otherwise beat aspect-ratio and make every
   row 180px tall. */
.showcase__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 3px;
}
.showcase__label {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.showcase__item[aria-current="true"] .showcase__label { color: var(--text); }

@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; }
  .showcase__list { max-height: 300px; overflow-y: auto; }
}
.more-wrap { display: flex; justify-content: center; margin-top: 28px; }
.more {
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
}
.more:hover { border-color: var(--accent-45); color: var(--accent); }
.video__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(233, 237, 243, .5);
  background: rgba(7, 8, 12, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.video:hover .video__play { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
}
.thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  background-image: var(--stripe);
  transition: transform .45s var(--ease), border-color .35s ease;
}
.thumb:hover { transform: translateY(-4px) scale(1.012); border-color: var(--accent-45); }

/* ---------- cover trails ----------
   Forty-five and sixty-four covers in a static grid is the same wall the
   video lists had. They run as trails instead, built like the home reels:
   each row duplicated and translated by half its width for a seamless loop.
   Rows are capped at ~22 covers because past roughly 16k pixels the browser
   stops rasterising the moving track in one piece and the motion stutters. */
.cover-reel {
  overflow: hidden;
  margin-inline: calc(var(--pad-x) * -1);
  padding-block: 5px;
}
.cover-reel + .cover-reel { margin-top: 14px; }
.cover-reel__track {
  display: flex;
  width: max-content;
  animation: reel 64s linear infinite;
  will-change: transform;
}
.cover-reel--rev .cover-reel__track { animation-duration: 78s; animation-direction: reverse; }
.cover-reel:hover .cover-reel__track,
.cover-reel:focus-within .cover-reel__track,
.cover-reel[data-paused="true"] .cover-reel__track { animation-play-state: paused; }
.cover {
  position: relative;
  flex: 0 0 auto;
  width: min(52vw, 240px);
  margin-right: 14px;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  transition: border-color .35s ease, transform .35s var(--ease);
}
.cover:hover, .cover:focus-visible { border-color: var(--accent-45); transform: translateY(-3px); }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.others {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
}
.other {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: border-color .35s ease, transform .45s var(--ease);
}
.other:hover { border-color: var(--accent-45); transform: translateY(-3px); }
.other__n { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--accent); }
.other__name { font-weight: 800; font-stretch: 110%; font-size: 24px; letter-spacing: -.02em; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .hero__row p { max-width: 100%; }
}

@media (max-width: 900px) {
  /* 2x2 collapses to a single column before the tiles get too narrow. */
  .tiles { grid-template-columns: 1fr; }
  :root { --pad-x: 20px; }

  .site-nav { display: none; }
  .nav-toggle { display: flex; }

  .section { padding: 56px var(--pad-x); }
  .contact { padding: 56px var(--pad-x) 76px; }
  .section-head { margin-bottom: 34px; }

  .hero { padding: 118px var(--pad-x) 96px; }
  .hero__row p { font-size: 15px; }

  .expand {
    grid-template-columns: 1fr;
    grid-template-rows: 5fr 1fr 1fr 1fr;
    height: 620px;
  }
  .panel__closed { writing-mode: horizontal-tb; transform: none; left: 16px; bottom: 14px; }
  .panel__name { font-size: 30px; }

  .about__grid { grid-template-columns: 1fr; }
  .about__grid,
  .contact__grid,
  .case-two { gap: 40px; }

  /* The case tabs drop to their own scrollable row under the header. */
  .site-header { flex-wrap: wrap; row-gap: 12px; }
  .case-tabs {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .case-tabs::-webkit-scrollbar { display: none; }
  .case-tab { flex: none; }
  .case-hero { padding: 170px var(--pad-x) 60px; min-height: 62svh; }
  .timecode { display: none; }
}

@media (max-width: 560px) {
  .site-header { gap: 12px; padding: 14px var(--pad-x); }
  .wordmark__name { font-size: 12px; letter-spacing: .1em; }
  .nav-toggle { padding: 7px 12px; }
  .hero__row { gap: 26px; }
  .hero__ctas { width: 100%; }
  .hero__ctas .pill { flex: 1 1 auto; justify-content: center; }
  .brief { padding: 26px 20px 24px; }
  .tool { padding: 12px 18px 12px 12px; }
  .tool img { width: 44px; height: 44px; }
  .case-list span:first-child { width: 64px; }
  .link-row { font-size: 15px; }
  .link-row__meta { font-size: 11px; }
}

@media (hover: none) {
  /* Touch devices get the hover states unlocked so nothing stays hidden. */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .trk__row,
  .playhead,
  .hero__glows i,
  .rec__dot,
  .hero__foot .rail-v::after { animation: none !important; opacity: .8; }
  .js [data-reveal] { opacity: 1; transform: none; }
  /* Keep the glow field, drop its motion: still atmosphere, no drift. */
  .ambient { transform: none !important; }
  .ambient i { animation: none !important; }
  /* The blanket animation kill above would leave the trails frozen mid-loop
     with half the cards off-screen, so give them back a normal scroll. */
  .reel { overflow-x: auto; }
  .reel__track { animation: none !important; padding-inline: var(--pad-x); }
  .reel__track .card[aria-hidden="true"] { display: none; }
  .cover-reel { overflow-x: auto; }
  .cover-reel__track { animation: none !important; padding-inline: var(--pad-x); }
  .cover-reel__track .cover[aria-hidden="true"] { display: none; }
}

@media print {
  .grain, .scrub-track, .timecode, .site-header { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   Booking — the primary path. Calendly is embedded rather than linked, so a
   slot can be picked without leaving the page.
   ========================================================================== */
.booking {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 26px 26px;
  border-radius: 6px;
  border: 1px solid var(--accent-22);
  background:
    linear-gradient(180deg, rgba(90, 183, 255, .07), transparent 220px),
    var(--card);
}
.booking::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 6px 6px 0 0;
}
.booking__copy { display: flex; flex-direction: column; gap: 12px; }
.booking__copy h3 {
  margin: 0;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -.015em;
}
.booking__copy p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted-2); max-width: 46ch; }
.booking__meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.booking__embed { min-height: 120px; border-radius: 4px; overflow: hidden; }
.booking__loading {
  margin: 0;
  padding: 28px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-3);
}
/* Calendly paints its own white card unless the iframe is left transparent. */
.booking__embed iframe { border-radius: 4px; }


@media (max-width: 900px) {
  .booking { padding: 26px 20px 22px; }
}

/* The written brief now carries its own header, matching the booking card. */
.brief__copy { display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; }
.brief__copy h3 {
  margin: 0;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -.015em;
}
.brief__copy p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted-2); }
.booking { height: 100%; }

@media (max-width: 900px) {
  .contact__links { grid-template-columns: 1fr; margin: 32px 0 40px; }
  .contact__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ==========================================================================
   Touch targets — WCAG 2.2 asks for 24x24 CSS px minimum. These were inline
   links at 15-16px tall, and the accordion CTA is the section's main action.
   ========================================================================== */
.panel__cta { padding-block: 12px; }
/* The nav is a control group, not prose, so the 24px floor applies to it. */
.site-nav a { padding-block: 8px; }
.wordmark { padding-block: 8px; }
.footer-row a { padding-block: 10px; display: inline-block; }

@media (max-width: 900px) {
  .nav-toggle { min-height: 44px; }
  .lang-toggle { min-height: 44px; display: inline-flex; align-items: center; }
  .chip { min-height: 44px; }
}

@media (max-width: 700px) {
  .card__play { width: 44px; height: 44px; font-size: 13px; }
  .lightbox { padding: 20px 14px; }
  .lightbox__close { top: 12px; right: 14px; }
}

/* ==========================================================================
   Catalogo — centinaia di video non sono una griglia, sono un archivio.
   Gli anni si aprono uno per volta e una ricerca porta dritta a un titolo.
   ========================================================================== */
.catalogo__barra {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.catalogo__cerca {
  flex: 1 1 auto;
  max-width: 420px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  transition: border-color .3s ease;
}
.catalogo__cerca::placeholder { color: rgba(233, 237, 243, .38); }
.catalogo__cerca:focus { outline: none; border-color: var(--accent-45); }
.catalogo__esito,
.catalogo__vuoto {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(233, 237, 243, .5);
}
.catalogo__vuoto { padding: 40px 0; text-align: center; }

/* L'anno è un <details>: aprire e chiudere lo fa il browser, senza JS. */
.anno { border-top: 1px solid var(--line); }
.anno:last-of-type { border-bottom: 1px solid var(--line); }
.anno__testa {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 2px;
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .3s ease;
}
.anno__testa::-webkit-details-marker { display: none; }
.anno__testa:hover { color: var(--accent); }
.anno__num { font-size: 15px; }
.anno__conta { font-size: 11px; color: rgba(233, 237, 243, .5); }
/* La freccia gira all'apertura: dice da sola cosa succede al clic. */
.anno__testa::after {
  content: "";
  width: 7px; height: 7px;
  margin-left: auto;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.anno[open] .anno__testa::after { transform: rotate(-135deg); }
.anno > .video-grid { padding: 4px 0 30px; }

/* La scheda ora è miniatura più testo, non più solo un rettangolo. */
.catalogo .video-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 22px 18px;
}
.catalogo .video {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: none;
  text-align: left;
}
.video__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  background-image: var(--stripe);
  transition: border-color .35s ease;
}
/* La regola di sopra prende `.video > img`, ma qui l'immagine sta dentro
   il riquadro: senza questa resterebbe alta 720px come dice l'attributo. */
.video__thumb > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.catalogo .video:hover { transform: none; }
.catalogo .video:hover .video__thumb,
.catalogo .video:focus-visible .video__thumb { border-color: var(--accent-45); }
/* Il cerchio grande stava bene su una scheda da 340px, qui soffoca. */
.catalogo .video__play { width: 46px; height: 46px; font-size: 13px; }
.video__durata {
  position: absolute;
  right: 7px; bottom: 7px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(7, 8, 12, .82);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--text);
}
.video__meta { display: block; }
.video__titolo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(233, 237, 243, .88);
  transition: color .3s ease;
}
.catalogo .video:hover .video__titolo { color: var(--accent); }
.video__data {
  display: block;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(233, 237, 243, .42);
}

@media (max-width: 560px) {
  .catalogo__barra { flex-direction: column; align-items: stretch; gap: 10px; }
  .catalogo__cerca { max-width: none; }
  .catalogo .video-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 18px 12px; }
  .catalogo .video__play { width: 36px; height: 36px; font-size: 11px; }
  .video__titolo { font-size: 12px; }
}

/* ==========================================================================
   Video in evidenza — un punto di partenza sopra il catalogo: chi arriva
   vede un lavoro solo invece di duecento tutti insieme.
   ========================================================================== */
.evidenza {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin-bottom: 34px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.evidenza__frame {
  position: relative;
  display: block;
  padding: 0;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  background-image: var(--stripe);
  cursor: pointer;
  transition: border-color .35s ease;
}
.evidenza__frame:hover, .evidenza__frame:focus-visible { border-color: var(--accent-45); }
.evidenza__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.evidenza__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 1px solid rgba(233, 237, 243, .5);
  background: rgba(7, 8, 12, .42);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: 17px;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.evidenza__frame:hover .evidenza__play { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.evidenza__occhiello {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(233, 237, 243, .5);
}
.evidenza__titolo { margin: 12px 0 0; font-size: clamp(20px, 2.4vw, 30px); line-height: 1.22; }
.evidenza__meta {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(233, 237, 243, .45);
}
@media (max-width: 760px) {
  .evidenza { grid-template-columns: 1fr; gap: 16px; }
  .evidenza__play { width: 54px; height: 54px; font-size: 14px; }
}

/* ==========================================================================
   Anteprima al passaggio — l'immagine cambia dentro la stessa cornice, così
   niente si sposta. Il fondo scuro evita il lampo bianco fra un fotogramma
   e l'altro; il puntino dice che sta girando davvero.
   ========================================================================== */
.video__thumb { background-color: #0b0d13; }
.video.sta-girando .video__thumb::after {
  content: "";
  position: absolute;
  left: 8px; bottom: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(122, 162, 255, .6);
  animation: pulsa 1.4s ease-out infinite;
}
@keyframes pulsa {
  to { box-shadow: 0 0 0 9px rgba(122, 162, 255, 0); }
}
.video.sta-girando .video__play { opacity: .25; }
.catalogo .video__play {
  transition: opacity .3s ease, background .35s ease, color .35s ease, border-color .35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .video.sta-girando .video__thumb::after { animation: none; }
}