/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, p, figure { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }

/* ---------- Tokens ---------- */
:root {
  --color-bg: #060f16;
  --color-surface: #0c1a24;
  --color-accent: #35d6c1;
  --color-accent-rgb: 53, 214, 193;
  --color-accent-dark: #1fb8a4;
  --color-accent-ink: #0f766e;
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.74);
  --color-text-dim: rgba(255, 255, 255, 0.5);

  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-strong: rgba(255, 255, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.22);

  --font-base: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container-width: 1280px;
  --container-pad: 24px;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --nav-h: 84px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  font-family: var(--font-base);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

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

.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--color-accent);
  color: #052420;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--radius-pill);
  transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 16px; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
  white-space: nowrap;
}

.btn--sm { padding: 10px 20px; font-size: 14px; min-height: 44px; }

.btn--primary {
  background: var(--color-accent);
  color: #052420;
  box-shadow: 0 8px 24px -8px rgba(53, 214, 193, 0.65);
}
.btn--primary:hover {
  background: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(53, 214, 193, 0.75);
}
.btn--primary:active { transform: translateY(0); }

.btn--pulse { animation: btn-pulse 3s ease-out infinite; }
.btn--pulse:hover { animation-play-state: paused; }
@keyframes btn-pulse {
  0% { box-shadow: 0 8px 24px -8px rgba(53, 214, 193, 0.65), 0 0 0 0 rgba(53, 214, 193, 0.3); }
  70% { box-shadow: 0 8px 24px -8px rgba(53, 214, 193, 0.65), 0 0 0 9px rgba(53, 214, 193, 0); }
  100% { box-shadow: 0 8px 24px -8px rgba(53, 214, 193, 0.65), 0 0 0 0 rgba(53, 214, 193, 0); }
}

/* Phone only: gives the Chi siamo page's Contatti button a slow, ambient bob so it reads as
   the one "alive" element on an otherwise static page. A merely-*paused* animation still holds
   whatever mid-bob transform it was at, which fights the standard .btn--primary:hover lift below
   and made this button lift inconsistently (or not at all) compared to every other button — so
   hover/focus drops the animation entirely and sets the same translateY(-2px) explicitly, to
   match everyone else exactly. */
@media (max-width: 640px) {
  .btn--float { animation: btn-float 3.4s ease-in-out infinite; }
  .btn--float:hover, .btn--float:focus-visible {
    animation: none;
    transform: translateY(-2px);
  }
}
@keyframes btn-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.btn--secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.btn--secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.btn--secondary-light {
  background: rgba(11, 26, 36, 0.05);
  color: var(--color-ink);
  border-color: rgba(11, 26, 36, 0.16);
}
.btn--secondary-light:hover {
  background: rgba(11, 26, 36, 0.1);
  border-color: rgba(11, 26, 36, 0.3);
  transform: translateY(-2px);
}

/* ---------- Navbar ---------- */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(6, 15, 22, 0.55) 0%, rgba(6, 15, 22, 0) 100%);
  transition: background 0.4s var(--ease), height 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}

.navbar.is-scrolled {
  height: 72px;
  background: rgba(6, 15, 22, 0.5);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Chi siamo opens on a light section instead of a dark hero photo, so the dark scrim above
   (tuned for legibility over a photo) would just read as a stray dark smudge across the top
   of a white page. Swap it for a light equivalent instead — scoped to this page only via the
   modifier class, other pages keep the dark-over-photo navbar unchanged. */
.navbar--light {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
}
.navbar--light .navbar__inner {
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-muted);
  color: var(--color-text);
}
.navbar--light.is-scrolled {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 0 rgba(11, 26, 36, 0.08);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.navbar__logo {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.01em;
}
.navbar__logo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.navbar__logo:hover::after { transform: scaleX(1); transform-origin: left; }
.navbar__logo-sub {
  font-weight: 500;
  font-size: 13px;
  color: var(--color-text-muted);
  transition: color 0.25s var(--ease);
}
.navbar__logo:hover .navbar__logo-sub { color: var(--color-text); }

.navbar__links {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-text-muted);
}
.navbar__links a { position: relative; transition: color 0.25s var(--ease); }
.navbar__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.navbar__links a:hover { color: var(--color-text); }
.navbar__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.navbar__links a.is-active,
.navbar__mobile a.is-active { color: var(--color-text); font-weight: 700; }
.navbar__links a.is-active::after { transform: scaleX(1); transform-origin: left; }

.navbar__actions { display: flex; align-items: center; gap: 18px; }

.navbar__burger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  padding: 0;
}
.navbar__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.navbar__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.navbar__mobile {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px var(--container-pad) 28px;
  background: rgba(6, 15, 22, 0.96);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  z-index: 99;
}
.navbar__mobile.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.navbar__mobile a {
  padding: 14px 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.navbar__mobile .btn { margin-top: 12px; width: 100%; }

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

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 12, 18, 0.35) 0%, rgba(6, 12, 18, 0.25) 35%, rgba(4, 9, 14, 0.55) 68%, rgba(3, 7, 11, 0.85) 100%),
    linear-gradient(0deg, rgba(3, 7, 11, 0.35) 0%, transparent 45%);
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-top: var(--nav-h);
  margin-top: clamp(-140px, calc(-10vw - 30px), -86px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  /* Fluid, not a hard 780px: at desktop widths this resolves to 780px same as before, but it
     narrows through the 900-1300px band where the side glass panels would otherwise collide
     with the text (their edge offset shrinks with vw faster than a fixed-width column does) */
  max-width: clamp(420px, 58vw, 780px);
}

