/* 01-base.css */
/* SPAIQ — base: fonts, tokens, reset, typography, layout primitives.
   Colours from the 2024 identity manual: Blu R10 G81 B161, Grigio scuro R30 G35 B36.
   Signature motif: the SPAIQ symbol read as a matrix of rounded tiles. */

@font-face { font-family: "Barlow Condensed"; font-weight: 300; font-display: swap; src: url("/fonts/barlow-condensed-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url("/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("/fonts/barlow-latin-500-normal.woff2") format("woff2"); }

/* Tile elevation, registered so it can be transitioned. */
@property --z { syntax: "<length>"; inherits: false; initial-value: 0px; }

:root {
  color-scheme: light;

  --blue: #0a51a1;
  --blue-deep: #073c78;
  --blue-bright: #2f74c4;
  --blue-light: #4d8fdb;
  --blue-soft: #8fb4e3;
  --graphite: #1e2324;
  --graphite-deep: #141819;
  --graphite-soft: #3a4143;
  --muted: #5b646c;
  --line: #d8dee6;
  --tint: #e6edf6;
  --tint-deep: #c9daf0;
  --paper: #f4f6f9;
  --white: #ffffff;
  --on-dark: rgb(255 255 255 / 0.78);
  --on-dark-muted: rgb(255 255 255 / 0.56);
  --line-dark: rgb(255 255 255 / 0.14);

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-text: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(3.2rem, 1.4rem + 5vw, 6.6rem);
  --fs-h1: clamp(2.8rem, 1.6rem + 4.6vw, 5.8rem);
  --fs-h2: clamp(2.2rem, 1.5rem + 2.8vw, 3.9rem);
  --fs-h3: clamp(1.5rem, 1.25rem + 0.8vw, 1.9rem);
  --fs-lead: clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;

  --radius-s: 4px;
  --radius-m: 12px;
  --wrap: 80rem;
  --gutter: clamp(1.1rem, 0.4rem + 3vw, 3rem);
  --section: clamp(5rem, 3rem + 7vw, 10rem);
  --header-h: 5rem;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--white);
  color: var(--graphite);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
html.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 300; line-height: 1.02; letter-spacing: -0.005em; text-wrap: balance; }
p, ul, ol, dl, dd, address, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
address { font-style: normal; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--blue-deep); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
[data-surface="dark"] :focus-visible { outline-color: var(--blue-soft); }
::selection { background: var(--blue); color: var(--white); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link { position: fixed; left: var(--gutter); top: -4rem; z-index: 200; padding: 0.6rem 1rem; background: var(--blue); color: var(--white); border-radius: var(--radius-s); }
.skip-link:focus { top: 0.75rem; color: var(--white); }

/* ---------- Surfaces ---------- */
.section { padding-block: var(--section); }
.section--paper { background: var(--paper); }
.section--dark { position: relative; isolation: isolate; background: var(--graphite); color: var(--white); }
.section--dark .lead, .section--dark .prose p { color: var(--on-dark); }

/* Blue light and a faint dot grid: the atmosphere of every dark surface. */
.glow { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.glow::before { content: ""; position: absolute; inset: 0; background: radial-gradient(52% 62% at var(--glow-x, 76%) var(--glow-y, 46%), rgb(10 81 161 / 0.45), transparent 72%), radial-gradient(40% 45% at 8% 100%, rgb(47 116 196 / 0.14), transparent 70%); }
.glow::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgb(255 255 255 / 0.085) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(75% 80% at var(--glow-x, 76%) 50%, #000 15%, transparent 78%); mask-image: radial-gradient(75% 80% at var(--glow-x, 76%) 50%, #000 15%, transparent 78%); }

/* ---------- Layout ---------- */
.section-head { display: grid; gap: 1.25rem; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.split { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--media { align-items: center; }
}

/* ---------- Typography helpers ---------- */
.title-xl { font-size: var(--fs-display); line-height: 0.93; letter-spacing: -0.02em; }
.h1 { font-size: var(--fs-h1); line-height: 0.98; letter-spacing: -0.015em; }
.h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; }
.h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.12; letter-spacing: 0; }
.lead { max-width: 38em; font-size: var(--fs-lead); line-height: 1.55; color: var(--graphite-soft); }
.prose { display: grid; gap: 1.15em; align-content: start; max-width: 40em; }
.prose .h2 { margin-bottom: 0.2em; }
.prose strong { font-weight: 500; }
.kicker { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; line-height: 1.2; color: var(--blue); }
.kicker::before { content: ""; width: 0.55rem; height: 0.55rem; background: currentColor; border-radius: 2px; }
[data-surface="dark"] .kicker { color: var(--blue-soft); }

/* ---------- Buttons & links ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.25rem; }
.button { position: relative; display: inline-flex; align-items: center; min-height: 3.5rem; padding: 0.75rem 1.9rem; overflow: hidden; isolation: isolate; background: var(--blue); color: var(--white); border-radius: var(--radius-s); font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; transition: transform 0.45s var(--ease-out), box-shadow 0.3s; }
.button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blue-deep); transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease-expo); }
.button:hover { color: var(--white); box-shadow: 0 14px 34px -14px rgb(10 81 161 / 0.8); }
.button:hover::before { transform: scaleX(1); transform-origin: left; }
[data-surface="dark"] .button:hover::before { background: var(--blue-bright); }

.link { position: relative; display: inline-block; padding-bottom: 0.2em; font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; color: var(--graphite); text-decoration: none; background: linear-gradient(var(--blue), var(--blue)) 0 100% / 100% 2px no-repeat; transition: color 0.2s; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blue-deep); transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease-expo); }
.link:hover { color: var(--blue); }
.link:hover::after { transform: scaleX(1); transform-origin: left; }
[data-surface="dark"] .link { color: var(--white); background-image: linear-gradient(var(--blue-soft), var(--blue-soft)); }
[data-surface="dark"] .link:hover { color: var(--blue-soft); }
[data-surface="dark"] .link::after { background: var(--white); }

/* 02-components.css */
/* SPAIQ — shared components: header, menu, tile display, marquee, e-mail, cursor, page transition, footer. */

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 60; color: var(--graphite); border-bottom: 1px solid transparent; transition: color 0.4s, border-color 0.4s, transform 0.55s var(--ease-expo); }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(255 255 255 / 0.86); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); opacity: 0; transition: opacity 0.4s, background-color 0.4s; }
.site-header.is-solid::before { opacity: 1; }
.site-header.is-solid { border-bottom-color: var(--line); }
.site-header.is-on-dark { color: var(--white); }
.site-header.is-on-dark::before { background: rgb(20 24 25 / 0.7); }
.site-header.is-on-dark.is-solid { border-bottom-color: var(--line-dark); }
.site-header.is-hidden { transform: translateY(-101%); }
html.menu-open .site-header { color: var(--white); border-bottom-color: transparent; transform: none; }
html.menu-open .site-header::before { opacity: 0; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: var(--header-h); }

.brand { position: relative; z-index: 2; display: block; width: 140px; }
.brand img { width: 100%; height: auto; transition: opacity 0.35s; }
.brand__white { position: absolute; inset: 0; opacity: 0; }
.is-on-dark .brand__color, .menu-open .brand__color { opacity: 0; }
.is-on-dark .brand__white, .menu-open .brand__white { opacity: 1; }

.site-nav { display: flex; align-items: center; }
.site-nav ul { display: flex; gap: clamp(1.6rem, 3vw, 3rem); padding: 0; list-style: none; }
.site-nav li a { position: relative; display: block; padding-block: 0.5rem; color: inherit; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; }
.site-nav li a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.1rem; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease-expo); }
.is-on-dark .site-nav li a::after { background: var(--blue-soft); }
.site-nav li a:hover::after, .site-nav li a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.site-nav__mail { display: none; }

/* Language switch: two tiles of the logo's module, the current language filled blue, the other one outlined. */
.lang-switch { display: flex; gap: 0.4rem; margin-left: clamp(1.4rem, 2.6vw, 2.4rem); padding-left: clamp(1.4rem, 2.6vw, 2.4rem); border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.lang-switch a { display: grid; place-items: center; width: 2.15rem; aspect-ratio: 1; border-radius: 22%; color: inherit; font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 30%, transparent); transition: transform 0.45s var(--ease-expo), box-shadow 0.3s, color 0.3s; }
.lang-switch a:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px currentColor; }
.lang-switch a[aria-current] { color: var(--white); background: linear-gradient(150deg, var(--blue-light), var(--blue) 58%, var(--blue-deep)); box-shadow: 0 6px 14px -8px rgb(10 81 161 / 0.8); }
.lang-switch a[aria-current]:hover { transform: none; }

.nav-toggle { position: relative; z-index: 2; display: none; align-items: center; gap: 0.7rem; min-height: 2.75rem; padding: 0.5rem 0; background: none; border: 0; color: inherit; font: 500 1.25rem/1 var(--font-display); cursor: pointer; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 22px; height: 2px; background: currentColor; transition: transform 0.45s var(--ease-expo), background-color 0.2s; }
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 52rem) {
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav { position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 2.5rem; padding: calc(var(--header-h) + 2rem) var(--gutter) max(2.5rem, env(safe-area-inset-bottom)); background: var(--graphite); color: var(--white); visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 0.75s var(--ease-expo), visibility 0s linear 0.75s; }
  .js .site-nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 50% at 85% 20%, rgb(10 81 161 / 0.45), transparent 70%); }
  .js .site-nav.is-open { visibility: visible; clip-path: inset(0); transition: clip-path 0.75s var(--ease-expo); }
  .js .site-nav ul { flex-direction: column; gap: 0; }
  .js .site-nav li { overflow: hidden; border-top: 1px solid var(--line-dark); }
  .js .site-nav li a { padding-block: 0.4rem 0.55rem; font-size: clamp(2.8rem, 12vw, 4.2rem); font-weight: 300; line-height: 1.1; transform: translateY(105%); transition: transform 0.9s var(--ease-expo); transition-delay: calc(var(--i) * 70ms + 180ms); }
  .js .site-nav.is-open li a { transform: none; }
  .js .site-nav li a::after { display: none; }
  .js .site-nav li a[aria-current="page"] { color: var(--blue-soft); }
  .js .site-nav__mail { display: block; opacity: 0; transition: opacity 0.6s 0.1s; }
  .js .site-nav.is-open .site-nav__mail { opacity: 1; transition-delay: 0.55s; }
  .site-nav__mail a { color: var(--blue-soft); font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; text-decoration: none; }
  .js .site-nav .lang-switch { gap: 0.6rem; margin: 0; padding: 0; border: 0; opacity: 0; transition: opacity 0.6s 0.1s; }
  .js .site-nav.is-open .lang-switch { opacity: 1; transition-delay: 0.5s; }
  .js .site-nav .lang-switch a { width: 2.75rem; font-size: 1.05rem; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; row-gap: 0; }
  html:not(.js) .site-nav ul { flex-wrap: wrap; gap: 0.25rem 1.25rem; padding-bottom: 0.75rem; }
}

