/* ---------- Self-hosted fonts ----------
   Space Grotesk + Inter, downloaded from Google Fonts (google/fonts repo
   naming) and served from this origin instead of fonts.googleapis.com.
   Reason: loading fonts from Google's CDN sends every visitor's IP to Google
   on every page view — the exact practice the Italian Garante Privacy has
   flagged for other sites. Self-hosting removes the request entirely, and
   since Chrome 86+ partitions the font cache per site anyway, there was no
   longer a shared-cache benefit to loading them from Google. Same subsetting
   Google itself serves (latin + latin-ext per weight), so file size and
   character coverage are unchanged — only the origin moved. Regenerate by
   fetching https://fonts.googleapis.com/css2?... with an old Chrome UA
   (forces static per-weight files instead of one shared variable file). */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #0D1117;
  --text: #E8E8EA;
  --text-dim: #A8B3C2;
  --accent: #00BCD4;
  --accent-tint: #4DD0E1;
  --accent-2: #FF8A50;
  --accent-2-soft: rgba(255, 138, 80, 0.1);
  /* One white, five weights. There were sixteen alphas of it, most of them
     indistinguishable from their neighbours. */
  --wash: rgba(232, 232, 234, 0.04);
  --line: rgba(232, 232, 234, 0.08);
  --surface: rgba(232, 232, 234, 0.14);
  --surface-strong: rgba(232, 232, 234, 0.3);
  --surface-max: rgba(232, 232, 234, 0.4);
  --grid-line: var(--wash);
  --error: #FF6B6B;
  --on-accent: #06131A;  /* text on cyan fills: 4 uses, was a bare literal */

  --font-heading: 'Space Grotesk', 'Helvetica Neue', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;

  --header-h: 4.25rem;

  /* Type scale — six steps, derived from the sizes already most used in the
     page (17px x64, 15px x45, 13px x33), not invented. Everything that sat
     within 4px of a neighbour collapses into the nearest step: 14 and 15.2 to
     15, 16 to 17, 19/20 to 22, 52 to 56, 11/12 to 13. */
  --fs-xs: 0.8125rem;    /* 13 */
  --fs-sm: 0.9375rem;    /* 15 */
  --fs-md: 1.0625rem;    /* 17 — body */
  --fs-lg: 1.375rem;     /* 22 */
  --fs-xl: 1.875rem;     /* 30 */
  --fs-2xl: 3.5rem;      /* 56 */
  --fs-display: 5.5rem;  /* 88 — decorative only (step numbers, quote glyph) */

  /* Fluid heading sizes: same six steps at both ends, so the scale holds at
     every width instead of only at the breakpoints. */
  --fs-h1: clamp(2rem, 8vw, 3.5rem);        /* 32 → 56 */
  --fs-h2: clamp(2.25rem, 5.5vw, 3.5rem);   /* 36 → 56 */
  --fs-h3: clamp(1.5rem, 4vw, 1.875rem);    /* 24 → 30 */
  --fs-lead: clamp(1.0625rem, 3.2vw, 1.375rem); /* 17 → 22 */

  /* Vertical rhythm — 8px grid. 40 (--space-5) earns its place on frequency:
     26 uses, more than 32 and 8. */
  --space-0: 0.25rem;    /* 4 */
  --space-1: 0.5rem;     /* 8 */
  --space-2: 1rem;       /* 16 */
  --space-3: 1.5rem;     /* 24 */
  --space-4: 2rem;       /* 32 */
  --space-5: 2.5rem;     /* 40 */
  --space-6: 3.5rem;     /* 56 */
  --space-7: 4.5rem;     /* 72 */
  --space-8: 6rem;       /* 96 */
  --space-9: 9rem;       /* 144 */

  /* Section rhythm. Kept fluid: these are the only paddings that should scale
     with the viewport. */
  --section-pt: clamp(4rem, 9vw, 6rem);     /* 64 → 96 */
  --section-pb: clamp(5rem, 11vw, 9rem);    /* 80 → 144 */
  --section-sm: clamp(2.5rem, 6vw, 3.5rem); /* 40 → 56, tighter joins */

  /* Measure. 40rem = 75 characters at body size — the width Filosofia already
     uses, and the only one in the page that was right. */
  --col-text: 40rem;      /* 75 characters at body size — prose */
  --col-heading: 42.5rem; /* headings only: 3-4 words per line at display size */
  --col-page: 72rem;

  /* Corners: one for surfaces, one for pills, one for true circles. */
  --radius: 12px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --radius-focus: 4px;   /* focus rings only: not a surface corner */
}

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

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

#competenze,
#recensioni,
#contact {
  scroll-margin-top: calc(var(--header-h) + var(--space-2));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font: inherit;
  color: inherit;
}