.hero__title {
  font-size: clamp(32px, 5.4vw, 52px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  /* Unlike the subtitle, this text is short enough to never wrap on its own — so without a
     max-width it keeps its full natural width right through the zone where the side panels
     need the room, and wrapping to two lines here is a normal, expected look for a headline */
  max-width: clamp(280px, 50vw, 620px);
}

/* Tablet: the glass side panels are already hidden below 900px (see the 900px nav breakpoint
   below), so the title's max-width no longer needs to make room for them here — and at this
   width the full headline comfortably fits one line anyway, so let it. Starts at 641px (right
   where the phone rule below ends) rather than 721px — a gap between the two left a band where
   the desktop max-width leaked back in, wrapping the title to two lines only in that band. */
@media (min-width: 641px) and (max-width: 900px) {
  .hero__content { max-width: none; }
  .hero__title { max-width: none; }
  /* Scroll cue fade-on-scroll (phone parity): .is-hidden is already toggled unconditionally
     by main.js on scroll — just extend the visual effect to this range too. */
  .hero__scroll-cue { transition: opacity 0.4s var(--ease); }
  .hero__scroll-cue.is-hidden { opacity: 0; }
}

.hero__subtitle {
  font-size: clamp(14.5px, 1.6vw, 16.5px);
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: clamp(340px, 52vw, 620px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 3px 8px rgba(0, 0, 0, 0.95), 0 4px 26px rgba(0, 0, 0, 0.8);
}
/* Desktop-only forced break: at this max-width the natural wrap splits after "puntualmente",
   leaving it dangling on the first line with just "per voi dal 2001." alone on the second.
   Hidden on tablet/phone, where the subtitle's max-width is different (or removed) and the
   text already wraps on its own without this. */
.hero__subtitle-break { display: none; }
@media (min-width: 901px) {
  .hero__subtitle-break { display: block; }
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

/* reveal-on-load animation for hero copy */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  animation: reveal-up 0.9s var(--ease) forwards;
}
.hero__title[data-reveal] { animation-delay: 0.15s; }
.hero__subtitle[data-reveal] { animation-delay: 0.32s; }
.hero__actions[data-reveal] { animation-delay: 0.48s; }

@keyframes reveal-up {
  to { opacity: 1; transform: translateY(0); }
}

/* Glass side panels — deliberately asymmetric in size and placement */
.hero__glass {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--glass-bg-strong), var(--glass-bg) 70%);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 20px 45px -18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  z-index: 0;
  opacity: 0;
  transition: transform 1s var(--ease), opacity 1s var(--ease);
}

/* Left panel: compact stat + mini line chart with axis */
.glass-stat { width: 100%; text-align: left; }
.glass-stat__label {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-muted);
  text-align: center;
}
.glass-chart-mini {
  display: flex;
  align-items: stretch;
  gap: 6px;
  height: 56px;
  margin-top: 14px;
}
.glass-chart-mini__axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  font-size: 7px;
  line-height: 1;
  color: var(--color-text-dim);
  text-align: right;
}
.glass-stat__spark {
  flex: 1;
  /* Without this, the SVG (a replaced element) falls back to a browser-default intrinsic
     min-width in the flex layout and refuses to shrink below it, pushing the chart past the
     panel's edge at narrow panel sizes instead of scaling down with the rest of the widget */
  min-width: 0;
  height: 100%;
  overflow: visible;
}
.glass-stat__grid {
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1;
  stroke-dasharray: 1.5 3;
}
.glass-stat__spark .glass-stat__line {
  stroke: var(--color-accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s var(--ease);
}
.glass-stat__spark .glass-stat__line.is-drawn { stroke-dashoffset: 0; }

/* Right panel: mini reviews marquee, reusing the testimonials card design */
:root {
  --hero-glass-right-w: clamp(140px, 13vw, 196px);
  --hero-glass-right-h: clamp(220px, 25vw, 300px);
}
.hero__glass--right { overflow: hidden; padding: 14px; }
.marquee--mini {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  -webkit-mask-image: none;
  mask-image: none;
}
.marquee--mini .marquee__track {
  gap: 14px;
  padding-inline: 0;
  height: 100%;
  animation-duration: 18s;
}
.testimonial-card.testimonial-card--mini {
  flex: 0 0 calc(var(--hero-glass-right-w) - 28px);
  width: calc(var(--hero-glass-right-w) - 28px);
  height: calc(var(--hero-glass-right-h) - 28px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 18px;
  overflow: hidden;
}
.testimonial-card--mini .testimonial-card__stars { font-size: 13px; letter-spacing: 2px; margin-bottom: 14px; }
.testimonial-card--mini .testimonial-card__quote {
  font-size: 13.5px;
  line-height: 1.6;
  min-height: 0;
  /* Safety net: no matter how long a quote is, it's cut with an ellipsis instead of
     overflowing the fixed-height card, same principle as the name/role truncation */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.testimonial-card--mini .testimonial-card__author { margin-top: 18px; gap: 10px; }
.testimonial-card--mini .avatar { width: 32px; height: 32px; font-size: 12px; flex-shrink: 0; }
.testimonial-card--mini .testimonial-card__author strong { font-size: 13px; }
.testimonial-card--mini .testimonial-card__author small { font-size: 11px; }

.hero__glass--left {
  /* Edge-offset shrinks much faster than before (3vw vs the old 9vw) so the panel tucks in
     close to the true viewport edge at medium widths, clearing the centered hero text
     instead of needing to hide the whole panel between 900-1250px */
  left: clamp(12px, 3vw, 132px);
  top: 60%;
  width: clamp(132px, 13vw, 194px);
  height: clamp(140px, 16vw, 200px);
  overflow: hidden;
  transform: translate(-70px, -50%);
}
.hero__glass--right {
  right: clamp(12px, 3vw, 150px);
  top: 40%;
  width: var(--hero-glass-right-w);
  height: var(--hero-glass-right-h);
  transform: translate(70px, -50%);
}
.hero__glass.is-visible.hero__glass--left { transform: translate(30px, calc(-50% + 50px)); opacity: 1; }
.hero__glass.is-visible.hero__glass--right { transform: translate(0, calc(-50% + 50px)); opacity: 1; }

.hero__glass--right { cursor: pointer; }
.hero__glass.is-visible.hero__glass--right:hover,
.hero__glass.is-visible.hero__glass--right:focus-visible {
  transform: translate(0, calc(-50% + 50px)) scale(1.05);
  transition: transform 0.3s var(--ease);
}
.hero__glass.is-visible.hero__glass--left:hover {
  transform: translate(30px, calc(-50% + 50px)) scale(1.05);
  transition: transform 0.3s var(--ease);
}

/* Shipment badge */
/* Manifest stub — a delivery-ticket shape instead of a generic "trust pill", carrying an
   actual manifest detail (tracking code + H24 service line) in a monospace utility face.
   Pinned to the hero's top-left corner; tablet/phone below pull it down further so it hugs
   the title instead of hugging the navbar — this desktop value (901px+, nothing overrides it
   above the 900px tablet query) was left at the old navbar-hugging offset, leaving it visibly
   further from the title here than on every other breakpoint. */
.hero__badge {
  position: absolute;
  left: 24px;
  top: calc(var(--nav-h) + 119px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 18px -14px rgba(0, 0, 0, 0.5);
  z-index: 1;
  opacity: 0;
  transform-origin: 14px 14px;
  transform: translateY(-12px) rotate(-6deg) scale(0.85);
  transition: opacity 0.5s var(--ease) 1.1s, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s;
}
/* Bumped up a touch from 0.62 — the lighter hero photo (herobg2.png) gives this glass badge
   less contrast to sit on than the original moodier shot did. */
.hero__badge.is-visible { opacity: 0.75; transform: translateY(0) rotate(-1.25deg) scale(1); }
.hero__badge.is-visible:hover {
  opacity: 0.9;
  transform: translateY(0) rotate(0deg) scale(1.03);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.hero__badge-stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(53, 214, 193, 0.32);
  flex-shrink: 0;
}
.hero__badge-stamp svg { width: 9px; height: 9px; }
.hero__badge-divider {
  align-self: stretch;
  width: 1px;
  flex-shrink: 0;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 50%, transparent 50%);
  background-size: 1px 5px;
  background-repeat: repeat-y;
}
.hero__badge-copy { display: flex; flex-direction: column; gap: 1px; }
.hero__badge-title { font-size: 10.5px; font-weight: 600; line-height: 1.2; color: var(--color-text-muted); }
.hero__badge-code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--color-text-dim);
}


/* Scroll cue */
.hero__scroll-cue {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 38px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  z-index: 1;
}
.hero__scroll-cue span {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--color-text);
  transform: translateX(-50%);
  animation: scroll-cue 1.8s ease-in-out infinite;
}
@keyframes scroll-cue {
  0% { opacity: 1; transform: translate(-50%, 0); }
  70% { opacity: 0; transform: translate(-50%, 12px); }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .navbar__links { display: none; }
  .navbar__burger { display: flex; }
  .navbar__cta { display: none; }
  .hero__glass { display: none; }
}

