/* ==========================================================================
   Haystack — Design tokens & base styles
   Estratti dal file Figma (fileKey TVNyjLcL7eVV93viqRcYle)
   ========================================================================== */

:root {
  /* Colori — sfondi scuri */
  --color-black-deep: #050505;
  --color-navy-black: #0b0d0c;
  --color-charcoal: #121212;
  --color-purple-black: #111312;

  /* Colori — sfondi chiari */
  --color-cream: #f5f4f0;
  --color-off-white: #f7f6f3;

  /* Colori — accento */
  --color-green: #00cc6a;
  --color-green-light: #6aea80;

  /* Testo su sfondo scuro (bianco con opacità) */
  --white-90: rgba(255, 255, 255, 0.9);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-26: rgba(255, 255, 255, 0.26);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-07: rgba(255, 255, 255, 0.07);
  --white-06: rgba(255, 255, 255, 0.06);

  /* Testo su sfondo chiaro */
  --text-dark: #0b0d0c;

  /* Font */
  --font-display: 'Bricolage Grotesque', serif;
  --font-body: 'Instrument Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --font-mono-alt: 'Geist Mono', monospace;

  /* Dimensioni testo */
  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 15px;
  --fs-xl: 16px;
  --fs-2xl: 17px;
  --fs-stat: 44px;
  --fs-heading-sm: 38px;
  --fs-heading-md: 50px;
  --fs-heading-lg: 54px;
  --fs-hero: 99px;
  --fs-display: 124px;

  /* Spaziature (scala 8px) */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 96px;
  --space-12: 112px;

  /* Raggi */
  --radius-sm: 3px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Layout */
  --container-width: 1099px;
  --nav-height: 68px;
}

/* --------------------------------------------------------------------- */
/* Reset & base                                                          */
/* --------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-off-white);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* alcuni elementi decorativi (glow, onde) sconfinano
                         volutamente fuori dai bordi: qui evitiamo che
                         creino una scrollbar orizzontale sulla pagina */
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, p {
  margin: 0;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

.section-dark {
  background: var(--color-navy-black);
  color: #fff;
}

.section-black {
  background: var(--color-black-deep);
  color: #fff;
}

/* --------------------------------------------------------------------- */
/* Tag / badge (es. "AI & DIGITAL TRANSFORMATION")                       */
/* --------------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

.tag__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-green-light);
  opacity: 0.8;
  flex-shrink: 0;
}

/* Variante del tag per sfondi chiari (es. sezione blog) */
.tag--dark {
  color: var(--color-charcoal);
}

.tag--dark .tag__dot {
  background: var(--color-green);
  opacity: 1;
}

/* --------------------------------------------------------------------- */
/* Bottoni                                                               */
/* --------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  /* niente gap fisso: lo spazio verso .btn__icon è il suo stesso
     margin-left, che si apre insieme alla larghezza solo on hover (vedi
     sotto) — con un gap fisso il testo resterebbe leggermente decentrato
     anche a icona invisibile (width:0), dato che il gap occuperebbe
     comunque quello spazio. */
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Shine che attraversa il bottone in diagonale on hover (::before, sopra lo
   sfondo ma sotto il contenuto grazie a isolation+z-index sul contenuto). */
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 1;
}

.btn:hover::before {
  left: 135%;
}

.btn > * {
  position: relative;
  z-index: 2;
}

.btn:hover {
  transform: none; /* no lift/jitter on hover — the glare shine is the only hover effect */
}

.btn:active {
  transform: translateY(0) scale(0.96);
  transition-duration: 0.15s;
}

.btn--primary {
  background: var(--color-green-light);
  color: #000;
  padding: var(--space-4) var(--space-7);
}

.btn--primary:hover,
.btn--pill-green-sm:hover,
.btn--pill-green:hover {
  transform: none; /* keep the glare shine only — no size change / jitter on hover */
}

.btn--outline {
  background: var(--white-07);
  border: 1px solid var(--white-12);
  color: var(--white-60);
  padding: 15px 29px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 var(--white-06);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}

.btn--outline:hover {
  background: var(--white-12);
  border-color: var(--white-26);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 var(--white-12);
}

/* Variante di .btn--outline per sfondi chiari (es. pricing card su bg
   bianco): stessa forma, ma bordo/testo scuri invece di bianchi. */
.btn--outline-dark {
  background: rgba(11, 13, 12, 0.03);
  border: 1px solid rgba(11, 13, 12, 0.15);
  color: var(--text-dark);
  padding: 15px 29px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease, border-color 0.4s ease;
}

.btn--outline-dark:hover {
  background: rgba(11, 13, 12, 0.06);
  border-color: rgba(11, 13, 12, 0.3);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.btn--small {
  font-size: var(--fs-base);
  padding: 9px 17px;
}

.btn--pill-green-sm {
  background: var(--color-green-light);
  color: #000;
  font-size: var(--fs-base);
  padding: 10px 20px;
}

.btn--white:hover {
  transform: translateY(-3px) scale(1.03);
}

.btn__icon {
  width: 0;
  height: 14px;
  margin-left: 0;
  flex-shrink: 0;
  opacity: 0;
  overflow: hidden;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin-left 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.btn:hover .btn__icon {
  width: 14px;
  margin-left: var(--space-1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::before,
  .btn__icon {
    transition: none;
  }

  .btn:hover,
  .btn:active {
    transform: none;
  }
}

/* --------------------------------------------------------------------- */
/* Navbar (uguale su tutte le pagine)                                    */
/* --------------------------------------------------------------------- */

.site-header {
  /* fixed (non sticky): deve restare sopra il contenuto senza riservargli
     spazio, altrimenti da trasparente mostrerebbe lo sfondo chiaro della
     pagina invece dell'hero scuro dietro di sé. Le sezioni non hanno
     compensazione di padding-top: l'hero di ogni pagina inizia da y:0 e
     scorre sotto l'header, esattamente come nel riferimento. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: transparent;
  display: flex;
  align-items: center;
}

/* All'inizio nessuno sfondo (trasparente, si vede quello che c'è dietro).
   Scorrendo (classe .is-scrolled aggiunta via JS in main.js) il menu si
   compatta in una pill flottante con effetto vetro: sfondo nero semi-
   trasparente + backdrop-blur. L'altezza si riduce ma resta centrata nella
   stessa fascia sticky di 68px, quindi il resto della pagina non si sposta. */
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-width);
  height: 100%;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border: 1px solid transparent;
  transition:
    max-width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
    height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
    padding 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
    background-color 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
    backdrop-filter 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
    border-color 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.site-header.is-scrolled .container {
  max-width: 860px;
  height: 54px;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
  border-radius: var(--radius-pill);
  /* Opacità alzata da 0.35: con una sezione a sfondo chiaro dietro (es.
     .work--light) la pillola diventava un grigio slavato e il testo
     bianco del menu perdeva contrasto. Più scura resta leggibile sempre,
     indipendentemente da cosa scorre dietro. */
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.08);
}

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

.site-header__logo img {
  height: 27px;
  width: auto;
  aspect-ratio: 79 / 18; /* fix: l'SVG esportato da Figma non dichiara un rapporto intrinseco,
                             quindi il browser lo stira senza questa regola esplicita */
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-header__nav a,
.site-header__nav .site-header__dropdown-trigger {
  font-size: var(--fs-md);
  color: var(--white-60);
  transition: color 0.15s ease;
}

.site-header__nav a:hover,
.site-header__nav a[aria-current="page"],
.site-header__nav .site-header__dropdown-trigger:hover {
  color: #fff;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* --------------------------------------------------------------------- */
/* Footer "a cassetto": rimane fisso in fondo al viewport fin dall'inizio */
/* ma resta coperto dal contenuto della pagina (main sta sopra, con uno   */
/* z-index più alto) finché non si scrolla fino in fondo. Lo spazio extra */
/* necessario per "scoprirlo" è .footer-spacer, alto quanto la parte      */
/* visibile del footer, misurato via JS in initFooterDrawer (main.js).    */
/* --------------------------------------------------------------------- */

main {
  position: relative;
  z-index: 1;
  /* The fixed .site-footer sits directly behind main at z-index:0 (see
     below) and only stays hidden because main's own sections butt up
     against each other with no visible gap. A late web-font swap (e.g.
     .vertical-hero__title's 700 weight loading after first paint) can
     transiently reflow a section taller/shorter than its settled height,
     opening a real gap between two sections for a frame or two — on
     mobile, where the hero is close to full viewport height, that gap
     falls right where the fixed footer already sits underneath, so it
     shows through at the very top of the page. An opaque background here
     masks that regardless of what causes the gap. */
  background: var(--color-off-white);
}

.footer-spacer {
  /* Puramente decorativo/di spaziatura: senza questo, una volta scrollato
     fino in fondo si sovrappone esattamente al footer fisso sottostante e
     ne blocca i click, pur essendo invisibile. */
  width: 100%;
  pointer-events: none;
}

.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background: var(--color-navy-black);
  color: var(--white-50);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* Sitemap: colonne di link sopra la barra compatta esistente. */
.site-footer__sitemap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-9);
  padding: var(--space-10) 0 var(--space-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.site-footer__col {
  flex: 0 0 auto;
}

.site-footer__col h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
  margin: 0 0 var(--space-4);
}

/* Elenco orizzontale (non più impilato): occupa meno altezza e più
   larghezza, così le due colonne rimaste (Company/Legal) si distendono
   sull'intera larghezza del footer ora che il logo non c'è più a
   bilanciarle a sinistra. */
.site-footer__col ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.site-footer__col ul li a {
  font-size: var(--fs-md);
  color: var(--white-60);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.site-footer__col ul li a:hover {
  color: #fff;
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-size: var(--fs-sm);
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-footer__social a {
  display: block;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}

.site-footer__social a:hover {
  opacity: 1;
}

.site-footer__social img {
  display: block;
  width: 18px;
  height: 18px;
}

.site-footer__contact {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  flex-wrap: wrap;
}

.site-footer__contact a {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--white-60);
}

.site-footer__contact a span {
  color: var(--white-80);
}

.site-footer__contact a:hover {
  color: #fff;
}

.site-footer__meta {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-footer__copy {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--white-80);
  white-space: nowrap;
}

/* Wordmark gigante "Haystack": firma visiva in stile watermark/ghost, a
   bassissimo contrasto rispetto allo sfondo scuro — non compete con i
   link sopra, ma dà al footer un'identità molto più forte e riconoscibile
   (ispirato a footer con grande logotipo in calce, es. sancho.com.mt).
   Nessun margine laterale: la larghezza naturale del testo quasi certamente
   non combacia esattamente con la larghezza del footer, quindi il font-size
   che la fa combaciare esattamente è calcolato via JS (vedi
   initFooterWordmark in main.js) — qui font-size è solo un punto di
   partenza ragionevole, sovrascritto a runtime. Scala uniformemente il
   font-size (non uno scaleX) così le lettere non risultano stirate. */
.site-footer__wordmark {
  /* inline-block (non width:100%): il box deve restare "shrink to fit" al
     testo, altrimenti scrollWidth misurerebbe la larghezza del contenitore
     invece di quella naturale del testo. */
  display: inline-block;
  overflow: visible;
  white-space: nowrap;
  user-select: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(64px, 16vw, 240px);
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.12);
}

.back-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-green-light);
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease, box-shadow 0.4s ease;
}

.back-to-top:hover {
  transform: translateY(-3px) scale(1.08);
  background: var(--color-green-light);
  box-shadow: 0 8px 20px rgba(0, 204, 106, 0.4);
}

.back-to-top:active {
  transform: translateY(0) scale(0.94);
  transition-duration: 0.15s;
}

/* On mobile, .site-footer__bottom's 3 groups (social, contact, copyright)
   wrap onto their own lines, but were sharing the same 16px gap used for
   spacing items WITHIN a row — reading as cramped once stacked. Give the
   stack itself a clearer, more generous gap, and stop the copyright/
   back-to-top row from being squeezed flush against the contact links
   above it. */
@media (max-width: 640px) {
  /* .site-footer__sitemap also carries the shared .container class (see
     footer.php), and a later, equal-specificity mobile rule for .container
     (further down this file) resets its padding to 0 var(--space-5) via
     the shorthand — same specificity, later in the file, so it silently
     won and erased this padding-top/bottom entirely, leaving "COMPANY"
     flush against the section above. Scoping the selector under
     .site-footer beats that on specificity instead of relying on being
     the last word in the cascade. */
  .site-footer .site-footer__sitemap {
    padding-top: var(--space-9);
    padding-bottom: var(--space-7);
  }

  /* Same fix, same cause: .site-footer__bottom also carries the shared
     .container class, and lost this padding to the same later, equal-
     specificity .container mobile reset — the social icons rendered
     flush against .site-footer__sitemap's border above them. The
     `padding: var(--space-7) 0` shorthand fixed the top/bottom spacing
     but also zeroed left/right, which is what .container's own mobile
     rule had actually been providing — dropping the whole row's left edge
     20px out of line with .site-footer__sitemap (and everything else on
     the page) above it. */
  .site-footer .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    padding: var(--space-7) var(--space-5);
  }

  .site-footer__meta {
    width: 100%;
    justify-content: space-between;
  }

  /* The giant watermark sat directly against .site-footer__bottom's last
     row (copyright + back-to-top) with no gap of its own. */
  .site-footer__wordmark {
    margin-top: var(--space-6);
  }
}

.back-to-top img {
  width: 15px;
  height: 15px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.back-to-top:hover img {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top,
  .back-to-top img {
    transition: none;
  }

  .back-to-top:hover,
  .back-to-top:active {
    transform: none;
  }
}

/* --------------------------------------------------------------------- */
/* Reveal animation (fade-up in ingresso, come su Figma)                 */
/* --------------------------------------------------------------------- */

/* L'animazione si applica al contenuto interno (:not([aria-hidden]) esclude
   gli sfondi decorativi come .hero__bg/.services__glow/.cta__bg), MAI alla
   sezione stessa: altrimenti, siccome è la sezione a portare lo sfondo
   scuro, sparirebbe anch'esso durante il fade lasciando intravedere per un
   istante lo sfondo chiaro della pagina dietro (lo "spazio bianco"). */
.reveal > *:not([aria-hidden]):not(.no-outer-reveal) {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  /* A transition (not just a one-way @keyframes) so leaving .is-visible —
     scrolled back up past the section, see initRevealOnScroll — fades the
     content back out instead of snapping to the hidden state instantly. */
  transition: opacity 1.7s cubic-bezier(0.16, 1, 0.3, 1), transform 1.7s cubic-bezier(0.16, 1, 0.3, 1), filter 1.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible > *:not([aria-hidden]):not(.no-outer-reveal) {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* --------------------------------------------------------------------- */
/* Stagger reveal — voci ripetute (statistiche, card, FAQ, progetti...)   */
/* che entrano una dopo l'altra. --stagger-index viene impostato via JS.  */
/* --------------------------------------------------------------------- */

.stagger-item {
  opacity: 0;
  transform: translateY(22px) scale(0.96);
}

.stagger-item.is-visible {
  animation: stagger-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--stagger-index, 0) * 90ms);
}

@keyframes stagger-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --------------------------------------------------------------------- */
/* Tilt 3D on hover (card progetti/blog) — vedi main.js initTilt().       */
/* --------------------------------------------------------------------- */

.tilt {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* --------------------------------------------------------------------- */
/* Utility                                                                */
/* --------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.btn--white {
  background: #fff;
  color: var(--color-navy-black);
  padding: var(--space-4) var(--space-7);
}

/* ==========================================================================
   Home — Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-navy-black);
  padding: 100px 0 96px;
}

/* The split layout + floating stat-card visual tried here (see git
   history) didn't land — reverted in favour of centred text over the
   original full-bleed wave background, restored below. */
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Recedes the wave toward a soft vignette right behind the centred copy —
   without this the photographic asset reads as a hard wall of smoke
   directly behind the headline instead of an ambient backdrop. */
.hero--centered .hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 50% 40%, var(--color-navy-black) 0%, rgba(11, 13, 12, 0.6) 34%, rgba(11, 13, 12, 0) 68%);
}

.hero__bg img {
  /* Posizione/scala ricavate dalle coordinate reali del frame Figma
     (container 1662.879x1521.458px a left:-282px, top:-386px dentro un
     hero di 1099x813px = -25.7%/-47.5% di offset, 151%/187% di scala).
     Nel design l'onda attraversa in diagonale quasi tutto l'hero, dall'alto
     a destra fino in basso a sinistra — non è confinata in un angolo.
     max-width: none overrides the sitewide `img { max-width: 100% }` reset
     above, which otherwise clamps this 151% down to 100% — invisible on
     narrower screens where the clamped width still happened to leave enough
     overscan, but on wide viewports (1920px+) it left the rotated image
     short of the hero's right/bottom edge, cutting it off with a hard
     diagonal line instead of covering the whole section. */
  position: absolute;
  left: -26%;
  top: -47%;
  width: 151%;
  max-width: none;
  height: 187%;
  object-fit: cover;
  opacity: 0.4;
  animation: hero-wave-sway 16s ease-in-out infinite alternate;
}

.hero--centered .hero__bg img {
  opacity: 0.3;
}

@keyframes hero-wave-sway {
  0%   { transform: rotate(-15deg) translate(0, 0) scale(1); }
  50%  { transform: rotate(-11deg) translate(-14px, 10px) scale(1.015); }
  100% { transform: rotate(-18deg) translate(10px, -12px) scale(1.03); }
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 620px;
}

/* Centres the heading/text/buttons as one column instead of the default
   left-aligned block, so the wave background reads as a backdrop behind
   focused, centred copy rather than sharing the frame with a left-anchored
   text block. */