/* ---------- Site header / nav ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}

.site-header.is-scrolled {
  background: rgba(13, 17, 23, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.5);
}

.site-nav__container {
  position: relative;
  max-width: 72rem;
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-nav__logo {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.site-nav__logo-m {
  color: var(--text);
}

.site-nav__logo-c {
  color: var(--accent);
}

.site-nav__logo:focus-visible {
  outline: 2px solid var(--accent-tint);
  outline-offset: 4px;
  border-radius: var(--radius-focus);
}

.site-nav__toggle {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  border: 1px solid var(--surface);
  border-radius: var(--radius);
  cursor: pointer;
}

.site-nav__toggle-bar {
  width: 1.125rem;
  height: 2px;
  border-radius: 1px;
  background: var(--text);
  transition: transform 200ms ease, opacity 200ms ease;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2) {
  opacity: 0;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-nav__toggle:focus-visible {
  outline: 2px solid var(--accent-tint);
  outline-offset: 2px;
}

.site-nav__menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: rgba(13, 17, 23, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: var(--space-1) 1.5rem var(--space-3);
  opacity: 0;
  transform: translateY(-6px);
}

.site-nav__menu:not([hidden]) {
  display: flex;
}

.site-nav__menu.is-animatable {
  transition: opacity 200ms ease, transform 200ms ease;
}

.site-nav__menu.is-open {
  opacity: 1;
  transform: translateY(0);
}

.site-nav__links {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__links a {
  display: block;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 150ms ease;
}

.site-nav__links li:last-child a {
  border-bottom: none;
}

.site-nav__links a:hover {
  color: var(--text);
}

.site-nav__links a:focus-visible {
  outline: 2px solid var(--accent-tint);
  outline-offset: -2px;
  border-radius: var(--radius-focus);
}

.site-nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-2);
  width: 100%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  padding: var(--space-2) 1.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.site-nav__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(0, 188, 212, 0.45);
}

.site-nav__cta:focus-visible {
  outline: 2px solid var(--accent-tint);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__toggle-bar,
  .site-nav__menu,
  .site-nav__menu.is-animatable,
  .site-header {
    transition: none;
  }
}

@media (min-width: 768px) {
  .site-nav__container {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .site-nav__toggle {
    display: none;
  }

  .site-nav__menu {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    padding: 0;
    opacity: 1;
    transform: none;
  }

  .site-nav__links {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }

  .site-nav__links a {
    padding: 0;
    border-bottom: none;
  }

  .site-nav__cta {
    margin-top: 0;
    width: auto;
    padding: var(--space-1) 1.25rem;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Faint grid, drawn with CSS gradients — no image file */
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 40%, transparent 90%);
  pointer-events: none;
}

/* Faint film grain, generated with an inline SVG turbulence filter — no image file */
.hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.hero__content {
  width: 100%;
  max-width: var(--col-text);
  margin: 0 auto;
  padding: var(--space-7) 0 var(--space-4);
  animation: hero-in 700ms ease-out both;
}

/* La figura chiude l'hero: i piedi arrivano a filo del bordo inferiore, dove
   comincia la barra ON AIR. Su un fondo quasi nero un'ombra non si vede, quindi
   ad "appoggiare" la figura ci pensano la luce (la pozza sotto le scarpe) e la
   linea che la barra ON AIR ha già. */
.hero__photo {
  position: relative;
  display: flex;
  justify-content: center;
  animation: hero-in 700ms ease-out 120ms both;
}

/* alone ambientale: stacca la figura dal fondo, non la illumina */
.hero__photo::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 8%;
  width: 260%;
  height: 64%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 188, 212, 0.10), transparent 66%);
  pointer-events: none;
}

/* pozza di luce a terra, sotto le scarpe */
.hero__photo::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -0.75rem;
  width: 165%;
  height: 4.5rem;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(0, 188, 212, 0.14), rgba(0, 188, 212, 0.04) 42%, transparent 70%);
  pointer-events: none;
}

.hero__photo-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  /* su mobile la figura deve stare dentro il viewport INSIEME al punto in cui
     appoggia: se le scarpe finiscono sotto la piega, l'appoggio non si vede e
     torna l'effetto "sospesa" */
  max-height: 45svh;
}

/* Desktop: due colonne, testo a sinistra e figura a destra allineata al
   bordo inferiore dell'hero, così la seduta "appoggia" sulla piega. */
@media (min-width: 56.25rem) {
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: end;
    min-height: 100svh;
  }

  .hero__content {
    align-self: center;
    max-width: 34rem;
    margin: 0;
    padding: var(--space-8) 0;
  }

  .hero__photo {
    align-self: end;
    justify-content: flex-end;
  }

  .hero__photo-img {
    max-height: 92svh;
  }
}

.hero__kicker {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-tint);
}

.hero__headline {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text);
}

.hero__lede {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 34ch;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius);
  padding: var(--space-2) 1.5rem;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.hero__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(0, 188, 212, 0.45);
}

.hero__cta:focus-visible {
  outline: 2px solid var(--accent-tint);
  outline-offset: 3px;
}

.hero__cta-arrow {
  animation: arrow-bounce 1.8s ease-in-out infinite;
}

/* ---------- Motion ---------- */
@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__content,
  .hero__photo {
    animation: none;
  }
  .hero__cta-arrow {
    animation: none;
  }
}

/* ---------- On air strip ---------- */
.onair {
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.onair__container {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-2) 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.onair__live {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.onair__dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-circle);
  background: var(--accent);
}

.onair__dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: var(--radius-circle);
  background: var(--accent);
  opacity: 0.55;
  animation: onair-pulse 2s ease-out infinite;
}

.onair__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-tint);
}

.onair__divider {
  flex: none;
  color: var(--surface);
  font-size: var(--fs-sm);
}