/* ---------- Shared section tokens ---------- */
:root {
  --color-light-bg: #eef3f7;
  --color-page-bg: #ffffff;
  --color-ink: #0b1a24;
  --color-ink-muted: rgba(11, 26, 36, 0.62);
  --section-pad: clamp(64px, 9vw, 120px);
}

/* Below 711px, --section-pad's clamp() is already pinned at its 64px floor no matter how much
   narrower the viewport gets — so two stacked sections (each with their own top+bottom
   padding) always compound to a 128px dead gap between them, which reads fine on desktop but
   is a huge, empty-feeling chunk of a short phone screen. Scoped tighter just for phones. */
@media (max-width: 640px) {
  :root { --section-pad: clamp(40px, 10vw, 64px); }
  /* Pull the title/subtitle up higher on the phone screen, and push the badge down so it
     sits closer to the title and further from the logo above it, instead of both hugging
     the navbar in a cramped cluster */
  .hero__content { margin-top: -150px; gap: 14px; }
  .hero__badge { top: calc(var(--nav-h) + 125px); }
  .hero__badge.is-visible { transform: translateY(0) rotate(-4deg) scale(1); }
  .hero__badge.is-visible:hover { transform: translateY(0) rotate(-1deg) scale(1.03); }
  /* The title's max-width exists only to keep it clear of the desktop side panels — those
     are hidden below 900px, so on phones it just needs to fit the screen on one line */
  .hero__title { max-width: none; }
  /* Scroll cue only makes sense before the user has scrolled — .is-hidden is toggled by JS
     once scrolling starts (see main.js), scoped here to phones only since the cue keeps its
     default always-on behavior on wider screens. */
  .hero__scroll-cue { transition: opacity 0.4s var(--ease); }
  .hero__scroll-cue.is-hidden { opacity: 0; }
  /* Trust bar already floats up over the hero on phones — trim just the services section's
     top padding (bottom padding stays on --section-pad) so it follows closer behind it
     instead of leaving a second, full-size section gap on top of that overlap. */
  .services { padding-top: 20px; }
  /* Same over-padding issue as above: the fleet photo's own bottom padding plus locations'
     full top padding compound into a big blank rectangle — more noticeable here since it
     follows a photo with a hard edge instead of a text section, making the gap read as an
     empty box rather than just breathing room. */
  .locations { padding-top: 20px; }
}

/* Tablet: previously tracked the title's own left edge with a vw-fitted formula, but that
   only accounted for viewport WIDTH — the title's vertical position also depends on viewport
   HEIGHT (.hero centers its content with align-items:center over a min-height:100svh box),
   so on a device with a different height than it was tuned against, the badge and title drift
   apart and it can end up sitting over the subtitle instead of above the title. A plain
   top-left corner position — near the navbar, independent of wherever the title lands — can't
   drift into either line regardless of device height, at the cost of not hugging the title as
   tightly. Placed after the base/phone badge rules above so it actually wins the cascade.
   Starts at 641px, right where the phone rule above ends, instead of 721px — the old gap let
   the desktop top-offset (nav-h + 20px, tuned for a much taller hero) leak back in for that
   band, so the badge visibly jumped away from the title and back as you crossed it. */
@media (min-width: 641px) and (max-width: 900px) {
  .hero__badge {
    left: 32px;
    top: calc(var(--nav-h) + 90px);
  }
  .hero__badge.is-visible { transform: translateY(0) rotate(-5deg) scale(1); }
  .hero__badge.is-visible:hover { transform: translateY(0) rotate(-2deg) scale(1.03); }
}

/* Desktop: shifted right off the hero's left edge and given the same left-tilt as the
   tablet/phone stamp above, instead of sitting flush against the edge nearly straight. */
@media (min-width: 901px) {
  .hero__badge { left: 150px; }
  .hero__badge.is-visible { transform: translateY(0) rotate(-5deg) scale(1); }
  .hero__badge.is-visible:hover { transform: translateY(0) rotate(-2deg) scale(1.03); }
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  margin-bottom: 14px;
}

