/* ============================================================
   UNYKONN — Site components  v2

   STRUCTURAL IDEA
   The product is an interface: the controlled point where two
   parts meet. The page is built the same way — a fixed index
   rail on the left, content on the right, and a continuous
   hairline running between them for the whole length of the
   document. Full-bleed media is the only thing allowed to
   cross that line.

   BACKWARDS COMPATIBILITY
   Every v1 class (.section .heading .card .card--stat .btn
   .nav-pill .tc-flow .tc-heading .reveal .panel .timeline) is
   preserved so solutions.html / design-in.html / material.html /
   products.html keep rendering until they are rebuilt.
   New pages use the .sect / .rail / .mediabreak system.
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--uk-header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--sds-color-background-default-default);
  color: var(--sds-color-text-default-default);
  font-family: var(--sds-typography-family-body);
  font-size: var(--sds-typography-body-size);
  font-weight: var(--sds-typography-body-weight);
  line-height: var(--sds-typography-body-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--sds-color-background-brand-default);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--sds-color-background-brand-default); color: #fff;
  padding: 12px 18px; font-family: var(--sds-typography-family-mono); font-size: 12px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Page shell ---------- */
.page { max-width: 100%; margin: 0 auto; }

.shell {
  max-width: var(--uk-measure);
  margin: 0 auto;
  padding-left: var(--uk-gutter);
  padding-right: var(--uk-gutter);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.title-hero {
  font-family: var(--sds-typography-family-display);
  font-size: clamp(40px, 6.6vw, var(--sds-typography-title-hero-size));
  font-weight: var(--sds-typography-title-hero-weight);
  line-height: var(--sds-typography-title-hero-line);
  letter-spacing: var(--sds-typography-title-hero-tracking);
  margin: 0;
  text-wrap: balance;
}

/* v2 — the missing tier. Section headings live here, not in .heading. */
.display {
  font-family: var(--sds-typography-family-display);
  font-size: var(--sds-typography-display-size);
  font-weight: var(--sds-typography-display-weight);
  line-height: var(--sds-typography-display-line);
  letter-spacing: var(--sds-typography-display-tracking);
  margin: 0;
  text-wrap: balance;
}

.subtitle {
  font-size: clamp(19px, 2.2vw, var(--sds-typography-subtitle-size));
  font-weight: var(--sds-typography-subtitle-weight);
  line-height: var(--sds-typography-subtitle-line);
  letter-spacing: var(--sds-typography-subtitle-tracking);
  color: var(--sds-color-text-default-secondary);
}

.heading {
  font-family: var(--sds-typography-family-display);
  font-size: var(--sds-typography-heading-size);
  font-weight: var(--sds-typography-heading-weight);
  line-height: var(--sds-typography-heading-line);
  letter-spacing: var(--sds-typography-heading-tracking);
  margin: 0;
}

.subheading {
  font-size: var(--sds-typography-subheading-size);
  font-weight: var(--sds-typography-subheading-weight);
  line-height: 1.2;
  color: var(--sds-color-text-default-secondary);
}

.lede {
  font-size: var(--sds-typography-lede-size);
  line-height: var(--sds-typography-lede-line);
  max-width: 66ch;
}
.lede + .lede { margin-top: 1em; }

.eyebrow,
.section-label {
  display: block;
  font-family: var(--sds-typography-family-mono);
  font-size: var(--sds-typography-eyebrow-size);
  font-weight: var(--sds-typography-eyebrow-weight);
  letter-spacing: var(--sds-typography-eyebrow-tracking);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--sds-color-text-default-secondary);
}

.text-secondary { color: var(--sds-color-text-default-secondary); }
.hl  { color: var(--sds-color-text-brand-default); }
.dim { color: var(--sds-color-text-default-tertiary); }

.mono {
  font-family: var(--sds-typography-family-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ============================================================
   BUTTON
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sds-size-space-200);
  padding: 14px 22px;
  border-radius: var(--sds-size-radius-200);
  border: var(--sds-size-stroke-border) solid transparent;
  font-family: var(--sds-typography-family-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s var(--uk-ease);
}
.btn:active { transform: translateY(1px); }

.btn--brand {
  background: var(--sds-color-background-brand-default);
  border-color: var(--sds-color-border-brand-default);
  color: #fff;
}
.btn--brand:hover { background: var(--sds-color-background-brand-hover); border-color: var(--sds-color-background-brand-hover); }

/* #9 — bordo sottile, angoli molto stondati, mono largo */
.btn--neutral {
  background: transparent;
  border-color: currentColor;
  color: var(--sds-color-text-default-default);
  border-radius: 14px;
  padding: 17px 30px;
  letter-spacing: .22em;
  opacity: .85;
  transition: opacity .2s ease, background-color .2s ease;
}
.btn--neutral:hover { opacity: 1; background: rgba(0,0,0,.035); }
.band--dark .btn--neutral,
.videosection .btn--neutral,
.terminal .btn--neutral { color: #fff; }
.band--dark .btn--neutral:hover { background: rgba(255,255,255,.07); }

.btn--ghost-inverse {
  background: transparent;
  border-color: var(--sds-color-border-inverse-default);
  color: var(--sds-color-text-inverse-default);
}
.btn--ghost-inverse:hover { border-color: var(--sds-color-text-inverse-default); }

.btn--sm { padding: 10px 16px; font-size: 10px; }

/* Text link with an arrow that travels on hover */
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sds-typography-family-mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sds-color-text-brand-default);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.link-arrow::after { content: "→"; transition: transform .25s var(--uk-ease); }
.link-arrow:hover { border-color: currentColor; }
.link-arrow:hover::after { transform: translateX(5px); }

/* ============================================================
   HEADER
   ============================================================ */

.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--sds-color-background-default-default) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: var(--sds-size-stroke-border) solid var(--sds-color-border-hairline);
  transition: border-color .3s ease;
}
.header__inner {
  max-width: var(--uk-measure); margin: 0 auto;
  padding: 0 var(--uk-gutter);
  height: var(--uk-header-h);
  display: flex; align-items: center; gap: var(--sds-size-space-600);
}
.header.is-scrolled { border-bottom-color: var(--sds-color-border-default-default); }

.header__logo { display: flex; align-items: center; flex-shrink: 0; }
.header__logo img { height: 26px; width: auto; }

.nav-pill-list {
  flex: 1 0 0; min-width: 1px;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(4px, 1.4vw, 22px);
}

.nav-pill {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 8px 2px;
  font-size: 15px; line-height: 1;
  color: var(--sds-color-text-default-secondary);
  transition: color .2s ease;
}
.nav-pill::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--sds-color-background-brand-default);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--uk-ease);
}
.nav-pill:hover { color: var(--sds-color-text-default-default); }
.nav-pill:hover::after { transform: scaleX(1); }
.nav-pill.is-active { color: var(--sds-color-text-default-default); }
.nav-pill.is-active::after { transform: scaleX(1); }

.header__cta { flex-shrink: 0; }

.nav-toggle {
  display: none; flex-shrink: 0;
  width: 40px; height: 40px; padding: 0;
  background: none; border: 1px solid var(--sds-color-border-default-default);
  border-radius: var(--sds-size-radius-200); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 16px; height: 1px; background: currentColor; position: relative; }
.nav-toggle span::before,
.nav-toggle span::after { content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: currentColor; }
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after  { top: 5px; }

@media (max-width: 1020px) {
  .nav-toggle { display: inline-flex; }
  .header__cta { display: none; }
  .nav-pill-list { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: calc(100vh - var(--uk-header-h));
  min-height: var(--uk-hero-h);
  /* Niente justify-content: flex-end — spingerebbe in basso ANCHE la
     fascia superiore. L'ancoraggio lo fa margin-top:auto su __inner. */
  display: flex; flex-direction: column;
  border-bottom: var(--sds-size-stroke-border) solid var(--sds-color-border-hairline);
  background: var(--sds-color-background-default-default);
}
/* Il contenuto poggia sul fondo dello schermo: uno schermo pieno con il
   titolo a metà legge come vuoto, con il titolo in basso legge come
   deliberato — e lascia intravedere che sotto continua. */
.hero__inner { margin-top: auto; }
.hero__inner {
  max-width: var(--uk-measure); margin: 0 auto;
  padding: clamp(56px, 8vw, 128px) var(--uk-gutter) clamp(72px, 7vw, 112px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: center;
}
@media (max-width: 980px) { .hero__inner { grid-template-columns: 1fr; } }

.hero__text { display: flex; flex-direction: column; gap: var(--sds-size-space-600); }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  padding-bottom: 6px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sds-size-space-300); margin-top: var(--sds-size-space-400); }

.hero__asset {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 280px;
  background: var(--sds-color-background-default-secondary);
  border: var(--sds-size-stroke-border) solid var(--sds-color-border-hairline);
  overflow: hidden;
}
.hero__asset iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Corner ticks — technical-drawing register, used on asset frames */
.ticked { position: relative; }
.ticked::before,
.ticked::after {
  content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none;
  border-color: var(--sds-color-background-brand-default); border-style: solid; border-width: 0;
}
.ticked::before { top: 8px; left: 8px; border-top-width: 1px; border-left-width: 1px; }
.ticked::after { bottom: 8px; right: 8px; border-bottom-width: 1px; border-right-width: 1px; }

/* Hero for interior pages: title + subtitle, no asset column */
.hero--lead .hero__inner {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: end;
  padding-top: clamp(48px, 6vw, 104px);
  padding-bottom: clamp(76px, 7.5vw, 120px);
}
@media (max-width: 980px) { .hero--lead .hero__inner { grid-template-columns: 1fr; } }

/* ============================================================
   SECTION + RAIL   — the core v2 pattern
   ============================================================ */

.sect {
  max-width: var(--uk-measure);
  margin: 0 auto;
  padding: var(--uk-rhythm) var(--uk-gutter);
  display: grid;
  grid-template-columns: var(--uk-rail) minmax(0, 1fr);
  gap: 0 clamp(20px, 3.5vw, 56px);
  position: relative;
}

/* La rail e i blocchi a piena pagina sono entrambi position:relative con
   z-index auto: vince l'ordine nel DOM, e .sect__body viene dopo. Senza
   questo z-index l'asset scorreva sopra "01 ABOUT US". */
.sect__rail {
  position: relative;
  align-self: stretch;
  z-index: 3;
}
.sect__rail-inner {
  position: sticky;
  top: calc(var(--uk-header-h) + var(--sds-size-space-800));
  display: flex; flex-direction: column; gap: 10px;
  padding-right: var(--sds-size-space-400);
}
/* Gerarchia invertita: il numero è un'etichetta, il nome della sezione
   è il titolo. Prima il numero era il doppio del nome e l'occhio leggeva
   "07" invece di "DESIGN IN". */
.sect__num {
  font-family: var(--sds-typography-family-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .16em;
  color: var(--sds-color-text-default-secondary);
}
.sect__tag { color: var(--sds-color-text-brand-default); }
/* Stesso font del numero e di tutto il registro tecnico: JetBrains Mono.
   Cambia solo il peso visivo, non la lingua tipografica.
   21px con tracking .06em tiene 12 caratteri nei 176px della rail:
   due righe su quasi tutti i nomi, tre sul solo "Where performance
   begins", dove PERFORMANCE da sola occupa 11 caratteri. */
/* Voce 26: CERTIFICATIONS misurava 194px contro i 176 della rail e
   scavalcava la linea verticale. È una parola sola, non si spezza.
   Misurato sul font reale: a 18px la parola più larga sta in 166px,
   con margine. overflow-wrap resta come rete di sicurezza se un domani
   arriva un nome più lungo. */
.sect__tag {
  font-family: var(--sds-typography-family-mono);
  font-size: clamp(13px, 1.25vw, 18px);
  max-width: 100%;
  overflow-wrap: anywhere;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: .06em;
  text-transform: uppercase;
  max-width: none;
}

/* The hairline. Draws down once when the section is revealed. */
.sect__line {
  position: absolute;
  top: 0; bottom: 0; right: 0; width: 1px;
  background: var(--sds-color-border-hairline);
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.1s var(--uk-ease);
}
.sect.is-visible .sect__line { transform: scaleY(1); }

.sect__body { display: flex; flex-direction: column; gap: var(--uk-rhythm-tight); min-width: 0; }
.sect__head { display: flex; flex-direction: column; gap: var(--sds-size-space-600); }
.sect__head .lede { color: var(--sds-color-text-default-secondary); }

@media (max-width: 900px) {
  .sect {
    grid-template-columns: 1fr;
    gap: var(--sds-size-space-600);
    padding-top: var(--uk-rhythm-tight);
    padding-bottom: var(--uk-rhythm-tight);
  }
  .sect__rail { align-self: start; }
  .sect__rail-inner {
    position: static;
    flex-direction: row; align-items: baseline; gap: 14px;
    padding: 0 0 var(--sds-size-space-400);
    border-bottom: 1px solid var(--sds-color-border-hairline);
  }
  .sect__num { font-size: 10px; }
  .sect__tag { font-size: clamp(13px, 3.6vw, 17px); }
  .sect__tag { max-width: none; }
  .sect__line { display: none; }
}

/* v1 compatibility — pages not yet rebuilt */
.section {
  max-width: var(--uk-measure); margin: 0 auto;
  display: flex; flex-direction: column;
  gap: var(--sds-size-space-1200);
  padding: var(--uk-rhythm-tight) var(--uk-gutter);
  background: var(--sds-color-background-default-default);
}
.tc-heading { display: flex; flex-direction: column; gap: var(--sds-size-space-300); }
.tc-flow    { display: flex; flex-direction: column; gap: var(--sds-size-space-600); min-width: 300px; max-width: 74ch; }

/* ============================================================
   MEDIA BREAK — full bleed, crosses the rail
   ============================================================ */

.mediabreak {
  margin: 0;
  position: relative;
  width: 100%;
  background: var(--uk-gray-1000);
  overflow: hidden;
}
.mediabreak--tall   { aspect-ratio: 21 / 9; }
.mediabreak--wide   { aspect-ratio: 16 / 9; }
/* #5 — 2.4:1 su una sorgente 1.38 toglieva il 42% dell'altezza.
   16:9 lascia l'edificio intero. */
.mediabreak--panorama { aspect-ratio: 16 / 9; }
@media (max-width: 760px) {
  .mediabreak--tall,
  .mediabreak--panorama { aspect-ratio: 4 / 3; }
}

.mediabreak > img,
.mediabreak > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Frame with the site's own gutter — used when the asset is an
   iframe that should not be edge-to-edge */
.mediabreak--framed {
  max-width: var(--uk-measure); margin: 0 auto;
  padding: 0 var(--uk-gutter);
  background: none;
}
/* Il palco degli asset era stilizzato SOLO dentro .mediabreak--framed.
   Tre stage su sette stanno dentro una sezione, senza quel contenitore:
   restavano ai 300x150 di default dell'iframe, e il contenuto veniva
   tagliato. La regola ora vale ovunque. */
.mediabreak__stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; width: 100%;
  background: var(--sds-color-background-default-secondary);
  border: var(--sds-size-stroke-border) solid var(--sds-color-border-hairline);
}
.mediabreak__stage iframe,
.mediabreak--framed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* A piena pagina: l'asset esce dalla colonna della sezione e dai gutter,
   perché il contenuto dentro l'iframe è disegnato per uno schermo largo.
   Nella misura del testo veniva compresso e le etichette si tagliavano. */