/* ---------- Tile display: 8×8 matrix of the logo's module, in 3D ---------- */
.display {
  --lift: 26px;
  --tile-off: rgb(255 255 255 / 0.045);
  --tile-edge: rgb(255 255 255 / 0.11);
  --tile-glow: 0 0 30px rgb(47 116 196 / 0.55);
  --tile-shadow: rgb(0 0 0 / 0.6);
  --tilt-x: 24deg;
  --tilt-y: -20deg;
  --tilt-z: 3deg;
  --px: 0;
  --py: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}
.display--light { --lift: 18px; --tile-off: var(--tint); --tile-edge: rgb(10 81 161 / 0.07); --tile-glow: 0 14px 28px -12px rgb(10 81 161 / 0.6); --tile-shadow: rgb(10 81 161 / 0.32); --tilt-x: 18deg; --tilt-y: -14deg; --tilt-z: 0deg; }
.display > .symbol { width: 100%; height: 100%; }
.symbol .sym-on { fill: var(--blue); }
.symbol .sym-off { fill: rgb(255 255 255 / 0.05); }
.symbol .sym-hole { fill: #ffffff; }
.display--light .symbol .sym-off { fill: var(--tint); }

.display__stage { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 35%; }
.display__board { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); gap: 2.4%; transform-style: preserve-3d; transform: rotateX(calc(var(--tilt-x) - var(--py) * 10deg)) rotateY(calc(var(--tilt-y) + var(--px) * 14deg)) rotateZ(var(--tilt-z)); scale: 1; transition: scale 0.9s var(--ease-expo); }
.tile { position: relative; transform-style: preserve-3d; transform: translateZ(calc(var(--z) + var(--bump, 0px))) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: --z 0.85s var(--ease-spring); transition-delay: calc(var(--d, 0) * 1ms); }
.tile.is-on { --z: var(--lift); }
.tile__face { position: absolute; inset: 0; border-radius: var(--face-radius, 19%); background: linear-gradient(155deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0) 62%), var(--tile-off); box-shadow: inset 0 0 0 1px var(--tile-edge); transform: scale(var(--merge, 1)); transition: box-shadow 0.6s ease, border-radius 0.7s var(--ease-expo), transform 0.7s var(--ease-expo), opacity 0.5s ease; transition-delay: calc(var(--d, 0) * 1ms); }
/* Light painted by the pointer (--light 0..1, set per tile by tile-display.js): an incandescent core with a halo. */
.tile__light { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: var(--light, 0); will-change: opacity; background: radial-gradient(130% 130% at 30% 22%, #ffffff 0%, #d2e6ff 12%, #6fb0ff 34%, #2b7be6 60%, #0d5ac0 100%); box-shadow: 0 0 18px 3px rgb(95 165 255 / 0.95), 0 0 64px 16px rgb(40 125 235 / 0.55); }
/* Verified tiles are solid blocks: two darker layers underneath read as the side of the tile. */
.tile__edge { position: absolute; inset: 0; border-radius: var(--face-radius, 19%); pointer-events: none; background: #052f5c; transform: translateZ(-8px) scale(var(--merge, 1)); transform-style: preserve-3d; opacity: 0; transition: opacity 0.5s ease, border-radius 0.7s var(--ease-expo), transform 0.7s var(--ease-expo); transition-delay: calc(var(--d, 0) * 1ms); }
.tile__edge::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #093f7b; transform: translateZ(4px); }
.tile.is-on .tile__edge { opacity: 1; }
.tile__face::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(150deg, var(--blue-light), var(--blue) 58%, var(--blue-deep)); opacity: 0; transition: opacity 0.5s ease; transition-delay: inherit; }
.tile.is-on .tile__face { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), var(--tile-glow); }
.tile.is-on .tile__face::before { opacity: 1; }
/* A radial gradient instead of filter: blur(): same soft shadow, no filter layer to recomposite in the 3D scene. */
.tile__shadow { position: absolute; inset: -6%; border-radius: 30%; pointer-events: none; background: radial-gradient(closest-side, var(--tile-shadow), transparent); opacity: 0; transform: translateZ(calc(var(--lift) * -1)) scale(var(--merge, 1)); transition: opacity 0.6s ease, transform 0.7s var(--ease-expo); transition-delay: calc(var(--d, 0) * 1ms); }
.tile.is-on .tile__shadow { opacity: 1; }

/* Symbol mode (pictogram cells "w"): the cells fuse into one blue body with square white cut-outs, the
   ring around it steps back, and the board grows so the SPAIQ symbol fills the display. */
.display.is-symbol .display__board { scale: 1.3; }
.tile.is-body { --z: var(--lift); --merge: 1.245; }
/* Under the light the fused body opens back into separate tiles (scale is independent of the merge
   transform); a tile only leans once it has separated, so neighbours never cut through each other. */
.tile.is-body { --open: min(var(--light, 0) * 2.2, 1); transform: translateZ(calc(var(--z) + var(--bump, 0px))) rotateX(calc(var(--rx, 0deg) * var(--open))) rotateY(calc(var(--ry, 0deg) * var(--open))); }
.tile.is-body .tile__face, .tile.is-body .tile__edge { scale: calc(1 - var(--open) * 0.2); }
.tile.is-body .tile__face { box-shadow: var(--tile-glow); }
.tile.is-body .tile__face::before { opacity: 1; background-size: 600% 600%; background-position: calc((var(--c) - 1) * 20%) calc((var(--r) - 1) * 20%); }
.tile.is-body .tile__edge, .tile.is-body .tile__shadow { opacity: 1; }
.tile__cell { position: absolute; inset: var(--cell-inset, 6.7%); border-radius: var(--cell-radius, 3%); background: #ffffff; box-shadow: inset 0 3px 7px rgb(7 60 120 / 0.28); opacity: 0; transition: opacity 0.5s ease; transition-delay: calc(var(--d, 0) * 1ms); }
.tile.is-hole .tile__cell { opacity: 1; }
.tile.is-void { --z: -40px; }
.tile.is-void > * { opacity: 0; }
/* Assembly (data-assemble): the places the pictogram's tiles will take are outlined on the empty board. */
.tile.is-slot:not(.is-on, .is-body) .tile__face { box-shadow: inset 0 0 0 1.5px rgb(143 180 227 / 0.4); }
.display--light .tile.is-slot:not(.is-on, .is-body) .tile__face { background: var(--white); box-shadow: inset 0 0 0 1.5px rgb(10 81 161 / 0.3); }

/* Assembly: tiles rain down from the camera into the board. */
.display.is-waiting .tile { opacity: 0; }
.display.is-intro .tile { animation: tile-drop 1.35s var(--ease-expo) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes tile-drop {
  from { transform: translateZ(900px) rotateX(-80deg) rotateY(30deg); opacity: 0; }
  35% { opacity: 1; }
  to { transform: translateZ(var(--z)); opacity: 1; }
}

/* Live displays: a periodic scan light and a glare that follows the pointer. (Tiles no longer float on their own:
   an endless transform on dozens of tiles forced the whole 3D scene to be recomposited every frame.) */
.display--light .display--live .tile__face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgb(255 255 255 / 0.6); opacity: 0; animation: tile-ping 7s linear infinite; animation-delay: calc(2.7s + var(--c) * 0.172s); }
@keyframes tile-ping { 0% { opacity: 0; } 2% { opacity: 0.5; } 8%, 100% { opacity: 0; } }
.display__glare { position: absolute; inset: -6%; pointer-events: none; border-radius: 8%; background: radial-gradient(circle at calc(50% + var(--px) * 45%) calc(50% + var(--py) * 45%), rgb(143 180 227 / 0.18), transparent 46%); transform: translateZ(2px); }
.display.is-paused *, .display.is-paused *::before, .display.is-paused *::after { animation-play-state: paused; }

/* ---------- Home hero: the SPAIQ symbol as a solid 3D object (symbol3d.js) ---------- */
.symbol3d { position: relative; width: 100%; aspect-ratio: 1; }
.symbol3d > .symbol { width: 100%; height: 100%; }
.symbol3d__stage { position: absolute; inset: 7%; perspective: 1400px; }
.symbol3d__float, .symbol3d__object, .symbol3d__cells { position: absolute; inset: 0; transform-style: preserve-3d; }
.symbol3d__float { animation: symbol-float 7s ease-in-out infinite; }
@keyframes symbol-float { 50% { transform: translateY(-12px) rotateZ(-0.8deg); } }
.symbol3d__object { transform: rotateX(18deg) rotateY(-16deg) rotateZ(2deg); }
.symbol3d__layer { position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--body-mask) center / 100% 100% no-repeat; mask: var(--body-mask) center / 100% 100% no-repeat; }
.symbol3d__face { background: radial-gradient(110% 80% at 18% 8%, rgb(120 176 240 / 0.55), transparent 55%), linear-gradient(150deg, #2c77cf 0%, var(--blue) 52%, #063e7c 100%); }
.symbol3d__wall { background: #0a468a; transform: translateZ(-7px); }
.symbol3d__wall--deep { background: #052c58; transform: translateZ(-14px); }
.symbol3d__light { background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), rgb(185 218 255 / 0.5), rgb(120 176 240 / 0.12) 26%, transparent 46%); opacity: var(--hover, 0); transform: translateZ(0.5px); }
/* The glint band slides on a pseudo-element three times as wide (transform only), under the layer's mask. */
.symbol3d__glint { transform: translateZ(0.6px); }
.symbol3d__glint::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 300%; background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / 0.32) 48%, rgb(255 255 255 / 0.06) 53%, transparent 60%); transform: translateX(-73.33%); animation: symbol-glint 7s var(--ease-inout) infinite 2.2s; }
@keyframes symbol-glint { 0% { transform: translateX(-73.33%); } 30%, 100% { transform: translateX(6.67%); } }
.symbol3d__shadow { position: absolute; inset: 12% 8% -6% 10%; border-radius: 22%; background: rgb(0 0 0 / 0.6); filter: blur(34px); transform: translateZ(-90px); }
.symbol3d__object::before { content: ""; position: absolute; inset: -14%; background: radial-gradient(closest-side, rgb(47 116 196 / 0.42), transparent); transform: translateZ(-60px); pointer-events: none; }
/* White cells at the bottom of the wells; under the light they rise out and glow. */
.cell { position: absolute; background: linear-gradient(160deg, #ffffff, #e3ecf7); box-shadow: inset 0 3px 7px rgb(7 60 120 / 0.3); transform: translateZ(calc(-12px + var(--rise, 0) * 44px)); }
.cell::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: var(--energy, 0); background: radial-gradient(120% 120% at 32% 26%, #ffffff 0%, #d4e7ff 18%, #74b1ff 48%, #2c7be6 80%, #0d5ac0 100%); box-shadow: 0 0 20px 3px rgb(95 165 255 / 0.9), 0 0 60px 14px rgb(40 125 235 / 0.5); }
.symbol3d.is-intro .symbol3d__object { animation: symbol-in 1.6s var(--ease-expo) both; }
@keyframes symbol-in { from { opacity: 0; transform: translateZ(-420px) rotateX(55deg) rotateY(-45deg) rotateZ(-8deg); } to { opacity: 1; transform: rotateX(18deg) rotateY(-16deg) rotateZ(2deg); } }
.symbol3d.is-intro .cell { animation: cell-in 0.9s var(--ease-spring) both; animation-delay: calc(700ms + var(--i) * 55ms); }
@keyframes cell-in { from { transform: translateZ(60px); opacity: 0; } }
.symbol3d.is-paused *, .symbol3d.is-paused *::before { animation-play-state: paused; }
/* Morph (hover on the hero buttons): the wells close and the white squares glide over the plate to draw a pictogram. */
.symbol3d.is-morphing .symbol3d__layer { -webkit-mask-image: var(--plate-mask); mask-image: var(--plate-mask); }
.symbol3d.is-morphing .symbol3d__cells { visibility: hidden; }
.symbol3d__squares { position: absolute; inset: 0; transform-style: preserve-3d; visibility: hidden; pointer-events: none; }
.symbol3d.is-morphing .symbol3d__squares { visibility: visible; }
.msq { position: absolute; left: 1.117%; top: 1.117%; width: 14.433%; height: 14.433%; border-radius: 4%; background: linear-gradient(160deg, #ffffff, #e3ecf7); box-shadow: 0 8px 16px -8px rgb(0 0 0 / 0.5); transform: translate(calc(var(--mx, 0) * 115.47%), calc(var(--my, 0) * 115.47%)) translateZ(3px) scale(var(--s, 1)); transition: transform 0.7s var(--ease-expo); transition-delay: var(--delay, 0ms); }

/* ---------- Marquee band ---------- */
.marquee { position: relative; overflow: hidden; padding-block: clamp(1.4rem, 3vw, 2.4rem); background: var(--blue); color: var(--white); }
.marquee__track { display: flex; width: max-content; animation: marquee 50s linear infinite; }
.marquee__group { display: flex; flex: none; align-items: center; gap: clamp(1.6rem, 3vw, 3.2rem); padding-right: clamp(1.6rem, 3vw, 3.2rem); font-family: var(--font-display); font-size: clamp(2.8rem, 1.4rem + 5vw, 6.6rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.01em; white-space: nowrap; }
.marquee__group .is-outline { color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / 0.92); }
.marquee__group i { flex: none; width: 0.24em; height: 0.24em; background: var(--white); border-radius: 0.05em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Giant e-mail & copy ---------- */
.mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.mail-xl { display: inline-block; font-family: var(--font-display); font-size: clamp(2.4rem, 0.8rem + 6.6vw, 7.4rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.02em; color: var(--blue); text-decoration: none; overflow-wrap: anywhere; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 0.6s var(--ease-expo), color 0.2s; }
.mail-xl:hover { color: var(--blue-deep); background-size: 100% 2px; }
[data-surface="dark"] .mail-xl { color: var(--white); }
[data-surface="dark"] .mail-xl:hover { color: var(--blue-soft); }
.copy-button { display: inline-flex; align-items: center; min-height: 3rem; padding: 0.6rem 1.25rem; background: transparent; border: 1px solid var(--line); border-radius: var(--radius-s); color: var(--graphite); font: 500 1.15rem/1 var(--font-display); cursor: pointer; transition: border-color 0.2s, color 0.2s, background-color 0.2s, transform 0.45s var(--ease-out); }
.copy-button:hover, .copy-button.is-done { border-color: var(--blue); color: var(--blue); }
[data-surface="dark"] .copy-button { border-color: var(--line-dark); color: var(--white); }
[data-surface="dark"] .copy-button:hover, [data-surface="dark"] .copy-button.is-done { border-color: var(--blue-soft); color: var(--blue-soft); }
.copy-status { min-height: 1.5em; color: var(--muted); font-size: var(--fs-small); }
[data-surface="dark"] .copy-status { color: var(--on-dark-muted); }

/* ---------- Tile cursor (fine pointers only, created by JS) ---------- */
/* Replaces the native pointer once the mouse has moved (class set by interactions.js). */
.has-custom-cursor, .has-custom-cursor * { cursor: none !important; }
.cursor { position: fixed; inset: 0 auto auto 0; z-index: 190; pointer-events: none; transition: opacity 0.3s; }
.cursor.is-hidden { opacity: 0; }
.cursor__dot, .cursor__frame { position: absolute; top: 0; left: 0; will-change: transform; }
.cursor__dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 2px; background: var(--blue); }
.cursor__frame { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
.cursor__frame::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--blue); border-radius: 10px; opacity: 0.45; transition: transform 0.5s var(--ease-expo), opacity 0.3s, border-color 0.3s, background-color 0.3s; }
.cursor.is-link .cursor__frame::before { transform: scale(1.7); opacity: 1; background: rgb(10 81 161 / 0.08); }
.cursor.is-down .cursor__frame::before { transform: scale(0.75); }
.cursor.is-dark .cursor__dot { background: var(--white); }
.cursor.is-dark .cursor__frame::before { border-color: rgb(255 255 255 / 0.75); }
.cursor.is-dark.is-link .cursor__frame::before { background: rgb(255 255 255 / 0.08); }
/* Over a tile display the cursor becomes the light source: no frame, a glowing point. */
.cursor__dot { transition: background-color 0.3s, box-shadow 0.3s, border-radius 0.3s; }
.cursor.is-display .cursor__frame::before { opacity: 0; transform: scale(0.4); }
.cursor.is-display .cursor__dot { background: var(--white); border-radius: 3px; box-shadow: 0 0 10px 3px rgb(143 180 227 / 0.95), 0 0 28px 9px rgb(47 116 196 / 0.6); }
.cursor.is-display:not(.is-dark) .cursor__dot { background: var(--blue-bright); box-shadow: 0 0 10px 3px rgb(47 116 196 / 0.55), 0 0 26px 8px rgb(47 116 196 / 0.3); }

/* ---------- Page transition: blue tiles cover, the next page uncovers ---------- */
html.is-arriving::after { content: ""; position: fixed; inset: 0; z-index: 180; background: var(--blue); animation: failsafe-hide 0s 2.5s forwards; }
@keyframes failsafe-hide { to { opacity: 0; visibility: hidden; } }
.page-transition { position: fixed; inset: 0; z-index: 180; display: grid; pointer-events: none; }
.page-transition i { background: var(--blue); transform: scale(0); }
.page-transition i:nth-child(3n) { background: #0c58ae; }
.page-transition i:nth-child(7n + 2) { background: var(--blue-deep); }

/* ---------- Footer ---------- */
.site-footer { position: relative; padding-top: clamp(4rem, 7vw, 6rem); background: var(--graphite-deep); color: var(--on-dark); font-size: var(--fs-small); }
.site-footer a { color: var(--white); text-decoration: none; background: linear-gradient(var(--blue-soft), var(--blue-soft)) 0 100% / 0 1px no-repeat; transition: background-size 0.45s var(--ease-expo); }
.site-footer a:hover { background-size: 100% 1px; }
.site-footer__grid { display: grid; gap: 2.5rem; padding-bottom: 3.5rem; }
.site-footer__brand img { width: 156px; }
.site-footer__brand p { margin-top: 0.9rem; }
.site-footer__title { margin-bottom: 0.9rem; color: var(--white); font-size: 1.3rem; font-weight: 500; }
.site-footer ul { display: grid; gap: 0.5rem; padding: 0; list-style: none; }
.site-footer address { margin-top: 0.75rem; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-block: 1.5rem 2rem; border-top: 1px solid var(--line-dark); color: var(--on-dark-muted); font-size: 0.8125rem; }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer__credit a { color: var(--white); font-weight: 500; }
.site-footer__notes { display: grid; gap: 0.35rem; }
.site-footer__notes a { font-weight: 500; }

/* 03-pages.css */
/* SPAIQ — page sections. */

/* ---------- Home hero ---------- */
.hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: 100svh; padding-block: calc(var(--header-h) + clamp(2rem, 5vw, 4rem)) clamp(5rem, 9vw, 7rem); overflow: hidden; background: var(--graphite); color: var(--white); }
.hero__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.hero__text { display: grid; gap: clamp(1.5rem, 3vw, 2.4rem); }
.hero .symbol3d { width: min(100%, 26rem); justify-self: center; }
.hero .lead { color: var(--on-dark); }
.hero__payoff, .page-head__payoff { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; line-height: 1.12; color: var(--blue-soft); }
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hero .symbol3d { width: min(100%, 34rem); }
}

/* ---------- Intro statement (words light up while scrolling) ---------- */
.intro { padding-bottom: clamp(3rem, 6vw, 5rem); }
.statement { max-width: 20em; font-family: var(--font-display); font-size: clamp(2.1rem, 1.1rem + 3.4vw, 4.4rem); font-weight: 300; line-height: 1.06; letter-spacing: -0.012em; }
.word { opacity: clamp(0.13, calc((var(--p, 1.2) - var(--t, 0)) * 9 + 0.13), 1); }

/* ---------- Key figures: numbers drawn with tiles, the module of the SPAIQ symbol (stats.js) ---------- */
.stats { --tile: clamp(7px, 2.4vw, 12px); --tile-gap: calc(var(--tile) * 0.3); display: grid; margin-top: clamp(3.5rem, 7vw, 6rem); padding: 0; list-style: none; border-top: 1px solid var(--graphite); --rule: var(--graphite); }
.stat { display: grid; gap: 0.5rem; align-content: start; padding-block: 2rem; border-bottom: 1px solid var(--line); }
/* The figure comes first on screen; the label comes first in the markup, for screen readers. */
.stat__value { order: -1; display: block; min-height: calc(var(--tile) * 7 + var(--tile-gap) * 6); margin-bottom: 1rem; color: var(--blue); font: 300 clamp(3rem, 2rem + 3vw, 4.6rem) / 1 var(--font-display); }
.stat__label { font-size: 1.45rem; font-weight: 500; line-height: 1.15; }
.stat__text { max-width: 24em; color: var(--muted); font-size: var(--fs-small); }
.stat:nth-child(2) { --glint-delay: 2.3s; }
.stat:nth-child(3) { --glint-delay: 4.6s; }
/* Two columns sized to their figures: "9001" has four glyphs, "4" only one. */
@media (min-width: 60rem) {
  .stats { --tile: clamp(8px, 0.95vw, 14px); grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .stat { padding: 2.5rem clamp(1.5rem, 3vw, 2.5rem) 0 0; border-bottom: 0; }
  .stat + .stat { padding-left: clamp(1.5rem, 3vw, 2.5rem); border-left: 1px solid var(--line); }
}
/* One 5×7 glyph of tiles per character: unlit tiles are faint dots, lit ones solid blue. The board clips the
   glint, so a little padding keeps the shadows of the edge tiles. */
.tile-number { position: relative; display: inline-flex; gap: calc(var(--tile) * 1.2); margin: calc(var(--tile) * -0.6); padding: calc(var(--tile) * 0.6); overflow: hidden; }
.tile-number__glyph { display: grid; grid-template-columns: repeat(5, var(--tile)); grid-auto-rows: var(--tile); gap: var(--tile-gap); }
.tile-number i { border-radius: 24%; background: rgb(10 81 161 / 0.07); transform: scale(0.7); transition: background-color 0.2s, box-shadow 0.2s, transform 0.35s var(--ease-spring); }
.tile-number i.is-on { background: linear-gradient(150deg, var(--blue-light), var(--blue) 75%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 3px 8px -4px rgb(10 81 161 / 0.55); transform: none; }
/* Once settled, a white band sweeps across the board every few seconds (it only shows over the blue tiles)
   and the "+" breathes. Only transform and opacity animate, so nothing is repainted. */
.tile-number::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 40%, rgb(255 255 255 / 0.7) 50%, transparent 60%); transform: translateX(-100%); }
.tile-number.is-settled::after { animation: board-glint 7s ease-in-out infinite; animation-delay: var(--glint-delay, 0s); }
.tile-number.is-settled .is-plus { animation: plus-breathe 1.8s ease-in-out infinite; }
@keyframes board-glint { 0% { transform: translateX(-100%); } 24%, 100% { transform: translateX(100%); } }
@keyframes plus-breathe { 50% { opacity: 0.45; } }

/* ---------- Services with a live pictogram display ---------- */
.services-layout { display: grid; gap: 3rem; }
.services-visual { display: none; }
.services { padding: 0; list-style: none; }
.service { display: grid; gap: 1.1rem 2rem; padding-block: clamp(2.25rem, 4vw, 3.25rem); border-top: 1px solid var(--line); --rule: var(--graphite); transition: opacity 0.4s; }
.service:last-child { border-bottom: 1px solid var(--line); }
.service__title { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); font-weight: 300; line-height: 1; letter-spacing: -0.01em; transition: color 0.3s; }
.service__body { display: grid; gap: 0.9rem; max-width: 36em; }
.service__body p { color: var(--graphite-soft); }
.service__body .link { justify-self: start; font-size: 1.2rem; }
@media (min-width: 64rem) {
  .services-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .services-visual { position: sticky; top: calc(50vh - 13rem); display: grid; gap: 1.5rem; justify-items: center; }
  .services-visual .display { width: min(100%, 24rem); }
  .services-visual p { color: var(--muted); font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; }
    .js .service:not(.is-active) { opacity: 0.42; }
  .service.is-active .service__title { color: var(--blue); }
}

/* ---------- Sectors ---------- */
.sectors { display: grid; gap: 0.05em 0.8em; padding: 0; list-style: none; font-family: var(--font-display); font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.8rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.01em; }
.sectors li { display: flex; align-items: center; gap: 0.3em; transition: color 0.3s, transform 0.5s var(--ease-expo); }
.sectors li::before { content: ""; flex: none; width: 0.2em; height: 0.2em; background: var(--blue); border-radius: 0.035em; transition: transform 0.5s var(--ease-spring); }
.sectors li:hover { color: var(--blue); transform: translateX(0.12em); }
.sectors li:hover::before { transform: scale(1.6) rotate(90deg); }
.sectors__note { margin-top: 2rem; max-width: 34em; color: var(--muted); font-size: var(--fs-lead); }
@media (min-width: 40rem) { .sectors { grid-template-columns: repeat(2, max-content); } }
/* Due gruppi (settori regolamentati, costruttori): titolo piccolo e le voci in fila, separate dai quadratini blu. */
.sector-groups { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.sector-group { display: grid; gap: 0.9rem; }
.sector-group__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; line-height: 1.12; color: var(--muted); }
.sectors--row { font-size: clamp(2rem, 1rem + 2.8vw, 3.6rem); }
/* Sul telefono le voci stanno in fila e vanno a capo; da 40rem la griglia 2×2 di .sectors allinea i due gruppi. */
@media (max-width: 39.99rem) { .sectors--row { display: flex; flex-wrap: wrap; gap: 0.1em 0.75em; } }

/* ---------- Quote ---------- */
.quote { display: grid; gap: 3rem 5rem; }
.quote blockquote p { font-family: var(--font-display); font-size: clamp(3rem, 1.4rem + 5.4vw, 7rem); font-weight: 300; line-height: 0.96; letter-spacing: -0.02em; }
.quote figcaption { display: grid; gap: 1.5rem; align-content: end; }
.quote__body { max-width: 30em; color: var(--on-dark); font-size: var(--fs-lead); line-height: 1.55; }
.quote__author { padding-top: 1.25rem; border-top: 1px solid var(--line-dark); color: var(--on-dark-muted); font-size: var(--fs-small); }
.quote__author strong { display: block; color: var(--white); font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; }
@media (min-width: 60rem) { .quote { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }

/* ---------- Contact band ---------- */
.contact-section { position: relative; overflow: hidden; }
.contact-band { display: grid; gap: 2.5rem; align-items: center; }
.contact-band__text { display: grid; gap: 1.5rem; }
.contact-band .h2 { max-width: 14em; }
/* commerciale@spaiq-srl.com è lungo: carattere un po' più piccolo e su una riga sola (niente a capo dopo «spaiq-»). */
.contact-band .mail-xl, .page-head .mail-xl { font-size: clamp(1.6rem, 0.5rem + 4.2vw, 4.6rem); white-space: nowrap; }
.contact-band .display { width: min(70%, 20rem); }
@media (min-width: 60rem) { .contact-band { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .contact-band .display { width: 100%; justify-self: end; } }

/* ---------- Inner page header (dark, with its own pictogram) ---------- */
.page-head { position: relative; isolation: isolate; overflow: hidden; padding-block: calc(var(--header-h) + clamp(3rem, 7vw, 6.5rem)) clamp(4rem, 7vw, 6.5rem); background: var(--graphite); color: var(--white); }
.page-head--full { display: grid; align-items: center; min-height: 100svh; }
.page-head__inner { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.page-head__text { display: grid; gap: 1.5rem; }
/* Telefono sotto l'indirizzo email in Contatti: stessa famiglia, più piccolo, cliccabile per chiamare. */
.phone-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.9rem; font-family: var(--font-display); }
.phone-row__label { font-size: 1.3rem; font-weight: 500; color: var(--on-dark-muted); }
.phone-row__number { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 300; color: var(--white); text-decoration: none; }
.phone-row__number:hover { color: var(--blue-soft); }
.page-head .h1 { max-width: 13em; }
.page-head .lead { color: var(--on-dark); }
.page-head__more { display: grid; gap: 1rem; max-width: 38em; color: var(--on-dark); }
.page-head .display { width: min(62%, 19rem); }
@media (min-width: 60rem) {
  .page-head__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .page-head .display { width: 100%; max-width: 24rem; justify-self: end; }
}

/* ---------- Service details (services page) ---------- */
.details { display: grid; }
.detail { display: grid; gap: 1.5rem; padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); --rule: var(--graphite); }
.detail:first-child { padding-top: 0; border-top: 0; }
.detail:first-child::before { display: none; }
.detail .h2 { transition: color 0.4s; }
.detail.is-active .h2 { color: var(--blue); }
.checklist { display: grid; gap: 0.8rem 2rem; margin-top: 0.6rem; padding: 1.5rem 0 0; list-style: none; border-top: 1px solid var(--line); }
.checklist li { position: relative; padding-left: 1.6rem; color: var(--graphite); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.65rem; height: 0.65rem; background: var(--blue); border-radius: 3px; box-shadow: 0 0 0 4px rgb(10 81 161 / 0.12); }
@media (min-width: 48rem) { .checklist { grid-template-columns: 1fr 1fr; } }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; gap: 2.5rem 3rem; }
.contact-grid > div { display: grid; gap: 0.9rem; align-content: start; padding-top: 1.25rem; border-top: 1px solid var(--graphite); --rule: var(--graphite); }
.contact-grid h2 { font-size: 1.7rem; font-weight: 500; }
.contact-grid p, .contact-grid address { color: var(--graphite-soft); }
.company-data { display: grid; gap: 0.9rem; }
.company-data dt { color: var(--muted); font-size: var(--fs-small); }
.company-data dd { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; }
@media (min-width: 40rem) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .contact-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Legal text ---------- */
.legal { max-width: 46em; }
.legal > * + * { margin-top: 1em; }
.legal h2 { margin-top: 2.2em; font-size: 1.9rem; font-weight: 500; line-height: 1.15; }
.legal h3 { margin-top: 1.6em; font-size: 1.4rem; font-weight: 500; }
.legal p, .legal li { color: var(--graphite-soft); }
.legal strong { font-weight: 500; color: var(--graphite); }
.legal ul { padding-left: 1.2em; }
/* The policy refers to its purposes as «punto a)» and «punto b)»: the markers say the same. */
@counter-style legal-alpha { system: extends lower-alpha; suffix: ") "; }
.legal ol { padding-left: 1.6em; list-style: legal-alpha; }
.legal li + li { margin-top: 0.5em; }
.legal a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.legal a[href^="mailto:"] { white-space: nowrap; }
.legal__updated { margin-top: 2.5em; padding-top: 1.25em; border-top: 1px solid var(--line); font-size: 0.875rem; }

/* ---------- Audiences: two contrasting panels ---------- */
.audience-panels { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.audience { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end; gap: 1.1rem; min-height: clamp(21rem, 34vw, 27rem); padding: clamp(1.75rem, 3.5vw, 3rem); border-radius: var(--radius-m); color: var(--white); transition: transform 0.6s var(--ease-expo), box-shadow 0.5s; }
.audience--dark { background: radial-gradient(80% 90% at 95% 0%, rgb(10 81 161 / 0.55), transparent 62%), var(--graphite); }
.audience--blue { background: radial-gradient(80% 90% at 5% 0%, rgb(143 180 227 / 0.4), transparent 60%), var(--blue); }
.audience::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgb(255 255 255 / 0.09) 1px, transparent 1.4px); background-size: 24px 24px; }
/* A small cluster of the symbol's tiles in the corner (one tile plus seven box-shadow copies). */
.audience::after { content: ""; position: absolute; top: clamp(1.75rem, 3.5vw, 3rem); right: clamp(1.75rem, 3.5vw, 3rem); width: 16px; height: 16px; border-radius: 4px; background: var(--white); box-shadow: 21px 0 0 rgb(255 255 255 / 0.9), 42px 0 0 rgb(255 255 255 / 0.25), 0 21px 0 rgb(255 255 255 / 0.9), 21px 21px 0 rgb(255 255 255 / 0.25), 42px 21px 0 rgb(255 255 255 / 0.9), 0 42px 0 rgb(255 255 255 / 0.25), 42px 42px 0 rgb(255 255 255 / 0.9); transition: transform 0.6s var(--ease-spring); }
.audience:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -32px rgb(10 81 161 / 0.8); }
.audience:hover::after { transform: rotate(90deg); }
.audience h3 { font-size: clamp(2.4rem, 1.5rem + 2.6vw, 3.8rem); font-weight: 300; line-height: 1; letter-spacing: -0.015em; }
.audience p { max-width: 30em; color: var(--on-dark); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; padding: 0; list-style: none; }
.chips li { padding: 0.4rem 0.9rem; border: 1px solid rgb(255 255 255 / 0.32); border-radius: 999px; font: 500 1.05rem/1 var(--font-display); letter-spacing: 0.01em; }
@media (min-width: 52rem) { .audience-panels { grid-template-columns: 1fr 1fr; } }

/* 04-motion.css */
/* SPAIQ — motion states driven by motion.js. Everything is gated on .js and falls back to visible content:
   if the script never marks the page .motion-ready, a 3 s failsafe shows it anyway. */

@keyframes failsafe-show { to { opacity: 1; transform: none; } }

/* Headlines: each line slides up from behind a mask. */
.line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.line__inner { display: block; transition: transform 1.2s var(--ease-expo); transition-delay: calc(var(--i, 0) * 95ms + var(--delay, 0ms)); }
.js [data-animate="lines"]:not(.is-inview) .line__inner { transform: translateY(110%); }
.js [data-animate="lines"]:not(.is-split) { opacity: 0; animation: failsafe-show 0s 3s forwards; }

/* Blocks: rise and fade in. */
.js [data-animate="up"] { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-expo); transition-delay: calc(var(--i, 0) * 90ms + var(--delay, 0ms)); }
.js [data-animate="up"].is-inview { opacity: 1; transform: none; }