.onair__intro {
  flex: none;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.onair__ticker {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.onair__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: onair-marquee 26s linear infinite;
}

.onair:hover .onair__track {
  animation-play-state: paused;
}

.onair__list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-right: 1.5rem;
}

.onair__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.onair__icon {
  flex: none;
  display: flex;
  color: var(--accent-tint);
}

@keyframes onair-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.55;
  }
  70%, 100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

@keyframes onair-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .onair__dot::after {
    animation: none;
    opacity: 0;
  }

  .onair__track {
    animation: none;
  }

  .onair__ticker {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .onair__ticker::-webkit-scrollbar {
    display: none;
  }

  .onair__list[aria-hidden="true"] {
    display: none;
  }
}

@media (min-width: 768px) {
  .onair__container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* ---------- Filosofia section ----------
   One axis: heading, subheading and every principle share the same left
   edge. Titles keep the wider 45rem/720px column; running text (subheading,
   excerpts, expanded paragraphs) is capped narrower at 40rem/640px for a
   sane reading measure. Each principle is a native <details> — open/close,
   keyboard nav and independent multi-open all come from the browser, no
   JS. The "+" trigger reuses the shared .pulse-toggle component (see its
   own section above) purely through CSS: details[open] drives the rotated
   glyph, the stopped pulse and the "Leggi tutto"/"Chiudi" label swap —
   zero event listeners. */
.filosofia {
  background: var(--bg);
  color: var(--text);
}

/* No padding-top: the previous section already ends on --section-pb. Adding
   one here stacked 96 on top of 144 and made this the only 240px join in the
   page. Same reason Recensioni, Storia and Contatti have none. */
.filosofia__container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem var(--section-pb);
}

.filosofia__heading,
.filosofia__principles {
  max-width: 45rem;
}

.filosofia__heading {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
}

.filosofia__subheading {
  max-width: var(--col-text);
  margin: 0 0 var(--space-8);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-dim);
}

.filosofia__principle {
  margin: 0 0 var(--space-5);
}

.filosofia__principle:last-child {
  margin-bottom: 0;
}

/* Hairline splits the 80px principle-to-principle gap in half (2.5rem
   margin-bottom above + this 2.5rem padding-top) instead of adding an
   unspecified extra value on top of it. */
.filosofia__principle:not(:first-child) {
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.filosofia__summary {
  display: block;
  cursor: pointer;
  list-style: none;
}

.filosofia__summary::-webkit-details-marker {
  display: none;
}

/* 5: the whole summary is clickable (720x149 on desktop) but gave no sign of
   it. The label is the part that reads as the control, so that is what moves. */
.filosofia__summary:hover .filosofia__trigger-label {
  color: var(--accent-tint);
}

.filosofia__summary:focus-visible {
  outline: 2px solid var(--accent-tint);
  outline-offset: 3px;
}

.filosofia__principle-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--text);
}

/* The number stays a small margin-note, never the dominant element — the
   opposite treatment from the big path markers in Competenze/Storia. */
.filosofia__principle-num {
  display: inline-block;
  margin-right: 0.6rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent-tint);
  vertical-align: 0.2em;
}

.filosofia__excerpt,
.filosofia__details-body p {
  max-width: var(--col-text);
  margin: 0;
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-dim);
}

/* 24px between any two paragraphs — principio 2's two-paragraph excerpt
   exception and the expanded paragraphs alike. */
.filosofia__excerpt + .filosofia__excerpt,
.filosofia__details-body p + p {
  margin-top: var(--space-3);
}

.filosofia__details-body {
  max-width: var(--col-text);
  margin-top: var(--space-3);
}

.filosofia__details-body a {
  color: var(--accent-tint);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.filosofia__details-body a:hover {
  color: var(--accent);
}

/* 9: same ring as the other 17 focusable elements. */
.filosofia__details-body a:focus-visible {
  outline: 2px solid var(--accent-tint);
  outline-offset: 3px;
  border-radius: var(--radius-focus);
}

/* Last visible paragraph → trigger row: 20px. */
.filosofia__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--space-3);
}

.filosofia__trigger-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--accent);
}

.filosofia__trigger-label-open {
  display: none;
}

details[open] .filosofia__trigger-label-closed {
  display: none;
}

details[open] .filosofia__trigger-label-open {
  display: inline;
}

/* ---------- Competenze section ---------- */
.competenze {
  background: var(--bg);
  color: var(--text);
}

.competenze__container {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--section-pt) 1.5rem var(--section-pb);
}

.competenze__heading {
  margin: 0 0 var(--space-3);
  max-width: var(--col-heading);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--text);
}

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

/* ---------- Pulse toggle (shared component) ----------
   Small circular "+" trigger with a thin accent stroke and a pulsing
   ring cue, used wherever content can expand. Two different markup
   shapes drive the open state, without duplicating the component:
   a <button data-tech-toggle> with JS-managed aria-expanded (Competenze's
   inline tech-detail toggle), and a plain, non-interactive <span> living
   inside a native <details><summary> (Filosofia's expand/collapse
   blocks — focus stays on the summary itself, see its own section).
   --pulse-toggle-size lets a future instance resize it without copying
   the rule block. */