.section-title {
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.section-title--light { color: var(--color-text); }

.section-subtitle {
  margin-top: 14px;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.65;
  color: var(--color-ink-muted);
  max-width: 620px;
}
.section-subtitle--light { color: var(--color-text-muted); }

/* Generic scroll-reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.reveal.is-in { opacity: 1; transform: none; transition-delay: 0s; }
/* .reveal.is-in resets transform to none at the same specificity as .btn--primary:hover /
   .btn--float:hover, and wins on source order — silently killing the hover lift on any button
   that also carries .reveal (chi-siamo.html, servizi.html). Bump specificity so hover still wins
   once the button has scrolled in. */
.btn.reveal.is-in:hover { transform: translateY(-2px); }
.btn--primary.reveal.is-in:active { transform: translateY(0); }

/* Media placeholder pattern */
.js-media-slot { position: relative; }
.js-media-slot img, .js-media-slot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-slot__fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(150deg, #16323f, #0b1a24 70%);
  color: var(--color-text-dim);
  font-size: 14px;
  font-weight: 500;
  border-radius: inherit;
}
.js-media-slot.is-missing img,
.js-media-slot.is-missing video { display: none; }
.js-media-slot.is-missing .media-slot__fallback { display: flex; }
.js-media-slot:not(.is-missing) .media-slot__fallback { display: none; }
.media-slot__play {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
}
.media-slot__play svg { width: 18px; height: 18px; color: var(--color-text); }

/* Persistent play badge: once a video slot's clip has actually loaded, the "coming soon"
   fallback above (icon + caption) hides itself entirely — this keeps just the icon on screen
   as a clickable control instead of that whole caption+icon fallback treatment, since the
   clip is real content now, not a placeholder waiting to be replaced. Video stays paused
   until this is clicked (see main.js); clicking fades the badge out, pausing brings it back. */
.media-slot__play-badge {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.3s var(--ease);
}
.js-media-slot.is-loaded .media-slot__play-badge { display: flex; }
.media-slot__play-badge:hover .media-slot__play { transform: scale(1.06); }
.media-slot__play-badge.is-playing { opacity: 0; }
.media-slot__play-badge .media-slot__play { transition: transform 0.25s var(--ease); }

/* ---------- Trust bar ---------- */
.trust {
  position: relative;
  background:
    radial-gradient(560px 200px at 12% 0%, rgba(53, 214, 193, 0.09), transparent 65%),
    radial-gradient(560px 220px at 88% 100%, rgba(53, 214, 193, 0.07), transparent 65%),
    var(--color-light-bg);
  padding-block: 52px;
  border-bottom: 1px solid rgba(11, 26, 36, 0.07);
}
.trust__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
}
.trust__item {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 240px;
  max-width: 340px;
  padding: 22px 24px;
  background: var(--color-page-bg);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px -28px rgba(11, 26, 36, 0.35);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.trust__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -26px rgba(11, 26, 36, 0.4);
}
.trust__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(155deg, rgba(53, 214, 193, 0.2), rgba(53, 214, 193, 0.06));
  box-shadow: 0 10px 22px -12px rgba(53, 214, 193, 0.45);
  color: var(--color-accent-ink);
}
.trust__icon svg { width: 23px; height: 23px; }
.trust__number {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  line-height: 1;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.trust__label {
  margin-top: 5px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-ink-muted);
}

@media (max-width: 720px) {
  /* One shared container instead of three separate cards, split by thin dividers — each
     stat cell is now icon-free and wider than it is tall, closer to a landscape proportion */
  /* The border only ever read as a seam here, since .trust and .services share the same
     --color-light-bg — dropping it lets the hero's floating card bleed straight into the
     services section below with nothing marking the handoff. */
  .trust { padding-block: 32px; border-bottom: none; }
  .trust__inner {
    /* .trust__inner also carries the shared .container class, whose padding-inline is an
       internal inset — not an outer margin. Left as-is, the new card background/shadow would
       render flush with the screen edges instead of floating with a visible gap, so the
       inset has to move from padding to margin (and width adjusted to match, or it'd overflow) */
    width: calc(100% - 48px);
    margin-inline: 24px;
    padding-inline: 0;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    background: var(--color-page-bg);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 40px -28px rgba(11, 26, 36, 0.35);
    /* Pull the card up so it sits on top of the hero instead of trailing below it, and give
       it its own stacking context + a 3D flip-in — later-in-DOM siblings already paint over
       earlier ones at equal stacking level, so no z-index juggling with the hero is needed.
       Same rise-up-and-settle language as .reveal elsewhere (matched opacity/transform
       duration on the site's one shared --ease curve), just with rotateX added to the mix
       instead of a plain translateY, and a shallower angle so it reads as a gentle tilt
       rather than a hard 90°-flat flip.
       Kept shy of the hero's scroll-cue on purpose: this is scroll-triggered (the reveal
       observer's -8% rootMargin needs the card mostly below the fold to begin with), and the
       cue's own position is off-limits, so the overlap amount is capped by both of those
       rather than by how much of the cue it could otherwise cover. */
    position: relative;
    z-index: 2;
    margin-top: -68px;
    perspective: 1400px;
    transform-origin: top center;
    transform: translateY(20px) rotateX(-55deg);
    opacity: 0;
    transition: transform 0.9s var(--ease), opacity 0.9s var(--ease);
  }
  .trust__inner:has(.trust__item.is-in) {
    transform: translateY(0) rotateX(0deg);
    opacity: 1;
  }
  .trust__item {
    position: relative;
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 2px;
    padding: 16px 6px;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
  .trust__item:hover { transform: none; }
  /* The card itself now carries the entrance motion (the flip above), so the individual
     items no longer need their own translate/fade — that would fight the flip with a second,
     out-of-sync motion on top of it. */
  .trust__item.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .trust__item:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: rgba(11, 26, 36, 0.08);
  }
  .trust__icon { display: none; }
  .trust__number { font-size: 18px; }
  .trust__label { font-size: 10.5px; line-height: 1.3; margin-top: 2px; }
}

/* Tablet: the base .trust__item's flex-basis (240px) + gaps don't consistently fit three
   across at this width, so the row was silently wrapping to 2+1. Ported wholesale from the
   phone breakpoint at the user's request — same merged single card, same hero-overlap flip
   entrance, same positioning math (container padding is the same 24px var at both sizes, so
   the phone block's literal pixel values carry over cleanly). */
@media (min-width: 721px) and (max-width: 900px) {
  .trust { padding-block: 32px; border-bottom: none; }
  .trust__inner {
    width: calc(100% - 48px);
    margin-inline: 24px;
    padding-inline: 0;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    background: var(--color-page-bg);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 40px -28px rgba(11, 26, 36, 0.35);
    position: relative;
    z-index: 2;
    margin-top: -68px;
    perspective: 1400px;
    transform-origin: top center;
    transform: translateY(20px) rotateX(-55deg);
    opacity: 0;
    transition: transform 0.9s var(--ease), opacity 0.9s var(--ease);
  }
  .trust__inner:has(.trust__item.is-in) {
    transform: translateY(0) rotateX(0deg);
    opacity: 1;
  }
  .trust__item {
    position: relative;
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 2px;
    padding: 16px 6px;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
  .trust__item:hover { transform: none; }
  .trust__item.reveal { opacity: 1; transform: none; transition: none; }
  .trust__item:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: rgba(11, 26, 36, 0.08);
  }
  .trust__icon { display: none; }
  .trust__number { font-size: 18px; }
  .trust__label { font-size: 10.5px; line-height: 1.3; margin-top: 2px; }
}

/* ---------- Services ---------- */
.services {
  background: var(--color-light-bg);
  padding-block: var(--section-pad);
}

/* Tablet: bring services up closer behind the hero-overlapping trust card, same idea as the
   phone treatment elsewhere (bottom padding stays on --section-pad, only the top is trimmed).
   The small negative margin on top of that isn't for spacing — .trust's bottom edge lands on
   a fractional pixel (padding math + the card's own negative margin don't sum to a whole
   number), and two adjacent boxes rounding that boundary differently is exactly what produces
   a hairline seam between them; a 2px overlap is enough to close it without being visible.
   Placed after the base rule above so it actually wins the cascade. */
@media (min-width: 721px) and (max-width: 900px) {
  .services { padding-top: 8px; margin-top: -2px; }
}