/* Page-head copy: the same rise, run by CSS from the first paint. It holds the page's largest text (LCP), so it
   must not wait for motion.js to download. */
@keyframes rise-fade { from { opacity: 0; } }
@keyframes rise-move { from { transform: translateY(36px); } }
.js [data-animate="rise"] { animation: rise-fade 1s var(--ease-out) both, rise-move 1.2s var(--ease-expo) both; animation-delay: var(--delay, 0ms); }

/* Blocks that grow in (displays, cards). */
.js [data-animate="scale"] { opacity: 0; transform: scale(0.94); transition: opacity 1s var(--ease-out), transform 1.4s var(--ease-expo); transition-delay: var(--delay, 0ms); }
.js [data-animate="scale"].is-inview { opacity: 1; transform: none; }

/* Rules draw from left to right, replacing the element's own top border. */
.js [data-animate="rule"] { position: relative; border-top-color: transparent !important; }
.js [data-animate="rule"]::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--rule, var(--line)); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease-expo); transition-delay: calc(var(--i, 0) * 110ms + var(--delay, 0ms)); }
.js [data-animate="rule"].is-inview::before { transform: none; }

.js:not(.motion-ready) [data-animate="up"],
.js:not(.motion-ready) [data-animate="scale"] { animation: failsafe-show 0s 3s forwards; }
.js .display > .symbol, .js .symbol3d > .symbol { opacity: 0; animation: failsafe-show 0s 2.5s forwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-animate="up"], .js [data-animate="scale"] { opacity: 1; transform: none; }
  .js [data-animate="rise"] { animation: none; }
  .js [data-animate="lines"]:not(.is-inview) .line__inner { transform: none; }
  .js [data-animate="rule"]::before { transform: none; }
  .marquee__track { animation: none; }
}