.pulse-toggle {
  --pulse-toggle-size: 1.35rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pulse-toggle-size);
  height: var(--pulse-toggle-size);
  margin: 0 0.15rem;
  padding: 0;
  border: 1.3px solid var(--accent);
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--accent);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xs);
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transform: translateY(-1px);
  transition: background 200ms ease;
}

.pulse-toggle:hover {
  background: rgba(0, 188, 212, 0.12);
}

.pulse-toggle:focus-visible {
  outline: 2px solid var(--accent-tint);
  outline-offset: 2px;
}

/* The glyph is always "+"; opening rotates it 45° so it reads as "×"
   instead of swapping to a "−" glyph — one continuous motion, not a swap. */
.pulse-toggle__glyph {
  display: inline-block;
  transition: transform 200ms ease;
}

.pulse-toggle[aria-expanded="true"] .pulse-toggle__glyph,
details[open] .pulse-toggle__glyph {
  transform: rotate(45deg);
}

.pulse-toggle::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--radius-circle);
  border: 1.3px solid var(--accent);
  opacity: 0.6;
}

.pulse-toggle[aria-expanded="true"]::before,
details[open] .pulse-toggle::before {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .pulse-toggle::before {
    animation: pulse-ring 2s ease-out infinite;
  }
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ---------- Percorso a tappe ----------
   Sentiero serpentina: un unico SVG decorativo (path + pallina + numeri,
   uno per mobile e uno per desktop, alternati via CSS) sotto una lista di
   didascalie HTML reali, posizionate in percentuale sulle stesse coordinate
   del tracciato. Segue il mockup "Serpentina competenze" di Claude Design. */
.percorso {
  margin-top: clamp(var(--space-6), 7vw, var(--space-8));
}

/* Segmented control (not a switch): two short, always-legible labels that
   can't wrap and lose their meaning, unlike an iOS-style toggle paired with
   long external text labels. */
.percorso__toolbar {
  display: inline-flex;
  padding: var(--space-0);
  gap: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--line);
  margin-bottom: clamp(var(--space-4), 4vw, var(--space-5));
}

.percorso__mode-btn {
  border: none;
  background: none;
  padding: var(--space-1) 1rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.percorso__mode-btn:hover {
  color: var(--text);
}

.percorso__mode-btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--bg);
}

.percorso__mode-btn[aria-pressed="true"]:hover {
  color: var(--bg);
}

.percorso__mode-btn:focus-visible {
  outline: 2px solid var(--accent-tint);
  outline-offset: 2px;
}

.percorso__intro {
  max-width: var(--col-text);
  margin: 0 0 var(--space-2);
  padding: var(--space-2) 1.25rem;
  border-left: 2px solid var(--accent-2);
  background: var(--accent-2-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.percorso__intro-eyebrow {
  margin: 0 0 var(--space-0);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.percorso__intro-text {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text);
}

/* Short dashed tick leading from the starting-point box down into the
   path — visually distinct from the path itself (solid line, circular
   markers) so it never reads as "tappa zero". */
.percorso__connector {
  height: 1.75rem;
  margin-left: clamp(1.5rem, 6vw, 3rem);
  border-left: 2px dashed var(--surface-strong);
}

.percorso__stage {
  position: relative;
  width: 100%;
}

/* Mobile: the curve is real (an SVG path, same visual language as
   desktop's), just drawn from measured marker positions instead of fixed
   coordinates — see initPercorsoMobileCurve in main.js. Its viewBox is set
   in JS to match the stage's actual pixel size 1:1, so path/circle
   coordinates below are plain on-screen pixels relative to the stage. */

.percorso__marker-flow {
  position: absolute;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-circle);
  background: var(--bg);
  border: 1.5px solid var(--accent-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text);
}

.percorso__tappa:nth-child(odd) .percorso__marker-flow {
  left: 0;
}

.percorso__tappa:nth-child(even) .percorso__marker-flow {
  right: 0;
}

/* Purely decorative (aria-hidden) — must never intercept clicks meant for
   the toggle/card content painted after it in the DOM. pointer-events:none
   also sidesteps a stacking bug: .percorso__tappa has a transform (desktop),
   which makes it its own stacking context, so an explicit z-index on this
   svg doesn't compare against it the way it looks like it should — DOM
   order (svg first, captions after) is what actually keeps the card on
   top, and that's already correct without any z-index here. */
.percorso__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.percorso__svg--desktop {
  display: none;
}

.percorso__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.55;
}

.percorso__marker {
  fill: var(--bg-elevated, #141B24);
  stroke: var(--accent-tint);
  stroke-width: 1.5;
}

.percorso__num {
  font-family: var(--font-heading);
  font-weight: 600;
  fill: var(--text);
  text-anchor: middle;
  dominant-baseline: central;
  font-size: 15px;
}

.percorso__svg--desktop .percorso__num {
  font-size: 19px;
}

.percorso__ball-glow {
  fill: var(--accent);
  opacity: 0.25;
}

.percorso__ball {
  fill: var(--accent);
}

.percorso__ball-core {
  fill: var(--bg);
}

@media (prefers-reduced-motion: no-preference) {
  .percorso__ball-glow {
    animation: percorso-ball-glow 2.2s ease-in-out infinite;
  }
}

@keyframes percorso-ball-glow {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 0.38; }
}