/* 100vw include la barra di scorrimento e su desktop sfonderebbe di
   ~15px. --uk-vw viene misurata da layout.js con document.documentElement
   .clientWidth, che la scrollbar non la conta. */
.sect__body > .mediabreak__stage,
.sect__body > .reveal.mediabreak__stage {
  width: var(--uk-vw, 100vw);
  margin-left: calc(50% - var(--uk-vw, 100vw) / 2);
  margin-right: calc(50% - var(--uk-vw, 100vw) / 2);
  margin-top: clamp(34px, 4vw, 64px);
  border-left: 0; border-right: 0;
}
.mediabreak--framed {
  max-width: none; margin: 0; padding: 0;
  background: none;
}



.mediabreak__cap span:first-child { background: var(--sds-color-background-brand-default); }

/* Diptych — two frames, one hairline between them */
.diptych { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--sds-color-border-hairline); }
@media (max-width: 760px) { .diptych { grid-template-columns: 1fr; } }
/* #5 "cercare di non tagliare la foto dello stabilimento": il contenitore
   prende il rapporto della sorgente (1.38) invece di imporre 4:3, e
   object-fit passa a contain. Zero ritaglio. */
.diptych figure { margin: 0; position: relative; background: var(--uk-gray-1000); aspect-ratio: 1.38; overflow: hidden; }
.diptych img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* #12 — al posto della targhetta, il logo verticale sul fotogramma "dopo" */
.diptych figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(16px,2.2vw,26px);
  font-family: var(--sds-typography-family-mono);
  font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(11,11,12,.78), transparent);
}
.diptych figure.is-now figcaption { display: grid; gap: 12px; justify-items: start; }
.diptych figure.is-now .uklogo { width: min(150px, 44%); height: auto; color: #fff; }

/* Con entrambi i fotogrammi a colori il contrasto prima/dopo non passa
   più dal trattamento: lo porta una riga Signal Blue sul "dopo". */
.diptych figure.is-now::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--sds-color-background-brand-default); z-index: 3;
}

/* Inline video frame inside a section */
.vframe { position: relative; background: var(--uk-gray-1000); overflow: hidden; aspect-ratio: 16 / 9; }
.vframe video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   GRIDS + CARDS
   ============================================================ */

/* v2 — real grid, no flex-wrap orphans */
.grid { display: grid; gap: 1px; background: var(--sds-color-border-hairline); border: 1px solid var(--sds-color-border-hairline); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) { .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1020px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; } }

.cell {
  background: var(--sds-color-background-default-default);
  padding: clamp(20px, 2.2vw, 34px);
  display: flex; flex-direction: column; gap: var(--sds-size-space-400);
  min-width: 0;
}
.cell__key {
  font-family: var(--sds-typography-family-mono);
  font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sds-color-text-default-tertiary);
}
.cell__value {
  font-family: var(--sds-typography-family-display);
  font-size: clamp(24px, 2.5vw, 36px); font-weight: 500;
  letter-spacing: -0.028em; line-height: 1.02;
}
.cell p { color: var(--sds-color-text-default-secondary); font-size: 15px; line-height: 1.5; }
.cell--link { transition: background-color .25s ease; }
a.cell--link:hover { background: var(--sds-color-background-default-secondary); }
a.cell--link:hover .cell__value,
a.cell--link:hover .cell__title { color: var(--sds-color-text-brand-default); }
.cell__title { font-family: var(--sds-typography-family-display); font-size: 19px; font-weight: 500; letter-spacing: -0.018em; line-height: 1.2; transition: color .2s ease; }

/* Product family cell: 3:4 asset viewport + label */
.cell--family { padding: 0; }
.cell--family .cell__viewer { aspect-ratio: 3 / 4; position: relative; background: var(--sds-color-background-default-secondary); overflow: hidden; }
.cell--family .cell__viewer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cell--family .cell__foot { padding: 18px clamp(16px, 1.8vw, 24px) 22px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* v1 compatibility */
.cards { display: flex; flex-wrap: wrap; gap: var(--sds-size-space-600); align-items: stretch; width: 100%; }
.cards--gap-lg { gap: var(--sds-size-space-1600); }
.card {
  flex: 1 0 0; min-width: 240px;
  display: flex; flex-wrap: wrap; gap: var(--sds-size-space-600);
  align-items: flex-start; padding: 22px 22px 20px;
  border-radius: var(--sds-size-radius-card);
}
.card--bordered { background: var(--sds-color-background-default-default); border: var(--sds-size-stroke-border) solid var(--sds-color-border-default-default); }
.card--column { flex-direction: column; flex-wrap: nowrap; }
.card__body { flex: 1 0 0; min-width: 160px; display: flex; flex-direction: column; gap: var(--sds-size-space-400); }
.card__text { display: flex; flex-direction: column; gap: var(--sds-size-space-200); }
.card__label { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--sds-color-text-default-secondary); }
.card__image { width: 100%; height: 393px; border-radius: 6px; background: var(--sds-color-background-neutral-tertiary); object-fit: cover; overflow: hidden; }
.card ul { margin: 0; padding-left: 24px; color: var(--sds-color-text-default-secondary); }
.card--stat {
  flex: 1 0 0; min-width: 240px;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sds-size-space-600); padding: var(--sds-size-space-600);
  background: var(--sds-color-background-default-default);
  border: var(--sds-size-stroke-border) solid var(--sds-color-border-default-default);
  border-radius: var(--sds-size-radius-200);
}
.card--stat .stat__body { display: flex; flex-direction: column; align-items: center; gap: var(--sds-size-space-100); text-align: center; }
.stat__value { font-family: var(--sds-typography-family-display); font-size: 32px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.stat__label {
  font-family: var(--sds-typography-family-mono);
  font-size: var(--sds-typography-eyebrow-size); font-weight: 500;
  letter-spacing: var(--sds-typography-eyebrow-tracking); text-transform: uppercase;
  color: var(--sds-color-text-default-secondary);
}
.cards--cols-3 > .card { flex: 1 0 calc(33.333% - var(--sds-size-space-400)); }
@media (max-width: 980px) { .cards--cols-3 > .card { flex-basis: calc(50% - var(--sds-size-space-300)); } }
@media (max-width: 640px) { .cards--cols-3 > .card { flex-basis: 100%; } }
.icon-info { width: 32px; height: 32px; flex-shrink: 0; }
.panel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-size-space-1200); padding: var(--sds-size-space-1600); }
.panel__image { flex: 1 1 380px; min-width: 300px; height: 350px; border-radius: 6px; background: var(--sds-color-background-neutral-tertiary); overflow: hidden; }
.panel__image img { width: 100%; height: 100%; object-fit: contain; }
.panel__content { flex: 1 1 380px; min-width: 300px; display: flex; flex-direction: column; gap: var(--sds-size-space-600); }
.asset-embed { width: 100%; border: 0; display: block; }
.asset-embed--16-9 { aspect-ratio: 16 / 9; }

/* ============================================================
   STEP SEQUENCE — horizontal scroll on wide, stack on narrow
   ============================================================ */

.steps {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 1px; background: var(--sds-color-border-hairline);
  border: 1px solid var(--sds-color-border-hairline);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.steps::-webkit-scrollbar { height: 3px; }
.steps::-webkit-scrollbar-thumb { background: var(--sds-color-border-default-default); }
.step {
  background: var(--sds-color-background-default-default);
  padding: clamp(20px, 2.2vw, 32px);
  display: flex; flex-direction: column; gap: var(--sds-size-space-400);
  scroll-snap-align: start;
  position: relative;
}
.step__num {
  font-family: var(--sds-typography-family-mono);
  font-size: 11px; font-weight: 500; letter-spacing: .16em;
  color: var(--sds-color-text-brand-default);
}
.step__title { font-family: var(--sds-typography-family-display); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.step p { color: var(--sds-color-text-default-secondary); font-size: 15px; line-height: 1.5; }
@media (max-width: 760px) { .steps { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; } }

/* ============================================================
   TIMELINE
   ============================================================ */

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline__item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: clamp(16px, 3vw, 44px);
  padding: clamp(20px, 2.6vw, 34px) 0;
  border-top: 1px solid var(--sds-color-border-hairline);
  position: relative;
}
.timeline__item:last-child { border-bottom: 1px solid var(--sds-color-border-hairline); }
.timeline__year {
  font-family: var(--sds-typography-family-mono);
  font-size: clamp(15px, 1.5vw, 19px); font-weight: 500; letter-spacing: .04em;
  color: var(--sds-color-text-default-tertiary);
  transition: color .3s ease;
}
.timeline__item--highlight .timeline__year { color: var(--sds-color-text-brand-default); }
.timeline__item--highlight { background: linear-gradient(90deg, var(--uk-brand-100), transparent 60%); }
.timeline__content { display: flex; flex-direction: column; gap: 8px; max-width: 68ch; }
.timeline__title { font-family: var(--sds-typography-family-display); font-size: 19px; font-weight: 500; letter-spacing: -0.018em; line-height: 1.2; margin: 0; }
.timeline__body { color: var(--sds-color-text-default-secondary); font-size: 15px; line-height: 1.55; }
.timeline__dot { display: none; }
@media (max-width: 640px) { .timeline__item { grid-template-columns: 1fr; gap: 8px; } }

/* ============================================================
   THE NAME — signature block
   ============================================================ */

.namewall {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px); align-items: center;
}
@media (max-width: 900px) { .namewall { grid-template-columns: 1fr; } }
/* ---------- Namemark ----------
   Il wordmark NON si compone con un font di sistema: era Manrope 600,
   che non è la faccia del marchio. Un logo scritto in testo vivo
   diventa Arial il giorno che il webfont non carica. Qui va il
   vettoriale vero, con i 优尼康 in filigrana dietro. */
/* ---------- Namemark ----------
   Tre problemi risolti insieme:

   1. I 优尼康 uscivano dal riquadro. Erano dimensionati in vw, che non
      sa nulla della larghezza del contenitore: dentro una colonna
      stretta i tre caratteri finivano tagliati. Ora la misura viene
      dal contenitore (container query): 3 caratteri a 27cqi con .04em
      di tracking occupano l'84% della larghezza, sempre.

   2. Il grigio era troppo scuro per una filigrana.

   3. Marchio e "unykonn" prendono la stessa larghezza dei caratteri,
      e il payoff esce dal blocco e va sotto: dentro l'SVG era
      inseparabile, l'ho estratto e il viewBox è ritagliato su
      marchio + wordmark (x 93-497.5, y 24-254.5). */
.namemark {
  container-type: inline-size;
  position: relative; overflow: hidden;
  display: grid; justify-items: center; align-content: center;
  gap: clamp(14px, 2.4cqi, 26px);
  padding: clamp(40px, 7cqi, 88px) clamp(20px, 4cqi, 56px);
  border: 1px solid var(--sds-color-border-hairline);
  background: var(--sds-color-background-default-default);
}
.namemark__hanzi {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 0; text-align: center;
  /* ripiego per browser senza container query: la vw sbaglia dentro
     una colonna, ma è meglio di un font-size mancante */
  font-size: clamp(72px, 13vw, 190px);
  font-size: 27cqi;
  font-weight: 400; line-height: 1;
  letter-spacing: .04em;
  color: var(--uk-gray-100);
  pointer-events: none; user-select: none; white-space: nowrap;
}
.namemark__lock { position: relative; z-index: 1; width: min(340px, 76%); width: 84cqi; }
.namemark__lock .uklogo { width: 100%; height: auto; }
.namemark__payoff {
  position: relative; z-index: 1;
  font-family: var(--sds-typography-family-body);
  font-weight: 500;
  /* Larghezza calcolata, non stimata: il testo misura 17.03em in
     Manrope 500 e ha 31 caratteri. Con tracking .16em, un corpo di
     3.82cqi dà 3.82 x (17.03 + 31 x .16) = 84cqi, esattamente quanto
     il lockup sopra. */
  font-size: 3.82cqi;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sds-color-text-default-tertiary);
  white-space: nowrap;
}
.band--dark .namemark {
  border-color: rgba(255,255,255,.16);
  background: var(--sds-color-background-inverse-default);
}
.band--dark .namemark__hanzi { color: rgba(255,255,255,.16); }
.band--dark .namemark__payoff { color: var(--sds-color-text-inverse-secondary); }