/* 05-quality.css */
/* SPAIQ — quality page: the certificate deck, where we work, the values that assemble the symbol. */

/* ---------- Certificates: documents list and a deck of sheets (certificates.js) ---------- */
.certs__grid { display: grid; gap: clamp(3rem, 6vw, 6rem); align-items: center; }
.certs__text { display: grid; gap: 1.5rem; align-content: start; }

.docs { display: grid; margin-top: 0.75rem; padding: 0; list-style: none; border-top: 1px solid var(--graphite); }
/* The tile in front of each document is filled for the one shown on top of the deck. */
.doc { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0.25rem 0.9rem; padding: 1.1rem 0.6rem 1.1rem 0.3rem; border-bottom: 1px solid var(--line); color: var(--graphite); text-decoration: none; }
.doc::before { content: ""; width: 0.6rem; height: 0.6rem; align-self: center; border-radius: 2px; box-shadow: inset 0 0 0 1.5px rgb(10 81 161 / 0.45); transition: background-color 0.35s, box-shadow 0.35s, transform 0.6s var(--ease-spring); }
.doc.is-front::before { background: var(--blue); box-shadow: 0 0 0 4px rgb(10 81 161 / 0.12); transform: rotate(90deg); }
.doc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--white); transform: scaleX(0); transform-origin: left; transition: transform 0.55s var(--ease-expo); }
.doc:hover::after, .doc:focus-visible::after { transform: none; }
.doc__name { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; line-height: 1.2; transition: color 0.25s, transform 0.5s var(--ease-expo); }
.doc:hover .doc__name, .doc:focus-visible .doc__name { color: var(--blue); transform: translateX(0.3rem); }
.doc__meta { grid-column: 2; color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
@media (min-width: 30rem) {
  .doc { grid-template-columns: auto minmax(0, 1fr) auto; }
  .doc__meta { grid-column: auto; }
}

/* Three sheets share one grid cell; --pos (0 = front) fans them out in depth. The pointer tilts the
   whole stack (data-tilt), so the sheets behind shift with parallax. */
.deck { position: relative; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4.5vw, 3.5rem) 0 0; perspective: 1600px; }
.deck__stage { display: grid; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.6s var(--ease-out); }
.sheet { position: relative; grid-area: 1 / 1; display: grid; align-content: start; gap: clamp(1.25rem, 2.5vw, 1.75rem); padding: clamp(1.5rem, 3.5vw, 2.5rem); overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: 0 34px 60px -38px rgb(30 35 36 / 0.45); transform: translate3d(calc(var(--pos) * 3.5%), calc(var(--pos) * -5%), calc(var(--pos) * -48px)) rotate(calc(var(--pos) * 2deg)); transition: transform 1s var(--ease-expo), opacity 0.8s ease; transition-delay: calc(var(--pos) * 90ms); }
.sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgb(143 180 227 / 0.3), transparent 55%); opacity: var(--glare, 0); transition: opacity 0.4s; }
/* Hidden until dealt, only once the script has armed the deck (no script: the stack is simply shown). */
.deck.is-armed:not(.is-inview) .sheet { opacity: 0; transform: translate3d(0, 12%, -120px) rotate(-3deg); }
/* The sheet called to the front is pulled up out of the stack and slid back in on top. */
.sheet.is-drawn { animation: sheet-draw 1s var(--ease-inout); }
@keyframes sheet-draw { 42% { translate: 0 -30%; } }