.services__head { text-align: center; max-width: 680px; margin-inline: auto; }
.services__head .section-subtitle { margin-inline: auto; }

.services__grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@keyframes services-card-rise {
  from { opacity: 0; transform: translateY(64px); }
  to { opacity: 1; transform: translateY(0); }
}
.services__grid .service-card.reveal {
  opacity: 0;
  transform: translateY(64px);
}
.services__grid .service-card.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.services__grid .service-card.reveal.is-animating {
  animation: services-card-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 180ms);
}
.service-card {
  position: relative;
  background: var(--color-page-bg);
  border: 1px solid rgba(11, 26, 36, 0.06);
  border-radius: var(--radius-md);
  padding: 36px 28px;
  overflow: hidden;
  box-shadow: 0 18px 40px -28px rgba(11, 26, 36, 0.35);
  transition: transform 0.6s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  will-change: transform;
  backface-visibility: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(53, 214, 193, 0.24), transparent 58%);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.service-card:hover::before { opacity: 1; }
.service-card:hover {
  transform: scale(1.045) !important;
  box-shadow: 0 26px 54px -26px rgba(11, 26, 36, 0.42);
  border-color: rgba(53, 214, 193, 0.35);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease);
  z-index: 1;
}
.service-card__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(53, 214, 193, 0.22), rgba(53, 214, 193, 0.07));
  box-shadow: 0 10px 22px -12px rgba(53, 214, 193, 0.4);
  color: var(--color-accent-ink);
  margin-bottom: 22px;
  opacity: 0;
  transform: scale(0.55) rotate(-10deg);
  transition: transform 0.6s var(--ease) 0.15s, opacity 0.5s var(--ease) 0.15s;
}
.service-card.is-in .service-card__icon { opacity: 1; transform: scale(1) rotate(0deg); }
.service-card:hover .service-card__icon {
  transform: translateY(-12px) rotate(-10deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.service-card__icon svg { width: 24px; height: 24px; }
.service-card h3 {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 10px;
}
.service-card p { position: relative; font-size: 14px; line-height: 1.6; color: var(--color-ink-muted); }

.service-card--dark {
  background: var(--color-bg);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--color-text);
}
.service-card--dark::before {
  background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(53, 214, 193, 0.36), transparent 58%);
}
.service-card--dark h3 { color: var(--color-text); }
.service-card--dark p { color: var(--color-text-muted); }
.service-card--dark .service-card__icon { background: rgba(53, 214, 193, 0.18); color: var(--color-accent); }
.service-card--dark:hover { border-color: rgba(53, 214, 193, 0.5); }

@media (max-width: 980px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .services__grid { grid-template-columns: 1fr; }
}

.services__foot { margin-top: 40px; text-align: center; }

/* ---------- Servizi (dedicated page) ---------- */
.services-intro {
  position: relative;
  background: var(--color-bg);
  /* The navbar is fixed at --nav-h tall; this needs its own explicit clearance instead of
     relying on --section-pad alone, since that token can shrink below the navbar's height
     on narrow screens (it's a shared spacing token, not a "clear the fixed nav" one) */
  padding-block: calc(var(--nav-h) + 24px) 48px;
  text-align: center;
  overflow: hidden;
}
.services-intro::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 680px;
  height: 420px;
  background: radial-gradient(circle, rgba(53, 214, 193, 0.14), transparent 70%);
  filter: blur(70px);
  pointer-events: none;
}
.services-intro .eyebrow { color: var(--color-accent); }
.services-intro__inner { position: relative; max-width: 680px; margin-inline: auto; }
.services-intro__inner .section-subtitle { margin-inline: auto; }

.service-detail { padding-block: var(--section-pad); background: var(--color-bg); }
.service-detail--alt { background: var(--color-surface); }
.service-detail .eyebrow { color: var(--color-accent); }

/* Urgenze sanitarie — re-tints the shared teal accent to a muted, desaturated red so the
   section reads as "emergency" without a jarring alarm-red breaking the page's palette */
.service-detail--urgent {
  --color-accent: #e2645c;
  --color-accent-rgb: 226, 100, 92;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 50% 30%, rgba(226, 100, 92, 0.1), transparent 65%),
    var(--color-bg);
}

.service-detail__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.service-detail--reverse .service-detail__visual { order: 2; }

/* Photo placeholder — same media-slot pattern as the fleet photo, ready to take a real
   image (assets/images/servizi/<slug>.jpg); falls back to the service icon until then */
.service-detail__visual { position: relative; }
.service-detail__visual::before {
  content: '';
  position: absolute;
  inset: 6%;
  background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.24), transparent 70%);
  filter: blur(60px);
  z-index: 0;
}
.service-detail__media {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 3;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-bg-strong), var(--glass-bg) 70%);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transform: translateY(var(--stagger, 0));
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.service-detail__media:hover {
  transform: translateY(calc(var(--stagger, 0) - 6px));
  box-shadow: 0 40px 74px -26px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
/* genci.png (03 — Ciclo di ritorno) is a tall portrait photo (417x767), not the 4:3 landscape
   the shared frame assumes — object-fit:contain (below) stopped it being cropped, but left it
   letterboxed inside a much wider box. Sizing the frame itself to the photo's own ratio instead
   removes that empty space, so the frame fits the picture exactly. */
#ciclo-di-ritorno .service-detail__media {
  max-width: 224px;
  aspect-ratio: 417 / 767;
}
#ciclo-di-ritorno .js-media-slot img { object-fit: contain; }

.service-detail__media .media-slot__fallback { gap: 14px; }
.service-detail__media .media-slot__fallback > svg {
  width: 68px;
  height: 68px;
  color: var(--color-accent);
  opacity: 0.85;
}
.service-detail__media .media-slot__fallback small {
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--color-text-dim);
}

/* Media pair — two vertically-shot placeholders sharing one visual column, staggered so they
   read as a considered pair rather than a flat grid; used where a service covers two related
   sub-topics (photo + video) instead of one wide shot */
.service-detail__media-pair {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  padding-block: 36px;
}
.service-detail__media-pair .service-detail__media {
  flex: 1 1 0;
  max-width: none;
  margin-inline: 0;
  aspect-ratio: 4 / 5;
}
.service-detail__media-pair .service-detail__media:first-child { --stagger: -18px; }
.service-detail__media-pair .service-detail__media:last-child { --stagger: 18px; }
.service-detail__media--portrait .media-slot__fallback { gap: 10px; padding: 0 10px; }
.service-detail__media--portrait .media-slot__fallback > svg { width: 44px; height: 44px; }
.service-detail__media--portrait .media-slot__fallback small { font-size: 11.5px; text-align: center; }

@media (max-width: 480px) {
  .service-detail__media-pair { max-width: 320px; }
}