/* ---------- Logo: un solo file, il colore lo dà il contesto ---------- */
.uklogo { display: block; }
.uklogo .uk-mk,
.uklogo .uk-wd { fill: currentColor; }
.uklogo .uk-py { fill: currentColor; opacity: .62; }

/* Header: marchio + wordmark, senza payoff. Rapporto 559/144 = 3.88. */
.header__logo { color: var(--sds-color-text-default-default); }
/* Header alto 74px: a 46px restano 14px sopra e sotto. Oltre, il logo
   tocca i bordi. */
.header__logo .uklogo { height: 46px; width: auto; }
@media (max-width: 620px) { .header__logo .uklogo { height: 32px; } }

/* Footer: nel lockup originale il payoff non parte dal marchio, parte
   dal wordmark — x 162 su un ritaglio che comincia a 16, cioe' al 26.1%
   della larghezza del logo, ed e' largo quanto il wordmark (72.5%).

   Quelle due misure vincolano tutto il resto. Con "UNIQUE CONNECTIONS.
   ONE VISION." in Manrope 500, larga 17.03em senza tracking, per stare
   nel 72.5% ed essere leggibile (>=9px) il logo deve essere alto 66px:
   a 46px il payoff sarebbe uscito a 5.9px. Tracking sceso da .155 a
   .12em per non dover crescere ancora. */
.footer__logo {
  /* Larghezza dichiarata e limitata alla colonna: fra 1180 e 1280px la
     colonna del marchio scende a 270px, e un lockup fisso da 326 finiva
     sopra la colonna NAVIGATE. */
  --uk-logo-w: min(100%, 326px);
  position: relative;
  display: block;
  width: var(--uk-logo-w);
  color: var(--sds-color-text-inverse-default);
}
.footer__logo .uklogo { width: 100%; height: auto; display: block; }

.footer__payoff {
  /* Allineato al WORDMARK, non centrato sul lockup: centrandolo sui 326px
     del logo intero il payoff sporgeva a sinistra della "u", sotto il
     marchio. Il wordmark parte al 26,12% della larghezza dell'SVG.
     Il corpo e' calibrato perche' la riga sia larga esattamente quanto
     "unykonn": a letter-spacing .12em il testo misura 20,702px per ogni px
     di corpo e il wordmark e' il 72,45% del lockup -> 0,034995 px di corpo
     per px di larghezza. Il cap a 11,4px e' il valore a lockup pieno
     (prima erano 9px fissi).
     Il -0.14em corregge lo spazio fra il bordo della riga e la cima delle
     maiuscole (Manrope ha altezza maiuscola .72em). */
  position: absolute;
  top: calc(76.4% - .14em);
  left: 26.12%;
  font-family: var(--sds-typography-family-body);
  font-weight: 500;
  font-size: 11.4px;
  font-size: min(11.4px, 3.4995cqw);
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sds-color-text-inverse-secondary);
  white-space: nowrap;
}


@media (max-width: 620px) {
  /* Sotto i 620px il lockup scende a 248px di larghezza e il payoff
     andrebbe sotto gli 8,7px: si toglie. Meglio senza che illeggibile. */
  .footer__logo { --uk-logo-w: min(100%, 248px); }
  .footer__payoff { display: none; }
}

/* ============================================================
   SOLUTIONS EXPLORER
   ============================================================ */

.sol-tabs { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--sds-color-border-hairline); }
.sol-tabs button {
  appearance: none; border: 0; cursor: pointer;
  background: var(--sds-color-background-default-default);
  color: var(--sds-color-text-default-secondary);
  font-family: var(--sds-typography-family-mono);
  font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  padding: 14px 18px; flex: 1 0 auto;
  border-right: 1px solid var(--sds-color-border-hairline);
  transition: background-color .2s ease, color .2s ease;
}
.sol-tabs button:last-child { border-right: 0; }
.sol-tabs button:hover { color: var(--sds-color-text-default-default); background: var(--sds-color-background-default-secondary); }
.sol-tabs button.is-active { background: var(--sds-color-background-brand-default); color: #fff; }

.sol-stage {
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  gap: 1px; background: var(--sds-color-border-hairline);
  border: 1px solid var(--sds-color-border-hairline); border-top: 0;
}
@media (max-width: 900px) { .sol-stage { grid-template-columns: 1fr; } }

.sol-submenu { background: var(--sds-color-background-default-default); display: flex; flex-direction: column; padding: 8px 0; }
.sol-submenu button {
  appearance: none; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--sds-typography-family-mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sds-color-text-default-secondary);
  padding: 10px 20px; position: relative;
  transition: color .2s ease;
}
.sol-submenu button::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  background: var(--sds-color-background-brand-default); transform: scaleY(0);
  transition: transform .25s var(--uk-ease);
}
.sol-submenu button:hover { color: var(--sds-color-text-default-default); }
.sol-submenu button.is-active { color: var(--sds-color-text-default-default); }
.sol-submenu button.is-active::before { transform: scaleY(1); }

/* #11 — testo sopra, immagine sotto */
.sol-card { background: var(--sds-color-background-default-default); display: grid; grid-template-columns: 1fr; gap: 0; }
.sol-card-text { padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.sol-card-title { font-family: var(--sds-typography-family-display); font-size: clamp(21px, 2.1vw, 30px); font-weight: 500; letter-spacing: -0.026em; line-height: 1.1; margin: 0; }
.sol-card-body { color: var(--sds-color-text-default-secondary); font-size: 15px; line-height: 1.55; }
.sol-card-cta { padding: 0 clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px); order: 2; }
.sol-card-text { order: 1; }
.sol-card-image { order: 3; }

.sol-card-image {
  /* La fascia prende il rapporto del disegno, non un 21/9 fisso: sei
     disegni su sette sono quadrati, e in un riquadro 21/9 occupavano il
     43% della larghezza lasciando due bande grigie vuote ai lati.
     --sol-ar la imposta lo script, leggendola dall'SVG stesso. */
  position: relative;
  background: var(--sds-color-background-default-secondary);
  aspect-ratio: var(--sol-ar, 1);
  max-height: 78vh;
  display: grid; place-items: center;
  overflow: hidden;
  border-top: 1px solid var(--sds-color-border-hairline);
}
.sol-figure {
  /* E' esattamente il riquadro del disegno, e i pin stanno qui dentro.
     Prima erano percentuali della fascia: finivano nel grigio, lontani
     dal punto che dovevano indicare. */
  position: relative;
  height: 100%;
  aspect-ratio: var(--sol-ar, 1);
  max-width: 100%;
}
.sol-figure img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sol-pin-layer { position: absolute; inset: 0; pointer-events: none; }
.sol-pin { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 7px; }
.sol-pin .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sds-color-background-brand-default); box-shadow: 0 0 0 3px rgba(46,107,230,.18); flex-shrink: 0; }
.sol-pin .pin-label {
  font-family: var(--sds-typography-family-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--sds-color-background-default-default); color: var(--sds-color-text-default-default);
  border: 1px solid var(--sds-color-border-hairline); padding: 3px 7px; white-space: nowrap;
}
.sol-pin.flip-left { flex-direction: row-reverse; }

/* ============================================================
   PAGE CTA + FOOTER — one continuous dark terminal
   ============================================================ */

.terminal { background: var(--sds-color-background-inverse-default); color: var(--sds-color-text-inverse-default); }

.page-cta {
  max-width: var(--uk-measure); margin: 0 auto;
  padding: var(--uk-rhythm) var(--uk-gutter) var(--uk-rhythm-tight);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 64px); align-items: end;
  border-bottom: 1px solid var(--sds-color-border-inverse-default);
}
@media (max-width: 860px) { .page-cta { grid-template-columns: 1fr; align-items: start; } }
.page-cta .display { color: var(--sds-color-text-inverse-default); }
.page-cta .heading { color: var(--sds-color-text-inverse-default); font-size: var(--sds-typography-display-size); line-height: var(--sds-typography-display-line); letter-spacing: var(--sds-typography-display-tracking); }
.page-cta .text-secondary,
.page-cta p { color: var(--sds-color-text-inverse-secondary); max-width: 56ch; }
.page-cta .eyebrow,
.page-cta .section-label { color: var(--sds-color-text-inverse-tertiary); }
.page-cta .tc-heading { display: flex; flex-direction: column; gap: var(--sds-size-space-400); }

.footer {
  max-width: var(--uk-measure); margin: 0 auto;
  padding: var(--uk-rhythm-tight) var(--uk-gutter) var(--sds-size-space-1600);
  display: grid;
  /* 268px: il blocco marchio+payoff ne misura 256. Con il minimo a 240
     il logo usciva dalla colonna. */
  grid-template-columns: minmax(268px, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: var(--sds-size-space-1200) var(--sds-size-space-400);
  align-items: start;
  background: transparent;
  border-top: 0;
}
@media (max-width: 1080px) { .footer { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 700px)  { .footer { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px)  { .footer { grid-template-columns: 1fr; } }

.footer__brand {
  display: flex; flex-direction: column; gap: var(--sds-size-space-600);
  /* Contesto per le container query: il corpo del payoff si misura sulla
     larghezza di QUESTA colonna, non sulla finestra. */
  container-type: inline-size;
}
@media (max-width: 1080px) { .footer__brand { grid-column: 1 / -1; } }
.footer__brand img { height: 36px; width: auto; }
.footer__brand p { color: var(--sds-color-text-inverse-secondary); font-size: 15px; line-height: 1.5; max-width: 34ch; }
.footer__social { display: flex; gap: var(--sds-size-space-400); align-items: center; }
.footer__social a { color: var(--sds-color-text-inverse-secondary); display: inline-flex; transition: color .2s ease; }
.footer__social a:hover { color: var(--sds-color-text-inverse-default); }
.footer__social svg { width: 20px; height: 20px; }

.footer__col { display: flex; flex-direction: column; gap: var(--sds-size-space-300); min-width: 0; }
.footer__col .eyebrow { color: var(--sds-color-text-inverse-tertiary); padding-bottom: var(--sds-size-space-200); }
.footer__col a { font-size: 15px; line-height: 1.45; color: var(--sds-color-text-inverse-secondary); transition: color .2s ease; }
.footer__col a:hover { color: var(--sds-color-text-inverse-default); }

.footer__legal {
  grid-column: 1 / -1;
  padding-top: var(--sds-size-space-800);
  border-top: 1px solid var(--sds-color-border-inverse-default);
  color: var(--sds-color-text-inverse-tertiary);
  font-family: var(--sds-typography-family-mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between;
}

/* ============================================================
   MOTION — reveal once, never loops
   ============================================================ */

.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--uk-dur) var(--uk-ease), transform var(--uk-dur) var(--uk-ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .sect__line { transform: scaleY(1); transition: none; }
  .link-arrow::after { transition: none; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Utilities ---------- */
.stack { display: flex; flex-direction: column; }
.stack--600 { gap: var(--sds-size-space-600); }
.stack--800 { gap: var(--sds-size-space-800); }
.row { display: flex; flex-wrap: wrap; gap: var(--sds-size-space-400); align-items: center; }
.hairline { height: 1px; background: var(--sds-color-border-hairline); border: 0; margin: 0; }

/* ============================================================
   v2.1 — ADDITIONS
   ============================================================ */

/* Subtitle: v1 had no spacing between stacked <p>, so three
   paragraphs ran together as one block. */
.subtitle p + p { margin-top: .42em; }

/* ---------- Legacy hero compat ----------
   v2.0 dropped .hero--title / .hero--asset / .section--overlap,
   which carried ALL the horizontal padding on the four pages that
   had not been rebuilt yet. Result: content at x=0. Restored and
   mapped onto the v2 shell so old markup lands on the new grid. */
.hero--title {
  display: block;
  max-width: var(--uk-measure); margin: 0 auto;
  padding: clamp(48px, 6vw, 104px) var(--uk-gutter) clamp(40px, 5vw, 80px);
}
.hero--title--split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}
@media (max-width: 980px) { .hero--title--split { grid-template-columns: 1fr; } }
.hero--asset {
  max-width: var(--uk-measure); margin: 0 auto;
  padding: 0 var(--uk-gutter) var(--uk-rhythm-tight);
  border-bottom: 0;
}
.section--overlap { padding-top: 0; }

/* ---------- Media cell: video header + text ---------- */
.cell--media { padding: 0; }
.cell--media .cell__media {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--uk-gray-1000); overflow: hidden;
}
.cell--media .cell__media video,
.cell--media .cell__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.cell--media .cell__pad {
  padding: clamp(20px, 2.2vw, 30px);
  display: flex; flex-direction: column; gap: var(--sds-size-space-300);
}
.cell--media .cell__pad ul { margin: 6px 0 0; padding-left: 18px; color: var(--sds-color-text-default-secondary); font-size: 14px; line-height: 1.55; }


/* ---------- Paired full-bleed video ---------- */
.vpair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--uk-gray-1000); }
@media (max-width: 700px) { .vpair { grid-template-columns: 1fr; } }
.vpair .mediabreak { aspect-ratio: 16 / 10; }

/* ---------- Certifications ---------- */
.cert-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--sds-color-border-hairline);
  border: 1px solid var(--sds-color-border-hairline);
}
@media (max-width: 860px) { .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cert-grid { grid-template-columns: 1fr; } }
.cert-card {
  background: var(--sds-color-background-default-default);
  padding: clamp(20px, 2.2vw, 32px);
  display: flex; flex-direction: column; gap: 8px;
}
.cert-card__title {
  font-family: var(--sds-typography-family-mono);
  font-size: 15px; font-weight: 500; letter-spacing: .02em; margin: 0;
}
.cert-card__body { color: var(--sds-color-text-default-secondary); font-size: 14px; line-height: 1.5; }