.sheet__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.sheet__mark { width: clamp(104px, 12vw, 132px); }
.sheet__status { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.85rem 0.4rem 0.7rem; border-radius: 999px; background: var(--tint); color: var(--blue); font: 500 1.05rem/1.1 var(--font-display); white-space: nowrap; transition: opacity 0.6s ease, transform 0.8s var(--ease-expo); transition-delay: var(--fill-ms, 0ms); }
.sheet__status[hidden] { display: none; }
.sheet__status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--blue); animation: status-pulse 2.2s ease-in-out infinite; }
@keyframes status-pulse { 50% { scale: 1.45; } }
.deck.is-armed:not(.is-verified) .sheet__status { opacity: 0; transform: translateY(8px); }
.sheet__title { display: grid; gap: 0.4rem; font-size: clamp(2.4rem, 1.6rem + 2.2vw, 3.4rem); font-weight: 300; line-height: 0.95; letter-spacing: -0.015em; }
.sheet__title span { font-family: var(--font-text); font-size: var(--fs-small); font-weight: 400; line-height: 1.45; letter-spacing: 0; color: var(--muted); }

/* Validity: one tile per month of the three-year term, filled up to the current month. */
.validity { display: grid; gap: 0.8rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.validity__dates { display: flex; justify-content: space-between; gap: 1rem; }
.validity__dates div:last-child { text-align: right; }
.validity__dates dt { color: var(--muted); font-size: 0.85rem; }
.validity__dates dd { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; line-height: 1.2; }
.validity__track { position: relative; display: grid; grid-template-columns: repeat(var(--months, 36), 1fr); gap: clamp(2px, 0.3vw, 4px); padding-bottom: 1.5rem; }
.validity__track:empty { display: none; }
.validity__track i { height: 1.35rem; border-radius: 3px; background: var(--tint); transition: background-color 0.35s ease; transition-delay: calc(var(--i) * 40ms); }
.is-verified .validity__track .is-past { background: var(--blue); }
.is-verified .validity__track .is-now { background: var(--blue-bright); animation: month-now 1.8s ease-in-out infinite var(--fill-ms, 0ms); }
@keyframes month-now { 50% { opacity: 0.45; } }
.validity__today { position: absolute; bottom: 0; left: calc((var(--now) + 0.5) / var(--months) * 100%); translate: -50% 0; color: var(--blue); font: 500 0.95rem/1 var(--font-display); opacity: 0; transition: opacity 0.5s ease var(--fill-ms, 0ms); }
.is-verified .validity__today { opacity: 1; }

.sheet__scope { display: grid; gap: 0.3rem; }
.sheet__label { color: var(--muted); font-size: 0.85rem; }
.sheet__scope p:last-child { color: var(--graphite-soft); font-size: var(--fs-small); line-height: 1.6; }

.sheet--policy { background: radial-gradient(90% 70% at 100% 0%, rgb(143 180 227 / 0.35), transparent 60%), var(--blue); border-color: transparent; color: var(--white); }
.sheet__logo { width: 112px; }
.sheet__code { color: rgb(255 255 255 / 0.8); font: 500 1.05rem/1 var(--font-display); letter-spacing: 0.04em; }
.sheet--policy .sheet__title span { color: var(--on-dark); }
.sheet__facts { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / 0.25); }
.sheet__facts dt { color: var(--on-dark-muted); font-size: 0.85rem; }
.sheet__facts dd { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; }
.sheet__watermark { position: absolute; right: -6%; bottom: -10%; width: 56%; pointer-events: none; }
.sheet__watermark svg { display: block; width: 100%; height: auto; }
.sheet__watermark .sym-on { fill: rgb(255 255 255 / 0.14); }
.sheet__watermark .sym-off, .sheet__watermark .sym-hole { fill: none; }