/* Mobile: a real zigzag, same visual concept as desktop, but built with
   flexbox column + alternating align-self instead of absolute coordinates
   — items stay in normal document flow (stacked top to bottom in DOM
   order) so an expansion can only push the next tappa down, never overlap
   it, while still landing alternately left/right like a serpentine. The
   curve itself is drawn to match wherever these end up (see
   percorso__svg--mobile-curve + initPercorsoMobileCurve in main.js).
   Desktop switches to the absolute serpentine layout (min-width: 768px). */
.percorso__captions {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.percorso__tappa {
  position: relative;
  max-width: 78%;
  padding-bottom: var(--section-sm);
}

.percorso__tappa:last-child {
  padding-bottom: 0;
}

.percorso__tappa:nth-child(odd) {
  align-self: flex-start;
  padding-left: 2.75rem;
  text-align: left;
}

.percorso__tappa:nth-child(even) {
  align-self: flex-end;
  padding-right: 2.75rem;
  text-align: right;
}

/* MVP fix (fase 1): the curve is decorative and pointer-events:none, and
   paints behind the captions purely via DOM order (svg comes first in the
   markup, captions after) — no z-index needed or wanted here, see the
   comment on .percorso__svg above for why an explicit one backfires. On
   desktop this is still a fixed path against absolutely-positioned tappa
   slots, so a tall expansion can grow past its slot; the opaque card
   guarantees the line is never visible ON TOP of the text even when that
   happens — true collision-proof spacing (recalculating the path/slots
   from real content height) is deferred to fase 2. */
.percorso__text-wrap {
  position: relative;
  background: var(--bg-elevated, #141B24);
  border-radius: var(--radius);
  padding: var(--space-2) 1rem;
}

/* 8: this is real body copy, six blocks of it, in the longest section of the
   page. --fs-xs is a label size; on a phone it was the smallest running text
   on the site. Up to --fs-sm, still a step below the 17px used from 768px. */
.percorso__text-wrap > .percorso__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text);
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}

/* Only the ACTIVE variant stays in normal flow, so the card's height
   always matches whichever text is actually showing — the inactive one is
   pulled out with position:absolute so it can still crossfade without
   forcing the card to reserve height for both (grid-area stacking did
   that, and since the tech copy is much longer, it left a huge empty gap
   under the short "semplice" sentences). */
.percorso__text--tech {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}

.percorso[data-mode="tecnico"] .percorso__text--simple {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}

.percorso[data-mode="tecnico"] .percorso__text--tech {
  position: static;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.percorso[data-mode="tecnico"] .percorso__text-wrap > .percorso__text--tech {
  transition: opacity 200ms ease 60ms, visibility 0s linear 0s;
}

/* Technical copy is longer than simple copy — collapsed to its lead
   sentence by default so it can never grow tall enough to overlap the
   next tappa; the rest opens inline via the pulsing "+" toggle. */
/* Continuation of the sentence above it, so it must inherit the caption's
   size — 13px on mobile, 17px from 768px up. It used to say 0.95em, which the
   token pass turned into a fixed size and blew it up on mobile. */
.percorso__tech-rest {
  display: none;
  font-weight: 400;
  opacity: 0.8;
}

.percorso__tech-rest.is-open {
  display: inline;
  animation: percorso-tech-rest-in 260ms ease;
}

@keyframes percorso-tech-rest-in {
  from { opacity: 0; }
  to { opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  .percorso__tech-rest.is-open {
    animation: none;
  }
}


/* The 15-funnel list is the same regardless of mode, so it exists in the
   DOM only once (on tappa 2) rather than repeated per tappa — and it's
   tecnico-only: in modalità semplice this level of detail doesn't belong. */
.percorso__funnel-trigger {
  display: none;
  align-items: center;
  gap: 0.3rem;
  margin-top: var(--space-1);
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
  color: var(--accent-2);
  cursor: pointer;
}

.percorso[data-mode="tecnico"] .percorso__funnel-trigger {
  display: inline-flex;
}

.percorso__funnel-trigger:hover {
  color: var(--text);
}

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

.percorso__funnel-arrow {
  flex: none;
  transition: transform 200ms ease;
}

.percorso__funnel-trigger[aria-expanded="true"] .percorso__funnel-arrow {
  transform: rotate(180deg);
}

/* Mobile: a normal-flow block, so opening it pushes the next tappa down
   like everything else here — no popover, no collision risk. Desktop
   floats it instead (see min-width: 768px), where the absolute-positioned
   captions can't be pushed and need a popover to avoid a layout fight. */
.percorso__funnel-panel {
  display: none;
  margin-top: var(--space-2);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 380ms ease, opacity 300ms ease;
}

.percorso[data-mode="tecnico"] .percorso__funnel-panel {
  display: block;
}

.percorso__funnel-panel.is-open {
  max-height: 20rem;
  opacity: 1;
}

.percorso__funnel-list {
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  display: grid;
  gap: 0.5rem;
  max-height: 13rem;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--surface);
  border-radius: var(--radius);
  width: max-content;
  max-width: 14rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.percorso__funnel-item {
  position: relative;
  margin: 0;
  padding-left: 0.85rem;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text-dim);
  text-align: left;
}

.percorso__funnel-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 1px;
  background: var(--accent-2);
}

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