.hero--centered .hero__content {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.hero--centered .hero__actions {
  justify-content: center;
}

.hero--centered .hero__text {
  margin-left: auto;
  margin-right: auto;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 8vw, var(--fs-hero));
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: var(--space-6) 0 0;
}

.hero__title span {
  display: block;
  /* Sfumatura animata su tutte e 3 le righe (anche "Intelligence"):
     --shimmer-base cambia il tono di partenza per riga così "Intelligence"
     resta la più luminosa e le altre due restano leggermente più tenui. */
  --shimmer-base: rgba(255, 255, 255, 0.88);
  background-image: linear-gradient(100deg, var(--shimmer-base) 20%, #fff 50%, var(--shimmer-base) 80%);
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: hero-title-shimmer 7s ease-in-out infinite alternate;
}

.hero__title .is-dim {
  --shimmer-base: var(--white-60);
}

@keyframes hero-title-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .newsletter__bg img,
  .about-hero__glow,
  .case-study-hero__glow,
  .certs__track,
  .hero__title span,
  .hero__bg img,
  .reveal > *:not([aria-hidden]),
  .stagger-item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .tilt {
    transition: none;
  }
}

.hero__text {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  line-height: 1.6;
  color: var(--white-80);
  max-width: 448px;
  margin: var(--space-7) 0 0;
}

.hero__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

/* Auto-triggering version of .btn's own hover-only shine (::before above) —
   a second, separate glare layer (::after, same visual technique) that
   sweeps on a timer instead of waiting for a hover, so the primary hero CTA
   stays eye-catching even before anyone's touched it. Scoped to just the
   hero's primary button, not every .btn--primary site-wide. */
.hero__actions .btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 1;
  animation: hero-cta-auto-shine 3s ease-in-out infinite;
}

@keyframes hero-cta-auto-shine {
  0%, 40% { left: -75%; }
  70%, 100% { left: 135%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__actions .btn--primary::after {
    animation: none;
    display: none;
  }
}

/* ==========================================================================
   Home — Stats bar
   ========================================================================== */

.stats {
  background: var(--color-navy-black);
  border-top: 1px solid var(--white-07);
}

.stats__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.stats__item {
  padding: var(--space-8) var(--space-6) var(--space-8) var(--space-6);
  border-left: 1px solid var(--white-07);
}

.stats__item:first-child {
  border-left: none;
  padding-left: 0;
}

.stats__item:last-child {
  padding-right: 0;
}

.stats__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-stat);
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
}

.stats__label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--white-50);
  margin-top: var(--space-1);
}

/* ==========================================================================
   Home — Marquee (tecnologie + testimonianze condivisi)
   ========================================================================== */

.marquee {
  background: var(--color-navy-black);
  border-top: 1px solid var(--white-07);
  border-bottom: 1px solid var(--white-07);
  overflow: hidden;
  padding: 15px 0;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
}

.marquee__group {
  display: flex;
  align-items: center;
  gap: var(--space-9);
  padding-right: var(--space-9);
}

.marquee__item {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--white-50);
  white-space: nowrap;
}

.marquee__logo-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.marquee__logo {
  height: 16px;
  width: auto;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.marquee__logo-item:hover .marquee__logo {
  opacity: 1;
}

.marquee__sep {
  width: 9px;
  height: 12px;
  opacity: 0.5;
  flex-shrink: 0;
}

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

/* ==========================================================================
   Home — Our services (accordion)
   ========================================================================== */

.services {
  position: relative;
  background: var(--color-black-deep);
  padding: var(--space-11) 0;
}

.services__glow {
  position: absolute;
  left: -200px;
  top: 250px;
  width: 600px;
  height: 500px;
  pointer-events: none;
  z-index: 0;
}

.services__inner {
  position: relative;
  z-index: 1;
}

.services__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

/* Allineata orizzontalmente con il testo dentro le service-item (che hanno
   padding: var(--space-7) var(--space-8)) così titolo e nomi dei servizi
   condividono lo stesso bordo sinistro invece che il bordo della card. */
.services__heading {
  padding-left: var(--space-8);
}

.services__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 520px;
  margin-top: var(--space-4);
}

.services__desc {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  line-height: 1.4;
  color: var(--white-80);
  max-width: 380px;
  opacity: 0.7;
}

.services-scroll {
  position: relative;
}

.services-pin {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-8));
}

/* Fixed-size stage the cards move through — same technique as .team-stage
   (About page) and .testimonial-cards: children are stacked via
   position:absolute so only one is ever in flow-height terms. Their
   position is driven directly by scroll (initServiceHighlight,
   sequences.js sets `translate` inline every frame, 1:1 with scroll
   position — not a class-based snap with its own CSS transition, which
   looked static-then-jumpy instead of continuously tracking the scroll).
   The rule below is only the static fallback for when that JS opts out
   (reduced motion, or the small-screen static list further down). */
.service-list {
  position: relative;
  height: 340px;
  overflow: hidden;
}

.service-item {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-black-deep);
  border: 1px solid var(--white-07);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-8);
  box-shadow: 0 40px 70px -35px rgba(0, 0, 0, 0.8);
  transform: translateY(100%);
  pointer-events: none;
}

.service-item.is-active {
  transform: translateY(0);
  pointer-events: auto;
}

.service-item__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  width: 100%;
  padding: 0 0 var(--space-4);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
}

.service-item__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 4vw, 50px);
  letter-spacing: -0.03em;
  color: var(--white-80);
  transition: color 0.25s ease;
}

.service-item:hover .service-item__title,
.service-item:focus-within .service-item__title {
  color: var(--color-green-light);
}

.service-item__badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(106, 234, 128, 0.35);
  border: 1px solid #fff;
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.service-item:hover .service-item__badge,
.service-item:focus-within .service-item__badge {
  opacity: 1;
  transform: translateX(0);
}

.service-item__panel {
  /* Con il nuovo layout a card impilate ogni servizio mostra sempre la sua
     descrizione (non più un accordion a scomparsa: ogni card ha già spazio
     dedicato nel nuovo effetto "pila" on-scroll). */
  display: grid;
  grid-template-rows: 1fr;
}

.service-item__panel-inner {
  overflow: hidden;
}

.service-item__desc {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  line-height: 1.6;
  color: var(--white-60);
  max-width: 620px;
  padding-bottom: var(--space-6);
}

/* ==========================================================================
   Home — Clienti (loghi testuali)
   ========================================================================== */

.clients-testimonials {
  background: var(--color-off-white);
}

.clients {
  text-align: center;
  flex-shrink: 0;
}

.clients__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
}

.clients__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-9);
  margin-top: var(--space-5);
}

.clients__list li {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-base);
  color: rgba(0, 0, 0, 0.3);
  transition: color 0.4s ease, font-weight 0.4s ease;
}

.clients__list li.is-featured {
  font-weight: 700;
  color: #000;
}

/* ==========================================================================
   Home — Testimonianze (reveal scroll-driven, entrata da destra)
   Il wrapper .testimonial-scroll è alto 3 "passi" di scroll; al suo interno
   .testimonial-stage resta ancorata (sticky) mentre si scorre — con tag,
   lista clienti (quello corrispondente evidenziato) e recensione corrente
   tutti visibili insieme — e le 3 card si passano il testimone: quella
   attiva è ferma al centro, la successiva entra da destra, quelle già
   viste escono verso sinistra.
   ========================================================================== */

.testimonial-scroll {
  position: relative;
  height: 340vh;
}

.testimonial-stage {
  position: sticky;
  top: var(--nav-height);
  /* Via di mezzo tra il vecchio 440px (troppo poco: lasciava un grosso
     vuoto sotto, prima della sezione successiva) e l'altezza piena del
     viewport (troppo: il contenuto, centrato con justify-content, restava
     "annegato" in un box molto più alto di lui, spostando il vuoto
     all'interno del box stesso). Un cap più generoso ma non totale riduce
     entrambi i vuoti insieme. */
  height: min(64vh, 620px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-9) 0 var(--space-6);
}

.testimonial-cards {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
}

.testimonial {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 0 var(--space-8);
  max-width: 768px;
  margin: 0 auto;
  opacity: 0;
  transform: translateX(65%);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
  pointer-events: none;
}

.testimonial.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.testimonial.is-passed {
  opacity: 0;
  transform: translateX(-65%);
}

@media (prefers-reduced-motion: reduce) {
  .testimonial {
    transition: opacity 0.3s ease;
    transform: none !important;
  }
}

.testimonial__quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 4vw, var(--fs-heading-sm));
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}

.testimonial__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-7);
}

.testimonial__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--color-green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: #000;
  flex-shrink: 0;
}

.testimonial__who {
  text-align: left;
}

.testimonial__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--text-dark);
}

.testimonial__company {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Home — Logo marquee (loghi clienti, righe scroll-linked in stile
   sancho.com.mt: ogni riga si sposta orizzontalmente in base allo scroll
   della pagina, con direzioni alternate — vedi initLogoMarquee() in main.js)
   ========================================================================== */

.logo-marquee {
  background: var(--color-off-white);
  overflow: hidden;
  padding: var(--space-11) 0;
}

.logo-marquee__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

.logo-marquee__row {
  overflow: hidden;
}

.logo-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  will-change: transform;
}

/* Ogni logo è renderizzato come silhouette monocromatica (nera di default)
   tramite mask-image: la stessa immagine (di qualunque colore/formato sia
   il logo originale) viene usata solo come "stencil" su un riquadro a tinta
   unita, indipendentemente dai colori reali del brand. Il riquadro ha
   dimensioni fisse (non solo altezza) cosicché loghi con proporzioni molto
   diverse (quadrati vs. wordmark larghi) risultino visivamente uniformi:
   mask-size: contain adatta ogni logo dentro lo stesso box senza distorcerlo.
   Puramente decorativo: nessun hover, nessuna interazione. */
.logo-marquee__logo {
  display: inline-block;
  flex-shrink: 0;
  width: clamp(130px, 11vw, 172px);
  height: clamp(56px, 6vw, 78px);
  background-color: var(--text-dark);
  -webkit-mask-image: var(--logo-img);
  mask-image: var(--logo-img);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

@media (max-width: 700px) {
  .logo-marquee { padding: var(--space-9) 0; }
  .logo-marquee__inner { gap: var(--space-7); }
  .logo-marquee__track { gap: var(--space-6); }

  /* Desktop's clamp() floor (130px/56px) never actually shrinks below that
     regardless of viewport — sized for a wide marquee row, it reads as
     oversized against a 375px-wide screen where each logo is a much
     bigger fraction of the row. */
  .logo-marquee__logo {
    width: clamp(90px, 24vw, 130px);
    height: clamp(38px, 10vw, 56px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { transform: none !important; }
}

/* ==========================================================================
   Projects page — Hero (stessa struttura di .aiservices-hero/.industries-hero)
   ========================================================================== */

.projects-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-navy-black);
  padding: 160px 0 80px;
  min-height: 580px;
  display: flex;
  align-items: center;
}

.projects-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 70% -10%, rgba(0, 204, 106, 0.16), rgba(0, 0, 0, 0) 45%),
    radial-gradient(circle at 5% 15%, rgba(185, 195, 190, 0.07), rgba(0, 0, 0, 0) 45%),
    radial-gradient(circle at 65% 60%, rgba(0, 204, 106, 0.05), rgba(0, 0, 0, 0) 45%);
}

.projects-hero__inner {
  position: relative;
  z-index: 1;
}

.projects-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 7vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #fff;
  margin: var(--space-6) 0 0;
}

.projects-hero__title span {
  display: block;
}

.projects-hero__title-fade {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.26));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.projects-hero__text {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  font-weight: 300;
  line-height: 1.6;
  color: var(--white-80);
  max-width: 448px;
  margin: var(--space-7) 0 0;
}

/* ==========================================================================
   Home — Work showcase (progetti)
   ========================================================================== */

.work {
  background: var(--color-navy-black);
}

.work__grid {
  display: flex;
  align-items: flex-start;
  gap: var(--space-9);
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-11) var(--space-8);
}

/* Colonna sinistra: resta ancorata (sticky) mentre a destra si scorre
   attraverso la pila di progetti — il nome evidenziato viene aggiornato
   via JS (initWorkNavHighlight) in base a quale card è in cima. */
.work__nav {
  position: sticky;
  /* Vertically centre the sticky column so the "Our projects" showcase sits in
     the middle of the viewport rather than hugging the top. Matches .work-stage. */
  top: max(90px, calc((100vh - 640px) / 2));
  height: 640px;
  display: flex;
  flex-direction: column;
  flex: 0 0 300px;
  padding-right: var(--space-6);
  border-right: 1px solid var(--white-07);
}

.work__list {
  flex: 1 1 auto;
  min-height: 0;
  margin: var(--space-9) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  /* Stretch the rows to span the same height as .work-stage (both share the
     same sticky top + height), so the last project lines up with the
     bottom of the image instead of stopping partway up the card. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.work__list-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #fff;
  opacity: 0.28;
  transition: opacity 0.3s ease;
}

.work__list-item.is-active {
  opacity: 1;
}

.work__list-item-index {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  color: var(--white-50);
  min-width: 20px;
}

.work__list-item.is-active .work__list-item-index {
  color: var(--color-green-light);
}

.work__list-item-name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  flex: 1;
}

.work__list-item-icon {
  width: 13px;
  height: 13px;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.3s ease;
}

.work__list-item.is-active .work__list-item-icon {
  opacity: 1;
}

/* .work-stack è il wrapper "lungo" che dà spazio di scroll (come
   .testimonial-scroll): al suo interno .work-stage resta ancorata (sticky)
   mentre si scorre, e le card si passano il testimone a indice discreto
   (vedi initWorkNavHighlight() in main.js) — questo impedisce di fermarsi
   a metà di una transizione, cosa che con l'effetto pila scroll-linked
   originale poteva succedere. La card successiva entra comunque da sotto
   (stesso effetto "sale e copre" di prima) ma ora è un transform CSS a
   durata fissa e con easing, quindi molto più fluido; le card non attive
   restano parcheggiate appena sotto il bordo inferiore dello stage
   (translateY(100%), tagliate fuori da overflow:hidden), pronte a salire
   quando arriva il loro turno. Lo z-index crescente (nth-child) fa sì che
   ogni nuova card copra sempre quelle precedenti mentre sale. */
.work-stack {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 700vh;
}

.work-stage {
  position: sticky;
  /* Centre the 640px card stage in the viewport (see .work__nav). */
  top: max(90px, calc((100vh - 640px) / 2));
  height: 640px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 70px -35px rgba(0, 0, 0, 0.8);
}

.work-card {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* .work-stack (the sticky pinned wrapper, above) already clips to this
     same radius via its own overflow:hidden — but a transformed child
     (translateY, below) gets promoted to its own compositing layer in some
     browsers, and that layer's corners can render square for a frame or
     two mid-transition instead of respecting the ancestor's clip, before
     "snapping" back to rounded once the transform settles. Applying the
     radius here too, directly on the transformed element, keeps it clipped
     at every frame regardless of layer promotion. */
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transform: translateY(100%);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.work-card.is-active {
  transform: translateY(0);
  pointer-events: auto;
}

.work-card:nth-child(1) { z-index: 1; }
.work-card:nth-child(2) { z-index: 2; }
.work-card:nth-child(3) { z-index: 3; }
.work-card:nth-child(4) { z-index: 4; }
.work-card:nth-child(5) { z-index: 5; }
.work-card:nth-child(6) { z-index: 6; }
.work-card:nth-child(7) { z-index: 7; }

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

.work-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  border-radius: var(--radius-lg);
}

.work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 13, 12, 0.85) 0%, rgba(11, 13, 12, 0) 45%);
  pointer-events: none;
}

.work-card__desc {
  position: absolute;
  left: var(--space-6);
  bottom: var(--space-6);
  right: var(--space-6);
  max-width: 500px;
  background: rgba(11, 13, 12, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  z-index: 1;
}

.work-card__desc-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.work-card__desc-name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-md);
  color: #fff;
}

.work-card__desc-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--color-green-light);
  text-decoration: none;
}

.work-card__desc-link img {
  width: 12px;
  height: 12px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-card__desc:hover .work-card__desc-link img {
  transform: rotate(-12deg);
}

.work-card__desc-text {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.4;
  color: #fff;
  margin-top: var(--space-4);
}

/* Variante chiara di .work: sfondo off-white invece di navy-black, testo/
   bordi scuri per tag/titolo/lista a sinistra. Le card a destra restano
   invariate — sono foto con un proprio overlay/desc box scuri (per la
   leggibilità del testo sull'immagine), già a posto su qualunque sfondo
   di sezione. */
.work--light {
  background: var(--color-off-white);
}

.work--light .tag {
  color: var(--color-charcoal);
}

.work--light .tag__dot {
  background: var(--color-green);
}

.work--light .services__title {
  color: var(--text-dark);
}

.work--light .work__nav {
  border-right-color: rgba(11, 13, 12, 0.1);
}

.work--light .work__list {
  border-top-color: rgba(11, 13, 12, 0.08);
}

.work--light .work__list-item {
  color: var(--text-dark);
  border-bottom-color: rgba(11, 13, 12, 0.08);
}

.work--light .work__list-item-index {
  color: rgba(11, 13, 12, 0.4);
}

.work--light .work__list-item.is-active .work__list-item-index {
  color: var(--color-green);
}

/* ==========================================================================
   Home — New & Noteworthy (blog)
   ========================================================================== */

.blog {
  background: var(--color-off-white);
  padding: var(--space-11) 0;
}

.blog__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.blog__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.03em;
  color: var(--color-charcoal);
  margin-top: var(--space-4);
}