@media (min-width: 60rem) { .certs__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* ---------- Where we work: outlined names fill with ink as they scroll into place ---------- */
@property --ink { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
.reach__head { margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.reach__list { padding: 0; list-style: none; border-bottom: 1px solid var(--line-dark); }
.reach__item { display: grid; gap: 0.6rem 3rem; align-items: end; padding-block: clamp(1.4rem, 3vw, 2.4rem); border-top: 1px solid var(--line-dark); --rule: rgb(255 255 255 / 0.4); transition: --ink 0.45s ease; }
/* --p (0..1, motion.js data-progress) moves the edge of the ink from left to right; padding keeps the
   ascenders and descenders inside the clipped background. */
.reach__name { justify-self: start; margin-block: -0.08em -0.14em; padding: 0.08em 0.06em 0.14em 0; font-size: clamp(3.3rem, 1rem + 8vw, 9rem); font-weight: 300; line-height: 0.9; letter-spacing: -0.03em; color: transparent; -webkit-text-stroke: 1.25px rgb(255 255 255 / 0.38); background: linear-gradient(90deg, var(--ink) 0 50%, var(--blue-soft) 52.5%, transparent 55%) no-repeat; background-size: 200% 100%; background-position: calc((1 - var(--p, 1)) * 110%) 0; -webkit-background-clip: text; background-clip: text; transition: translate 0.7s var(--ease-expo); }
.reach__text { max-width: 24em; color: var(--on-dark); opacity: calc(0.35 + var(--p, 1) * 0.65); }
.reach__item:hover { --ink: var(--blue-soft); }
.reach__item:hover .reach__name { translate: 0.1em 0; }
.reach__foot { display: grid; gap: 1.5rem; justify-items: start; max-width: 36rem; margin: clamp(3rem, 6vw, 5rem) 0 0 auto; }
@media (min-width: 52rem) { .reach__item { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); } }

/* ---------- Values: each one places its tiles of the symbol (tile-display.js data-assemble) ---------- */
.values-layout { display: grid; gap: clamp(2.5rem, 6vw, 6rem); }
.values-visual { order: 2; justify-self: center; width: min(78%, 20rem); }
.values { padding: 0; list-style: none; }
.value { display: grid; gap: 0.55rem; padding-block: clamp(1.5rem, 2.8vw, 2.1rem); border-top: 1px solid var(--line); --rule: var(--graphite); transition: opacity 0.5s ease; }
.value__title { display: flex; align-items: center; gap: 0.8rem; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem); line-height: 1.06; transition: color 0.4s; }
.value__title::before { content: ""; flex: none; width: 0.34em; height: 0.34em; border-radius: 22%; box-shadow: inset 0 0 0 1.5px rgb(10 81 161 / 0.4); transition: background-color 0.4s, box-shadow 0.4s, transform 0.7s var(--ease-spring); }
.value.is-placed .value__title::before { background: var(--blue); box-shadow: 0 0 0 4px rgb(10 81 161 / 0.12); transform: rotate(90deg); }
.value.is-current .value__title { color: var(--blue); }
.value p { max-width: 34em; color: var(--graphite-soft); }
.signature { position: relative; display: grid; gap: 0.15rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--graphite); }
.signature::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-expo); }
.is-assembled .signature::before { transform: none; }
.signature strong { font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; }
.signature span { color: var(--muted); font-size: var(--fs-small); }
@media (min-width: 64rem) {
  .values-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .values-visual { order: 0; position: sticky; top: calc(50vh - 13rem); justify-self: stretch; width: auto; max-width: 26rem; }
  .js .value:not(.is-placed) { opacity: 0.4; }
}

/* 06-about.css */
/* SPAIQ — the validation line (Services page), the chain from validation to health and the tile map of the
   Packaging Valley (About page). */

/* ---------- Validation line: products run through three gates without ever stopping ---------- */
.about__grid { display: grid; gap: clamp(3rem, 6vw, 6rem); align-items: center; }
.about__text { display: grid; gap: 1.4rem; }
.about__text p { max-width: 38em; color: var(--graphite-soft); }
/* An isometric floor of tiles with a belt. Six products loop along it in --T, a sixth of the loop apart;
   each gate they cross verifies them one step further (flow-state) and flashes as they pass. A gate at
   travel fraction --at is crossed at times ≡ --at × T (mod T/6), which gives its --phase. Lengths in cqw
   scale the whole scene with its width. */