@media (min-width: 768px) {
  .percorso__stage {
    aspect-ratio: 1200 / 1914;
  }

  .percorso__svg--mobile-curve,
  .percorso__marker-flow {
    display: none;
  }

  .percorso__svg--desktop {
    display: block;
  }

  .percorso__captions {
    position: absolute;
    inset: 0;
    display: block;
  }

  .percorso__tappa {
    position: absolute;
    padding-left: 0;
    padding-bottom: 0;
    transform: translateY(-2rem);
  }

  .percorso__tappa:nth-child(1) { top: 5.17%; }
  .percorso__tappa:nth-child(2) { top: 22.41%; }
  .percorso__tappa:nth-child(3) { top: 39.66%; }
  .percorso__tappa:nth-child(4) { top: 56.9%; }
  .percorso__tappa:nth-child(5) { top: 74.14%; }
  .percorso__tappa:nth-child(6) { top: 91.38%; }

  .percorso__tappa:nth-child(odd) {
    left: calc(12.5% + 3rem);
    max-width: 22rem;
    text-align: left;
  }

  .percorso__tappa:nth-child(even) {
    right: calc(12.5% + 3rem);
    max-width: 22rem;
    text-align: right;
  }

  .percorso__funnel-trigger {
    flex-direction: row-reverse;
  }

  /* Desktop captions are absolutely positioned along the curve and can't
     be pushed by a growing sibling, so the panel floats instead (mobile
     just lets it push the next tappa down — see the base rules above). */
  .percorso__funnel-panel {
    position: absolute;
    top: 100%;
    margin-top: var(--space-1);
    z-index: 5;
  }

  .percorso__tappa:nth-child(odd) .percorso__funnel-panel {
    left: 0;
  }

  .percorso__tappa:nth-child(even) .percorso__funnel-panel {
    right: 0;
  }

  .percorso__text-wrap {
    padding: var(--space-2) 1.35rem;
  }

  .percorso__text-wrap > .percorso__text {
    font-size: var(--fs-md);
    line-height: 1.55;
  }

  .percorso__funnel-trigger {
    font-size: var(--fs-xs);
    margin-top: var(--space-2);
  }

  .percorso__funnel-list {
    max-width: 20rem;
  }

  .percorso__funnel-item {
    font-size: var(--fs-sm);
  }
}

/* ---------- Storia timeline ----------
   Base structure only (step 1): vertical line + nodes, expand/collapse.
   Scroll-triggered reveal and the "current" pulse are added in step 2,
   once this base is validated. */
.storia {
  background: var(--bg);
  color: var(--text);
}

.storia__container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem var(--section-pb);
}

.storia__heading {
  margin: 0 0 clamp(var(--space-5), 7vw, var(--space-7));
  max-width: var(--col-heading);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--text);
}

.storia__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.storia__timeline::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  bottom: 0.6rem;
  left: 9px;
  width: 1px;
  background: var(--surface);
}

.storia__item {
  position: relative;
  padding-left: 2.5rem;
  padding-bottom: var(--section-sm);
}

.storia__item:last-child {
  padding-bottom: 0;
}

.storia__marker {
  position: absolute;
  top: 0.5rem;
  left: 4px;
  width: 11px;
  height: 11px;
  border-radius: var(--radius-circle);
  background: var(--bg);
  border: 1px solid var(--surface-max);
}

/* Only the current (open) chapter pulses — closed chapters stay static. */
.storia__item--current .storia__marker {
  background: var(--accent);
  border-color: var(--accent);
}

.storia__item--current .storia__marker::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: var(--radius-circle);
  background: var(--accent);
  opacity: 0.5;
}

@media (prefers-reduced-motion: no-preference) {
  .storia__item--current .storia__marker::before {
    animation: storia-pulse 2s ease-out infinite;
  }
}

@keyframes storia-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  70%, 100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

.storia__card {
  border: 1px solid var(--surface);
  border-radius: var(--radius);
  background: var(--wash);
  padding: var(--space-3) 1.5rem var(--space-3);
}

.storia__logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
  margin-bottom: var(--space-2);
}

.storia__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.storia__year {
  margin: 0 0 var(--space-0);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-tint);
}

.storia__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  color: var(--text);
}

.storia__excerpt {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-dim);
}

/* 6: native <details>, same pattern as Filosofia — works with JS disabled. */
.storia__trigger {
  display: inline-flex;
  list-style: none;
  cursor: pointer;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-2);
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
  color: var(--accent-tint);
  cursor: pointer;
}

.storia__trigger:hover {
  color: var(--accent);
}

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

.storia__trigger-icon {
  width: 12px;
  height: 12px;
  flex: none;
  transition: transform 200ms ease;
}

.storia__trigger::-webkit-details-marker {
  display: none;
}

.storia__details[open] .storia__trigger-icon {
  transform: rotate(180deg);
}

.storia__trigger-label-open {
  display: none;
}

.storia__details[open] .storia__trigger-label-closed {
  display: none;
}

.storia__details[open] .storia__trigger-label-open {
  display: inline;
}

/* No max-height cap here any more: the old one was 30rem, which would have
   clipped any story longer than that. */

.storia__body-inner {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

.storia__body-inner p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--text-dim);
}