.blog__all-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--color-green-light);
}

.blog__all-link img {
  width: 14px;
  height: 14px;
}

.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  margin-top: var(--space-9);
}

.blog-card__image {
  width: 100%;
  /* height:auto is required alongside aspect-ratio here — this <img> (via
     wp_get_attachment_image) carries its own width/height HTML attributes
     from the registered image size, and without an explicit height:auto
     those attributes win over aspect-ratio for the rendered box, so the
     card ends up however tall the source crop happens to be (here a
     portrait 700x924 crop) instead of the intended landscape ratio — this
     is what made these cards render far taller than the equivalent cards
     in the insights carousel, which avoids the conflict by putting
     aspect-ratio on a wrapper div instead of the <img> itself. */
  height: auto;
  aspect-ratio: 1501 / 1170;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.blog-card__category {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--color-green-light);
  margin-top: var(--space-2);
}

.blog-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--color-charcoal);
  margin-top: var(--space-3);
}

.blog-card__meta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--color-charcoal);
  margin-top: var(--space-3);
}

/* ==========================================================================
   Home — FAQ
   ========================================================================== */

.faq {
  background: var(--color-navy-black);
  border-top: 1px solid var(--white-06);
  padding: var(--space-12) 0;
}

.faq__grid {
  display: flex;
  gap: var(--space-10);
  align-items: flex-start;
}

.faq__left {
  flex: 0 0 297px;
}

.faq__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.03em;
  color: #fff;
  margin-top: var(--space-4);
  line-height: 1.15;
}

.faq__list {
  flex: 1;
  min-width: 0;
  border-top: 1px solid var(--white-07);
}

.faq-item {
  border-bottom: 1px solid var(--white-07);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
  padding: var(--space-6) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
}

.faq-item__question-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  color: #fff;
}

.faq-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.faq-item__icon img {
  width: 12px;
  height: 12px;
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq-item.is-open .faq-item__panel {
  grid-template-rows: 1fr;
}

.faq-item__panel-inner {
  overflow: hidden;
}

.faq-item__answer {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  line-height: 1.6;
  color: var(--white-60);
  max-width: 620px;
  padding-bottom: var(--space-6);
}

/* ==========================================================================
   Home — CTA finale
   ========================================================================== */

.cta {
  position: relative;
  overflow: hidden;
  background: var(--color-navy-black);
}

.cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

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

.cta__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.cta__glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 50% 0%, rgba(0, 204, 106, 0.25), rgba(0, 102, 53, 0.08) 40%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

.cta__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-11) var(--space-6);
}

.cta__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 12vw, var(--fs-display));
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: #fff;
  margin-top: var(--space-7);
}

.cta__title .accent {
  display: block;
  color: var(--color-green-light);
}

.cta__actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-9);
  flex-wrap: wrap;
  justify-content: center;
}

/* ==========================================================================
   Home — Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .work__grid {
    flex-direction: column;
    /* .work-stack's own children (.work-card) are position:absolute, so
       they contribute nothing to its intrinsic width. That's fine in the
       desktop flex ROW (flex:1 fills the remaining row width), but once
       this switches to a column layout, the inherited align-items:
       flex-start sizes each item to its (here: empty/zero) content width
       instead of stretching — collapsing the whole image stack to 0px
       wide and making it invisible, leaving only the text list. */
    align-items: stretch;
  }

  /* .work__nav keeps desktop's own position:sticky as-is here (tried
     un-stickying just this to let the "Our projects." heading scroll away
     on its own first, matching how other pinned sections' headings behave
     — but position:sticky only holds a descendant in view for as long as
     ITS OWN PARENT's box still spans the sticky point; .work__nav's real
     (static-flow) height is short — just the heading + one name row, ~185px
     — nowhere near .work-stack's JS-driven multi-thousand-px scroll track,
     so .work__list stopped sticking again after that first ~185px of
     scroll instead of staying pinned across all six projects. Keeping
     .work__nav itself sticky is what actually gives it room, at the cost
     of the heading staying visible the whole time too — .work-stage's top
     offset below accounts for that full height instead of just one row.) */
  .work__nav {
    flex: none;
    height: auto;
    border-right: none;
  }

  /* Was: every project's name listed at once (01-06, five greyed-out) above
     a single shared image below all of them — a lot of vertical space
     spent before the image ever appeared, and no visual link between a
     given name and "its" image. Now: only the current project's name row
     shows below the heading, changing together with the image as you
     scroll instead of a static list sitting above a changing image. */
  .work__list-item:not(.is-active) {
    display: none;
  }

  .work__list {
    margin-top: 0;
    border-top: none;
  }

  .work__list-item.is-active {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--white-07);
  }

  .work-stack {
    /* .work__grid switched to flex-direction:column above, which flips its
       main axis to vertical — .work-stack's own `flex: 1` (flex-basis:0%
       + flex-grow:1) then controls its HEIGHT via flex distribution
       instead of respecting its explicit CSS height or the tall
       JS-driven inline height (n*62vh, initWorkNavHighlight) meant to
       give the pinned crossfade room to scroll through. It was silently
       capped to whatever "remaining space" flex handed it (~640px, same
       as .work-stage), so `scrollable = stack.offsetHeight -
       stage.offsetHeight` came out ~0 and the JS's own `if (scrollable
       <= 0) { setActive(0); return; }` guard kicked in — the active
       project could never advance past the first no matter how far you
       scrolled. */
    flex: none;
    width: 100%;
  }

  .work-stage {
    /* This used to be targeting .work__stage (double underscore), which
       doesn't exist anywhere — the real class is .work-stage (hyphen) — so
       this override silently never applied. */
    min-height: 420px;
    /* The desktop 640px explicit height carried over unchanged, so — once
       positioned below the sticky nav block (~280px down) — it ran well
       past the bottom of a typical mobile viewport (812px), cutting off
       .work-card__desc's name/link/caption overlay (bottom-anchored
       within the card) entirely below the fold. */
    height: 460px;
    /* Clears .work__nav's full sticky block above it — its own top offset
       (unchanged desktop formula) plus its real content height (tag +
       heading + one name row, ~180px, measured live) — instead of the
       desktop vertical-centering offset, which assumed no nav column
       sibling stacked above it. */
    top: max(280px, calc((100vh - 640px) / 2 + 190px));
  }

  .services__desc {
    max-width: none;
  }

  /* .service-list's 340px is sized for the desktop card copy; stacked at
     mobile width the same title+description text wraps to more lines and
     the tallest card (343px+) already clips against it by a few px. 420px
     fixed that but overshot — comfortable for the tallest card (343px)
     but left the shorter ones (as little as 289px) with 100px+ of empty
     space below the text. Splitting the difference: real but modest
     headroom over today's tallest card instead of a flat round number. */
  .service-list {
    height: 365px;
  }

  .blog__grid {
    grid-template-columns: 1fr;
  }

  .faq__grid {
    flex-direction: column;
  }

  .faq__left {
    flex: none;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 var(--space-5);
  }

  .stats__list {
    flex-wrap: wrap;
  }

  .stats__item {
    flex: 0 0 50%;
    border-left: none;
    padding-left: 0;
  }

  .site-header__nav {
    display: none;
  }
}

/* ==========================================================================
   Insights — Hero
   ========================================================================== */

.insights-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(600px 600px at 78% -15%, rgba(0, 204, 106, 0.13), rgba(0, 0, 0, 0) 60%),
    radial-gradient(700px 700px at 5% 5%, rgba(185, 195, 190, 0.06), rgba(0, 0, 0, 0) 60%),
    var(--color-navy-black);
  padding: 160px 0 80px;
  min-height: 580px;
  display: flex;
  align-items: center;
}

.insights-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: #fff;
  margin: var(--space-6) 0 0;
}

.insights-hero__title span {
  display: block;
}

.insights-hero__title-fade {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.26));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Variante marquee più "spenta" usata nella pagina Insights */
.marquee--dim .marquee__item {
  color: rgba(255, 255, 255, 0.2);
}

.marquee--dim .marquee__logo {
  opacity: 0.2;
}

/* ==========================================================================
   Insights — riga "New & Noteworthy" (fedele al design Figma): l'indice
   attivo è calcolato dalla posizione di scroll mentre la riga resta
   "agganciata" (sticky), stesso calcolo di progress usato in initNewsWipe.
   La card attiva si allarga e prende un bordo verde, le altre restano
   più strette e sbiadite (opacity, non scala di grigi); sotto la riga un
   pannello riporta categoria/titolo/data dell'articolo attivo
   (initInsightsBrowse, main.js).
   ========================================================================== */

.insights-rows {
  background: var(--color-off-white);
  padding: var(--space-11) 0 var(--space-9);
}

/* Same reasoning as .news-wipe__news-inner (theme-wp.css): the shared
   .container class caps this at --container-width (1099px) site-wide,
   which left the carousel cards here noticeably narrower/thinner than the
   home page's version of the same component — widen it to match. */
.insights-rows .container {
  max-width: 1600px;
}

.insights-row__head {
  margin-bottom: var(--space-5);
}

.insights-row__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.03em;
  color: var(--text-dark);
}

.insights-scrubber {
  position: relative;
}

.insights-row-sticky {
  position: sticky;
  top: var(--nav-height);
  overflow: hidden;
  padding: 22px 0 30px;
}

.insights-row__track {
  display: flex;
  gap: var(--space-5);
  /* allinea il primo articolo al bordo reale di .container, non a un
     valore fisso: su schermi larghi .container è centrato con margini
     oltre --container-width, quindi il semplice --space-8 non basterebbe */
  padding-left: max(var(--space-8), calc((100vw - var(--container-width)) / 2 + var(--space-8)));
  padding-right: max(var(--space-8), calc((100vw - var(--container-width)) / 2 + var(--space-8)));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.insights-card {
  display: block;
  position: relative;
  flex: 0 0 220px;
  height: 340px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  opacity: 0.25;
  text-decoration: none;
  transition: flex-basis 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease, border-color 0.3s ease, box-shadow 0.4s ease;
}

.insights-card.is-active {
  flex-basis: 460px;
  opacity: 1;
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.35);
}

.insights-card__image {
  position: absolute;
  inset: 0;
}

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

.insights-row__detail {
  /* padding-left impostato via JS (initInsightsBrowse): resta sempre
     fisso al bordo di .container, come per il primo articolo — non segue
     la card attiva, che invece si sposta per lasciare visibile una card
     sbiadita "precedente" a sinistra (come da design Figma). */
  margin-top: var(--space-6);
  padding-right: var(--space-8);
}

.insights-row__detail-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-green);
}

.insights-row__detail-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 28px);
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin-top: var(--space-2);
  max-width: 640px;
}

.insights-row__detail-date {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: rgba(11, 13, 12, 0.5);
  margin-top: var(--space-2);
}

.insights-row__detail-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--color-green);
}

.insights-row__detail-link img {
  width: 12px;
  height: 12px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.insights-row__detail-link:hover img {
  transform: translateX(3px);
}

@media (max-width: 720px) {
  .insights-card {
    flex: 0 0 160px;
    height: 260px;
  }

  .insights-card.is-active {
    flex-basis: 320px;
  }
}

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

  .insights-card {
    transition: none;
  }
}

/* ==========================================================================
   Home — Hero scuro + New & Noteworthy (wipe on scroll)
   Il pannello scuro resta fermo (sticky); scorrendo, il pannello chiaro
   entra da destra e lo ricopre in proporzione diretta allo scroll — non è
   uno scatto a tempo fisso ma segue esattamente la posizione di scroll
   (vedi initNewsWipe in main.js).
   ========================================================================== */

.news-wipe {
  position: relative;
  height: 280vh;
}

.news-wipe__stage {
  /* top:0 (non var(--nav-height)) così l'immagine si estende a piena altezza
     fin sotto l'header fixed, come fa ogni altro hero del sito — altrimenti
     durante lo scroll si vede uno spacchetto dello sfondo chiaro della
     pagina nella fascia riservata all'header. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--color-black-deep);
}

.news-wipe__hero {
  position: absolute;
  inset: 0;
}

.news-wipe__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-wipe__hero-title {
  position: absolute;
  left: var(--space-8);
  bottom: var(--space-9);
  max-width: 700px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.15;
  color: #fff;
  z-index: 1;
}

.news-wipe__news {
  position: absolute;
  inset: 0;
  z-index: 2; /* deve coprire .news-wipe__hero-title (z-index:1) quando scorre sopra */
  background: var(--color-off-white);
  transform: translateX(100%);
  /* NB: niente overflow:auto qui — essendo l'elemento a tutta altezza sopra
     il resto della pagina, uno scroll interno "intrappolerebbe" la rotella
     del mouse impedendo di proseguire con lo scroll della pagina. Il
     contenuto è dimensionato per stare nell'altezza disponibile; se dovesse
     eccedere viene semplicemente ritagliato invece di creare uno scroll. */
  overflow: hidden;
  display: flex;
  /* NOT align-items:center — the "New & Noteworthy."/"All articles" header
     and the carousel below it are one block (.news-wipe__news-inner), so
     centring that whole block re-positions the header any time the
     carousel's own height changes (different article text wraps to a
     different number of lines depending on which 3 cards are showing).
     Anchoring to the top keeps the header's position stable regardless. */
  align-items: flex-start;
  will-change: transform;
}

.news-wipe__news-inner {
  width: 100%;
  /* This also carries the shared .container class for its markup/text
     alignment, which caps it at --container-width (1099px) site-wide — far
     narrower than this full-bleed panel actually has available, and the
     reason widening .news-carousel__track's own max-width alone did nothing
     (it was already maxed out inside this smaller box). Overriding it here
     directly wins the cascade (this rule is declared after .container). */
  max-width: 1600px;
  max-height: 100%;
  overflow: hidden;
  /* Top padding alone gets bumped past the fixed nav's own height — plain
     --space-8 on all sides left the "INSIGHTS" tag rendering underneath the
     nav (nav is 68px tall, padding was only 40px), not just close to it. */
  padding: calc(var(--nav-height) + var(--space-6)) var(--space-8) var(--space-8);
}

@media (prefers-reduced-motion: reduce) {
  .news-wipe__news {
    transform: translateX(0) !important;
  }
}

/* ==========================================================================
   Insights — Newsletter
   ========================================================================== */

.newsletter {
  position: relative;
  overflow: hidden;
  background: var(--color-black-deep);
  border-top: 1px solid var(--white-07);
  padding: var(--space-11) 0;
}

.newsletter__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.newsletter__bg img {
  position: absolute;
  top: -30%;
  right: -12%;
  width: 78%;
  max-width: 820px;
  opacity: 0.4;
  /* Stesso "respiro" lento dell'onda nell'hero della home (hero-wave-sway) */
  animation: hero-wave-sway 16s ease-in-out infinite alternate;
}

.newsletter__inner {
  position: relative;
  z-index: 1;
}

.newsletter__col {
  /* Blocco di testo più stretto del .container che lo contiene: essendo
     un elemento normale (senza margin:auto), resta ancorato al bordo
     sinistro invece di ricentrarsi a metà sezione. */
  max-width: 512px;
  text-align: left;
}

.newsletter__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #fff;
  margin: var(--space-6) 0 0;
}

.newsletter__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--white-80);
  margin: var(--space-4) 0 0;
}

.newsletter__form {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-7);
  flex-wrap: wrap;
}

.newsletter__input {
  flex: 1 1 260px;
  min-width: 0;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  padding: 13px 21px;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--white-90);
}

.newsletter__input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.newsletter__submit {
  flex-shrink: 0;
  border: none;
}

/* ==========================================================================
   Industries — Hero
   ========================================================================== */

.industries-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-navy-black);
  padding: 160px 0 80px;
  min-height: 580px;
  display: flex;
  align-items: center;
}

.industries-hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% -15%, rgba(0, 204, 106, 0.16), rgba(0, 0, 0, 0) 45%),
    radial-gradient(circle at -8% 0%, rgba(185, 195, 190, 0.07), rgba(0, 0, 0, 0) 45%),
    radial-gradient(circle at 72% 65%, rgba(0, 204, 106, 0.05), rgba(0, 0, 0, 0) 40%);
}

.industries-hero .container {
  position: relative;
  z-index: 1;
}

.industries-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #fff;
  margin: var(--space-6) 0 0;
}

.industries-hero__title span {
  display: block;
}

.industries-hero__title .is-gradient {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.26));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   Industries — Showcase card (carosello settori)
   ========================================================================== */

.industries-showcase {
  background: var(--color-off-white);
  padding: var(--space-9) 0;
}

/* Pila di 7 card di settore, sticky come .work-stack (home) e
   .aiservices-stage-stack: scorrendo, la card successiva copre la
   precedente. L'etichetta "SCROLL" è dentro ogni card; l'indicatore a
   pallini invece è UN SOLO elemento indipendente — .industries-progress,
   fuori da .industries-stack — perché durante la transizione tra due card
   impilate entrambe sono parzialmente visibili, e una copia per-card si
   vedrebbe raddoppiata proprio in quel momento. */
.industries-stack {
  position: relative;
}