/* ---------- Products catalogue: align to the page grid ----------
   The catalogue block shipped with padding-inline: clamp(64px,10vw,180px)
   and no max-width, so it sat on a different left edge from every
   other block on the site and stretched to 100vw on wide screens. */
.results {
  max-width: var(--uk-measure); margin: 0 auto;
  padding-inline: var(--uk-gutter) !important;
  padding-block: var(--uk-rhythm-tight) !important;
}

/* ============================================================
   v2.3 — FULL-BLEED VIDEO SECTIONS + NUMBERED OVERLAY MENU
   ============================================================ */

/* ---------- Video hero: full viewport, video as background ---------- */
.videohero {
  position: relative;
  min-height: calc(100vh - var(--uk-header-h));
  min-height: var(--uk-hero-h);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  background: var(--uk-gray-1000);
  color: #fff;
  border-bottom: 0;
}
.videohero__bg { position: absolute; inset: 0; z-index: 0; }
.videohero__bg video,
.videohero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Scrim. Two layers: a flat darkener for contrast, and a bottom ramp
   so the type sits on solid tone without hiding the whole frame. */
.videohero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(11,11,12,.92) 0%, rgba(11,11,12,.35) 45%, rgba(11,11,12,.15) 100%),
    rgba(11,11,12,.28);
}

.videohero__inner {
  position: relative; z-index: 2;
  max-width: var(--uk-measure); width: 100%; margin: 0 auto;
  padding: 0 var(--uk-gutter) clamp(40px, 6vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}
@media (max-width: 980px) { .videohero__inner { grid-template-columns: 1fr; } }

.videohero .title-hero { color: #fff; }
.videohero .subtitle,
.videohero .subtitle p { color: rgba(255,255,255,.74); }
.videohero .eyebrow { color: rgba(255,255,255,.62); }
.videohero .btn--neutral { border-color: rgba(255,255,255,.34); color: #fff; }
.videohero .btn--neutral:hover { border-color: #fff; }

.videohero__top {
  position: relative; z-index: 2;
  max-width: var(--uk-measure); width: 100%; margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) var(--uk-gutter) 0;
  flex: 1 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}

/* Scroll cue — a hairline that fills once, then stops. No loop. */
.scrollcue {
  position: absolute; left: 50%; bottom: 0; z-index: 3;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding-bottom: 14px;
}
.scrollcue span {
  font-family: var(--sds-typography-family-mono);
  font-size: 9px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.scrollcue i {
  display: block; width: 1px; height: 46px;
  background: rgba(255,255,255,.22); position: relative; overflow: hidden;
}
.scrollcue i::after {
  content: ""; position: absolute; inset: 0;
  background: var(--sds-color-background-brand-default);
  transform: scaleY(0); transform-origin: top;
  animation: cue-fill 1.6s var(--uk-ease) .6s forwards;
}
@keyframes cue-fill { to { transform: scaleY(1); } }
.videohero.is-past .scrollcue,
.logohero.is-past .scrollcue,
.hero.is-past .scrollcue { opacity: 0; transition: opacity .4s ease; }

/* ---------- Video as background of a normal section ---------- */
.videosection { position: relative; overflow: hidden; background: var(--uk-gray-1000); color: #fff; }
.videosection__bg { position: absolute; inset: 0; z-index: 0; }
.videosection__bg video,
.videosection__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Lo scrim serve al testo, non al video. Prima copriva tutto il
   fotogramma (94% a sinistra, 45% ancora a destra) e la ripresa non si
   vedeva più. Ora è confinato alla colonna di testo e a 60% della
   larghezza è già zero: l'ultima metà del fotogramma è video pulito. */
.videosection__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(11,11,12,.86)  0%,
    rgba(11,11,12,.80) 28%,
    rgba(11,11,12,.42) 46%,
    rgba(11,11,12,0)   60%);
}
@media (max-width: 900px) {
  .videosection__bg::after {
    background: linear-gradient(180deg, rgba(11,11,12,.82) 0%, rgba(11,11,12,.74) 62%, rgba(11,11,12,.30) 100%);
  }
}
/* Perché lo scrim possa essere stretto, il testo deve stare stretto.
   Con la lede a 66ch la riga arrivava al 71% della pagina e lo scrim
   era costretto a coprire tutto. */
.videosection .lede { max-width: 46ch; }
.videosection .display { max-width: 15ch; }
@media (max-width: 900px) {
  .videosection .lede { max-width: 66ch; }
  .videosection .display { max-width: none; }
}
.videosection > .sect { position: relative; z-index: 2; }
.videosection .display,
.videosection .cell__value,
.videosection .cell__title { color: #fff; }
.videosection .lede,
.videosection p { color: rgba(255,255,255,.72); }
.videosection .sect__num { color: rgba(255,255,255,.45); }
.videosection.is-active .sect__num,

.videosection .sect__tag { color: var(--sds-color-background-brand-default); }
.videosection .sect__line { background: rgba(255,255,255,.16); }
.videosection .grid { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.16); }
.videosection .cell { background: rgba(11,11,12,.55); backdrop-filter: blur(2px); }
.videosection .cell__key { color: rgba(255,255,255,.5); }

/* ---------- Numbered overlay menu ---------- */
.navoverlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--uk-gray-1000); color: #fff;
  display: flex; flex-direction: column;
  padding: calc(var(--uk-header-h) + 24px) var(--uk-gutter) var(--uk-gutter);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--uk-ease), visibility .35s;
}
.navoverlay.is-open { opacity: 1; visibility: visible; }
.navoverlay__list {
  max-width: var(--uk-measure); width: 100%; margin: 0 auto;
  display: flex; flex-direction: column;
  flex: 1 0 auto; justify-content: center;
}
.navoverlay__item {
  display: grid; grid-template-columns: 56px 1fr; align-items: baseline;
  gap: 18px; padding: clamp(10px, 1.6vw, 18px) 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--uk-ease), transform .5s var(--uk-ease), color .2s ease;
  color: rgba(255,255,255,.82);
}
.navoverlay.is-open .navoverlay__item { opacity: 1; transform: none; }
.navoverlay__item:hover { color: #fff; }
.navoverlay__item:hover .navoverlay__label { color: var(--sds-color-background-brand-default); }
.navoverlay__num {
  font-family: var(--sds-typography-family-mono);
  font-size: 11px; letter-spacing: .16em; color: rgba(255,255,255,.4);
}
.navoverlay__label {
  font-family: var(--sds-typography-family-display);
  font-size: clamp(28px, 6vw, 56px); font-weight: 500;
  letter-spacing: -0.035em; line-height: 1; transition: color .2s ease;
}
.navoverlay__foot {
  max-width: var(--uk-measure); width: 100%; margin: 0 auto;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center;
}
.navoverlay__foot a { color: rgba(255,255,255,.6); font-size: 14px; }
.navoverlay__foot a:hover { color: #fff; }
body.nav-open { overflow: hidden; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { top: 0; transform: rotate(45deg); }
.nav-toggle.is-open span::after  { top: 0; transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .scrollcue i::after { transform: scaleY(1); animation: none; }
  .navoverlay, .navoverlay__item { transition: none; }
}

/* ============================================================
   v2.4 — SECTION GRAMMAR
   Patterns read from the live q-industrial.com DOM and rebuilt
   with Unykonn tokens:
     statement block · horizontal card rail · play-to-modal film ·
     numbered list · pre-footer big cards · newsletter strip
   ============================================================ */

/* ---------- Statement: heading alone, oversized, no eyebrow ---------- */
.statement-block {
  max-width: var(--uk-measure); margin: 0 auto;
  padding: var(--uk-rhythm) var(--uk-gutter);
  display: grid; grid-template-columns: var(--uk-rail) minmax(0, 1fr);
  gap: 0 clamp(20px, 3.5vw, 56px);
}
@media (max-width: 900px) { .statement-block { grid-template-columns: 1fr; } }
.statement-block__body { display: flex; flex-direction: column; gap: var(--sds-size-space-800); }
.statement-xl {
  font-family: var(--sds-typography-family-display);
  font-size: clamp(28px, 4.6vw, 66px);
  font-weight: 500; line-height: 1.02; letter-spacing: -0.035em;
  margin: 0; max-width: 20ch; text-wrap: balance;
}

/* ---------- Horizontal card rail ---------- */
.railcards {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(268px, 1fr);
  gap: 1px; background: var(--sds-color-border-hairline);
  border: 1px solid var(--sds-color-border-hairline);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.railcards::-webkit-scrollbar { height: 3px; }
.railcards::-webkit-scrollbar-thumb { background: var(--sds-color-border-default-default); }
.railcard {
  background: var(--sds-color-background-default-default);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  transition: background-color .25s ease;
}
a.railcard:hover { background: var(--sds-color-background-default-secondary); }
a.railcard:hover .railcard__title { color: var(--sds-color-text-brand-default); }
.railcard__media {
  aspect-ratio: 4 / 3; position: relative; overflow: hidden;
  background: var(--sds-color-background-default-secondary);
  border-bottom: 1px solid var(--sds-color-border-hairline);
}
.railcard__media img,
.railcard__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.railcard__body { padding: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; gap: 7px; flex: 1 0 auto; }
.railcard__kicker {
  font-family: var(--sds-typography-family-mono);
  font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sds-color-text-default-tertiary);
}
.railcard__title {
  font-family: var(--sds-typography-family-display);
  font-size: 21px; font-weight: 500; letter-spacing: -0.024em; line-height: 1.12;
  transition: color .2s ease;
}
.railcard__sub { color: var(--sds-color-text-default-secondary); font-size: 14px; line-height: 1.5; }
.rail-hint {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  font-family: var(--sds-typography-family-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sds-color-text-default-tertiary);
}

/* ---------- Play-to-modal film ---------- */
.filmblock { position: relative; width: 100%; aspect-ratio: 21 / 9; overflow: hidden; background: var(--uk-gray-1000); }
@media (max-width: 760px) { .filmblock { aspect-ratio: 4 / 3; } }
.filmblock > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.filmblock::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,11,12,.78), rgba(11,11,12,.18));
}
.filmblock__inner {
  position: relative; z-index: 2; height: 100%;
  max-width: var(--uk-measure); margin: 0 auto;
  padding: var(--uk-gutter);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 22px;
  color: #fff;
}
.filmblock__title {
  font-family: var(--sds-typography-family-display);
  font-size: clamp(24px, 3.6vw, 52px); font-weight: 500;
  line-height: 1.03; letter-spacing: -0.032em; margin: 0; max-width: 18ch;
}
.playbtn {
  display: inline-flex; align-items: center; gap: 14px;
  background: none; border: 0; padding: 0; cursor: pointer; color: #fff;
  font-family: var(--sds-typography-family-mono);
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
.playbtn i {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45);
  display: grid; place-items: center; flex-shrink: 0;
  transition: background-color .25s var(--uk-ease), border-color .25s var(--uk-ease);
}
.playbtn i::before {
  content: ""; width: 0; height: 0;
  border-left: 11px solid currentColor;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  margin-left: 3px;
}
.playbtn:hover i { background: var(--sds-color-background-brand-default); border-color: var(--sds-color-background-brand-default); }