.service-detail__list {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.service-detail__list li {
  position: relative;
  padding-left: 32px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-text);
}
.service-detail__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: rgba(var(--color-accent-rgb), 0.22);
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.services-cta {
  position: relative;
  background: var(--color-bg);
  padding-block: var(--section-pad);
  text-align: center;
  overflow: hidden;
}
.services-cta::before {
  content: '';
  position: absolute;
  bottom: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 680px;
  height: 420px;
  background: radial-gradient(circle, rgba(53, 214, 193, 0.12), transparent 70%);
  filter: blur(70px);
  pointer-events: none;
}
.services-cta__inner {
  position: relative;
  max-width: 620px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

@media (max-width: 860px) {
  .service-detail__grid { grid-template-columns: 1fr; gap: 36px; }
  .service-detail--reverse .service-detail__visual { order: 0; }
  .service-detail__media { max-width: 320px; }
  .service-detail__content { text-align: center; }
  .service-detail__content .section-subtitle,
  .service-detail__list { margin-inline: auto; max-width: 440px; }
  .service-detail__list li { text-align: left; }
}

/* Phone only: centered multi-line body copy reads as a dense, hard-to-scan block (ragged
   line starts, no fixed edge to anchor on). Left-aligning it — and sizing it up to a proper
   16px body size instead of the 14px floor from the shared clamp() — turns each service
   description back into normal, easy-to-read paragraph text instead of a wall of centered
   text. Tablet/desktop keep the centered treatment from the block above. */
@media (max-width: 640px) {
  .service-detail__content { text-align: left; }
  .service-detail__content .section-subtitle,
  .service-detail__list { margin-inline: 0; max-width: none; }
  .service-detail__content .section-subtitle { font-size: 16px; }
  .service-detail__list li { font-size: 15px; }
}

/* ---------- Route progress rail (servizi page) ---------- */
/* A van travels down a side rail as the page scrolls, lighting up a node at each
   section it passes — ties the whole page together as one route, stop by stop */
.has-route-progress { position: relative; }
.route-progress {
  position: absolute;
  left: 32px;
  top: 0;
  bottom: 0;
  width: 2px;
  z-index: 2;
  pointer-events: none;
}
.route-progress__rail {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}
.route-progress__fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--color-accent), rgba(53, 214, 193, 0.15));
  border-radius: 2px;
}
.route-progress__node {
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.4s var(--ease);
}
.route-progress__node.is-passed { background: var(--color-accent); }
.route-progress__van {
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--glass-border);
  box-shadow: 0 0 16px 4px rgba(53, 214, 193, 0.4);
}
.route-progress__van svg { width: 20px; height: 20px; color: var(--color-accent); }

@media (max-width: 900px) {
  .route-progress { display: none; }
}

/* ---------- Testimonials ---------- */
.testimonials {
  position: relative;
  background: var(--color-bg);
  padding-block: var(--section-pad);
  overflow: hidden;
}
.testimonials__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 50% 100%, rgba(53, 214, 193, 0.07), transparent 62%),
    linear-gradient(160deg, #0c1a24 0%, #060f16 60%);
  -webkit-mask-image: linear-gradient(180deg, transparent, black 16%, black 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, black 16%, black 78%, transparent);
}
.testimonials__head { position: relative; margin-bottom: 48px; }

/* Route topography — faint route lines nod to "trasporti" without the old busy hub-and-spoke
   diagram. One line carries a slow traveling dash; everything else sits near-invisible. */
.routes-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.route {
  fill: none;
  stroke: rgba(53, 214, 193, 0.14);
  stroke-width: 1.3;
}
.route__flow {
  stroke: rgba(159, 232, 222, 0.5);
  stroke-width: 1.6;
  stroke-dasharray: 2 14;
  animation: route-flow 7s linear infinite;
}
@keyframes route-flow {
  to { stroke-dashoffset: -160; }
}
.route-node { fill: rgba(159, 232, 222, 0.4); }

.routes-glow {
  position: absolute;
  top: -160px;
  left: 58%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53, 214, 193, 0.14), transparent 70%);
  filter: blur(70px);
  animation: routes-glow-drift 16s ease-in-out infinite;
}
@keyframes routes-glow-drift {
  0%, 100% { transform: translate(0, 0) scale(0.9); opacity: 0.45; }
  50% { transform: translate(-80px, 60px) scale(1.2); opacity: 0.9; }
}

@media (max-width: 720px) {
  .routes-svg { opacity: 0.7; }
}

.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.marquee__track {
  display: flex;
  gap: 22px;
  width: max-content;
  padding-inline: var(--container-pad);
  animation: marquee-scroll 38s linear infinite;
  animation-play-state: paused;
}
.marquee.is-playing .marquee__track { animation-play-state: running; }

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