.industries-card {
  position: sticky;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: max(528px, calc(100vh - 140px));
  background: var(--color-navy-black);
  padding: var(--space-9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: var(--space-6);
  box-shadow: 0 40px 70px -35px rgba(0, 0, 0, 0.8);
}

.industries-card:nth-child(1) { top: 90px;  z-index: 1; }
.industries-card:nth-child(2) { top: 98px;  z-index: 2; }
.industries-card:nth-child(3) { top: 106px; z-index: 3; }
.industries-card:nth-child(4) { top: 114px; z-index: 4; }
.industries-card:nth-child(5) { top: 122px; z-index: 5; }
.industries-card:nth-child(6) { top: 130px; z-index: 6; }
.industries-card:nth-child(7) { top: 138px; z-index: 7; margin-bottom: 0; }

.industries-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.industries-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(11, 13, 12, 0.92) 0%, rgba(11, 13, 12, 0.4) 55%, rgba(0, 0, 0, 0.18) 100%);
}

.industries-card__index {
  position: absolute;
  left: var(--space-9);
  top: var(--space-9);
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 80px;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.3);
  line-height: 1;
}

.industries-card__info {
  position: relative;
  z-index: 2;
  margin-top: 96px;
}

.industries-card__category {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--color-green-light);
}

.industries-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.15;
  margin-top: var(--space-2);
}

.industries-card__details {
  position: relative;
  z-index: 2;
  max-width: 442px;
  margin-top: var(--space-6);
}

.industries-card__desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: #fff;
}

.industries-card__usecases-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-60);
  margin-top: var(--space-6);
}

.industries-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.industries-card__pills span {
  border: 1px solid rgba(255, 255, 255, 0.29);
  border-radius: var(--radius-pill);
  padding: 7px 13px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

/* One independent indicator (position: fixed, outside the stacked cards)
   instead of a copy baked into every card — initIndustriesProgress
   (theme-core.js) drives which dot is active from live scroll position, and
   shows/hides the whole thing based on whether the showcase is in view. */
.industries-progress {
  position: fixed;
  right: var(--space-9);
  /* top is set inline by positionIndicator() in theme-core.js, measured from
     the active card's own vertical centre — a static top:50% only happened
     to roughly match while the card filled the whole viewport, and drifted
     off-centre from the actual image whenever it didn't. */
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s, top 0.1s linear;
}

.industries-progress.is-visible {
  opacity: 1;
  visibility: visible;
}

.industries-progress span {
  width: 3px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.58);
  transition: height 0.3s ease, background-color 0.3s ease;
}

.industries-progress span.is-active {
  height: 36px;
  background: var(--color-green-light);
}

.industries-card__scroll {
  position: absolute;
  right: 46px;
  bottom: var(--space-6);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.2);
  writing-mode: vertical-rl;
}

/* ==========================================================================
   Industries — "Your sector" CTA
   ========================================================================== */

.sector-cta {
  position: relative;
  overflow: hidden;
  background: var(--color-navy-black);
  padding: var(--space-12) 0;
  text-align: center;
}

.sector-cta__wave {
  position: absolute;
  top: 0;
  width: 45%;
  max-width: 566px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

.sector-cta__wave img {
  width: 100%;
  height: auto;
}

.sector-cta__wave--left {
  left: 0;
  transform: rotate(180deg);
}

.sector-cta__wave--right {
  right: 0;
  top: 60px;
}

.sector-cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sector-cta__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #fff;
  margin-top: var(--space-6);
}

.sector-cta__content .btn {
  margin-top: var(--space-8);
}

/* ==========================================================================
   Industries — Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .industries-card {
    min-height: 480px;
    padding: var(--space-7);
  }

  .industries-card__info {
    margin-top: 64px;
  }

  .industries-card__index {
    font-size: 56px;
  }

  .industries-progress {
    display: none;
  }

  .industries-card__scroll {
    display: none;
  }

  .sector-cta__wave {
    width: 60%;
    opacity: 0.25;
  }
}

@media (max-width: 640px) {
  .industries-card__details {
    max-width: none;
  }

  .industries-card__pills span {
    font-size: 11px;
  }
}

/* ==========================================================================
   About — Hero
   ========================================================================== */

.about-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-navy-black);
  padding: 160px 0 80px;
  min-height: 580px;
  display: flex;
  align-items: center;
}

.about-hero__glow-wrap {
  /* Wrapper per il parallax on-scroll (data-parallax, initParallax in
     main.js): il transform impostato via JS e quello dell'animazione
     continua sotto devono restare su due elementi diversi, altrimenti si
     sovrascriverebbero a vicenda invece di sommarsi (stessa struttura a
     due livelli di .hero__bg/.hero__bg img). */
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.about-hero__glow {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 85% -30%, rgba(0, 204, 106, 0.16), rgba(0, 0, 0, 0) 45%),
    radial-gradient(circle at -10% -5%, rgba(185, 195, 190, 0.07), rgba(0, 0, 0, 0) 45%);
  /* Stesso "respiro" lento del bagliore/onda usato nell'hero della home e
     nella newsletter, adattato a uno sfondo a gradiente invece che a
     un'immagine (nessun asset qui: solo tag + titolo) */
  animation: about-glow-drift 18s ease-in-out infinite alternate;
}

@keyframes about-glow-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-12px, 14px) scale(1.04); }
  100% { transform: translate(10px, -10px) scale(1.06); }
}

.about-hero .container {
  position: relative;
  z-index: 1;
}

.about-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 6.5vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 1019px;
  margin: var(--space-6) 0 0;
}

.about-hero__title .is-gradient {
  display: block;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.26));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   About — Timeline: la storia di Haystack anno per anno. Stessa tecnica
   "pila di card" sticky di .work-stack/.work-card nella home ("Our
   projects"): ogni tappa resta ancorata e viene coperta dalla successiva
   mentre si scorre; l'anno e il titolo evidenziato nella colonna sinistra
   si aggiornano di conseguenza (initTimelineHighlight, main.js).
   ========================================================================== */

.timeline {
  background: var(--color-off-white);
  /* Horizontal inset comes from the shared .container class on
     .timeline__inner (added in the markup) — a second var(--space-8) here
     as well double-padded the row, landing its "2020" year 40px to the
     left of the page-hero title above it instead of sharing its edge. */
  padding: var(--space-11) 0;
}

.timeline__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-9);
}

.timeline__col {
  position: sticky;
  /* Matches .timeline-stage's own sticky top (theme-wp.css) exactly, so
     "2020" lines up with the top of the image beside it instead of pinning
     70px+ higher — the stage centres its fixed 560px height in the
     viewport (dynamic per viewport height), while this used a flat 100px. */
  top: max(90px, calc((100vh - 560px) / 2));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
  max-width: 320px;
}

.timeline__year {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 80px;
  letter-spacing: -0.05em;
  line-height: 1;
  color: rgba(11, 13, 12, 0.2);
  margin: 0;
}

.timeline__list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-6);
  border-top: 1px solid rgba(11, 13, 12, 0.08);
  width: 100%;
}

.timeline__list li {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
  color: var(--text-dark);
  opacity: 0.28;
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(11, 13, 12, 0.08);
  transition: opacity 0.3s ease;
}

.timeline__list li.is-active {
  opacity: 1;
  color: var(--color-green);
}

/* Pila di card: ogni tappa resta ancorata (sticky) e viene coperta dalla
   successiva mentre si scorre, esattamente come .work-stack/.work-card. */
.timeline-stack {
  position: relative;
  flex: 1 1 auto;
  max-width: 681px;
  min-width: 0;
}

.timeline-card {
  position: sticky;
  overflow: hidden;
  border-radius: var(--radius-lg);
  height: 528px;
  margin-bottom: var(--space-6);
  box-shadow: 0 40px 70px -35px rgba(0, 0, 0, 0.35);
}

.timeline-card:nth-child(1) { top: 100px; z-index: 1; }
.timeline-card:nth-child(2) { top: 116px; z-index: 2; }
.timeline-card:nth-child(3) { top: 132px; z-index: 3; }
.timeline-card:nth-child(4) { top: 148px; z-index: 4; }
.timeline-card:nth-child(5) { top: 164px; z-index: 5; }
.timeline-card:nth-child(6) { top: 180px; z-index: 6; }
.timeline-card:nth-child(7) { top: 196px; z-index: 7; }
.timeline-card:nth-child(8) { top: 212px; z-index: 8; margin-bottom: 0; }

.timeline-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.timeline-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 13, 12, 0.85) 0%, rgba(11, 13, 12, 0) 45%);
  pointer-events: none;
}

.timeline-card__heading {
  position: absolute;
  top: var(--space-6);
  left: var(--space-6);
  z-index: 1;
}

.timeline-card__year {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-green-light);
}

.timeline-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 32px);
  letter-spacing: -0.03em;
  color: #fff;
  margin-top: var(--space-1);
}

.timeline-card__caption {
  position: absolute;
  left: var(--space-6);
  bottom: var(--space-6);
  right: var(--space-6);
  max-width: 460px;
  background: rgba(11, 13, 12, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 var(--white-06);
  padding: var(--space-5);
  z-index: 1;
}

.timeline-card__caption p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: #fff;
}

/* ==========================================================================
   About — Quality & standards (certificazioni)
   ========================================================================== */

.certs {
  background: var(--color-navy-black);
  border-top: 1px solid var(--white-07);
  border-bottom: 1px solid var(--white-07);
  padding: var(--space-11) 0 var(--space-12);
}

.certs__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.certs__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fff;
}

.certs__desc {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  line-height: 1.6;
  color: var(--white-50);
  max-width: 680px;
}

/* Scorrimento automatico e continuo, stessa tecnica del marquee
   tecnologie/topic (nessun JS): il gruppo di card è duplicato una volta e
   il track scorre da 0 a -50%, cioè esattamente la larghezza di un
   gruppo, per un loop senza scatti. */
.certs__marquee {
  overflow: hidden;
  margin-top: var(--space-9);
  mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.certs__track {
  display: flex;
  width: max-content;
  animation: certs-scroll 40s linear infinite;
}

.certs__track:hover {
  animation-play-state: running; /* keep looping — do not pause on hover */
}

.certs__group {
  display: flex;
  gap: var(--space-5);
  padding-right: var(--space-5);
}

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

.cert-card {
  flex: 0 0 280px;
  background: #0f1110;
  border: 1px solid var(--white-12);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.cert-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.cert-card__icon {
  width: 24px;
  height: 24px;
}

.cert-card__badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 9px;
  color: var(--color-green-light);
  background: rgba(106, 234, 128, 0.14);
  border: 0.5px solid var(--color-green-light);
  border-radius: var(--radius-pill);
  padding: 4px 8px;
  white-space: nowrap;
}

.cert-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: #fff;
}

.cert-card__issuer {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--white-50);
  margin-top: var(--space-1);
}

.cert-card__desc {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--white-50);
}

/* ==========================================================================
   About — Team & contact
   ========================================================================== */

.team {
  background: var(--color-navy-black);
  /* Extra top clearance beyond the usual --space-11 (96px) — reported as
     the "TEAM & CONTACT" eyebrow tag sitting too close to / behind the
     fixed nav on some screens. */
  padding: calc(var(--space-11) + 44px) 0 var(--space-11);
}

.team__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.team__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fff;
}

.team__desc {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  line-height: 1.6;
  color: var(--white-50);
  max-width: 680px;
}

.team__row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

/* Pila di 2 card: quella di Niki resta ancorata (sticky) e copre quella
   di Lloyd mentre si scorre, stessa tecnica di .work-stack/.timeline-stack. */
.team-stack {
  position: relative;
  flex: 1 1 320px;
}

.team-card {
  position: sticky;
  height: 520px;
  border-radius: var(--radius-md);
  border: 1px solid var(--white-12);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 40px 70px -35px rgba(0, 0, 0, 0.5);
}

.team-card:nth-child(1) { top: 100px; z-index: 1; margin-bottom: var(--space-5); }
.team-card:nth-child(2) { top: 116px; z-index: 2; margin-bottom: 0; }

.team-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%; /* frame the face without over-zooming */
}

.team-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}

.team-card__overlay {
  position: relative;
  z-index: 1;
  padding: var(--space-7);
}

.team-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  color: #fff;
}

.team-card__role {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: -0.01em;
  margin-top: var(--space-1);
}

/* Pila di 2 card come .team-stack, stessi offset sticky: la card di Niki
   copre quella di Lloyd esattamente allo stesso punto di scroll in cui
   la sua foto copre quella di Lloyd nella colonna a fianco. */
.contact-stack {
  position: relative;
  flex: 1 1 320px;
}

.contact-card {
  position: sticky;
  height: 520px;
  background: var(--white-07);
  border: 1px solid var(--white-12);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 40px 70px -35px rgba(0, 0, 0, 0.5);
}

.contact-card:nth-child(1) { top: 100px; z-index: 1; margin-bottom: var(--space-5); }
.contact-card:nth-child(2) { top: 116px; z-index: 2; margin-bottom: 0; }

.contact-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: #fff;
}

.contact-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.contact-card__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.contact-card__list img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  filter: invert(1);
}

.contact-card__list span {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--white-80);
}

.contact-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.contact-card__btn {
  display: inline-flex;
  align-items: center;
  background: var(--color-green-light);
  color: var(--color-navy-black);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-md);
  border-radius: var(--radius-pill);
  padding: var(--space-4) var(--space-5);
}

.contact-card__arrow {
  width: 56px;
  height: 56px;
}

/* ==========================================================================
   About — Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .timeline__inner {
    flex-direction: column;
  }

  .timeline__col {
    /* Same fix as .work-stage/.work__list (home "Our projects"): sticks
       right below the nav instead of the desktop vertical-centering offset,
       which assumed no page nav above it. */
    top: var(--nav-height);
    max-width: none;
    width: 100%;
  }

  /* Was: every stage's title listed at once (2020, 2022, 2022, 2023...)
     above a single shared image below all of them, and — same root cause
     as .work-stack below — .timeline-stack's flex-basis:auto (see its
     `flex: 1 1 auto`) took its height from its own (empty, since
     .timeline-card is position:absolute) content box once .timeline__inner
     switched to a column layout, instead of the tall JS-driven scroll
     track (initTimelineHighlight, n*62vh) that lets the crossfade actually
     advance — so scrolling could never move .timeline-card past the first
     year no matter how far down you went. Fixed the same way: opt this
     item out of flex sizing entirely. The list itself is redundant with
     the big year number right above it once only one card is ever visible
     at a time, so it's hidden rather than also converted to a
     show-only-the-active-one list like .work__list. */
  .timeline-stack {
    flex: none;
    max-width: none;
    width: 100%;
  }

  .timeline__list {
    display: none;
  }

  /* The small in-image year label is redundant with the big pinned
     .timeline__year above the card now that only one card is ever on
     screen — two "2020"s reading at once. And the caption/title sizes
     below were tuned against the desktop card's wider proportions; a
     narrow phone card has more height to spend per line than width, so
     they can afford to read larger instead of understating a caption
     that's often the main piece of copy anyone reads on this card. */
  .timeline-card__year {
    display: none;
  }

  .timeline-card__title {
    font-size: 28px;
  }

  .timeline-card__caption p {
    font-size: var(--fs-lg);
    line-height: 1.5;
  }
}

@media (max-width: 640px) {
  .timeline {
    padding: var(--space-9) 0;
  }

  /* Dead: theme-wp.css's `.timeline-card { height: 100% !important; }`
     always wins over this either way, and shrinking it further was the
     wrong direction anyway — see the mobile height bump on .timeline-stage
     in theme-wp.css instead. Left removed rather than "fixed", since a
     no-op rule that looks intentional is its own trap. */

  .team__row {
    flex-direction: column;
  }

  .team-card,
  .contact-card {
    height: auto;
    min-height: 420px;
  }
}

/* ==========================================================================
   Service page — Hero
   ========================================================================== */

.service-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-navy-black);
  padding: 160px 0 80px;
  min-height: 580px;
  display: flex;
  align-items: center;
}

.service-hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 82% -20%, rgba(0, 204, 106, 0.16), rgba(0, 0, 0, 0) 42%),
    radial-gradient(circle at -8% 15%, rgba(185, 195, 190, 0.07), rgba(0, 0, 0, 0) 42%),
    radial-gradient(circle at 88% 65%, rgba(0, 204, 106, 0.05), rgba(0, 0, 0, 0) 40%);
}

.service-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1019px;
}

.service-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #fff;
  margin-top: var(--space-6);
}

.service-hero__title span {
  display: block;
}

.service-hero__title .is-gradient {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.26));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.service-hero__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-xl);
  line-height: 26px;
  color: var(--white-80);
  max-width: 448px;
  margin-top: var(--space-7);
}

/* ==========================================================================
   Service page — Intro ("We Build AI That Works For Business")
   ========================================================================== */

.service-intro {
  background: #fff;
  padding: var(--space-11) 0;
}

.service-intro__grid {
  display: flex;
  gap: var(--space-11);
  align-items: center;
}

.service-intro__left {
  flex: 1;
  min-width: 0;
}

.service-intro__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 48px;
  letter-spacing: -0.045em;
  color: #141615;
}

.service-intro__desc {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  line-height: 26px;
  color: #6f7471;
  margin-top: var(--space-4);
}

.service-intro__right {
  flex: 0 0 420px;
  max-width: 100%;
}

.service-intro__card {
  background: #f8f8f8;
  border: 1px solid #e6e7e6;
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}

.service-intro__card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.service-intro__card-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(107, 235, 128, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.service-intro__card-icon img {
  width: 22px;
  height: 22px;
}

.service-intro__card-label {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  color: #6f7471;
}

.service-intro__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.service-intro__bullet {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.service-intro__bullet-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-green-light);
  flex-shrink: 0;
}

.service-intro__bullet-text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-md);
  color: #141615;
}

/* ==========================================================================
   Service page — Testimonial
   ========================================================================== */

.service-testimonial {
  position: relative;
  overflow: hidden;
  background: var(--color-navy-black);
  border-top: 1px solid var(--white-07);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.4);
  padding: var(--space-12) 0;
  text-align: center;
}