.filmmodal {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(11,11,12,.94);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--uk-ease), visibility .3s;
}
.filmmodal.is-open { opacity: 1; visibility: visible; }
.filmmodal video { width: 100%; max-width: 1400px; height: auto; max-height: 84vh; display: block; background: #000; }
.filmmodal__close {
  position: absolute; top: clamp(14px, 3vw, 32px); right: clamp(14px, 3vw, 32px);
  background: none; border: 1px solid rgba(255,255,255,.3); color: #fff;
  width: 44px; height: 44px; cursor: pointer;
  font-family: var(--sds-typography-family-mono); font-size: 16px; line-height: 1;
  transition: border-color .2s ease;
}
.filmmodal__close:hover { border-color: #fff; }

/* ---------- Numbered list ---------- */
.numlist { border-top: 1px solid var(--sds-color-border-hairline); }
.numitem {
  display: grid; grid-template-columns: 52px minmax(0, .9fr) minmax(0, 1.4fr);
  gap: clamp(14px, 3vw, 44px); align-items: baseline;
  padding: clamp(20px, 2.4vw, 32px) 0;
  border-bottom: 1px solid var(--sds-color-border-hairline);
}
@media (max-width: 820px) { .numitem { grid-template-columns: 40px 1fr; } .numitem p { grid-column: 2; } }
.numitem__n {
  font-family: var(--sds-typography-family-mono);
  font-size: 11px; font-weight: 500; letter-spacing: .16em;
  color: var(--sds-color-text-brand-default);
}
.numitem__t {
  font-family: var(--sds-typography-family-display);
  font-size: clamp(19px, 1.9vw, 26px); font-weight: 500;
  letter-spacing: -0.024em; line-height: 1.12;
}
.numitem p { color: var(--sds-color-text-default-secondary); font-size: 15px; line-height: 1.55; }


/* ---------- Newsletter strip + back to top ---------- */
.striprow {
  max-width: var(--uk-measure); margin: 0 auto;
  padding: var(--uk-rhythm-tight) var(--uk-gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 56px); align-items: center;
  border-top: 1px solid var(--sds-color-border-hairline);
}
@media (max-width: 860px) { .striprow { grid-template-columns: 1fr; } }
.form-inline { display: flex; gap: 10px; width: min(420px, 100%); }
.input {
  flex: 1 0 0; min-width: 120px;
  padding: 14px 16px;
  border: 1px solid var(--sds-color-border-default-default);
  background: var(--sds-color-background-default-default);
  font: inherit; font-size: 15px; color: var(--sds-color-text-default-default);
  border-radius: var(--sds-size-radius-200);
}
.input::placeholder { color: var(--sds-color-text-default-tertiary); }
.totop {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sds-typography-family-mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sds-color-text-default-secondary);
}
.totop:hover { color: var(--sds-color-text-default-default); }

@media (prefers-reduced-motion: reduce) {
  .filmmodal { transition: none; }
}

/* ============================================================
   v2.5 — VIDEO IN EVIDENZA
   I tre banchi filmati erano celle di una griglia da otto: stessa
   dimensione delle celle di solo testo, con cui competevano.
   Ora sono un blocco a sé, a piena larghezza, sopra la lista.
   ============================================================ */

/* Strip video a piena larghezza, 1–3 riquadri, con didascalia */
.vstrip {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px; background: var(--uk-gray-1000);
  width: 100%;
}
@media (max-width: 860px) { .vstrip { grid-auto-flow: row; } }

/* Le clip sono tutte girate 16:9. Un contenitore 4:3 ne toglieva il 25%
   in altezza: sul dial table spariva la parte alta degli attuatori.
   La strip prende il rapporto delle riprese. */
.vstrip figure {
  margin: 0; position: relative; overflow: hidden;
  background: var(--uk-gray-1000); aspect-ratio: 16 / 9;
}
.vstrip--wide figure { aspect-ratio: 16 / 9; }
.vstrip video,
.vstrip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Le clip sono girate su acciaio chiaro: la sfumatura precedente
   arrivava a .18 gia' a meta' riquadro e sotto la didascalia restava
   metallo lucido. Ora la parte bassa e' scura sul serio fino a dove
   finisce il testo, e sfuma dopo. */
.vstrip figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(11,11,12,.94) 0%,
    rgba(11,11,12,.86) 18%,
    rgba(11,11,12,.62) 34%,
    rgba(11,11,12,.24) 55%,
    transparent 78%);
}

.vstrip figcaption {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(28px, 3.2vw, 44px) clamp(20px, 2.4vw, 34px) clamp(20px, 2.4vw, 34px);
  display: flex; flex-direction: column; gap: 8px; color: #fff;
  /* Velo locale, sopra quello del riquadro: scurisce solo la fascia dove
     c'e' scritto qualcosa invece di spegnere meta' fotogramma. Sommato
     alla sfumatura di figure::after porta il fondo dietro all'occhiello
     blu a ~0,80 di copertura: misurato 5,5:1 di contrasto nel punto
     peggiore delle due clip, sopra la soglia AA di 4,5:1. */
  background: linear-gradient(to top,
    rgba(11,11,12,.62) 0%,
    rgba(11,11,12,.52) 55%,
    rgba(11,11,12,.28) 82%,
    transparent 100%);
}
.vstrip__key {
  font-family: var(--sds-typography-family-mono);
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  /* Signal Blue (#2e6be6) su fotogramma di acciaio non si legge: e' un blu
     scuro su fondo chiaro-medio. Sui video si usa la variante chiara della
     stessa scala, che sul nero della sfumatura ha contrasto ~5:1. */
  color: var(--uk-brand-400);
  text-shadow: 0 1px 3px rgba(11,11,12,.85);
}
.vstrip__title {
  font-family: var(--sds-typography-family-display);
  font-size: clamp(19px, 1.9vw, 26px); font-weight: 500;
  letter-spacing: -0.024em; line-height: 1.1;
  text-shadow: 0 1px 4px rgba(11,11,12,.75);
}
.vstrip figcaption p {
  color: rgba(255,255,255,.88); font-size: 14px; line-height: 1.5; max-width: 40ch;
  text-shadow: 0 1px 3px rgba(11,11,12,.7);
}

/* Cornice a tacche sul riquadro video, registro da disegno tecnico */
.vstrip figure::before {
  content: ""; position: absolute; left: 14px; top: 14px; z-index: 2;
  width: 12px; height: 12px; pointer-events: none;
  /* Stessa ragione del key: in alto non c'e' sfumatura, il blu scuro
     spariva contro il metallo. */
  border-top: 1px solid var(--uk-brand-400);
  border-left: 1px solid var(--uk-brand-400);
  filter: drop-shadow(0 1px 2px rgba(11,11,12,.7));
}

/* Intestazione di blocco dentro una sezione */
.blockhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--sds-color-border-hairline);
}
.videosection .blockhead { border-color: rgba(255,255,255,.16); }

/* ============================================================
   v2.6 — VFOCUS: video annotato
   Il pezzo in misura occupa 9x4 px sul fotogramma. Il ricolore da
   solo non lo rende leggibile, quindi il blocco combina tre cose:
   base in bianco e nero, anello ricolorato in Signal Blue dentro il
   file video, e sopra un livello di annotazione — cerchio, linea di
   richiamo, callout e lente 6x sullo stesso file.
   Ancoraggio del pezzo: 33.91% / 76.39% del fotogramma.
   ============================================================ */

.vfocus {
  position: relative; margin: 0;
  width: 100%; aspect-ratio: 16 / 9;
  background: var(--uk-gray-1000); overflow: hidden;
}
.vfocus > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- livello annotazione ---- */
.vfocus__ann { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.vfocus__ann .ann-line { fill: none; stroke: var(--sds-color-background-brand-default); stroke-width: 1.4; }
.vfocus__ann .ann-circle {
  fill: none; stroke: var(--sds-color-background-brand-default); stroke-width: 1.6;
  stroke-dasharray: 190; stroke-dashoffset: 190;
  transition: stroke-dashoffset 1s var(--uk-ease) .15s;
}
.vfocus__ann .ann-leader {
  stroke-dasharray: 420; stroke-dashoffset: 420;
  transition: stroke-dashoffset .9s var(--uk-ease) .75s;
}
.vfocus__ann .ann-tick { stroke: var(--sds-color-background-brand-default); stroke-width: 1; opacity: 0; transition: opacity .4s ease 1.1s; }
.vfocus.is-visible .ann-circle,
.vfocus.is-visible .ann-leader { stroke-dashoffset: 0; }
.vfocus.is-visible .ann-tick { opacity: .85; }

/* ---- lente 6x sullo stesso file ---- */
.vfocus__loupe {
  position: absolute; z-index: 3;
  left: 60.2%; top: 9%;
  width: clamp(120px, 14vw, 196px); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--sds-color-background-brand-default);
  background: var(--uk-gray-1000);
  opacity: 0; transform: scale(.9);
  transition: opacity .5s var(--uk-ease) 1.15s, transform .5s var(--uk-ease) 1.15s;
}
.vfocus.is-visible .vfocus__loupe { opacity: 1; transform: none; }
/* La lente non ingrandisce il file principale via CSS: riproduce un
   file di dettaglio ritagliato dal master 1080p, quindi resta nitida.
   I due clip escono dalla stessa finestra temporale del master, sono
   allineati fotogramma per fotogramma. */
.vfocus__loupe video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vfocus__loupe::after {
  content: "Detail"; position: absolute; right: 8px; bottom: 6px; z-index: 2;
  font-family: var(--sds-typography-family-mono); font-size: 8px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sds-color-background-brand-default);
}

/* ---- callout ---- */
.vfocus__callout {
  position: absolute; z-index: 3;
  left: 60.2%; top: 50%; transform: translateY(-50%);
  width: min(300px, 32%);
  padding: 16px 18px;
  background: rgba(11,11,12,.74);
  backdrop-filter: blur(8px);
  border-left: 2px solid var(--sds-color-background-brand-default);
  color: #fff;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translate(10px, -50%);
  transition: opacity .55s var(--uk-ease) 1.25s, transform .55s var(--uk-ease) 1.25s;
}
.vfocus.is-visible .vfocus__callout { opacity: 1; transform: translateY(-50%); }
.vfocus__callout .k {
  font-family: var(--sds-typography-family-mono);
  font-size: 9px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sds-color-background-brand-default);
}
.vfocus__callout .t {
  font-family: var(--sds-typography-family-display);
  font-size: 18px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15;
}
.vfocus__callout p { color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.45; }
.vfocus__specs { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.16); }
.vfocus__specs span {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--sds-typography-family-mono); font-size: 10px; letter-spacing: .06em;
  color: rgba(255,255,255,.56);
}
.vfocus__specs b { color: #fff; font-weight: 500; }

/* ---- didascalia in basso a sinistra ---- */
.vfocus__cap {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  padding: clamp(20px, 2.4vw, 34px); max-width: 52%;
  display: flex; flex-direction: column; gap: 8px; color: #fff;
}
.vfocus::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(11,11,12,.8) 0%, rgba(11,11,12,.1) 40%, transparent 62%);
}