.testimonial-card {
  flex: 0 0 clamp(260px, 30vw, 340px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-md);
  padding: 26px 24px;
}
.testimonial-card__stars { color: var(--color-accent); font-size: 13px; letter-spacing: 2px; margin-bottom: 14px; }
.testimonial-card__quote { font-size: 14.5px; line-height: 1.65; color: var(--color-text-muted); min-height: 96px; }
.testimonial-card__author { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.testimonial-card__author > div { min-width: 0; }
.testimonial-card__author strong { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.testimonial-card__author small { display: block; font-size: 12.5px; color: var(--color-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.testimonial-card--google .testimonial-card__author small { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.google-icon { flex-shrink: 0; }
.avatar {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(53, 214, 193, 0.2);
  color: var(--color-accent);
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}

/* ---------- Flotta ---------- */
.fleet { background: var(--color-page-bg); padding-block: var(--section-pad); }
.fleet__head { text-align: center; max-width: 640px; margin-inline: auto; }
.fleet__head .section-subtitle { margin-inline: auto; }
.fleet__media {
  margin-top: 44px;
  width: 100%;
  height: clamp(220px, 32vw, 420px);
}

/* ---------- FAQ ---------- */
.faq { background: var(--color-light-bg); padding-block: var(--section-pad); }
.faq__head { text-align: center; max-width: 640px; margin-inline: auto; }
.faq__container { max-width: 780px; }

.faq__list { margin-top: 44px; display: flex; flex-direction: column; gap: 12px; }

.faq__item {
  background: var(--color-page-bg);
  border: 1px solid rgba(11, 26, 36, 0.08);
  border-radius: var(--radius-md);
  padding: 22px 26px;
}

.faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.4;
}
.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: '+';
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-light-bg);
  color: var(--color-accent-ink);
  font-size: 18px;
  font-weight: 700;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.faq__item[open] summary::after {
  content: '+';
  transform: rotate(45deg);
  background: var(--color-accent);
  color: #052420;
}

.faq__item p {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-ink-muted);
}

/* ---------- Locations ---------- */
.locations { background: var(--color-page-bg); padding-block: var(--section-pad); }
.locations__head { text-align: center; max-width: 640px; margin-inline: auto; }
.locations__head .section-subtitle { margin-inline: auto; }

.locations__grid {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.locations__map-card {
  height: 460px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  /* Leaflet's internal panes (markers, tooltips, popups) use z-index values up to 700 to
     stack correctly among themselves. Without this, this card has no z-index of its own to
     contain them in, so those values were being compared directly against the fixed navbar's
     z-index:100 elsewhere in the document and winning — the map rode over the navbar on
     scroll. isolation:isolate gives the card its own stacking context so everything inside it
     stays inside it, and the card itself (no z-index set) loses to the navbar as expected. */
  isolation: isolate;
  box-shadow: 0 30px 60px -30px rgba(11, 26, 36, 0.4);
  border: 1px solid rgba(11, 26, 36, 0.08);
}
.locations__map { width: 100%; height: 100%; background: #eef1f3; }

.leaflet-container {
  font-family: var(--font-base);
  background: #eef1f3;
}
.leaflet-popup-content-wrapper {
  background: #ffffff;
  color: var(--color-ink);
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 44px -20px rgba(11, 26, 36, 0.35);
}
.leaflet-popup-tip { background: #ffffff; }
.leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.55; }
.leaflet-popup-content strong { font-size: 13.5px; }
/* Leaflet's own .leaflet-container a rule (color: #0078A8) outranks a single class on
   specificity, so the plain .map-popup__directions selector below was silently losing the
   color/hover-color fight to it — scope through the popup content to win instead. */
.leaflet-popup-content .map-popup__directions {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 9px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #052420;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.leaflet-popup-content .map-popup__directions:hover { background: var(--color-accent-dark); color: #052420; transform: translateY(-1px); }
.leaflet-popup-close-button {
  color: rgba(11, 26, 36, 0.45) !important;
}
.leaflet-popup-close-button:hover { color: var(--color-ink) !important; }
.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.75) !important;
  color: rgba(11, 26, 36, 0.55) !important;
  font-size: 9px !important;
  padding: 1px 6px !important;
  border-radius: 4px 0 0 0 !important;
  opacity: 0.7;
  transition: opacity 0.3s var(--ease);
}
.leaflet-control-attribution:hover { opacity: 1; }
.leaflet-control-attribution a { color: rgba(11, 26, 36, 0.7) !important; }

.map-pin {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 4px rgba(53, 214, 193, 0.22), 0 4px 10px rgba(0, 0, 0, 0.4);
}
.map-pin--main {
  position: relative;
  width: 22px;
  height: 22px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 8px rgba(53, 214, 193, 0.2), 0 6px 16px rgba(0, 0, 0, 0.5);
}
.map-pin--main::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-accent);
  animation: map-pin-ping 2.5s ease-out infinite;
  z-index: -1;
}
@keyframes map-pin-ping {
  0% { transform: scale(1); opacity: 0.65; }
  100% { transform: scale(2.6); opacity: 0; }
}

.location-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.location-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(53, 214, 193, 0.07);
  border: 1px solid rgba(53, 214, 193, 0.42);
  color: var(--color-ink);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.location-card[href]:hover { background: rgba(53, 214, 193, 0.12); transform: translateY(-3px); }
.location-card small { display: block; font-size: 11px; letter-spacing: 0.08em; color: rgba(11, 26, 36, 0.45); margin-bottom: 3px; }
.location-card p { font-size: 14.5px; font-weight: 600; }
.location-card__icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(53, 214, 193, 0.16);
  color: var(--color-accent);
  flex-shrink: 0;
}
.location-card__icon svg { width: 18px; height: 18px; }
.location-card--socials__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.socials { display: flex; gap: 8px; }
.socials a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(53, 214, 193, 0.14);
  color: var(--color-accent);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.socials a svg { width: 15px; height: 15px; }
.socials a:hover { background: var(--color-accent); color: #052420; transform: translateY(-2px); }

@media (max-width: 860px) {
  .locations__map-card { height: 360px; }
}
@media (max-width: 520px) {
  .location-cards { grid-template-columns: 1fr; }
}

@media (min-width: 861px) {
  .locations__grid {
    flex-direction: row;
    align-items: stretch;
  }
  .locations__map-card {
    flex: 0 0 clamp(320px, 34vw, 440px);
    height: auto;
  }
  .location-cards {
    flex: 1;
    grid-template-columns: 1fr 1fr;
    align-content: center;
  }
  .location-card--socials { grid-column: span 2; }
}

/* ---------- Chi siamo / Story page ---------- */
.story {
  background: var(--color-page-bg);
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--nav-h) + 40px) 80px;
}
.story__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.story__video {
  width: 100%;
  max-width: 760px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-block: 36px 40px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
}

/* Phone only: min-height:100svh + vertical centering was built for a wide 16:9 video that
   fills most of the viewport — on a narrow phone that same video is much shorter relative to
   the screen, so centering just splits a huge dead gap above and below the whole block. Let
   the section hug its content instead, and rebuild the internal rhythm on a single 8px-based
   scale (12 / 32 / 32) instead of the mismatched 8px flex gap + 36/40px video margin. */
@media (max-width: 640px) {
  .story {
    min-height: 0;
    align-items: flex-start;
    padding-block: calc(var(--nav-h) + 32px) 56px;
  }
  .story__inner { gap: 12px; }
  .story__video { margin-block: 32px; }
}

/* ---------- Timeline (Chi siamo) ---------- */
.timeline {
  background: var(--color-light-bg);
  padding-block: var(--section-pad);
}
.timeline__head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.timeline__head .eyebrow { color: var(--color-accent-ink); }

.timeline__list {
  position: relative;
  /* The van's own reveal toggling expands/collapses .timeline__media, which shifts layout
     height above later items. Without this, the browser's scroll-anchoring "helpfully"
     compensates by nudging window.scrollY to match — which re-triggers the scroll handler
     and creates a feedback loop between the van's position and the very reveals it drives. */
  overflow-anchor: none;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 640px;
  margin-inline: auto;
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 24px;
  padding-bottom: 40px;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: '';
  position: absolute;
  left: 75px;
  top: 8px;
  bottom: -40px;
  width: 2px;
  background: rgba(11, 26, 36, 0.14);
}
.timeline__item:last-child::before { display: none; }
.timeline__item::after {
  content: '';
  position: absolute;
  left: 70px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(53, 214, 193, 0.18);
}
.timeline__year {
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent-ink);
  padding-top: 2px;
}
.timeline__body h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: var(--color-ink); }
.timeline__body p { font-size: 14px; line-height: 1.6; color: var(--color-ink-muted); margin: 0; max-width: 44ch; }