@media (min-width: 768px) {
  .storia__timeline {
    max-width: 54rem;
    margin: 0 auto;
  }

  .storia__timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .storia__item {
    padding-left: 0;
    display: grid;
    grid-template-columns: 1fr 2.75rem 1fr;
    align-items: start;
  }

  .storia__marker {
    position: relative;
    top: 0.55rem;
    left: 0;
    grid-column: 2;
    justify-self: center;
  }

  .storia__card {
    grid-column: 1;
    margin-right: 2rem;
  }

  .storia__item:nth-child(even) .storia__card {
    grid-column: 3;
    margin-right: 0;
    margin-left: 2rem;
  }
}

/* Scroll reveal — each tappa fades in + slides up on its own as it enters
   view (armed only via JS; content stays visible if JS never runs). */
@media (prefers-reduced-motion: no-preference) {
  .storia.is-armed .storia__item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms ease, transform 600ms ease;
  }

  .storia.is-armed .storia__item.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Reviews section ---------- */
.reviews {
  background: var(--bg);
  color: var(--text);
  --reviews-gap: 1.25rem;
  --reviews-per-view: 1;
}

.reviews__container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem var(--section-pb);
}

.reviews__heading {
  margin: 0 0 var(--space-5);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text);
}

.reviews__carousel {
  margin: 0 0 var(--space-4);
}

.reviews__track {
  display: flex;
  align-items: stretch;
  gap: var(--reviews-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.reviews__track::-webkit-scrollbar {
  display: none;
}

.reviews__track:focus-visible {
  outline: 2px solid var(--accent-tint);
  outline-offset: 6px;
  border-radius: var(--radius-focus);
}

.reviews__card {
  position: relative;
  flex: 0 0 auto;
  width: calc((100% - (var(--reviews-per-view) - 1) * var(--reviews-gap)) / var(--reviews-per-view));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5) 2rem;
}

.reviews__quote {
  position: absolute;
  top: -0.75rem;
  left: 1.25rem;
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  line-height: 1;
  color: var(--accent);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

.reviews__text {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  margin: 0 0 var(--space-4);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text);
}

.reviews__person {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.reviews__avatar {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius);
  background: var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.reviews__avatar-initials {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  color: var(--accent);
}

.reviews__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reviews__identity {
  min-width: 0;
}

.reviews__name {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text);
}

.reviews__role {
  margin: var(--space-0) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text-dim);
}

.reviews__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.reviews__arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--wash);
  border: 1px solid var(--surface);
  border-radius: var(--radius-circle);
  color: var(--text);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

.reviews__arrow:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-tint);
}

.reviews__arrow:focus-visible {
  outline: 2px solid var(--accent-tint);
  outline-offset: 2px;
}

.reviews__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.reviews__dots {
  display: flex;
  align-items: center;
}

/* 7: the visible dot stays 8px; the button around it grows to a real hit area.
   Not 44x44: eight dots at 44px need 352px and would not fit next to the
   arrows on a 375px screen, and overlapping them made dot 3 unclickable
   behind dot 4. 28x44 is the widest that never overlaps here — still 19x the
   original area, and past the 24x24 WCAG minimum. */
.reviews__dot {
  width: 28px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.reviews__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background: var(--surface);
  transition: background 150ms ease, transform 150ms ease;
}

.reviews__dot:hover::before {
  background: var(--surface-strong);
}

.reviews__dot.is-active::before {
  background: var(--accent);
  transform: scale(1.2);
}

/* Ring hugs the dot, not the 44px hit area, or it reads as a huge square. */
.reviews__dot:focus-visible {
  outline: none;
}

.reviews__dot:focus-visible::before {
  outline: 2px solid var(--accent-tint);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .reviews__track {
    scroll-behavior: auto;
  }
  .reviews__arrow,
  .reviews__dot {
    transition: none;
  }
}

@media (min-width: 768px) {
  .reviews {
    --reviews-per-view: 2;
    --reviews-gap: 1.75rem;
  }

  .reviews__container {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .reviews__card {
    padding: var(--space-5) 2.25rem;
  }
}

@media (min-width: 1200px) {
  .reviews {
    --reviews-per-view: 3;
  }
}

/* ---------- Contact section ---------- */
.contact {
  background: var(--bg);
  color: var(--text);
}

.contact__container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem var(--section-pb);
}

.contact__intro,
.contact__form-block {
  max-width: var(--col-text);
}

/* Il ritratto sfuma già in basso nel file stesso: nessuna maschera CSS,
   nessuna cornice — deve sembrare che la persona esca dal fondo. */
.contact__portrait {
  display: block;
  width: 7.5rem;
  height: auto;
  margin: 0 0 var(--space-3) -0.5rem;
}

.contact__heading {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text);
}

.contact__form-heading {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--text);
}

.contact__prose {
  margin: 0 0 var(--space-4);
}

.contact__prose p {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--text-dim);
}

.contact__prose p:last-child {
  margin-bottom: 0;
}

.contact__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius);
  padding: var(--space-2) 1.5rem;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.contact__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(0, 188, 212, 0.45);
}

.contact__cta:focus-visible {
  outline: 2px solid var(--accent-tint);
  outline-offset: 3px;
}

.contact__cta-note {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-dim);
}

.contact__form-block {
  margin-top: clamp(var(--space-7), 10vw, var(--space-8));
}