.service-testimonial__wave {
  position: absolute;
  width: 45%;
  max-width: 436px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

.service-testimonial__wave--1 {
  right: -4%;
  top: -8%;
}

.service-testimonial__wave--2 {
  left: -6%;
  bottom: -12%;
  transform: rotate(180deg);
}

.service-testimonial__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.service-testimonial__quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 4.5vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}

.service-testimonial__meta {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: #8f9591;
  margin-top: var(--space-4);
}

/* ==========================================================================
   Service page — "What we can do" grid
   ========================================================================== */

.service-grid {
  background: var(--color-off-white);
  padding-top: var(--space-11);
}

.service-grid__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  letter-spacing: -0.045em;
  color: #141615;
}

.service-grid__list {
  position: relative;
  margin-top: var(--space-7);
}

.service-grid__row {
  position: sticky;
  display: flex;
  gap: var(--space-6);
  min-height: 520px;
  background: var(--color-off-white);
}

.service-grid__row:nth-child(1) { top: 100px; z-index: 1; margin-bottom: var(--space-6); }
.service-grid__row:nth-child(2) { top: 116px; z-index: 2; margin-bottom: var(--space-6); }
.service-grid__row:nth-child(3) { top: 132px; z-index: 3; margin-bottom: var(--space-6); }
.service-grid__row:nth-child(4) { top: 148px; z-index: 4; margin-bottom: 0; }

.service-grid__panel-left {
  flex: 1;
  min-width: 0;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
}

.service-grid__eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-base);
  text-transform: uppercase;
  color: var(--color-green-light);
}

.service-grid__desc {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: 24px;
  color: #3a3d3b;
  margin-top: var(--space-1);
}

.service-grid__panel-right {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 40px 44px 48px;
}

.service-grid__panel-right img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.service-grid__panel-right::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%);
  z-index: 1;
}

.service-grid__panel-title {
  position: relative;
  z-index: 2;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.3;
  color: #fff;
}

/* ==========================================================================
   Service page — Other services (pill tabs)
   ========================================================================== */

.service-other {
  background: var(--color-off-white);
  padding: 62px 0 var(--space-11);
}

.service-other__label {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}

.service-other__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.service-other__tab {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e6e7e6;
  border-radius: var(--radius-pill);
  padding: 10px var(--space-4);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-base);
  color: #6f7471;
  background: none;
  cursor: default;
}

/* ==========================================================================
   Service page — Final CTA ("With Haystack, you don't just get tech")
   ========================================================================== */

.service-final-cta {
  background: var(--color-navy-black);
  border-top: 1px solid var(--white-07);
  box-shadow: 0 18px 20px rgba(0, 0, 0, 0.4);
  padding: var(--space-12) 0;
}

.service-final-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-7);
}

.service-final-cta__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 640px;
}

.service-final-cta__text {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 24px;
  color: #8f9591;
  max-width: 640px;
  margin-top: var(--space-4);
}

.btn--pill-green {
  background: var(--color-green-light);
  color: var(--color-navy-black);
  padding: var(--space-2) var(--space-6);
  box-shadow: 0 14px 14px rgba(107, 235, 128, 0.2);
}

/* ==========================================================================
   Service page — Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .service-intro__grid {
    flex-direction: column;
    align-items: stretch;
  }

  .service-intro__right {
    flex: none;
  }

  .service-grid__row {
    flex-direction: column;
    min-height: 0;
  }

  .service-grid__panel-right {
    min-height: 320px;
  }
}

/* ==========================================================================
   Software page — Giant cards (software showcase, 01 / 02 / 03)
   ========================================================================== */

.software-showcase {
  background: var(--color-off-white);
  border-top: 1px solid rgba(11, 13, 12, 0.06);
}

/* Container più largo solo qui: con --container-width (1099px) di default
   il mockup restava sotto i 550px di larghezza reale — le schermate del
   prodotto sono il punto centrale di questa sezione, quindi meritano più
   spazio di quanto basti per il testo accanto. */
.software-showcase .container {
  max-width: 1360px;
}

/* .software-showcase__list è il wrapper "lungo" che dà spazio di scroll
   (altezza impostata via JS, initSoftwareShowcaseHighlight in main.js, in
   base al numero di item): al suo interno .software-showcase__stage resta
   ancorata (sticky) mentre gli item si susseguono in crossfade (uno solo
   visibile alla volta, via classe .is-active) — il successivo RIMPIAZZA
   per intero il precedente invece di scorrergli sopra gradualmente, quindi
   non ci si può fermare a metà di una transizione. Stessa tecnica di
   .work-stack/.work-card nella home ("Our projects"). */
.software-showcase__list {
  position: relative;
}

.software-showcase__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.software-showcase__item {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-off-white);
  transform: translateY(100%);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.software-showcase__item.is-active {
  transform: translateY(0);
  pointer-events: auto;
}

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

.software-showcase__item:nth-child(1) { z-index: 1; }
.software-showcase__item:nth-child(2) { z-index: 2; }
.software-showcase__item:nth-child(3) { z-index: 3; }
.software-showcase__item:nth-child(4) { z-index: 4; }
.software-showcase__item:nth-child(5) { z-index: 5; }

.software-showcase__item-inner {
  display: flex;
  align-items: center;
  gap: var(--space-9);
  width: 100%;
}

.software-showcase__left {
  flex: 0 0 360px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.software-showcase__index {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 80px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(11, 13, 12, 0.2);
}

.software-showcase__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.software-showcase__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-dark);
}

.software-showcase__desc {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  line-height: 26px;
  color: rgba(11, 13, 12, 0.7);
}

.software-showcase__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Sempre 2 righe (3 pill per sezione): invece di affidarsi al wrap
   "naturale" (che con testi più lunghi o larghezze diverse potrebbe dare 1
   o 3 righe), il margine forza esplicitamente l'a capo dopo la 2ª pill —
   la 3ª va sempre da sola sulla riga sotto, a prescindere dal testo. */
.software-showcase__features .pill-feature:nth-child(2) {
  margin-right: 100%;
}

.pill-feature {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--white-12);
  background:
    linear-gradient(90deg, rgba(106, 234, 128, 0.2) 0%, rgba(106, 234, 128, 0) 100%),
    #1a1b1a;
  box-shadow: 0 10px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(106, 234, 128, 0.25);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-md);
  color: #fff;
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.pill-feature:hover {
  transform: translateY(-3px);
  border-color: rgba(106, 234, 128, 0.45);
  box-shadow: 0 14px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(106, 234, 128, 0.4), 0 0 0 1px rgba(106, 234, 128, 0.25);
}

.pill-feature__stripe {
  width: 4px;
  align-self: stretch;
  border-radius: var(--radius-pill);
  background: var(--color-green-light);
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.pill-feature:hover .pill-feature__stripe {
  box-shadow: 0 0 10px 2px rgba(106, 234, 128, 0.8);
}

.software-showcase__mockup {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #080909;
  border: 1px solid var(--white-12);
}

/* Barra "browser" in cima, in flusso normale — non più in overlay sopra
   lo screenshot: prima si sovrapponeva al contenuto reale della schermata
   (che ha spesso la sua stessa intestazione in alto), rendendo illeggibili
   entrambi i testi. */
.software-showcase__mockup-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: #111312;
  border-bottom: 1px solid var(--white-07);
  flex-shrink: 0;
}

.software-showcase__mockup-frame {
  position: relative;
  width: 100%;
  /* aspect-ratio impostato via JS (vedi initMediaAspectFit in main.js) in
     base alle dimensioni naturali dell'immagine effettivamente caricata:
     il riquadro assume sempre le proporzioni esatte dello screenshot,
     qualunque esso sia, senza ritagliarlo. Questo valore è solo il
     fallback prima che JS giri (o se disabilitato). */
  aspect-ratio: 16 / 10;
  max-height: 82vh;
}

.software-showcase__mockup-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.software-showcase__mockup-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--white-60);
}

.software-showcase__mockup-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  animation: online-blink 1.8s ease-in-out infinite;
}

@keyframes online-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.software-showcase__mockup-status img {
  position: static;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.software-showcase__mockup-status span {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--color-green-light);
}

/* Effetto macchina da scrivere (vedi initTypewriterTitle in main.js): il
   testo resta sempre nel DOM (niente flash/collasso di layout), solo la
   larghezza del wrapper è animata via steps() così il reveal avanza a
   scatti, un carattere alla volta invece che con un'unica dissolvenza. Il
   bordo destro lampeggiante durante ".is-typing" funge da cursore —
   currentColor eredita il colore dello span (bianco su "Build", verde su
   "smarter."); unità in em/var così scalano col font-size responsive del
   titolo invece di restare fisse. */
.cta__title .typewriter-clip,
.software-showcase__index .typewriter-clip {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
}

.cta__title .typewriter-clip.is-typing,
.software-showcase__index .typewriter-clip.is-typing {
  width: 0;
  border-right: 0.05em solid currentColor;
  animation: typewriter-cursor-blink 0.9s step-end infinite;
}

.cta__title .typewriter-clip.is-revealed,
.software-showcase__index .typewriter-clip.is-revealed {
  width: var(--final-width, 100%);
  transition: width var(--type-duration, 1s) steps(var(--char-count, 10));
}

@keyframes typewriter-cursor-blink {
  0%, 49% { border-color: currentColor; }
  50%, 100% { border-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .cta__title .typewriter-clip,
  .software-showcase__index .typewriter-clip {
    width: auto !important;
    border-right: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Software page — Responsive
   ========================================================================== */

@media (max-width: 900px) {
  /* Sotto i 900px lo stack sticky si disattiva del tutto: JS non imposta
     l'altezza di scroll (vedi initSoftwareShowcaseHighlight) e qui si
     riportano stage/item a un normale flusso verticale, tutti visibili. */
  .software-showcase__list {
    height: auto !important;
  }

  .software-showcase__stage {
    position: static;
    height: auto;
    display: block;
  }

  .software-showcase__item {
    position: static;
    inset: auto;
    transform: none;
    transition: none;
    pointer-events: auto;
    min-height: auto;
    padding: var(--space-9) 0;
  }

  .software-showcase__item-inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-7);
  }

  .software-showcase__left {
    flex: none;
    max-width: none;
  }

  .software-showcase__mockup {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .software-showcase__title {
    font-size: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .software-showcase__mockup-status {
    animation: none;
  }
}

/* ==========================================================================
   AI Services — Hero
   ========================================================================== */

.aiservices-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-navy-black);
  padding: 160px 0 80px;
  min-height: 580px;
  display: flex;
  align-items: center;
}

.aiservices-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 70% -10%, rgba(0, 204, 106, 0.16), rgba(0, 0, 0, 0) 45%),
    radial-gradient(circle at 5% 15%, rgba(185, 195, 190, 0.07), rgba(0, 0, 0, 0) 45%),
    radial-gradient(circle at 65% 60%, rgba(0, 204, 106, 0.05), rgba(0, 0, 0, 0) 45%);
}

.aiservices-hero__inner {
  position: relative;
  z-index: 1;
}

.aiservices-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 7vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #fff;
  margin: var(--space-6) 0 0;
}

.aiservices-hero__title span {
  display: block;
}

.aiservices-hero__title-fade {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.26));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.aiservices-hero__text {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  font-weight: 300;
  line-height: 1.6;
  color: var(--white-80);
  max-width: 448px;
  margin: var(--space-7) 0 0;
}

/* ==========================================================================
   AI Services — Explorer (ibrido: metà sinistra a sfondo pieno con il
   testo — chiaro/scuro alternati per card — metà destra con la foto.
   Stessa tecnica sticky di .work-stack / .work-card nella home: ogni
   card resta ancorata finché la successiva non la copre scorrendo. Il
   testo non sta mai sopra una foto, quindi è sempre leggibile senza
   bisogno di maschere.
   ========================================================================== */

.aiservices-explorer {
  background: var(--color-black-deep);
}

/* .aiservices-stage-stack è il wrapper "lungo" che dà spazio di scroll,
   .aiservices-stage resta ancorata (sticky) mentre si scorre, e le card si
   passano il testimone a indice discreto (vedi initAiServicesStageHighlight
   in main.js) — stessa tecnica di .work-stack/.work-card nella home ("Our
   projects"): invece di scorrere in continuo 1:1 con lo scroll (coprendosi
   parzialmente l'una con l'altra man mano che si scrolla, con un effetto
   "lento"/legato al gesto), ogni card sostituisce per intero la precedente
   con un transform CSS a durata fissa — molto più immediato. */
.aiservices-stage-stack {
  position: relative;
}

.aiservices-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.aiservices-stage-card {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  transform: translateY(100%);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.aiservices-stage-card.is-active {
  transform: translateY(0);
  pointer-events: auto;
}

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

.aiservices-stage-card:nth-child(1) { z-index: 1; }
.aiservices-stage-card:nth-child(2) { z-index: 2; }
.aiservices-stage-card:nth-child(3) { z-index: 3; }
.aiservices-stage-card:nth-child(4) { z-index: 4; }
.aiservices-stage-card:nth-child(5) { z-index: 5; }
.aiservices-stage-card:nth-child(6) { z-index: 6; }

.aiservices-stage-card__text {
  flex: 0 0 45%;
  min-width: 380px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-9);
  background: var(--color-navy-black);
}

/* alterna chiaro/scuro: la 1ª, 3ª, 5ª card (dispari) sono chiare */
.aiservices-stage-card:nth-child(odd) .aiservices-stage-card__text {
  background: var(--color-off-white);
}

.aiservices-stage-card__text-inner {
  max-width: 460px;
}

.aiservices-stage-card__media {
  flex: 1;
  position: relative;
  min-width: 0;
}

.aiservices-stage-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aiservices-stage-card__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.22);
}

.aiservices-stage-card:nth-child(odd) .aiservices-stage-card__num {
  color: rgba(11, 13, 12, 0.15);
}

.aiservices-stage-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fff;
  margin-top: var(--space-4);
}

.aiservices-stage-card:nth-child(odd) .aiservices-stage-card__title {
  color: var(--text-dark);
}

.aiservices-stage-card__desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin-top: var(--space-5);
}

.aiservices-stage-card:nth-child(odd) .aiservices-stage-card__desc {
  color: rgba(11, 13, 12, 0.7);
}

.aiservices-explorer__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.aiservices-explorer__tag {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--white-80);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  padding: 7px 13px;
}

.aiservices-stage-card:nth-child(odd) .aiservices-explorer__tag {
  color: var(--text-dark);
  border-color: rgba(11, 13, 12, 0.16);
}

/* ==========================================================================
   AI Services — Responsive
   ========================================================================== */

@media (max-width: 900px) {
  /* Sotto i 900px lo stack sticky si disattiva: JS non imposta l'altezza
     di scroll (vedi initAiServicesStageHighlight) e qui si riportano
     stage/card a un normale flusso verticale, tutte visibili. */
  .aiservices-stage-stack {
    height: auto !important;
  }

  .aiservices-stage {
    position: static;
    height: auto;
    overflow: visible;
  }

  .aiservices-stage-card {
    position: static;
    inset: auto;
    transform: none;
    transition: none;
    pointer-events: auto;
    flex-direction: column;
    min-height: auto;
  }

  .aiservices-stage-card__text {
    flex: none;
    width: 100%;
    min-width: 0;
    padding: var(--space-9) var(--space-6);
  }

  .aiservices-stage-card__media {
    flex: none;
    width: 100%;
    min-height: 320px;
  }
}

/* ==========================================================================
   Contact page — Hero ("Get in touch.")
   ========================================================================== */

.contact-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-navy-black);
  padding: 160px 0 80px;
  min-height: 580px;
  display: flex;
  align-items: center;
}

.contact-hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(500px circle at 78% -10%, rgba(0, 204, 106, 0.16), rgba(0, 0, 0, 0) 62%),
    radial-gradient(420px circle at -6% 55%, rgba(185, 195, 190, 0.07), rgba(0, 0, 0, 0) 62%),
    radial-gradient(360px circle at 60% 90%, rgba(0, 204, 106, 0.05), rgba(0, 0, 0, 0) 60%);
}

.contact-hero .container {
  position: relative;
  z-index: 1;
}

.contact-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.26));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: var(--space-6) 0 0;
}

.contact-hero__text {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  line-height: 1.55;
  color: var(--white-80);
  max-width: 520px;
  margin: var(--space-2) 0 0;
}

.contact-hero__badges {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: var(--white-80);
  background: var(--white-07);
  border: 1px solid var(--white-12);
  border-radius: var(--radius-pill);
  padding: 10px var(--space-4);
}

.badge--green {
  color: var(--color-green-light);
  background: rgba(0, 204, 106, 0.16);
  border-color: rgba(106, 234, 128, 0.3);
}

/* ==========================================================================
   Contact page — Direct Channels
   ========================================================================== */

.contact-channels {
  background: var(--color-navy-black);
  padding: var(--space-8) 0 var(--space-11);
}