.flow { --T: 10.8s; --gate-h: 16cqw; --lift: 1.8cqw; position: relative; width: 100%; max-width: 40rem; aspect-ratio: 10 / 7.5; margin: 0; justify-self: center; container-type: inline-size; perspective: 1800px; }
.flow__stage { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.6s var(--ease-out); }
.flow__floor { position: absolute; left: 50%; top: 55%; width: 112%; aspect-ratio: 12 / 5; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(54deg) rotateZ(-32deg); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='.6' y='.6' width='8.8' height='8.8' rx='1.8' fill='%23dfe8f3'/%3E%3C/svg%3E") 0 0 / calc(100% / 12) calc(100% / 5); }
.flow__floor::before { content: ""; position: absolute; inset: -8% -4%; border-radius: 10%; background: radial-gradient(closest-side, rgb(7 60 120 / 0.18), transparent); transform: translateZ(-2cqw); }
.flow__belt { position: absolute; left: 1%; right: 1%; top: 33%; height: 34%; border-radius: 1.2cqw; transform-style: preserve-3d; transform: translateZ(0.4cqw); background: linear-gradient(#dbe5f2, #c6d6eb); box-shadow: 0 0 0 1px rgb(10 81 161 / 0.08), 0 1cqw 2cqw -1cqw rgb(7 60 120 / 0.4); }
/* The rollers slide with transform inside their own clipped layer (clipping the belt would flatten the products). */
.flow__rollers { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.flow__rollers::before { content: ""; position: absolute; top: 0; bottom: 0; left: -4cqw; right: 0; background: repeating-linear-gradient(90deg, rgb(10 81 161 / 0.16) 0 0.3cqw, transparent 0.3cqw 4cqw); animation: belt-run calc(var(--T) * 0.0472) linear infinite; }
/* The belt's thickness: a darker copy just below it. */
.flow__belt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #a9bfdc; transform: translateZ(-1.1cqw); }
@keyframes belt-run { to { transform: translateX(4cqw); } }
.flow__item { position: absolute; left: 0; top: 50%; width: 7%; aspect-ratio: 1; margin-top: -3.5%; border-radius: 22%; transform-style: preserve-3d; background: var(--face, #ffffff); box-shadow: inset 0 0 0 1.5px var(--rim, rgb(10 81 161 / 0.45)), var(--glow, 0 0 0 transparent); animation: flow-travel var(--T) linear infinite, flow-state var(--T) linear infinite; animation-delay: calc(var(--i) * var(--T) / -6); }
.flow__item::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--edge, #c3d2e6); transform: translateZ(calc(var(--lift) * -0.8)); }
/* Linear over the whole loop (5% and 95% are exact fractions of the path), so the timing of the gates holds. */
@keyframes flow-travel {
  0% { transform: translateX(0) translateZ(var(--lift)) scale(0); }
  5% { transform: translateX(66.43%) translateZ(var(--lift)) scale(1); }
  95% { transform: translateX(1262.14%) translateZ(var(--lift)) scale(1); }
  100% { transform: translateX(1328.57%) translateZ(calc(var(--lift) * 3)) scale(0); }
}
@keyframes flow-state {
  0%, 25% { --face: #ffffff; --rim: rgb(10 81 161 / 0.45); --edge: #c3d2e6; --glow: 0 0 0 transparent; }
  25.1%, 50% { --face: #d9e5f5; --rim: rgb(10 81 161 / 0.25); --edge: #a4bddf; --glow: 0 0 0 transparent; }
  50.1%, 75% { --face: #8fb4e3; --rim: rgb(255 255 255 / 0.3); --edge: #5b8ccb; --glow: 0 0 0 transparent; }
  75.1%, 100% { --face: linear-gradient(150deg, #4d8fdb, #0a51a1 60%, #073c78); --rim: rgb(255 255 255 / 0.28); --edge: #063366; --glow: 0 0 2.4cqw rgb(47 116 196 / 0.55); }
}
/* A gate is a frame standing across the belt: laid on the floor, then turned up around its left edge. */
.flow__gate { position: absolute; left: calc((1 + 0.98 * (3.5 + 93 * var(--at))) * 1%); top: 22%; width: var(--gate-h); height: 56%; border: 0.7cqw solid var(--blue-bright); border-left: 0; border-radius: 0 1.8cqw 1.8cqw 0; transform-origin: 0 50%; transform: rotateY(-90deg); background: linear-gradient(90deg, rgb(47 116 196 / 0.05), rgb(47 116 196 / 0.16)); box-shadow: 0 0 2cqw rgb(47 116 196 / 0.25); }
/* A scan line keeps sweeping up and down the gate (its local x axis points up). */
.flow__gate::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 0.35cqw; border-radius: 1cqw; background: var(--blue-soft); box-shadow: 0 0 1.5cqw rgb(47 116 196 / 0.8); animation: gate-sweep 2.2s var(--ease-inout) infinite alternate; }
@keyframes gate-sweep { to { transform: translateX(calc(var(--gate-h) - 1.4cqw)); } }
.flow__gate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgb(143 180 227 / 0.35), rgb(255 255 255 / 0.9)); box-shadow: 0 0 4cqw rgb(47 116 196 / 0.7); opacity: 0; animation: gate-scan calc(var(--T) / 6) ease-out infinite; animation-delay: calc(var(--phase) - 0.25s); }
@keyframes gate-scan { 0% { opacity: 0; } 10% { opacity: 1; } 45%, 100% { opacity: 0; } }
/* Labels float above their gate, turned back to face the viewer (inverse of the floor's rotation). */
.flow__label { position: absolute; left: calc((1 + 0.98 * (3.5 + 93 * var(--at))) * 1%); top: 50%; padding: 0.35em 0.7em; border-radius: 0.5em; background: var(--white); box-shadow: 0 0.8cqw 2cqw -0.8cqw rgb(7 60 120 / 0.45), inset 0 0 0 1px rgb(10 81 161 / 0.12); color: var(--blue); font: 500 clamp(0.72rem, 2.3cqw, 1rem) / 1 var(--font-display); letter-spacing: 0.01em; white-space: nowrap; transform: translateZ(calc(var(--gate-h) + 2cqw)) rotateZ(32deg) rotateX(-54deg) translate(-50%, -100%); }
.flow.is-paused .flow__rollers::before, .flow.is-paused .flow__item, .flow.is-paused .flow__gate::before, .flow.is-paused .flow__gate::after { animation-play-state: paused; }
@media (max-width: 40rem) { .flow__floor { width: 100%; } }
/* Reduced motion: the line stands still at its first frame, products spread along the belt at every stage. */
@media (prefers-reduced-motion: reduce) {
  .flow .flow__rollers::before, .flow .flow__item, .flow .flow__gate::after { animation-duration: var(--T) !important; animation-iteration-count: infinite !important; animation-play-state: paused; }
  .flow .flow__gate::before { animation: none; }
}

@media (min-width: 60rem) { .about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* ---------- Mission: the chain from validation to the health of whoever uses the drug (on a light section) ---------- */
.mission-head { margin-bottom: clamp(3.5rem, 7vw, 6rem); }
/* Lit by default; while armed and not yet seen the chain is dark, then steps light up in order (--s), each
   link tile after the previous (--k), a --beat apart. Afterwards a light pulse runs along it every 6 s. */
.chain { --beat: 480ms; --gap: 2.5rem; display: grid; gap: var(--gap); padding: 0; list-style: none; }
.chain__step { position: relative; display: grid; gap: 0.6rem; align-content: start; padding-left: 3.8rem; }
.chain__node { position: absolute; left: 0; top: 0.1rem; width: 2.2rem; height: 2.2rem; border-radius: 24%; background: rgb(10 81 161 / 0.05); box-shadow: inset 0 0 0 1.5px transparent, 0 0 22px rgb(47 116 196 / 0.4), 0 0 0 transparent; transform: rotate(90deg); transition: box-shadow 0.5s, transform 0.8s var(--ease-spring); transition-delay: calc(var(--s) * 1.4 * var(--beat)); }
.chain__node::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(150deg, var(--blue-light), var(--blue) 60%, var(--blue-deep)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3); transition: opacity 0.5s; transition-delay: inherit; }
.chain__step--goal .chain__node { box-shadow: inset 0 0 0 1.5px transparent, 0 0 18px 4px rgb(143 180 227 / 0.8), 0 0 50px 12px rgb(47 116 196 / 0.3); transform: rotate(90deg) scale(1.15); }
.chain__step--goal .chain__node::before { background: var(--blue-deep); }
.chain__link { position: absolute; left: calc(1.1rem - 4px); top: 2.9rem; bottom: calc(var(--gap) * -1 + 0.5rem); display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; width: 8px; }
.chain__link i { --at: calc((var(--s) * 1.4 + 0.2 + var(--k) * 0.18) * var(--beat)); position: relative; width: 8px; height: 8px; border-radius: 2px; background: var(--blue-soft); box-shadow: 0 0 10px rgb(143 180 227 / 0.7); transition: background-color 0.3s, box-shadow 0.3s; transition-delay: var(--at); }
/* The travelling pulse lights a deep blue copy on top of each link tile (opacity only). */
.chain__link i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--blue); box-shadow: 0 0 14px 2px rgb(47 116 196 / 0.6); opacity: 0; }
.chain__link i:nth-child(1) { --k: 0; }
.chain__link i:nth-child(2) { --k: 1; }
.chain__link i:nth-child(3) { --k: 2; }
.chain__link i:nth-child(4) { --k: 3; }
.chain__link i:nth-child(5) { --k: 4; }
.chain__link i:nth-child(6) { --k: 5; }
/* Same three shadows in both states, so the glow can transition (inset and outer shadows cannot). */
.js .chain:not(.is-inview) .chain__node { box-shadow: inset 0 0 0 1.5px rgb(143 180 227 / 0.4), 0 0 0 transparent, 0 0 0 transparent; transform: none; }
.js .chain:not(.is-inview) .chain__node::before { opacity: 0; }
.js .chain:not(.is-inview) .chain__link i { background: rgb(10 81 161 / 0.1); box-shadow: none; }
.chain.is-inview .chain__node { animation: chain-node 6s ease-in-out infinite; animation-delay: calc(var(--s) * 1.4 * var(--beat) + 3.1s); }
.chain.is-inview .chain__link i::after { animation: chain-pulse 6s ease-in-out infinite; animation-delay: calc(var(--at) + 3.2s); }
.chain__title { font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.6rem); font-weight: 300; line-height: 1; }
.chain__step--goal .chain__title { color: var(--blue); }
.chain__step p { max-width: 22em; color: var(--graphite-soft); font-size: var(--fs-small); line-height: 1.6; }
@keyframes chain-pulse { 0%, 6%, 100% { opacity: 0; } 3% { opacity: 1; } }
@keyframes chain-node { 0%, 8%, 100% { scale: 1; } 3% { scale: 1.2; } }
@media (min-width: 60rem) {
  .chain { --gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chain__step { padding: 4rem 0 0; }
  .chain__node { top: 0; }
  .chain__link { flex-direction: row; left: 3rem; right: calc(var(--gap) * -1 + 0.8rem); top: calc(1.1rem - 4px); bottom: auto; width: auto; height: 8px; }
}

/* ---------- Place: tile map of Italy, the Packaging Valley lit, the pin on Bologna ---------- */
.place__grid { display: grid; gap: clamp(3rem, 6vw, 6rem); align-items: center; }
.place__text { display: grid; gap: 1.5rem; align-content: start; }
.place__address { color: var(--white); font: 500 1.6rem/1.35 var(--font-display); }
.map { width: 100%; max-width: 34rem; margin: 0; justify-self: center; perspective: 1500px; }
.map__stage { position: relative; aspect-ratio: var(--cols) / var(--rows); transform-style: preserve-3d; transform: rotateX(calc(16deg + var(--rx, 0deg))) rotateY(calc(-10deg + var(--ry, 0deg))) rotateZ(2deg); transition: transform 0.8s var(--ease-out); }
.map__tiles { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* The tiles pop in as a wave that starts at the pin (--d: distance in tiles). */
.map__tiles use { transform-box: fill-box; transform-origin: center; transition: opacity 0.6s ease, transform 0.9s var(--ease-spring); transition-delay: calc(var(--d) * 45ms); }
.map__land use { fill: rgb(255 255 255 / 0.11); }
.map__glow { opacity: 0.85; }
.map__glow use { fill: var(--blue-light); }
.map__region use { fill: var(--blue-bright); }
.js .map:not(.is-inview) .map__tiles use { opacity: 0; transform: scale(0.3); }
.map__pin { position: absolute; left: var(--x); top: var(--y); width: calc(100% / var(--cols) * 1.25); aspect-ratio: 1; margin: calc(100% / var(--cols) * -0.625) 0 0 calc(100% / var(--cols) * -0.625); border-radius: 24%; background: var(--white); box-shadow: 0 0 14px 3px rgb(143 180 227 / 0.95), 0 0 44px 12px rgb(47 116 196 / 0.6); transform: translateZ(26px); transition: opacity 0.6s ease 0.3s, transform 1.1s var(--ease-spring) 0.3s; }
.js .map:not(.is-inview) .map__pin { opacity: 0; transform: translateZ(180px); }
.map__pin::before, .map__pin::after { content: ""; position: absolute; inset: -30%; border: 2px solid rgb(143 180 227 / 0.9); border-radius: 30%; animation: pin-ring 2.6s var(--ease-out) infinite; }
.map__pin::after { animation-delay: 1.3s; }
@keyframes pin-ring { from { transform: scale(0.6); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
.map__label { position: absolute; left: calc(100% + 0.8rem); top: 50%; translate: 0 -50%; padding: 0.35rem 0.6rem; border-radius: 6px; background: rgb(20 24 25 / 0.8); color: var(--white); font: 600 1.05rem/1 var(--font-display); letter-spacing: 0.04em; white-space: nowrap; }
.map__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; margin-top: 1.75rem; color: var(--on-dark-muted); font-size: var(--fs-small); }
.map__key { display: inline-flex; align-items: center; gap: 0.55rem; }
.map__key::before { content: ""; flex: none; width: 0.7rem; height: 0.7rem; border-radius: 22%; }
.map__key--region::before { background: var(--blue-bright); box-shadow: 0 0 10px rgb(47 116 196 / 0.7); }
.map__key--pin::before { background: var(--white); box-shadow: 0 0 10px rgb(143 180 227 / 0.9); }
@media (min-width: 60rem) { .place__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* 07-vmodel.css */
/* SPAIQ — the V-Model on the Services page (vmodel.js).
   Desktop (56rem+): one SVG drawn by the generator. Every block sits between the two real diagonals of its arm,
   so the V is a V: blocks are parallelograms, light at the top and deeper towards the build.
   Narrow screens: the SVG hides and the same phases walk down one column (.vm__steps, --d is the indent).
   Without the script the diagram and the table below both stay visible. */

.vm { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }

/* ---------- Point of view ---------- */
.vm__tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.vm:not(.is-ready) .vm__tabs, .vm:not(.is-ready) .vm__panel { display: none; }
.vm__tab { display: grid; gap: 0.1rem; min-width: min(100%, 16rem); padding: 0.7rem 1.25rem; text-align: left; color: var(--on-dark); background: rgb(255 255 255 / 0.05); border: 1px solid var(--line-dark); border-radius: var(--radius-s); cursor: pointer; transition: background-color 0.3s, border-color 0.3s, color 0.3s, transform 0.4s var(--ease-out); }
.vm__tab strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; line-height: 1.1; color: var(--white); }
.vm__tab span { font-size: var(--fs-small); line-height: 1.35; color: var(--on-dark-muted); }
.vm__tab:hover { border-color: var(--blue-soft); transform: translateY(-2px); }
.vm__tab[aria-pressed="true"] { background: var(--blue); border-color: var(--blue-bright); }
.vm__tab[aria-pressed="true"] span { color: var(--on-dark); }
.vm__tab:focus-visible, .vm__step:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.vm__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.vm__figure { margin: 0; min-width: 0; }

/* ---------- The V (SVG) ---------- */
.vm__svg { display: none; width: 100%; height: auto; overflow: visible; font-family: var(--font-text); -webkit-tap-highlight-color: transparent; }

.vm__shape { fill: var(--fill); stroke: transparent; stroke-width: 2; stroke-linejoin: round; transition: fill 0.35s var(--ease-out), stroke 0.35s, stroke-width 0.35s; }
.vm__sheen { pointer-events: none; }
.vm__code { font-family: var(--font-display); font-size: 27px; font-weight: 500; letter-spacing: 0.02em; fill: var(--white); text-anchor: middle; pointer-events: none; }
.vm__code--s { font-size: 23px; }
.vm__name { font-size: 15px; fill: rgb(255 255 255 / 0.86); text-anchor: middle; pointer-events: none; }
.vm__tag { pointer-events: none; }
.vm__tag rect { fill: rgb(255 255 255 / 0.92); }
.vm__tag text { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--graphite); text-anchor: middle; }
.vm:not(.is-ready) .vm__tag { display: none; }

.vm__ph { cursor: pointer; outline: none; }
.vm__ph:hover .vm__shape { fill: color-mix(in oklab, var(--fill), white 9%); }
.vm__ph.is-pair .vm__shape { stroke: var(--blue-soft); }
.vm__ph[aria-pressed="true"] .vm__shape { fill: color-mix(in oklab, var(--fill), white 16%); stroke: var(--white); stroke-width: 2.5; }
.vm__ph:focus-visible .vm__shape { stroke: var(--white); stroke-width: 3; stroke-dasharray: 7 5; }

/* Risk analysis: the light band leaning on the left arm */
.vm__ph--ra { --fill: rgb(143 180 227 / 0.16); }
.vm__ph--ra .vm__shape { stroke: rgb(143 180 227 / 0.55); stroke-width: 1.2; stroke-dasharray: 4 4; }
.vm__ph--ra:hover .vm__shape { fill: rgb(143 180 227 / 0.26); }
.vm__ph--ra[aria-pressed="true"] .vm__shape { fill: rgb(143 180 227 / 0.34); stroke-dasharray: none; }
.vm__ra-name { font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--white); text-anchor: middle; pointer-events: none; }

/* Not phases: installation and build */
.vm__static-shape .vm__shape { transition: none; }
.vm__static-shape--build .vm__shape { fill: #0a2849; stroke: rgb(143 180 227 / 0.22); stroke-width: 1; }
.vm__static-label { font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--on-dark); text-anchor: middle; }
.vm__build-label { font-family: var(--font-display); font-size: 32px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; fill: var(--white); text-anchor: middle; }

/* Side bands */
.vm__band polygon { fill: rgb(47 116 196 / 0.14); stroke: rgb(143 180 227 / 0.22); stroke-width: 1; }
.vm__band-label { font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; fill: var(--blue-soft); text-anchor: middle; }

/* Links between twin phases */
.vm__link { color: rgb(255 255 255 / 0.26); }
.vm__link line { stroke: currentColor; stroke-width: 2; transition: stroke 0.4s; }
.vm__link polygon { fill: currentColor; transition: fill 0.4s; }
.vm__link.is-on { color: var(--blue-soft); }
.vm__link.is-on line { stroke-dasharray: 10 6; animation: vm-flow 1.1s linear infinite; }
@keyframes vm-flow { to { stroke-dashoffset: -16; } }

/* Axis */
.vm__axis-label { font-family: var(--font-display); font-size: 21px; font-weight: 500; letter-spacing: 0.04em; fill: var(--blue-soft); text-anchor: middle; }
.vm__axis-line, .vm__axis-cut { stroke: rgb(143 180 227 / 0.45); stroke-width: 1.2; stroke-dasharray: 5 5; }
.vm__axis polygon { fill: rgb(143 180 227 / 0.6); }

/* Entrance: the arms grow down the left, across the build and up the right */
.vm__in { transition: opacity 0.7s var(--ease-out), transform 1s var(--ease-expo); transition-delay: calc(var(--o, 0) * 70ms); }
.vm.is-ready:not(.is-drawn) .vm__in { opacity: 0; transform: translateY(12px); }
.vm__link { transition: opacity 0.6s var(--ease-out) 1s; }
.vm.is-ready:not(.is-drawn) .vm__link { opacity: 0; }

/* ---------- Narrow screens: one column of steps ---------- */
.vm__steps { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vm__steps > li { margin-left: calc(var(--d, 0) * 4.5%); }
.vm__step { display: grid; justify-items: center; gap: 0.15rem; width: 100%; min-height: 4.2rem; padding: 0.55rem 1.4rem; text-align: center; font: inherit; color: var(--white); background: var(--fill); border: 0; border-radius: 4px; clip-path: polygon(0.9rem 0, 100% 0, calc(100% - 0.9rem) 100%, 0 100%); cursor: pointer; transition: background-color 0.35s, box-shadow 0.35s; }
.vm__step-code { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; line-height: 1.05; }
.vm__step-name { font-size: 0.8125rem; line-height: 1.25; color: rgb(255 255 255 / 0.86); }
.vm__step-tag { margin-top: 0.15rem; padding: 0.05rem 0.55rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5; color: var(--graphite); background: rgb(255 255 255 / 0.92); border-radius: 99px; }
.vm__step-tag:empty, .vm:not(.is-ready) .vm__step-tag { display: none; }
.vm__step[aria-pressed="true"] { background: color-mix(in oklab, var(--fill), white 16%); box-shadow: inset 0 0 0 2px var(--white); }
.vm__step.is-pair { box-shadow: inset 0 0 0 2px var(--blue-soft); }
.vm__step--r, .vm__step-static--install { clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 100%, 0.9rem 100%); }
.vm__step:focus-visible { clip-path: none; }
.vm__step--ra { --fill: rgb(143 180 227 / 0.16); min-height: 3.4rem; box-shadow: inset 0 0 0 1px rgb(143 180 227 / 0.55); }
.vm__step--ra .vm__step-code { font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase; }
.vm__step--ra[aria-pressed="true"] { background: rgb(143 180 227 / 0.34); }
.vm__step-static { display: grid; place-items: center; min-height: 3rem; padding: 0.5rem 1rem; font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark); background: #0d2f57; border-radius: 4px; clip-path: polygon(0.9rem 0, 100% 0, calc(100% - 0.9rem) 100%, 0 100%); }
.vm__step-static--build { font-size: 1.35rem; letter-spacing: 0.3em; color: var(--white); background: #0a2849; clip-path: polygon(0 0, 100% 0, calc(100% - 0.9rem) 100%, 0.9rem 100%); }

/* ---------- What we do ---------- */
.vm__panel { display: grid; gap: 0.9rem; padding: clamp(1.1rem, 2.4vw, 1.75rem); background: rgb(20 24 25 / 0.94); border: 1px solid var(--line-dark); border-radius: var(--radius-m); backdrop-filter: blur(14px); position: sticky; bottom: 0.75rem; z-index: 5; max-height: 52vh; overflow: auto; }
.vm__panel h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.15; }
.vm__card { display: grid; gap: 0.35rem; padding: 0.9rem 1.1rem; border-left: 3px solid var(--line-dark); background: rgb(255 255 255 / 0.03); opacity: 0.6; transition: opacity 0.35s, background-color 0.35s, border-color 0.35s; }
.vm__card.is-stressed { opacity: 1; border-color: var(--blue-bright); background: rgb(47 116 196 / 0.18); }
.vm__card h4 { font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-soft); }
.vm__kind { margin: 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; line-height: 1.1; color: var(--white); }
.vm__card p:last-child { margin: 0; color: var(--on-dark); }

/* ---------- Table: the answer without the script ---------- */
.vm__fallback { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.vm__fallback caption { padding-bottom: 0.75rem; text-align: left; color: var(--on-dark-muted); }
.vm__fallback th, .vm__fallback td { padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; border-top: 1px solid var(--line-dark); }
.vm__fallback thead th { color: var(--blue-soft); font-weight: 500; }
.vm__fallback-wrap { min-width: 0; overflow-x: auto; }
.vm.is-ready .vm__fallback-wrap { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- Desktop: the V itself ---------- */
@media (min-width: 56rem) {
  .vm__svg { display: block; }
  .vm__steps { display: none; }
  .vm__panel { position: static; max-height: none; backdrop-filter: none; background: rgb(255 255 255 / 0.05); }
}
@media (min-width: 80rem) {
  .vm__layout { grid-template-columns: minmax(0, 1fr) minmax(19rem, 22rem); }
  .vm__panel { position: sticky; top: calc(var(--header-h) + 2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .vm__tab, .vm__step, .vm__card, .vm__shape, .vm__in, .vm__link, .vm__link line, .vm__link polygon { transition: none; }
  .vm.is-ready:not(.is-drawn) .vm__in, .vm.is-ready:not(.is-drawn) .vm__link { opacity: 1; transform: none; }
  .vm__link.is-on line { animation: none; stroke-dasharray: none; }
}