/* ---- sotto 900px: annotazione ridotta, callout impilato ---- */
@media (max-width: 900px) {
  .vfocus { aspect-ratio: 4 / 3; }
  .vfocus__ann .ann-leader { display: none; }
  .vfocus__loupe { left: auto; right: 4%; top: 5%; }
  .vfocus__callout {
    position: static; transform: none; width: auto;
    background: var(--uk-gray-1000); backdrop-filter: none;
    opacity: 1; padding: 18px 20px;
  }
  .vfocus.is-visible .vfocus__callout { transform: none; }
  .vfocus__cap { max-width: 100%; }
}
@media (max-width: 900px) {
  .vfocus-wrap { display: flex; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .vfocus__ann .ann-circle,
  .vfocus__ann .ann-leader { stroke-dashoffset: 0; transition: none; }
  .vfocus__ann .ann-tick { opacity: .85; transition: none; }
  .vfocus__loupe, .vfocus__callout { opacity: 1; transform: translateY(-50%); transition: none; }
  .vfocus__loupe { transform: none; }
}

/* ============================================================
   v2.7 — BANDE SCURE + TRANSIZIONI DI SEZIONE
   ============================================================ */

/* ---------- Banda scura ----------
   Regola: nero = le sezioni che parlano di identità e di sistema.
   Bianco = le sezioni che parlano di prodotto e di processo.
   Le stesse inversioni di .videosection, senza il video. */
.band--dark {
  background: var(--sds-color-background-inverse-default);
  color: var(--sds-color-text-inverse-default);
}
.band--dark .display,
.band--dark .statement-xl,
.band--dark .cell__value,
.band--dark .cell__title,
.band--dark .numitem__t,
.band--dark .title-hero,
.band--dark .heading { color: var(--sds-color-text-inverse-default); }
.band--dark .lede,
.band--dark p,
.band--dark .text-secondary { color: rgba(255,255,255,.72); }
.band--dark .sect__num { color: rgba(255,255,255,.45); }

.band--dark .sect__tag { color: var(--sds-color-background-brand-default); }
.band--dark .eyebrow,
.band--dark .section-label,
.band--dark .cell__key { color: rgba(255,255,255,.52); }
.band--dark .sect__line,
.band--dark .sect::before,
.band--dark .hairline { background: rgba(255,255,255,.16); }
.band--dark .grid,
.band--dark .cert-grid { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.16); }
.band--dark .cell,
.band--dark .cert-card { background: var(--sds-color-background-inverse-default); }
.band--dark a.cell--link:hover { background: var(--sds-color-background-inverse-secondary); }
.band--dark .numlist { border-color: rgba(255,255,255,.16); }
.band--dark .numitem { border-color: rgba(255,255,255,.16); }
.band--dark .btn--neutral { border-color: rgba(255,255,255,.3); color: #fff; }
.band--dark .btn--neutral:hover { border-color: #fff; }
.band--dark .namemark {
  border-color: rgba(255,255,255,.16);
  background:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 100% 28px,
    var(--sds-color-background-inverse-default);
}
.band--dark .namemark__hanzi { color: rgba(255,255,255,.34); }
.band--dark .namemark__payoff { color: rgba(255,255,255,.55); }
.band--dark .mediabreak__stage { background: var(--sds-color-background-inverse-secondary); border-color: rgba(255,255,255,.16); }
.band--dark .timeline__item,
.band--dark .timeline__item:last-child { border-color: rgba(255,255,255,.16); }
.band--dark .timeline__item--highlight { background: linear-gradient(90deg, rgba(46,107,230,.22), transparent 60%); }
.band--dark .timeline__body { color: rgba(255,255,255,.7); }
.band--dark .railcards { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.16); }
.band--dark .railcard { background: var(--sds-color-background-inverse-default); }
.band--dark a.railcard:hover { background: var(--sds-color-background-inverse-secondary); }
.band--dark .railcard__media { background: var(--sds-color-background-inverse-secondary); border-color: rgba(255,255,255,.16); }
.band--dark .railcard__sub { color: rgba(255,255,255,.6); }

/* ---------- Riga orizzontale che si traccia all'ingresso ----------
   Parte dall'angolo dove comincia anche la linea verticale della rail:
   le due si disegnano insieme e chiudono un angolo. */
.sect::before {
  content: ""; position: absolute; z-index: 1;
  left: var(--uk-gutter); right: var(--uk-gutter); top: 0; height: 1px;
  background: var(--sds-color-border-hairline);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.15s var(--uk-ease);
}
.sect.is-visible::before { transform: scaleX(1); }
/* DIFETTO v2.7: `.band--dark > .sect:first-child::before` ha specificità
   (0,2,2) e batteva `.sect.is-visible::before` (0,2,1). Su quella sezione
   la riga restava a scaleX(0) per sempre — non è che non si animava:
   non esisteva. `content: none` toglie l'elemento invece di combattere
   sulla trasformazione. */
.hero + .sect::before,
.band--dark > .sect:first-child::before { content: none; }

/* ---------- Titoli: rivelazione riga per riga ----------
   layout.js divide gli heading sui <br> e avvolge ogni riga.
   Ogni riga sale da sotto una maschera. Una volta sola. */
.ln {
  display: block; overflow: hidden;
  padding-bottom: .1em; margin-bottom: -.1em;
}
.ln__i {
  display: block;
  transform: translateY(108%);
  transition: transform .9s var(--uk-ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.is-visible .ln__i,
.reveal.is-visible .ln__i { transform: none; }

/* ---------- Stagger sui figli di griglie e liste ---------- */
.stagger > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity .62s var(--uk-ease), transform .62s var(--uk-ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.stagger.is-visible > * { opacity: 1; transform: none; }

/* ---------- Media: tendina dal basso invece della dissolvenza ---------- */
.wipe {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s var(--uk-ease);
}
.wipe.is-visible { clip-path: inset(0 0 0 0); }

/* ---------- CTA: il vuoto sotto non stava facendo niente ---------- */
.page-cta {
  padding-bottom: var(--sds-size-space-1600);
  align-items: end;
}
.page-cta > * { align-self: end; }

@media (prefers-reduced-motion: reduce) {
  .sect::before { transform: scaleX(1); transition: none; }
  .ln__i { transform: none; transition: none; }
  .stagger > * { opacity: 1; transform: none; transition: none; }
  .wipe { clip-path: none; transition: none; }
}

/* ============================================================
   v2.8 — HERO: composizione del logo
   Il logomark è due metà che si incontrano su un varco controllato:
   è il prodotto. Quindi l'ingresso non è una dissolvenza — le due
   metà arrivano da fuori e si accoppiano. Poi le sette lettere,
   poi il payoff. Una volta sola.
   ============================================================ */

/* Con --solo l'hero del logo non ospita più il testo: il padding di
   centratura non deve più lasciare spazio a nulla. */
.logohero--solo .logohero__stage { padding-top: clamp(24px, 5vh, 64px); }
.logohero--solo { grid-template-rows: 1fr; }

.logohero {
  position: relative;
  min-height: calc(100vh - var(--uk-header-h));
  min-height: var(--uk-hero-h);
  background: var(--sds-color-background-default-secondary);
  border-bottom: 1px solid var(--sds-color-border-hairline);
  /* Righe SEPARATE: logo e testo non possono sovrapporsi per
     costruzione. Mettendoli nella stessa cella il logo, scendendo al
     centro, finiva sopra il sottotitolo. Il centraggio ottico si
     ottiene spingendo il logo in basso dentro la sua riga, non
     lasciandolo invadere quella sotto. */
  display: grid; grid-template-rows: 1fr auto;
}
.logohero__stage {
  grid-row: 1; min-height: 0;
  /* Su 1920x1080 restavano 278px di vuoto. Con align-items:center e un
     tetto allo spazio sopra, il logo non galleggia in mezzo al niente. */
  display: grid; place-items: center; align-content: center;
  /* Padding in unità verticali: con clamp in vw un monitor largo e
     basso (1920x800) sparava 96px sopra e faceva traboccare l'hero. */
  /* Il centro della riga dello stage sta piu' in alto del centro
     dell'hero, esattamente di meta' altezza del testo. Aggiungendo
     quell'altezza come padding superiore, il contenuto centrato scende
     della meta': il logo cade sul centro ottico.
     L'altezza del testo la misura layout.js e la scrive in
     --uk-foot-h: cosi' resta esatta anche se cambi il sottotitolo.
     Il tetto a 22vh impedisce che su schermi bassi il padding mangi
     tutto lo spazio del logo. */
  /* Il padding di centratura non può essere una frazione fissa: con
     l'asset a 410px minimo, 22vh mandava l'hero fuori schermo a ogni
     risoluzione. Ora è quello che AVANZA dopo asset e testo, diviso
     a metà, e non scende mai sotto 12px. */
  padding: max(12px, min(var(--uk-foot-h, 190px), (100svh - var(--uk-header-h) - 410px - var(--uk-foot-h, 190px)) / 2))
           var(--uk-gutter) clamp(12px, 2vh, 30px);
}
/* Il cap di larghezza a 540px teneva il logo a 281px di altezza,
   ben sotto il max-height: era la larghezza a strozzarlo, non l'altezza.
   Alzata a 780px, il logo arriva a ~405px e riempie la fascia lasciata
   libera dai due pulsanti dell'hero. */
/* Centrato sull'hero, il logo deve stare sopra il foot: l'altezza è
   limitata anche dallo spazio che il testo lascia libero. */

/* L'asset del brand reveal è un documento a sé: gli va data una misura,
   non può dimensionarsi da solo come faceva l'SVG inline. Rapporto
   preso dal lockup verticale, 591x307. */
/* L'asset del brand reveal ha misure FISSE — marchio 240px, wordmark
   96px, payoff 28px, due gap da 8 = 391px di altezza naturale. Il mio
   riquadro era in svh e sotto i 978px di finestra tagliava il payoff.
   Ora l'altezza non scende mai sotto il necessario. */
.logoframe {
  display: block; border: 0;
  width: min(780px, 66vw);
  height: clamp(410px, 46svh, 560px);
  background: transparent;
}
@media (max-width: 640px) {
  /* sotto i 640px l'asset rimpicciolisce da solo */
  .logoframe { height: clamp(260px, 40svh, 340px); }
}


.logocomp-wrap { position: relative; }

.logohero__foot {
  grid-row: 2;
  max-width: var(--uk-measure); width: 100%; margin: 0 auto;
  /* in vh, non in vw: su 1366x768 il clamp in vw dava 82px di padding
     inferiore e faceva traboccare l'hero di 14px */
  padding: 0 var(--uk-gutter) clamp(40px, 6vh, 88px);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(24px, 4vw, 72px); align-items: end;
}
@media (max-width: 980px) { .logohero__foot { grid-template-columns: 1fr; } }
.logohero .scrollcue span,
.hero .scrollcue span { color: var(--sds-color-text-default-tertiary); }
.logohero .scrollcue i,
.hero .scrollcue i { background: var(--sds-color-border-default-default); }

@media (max-width: 760px) {
  .logohero { min-height: auto; }
  .logohero__stage { padding-top: clamp(40px, 12vw, 72px); }
  .logoframe { max-height: 30svh; }
  .hero { min-height: 78svh; }
}
/* Schermi bassi e larghi: 100svh con contenuto in basso diventa illeggibile */
@media (max-height: 620px) and (min-width: 761px) {
  .hero, .logohero, .videohero { min-height: auto; }
  .logoframe { max-height: 40vh; }
}

@media (prefers-reduced-motion: reduce) {
}

/* ---------- Hero a schermo pieno: fascia superiore ---------- */
.hero__top {
  max-width: var(--uk-measure); width: 100%; margin: 0 auto;
  padding: clamp(24px, 4vh, 52px) var(--uk-gutter) 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.hero__top .hero__meta { padding-bottom: 0; }
.hero--lead .hero__inner { padding-top: clamp(24px, 3vh, 48px); }

/* ============================================================
   v3.1 — HERO A SCHERMO PIENO, COMPOSTO

   Un hero a tutta altezza regge se ha tre appoggi: bordo alto,
   bordo basso e qualcosa che li tenga insieme. Con solo eyebrow in
   alto e titolo in basso la fascia centrale non è "spazio bianco":
   è spazio non assegnato, e si legge come un errore di impaginazione.
   Q Industrial ci mette il video 3D. Sulle pagine interne non c'è un
   media, quindi ci va una struttura che lavora: l'indice di pagina.
   ============================================================ */

/* ============================================================
   v3.2 — La dichiarazione deve reggere lo schermo

   A 80px su due righe il titolo occupa il 19% di un hero da 826px:
   non riempie, galleggia. L'errore era usare due colonne — il titolo
   restava in metà pagina e per forza restava piccolo.
   Titolo su tutta la larghezza e molto più grande, sottotitolo sotto
   a destra, blocco centrato verticalmente fra fascia alta e pavimento.
   ============================================================ */

.hero--lead .hero__inner {
  flex: 1 1 auto; min-height: 0;
  grid-template-columns: 1fr;
  align-content: center;
  gap: clamp(24px, 4vh, 52px);
  padding-top: clamp(20px, 3vh, 40px);
  padding-bottom: clamp(20px, 3vh, 40px);
}
.hero--lead .title-hero {
  font-size: clamp(44px, 7.4vw, 116px);
  line-height: .94;
  letter-spacing: -0.042em;
}
/* Il figlio diretto non basta: in home il sottotitolo è annidato in
   uno .stack e restava a 32px contro i 21px degli altri hero — il 52%
   più grande. Il selettore ora lo prende comunque. */
.hero--lead .hero__inner .subtitle {
  justify-self: end;
  width: min(620px, 52%);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.5;
}
@media (max-width: 980px) {
  /* Il figlio diretto non basta: in home il sottotitolo è annidato in
   uno .stack e restava a 32px contro i 21px degli altri hero — il 52%
   più grande. Il selettore ora lo prende comunque. */
.hero--lead .hero__inner .subtitle { justify-self: start; width: 100%; }
}

/* Il filter:invert non serve più: il lockup è inline e prende
   currentColor, quindi si inverte da solo dentro .band--dark. */

/* ============================================================
   v3.5 — TRE LAYOUT DAL RIFERIMENTO

   1. .mediahead  — media a tutta pagina con etichetta minuscola in
      alto a sinistra e titolo grande in alto a DESTRA. L'asimmetria
      fra i due è la firma: non è un titolo centrato su una foto.
   2. .filmblock  — riscritto: nero quasi vuoto, titolo piccolo in alto
      a sinistra, provino video in basso a destra che esce dal margine.
   3. .splithead  — titolo in due tempi, sfalsato in diagonale, prima
      parola chiara e seconda scura. Più .numlist--circled.
   ============================================================ */

/* ---------- 1. Media con testa ---------- */
.mediahead {
  position: relative; margin: 0; width: 100%;
  aspect-ratio: 16 / 9; overflow: hidden; background: var(--uk-gray-1000);
}
@media (max-width: 860px) { .mediahead { aspect-ratio: 3 / 4; } }
.mediahead > img,
.mediahead > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mediahead::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.22) 42%, rgba(11,11,12,.10) 70%, rgba(11,11,12,.62) 100%);
}
.mediahead__inner {
  position: relative; z-index: 2; height: 100%;
  max-width: var(--uk-measure); margin: 0 auto;
  padding: clamp(24px, 4vh, 56px) var(--uk-gutter) clamp(24px, 4vh, 52px);
  display: grid;
  grid-template-columns: minmax(0, .34fr) minmax(0, .66fr);
  grid-template-rows: auto 1fr auto;
  gap: 0 clamp(16px, 3vw, 48px);
  color: #fff;
}
@media (max-width: 860px) {
  .mediahead__inner { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; }
}
.mediahead__label {
  grid-column: 1; grid-row: 1;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sds-typography-family-mono);
  font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.68);
}
.mediahead__label::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--sds-color-background-brand-default);
}
.mediahead__title {
  grid-column: 2; grid-row: 1;
  font-family: var(--sds-typography-family-display);
  font-size: clamp(24px, 3.3vw, 50px); font-weight: 500;
  line-height: 1.06; letter-spacing: -0.032em; margin: 0;
  max-width: 20ch; color: #fff;
}
@media (max-width: 860px) { .mediahead__title { grid-column: 1; grid-row: 2; margin-top: 14px; } }
.mediahead__foot {
  grid-column: 1 / -1; grid-row: 3;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.mediahead__foot .link-arrow { color: #fff; }
.mediahead__meta {
  font-family: var(--sds-typography-family-mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

/* ---------- 2. Film: nero, provino spostato ---------- */
.filmblock {
  position: relative; width: 100%; aspect-ratio: 21 / 9;
  overflow: hidden; background: var(--sds-color-background-inverse-default);
}
@media (max-width: 860px) { .filmblock { aspect-ratio: 4 / 5; } }
.filmblock > img { display: none; }
.filmblock::after { display: none; }
.filmblock__inner {
  position: relative; z-index: 2; height: 100%;
  max-width: var(--uk-measure); margin: 0 auto;
  padding: clamp(28px, 5vh, 68px) var(--uk-gutter);
  display: block; color: #fff;
}
.filmblock__title {
  font-family: var(--sds-typography-family-display);
  font-size: clamp(21px, 2.1vw, 30px); font-weight: 500;
  line-height: 1.14; letter-spacing: -0.026em; margin: 0; max-width: 16ch;
}
.filmblock__note {
  margin-top: 14px; max-width: 34ch;
  color: rgba(255,255,255,.55); font-size: 14px; line-height: 1.5;
}
/* Il provino esce dal margine destro: il taglio dice che il film
   continua fuori dal riquadro. */
.filmthumb {
  position: absolute; right: calc(var(--uk-gutter) * -0.45); bottom: 0;
  width: clamp(200px, 26vw, 400px); aspect-ratio: 4 / 3;
  overflow: hidden; background: var(--uk-gray-900);
  border: 0; padding: 0; cursor: pointer; z-index: 3;
}
@media (max-width: 860px) {
  .filmthumb { right: 0; width: min(72vw, 340px); }
}
.filmthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--uk-ease); }
.filmthumb:hover img { transform: scale(1.05); }
.filmthumb__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--uk-gray-1000);
  display: grid; place-items: center; z-index: 2;
  transition: background-color .25s var(--uk-ease);
}
.filmthumb:hover .filmthumb__play { background: var(--sds-color-background-brand-default); color: #fff; }
.filmthumb__play::before {
  content: ""; width: 0; height: 0; margin-left: 3px;
  border-left: 10px solid currentColor;
  border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent;
}


/* ---------- 3. Titolo in due tempi ---------- */
.splithead { display: block; margin: 0 0 clamp(28px, 4vw, 56px); }
.splithead span {
  display: block;
  font-family: var(--sds-typography-family-display);
  font-size: var(--sds-typography-display-size);
  font-weight: 500; line-height: 1.02; letter-spacing: -0.032em;
}
.splithead .sh-a { color: var(--sds-color-text-default-tertiary); }
.splithead .sh-b { color: var(--sds-color-text-default-default); margin-left: clamp(24px, 12vw, 220px); }
@media (max-width: 700px) { .splithead .sh-b { margin-left: 0; } }
.band--dark .splithead .sh-a { color: rgba(255,255,255,.4); }
.band--dark .splithead .sh-b { color: #fff; }

/* Lista numerata con cifra cerchiata, colonna stretta */
.numlist--circled { border-top: 0; max-width: 62ch; margin-left: auto; margin-right: auto; }
.numlist--circled .numitem {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: clamp(14px, 2vw, 26px);
  align-items: start; border-bottom: 0;
  padding: clamp(14px, 1.8vw, 22px) 0;
}
.numlist--circled .numitem__n {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--sds-color-border-default-default);
  display: grid; place-items: center;
  font-size: 11px; letter-spacing: 0; color: var(--sds-color-text-default-secondary);
}
.band--dark .numlist--circled .numitem__n { border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.7); }
.numlist--circled .numitem__t { font-size: clamp(16px, 1.3vw, 18px); margin-bottom: 6px; }
.numlist--circled .numitem p { grid-column: 2; font-size: 14px; }
@media (max-width: 820px) { .numlist--circled .numitem { grid-template-columns: 44px 1fr; } }