.contact-channels__grid {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

.channel-card {
  flex: 1 1 0;
  min-width: 220px;
  background: var(--white-07);
  border: 1px solid var(--white-12);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.channel-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: #fff;
}

.channel-card__text {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 20px;
  color: var(--white-60);
}

.channel-card__value {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  color: var(--color-green-light);
  margin-top: var(--space-1);
  text-underline-offset: 3px;
}

.channel-card__value:hover {
  text-decoration: underline;
}

.channel-card__value--address {
  font-size: var(--fs-base);
}

/* ==========================================================================
   Contact page — Sync Calendars / Available Meeting Slots
   ========================================================================== */

.contact-calendar {
  background: var(--color-navy-black);
  padding: var(--space-9) 0 var(--space-11);
}

/* The Google Calendar embed is its own iframe — a separate scrolling
   context from the page. At the desktop height (700px) it's short enough
   that a touch scroll starting inside it still has page above/below to
   hand off to once its own content runs out. On a phone that same 700px
   is nearly the full viewport height, so a swipe that starts over the
   iframe keeps scrolling the calendar's own internal time-slot list
   instead of the page, with almost no surrounding page left to grab —
   reads as the page being "stuck" at this section. Shortening it on
   mobile leaves real page space immediately above and below to scroll
   from instead. */
@media (max-width: 640px) {
  .contact-calendar__embed iframe {
    height: 480px;
  }
}

.contact-calendar__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.contact-calendar__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-calendar__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.09;
  color: #fff;
}

.contact-calendar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.contact-calendar__month {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  color: #fff;
  white-space: nowrap;
}

.contact-calendar__arrows {
  display: flex;
  gap: var(--space-1);
}

.calendar-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--white-07);
  border: 1px solid var(--white-12);
  cursor: pointer;
}

.calendar-arrow img {
  width: 12px;
  height: 12px;
}

.calendar-grid-wrap {
  margin-top: var(--space-8);
  overflow-x: auto;
}

.calendar-grid {
  display: flex;
  gap: var(--space-4);
  min-width: 640px;
}

.calendar-day {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.calendar-day__header {
  background: var(--white-07);
  border-radius: 8px;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.calendar-day__dow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--white-40);
}

.calendar-day__date {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: #fff;
}

.calendar-slot {
  width: 100%;
  border-radius: 8px;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--white-12);
  background: var(--white-07);
  font-family: inherit;
}

.calendar-slot__time {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-sm);
}

.calendar-slot__status {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-2xs);
}

.calendar-slot.is-booked {
  opacity: 0.4;
  color: var(--white-60);
  cursor: not-allowed;
}

.calendar-slot.is-available {
  background: rgba(0, 204, 106, 0.16);
  border-color: #fff;
  color: #fff;
  cursor: pointer;
}

.calendar-slot.is-available:hover {
  background: rgba(0, 204, 106, 0.28);
}

.calendar-slot.is-available.is-selected {
  background: var(--color-green-light);
  border-color: var(--color-green-light);
  color: var(--color-navy-black);
}

/* ==========================================================================
   Contact page — Form ("Send a request")
   ========================================================================== */

.contact-form-section {
  background: var(--color-off-white);
  padding: var(--space-9) 0 var(--space-11);
}

.contact-form-card {
  background: var(--color-navy-black);
  border: 1px solid var(--white-12);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.form-tabs {
  display: flex;
  gap: var(--space-1);
  width: 100%;
  max-width: 380px;
  background: #1a1c1b;
  border: 1px solid var(--white-07);
  border-radius: var(--radius-pill);
  padding: 6px;
}

.form-tabs__tab {
  flex: 1 1 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  padding: 10px var(--space-6);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-base);
  color: var(--white-60);
  cursor: pointer;
}

.form-tabs__tab.is-active {
  background: var(--color-green-light);
  font-weight: 600;
  color: var(--color-navy-black);
}

.contact-form-card__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.contact-form-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: #fff;
}

.contact-form-card__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--white-60);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact-form[hidden] {
  display: none;
}

.contact-form__row {
  display: flex;
  gap: var(--space-5);
}

.form-field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-field__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--white-60);
}

.form-field__input {
  width: 100%;
  background: #1a1c1b;
  border: 1px solid var(--white-07);
  border-radius: 8px;
  padding: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: #fff;
}

.form-field__input::placeholder {
  color: var(--white-40);
}

.form-field__input:focus {
  outline: none;
  border-color: var(--color-green-light);
}

.form-field__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'><path d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%236AEA80' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 12px;
  padding-right: var(--space-9);
  cursor: pointer;
}

.form-field__select:invalid {
  color: var(--white-40);
}

.form-field__textarea {
  height: 120px;
  resize: vertical;
  font-family: var(--font-body);
}

.contact-form__submit {
  width: 100%;
  justify-content: center;
}

.contact-form__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-9) 0;
}

.contact-form__success[hidden] {
  display: none;
}

.contact-form__success-icon {
  width: 40px;
  height: 40px;
}

.contact-form__success p {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  color: #fff;
  max-width: 420px;
}

.contact-form__reset {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--color-green-light);
  cursor: pointer;
}

/* ==========================================================================
   Contact page — Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .contact-channels__grid {
    flex-direction: column;
  }

  .contact-form__row {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .contact-hero {
    padding-top: 140px;
  }

  .form-tabs {
    max-width: none;
  }

  .contact-form-card {
    padding: var(--space-6);
  }
}

/* ==========================================================================
   Case Study — template di dettaglio progetto (Figma node 177:4), collegato
   dai bottoni "View case study" della sezione Our projects in home.
   ========================================================================== */

.case-study-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-black-deep);
  padding: 160px 0 var(--space-11);
}

/* Stesso bagliore/parallax dell'hero About: wrapper per il parallax
   on-scroll, animazione continua sull'elemento interno (due livelli per
   non far sovrascrivere i due transform a vicenda). */
.case-study-hero__glow-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.case-study-hero__glow {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(600px 600px at 80% -10%, rgba(0, 204, 106, 0.16), rgba(0, 0, 0, 0) 60%),
    radial-gradient(500px 500px at 10% 10%, rgba(185, 195, 190, 0.08), rgba(0, 0, 0, 0) 60%);
  animation: about-glow-drift 18s ease-in-out infinite alternate;
}

.case-study-hero .container {
  position: relative;
  z-index: 1;
}

.case-study-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 90px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  margin: var(--space-6) 0 0;
}

.case-study-hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-2xl);
  line-height: 1.45;
  color: var(--white-70, rgba(255, 255, 255, 0.7));
  max-width: 700px;
  margin-top: var(--space-5);
}

.case-study-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.case-study-stats__item {
  flex: 1 1 200px;
  background: var(--white-07);
  border: 1px solid var(--white-12);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.case-study-stats__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: -0.02em;
  color: var(--color-green-light);
  white-space: nowrap;
}

.case-study-stats__label {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--white-60);
  margin-top: var(--space-1);
}

/* Riquadro "ambito dichiarato onestamente" — stessa estetica a bordo verde
   di .case-study-stats__item, ma per un blocco di testo/lista invece di un
   valore numerico: usato al posto di una testimonianza inventata quando la
   pagina descrive un prodotto reale di cui non abbiamo una citazione vera. */
.case-study-note {
  margin-top: var(--space-6);
  background: var(--white-07);
  border: 1px solid var(--white-12);
  border-radius: var(--radius-md);
  padding: var(--space-7);
}

.case-study-note__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: #fff;
  margin-bottom: var(--space-4);
}

.case-study-note__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.case-study-note__list li {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--white-60);
  padding-left: var(--space-5);
  position: relative;
}

.case-study-note__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-green-light);
}

.case-study-note__list strong {
  color: #fff;
}

/* Light variant — same note/list styling but for use inside a light section
   (e.g. .case-study-overview, which is off-white): the default colours above
   are tuned for a dark hero background and read as invisible white-on-white
   here. */
.case-study-note--light {
  background: #fff;
  border-color: rgba(11, 13, 12, 0.08);
}
.case-study-note--light .case-study-note__title { color: var(--text-dark); }
.case-study-note--light .case-study-note__list li { color: rgba(11, 13, 12, 0.65); }
.case-study-note--light .case-study-note__list strong { color: var(--text-dark); }
.case-study-note__text {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--white-60);
}
.case-study-note--light .case-study-note__text { color: rgba(11, 13, 12, 0.65); }

.case-study-hero__image {
  margin-top: var(--space-8);
  height: 480px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.case-study-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-study-overview {
  background: var(--color-off-white);
  border-top: 1px solid rgba(11, 13, 12, 0.08);
  border-bottom: 1px solid rgba(11, 13, 12, 0.08);
  padding: var(--space-11) 0;
}

.case-study-overview__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-9);
}

.case-study-overview__main {
  flex: 1 1 0;
  min-width: 0;
}

/* Each of the 4 narrative blocks (challenge/approach/solution/results,
   single-project.php) is an eyebrow tag followed by a .case-study-overview__body
   div — this class name is what the template actually outputs; a stale
   .case-study-overview__text rule here never matched it, so the blocks fell
   through to the sitewide `p { margin: 0 }` reset with the browser default
   line-height, landing them flush against each other with no room to
   breathe. margin-top here plus margin-top on every non-first eyebrow tag
   below gives each block real space above and below. */
.case-study-overview__body {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  line-height: 1.6;
  color: var(--text-dark);
  margin-top: var(--space-4);
  margin-bottom: var(--space-9);
}

.case-study-overview__body:last-child {
  margin-bottom: 0;
}

.case-study-overview__body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text-dark);
  margin: 0 0 var(--space-3);
}

.case-study-overview__body p {
  margin: 0;
}

.case-study-overview__body p + p {
  margin-top: var(--space-4);
}

.case-study-overview__main .tag--dark {
  margin-top: var(--space-9);
}

.case-study-overview__main .tag--dark:first-child {
  margin-top: 0;
}

.case-study-details {
  flex: 0 0 360px;
  background: #eee;
  border: 1px solid rgba(11, 13, 12, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.case-study-details__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--text-dark);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(11, 13, 12, 0.12);
}

.case-study-details__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.case-study-details__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-green);
}

.case-study-details__value {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-lg);
  color: var(--text-dark);
}

.case-study-gallery {
  background: var(--color-navy-black);
  padding: var(--space-11) 0;
}

.case-study-gallery__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 40px);
  letter-spacing: -0.02em;
  color: #fff;
  margin-top: var(--space-5);
}

.case-study-gallery__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.case-study-gallery__row {
  display: flex;
  gap: var(--space-6);
}

.case-study-gallery__img {
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.case-study-gallery__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-study-gallery__img--lg {
  height: 420px;
}

.case-study-gallery__img--sm {
  height: 260px;
}

.case-study-testimonial {
  background: var(--color-navy-black);
  padding: var(--space-12) 0;
}

.case-study-testimonial__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-7);
  text-align: center;
}

.case-study-testimonial__quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 38px);
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: #fff;
  max-width: 800px;
}

.case-study-testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.case-study-testimonial__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-green-light);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--color-navy-black);
}

.case-study-testimonial__author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.case-study-testimonial__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  color: #fff;
}

.case-study-testimonial__role {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 900px) {
  .case-study-overview__inner {
    flex-direction: column;
  }

  .case-study-details {
    flex: 1 1 auto;
    width: 100%;
  }

  .case-study-gallery__row {
    flex-direction: column;
  }

  .case-study-gallery__img--lg,
  .case-study-gallery__img--sm {
    height: 300px;
  }
}

@media (max-width: 640px) {
  .case-study-hero {
    padding-top: 140px;
  }

  .case-study-stats {
    flex-direction: column;
  }

  /* .case-study-stats__item's flex:1 1 200px sets a 200px flex-basis meant
     as a minimum WIDTH for the desktop row layout — but flex-basis follows
     the flex container's main axis, and .case-study-stats just switched to
     flex-direction:column above, so that same 200px got reapplied as a
     minimum HEIGHT instead, forcing every stat card to a flat 200px tall
     regardless of how little text is actually in it (e.g. "€300,000 / Max
     support (75% of costs)" leaves most of that box empty). Sizing to
     content instead, and bumping the text up to fill more of the width a
     single column now gives each card. */
  .case-study-stats__item {
    flex: none;
  }

  .case-study-stats__value {
    font-size: 32px;
  }

  .case-study-stats__label {
    font-size: var(--fs-lg);
  }

  .case-study-hero__image {
    height: 260px;
  }
}

/* ==========================================================================
   Get Funded page — Hero
   ========================================================================== */

.get-funded-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-navy-black);
  padding: 160px 0 80px;
  min-height: 580px;
  display: flex;
  align-items: center;
}

.get-funded-hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(500px circle at 78% -10%, rgba(0, 204, 106, 0.16), rgba(0, 0, 0, 0) 62%),
    radial-gradient(420px circle at -6% 55%, rgba(185, 195, 190, 0.07), rgba(0, 0, 0, 0) 62%),
    radial-gradient(360px circle at 60% 90%, rgba(0, 204, 106, 0.05), rgba(0, 0, 0, 0) 60%);
}

.get-funded-hero .container {
  position: relative;
  z-index: 1;
}

.get-funded-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #fff;
  margin: var(--space-6) 0 0;
}

.get-funded-hero__title span {
  display: block;
}

.get-funded-hero__title .is-gradient {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.26));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.get-funded-hero__text {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  line-height: 1.55;
  color: var(--white-80);
  max-width: 520px;
  margin: var(--space-2) 0 0;
}

.get-funded-hero__badges {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* ==========================================================================
   Get Funded page — Key Metrics
   ========================================================================== */

.get-funded-metrics {
  background: var(--color-off-white);
  padding: var(--space-11) 0;
}

.get-funded-metrics__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.get-funded-metrics__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-7);
}

.get-funded-metrics__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #141615;
  max-width: 540px;
}

.get-funded-metrics__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: 22px;
  color: #3a3d3b;
  max-width: 380px;
}

.get-funded-metrics__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-9);
}

.get-funded-metrics__item {
  flex: 1 1 220px;
  background: #fff;
  border: 1px solid rgba(11, 13, 12, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-7);
}

.get-funded-metrics__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--color-green);
}

.get-funded-metrics__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xl);
  color: #141615;
  margin-top: var(--space-4);
}

.get-funded-metrics__desc {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 18px;
  color: #3a3d3b;
  margin-top: 4px;
}

/* ==========================================================================
   Get Funded page — Eligible Programs
   ========================================================================== */

.get-funded-programs {
  background: var(--color-navy-black);
  border-top: 1px solid var(--white-07);
  border-bottom: 1px solid var(--white-07);
  padding: var(--space-11) 0;
}

.get-funded-programs__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.get-funded-programs__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #fff;
  max-width: 620px;
}

.get-funded-programs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-9);
}

.get-funded-program-card {
  background: var(--white-07);
  border: 1px solid var(--white-12);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  box-shadow: 0 40px 70px -35px rgba(0, 0, 0, 0.5);
}

.get-funded-program-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.get-funded-program-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: #fff;
}

.get-funded-program-card__amount {
  display: inline-flex;
  align-self: flex-start;
  background: rgba(106, 234, 128, 0.14);
  border: 0.5px solid var(--color-green-light);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-green-light);
}

.get-funded-program-card__eligibility {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.4;
  color: var(--white-50);
}

.get-funded-program-card__eligibility strong {
  font-weight: 600;
  color: #fff;
}

.get-funded-program-card__desc {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 20px;
  color: var(--white-60);
}

/* ==========================================================================
   Get Funded page — Process Steps
   ========================================================================== */

.get-funded-steps {
  background: var(--color-off-white);
  padding: var(--space-11) 0;
}

.get-funded-steps__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.get-funded-steps__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #141615;
}

.get-funded-steps__grid {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-9);
}

.get-funded-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.get-funded-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 32px;
  right: calc(var(--space-5) * -1);
  height: 1px;
  background: rgba(11, 13, 12, 0.12);
}

.get-funded-step__num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #fff;
  border: 1px solid var(--color-green);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--color-green);
}

.get-funded-step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: #141615;
}

.get-funded-step__desc {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 18px;
  color: #3a3d3b;
}

/* ==========================================================================
   Get Funded page — Success story
   ========================================================================== */

.get-funded-success {
  background: var(--color-navy-black);
  border-top: 1px solid var(--white-07);
  border-bottom: 1px solid var(--white-07);
  padding: var(--space-11) 0;
}

.get-funded-success__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.get-funded-success__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #fff;
}

.get-funded-success__card {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  background: var(--color-black-deep);
  border: 1px solid var(--white-12);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-top: var(--space-9);
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.get-funded-success__card:hover {
  transform: translateY(-4px);
  border-color: var(--white-26);
}

.get-funded-success__media {
  flex: 0 0 auto;
  width: 320px;
  height: 240px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-navy-black);
}

.get-funded-success__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.get-funded-success__body {
  flex: 1 1 0;
  min-width: 0;
}

.get-funded-success__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-green-light);
}

.get-funded-success__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: #fff;
  margin-top: var(--space-1);
}

.get-funded-success__desc {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: 22px;
  color: var(--white-50);
  margin-top: var(--space-4);
}

.get-funded-success__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--color-green-light);
}

.get-funded-success__link img {
  width: 12px;
  height: 12px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.get-funded-success__card:hover .get-funded-success__link img {
  transform: translateX(4px);
}

/* ==========================================================================
   Get Funded page — Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .get-funded-metrics__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .get-funded-metrics__subtitle {
    max-width: none;
  }

  .get-funded-programs__grid {
    grid-template-columns: 1fr;
  }

  /* At full column width on mobile these cards got a lot taller than their
     text needed (desktop copy sizes in a much wider column), leaving a big
     empty gap below the description. Scale the text up to use more of that
     width/height instead of shrinking the card down to fit it. */
  .get-funded-program-card__title {
    font-size: 32px;
  }

  .get-funded-program-card__amount {
    font-size: var(--fs-sm);
    padding: 6px 12px;
  }

  .get-funded-program-card__eligibility,
  .get-funded-program-card__desc {
    font-size: var(--fs-lg);
    line-height: 1.5;
  }

  .get-funded-steps__grid {
    flex-direction: column;
    gap: var(--space-7);
  }

  .get-funded-step:not(:last-child)::after {
    display: none;
  }

  .get-funded-success__card {
    flex-direction: column;
    align-items: stretch;
  }

  .get-funded-success__media {
    width: 100%;
    height: 220px;
  }
}