.contact__form-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent-tint);
  transition: color 150ms ease;
}

.contact__form-toggle::-webkit-details-marker {
  display: none;
}

.contact__form-toggle:hover {
  color: var(--accent);
}

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

.contact__form-toggle .contact__cta-arrow {
  transition: transform 150ms ease;
}

.contact__form-details[open] .contact__form-toggle .contact__cta-arrow {
  transform: rotate(90deg);
}

.contact__form-details .contact__form {
  margin-top: var(--space-4);
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Honeypot: fuori dallo schermo per chi vede, fuori dall'albero di
   accessibilità per chi usa uno screen reader (aria-hidden sul contenitore
   in HTML). Non display:none — alcuni bot lo controllano e saltano il campo
   di conseguenza. */
.contact__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}

.contact__field {
  display: flex;
  flex-direction: column;
}

.contact__label {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text);
}

.contact__control {
  width: 100%;
  background: var(--wash);
  border: 1px solid var(--surface);
  border-radius: var(--radius);
  padding: var(--space-2) 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.contact__control::placeholder {
  color: var(--text-dim);
  opacity: 0.75;
}

.contact__control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.15);
}

.contact__control.is-invalid {
  border-color: var(--error);
}

.contact__control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.15);
}

.contact__control--textarea {
  resize: vertical;
  min-height: 9rem;
}

.contact__error {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--error);
}

.contact__submit {
  align-self: flex-start;
  margin-top: var(--space-1);
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius);
  padding: var(--space-2) 2rem;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

.contact__submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(0, 188, 212, 0.45);
}

.contact__submit:focus-visible {
  outline: 2px solid var(--accent-tint);
  outline-offset: 3px;
}

.contact__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact__submit--outline {
  background: transparent;
  color: var(--accent-tint);
  border: 1.5px solid var(--accent);
}

.contact__submit--outline:hover:not(:disabled) {
  box-shadow: 0 8px 24px -8px rgba(0, 188, 212, 0.3);
}

.contact__status {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--accent-tint);
}

.contact__status.is-error {
  color: var(--error);
}

@media (min-width: 768px) {
  .contact__container {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .contact__submit {
    padding: var(--space-2) 2.5rem;
  }

  .contact__portrait {
    width: 9rem;
    margin-bottom: var(--space-3);
  }
}

/* ---------- Site footer ---------- */
.site-footer {
  background: var(--bg);
  color: var(--text);
  border-top: 1px solid var(--line);
}

.site-footer__container {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--section-pb) 1.5rem var(--section-sm);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: var(--section-sm);
  border-bottom: 1px solid var(--line);
}

.site-footer__tagline {
  margin: var(--space-2) 0 0;
  max-width: 22rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-dim);
}

.site-footer__col-heading {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__link {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease;
}

.site-footer__link:hover {
  color: var(--text);
}

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

.site-footer__newsletter-btn {
  padding: var(--space-1) 1.25rem;
}

.site-footer__bottom {
  padding-top: var(--section-sm);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-footer__dedication,
.site-footer__copyright {
  margin: 0;
  max-width: var(--col-text);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-dim);
}

@media (min-width: 768px) {
  .site-footer__container {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .site-footer__top {
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 2rem;
  }
}

/* ---------- Legal modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  padding: var(--space-3);
}

.modal[hidden] {
  display: none;
}

.modal:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 17, 23, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
}

.modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5) 2rem var(--space-4);
  box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
}

.modal__panel:focus {
  outline: none;
}

.modal.is-animatable .modal__backdrop,
.modal.is-animatable .modal__panel {
  transition: opacity 200ms ease, transform 200ms ease;
}

.modal.is-open .modal__backdrop {
  opacity: 1;
}

.modal.is-open .modal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--wash);
  border: 1px solid var(--surface);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}

.modal__close:hover {
  color: var(--text);
  border-color: var(--surface-strong);
}

.modal__close:focus-visible {
  outline: 2px solid var(--accent-tint);
  outline-offset: 2px;
}

.modal__title {
  margin: 0 0 var(--space-3);
  padding-right: 2.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--text);
}

.modal__body p {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text-dim);
}

.modal__body p:last-child {
  margin-bottom: 0;
}

.modal__body h3 {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  color: var(--text);
}

.modal__body h3:first-child {
  margin-top: 0;
}

.modal__body ul {
  margin: 0 0 var(--space-2);
  padding-left: 1.1rem;
  color: var(--text-dim);
}

.modal__body li {
  margin-bottom: var(--space-1);
  font-size: var(--fs-md);
  line-height: 1.7;
}

.modal__body li:last-child {
  margin-bottom: 0;
}

.modal__body strong {
  font-weight: 600;
  color: var(--text);
}

.modal__body em {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  opacity: 0.8;
}

.modal__body a {
  color: var(--accent-tint);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.modal__body a:hover {
  color: var(--accent);
}

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

@media (prefers-reduced-motion: reduce) {
  .modal.is-animatable .modal__backdrop,
  .modal.is-animatable .modal__panel {
    transition: none;
  }
}

/* ---------- Scale up ---------- */
@media (min-width: 768px) {
  .hero__content {
    padding: var(--space-8) 0 var(--space-7);
  }

  .hero__grid {
    background-size: 56px 56px;
  }
}