/* ============================================================
   v3.6 — STEPPER

   Le card orizzontali reggono 8-12 parole (home 07) e crollano a 31
   (design-in 01): a 270px di colonna sono 33 caratteri per riga, sotto
   la metà della misura leggibile, e ogni card diventa un muro di 8
   righe. La stessa copy a 58 caratteri per riga fa 4,5 righe.

   Quindi non si accorcia il testo: si allarga la misura. Elenco dei
   cinque passi sempre visibile a sinistra — la sequenza è il messaggio
   — e un solo paragrafo alla volta a destra, alla misura giusta.
   Guidato dal click, non dallo scroll.
   ============================================================ */

.stepper {
  display: grid;
  grid-template-columns: minmax(0, .34fr) minmax(0, .66fr);
  gap: 0;
  border: 1px solid var(--sds-color-border-hairline);
}
@media (max-width: 860px) { .stepper { grid-template-columns: 1fr; border: 0; } }

/* ---- elenco ---- */
.stepper__nav {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--sds-color-border-hairline);
  padding: clamp(14px, 1.6vw, 22px) 0;
}
@media (max-width: 860px) { .stepper__nav { display: none; } }

.stepnav {
  appearance: none; background: none; border: 0; cursor: pointer;
  text-align: left; width: 100%;
  display: grid; grid-template-columns: 40px 1fr; align-items: baseline;
  gap: 12px; padding: clamp(12px, 1.5vw, 18px) clamp(18px, 2vw, 28px);
  position: relative;
  transition: background-color .22s ease;
}
.stepnav::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px;
  background: var(--sds-color-background-brand-default);
  transform: scaleY(0); transform-origin: center;
  transition: transform .3s var(--uk-ease);
}
.stepnav:hover { background: var(--sds-color-background-default-secondary); }
.stepnav[aria-selected="true"]::before { transform: scaleY(1); }
.stepnav__n {
  font-family: var(--sds-typography-family-mono);
  font-size: 11px; font-weight: 500; letter-spacing: .14em;
  color: var(--sds-color-text-default-tertiary);
  transition: color .22s ease;
}
.stepnav__t {
  font-family: var(--sds-typography-family-display);
  font-size: clamp(16px, 1.35vw, 19px); font-weight: 500;
  letter-spacing: -0.018em; line-height: 1.15;
  color: var(--sds-color-text-default-secondary);
  transition: color .22s ease;
}
.stepnav[aria-selected="true"] .stepnav__n { color: var(--sds-color-text-brand-default); }
.stepnav[aria-selected="true"] .stepnav__t { color: var(--sds-color-text-default-default); }

/* ---- pannello ---- */
.stepper__stage {
  position: relative;
  padding: clamp(24px, 3vw, 46px) clamp(24px, 3vw, 52px);
  display: grid;
}
.steppanel {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: 16px;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .4s var(--uk-ease), transform .4s var(--uk-ease);
}
.steppanel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.steppanel__eyebrow {
  font-family: var(--sds-typography-family-mono);
  font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sds-color-text-brand-default);
}
.steppanel__title {
  font-family: var(--sds-typography-family-display);
  font-size: clamp(24px, 2.6vw, 38px); font-weight: 500;
  letter-spacing: -0.03em; line-height: 1.05; margin: 0;
}
.steppanel__body {
  /* 58ch: la misura per cui questa copy è stata scritta */
  max-width: 58ch;
  font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6;
  color: var(--sds-color-text-default-secondary);
}
.stepper__meter {
  margin-top: auto; padding-top: clamp(20px, 2.4vw, 34px);
  display: flex; align-items: center; gap: 14px;
}
.stepper__meter span {
  font-family: var(--sds-typography-family-mono);
  font-size: 10px; letter-spacing: .16em; color: var(--sds-color-text-default-tertiary);
}
.stepper__meter i {
  flex: 1 0 0; height: 1px; background: var(--sds-color-border-hairline); position: relative;
}
.stepper__meter i::after {
  content: ""; position: absolute; left: 0; top: 0; height: 1px;
  width: var(--p, 20%); background: var(--sds-color-background-brand-default);
  transition: width .45s var(--uk-ease);
}

/* ---- sotto 860px: niente interazione, tutto aperto ---- */
@media (max-width: 860px) {
  .stepper__stage { display: block; padding: 0; }
  .steppanel {
    opacity: 1; transform: none; pointer-events: auto;
    padding: clamp(18px, 4vw, 26px) 0;
    border-bottom: 1px solid var(--sds-color-border-hairline);
  }
  .steppanel:first-child { border-top: 1px solid var(--sds-color-border-hairline); }
  .stepper__meter { display: none; }
}

.band--dark .stepper { border-color: rgba(255,255,255,.16); }
.band--dark .stepper__nav { border-right-color: rgba(255,255,255,.16); }
.band--dark .stepnav:hover { background: var(--sds-color-background-inverse-secondary); }
.band--dark .stepnav[aria-selected="true"] .stepnav__t,
.band--dark .steppanel__title { color: #fff; }
.band--dark .steppanel__body { color: rgba(255,255,255,.72); }

@media (prefers-reduced-motion: reduce) {
  .steppanel { transition: none; }
  .stepnav::before, .stepper__meter i::after { transition: none; }
}

/* #13 — la cella Unykonn aveva fondo #f5f5f5 dentro una banda scura
   dove il testo è bianco: bianco su grigio chiarissimo. */
.cell--accent { background: var(--sds-color-background-default-secondary); }
.band--dark .cell--accent {
  background: var(--sds-color-background-inverse-secondary);
  box-shadow: inset 2px 0 0 var(--sds-color-background-brand-default);
}
.band--dark .cell--accent .cell__title { color: var(--sds-color-background-brand-default); }

/* ============================================================
   #10 — Menu ad ancora sul lato destro
   L'indice stava in fondo all'hero e spariva appena scorrevi.
   Ora è fisso sul bordo destro, segue la sezione in vista, e lo
   scroll cue non serve più: l'indice stesso dice che c'è dell'altro.
   ============================================================ */

/* Il rail vive nel gutter. A riposo è solo trattini: 38px, che ci
   stanno. L'etichetta si apre SOLO al passaggio del mouse — quando era
   aperta anche sulla sezione attiva occupava 256px contro un gutter di
   72, e sconfinava sul contenuto a qualunque larghezza. */
.anchorail {
  position: fixed; right: clamp(14px, 1.6vw, 26px); top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--uk-ease);
}
.anchorail.is-on { opacity: 1; pointer-events: auto; }
@media (max-width: 1100px) { .anchorail { display: none; } }

.anchorail a {
  position: relative;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 7px 0;
  color: var(--sds-color-text-default-tertiary);
  transition: color .2s ease;
}
.anchorail a:hover { color: var(--sds-color-text-default-default); }

.anchorail__d {
  width: 22px; height: 1px; background: currentColor; flex: 0 0 auto;
  transition: width .3s var(--uk-ease);
}
.anchorail a[aria-current="true"] { color: var(--sds-color-text-brand-default); }
.anchorail a[aria-current="true"] .anchorail__d { width: 38px; }

/* L'etichetta esce dal flusso: non allarga mai il rail, quindi non può
   spostare né coprire nulla finché non la chiami. */
.anchorail__t {
  position: absolute; right: 34px; top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  font-family: var(--sds-typography-family-mono);
  font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 11px;
  background: var(--sds-color-background-default-default);
  border: 1px solid var(--sds-color-border-hairline);
  color: var(--sds-color-text-default-default);
  opacity: 0; pointer-events: none;
  transition: opacity .22s var(--uk-ease), transform .22s var(--uk-ease);
}
.anchorail a:hover .anchorail__t {
  opacity: 1; transform: translateY(-50%) translateX(0);
}

/* su banda scura il rail e la targhetta si schiariscono */
.anchorail.on-dark a { color: rgba(255,255,255,.5); }
.anchorail.on-dark a:hover { color: #fff; }
.anchorail.on-dark a[aria-current="true"] { color: var(--sds-color-background-brand-default); }
.anchorail.on-dark .anchorail__t {
  background: var(--sds-color-background-inverse-secondary);
  border-color: rgba(255,255,255,.2);
  color: #fff;
}

/* #10 — via il riferimento allo scroll */
.scrollcue { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .anchorail, .anchorail__t, .anchorail__d { transition: none; }
}

/* ============================================================
   CONSENSO COOKIE
   Pannello in basso a sinistra, non a tutta larghezza: non deve
   coprire il contenuto né sembrare un muro. I tre pulsanti hanno
   lo stesso peso — "rifiuta" non può essere più difficile di
   "accetta" (provvedimento Garante 231/2021).
   ============================================================ */

.consent {
  position: fixed; left: clamp(12px,2vw,28px); bottom: clamp(12px,2vw,28px);
  z-index: 400; width: min(460px, calc(100vw - 24px));
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s var(--uk-ease), transform .3s var(--uk-ease);
}
.consent.is-open { opacity: 1; transform: none; }
.consent__box {
  position: relative;
  background: var(--sds-color-background-inverse-default);
  color: var(--sds-color-text-inverse-default);
  border: 1px solid var(--sds-color-border-inverse-default);
  padding: clamp(20px,2.4vw,28px);
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 18px 48px rgba(0,0,0,.34);
}
.consent__x {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; line-height: 1;
  background: none; border: 0; cursor: pointer;
  color: var(--sds-color-text-inverse-tertiary); font-size: 14px;
}
.consent__x:hover { color: #fff; }
.consent__eyebrow {
  font-family: var(--sds-typography-family-mono);
  font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sds-color-background-brand-default);
}
.consent__lead { font-size: 13.5px; line-height: 1.55; color: var(--sds-color-text-inverse-secondary); margin: 0; }
.consent__lead a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.consent__cats { display: flex; flex-direction: column; gap: 1px; background: rgba(255,255,255,.12); }
.consent__cat {
  display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start;
  padding: 12px 0 12px 0; background: var(--sds-color-background-inverse-default);
  cursor: pointer; font-size: 12.5px; line-height: 1.5;
  color: var(--sds-color-text-inverse-secondary);
}
.consent__cat--locked { cursor: default; opacity: .72; }
.consent__cat input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--sds-color-background-brand-default); }
.consent__cat b { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; font-size: 13px; }