@media (max-width: 640px) {
  .get-funded-hero {
    padding-top: 140px;
  }
}

/* ==========================================================================
   Article page — Hero
   ========================================================================== */

.article-hero {
  position: relative;
  background: var(--color-navy-black);
  padding: 160px 0 0;
}

.article-hero__back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--white-60);
  transition: color 0.25s ease;
}

.article-hero__back:hover {
  color: #fff;
}

.article-hero__back img {
  width: 12px;
  height: 12px;
  /* la freccia diagonale punta in alto a destra (↗): ruotata di 270°
     punta in alto a sinistra (↖), coerente con "indietro" — 180° darebbe
     ↙, che punta ancora in avanti/in basso. */
  transform: rotate(270deg);
}

.article-hero .tag {
  margin-top: var(--space-6);
}

.article-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 860px;
  margin-top: var(--space-5);
}

.article-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-bottom: var(--space-9);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--white-60);
}

.article-hero__author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #fff;
  font-weight: 500;
}

.article-hero__avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--color-green-light);
  color: var(--color-navy-black);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-hero__divider {
  width: 1px;
  height: 12px;
  background: var(--white-26);
}

.article-hero__image {
  margin-top: var(--space-8);
  height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

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

/* ==========================================================================
   Article page — Body
   ========================================================================== */

.article-body {
  background: #fff;
  padding: var(--space-11) 0;
}

.article-body__inner {
  display: flex;
  gap: var(--space-9);
  align-items: flex-start;
}

.article-body__content {
  flex: 1 1 0;
  min-width: 0;
  max-width: 720px;
}

.article-body__lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  color: var(--text-dark);
}

.article-body__content p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: #3a3d3b;
  margin-top: var(--space-6);
}

.article-body__content h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin-top: var(--space-9);
}

.article-body__quote {
  margin: var(--space-8) 0;
  padding-left: var(--space-6);
  border-left: 3px solid var(--color-green-light);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.5vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-dark);
}

.article-body__figure {
  margin: var(--space-8) 0;
}

.article-body__figure img {
  width: 100%;
  border-radius: var(--radius-lg);
}

.article-body__figure figcaption {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: rgba(11, 13, 12, 0.5);
  margin-top: var(--space-2);
}

.article-body__share {
  flex: 0 0 auto;
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.article-body__share-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(11, 13, 12, 0.4);
}

.article-body__share-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.article-body__share-links a {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--color-off-white);
  border: 1px solid rgba(11, 13, 12, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.article-body__share-links a:hover {
  background: rgba(106, 234, 128, 0.14);
  border-color: var(--color-green-light);
}

.article-body__share-links img {
  width: 16px;
  height: 16px;
  /* le icone social sono bianche (pensate per lo sfondo scuro del footer):
     su questi cerchi chiari vanno invertite per restare visibili. */
  filter: invert(1);
}

/* ==========================================================================
   Article page — Related articles (riusa .blog__* di index.html)
   ========================================================================== */

.article-related {
  background: var(--color-off-white);
  border-top: 1px solid rgba(11, 13, 12, 0.08);
  padding: var(--space-11) 0;
}

/* .blog-card è un <article> in index.html ma un <a> qui: il reset sotto
   si applica solo quando serve (nessun effetto sull'uso come <article>). */
.blog-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

@media (max-width: 900px) {
  .article-hero__image {
    height: 280px;
  }

  .article-body__inner {
    flex-direction: column;
  }

  .article-body__content {
    max-width: none;
  }

  .article-body__share {
    position: static;
    flex-direction: row;
  }

  .article-body__share-links {
    flex-direction: row;
  }
}

/* ==========================================================================
   Cross-document view transition — insights.html <-> article.html
   Attiva solo su browser che supportano le view transition tra navigazioni
   (Chrome/Edge recenti, via <meta name="view-transition"> su entrambe le
   pagine): il nuovo articolo scorre da destra sopra la pagina precedente,
   che resta ferma sotto. Nei browser senza supporto è una navigazione
   normale, nessun fallback necessario.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: none;
  }

  ::view-transition-new(root) {
    animation: article-slide-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@keyframes article-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* ==========================================================================
   Legal pages — layout condiviso (privacy/terms/cookie policy)
   ========================================================================== */

.legal-hero__updated {
  margin-top: var(--space-5);
}

.legal-body {
  background: var(--color-off-white);
  padding: var(--space-11) 0;
}

.legal-body__inner {
  display: flex;
  gap: var(--space-9);
  align-items: flex-start;
}

.legal-toc {
  flex: 0 0 240px;
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.legal-toc__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(11, 13, 12, 0.4);
  margin-bottom: var(--space-3);
}

.legal-toc a {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: rgba(11, 13, 12, 0.55);
  padding: 8px 0 8px var(--space-4);
  border-left: 2px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.legal-toc a.is-active,
.legal-toc a:hover {
  color: var(--text-dark);
  border-left-color: var(--color-green-light);
}

.legal-content {
  flex: 1 1 0;
  min-width: 0;
  max-width: 720px;
}

.legal-summary {
  background: #fff;
  border: 1px solid rgba(11, 13, 12, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  margin-bottom: var(--space-9);
}

.legal-summary__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: var(--space-4);
}

.legal-summary ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.legal-summary li {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: #3a3d3b;
}

.legal-summary li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-green-light);
  margin-top: 8px;
  flex-shrink: 0;
}

.legal-cookie-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.legal-cookie-card {
  background: #fff;
  border: 1px solid rgba(11, 13, 12, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.legal-cookie-card__name {
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-green);
  background: rgba(0, 204, 106, 0.1);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}

.legal-cookie-card__desc {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: #3a3d3b;
  margin-top: var(--space-4);
}

.legal-cookie-card__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: rgba(11, 13, 12, 0.4);
  margin-top: var(--space-4);
}

@media (max-width: 640px) {
  .legal-cookie-grid {
    grid-template-columns: 1fr;
  }
}

.legal-section {
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}

.legal-section + .legal-section {
  margin-top: var(--space-9);
  padding-top: var(--space-9);
  border-top: 1px solid rgba(11, 13, 12, 0.08);
}

.legal-section__num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-green);
}

.legal-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin-top: var(--space-2);
}

.legal-section p {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: 1.75;
  color: #3a3d3b;
  margin-top: var(--space-5);
}

.legal-section ul {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.legal-section li {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: #3a3d3b;
  padding-left: var(--space-1);
}

.legal-section li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(11, 13, 12, 0.3);
  margin-top: 10px;
  flex-shrink: 0;
}

.legal-footnote {
  margin-top: var(--space-9);
  padding: var(--space-6);
  background: rgba(0, 204, 106, 0.06);
  border: 1px solid rgba(0, 204, 106, 0.2);
  border-radius: var(--radius-md);
}

.legal-footnote p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: rgba(11, 13, 12, 0.6);
}

.legal-footnote strong {
  color: var(--text-dark);
}

.legal-section p a,
.legal-summary li a {
  color: var(--color-green);
  text-decoration: underline;
  text-decoration-color: rgba(0, 204, 106, 0.35);
  text-underline-offset: 2px;
  transition: color 0.25s ease;
}

.legal-section p a:hover,
.legal-summary li a:hover {
  color: var(--color-green-light);
}

@media (max-width: 900px) {
  .legal-body__inner {
    flex-direction: column;
  }

  .legal-toc {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    width: 100%;
  }

  .legal-toc__label {
    width: 100%;
    margin-bottom: 0;
  }

  .legal-toc a {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-1) 0;
  }

  .legal-toc a.is-active,
  .legal-toc a:hover {
    border-left-color: transparent;
    border-bottom-color: var(--color-green-light);
  }

  .legal-content {
    max-width: none;
  }
}

/* ==========================================================================
   Header — dropdown "Software" (mega menu)
   Il trigger non punta più a nessuna pagina propria (la pagina generica
   software.html è stata rimossa): è un <button> che apre un mega menu a
   tutta larghezza (stile relats.com/products) con le sotto-sezioni in
   grande, mentre il resto della pagina si scurisce e sfoca dietro (scrim
   fisso).
   ========================================================================== */

/* Altezza piena della fascia header (non solo il testo del link): così
   l'hover resta continuo dal trigger fino al bordo dell'header, senza una
   "terra di nessuno" da attraversare prima di raggiungere il mega menu
   sottostante (che comincia esattamente a quel bordo). */
.site-header__dropdown {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--nav-height);
}

.site-header__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* È un <button>, non un <a>: reset dello stile nativo così resta
     identico agli altri link del nav. */
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.site-header__dropdown-chevron {
  width: 10px;
  height: 10px;
  transition: transform 0.25s ease;
}

.site-header__dropdown:hover .site-header__dropdown-chevron,
.site-header:has(.site-header__mega:hover) .site-header__dropdown-chevron,
.site-header.is-kb-open .site-header__dropdown-chevron,
.site-header.is-hover-open .site-header__dropdown-chevron {
  transform: rotate(180deg);
}

/* Mega + scrim sono figli diretti di <header>, non di .site-header__dropdown:
   .site-header.is-scrolled .container ha un backdrop-filter, e qualunque
   filter/backdrop-filter su un antenato diventa il containing block dei
   discendenti position:fixed — annidare mega/scrim dentro .container li
   avrebbe intrappolati nella larghezza della pillola invece che nell'intero
   viewport. Stando fuori da .container evitano il problema; lo stato
   "aperto" si rileva quindi con :has() (per l'hover) invece che con
   discendente/sibling diretto (il trigger resta annidato in
   .site-header__dropdown). Per l'apertura da tastiera invece :has() +
   :focus-within NON si è dimostrato affidabile in test — vedi
   initMegaMenuKeyboardNav in main.js, che gestisce quel caso con la
   classe .is-kb-open applicata via JS. */
.site-header__mega-scrim {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 6, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s;
}

.site-header:has(.site-header__dropdown:hover) .site-header__mega-scrim,
.site-header:has(.site-header__mega:hover) .site-header__mega-scrim,
.site-header.is-kb-open .site-header__mega-scrim,
.site-header.is-hover-open .site-header__mega-scrim {
  opacity: 1;
  visibility: visible;
}

.site-header__mega {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  z-index: 95;
  padding: var(--space-10) 0;
  opacity: 0;
  visibility: hidden;
  /* Always none, even while open (see .site-header__mega-inner below) — this
     outer box spans the full viewport width (left/right: 0) so its visible
     content can stay centred, but that left it as a full-width, real hit box
     whenever it had pointer-events:auto. That meant :hover/:has() below, and
     the mouseenter/mouseleave pair in initMegaMenuHoverIntent (theme-core.js)
     that key off hovering .site-header__mega, stayed satisfied by the cursor
     sitting ANYWHERE at the panel's vertical band — including the empty
     padding either side of the actual centred menu — not just the visible
     menu itself. That's what made "move the mouse away and it should close"
     fail: sliding sideways off the links but still within that band never
     counted as having left. */
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}

/* .is-hover-open is the same "force open" escape hatch as .is-kb-open, set
   by initMegaMenuHoverIntent (theme-core.js) for a brief grace period after
   the mouse leaves the trigger/panel — see that function for why plain
   :hover/:has() closes the instant a diagonal path toward a link crosses
   outside both boxes. */
.site-header:has(.site-header__dropdown:hover) .site-header__mega,
.site-header:has(.site-header__mega:hover) .site-header__mega,
.site-header.is-kb-open .site-header__mega,
.site-header.is-hover-open .site-header__mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Non usa la classe .container condivisa: quel selettore, dentro
   .site-header, prende anche .site-header.is-scrolled .container (più
   specifico) che imporrebbe la larghezza ridotta della pillola e un
   layout space-between pensato per il logo/nav, non per questo menu. */
.site-header__mega-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
  /* The actual real hit box for the menu — see the comment on
     .site-header__mega above. Only this centred content (not the full-width
     outer padding either side of it) can be hovered/clicked. */
  pointer-events: auto;
}

/* Anteprima a sinistra del menu "Software": una slide per sotto-pagina
   (data-page = stesso valore dell'href del link a fianco), mostrata/
   nascosta via crossfade in base a quale link del menu è in hover/focus
   (vedi initMegaMenuPreview in main.js). Immagini attuali sono mockup
   placeholder generici (screenshot di altri progetti), da sostituire con
   uno screenshot reale per ciascuna sotto-pagina quando disponibile. */
.site-header__mega-preview {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 480px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Niente riquadro visibile finché nessuna slide è attiva: bordo/sfondo
     sono trasparenti di default e compaiono solo insieme all'immagine
     (vedi :has() sotto), altrimenti quel lato mostrerebbe un box scuro
     vuoto anche senza hover. Lo spazio resta comunque riservato (niente
     display:none) per non far "saltare" l'elenco dei link a fianco. */
  border: 1px solid transparent;
  background: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.site-header__mega-preview:has(.site-header__mega-preview-slide.is-active) {
  border-color: var(--white-12);
  background: #111312;
}

.site-header__mega-preview-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.site-header__mega-preview-slide.is-active {
  opacity: 1;
}

.site-header__mega-preview-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-header__mega-col {
  width: 100%;
  max-width: 420px;
  flex-shrink: 0;
}

.site-header__mega-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: var(--space-5);
}

.site-header__mega-list {
  display: flex;
  flex-direction: column;
}

.site-header__mega-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--white-07);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--white-60);
  transition: color 0.25s ease, padding-left 0.25s ease;
}

.site-header__mega-list a::after {
  content: '';
  width: 14px;
  height: 14px;
  background-image: url("../img/icon-arrow-diagonal-green.svg");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.site-header__mega-list a:hover,
.site-header__mega-list a:focus-visible {
  color: #fff;
  padding-left: var(--space-3);
}

.site-header__mega-list a:hover::after,
.site-header__mega-list a:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .site-header__dropdown-chevron,
  .site-header__mega,
  .site-header__mega-scrim {
    transition: opacity 0.15s ease, visibility 0.15s;
  }

  .site-header__mega-preview-slide {
    transition: none;
  }
}

/* ==========================================================================
   Header — menu mobile (hamburger + cassetto + accordion "Software")
   A ≤640px .site-header__nav resta nascosto (vedi media query più sopra):
   qui c'è la sua sostituzione pensata per il tocco. Il mega menu desktop
   (fixed, aperto via :hover/:has()) non è stato riadattato al mobile — è
   troppo legato al hover; qui i 6 link "Software" sono un accordion in
   linea, stesso pattern grid-template-rows di .faq-item__panel. Cassetto e
   scrim sono figli diretti di <header>, come .site-header__mega, per lo
   stesso motivo (containing block di .site-header.is-scrolled .container).
   ========================================================================== */

.site-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.site-header__burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.site-header__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__burger.is-open span:nth-child(2) { opacity: 0; }
.site-header__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-header__mobile-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(5, 6, 6, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.site-header__mobile-scrim.is-open {
  opacity: 1;
  visibility: visible;
}

.site-header__mobile-nav {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  background: var(--color-navy-black);
  border-top: 1px solid var(--white-12);
  padding: var(--space-2) var(--space-6) var(--space-6);
  max-height: calc(100vh - var(--nav-height));
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.site-header__mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-header__mobile-nav > a,
.site-header__mobile-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4) 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--white-60);
  border: none;
  border-bottom: 1px solid var(--white-07);
  background: none;
  text-align: left;
  cursor: pointer;
}

.site-header__mobile-nav > a:hover,
.site-header__mobile-nav > a[aria-current="page"],
.site-header__mobile-accordion-trigger:hover {
  color: #fff;
}

.site-header__mobile-accordion-trigger .site-header__dropdown-chevron {
  width: 10px;
  height: 10px;
  transition: transform 0.25s ease;
}

.site-header__mobile-accordion-trigger[aria-expanded="true"] .site-header__dropdown-chevron {
  transform: rotate(180deg);
}

.site-header__mobile-accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.site-header__mobile-accordion.is-open .site-header__mobile-accordion-panel {
  grid-template-rows: 1fr;
}

.site-header__mobile-accordion-panel-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.site-header__mobile-accordion-panel a {
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--white-50);
}

.site-header__mobile-accordion-panel a:hover,
.site-header__mobile-accordion-panel a[aria-current="page"] {
  color: #fff;
}

.site-header__mobile-nav .btn {
  margin-top: var(--space-5);
  justify-content: center;
}

@media (min-width: 641px) {
  .site-header__burger,
  .site-header__mobile-nav,
  .site-header__mobile-scrim {
    display: none !important;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .site-header__burger span,
  .site-header__mobile-scrim,
  .site-header__mobile-nav,
  .site-header__mobile-accordion-trigger .site-header__dropdown-chevron,
  .site-header__mobile-accordion-panel {
    transition: none;
  }
}

/* ==========================================================================
   Software vertical pages (Websites & Apps / Importation / Tax / Insurance /
   Hospitals / Petrol Stations) — componenti condivisi. Struttura ispirata a
   una pagina prodotto (hero, feature grid, deep-dive, stats+testimonial,
   pacchetti, FAQ, form richiesta demo) riusando il più possibile i
   componenti già esistenti (case-study-stats, case-study-testimonial,
   faq-item, contact-form). Vedi initDemoForm in main.js per il form.
   ========================================================================== */

.vertical-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-navy-black);
  padding: 160px 0 80px;
}