/* Collapsed to zero height by default; expands open on hover, pushing the rest of the
   timeline down with it, instead of a small thumbnail sitting beside the text */
.timeline__media-wrap {
  overflow: hidden;
}

.timeline__media {
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  /* Tinted glass, same language as the "Dove trovarci" contact cards — the white-tinted
     .glass-bg tokens above are tuned for a dark backdrop and would be nearly invisible on
     this now-light section. */
  border: 1px solid rgba(53, 214, 193, 0.3);
  background: linear-gradient(160deg, rgba(53, 214, 193, 0.14), rgba(53, 214, 193, 0.05) 70%);
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transition: max-height 0.45s var(--ease), margin-top 0.45s var(--ease), opacity 0.3s var(--ease);
}
.timeline__item:hover .timeline__media,
.timeline__item:focus-within .timeline__media {
  max-height: 400px;
  margin-top: 20px;
  opacity: 1;
  transition: max-height 0.45s var(--ease), margin-top 0.45s var(--ease), opacity 0.35s var(--ease) 0.15s;
}
.timeline__media .media-slot__fallback > svg { width: 40px; height: 40px; color: var(--color-accent); opacity: 0.8; }
.timeline__media .media-slot__fallback small { font-size: 12px; }

/* Phone-only travelling van: there's no hover on touch, so the photo reveal above never
   triggers there. A little van (same icon language as the servizi route rail) rides the
   timeline's own line and toggles each stop's photo open via JS-driven .is-active as it
   passes, closing it again once it moves on — see updateTimelineVan in main.js. */
.timeline__van {
  display: none;
  position: absolute;
  left: 76px;
  top: 9px;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(53, 214, 193, 0.35);
  box-shadow: 0 0 14px 3px rgba(53, 214, 193, 0.45);
  z-index: 3;
  pointer-events: none;
  transition: top 0.1s linear;
}
.timeline__van svg { width: 15px; height: 15px; color: var(--color-accent); }

@media (max-width: 640px) {
  .timeline__van { display: flex; }

  /* Push-down reveal, same as the desktop :hover version above: collapsed (no reserved gap)
     until a stop is active, then opens and makes room for its photo. The jerky "page is
     scrolling itself" feeling wasn't caused by this expand/collapse itself — it was
     updateTimelineVan in main.js measuring each stop's *live* offsetTop, which this very
     animation was shifting frame to frame, so a stop could cross its activation threshold
     several times mid-transition and flicker open/closed. That's fixed at the source (the van
     now drives off a fixed snapshot of each stop's resting position, see measureTimelineLayout),
     so a single clean open/close per pass is all that happens here — no permanently reserved
     empty gap needed. */
  .timeline__item.is-active .timeline__media {
    max-height: 400px;
    margin-top: 20px;
    opacity: 1;
    transition: max-height 0.45s var(--ease), margin-top 0.45s var(--ease), opacity 0.35s var(--ease) 0.15s;
  }
}

.timeline__item--placeholder::after {
  background: transparent;
  border: 2px dashed rgba(11, 26, 36, 0.22);
  box-shadow: none;
}
.timeline__item--placeholder .timeline__year { color: rgba(11, 26, 36, 0.4); }
.timeline__item--placeholder .timeline__body h3 { color: rgba(11, 26, 36, 0.4); font-style: italic; font-weight: 600; }
.timeline__item--placeholder .timeline__body p { color: rgba(11, 26, 36, 0.4); }

/* ---------- Footer ---------- */
/* Single-level footer: one row, brand on one side and the (unavoidably dense) legal copy on
   the other, instead of the previous three stacked tiers (nav links / contact / legal
   columns / copyright bar) each behind their own divider. */
.footer { background: var(--color-bg); border-top: 1px solid rgba(255, 255, 255, 0.08); padding-block: 40px; }
.footer__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.footer__brand p { margin-top: 10px; font-size: 14px; color: var(--color-text-muted); max-width: 280px; }

.footer__meta { text-align: right; }
.footer__meta p { font-size: 12.5px; line-height: 1.7; color: var(--color-text-dim); }
.footer__meta a { color: var(--color-text-dim); text-decoration: underline; text-underline-offset: 2px; transition: color 0.25s var(--ease); }
.footer__meta a:hover { color: var(--color-accent); }

@media (max-width: 640px) {
  .footer__row { flex-direction: column; gap: 20px; }
  .footer__meta { text-align: left; }
}

/* ---------- Global cursor aura ---------- */
.cursor-aura {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  background: radial-gradient(130px circle at var(--cx, 50%) var(--cy, 50%), rgba(53, 214, 193, 0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.cursor-aura.is-active { opacity: 1; }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-aura { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], .hero__glass, .hero__badge, .hero__scroll-cue span, .reveal, .marquee__track {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .route__flow, .routes-glow { animation: none !important; }
  .btn--pulse, .btn--float { animation: none !important; }
  .glass-stat__line { stroke-dashoffset: 0 !important; transition: none !important; }
  .service-card__icon { opacity: 1 !important; transform: none !important; transition: none !important; }
  .service-card::before { display: none !important; }
}

/* ---------- Legal (Privacy policy) ---------- */
.legal { background: var(--color-page-bg); padding-block: var(--section-pad); }
.legal__container { max-width: 760px; }
.legal__lead { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--color-ink-muted); max-width: 620px; }

.legal__body { margin-top: 48px; }
.legal__body > p { margin-top: 16px; font-size: 15px; line-height: 1.75; color: var(--color-ink-muted); }
.legal__body > p:first-child { margin-top: 0; }

.legal__body h2 {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(11, 26, 36, 0.1);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.legal__body h3 { margin-top: 32px; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--color-ink); }
.legal__body h4 { margin-top: 24px; font-size: 15.5px; font-weight: 700; color: var(--color-accent-ink); }

.legal__body p { margin-top: 14px; font-size: 15px; line-height: 1.75; color: var(--color-ink-muted); }
.legal__body h2 + p, .legal__body h3 + p, .legal__body h4 + p { margin-top: 12px; }

.legal__body ul { margin-top: 14px; }
.legal__body ul li {
  position: relative;
  padding-left: 18px;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-ink-muted);
}
.legal__body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.legal__body ol { margin-top: 14px; padding-left: 22px; color: var(--color-ink-muted); }
.legal__body ol > li { margin-top: 10px; font-size: 15px; line-height: 1.7; padding-left: 4px; }
.legal__body ol ol { margin-top: 10px; padding-left: 20px; }
.legal__body ol[type="a"] { list-style-type: lower-alpha; }

.legal__body strong { color: var(--color-ink); font-weight: 700; }
.legal__body a { color: var(--color-accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal__body a:hover { color: var(--color-accent-dark); }