/* Tre pulsanti alla pari: nessuna gerarchia fra accetta e rifiuta */
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.consent__actions .btn { padding: 13px 10px; font-size: 10px; letter-spacing: .14em; border-radius: 10px; }
.consent__actions [data-act="none"] {
  background: transparent; border-color: rgba(255,255,255,.42); color: #fff;
}
.consent__actions [data-act="none"]:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.consent__actions [data-act="save"] { grid-column: 1 / -1; opacity: .8; padding: 11px 10px; }

@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }

/* ============================================================
   PAGINE LEGALI E 404
   ============================================================ */

.legal { max-width: 78ch; }
.legal h2 {
  font-family: var(--sds-typography-family-display);
  font-size: clamp(20px,2vw,26px); font-weight: 500; letter-spacing: -0.02em;
  margin: clamp(34px,4vw,52px) 0 12px;
}
.legal h3 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; }
.legal p, .legal li { color: var(--sds-color-text-default-secondary); font-size: 15.5px; line-height: 1.65; }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 10px 0 0; padding-left: 20px; }
.legal li + li { margin-top: 6px; }
.legal table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13.5px; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--sds-color-border-hairline); vertical-align: top; }
.legal th {
  font-family: var(--sds-typography-family-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sds-color-text-default-tertiary); font-weight: 500;
}
.legal code { font-family: var(--sds-typography-family-mono); font-size: 12.5px; background: var(--uk-gray-100); padding: 1px 5px; }
.legal__updated {
  font-family: var(--sds-typography-family-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sds-color-text-default-tertiary);
}

/* Segnaposto da compilare: deve essere impossibile pubblicarli per sbaglio */
.todo {
  background: #FFF4D6; color: #6b4a00;
  border-left: 2px solid #C79000; padding: 2px 8px;
  font-family: var(--sds-typography-family-mono); font-size: 12px;
}
.todo-box {
  background: #FFF4D6; color: #6b4a00; border-left: 3px solid #C79000;
  padding: 16px 18px; margin: 20px 0; font-size: 14px; line-height: 1.55;
}
.todo-box b { color: #4a3300; }

.err { text-align: center; }
.err__code {
  font-family: var(--sds-typography-family-mono);
  font-size: clamp(64px,12vw,160px); font-weight: 500; line-height: 1;
  color: var(--sds-color-background-brand-default); letter-spacing: -.04em;
}

/* ============================================================
   FORM DEL BRIEF
   ============================================================ */
.brief { display: flex; flex-direction: column; gap: clamp(22px,2.6vw,34px); max-width: 900px; }
.brief__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
@media (max-width: 640px) { .brief__grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 7px; }
.field > span {
  font-family: var(--sds-typography-family-mono);
  font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sds-color-text-default-secondary);
}
.field input, .field select, .field textarea {
  font: inherit; font-size: 15.5px; color: var(--sds-color-text-default-default);
  background: var(--sds-color-background-default-default);
  border: 1px solid var(--sds-color-border-default-default);
  border-radius: 8px; padding: 13px 15px; width: 100%;
  transition: border-color .18s ease;
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sds-color-background-brand-default);
}
.field input::placeholder, .field textarea::placeholder { color: var(--sds-color-text-default-tertiary); }
.field--file small { font-size: 12px; color: var(--sds-color-text-default-tertiary); }
.field--file input { padding: 11px 13px; }

.brief__set { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.brief__set legend {
  font-family: var(--sds-typography-family-mono);
  font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sds-color-text-brand-default); padding: 0 0 4px;
}

.check { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start;
         font-size: 14px; line-height: 1.5; color: var(--sds-color-text-default-secondary); }
.check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--sds-color-background-brand-default); }
.check a { color: var(--sds-color-text-brand-default); text-decoration: underline; text-underline-offset: 2px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.brief__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.brief__note { font-size: 14px; color: var(--sds-color-text-default-secondary); margin: 0; }
.brief__note a { color: var(--sds-color-text-brand-default); }

.brief__msg { font-size: 14.5px; line-height: 1.5; margin: 0; padding: 13px 16px; border-left: 2px solid; }
.brief__msg.is-ok   { border-color: #1c7c4a; background: #eef7f1; color: #14603a; }
.brief__msg.is-bad  { border-color: #B8342C; background: #fdf0ef; color: #8f251f; }
.brief__msg.is-warn { border-color: #C79000; background: #FFF4D6; color: #6b4a00; }
.brief__msg.is-wait { border-color: var(--sds-color-border-default-default); background: var(--uk-gray-100); color: var(--sds-color-text-default-secondary); }

/* ============================================================
   CONTATTO VIA EMAIL
   L'indirizzo è testo selezionabile prima che link: se il client
   non c'è, l'utente deve comunque poterlo prendere.
   ============================================================ */
.mailcard {
  border: 1px solid var(--sds-color-border-hairline);
  padding: clamp(24px,3vw,44px);
  display: flex; flex-direction: column; gap: 18px;
  background: var(--sds-color-background-default-secondary);
}
.mailcard__key {
  font-family: var(--sds-typography-family-mono);
  font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sds-color-text-brand-default);
}
.mailcard__addr {
  font-family: var(--sds-typography-family-display);
  font-size: clamp(24px, 3.6vw, 50px); font-weight: 500;
  letter-spacing: -0.035em; line-height: 1;
  color: var(--sds-color-text-default-default);
  user-select: all;                 /* un clic lo seleziona tutto */
  word-break: break-all;
}
.mailcard__addr:hover { color: var(--sds-color-text-brand-default); }
.mailcard__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mailcard__alt { font-size: 14px; line-height: 1.55; color: var(--sds-color-text-default-secondary); margin: 0; }
.mailcard__alt a { color: var(--sds-color-text-brand-default); text-decoration: underline; text-underline-offset: 2px; }

.copybtn {
  font-family: var(--sds-typography-family-mono);
  font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  background: transparent; color: var(--sds-color-text-default-secondary);
  border: 1px solid var(--sds-color-border-default-default); border-radius: 14px;
  padding: 16px 26px; cursor: pointer; line-height: 1;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.copybtn:hover { color: var(--sds-color-text-default-default); border-color: currentColor; }
.copybtn.is-done {
  color: #fff; background: #1c7c4a; border-color: #1c7c4a;
}

.brieflist { margin-top: clamp(40px,5vw,72px); }
.brieflist .numlist--circled { max-width: 68ch; }

/* ---------- 404: contatto diretto ---------- */
.err__direct {
  margin-top: clamp(34px,4vw,52px);
  padding-top: clamp(22px,2.6vw,30px);
  border-top: 1px solid var(--sds-color-border-hairline);
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.err__key {
  font-family: var(--sds-typography-family-mono);
  font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sds-color-text-default-tertiary);
}
.err__addr {
  font-family: var(--sds-typography-family-display);
  font-size: clamp(19px, 2vw, 26px); font-weight: 500; letter-spacing: -0.024em;
  color: var(--sds-color-text-default-default);
  user-select: all;
}
.err__addr:hover { color: var(--sds-color-text-brand-default); }
.copybtn--sm { padding: 11px 18px; font-size: 10px; border-radius: 11px; }
.err__note { font-size: 13px; line-height: 1.5; color: var(--sds-color-text-default-tertiary); margin: 0; max-width: 52ch; }

/* ============================================================
   Scavalco di ?motion=on — solo per capire dove sta il problema.
   Con la classe sull'<html> le regole reduced-motion vengono
   annullate e le animazioni tornano visibili anche se il sistema
   le ha spente.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .uk-motion-on .reveal { opacity: 0; transform: translateY(18px);
    transition: opacity var(--uk-dur) var(--uk-ease), transform var(--uk-dur) var(--uk-ease); }
  .uk-motion-on .reveal.is-visible { opacity: 1; transform: none; }
  .uk-motion-on .sect::before { transform: scaleX(0); transition: transform 1.15s var(--uk-ease); }
  .uk-motion-on .sect.is-visible::before { transform: scaleX(1); }
  .uk-motion-on .sect__line { transform: scaleY(0); transition: transform 1.1s var(--uk-ease); }
  .uk-motion-on .sect.is-visible .sect__line { transform: scaleY(1); }
  .uk-motion-on .ln__i { transform: translateY(108%);
    transition: transform .9s var(--uk-ease); transition-delay: calc(var(--i,0) * 90ms); }
  .uk-motion-on .is-visible .ln__i { transform: none; }
  .uk-motion-on .stagger > * { opacity: 0; transform: translateY(16px);
    transition: opacity .62s var(--uk-ease), transform .62s var(--uk-ease);
    transition-delay: calc(var(--i,0) * 55ms); }
  .uk-motion-on .stagger.is-visible > * { opacity: 1; transform: none; }
  .uk-motion-on .wipe { clip-path: inset(0 0 100% 0); transition: clip-path 1.05s var(--uk-ease); }
  .uk-motion-on .wipe.is-visible { clip-path: inset(0 0 0 0); }
}

/* Sorgenti quasi quadrate dentro una fascia panoramica: il ritaglio
   deve prendere la parte senza contenuto, non centrare a caso.
   Sul corridoio i pannelli stanno fra il 15 e il 60% dell'altezza. */
.mediabreak--top img { object-position: center 34%; }

/* Fascia per un asset a piena pagina fra due sezioni: sta fuori dalla
   griglia della sezione, quindi non può incrociare la rail. */
.assetband { width: 100%; background: var(--sds-color-background-default-default); }
.assetband > .mediabreak__stage { border-left: 0; border-right: 0; }

/* Catalogo non caricato: meglio dire perché che restare vuoti. */
.catalog-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--sds-color-border-hairline);
  background: var(--sds-color-background-default-secondary);
  font-family: var(--sds-typography-family-mono);
  font-size: 12px; line-height: 1.6;
  color: var(--sds-color-text-default-secondary);
}
.catalog-empty b { color: var(--sds-color-text-default-default); font-weight: 500; }

/* ---------- Nota sul filmato ----------
   Testo HTML sopra il video, non impresso: resta modificabile, si
   ridimensiona col browser, ed è leggibile dagli screen reader.
   Il gradiente sotto serve perché il fotogramma cambia di continuo e
   un testo chiaro su un fondo variabile diventa illeggibile a metà. */
.mediabreak { position: relative; }
.filmnote {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(28px, 5vw, 72px) var(--uk-gutter) clamp(20px, 3vw, 44px);
  /* Il fotogramma più chiaro nella fascia del testo ha luminanza media
     151/255: un velo leggero non basta e l'etichetta blu spariva.
     Tarato su quello. */
  background: linear-gradient(to top, rgba(11,11,12,.94) 0%, rgba(11,11,12,.86) 38%, rgba(11,11,12,.55) 72%, transparent 100%);
  color: #fff;
  display: grid; gap: 10px;
  pointer-events: none;
}
.filmnote__key {
  font-family: var(--sds-typography-family-mono);
  font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: #7FA6F5;
}
.filmnote p {
  max-width: 62ch;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.55;
  color: rgba(255,255,255,.88);
}
@media (max-width: 760px) {
  .filmnote p { font-size: 12px; line-height: 1.5; }
  .filmnote__key { font-size: 9px; }
}

/* ============================================================
   Selettore di lingua — EN / 中文

   Sobrio di proposito: sta accanto alla CTA blu, e due elementi blu
   affiancati si leggono come due azioni di pari peso. Il selettore non
   e' un'azione principale, e' un interruttore di servizio.

   Lo stato selezionato usa lo stesso segnale delle schede del catalogo
   (.cat-tab): testo pieno piu' una riga sotto. Niente riempimento.
   Nessuna bandiera: una bandiera e' un paese, non una lingua.
   ============================================================ */
.langswitch {
  display: inline-flex; align-items: stretch; flex: 0 0 auto;
  gap: 2px; margin-left: 14px;
}
.langswitch__opt {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 8px;
  border-bottom: 2px solid transparent;
  font-family: var(--sds-typography-family-mono);
  font-size: 11px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--sds-color-text-default-tertiary);
  background: none;
  transition: color .15s, border-color .15s;
}
.langswitch__opt:hover { color: var(--sds-color-text-default-secondary); }
.langswitch__opt.is-active {
  color: var(--sds-color-text-default-default);
  border-bottom-color: var(--sds-color-text-default-default);
}
/* il cinese non ha maiuscole e non vuole la spaziatura del monospaziato */
.langswitch__opt[lang="zh-Hans"] {
  text-transform: none; letter-spacing: .02em; font-size: 12.5px;
}
.langswitch__opt:focus-visible {
  outline: 2px solid var(--sds-color-background-brand-default);
  outline-offset: 2px;
}

/* Dentro la tendina mobile il fondo e' nero: si inverte. */
.navoverlay .langswitch { margin-left: 0; }
.navoverlay .langswitch__opt { color: rgba(255,255,255,.45); }
.navoverlay .langswitch__opt:hover { color: rgba(255,255,255,.8); }
.navoverlay .langswitch__opt.is-active { color: #fff; border-bottom-color: #fff; }

@media (max-width: 1020px) {
  .header__inner .langswitch { display: none; }
}