.vertical-hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(600px 600px at 82% -15%, rgba(0, 204, 106, 0.16), rgba(0, 0, 0, 0) 60%),
    radial-gradient(500px 500px at 5% 10%, rgba(185, 195, 190, 0.07), rgba(0, 0, 0, 0) 60%);
}

.vertical-hero .container {
  position: relative;
  z-index: 1;
}

.vertical-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 760px;
  margin-top: var(--space-6);
}

.vertical-hero__text {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  line-height: 1.55;
  color: var(--white-80);
  max-width: 560px;
  margin-top: var(--space-5);
}

.vertical-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

/* -------------------------------------------------------------- */
/* Feature overview — griglia icona + titolo + descrizione         */
/* -------------------------------------------------------------- */

.feature-overview {
  background: var(--color-off-white);
  padding: var(--space-11) 0;
}

.feature-overview__head {
  max-width: 640px;
}

.feature-overview__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.03em;
  color: #141615;
  margin-top: var(--space-4);
}

.feature-overview__text {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: #3a3d3b;
  margin-top: var(--space-4);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-9);
}

.feature-card {
  background: #fff;
  border: 1px solid rgba(11, 13, 12, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 204, 106, 0.35);
  box-shadow: 0 16px 28px rgba(11, 13, 12, 0.1);
}

/* Una card "featured" per rompere la griglia di 6 riquadri identici —
   stessa estetica scura a bordo verde di .case-study-stats__item. */
.feature-card--featured {
  background: #111312;
  border-color: rgba(106, 234, 128, 0.35);
  box-shadow: 0 4px 8px rgba(106, 234, 128, 0.14);
}

.feature-card--featured:hover {
  border-color: rgba(106, 234, 128, 0.6);
  box-shadow: 0 16px 28px rgba(106, 234, 128, 0.22);
}

.feature-card--featured .feature-card__icon {
  background: rgba(106, 234, 128, 0.16);
}

.feature-card--featured .feature-card__title {
  color: #fff;
}

.feature-card--featured .feature-card__desc {
  color: rgba(255, 255, 255, 0.7);
}

.feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(0, 204, 106, 0.1);
  transition: background 0.3s ease;
}

.feature-card__icon img {
  width: 20px;
  height: 20px;
}

.feature-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: #141615;
  margin-top: var(--space-4);
}

.feature-card__desc {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: #3a3d3b;
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------- */
/* Feature line — galleria orizzontale ancorata (pinned): .feature-line__ */
/* stage resta ancorata mentre .feature-line__wrap (un unico nastro con   */
/* la linea + le 5 card) trasla in orizzontale in sincrono 1:1 con lo      */
/* scroll verticale (transform:translateX, initFeatureLineDraw in         */
/* main.js) — nessuna animazione a tempo fisso, quindi resta fermabile in */
/* ogni istante. Una card alla volta è a fuoco, le successive entrano da   */
/* destra insieme al tratto di linea che le collega. Stessa logica di     */
/* progress di .work-stack/.software-showcase, applicata a un transform   */
/* continuo invece che a un indice discreto.                             */
/* --------------------------------------------------------------------- */

.feature-line {
  background: var(--color-off-white);
  padding: 0 0 var(--space-11);
}

.feature-line__head {
  flex-shrink: 0;
  max-width: 640px;
  margin: 0 auto;
  padding-top: var(--space-11);
  text-align: center;
}

.feature-line__scroll {
  position: relative;
}

.feature-line__stage {
  position: sticky;
  top: 0;
  height: min(94vh, 820px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.feature-line__wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 500%;
  margin-top: var(--space-7);
  will-change: transform;
}

.feature-line__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.feature-line__track {
  fill: none;
  stroke: rgba(11, 13, 12, 0.12);
  stroke-width: 2.5;
  stroke-linecap: round;
  /* NIENTE vector-effect:non-scaling-stroke qui: combinato con il
     transform:translateX() del genitore (.feature-line__wrap) fa
     "impazzire" il calcolo di stroke-dasharray/dashoffset — il tratto
     verde risultava invisibile anche quando avrebbe dovuto coprire metà
     del percorso visibile. */
}

.feature-line__draw {
  fill: none;
  stroke: var(--color-green);
  stroke-width: 2.5;
  stroke-linecap: round;
  /* stroke-dasharray/dashoffset impostati via JS in base alla lunghezza
     reale del path e allo stesso progress dello scorrimento orizzontale
     (initFeatureLineDraw), così il verde "riempie" la linea man mano che
     il nastro avanza verso la card successiva. */
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
}

.feature-line__point {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 380px;
}

.feature-line__point--below {
  flex-direction: column-reverse;
}

.feature-line__card {
  background: #fff;
  border: 1px solid rgba(11, 13, 12, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  text-align: center;
  box-shadow: 0 24px 48px -24px rgba(11, 13, 12, 0.25);
}

.feature-line__point--above .feature-line__card {
  margin-bottom: var(--space-4);
}

.feature-line__point--below .feature-line__card {
  margin-top: var(--space-4);
}

.feature-line__card .feature-card__title {
  font-size: clamp(20px, 1.8vw, 24px);
  margin-top: 0;
}

.feature-line__card--featured {
  background: #111312;
  border-color: rgba(106, 234, 128, 0.35);
}

.feature-line__card--featured .feature-card__title {
  color: #fff;
}

.feature-line__card--featured .feature-card__desc {
  color: rgba(255, 255, 255, 0.7);
}

/* Below 900px the horizontal pinned gallery (curved SVG path, cards
   scrolling by sideways) doesn't translate to a narrow screen, so it used
   to fall back to every card just stacked statically, all visible at
   once — asked to instead become the same pinned one-at-a-time crossfade
   used for the home "Our services" section: .feature-line__scroll/__stage
   keep the desktop sticky-pin mechanism (JS gives __scroll a tall,
   n*62vh-driven height for scroll room instead of the desktop 500vh),
   __wrap stops translating horizontally and instead holds the cards in a
   plain stack, and .feature-line__point (one per card already, from the
   PHP loop) crossfades via translateY + is-active exactly like
   .work-card/.service-item. See initFeatureLineMobileHighlight,
   sequences.js — initFeatureLineDraw (the desktop horizontal-scroll
   engine) already stands itself down below 900px on its own. */
@media (max-width: 900px) {
  .feature-line {
    padding-bottom: 0;
  }

  .feature-line__stage {
    top: var(--nav-height);
    height: 100vh;
    max-height: 720px;
  }

  .feature-line__wrap {
    position: relative;
    width: 100%;
    transform: none !important;
  }

  .feature-line__svg {
    display: none;
  }

  .feature-line__point {
    /* Each point also carries an inline style="left:X%;top:Y%" (PHP,
       positioning it along the desktop curve) — inline always wins over a
       stylesheet rule for the same property regardless of specificity, so
       inset:0 alone only actually applied to right/bottom; left/top kept
       the inline curve percentages, leaving the box's top-left corner
       wherever that card's point happened to sit on the curve instead of
       the stage's actual top-left — a shifted, undersized box that cut
       the card off and left it looking uncentered. !important is the only
       way to beat an inline style. */
    position: absolute !important;
    inset: 0 !important;
    transform: translateY(100%);
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    flex-direction: column;
    width: 100%;
    margin-top: 0;
    justify-content: center;
    pointer-events: none;
  }

  .feature-line__point.is-active {
    transform: translateY(0);
    pointer-events: auto;
  }

  .feature-line__point:nth-child(1) { z-index: 1; }
  .feature-line__point:nth-child(2) { z-index: 2; }
  .feature-line__point:nth-child(3) { z-index: 3; }
  .feature-line__point:nth-child(4) { z-index: 4; }
  .feature-line__point:nth-child(5) { z-index: 5; }

  .feature-line__point--above .feature-line__card,
  .feature-line__point--below .feature-line__card {
    margin: 0;
  }

  .feature-line__card {
    min-height: 280px;
    width: 100%;
    box-sizing: border-box;
  }
}

/* Con prefers-reduced-motion niente pin/scroll orizzontale: stessa
   fallback statica della vista mobile, ma su qualunque viewport — senza
   questa regola le card 2-5 resterebbero irraggiungibili (il transform
   che le scorre in vista non parte mai, initFeatureLineDraw esce subito). */
@media (prefers-reduced-motion: reduce) {
  .feature-line__stage {
    position: static;
    height: auto;
    display: block;
  }

  .feature-line__wrap {
    width: 100%;
    height: auto;
    transform: none !important;
  }

  .feature-line__svg {
    display: none;
  }

  .feature-line__point {
    position: static;
    transform: none;
    width: 100%;
    margin-top: var(--space-7);
  }

  .feature-line__point--above .feature-line__card,
  .feature-line__point--below .feature-line__card {
    margin: 0;
  }
}

/* -------------------------------------------------------------- */
/* Deep-dive — testo + immagine affiancati, direzione alternabile  */
/* -------------------------------------------------------------- */

.vertical-split {
  padding: var(--space-11) 0;
  /* Promotes this section to its own GPU layer. Directly after the pinned
     .feature-line gallery (single-product.php "showcase" layout) — which
     churns its own compositing layer every scroll frame via
     .feature-line__wrap's will-change:transform — Chromium sometimes fails
     to repaint this section for a frame or more right as it scrolls into
     view, leaving a blank flash of the page's off-white background where
     this section (dark or light) should already be visible. Giving it a
     stable layer of its own avoids sharing/fighting over the same one. */
  will-change: transform;
  transform: translateZ(0);
}

.vertical-split--dark {
  background: var(--color-navy-black);
}

.vertical-split--light {
  background: #fff;
}

.vertical-split__inner {
  display: flex;
  align-items: center;
  gap: var(--space-9);
}

.vertical-split--reverse .vertical-split__inner {
  flex-direction: row-reverse;
}

.vertical-split__text {
  flex: 1 1 0;
  min-width: 0;
}

.vertical-split__media {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  /* aspect-ratio impostato via JS (initMediaAspectFit in main.js) in base
     alle dimensioni naturali dell'immagine caricata — niente ritaglio,
     qualunque sia lo screenshot. Valore qui sotto è solo il fallback.
     max-height era 360px (poi min(560px,70vh)): con aspect-ratio impostato,
     un tetto d'altezza fisso o comunque basso forza il browser a restringere
     anche la LARGHEZZA ben sotto la metà colonna disponibile — per un'
     immagine RITRATTO (es. service-right-panel-*.jpg, 2000×2500 = rapporto
     4:5) qualunque tetto sotto ~700px la strozza parecchio, visto che la
     larghezza risultante è altezza × 0.8. Un tetto solo legato al viewport
     (niente valore fisso in px) lascia che sia la larghezza della colonna
     flex a guidare le dimensioni per qualunque rapporto, intervenendo solo
     per immagini davvero estreme. */
  aspect-ratio: 4 / 3;
  max-height: 80vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

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

.vertical-split__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 36px);
  letter-spacing: -0.02em;
  margin-top: var(--space-4);
}

.vertical-split--dark .vertical-split__title {
  color: #fff;
}

.vertical-split--light .vertical-split__title {
  color: #141615;
}

.vertical-split__text > p.vertical-split__desc {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: 1.6;
  margin-top: var(--space-4);
}

.vertical-split--dark .vertical-split__desc {
  color: var(--white-60);
}

.vertical-split--light .vertical-split__desc {
  color: #3a3d3b;
}

.vertical-split__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.vertical-split__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.4;
}

.vertical-split--dark .vertical-split__list li {
  color: var(--white-80);
}

.vertical-split--light .vertical-split__list li {
  color: #3a3d3b;
}

.vertical-split__list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-green-light);
  margin-top: 7px;
  flex-shrink: 0;
}

/* Variante impilata: due (o più) .vertical-split__text si susseguono in
   crossfade scorrendo — il successivo RIMPIAZZA per intero il precedente
   invece di due sezioni separate in flusso normale — mentre l'immagine
   resta fissa (sticky) di fianco. Altezza dello stack impostata via JS
   (initVerticalSplitStack in main.js) in base al numero di step. Stessa
   tecnica di .work-stack (home) / .software-showcase. */
.vertical-split--stacked .vertical-split__stack {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.vertical-split--stacked .vertical-split__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.vertical-split--stacked .vertical-split__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateY(100%);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.vertical-split--stacked .vertical-split__text.is-active {
  transform: translateY(0);
  pointer-events: auto;
}

.vertical-split--stacked .vertical-split__text:nth-child(1) { z-index: 1; }
.vertical-split--stacked .vertical-split__text:nth-child(2) { z-index: 2; }

/* Stesso identico meccanismo dello .vertical-split__stage del testo
   (sticky, top:0, alto 100vh, contenuto centrato via align-items) invece di
   un "top" fisso o di un top:50vh+translateY(-50%): quest'ultimo si
   agganciava solo DOPO che la posizione naturale attraversava la soglia dei
   50vh, quindi per una parte dello scroll (appena la sezione entra, o
   appena prima che stacchi in fondo) l'immagine non era affatto centrata —
   esattamente il disallineamento segnalato. Qui invece l'immagine si
   aggancia in alto (soglia 0) ESATTAMENTE come il testo, quindi resta
   centrata per tutta la durata dello scroll, non solo a metà. max-height/
   aspect-ratio (che altrimenti limiterebbero questo riquadro a 360px) sono
   spostati sull'<img> qui sotto: il riquadro sticky deve poter essere alto
   100vh, mentre l'immagine vera e propria resta piccola e centrata dentro. */
.vertical-split--stacked .vertical-split__media {
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: none;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  align-self: flex-start;
  overflow: visible;
}

.vertical-split--stacked .vertical-split__media img {
  height: auto;
  /* This 360px cap — not the .vertical-split__media container edits made
     earlier — is what was actually governing every product page's image
     size: haystack_seed_product_standard() (seed-products.php) hardcodes
     every product to layout_style 'showcase', so the non-stacked
     .vertical-split__media rules above are currently unused dead code for
     every product on the site. Confirmed live via devtools on
     /products/petrol-stations/: the rendered element was
     .vertical-split--stacked, computed max-height 360px. Raised so the
     image can actually use the 100vh sticky panel it sits in. */
  max-height: 70vh;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: var(--radius-lg);
}

@media (prefers-reduced-motion: reduce) {
  .vertical-split--stacked .vertical-split__text {
    transition: none;
  }
}

@media (max-width: 900px) {
  .vertical-split--stacked .vertical-split__stack {
    height: auto !important;
  }

  .vertical-split--stacked .vertical-split__stage {
    position: static;
    height: auto;
    display: block;
  }

  .vertical-split--stacked .vertical-split__text {
    position: static;
    inset: auto;
    transform: none;
    transition: none;
    pointer-events: auto;
  }

  .vertical-split--stacked .vertical-split__text + .vertical-split__text {
    margin-top: var(--space-9);
  }

  .vertical-split--stacked .vertical-split__media {
    position: static;
    top: auto;
    height: auto;
    max-height: 360px;
    aspect-ratio: 4 / 3;
    display: block;
    overflow: hidden;
    transform: none;
  }

  .vertical-split--stacked .vertical-split__media img {
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
  }
}

/* -------------------------------------------------------------- */
/* Pacchetti (placeholder — non prezzi reali/vincolanti)           */
/* -------------------------------------------------------------- */

.pricing {
  background: var(--color-off-white);
  padding: var(--space-11) 0;
}

.pricing__head {
  max-width: 640px;
}

.pricing__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.03em;
  color: #141615;
  margin-top: var(--space-4);
}

.pricing__note {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: rgba(11, 13, 12, 0.5);
  margin-top: var(--space-4);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-9);
}

.pricing-card {
  background: #fff;
  border: 1px solid rgba(11, 13, 12, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
}

.pricing-card--featured {
  background: var(--color-navy-black);
  border-color: var(--color-green-light);
  box-shadow: 0 20px 40px -20px rgba(0, 204, 106, 0.3);
}

.pricing-card__name {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-green);
}

.pricing-card--featured .pricing-card__name {
  color: var(--color-green-light);
}

.pricing-card__range {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: #141615;
  margin-top: var(--space-3);
}

.pricing-card--featured .pricing-card__range {
  color: #fff;
}

.pricing-card__desc {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: #3a3d3b;
  margin-top: var(--space-2);
}

.pricing-card--featured .pricing-card__desc {
  color: var(--white-60);
}

.pricing-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
  flex: 1;
}

.pricing-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.4;
  color: #3a3d3b;
}

.pricing-card--featured .pricing-card__list li {
  color: var(--white-80);
}

.pricing-card__list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-green-light);
  margin-top: 7px;
  flex-shrink: 0;
}

.pricing-card .btn {
  margin-top: var(--space-7);
  width: 100%;
  justify-content: center;
}

@media (max-width: 900px) {
  .vertical-split__inner,
  .vertical-split--reverse .vertical-split__inner {
    flex-direction: column;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  /* Below 900px, .feature-grid stops being a static 3-column (already
     1-column below this breakpoint on narrower content anyway) grid and
     becomes a pinned stack instead — one card fills the screen, the next
     replaces it on scroll, same technique as .service-list/.service-item
     (initFeatureGridHighlight, sequences.js). .feature-grid-stack/__pin
     are unstyled, layout-inert wrapper divs above this breakpoint. */
  .feature-grid-stack {
    position: relative;
    margin-top: var(--space-9);
  }

  .feature-grid-pin {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-6));
  }

  .feature-grid {
    display: block;
    position: relative;
    height: 320px;
    overflow: hidden;
    margin-top: 0;
  }

  .feature-card {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
  }

  .feature-card.is-active {
    pointer-events: auto;
  }

  .feature-card:hover {
    transform: none;
  }
}