/* =========================================================
   Feruglio Engineering — Berlin 2026 landing
   Variante colore 1 (oro). Per la variante 2 basta
   ridefinire i token in :root — vedi blocco THEME.
   ========================================================= */

/* ---------- FONTS ---------- */
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("fonts/roboto-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("fonts/roboto-latin-900-normal.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* ---------- THEME ---------- */
:root{
  /* colori */
  --brand:#5B3900;
  --ink:#5B3900;
  --white:#fff;
  --dark:#2F2B32;          /* card prodotto + badge header */
  --footer-bg:#33253C;   /* dal Figma */
  --rule:#5B3900;
  --rule-light:rgba(255,255,255,.4);
  --gold-gradient:
    radial-gradient(120% 100% at 88% 6%, #FFB000 0%, rgba(255,176,0,0) 58%),
    radial-gradient(120% 110% at 10% 80%, #B87400 0%, rgba(184,116,0,0) 62%),
    linear-gradient(135deg,#7A4A00 0%,#5B3600 40%,#2E1B00 100%);

  /* tipografia */
  --font-display:"IBM Plex Sans",system-ui,sans-serif;
  --font-body:"Roboto",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  --fs-h1:clamp(2.25rem,1.05rem + 4.9vw,4.375rem);      /* 36 → 70 */
  --lh-h1:1.03;
  --fs-h2:clamp(1.625rem,1.02rem + 2.5vw,2.5rem);       /* 26 → 40 */
  --fs-display:clamp(2.5rem,1.5rem + 4.1vw,4rem);       /* 40 → 64 */
  --fs-card:clamp(1.375rem,1.15rem + .7vw,1.625rem);    /* 22 → 26 */
  --fs-contact:clamp(2.25rem,1.9rem + 1.4vw,3rem);      /* 36 → 48 */
  --fs-q:clamp(1rem,.78rem + .9vw,1.5rem);              /* 16 → 24 */
  --fs-lead:clamp(1rem,.93rem + .3vw,1.25rem);          /* 16 → 20 */
  --fs-body:1rem;
  --fs-small:clamp(.8125rem,.77rem + .18vw,1.125rem);   /* 13 → 18 */
  --fs-mono:.875rem;

  /* layout */
  --gutter:clamp(1rem,.6rem + 1.6vw,1.5rem);
  --maxw:100000px;   /* nessun limite: i contenuti riempiono lo schermo,
                        con i soli margini fissi del gutter su ogni larghezza */
}

.hidden-fields-container {
  display: none!important;
}
.content_wrapper {
  padding-top: 80px;
  max-width: 48rem;
  padding-inline: 24px;
  margin-inline: auto;
  margin-bottom: 80px;
  .wp-block-paragraph {
    margin-bottom: 10px;
  }
  .wp-block-heading {
    margin-top: 20px;
    margin-bottom: 4px;
  }
  .wp-block-list {
    margin-bottom: 20px;
    list-style: disc;
    padding-left: 20px;
  }
  .title {
    font-weight: 100;
    color: #000;
    font-size: 2.5em;
    text-transform: uppercase;
    font-family:var(--font-display);
    display: inline-block;
    padding-top: 10px;
    margin-bottom: 40px;
  }
  @media (max-width:767px){
    .title {
      font-size: 2em;
    }
  }
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.4;
  -webkit-font-smoothing:antialiased;
  /* clip e non hidden: hidden creerebbe un contenitore di scroll
     e romperebbe il position:sticky dell'hero */
  overflow-x:clip;
}
img{max-width:100%;display:block;height:auto}
h1,h2,h3,p,figure,address{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
address{font-style:normal}

:where(a,button,input,textarea,summary):focus-visible{
  outline:2px solid currentColor;outline-offset:3px;border-radius:2px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--white);color:var(--brand);padding:.75rem 1rem;font-weight:900;
}
.skip-link:focus{left:0}

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

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

.container{width:100%;max-width:calc(var(--maxw) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- SHAPES: badge e bottoni tagliati in diagonale ---------- */
.tag{
  --slant:18px;
  display:inline-flex;align-items:center;gap:.5rem;
  height:34px;padding:0 calc(var(--slant) + 8px);
  font-family:var(--font-body);font-size:.8125rem;line-height:1;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  clip-path:polygon(var(--slant) 0,100% 0,calc(100% - var(--slant)) 100%,0 100%);
}
.tag--dark{background:var(--dark);color:var(--white);font-family:var(--font-mono);font-weight:300;letter-spacing:.02em}
.tag--cta{background:var(--white);color:var(--brand);font-weight:900;letter-spacing:.03em}
.tag--solid{background:var(--brand);color:var(--white);font-weight:900;letter-spacing:.03em}
.site-header.is-solid .tag--cta{background:var(--brand);color:var(--white)}
.site-header.is-solid .tag--cta:hover{background:#7a4d00}
.tag--solid:hover,.tag--solid:focus-visible{background:#7a4d00}
.tag--cta:hover,.tag--cta:focus-visible{background:#f2e8d8}
.dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5;flex:none}

/* ---------- HEADER (Figma: blocco 0→80, riga contenuti 48px a y=19) ----------
   Fisso in cima. Sopra l'hero è trasparente con logo bianco; quando il
   pannello bianco lo raggiunge diventa opaco e passa al colore brand,
   altrimenti il logo bianco sparirebbe sul fondo chiaro. */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding-top:11px;border-bottom:1px solid var(--rule-light);
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.site-header.is-solid{
  background:var(--white);
  border-bottom-color:rgba(91,57,0,.18);
  box-shadow:0 2px 16px rgba(46,27,0,.06);
}
.site-header__inner{
  width:100%;max-width:calc(var(--maxw) + var(--gutter)*2);margin-inline:auto;
  padding:8px var(--gutter) 13px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:48px;
}
.logo{display:flex;align-items:center;flex:none;color:var(--white);transition:color .3s ease}
.site-header.is-solid .logo{color:var(--brand)}
/* il logo è una maschera, non un'immagine: così cambia colore con
   l'header senza dover caricare due file diversi */
/* il logo è SVG in linea con fill="currentColor": segue il colore
   dell'header e funziona anche aprendo il file in locale, dove le
   maschere CSS con SVG esterni vengono bloccate dal browser */
.logo__img{display:block;height:39px;width:auto}
.logo__img--full{width:195px}
.logo__img--mark{display:none;width:38px}
.header-actions{display:flex;align-items:center}
.header-actions .tag--dark{margin-right:-18px}
.tag__short{display:none}

/* ---------- HERO ----------
   Il frame Figma è 1280×1593. Il treno è largo quanto il viewport e
   non viene mai tagliato: l'altezza dell'hero non scende mai sotto
   la posizione del treno + la sua altezza. */
.hero{
  --art-top:min(26.64vw,341px);   /* y=341 su 1280 */
  --art-h:71.09vw;                /* rapporto del treno intero: 1820/2560 */
  --hero-h:max(min(124.45vw,1593px), calc(var(--art-top) + var(--art-h) + 6vw));
  /* si blocca quando il suo fondo tocca il fondo dello schermo.
     Con sticky serve un top negativo: `bottom` tirerebbe l'elemento
     verso l'alto invece di fissarlo. Il valore esatto lo riscrive
     app.js sull'altezza reale, questo è il fallback senza JS. */
  position:sticky;
  top:min(0px, calc(100svh - var(--hero-h)));
  z-index:0;
  color:var(--white);isolation:isolate;
  background:#4A2C00;
  padding-top:80px;padding-bottom:min(190px,14.8vw);
  min-height:var(--hero-h);
}
.hero__art{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}

/* ---- gradiente oro ricostruito in CSS, in movimento lento ---- */
/* più alto dell'hero: il margine in eccesso serve al parallasse,
   che lo fa scorrere senza mai scoprire i bordi */
.hero__gradient{
  position:absolute;left:0;right:0;top:-16%;height:132%;overflow:hidden;
  background:
    linear-gradient(135deg,#7A4A00 0%,#5B3600 38%,#2E1B00 100%);
  will-change:transform;
}
/* Niente `filter: blur()`: sfocare tre elementi di questa dimensione
   costava ~80ms per fotogramma e rendeva scattoso tutto il resto della
   pagina. La morbidezza viene dai passaggi del gradiente stesso, che
   non costano nulla. */
.blob{position:absolute;will-change:transform}
.blob--1{  /* luce oro in alto a destra */
  width:95%;height:85%;right:-24%;top:-32%;
  background:radial-gradient(closest-side at 50% 50%,
    #FFB000 0%,rgba(255,176,0,.72) 30%,rgba(255,176,0,.34) 56%,
    rgba(255,176,0,.10) 78%,rgba(255,176,0,0) 100%);
  animation:blob1 34s ease-in-out infinite alternate;
}
.blob--2{  /* ambra calda a sinistra */
  width:100%;height:100%;left:-36%;top:16%;
  background:radial-gradient(closest-side at 50% 50%,
    #B87400 0%,rgba(184,116,0,.62) 32%,rgba(184,116,0,.28) 58%,
    rgba(184,116,0,.08) 80%,rgba(184,116,0,0) 100%);
  animation:blob2 46s ease-in-out infinite alternate;
}
.blob--3{  /* ombra profonda in basso a destra */
  width:110%;height:95%;right:-28%;bottom:-36%;
  background:radial-gradient(closest-side at 50% 50%,
    #1C1000 0%,rgba(28,16,0,.74) 30%,rgba(28,16,0,.36) 56%,
    rgba(28,16,0,.12) 78%,rgba(28,16,0,0) 100%);
  animation:blob3 40s ease-in-out infinite alternate;
}
@keyframes blob1{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(-14%,10%,0) scale(1.22)}
  100%{transform:translate3d(6%,-8%,0) scale(1.05)}
}
@keyframes blob2{
  0%  {transform:translate3d(0,0,0) scale(1.05)}
  50% {transform:translate3d(16%,-12%,0) scale(1.25)}
  100%{transform:translate3d(-8%,10%,0) scale(1)}
}
@keyframes blob3{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(-12%,-10%,0) scale(1.18)}
  100%{transform:translate3d(10%,6%,0) scale(1.06)}
}

/* ---- treno: sempre a tutta larghezza e mai tagliato ---- */
.hero__train{position:absolute;top:var(--art-top);left:0;width:100%}
.hero__train img{width:100%;height:auto;display:block}

/* ---- marker: posizionati sul riquadro del treno, non sull'hero ---- */
.hero__pins{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.hero__train-box{position:absolute;top:var(--art-top);left:0;width:100%;height:var(--art-h)}
.pin{
  position:absolute;width:35px;height:35px;border-radius:50%;
  background:var(--dark);border:0;padding:0;cursor:pointer;pointer-events:auto;
  display:grid;place-items:center;transform:translate(-50%,-50%);
  transition:transform .25s ease,box-shadow .25s ease;
}
.pin::after{
  content:"";position:absolute;inset:-10px;border-radius:50%;
}
.pin:hover{transform:translate(-50%,-50%) scale(1.15)}
.pin.is-active{width:32px;height:32px;box-shadow:0 0 0 3px rgba(255,255,255,.5)}
.pin__core{width:7px;height:7px;border-radius:50%;background:var(--white);box-shadow:0 0 8px 2px rgba(255,255,255,.55);transition:transform .25s ease}
.pin.is-active .pin__core{transform:scale(1.25);width: 10px;height: 10px;}
/* coordinate ricalcolate sulla nuova inquadratura, in % del riquadro del treno */
/* Quattro marker, con posizioni e diametri presi dal frame aggiornato
   (8, 35, 21 e 21 px). Coordinate in % del riquadro del treno. */
.pin--a{left:13.71%;top:21.9%;width:21px;height:21px}
.pin--b{left:35%;top:33%;width:21px;height:21px}          /* window */
.pin--c{left:53%;top:38%;width:21px;height:21px}          /* seat (SE) */
.pin--d{left:44%;top:34%;width:21px;height:21px}          /* door (D) */
.pin--e{left:73%;top:32%;width:21px;height:21px}          /* ceiling / soffitto (SO) */

.hero__inner{position:relative;display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;padding-top:min(45px,3.52vw)}
.hero__text{flex:1 1 460px;max-width:709px}
.hero__lead{flex:0 1 290px;max-width:290px;font-size:var(--fs-lead);line-height:1.15;margin-top:min(45px,3.52vw)}

.eyebrow{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-weight:300;font-size:var(--fs-mono);
  text-transform:uppercase;letter-spacing:.04em;line-height:1.2857;margin-bottom:8px;color:var(--ink);
}
.eyebrow--light{color:var(--white)}

.h1{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h1);line-height:var(--lh-h1)}
.h2{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2);line-height:1.3}

/* ---- card pezzo — Figma: 274×392 a x=24 y=597 ---- */
.part-card{
  position:relative;z-index:2;margin-top:min(302px,23.6vw);
  padding-inline:var(--gutter);
  /* la figure è larga quanto il container (.container{width:100%}),
     ma il contenuto visibile occupa solo i 274px di sinistra
     (.part-card__media/.part-card__meta {max-width:274px}). Senza
     questa riga, l'area vuota a destra — trasparente ma sopra ai
     pin per via dello z-index:2 — intercettava i click dei pallini
     B, C e D sottostanti, che restavano quindi non cliccabili. */
  pointer-events:none;
}
/* la card resta larga 274 come nel Figma, ma il suo bordo sinistro
   è quello del contenitore: così è allineata a titoli e paragrafi
   a qualsiasi larghezza di schermo */
.part-card__media,.part-card__meta{max-width:274px}
.part-card__media,.part-card__meta{background:var(--dark)}
.part-card__media{
  border-radius:8px 8px 0 0;padding:16px;position:relative;
  display:flex;flex-direction:column;gap:16px;
}
.part-card__chip{
  align-self:flex-end;min-width:169px;height:27px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 8.5px;border:1px solid rgba(255,255,255,.45);border-radius:4px;
  font-family:var(--font-mono);font-weight:300;font-size:var(--fs-mono);
  color:var(--white);text-align:center;
}
.part-card__frame{height:231px;position:relative;overflow:hidden}
.part-card__frame img{
  --rot:-29.51deg;
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(var(--rot));
  max-height:223px;width:auto;max-width:none;
}
.part-card__frame img[data-rotate="0"]{--rot:0deg;max-height:200px}
.part-card__meta{border-radius:0 0 8px 8px;padding:16px;display:flex;flex-direction:column;gap:12px;font-family:var(--font-mono);font-weight:300;font-size:var(--fs-mono);color:var(--white)}
.part-card__name{font-family:var(--font-display);font-weight:400;font-size:1.125rem;line-height:1.2;color:var(--white)}
.part-card__link{
  pointer-events:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:6px;
  color:var(--white);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;
  transition:border-color .2s ease,gap .2s ease;
}
.part-card__link::after{content:"\2197"}
.part-card__link:hover,.part-card__link:focus-visible{border-color:var(--white);gap:9px}

/* who we are — Figma: blocco a y=1086, colonne a y=1338 allineate a destra */
.who{position:relative;margin-top:min(97px,7.6vw)}
.who__title{max-width:max(603px,50%);line-height:1.225;font-size:clamp(1.625rem,1.02rem + 2.5vw,2.25rem)}
.who__cols{
  display:grid;gap:1rem 16px;margin-top:30px;
  grid-template-columns:1fr;max-width:604px;margin-inline-start:auto;
}
.who__cols p{font-size:var(--fs-body)}

/* ---------- PANNELLO BIANCO ----------
   L'hero resta incollato quando il suo fondo tocca il fondo dello
   schermo; il pannello bianco (tutto ciò che segue) gli scorre sopra.
   Nessun JavaScript: è position:sticky. */
.sheet{
  position:relative;z-index:3;background:var(--white);
  border-radius:28px 28px 0 0;margin-top:-28px;
  box-shadow:0 -28px 60px rgba(0,0,0,.28);
}

/* ---------- WHAT WE DO (Figma: sezione a y=1727, griglia a y=1922) ---------- */
.work{padding-block:min(42px,3.3vw) 0}
/* seconda sezione a card: nel Figma lo stacco è maggiore */
/* dopo la banda lo stacco è un margine, non un padding:
   nel Figma la sezione riparte 160px sotto la fascia */
.band + .work{margin-top:min(160px,12.5vw);padding-top:0}
.work + .work{padding-top:min(160px,12.5vw)}
.work__head{margin-bottom:64px}
.work__intro{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:flex-start}
.work__title{font-size:var(--fs-display);line-height:1.3}
.work__lead{max-width:497px;font-size:var(--fs-small);line-height:1.17}

.grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.card{
  position:relative;isolation:isolate;padding:24px;text-align:left;
  border-inline-start:1px solid var(--rule);
  /* Altezza FISSA della cella (nel Figma 426,67×538).
     Deve essere `height` e non `min-height`: con min-height
     l'altezza resta indefinita, le righe `fr` non sanno quanto
     spazio hanno e all'hover il testo si aggiunge in fondo
     invece di far cedere l'immagine — la card cresceva di 120px.
     Con height definita l'immagine si rimpicciolisce e basta. */
  height:clamp(420px,42vw,538px);
  /* il fondo oro parte fuori cella: senza clip sborderebbe
     sulla card della riga sotto */
  overflow:hidden;
  /* righe: icona · immagine · titolo · descrizione (chiusa)
     La descrizione si apre da 0fr a 1fr: l'immagine cede spazio
     e l'altezza della card non cambia, quindi la griglia non salta. */
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  justify-items:center;
  transition:color .25s ease;
}
.card:first-child{border-inline-start:0}
.card:nth-child(3n+1){border-inline-start:0}
.card:nth-child(n+4){border-top:1px solid var(--rule)}

/* variante a 4 colonne (sezione "We make the inside"), solo da
   1024px in su: sotto quella soglia la griglia torna a 2 colonne
   (poi 1) e la logica dei bordi generica va già bene così com'è. */
@media (min-width:1024px){
  .grid--4{grid-template-columns:repeat(4,1fr)}
  /* la regola generica sopra tratta la 4a card come inizio riga
     (vale per la griglia a 3 colonne), qui invece è l'ultima della
     stessa riga */
  .grid--4 .card:nth-child(4){border-inline-start:1px solid var(--rule);border-top:0}
}

/* il fondo oro compare in dissolvenza lenta */
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--gold-gradient);
  opacity:0;will-change:opacity;
  transition:opacity .5s var(--ease-fade);
}
.card__icon{
  justify-self:end;width:35.5px;height:35.5px;position:relative;
}
.card__icon::before,.card__icon::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--rule);
  transition:background .35s ease,transform .45s var(--ease-out),opacity .3s ease;
}
.card__icon::before{width:1px;height:100%;transform:translate(-50%,-50%)}
.card__icon::after{width:100%;height:1px;transform:translate(-50%,-50%)}

.card__media{
  position:relative;width:100%;max-width:260.357px;height:100%;
  margin-top:24px;overflow:hidden;
}
.card__media picture{position:absolute;inset:0;display:block}
.card__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center center;
  transform-origin:center top;will-change:transform;
  transition:transform .55s var(--ease-out),opacity .4s ease;
}
.card__media-alt{opacity:0}

.card__title{
  width:100%;margin-top:24px;font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-card);text-transform:uppercase;line-height:1.3125;
  will-change:transform;transition:transform .55s var(--ease-out);
}
/* La descrizione è fuori dal flusso, ancorata al fondo della card.
   Così l'apertura non tocca il layout: si animano solo opacità e
   transform, che girano sul compositore. L'immagine si rimpicciolisce
   con una scala e il titolo sale: entrambi i valori li calcola
   app.js una volta sola (--isc e --th), non fotogramma per fotogramma. */
.card__text{
  position:absolute;left:24px;right:24px;bottom:24px;
  font-size:var(--fs-body);line-height:1.2;
  opacity:0;transform:translateY(12px);will-change:transform,opacity;
  transition:opacity .22s ease,transform .3s var(--ease-out);
}

/* --- stato hover (solo dove l'hover esiste davvero) ---
   L'uscita è più rapida dell'entrata: risponde subito al mouse
   che se ne va, ma entra con calma. */
@media (hover:hover) and (pointer:fine) and (min-width:768px){
  .card:hover,.card:focus-within{
    color:var(--white);
    transition:color .3s ease;
  }
  .card:hover::before,.card:focus-within::before{
    opacity:1;
    transition:opacity 1.05s var(--ease-fade);
  }
  .card:hover .card__media-alt,.card:focus-within .card__media-alt{opacity:1}
  .card:hover .card__media img,.card:focus-within .card__media img{
    transform:scale(var(--isc,.7));
    transition:transform .6s var(--ease-out);
  }
  .card:hover .card__title,.card:focus-within .card__title{
    transform:translateY(calc(-1 * var(--th,120px)));
    transition:transform .6s var(--ease-out);
  }
  /* il "+" diventa "−": la barra verticale ruota e svanisce */
  .card:hover .card__icon::before,.card:focus-within .card__icon::before{
    opacity:0;transform:translate(-50%,-50%) rotate(90deg) scaleY(.4);
  }
  .card:hover .card__icon::after,.card:focus-within .card__icon::after{
    background:var(--white);
  }
  .card:hover .card__text,.card:focus-within .card__text{
    opacity:1;transform:none;
    transition:opacity .45s ease .12s,transform .6s var(--ease-out) .12s;
  }
}

/* ---------- BANDA IMMAGINE (Figma: fascia 1280x760, immagine larga
   2775 che sborda a sinistra, card a x=336 y=75, tre marker) ---------- */
.band{
  position:relative;overflow:hidden;
  height:min(760px,59.375vw);
  background:#2F1D02;
  margin-top:min(100px,7.8vw);   /* stacco dalla griglia sopra */
}
/* l'immagine fornita è già ritagliata sulla fascia (1280x760):
   riempie tutta la larghezza, senza sbordare */
.band__art{position:absolute;inset:0}
.band__art picture{position:absolute;inset:0;display:block}
.band__art img{
  width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;
}

/* marker: stessa logica dell'hero, diametro 41 */
.band__pins{position:absolute;inset:0}
.band__pin{
  position:absolute;width:41px;height:41px;border-radius:50%;border:0;padding:0;
  background:var(--dark);cursor:pointer;display:grid;place-items:center;
  transform:translate(-50%,-50%);
  transition:transform .25s ease,box-shadow .25s ease;
}
.band__pin::after{content:"";position:absolute;inset:-12px;border-radius:50%}
.band__pin:hover{transform:translate(-50%,-50%) scale(1.12)}
.band__pin.is-active{box-shadow:0 0 0 3px rgba(255,255,255,.5)}
.band__pin-core{width:11px;height:11px;border-radius:50%;background:var(--white);box-shadow:0 0 8px 2px rgba(255,255,255,.55)}
.band__pin--a{left:26%;top:39%}    /* finestra */
.band__pin--b{left:80%;top:40%}    /* side wall: sul muro accanto alla finestra */
.band__pin--c{left:13%;top:42%}    /* door (spostato a destra su un pannello) */
.band__pin--d{left:50%;top:11%}    /* soffitto centrale */

/* card informativa: una per pallino, in posizione propria.
   Si mostra solo quella del pallino attivo (classe .is-shown). */
.band__cards{position:absolute;inset:0;pointer-events:none}
.band__card{
  position:absolute;
  width:min(297px,23.2vw);margin:0;padding:16px;
  background:var(--dark);border-radius:8px;color:var(--white);
  display:flex;flex-direction:column;gap:16px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(14px) scale(.97);
  transition:opacity .38s ease,transform .5s cubic-bezier(.22,.9,.3,1),visibility 0s linear .5s;
}
.band__card.is-shown{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:none;
  transition:opacity .38s ease,transform .5s cubic-bezier(.22,.9,.3,1),visibility 0s;
}
/* stagger dei contenuti: titolo/testo → foto → linea */
.band__card .band__text,
.band__card > img,
.band__card .band__rule{
  opacity:0;transform:translateY(9px);
  transition:opacity .32s ease,transform .44s cubic-bezier(.22,.9,.3,1);
}
.band__card.is-shown .band__text{opacity:1;transform:none;transition-delay:.08s}
.band__card.is-shown > img{opacity:1;transform:none;transition-delay:.15s}
.band__card.is-shown .band__rule{opacity:1;transform:none;transition-delay:.21s}
/* posizioni: ancorate in alto (il titolo resta sempre visibile) e
   allineate orizzontalmente alla zona del rispettivo pallino */
.band__card--a{left:30%;top:22%}   /* accanto al pallino finestra, a destra */
.band__card--b{right:3%;top:8%}
.band__card--c{left:3%;top:8%}
.band__card--d{left:36%;top:8%}
.band__text{margin:0}
.band__title{
  margin:0 0 8px;font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.125rem,1.4vw,1.5rem);line-height:1.16;
}
.band__body{margin:0;font-size:var(--fs-body);line-height:1.25}
.band__card img{display:block;width:100%;height:auto;border-radius:4px}
.band__rule{display:none}
/* X di chiusura dentro la scheda (visibile solo su mobile, dove la
   scheda è una modale) */
.band__close{display:none;place-items:center;position:absolute;top:10px;right:10px;z-index:2;
  width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.band__close:hover{background:rgba(255,255,255,.26)}
.band__close svg{width:16px;height:16px}

/* ---------- FAQ (Figma: sezione a y=3115, righe 28px + 24px di respiro) ---------- */
.faq{padding-block:min(117px,9.15vw) 0;padding-bottom:min(68px,5.3vw)}
.faq__title{font-size:var(--fs-display);line-height:1.3;margin-bottom:72px}
.accordion__item{border-bottom:1px solid var(--rule)}
.accordion__item h3{margin:0;font:inherit;font-weight:400}
.accordion__trigger{
  width:100%;background:none;border:0;padding:24px 0;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  text-align:left;font-size:var(--fs-q);line-height:1.17;color:var(--ink);
}
.accordion__item:first-child .accordion__trigger{padding-top:0}
.accordion__icon{position:relative;width:19px;height:19px;flex:none}
.accordion__icon::before,.accordion__icon::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--rule);border-radius:2px;
  transition:transform .3s ease,opacity .3s ease;
}
.accordion__icon::before{width:2px;height:19px;transform:translate(-50%,-50%)}
.accordion__icon::after{width:19px;height:2px;transform:translate(-50%,-50%)}
.accordion__trigger[aria-expanded="true"] .accordion__icon::before{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}
.accordion__panel{overflow:hidden}
.accordion__panel p{padding:0 0 24px;max-width:64ch;font-size:var(--fs-body)}

/* ---------- OUR WORK (Figma: sezione a y=3791, foto alte 308, gap 24) ----------
   Il nastro sborda a destra oltre il contenitore, come nel frame:
   parte allineato al testo e prosegue fuori schermo. */
.gallery{padding-block:min(128px,10vw) 0}
.gallery__head{margin-bottom:64px}
/* nel Figma questo titolo è 40/52, non 64 come gli altri display */
.gallery__title{font-size:var(--fs-h2);line-height:1.3}

.gallery__viewport{position:relative}

.gallery__track{
  display:flex;gap:24px;align-items:flex-start;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  padding-inline:max(var(--gutter), calc((100% - var(--maxw)) / 2));
  /* senza questo lo snap ignora il padding e la prima foto finisce
     appiccicata al bordo dello schermo invece che allineata al testo */
  scroll-padding-inline:max(var(--gutter), calc((100% - var(--maxw)) / 2));
  scrollbar-width:none;-ms-overflow-style:none;
}
.gallery__track::-webkit-scrollbar{display:none}
.gallery__track:focus-visible{outline:2px solid var(--brand);outline-offset:4px}

/* --photo-h governa l'altezza delle foto; la didascalia sta sotto,
   quindi l'altezza va sull'immagine e non sull'elemento */
.gallery{--photo-h:clamp(220px,31vw,400px)}
/* la galleria segue subito la griglia delle card: nel Figma lo stacco
   è 80px, e il titolo non ha etichetta sopra */
.gallery--solo{padding-block:min(128px,10vw) 0}
.gallery--solo .gallery__head{margin-bottom:32px}
.gallery + .certs{padding-top:min(90px,7vw)}
.gallery__item{flex:none;scroll-snap-align:start}
.gallery__figure{margin:0;display:block;width:max-content;max-width:100%}
.gallery__item img{
  display:block;height:var(--photo-h);width:auto;max-width:none;object-fit:cover;
}
.gallery__caption{
  margin-top:16px;max-width:100%;
  font-family:var(--font-mono);font-weight:300;font-size:var(--fs-mono);
  line-height:1.2857;color:var(--ink);
}

/* Freccia che segue il cursore: nella metà destra punta avanti,
   in quella sinistra indietro. È decorativa e non riceve clic —
   il clic lo prende il nastro sotto. */
.gallery__cursor{
  display:none;                 /* la accende app.js se c'è un mouse */
  position:absolute;left:0;top:0;z-index:3;
  place-items:center;pointer-events:none;
  color:var(--brand);
  opacity:0;
  transform:translate3d(var(--x,0),var(--y,0),0) translate(-50%,-50%) scale(.7);
  transition:opacity .25s var(--ease-out),scale .25s var(--ease-out);
}
.gallery__cursor svg{width:64px;height:36px;transition:transform .3s var(--ease-out)}
.gallery__cursor.is-prev svg{transform:rotate(180deg)}
.gallery__viewport.is-pointing .gallery__cursor{
  opacity:1;
  transform:translate3d(var(--x,0),var(--y,0),0) translate(-50%,-50%) scale(1);
}
/* a fondo corsa la freccia si spegne: non c'è dove andare */
.gallery__viewport.is-pointing .gallery__cursor.is-idle{opacity:.22}

/* la classe la mette app.js solo se il puntatore è davvero un mouse */
.gallery__viewport.has-cursor .gallery__cursor{display:grid}
.gallery__viewport.is-static .gallery__cursor{display:none}
.gallery__viewport.is-static .gallery__track{cursor:auto}
.gallery__viewport.has-cursor.is-pointing .gallery__track{cursor:none}

/* comandi reali: invisibili col mouse, compaiono con il tab */
.gallery__nav{
  position:absolute;top:50%;z-index:4;
  width:52px;height:52px;border:0;border-radius:50%;padding:0;
  display:grid;place-items:center;cursor:pointer;
  background:var(--brand);color:var(--white);
  box-shadow:0 4px 20px rgba(46,27,0,.28);
  opacity:0;pointer-events:none;transform:translateY(-50%);
}
.gallery__nav svg{width:22px;height:22px}
.gallery__nav--prev{left:max(var(--gutter), calc((100% - var(--maxw)) / 2))}
.gallery__nav--next{right:max(var(--gutter), calc((100% - var(--maxw)) / 2))}
.gallery__nav:focus-visible{opacity:1;pointer-events:auto;outline:2px solid var(--brand);outline-offset:3px}



/* ---------- CERTIFICATIONS (Figma: sezione a y=4397, 3 colonne da 367) ---------- */
.certs{padding-block:min(128px,10vw) min(158px,12.3vw)}
.certs__title{font-size:var(--fs-display);line-height:1.3;margin-bottom:72px}
.certs__list{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.cert{
  display:flex;flex-direction:column;align-items:flex-start;min-height:100%;
  padding-inline:32.75px;
  border-inline-start:1px solid var(--rule);
}
.cert:first-child{border-inline-start:0;padding-inline-start:0}
.cert:last-child{padding-inline-end:0}
.cert__name{font-family:var(--font-body);font-weight:400;font-size:var(--fs-q);line-height:1.29;margin:0}
.cert__text{font-size:var(--fs-small);line-height:1.17;margin:16px 0 24px;max-width:367px}
/* niente padding qui: .tag ha un'altezza fissa e il padding
   verticale gliela mangerebbe (box-sizing: border-box) */
.cert__link{margin-top:auto;text-decoration:none;align-self:flex-start;flex:none}

/* =========================================================
   ANIMAZIONI
   ---------------------------------------------------------
   Due soli movimenti, volutamente sobri:
   1. "up"   — comparsa in salita di 18px, 0,7s
   2. "rule" — la linea sottile si traccia da sinistra, come
               in un disegno tecnico
   La classe .is-visible la assegna app.js quando l'elemento
   entra in vista (o al caricamento, per l'hero).
   ========================================================= */
:root{--ease-out:cubic-bezier(.22,.61,.36,1);--ease-fade:cubic-bezier(.25,.46,.45,.94)}

[data-anim="up"]{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease-out) var(--d,0ms),
             transform .7s var(--ease-out) var(--d,0ms);
}
[data-anim="up"].is-visible{opacity:1;transform:none}

/* le divisorie delle FAQ si tracciano invece di apparire */
[data-anim="rule"]{border-bottom:0;position:relative}
[data-anim="rule"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);
  transform:scaleX(0);transform-origin:left;
  transition:transform .85s var(--ease-out) var(--d,0ms);
}
[data-anim="rule"].is-visible::after{transform:scaleX(1)}
[data-anim="rule"] .accordion__trigger{
  opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease-out) var(--d,0ms),transform .6s var(--ease-out) var(--d,0ms);
}
[data-anim="rule"].is-visible .accordion__trigger{opacity:1;transform:none}

/* divisorie verticali fra le certificazioni: si tracciano dall'alto */
.cert{position:relative;border-inline-start:0}
/* la divisoria sporge di 10px sopra e sotto il contenuto:
   20px più lunga in tutto */
.cert::before{
  content:"";position:absolute;left:0;top:-10px;bottom:-10px;width:1px;background:var(--rule);
  transform:scaleY(0);transform-origin:top;
  transition:transform .85s var(--ease-out) var(--d,0ms);
}
.cert.is-visible::before{transform:scaleY(1)}
.cert:first-child::before{display:none}

/* marker: entrano dopo il treno e pulsano piano finché non si clicca */
.pin{opacity:0;transform:translate(-50%,-50%) scale(.4)}
.is-loaded .pin{
  opacity:1;transform:translate(-50%,-50%) scale(1);
  transition:opacity .5s var(--ease-out) var(--pd,0ms),
             transform .5s var(--ease-out) var(--pd,0ms),
             box-shadow .25s ease;
}
.pin--a{--pd:700ms}
.pin--b{--pd:790ms}
.pin--c{--pd:880ms}
.pin--d{--pd:970ms}
.pin--e{--pd:1060ms}
.pin::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.7);opacity:0;
}
.is-loaded .hero__pins:not(.is-used) .pin::after{
  animation:pinPulse 3.4s ease-out infinite;
  animation-delay:calc(var(--pd) + 600ms);
}
@keyframes pinPulse{
  0%   {transform:scale(1);opacity:.45}
  55%  {transform:scale(1.9);opacity:0}
  100% {transform:scale(1.9);opacity:0}
}

/* micro-movimenti sulla card del pezzo quando si cambia marker */
.part-card__frame img{transition:opacity .3s ease,transform .5s var(--ease-out)}
.part-card__chip{transition:opacity .3s ease .07s,transform .5s var(--ease-out) .07s}
.part-card__meta > *{transition:opacity .3s ease,transform .5s var(--ease-out)}
.part-card__meta > *:nth-child(1){transition-delay:.14s}
.part-card__meta > *:nth-child(2){transition-delay:.2s}

/* uscita: tutto sale e svanisce insieme, in fretta */
.part-card.is-out .part-card__frame img,
.part-card.is-out .part-card__meta > *{
  opacity:0;transition:opacity .18s ease,transform .22s ease-in;transition-delay:0s;
}
.part-card.is-out .part-card__frame img{transform:translate(-50%,-58%) scale(.92) rotate(var(--rot,-29.51deg))}
.part-card.is-out .part-card__meta > *{transform:translateY(-8px)}

/* entrata: il nuovo contenuto parte da sotto e leggermente piccolo,
   senza transizione; app.js toglie la classe e lo lascia salire */
.part-card.is-in .part-card__frame img,
.part-card.is-in .part-card__meta > *{
  opacity:0;transition:none;
}
.part-card.is-in .part-card__frame img{transform:translate(-50%,-42%) scale(.92) rotate(var(--rot,-29.51deg))}
.part-card.is-in .part-card__meta > *{transform:translateY(12px)}

/* ---------- MODALE MARKER (hero + banda) ----------
   Un'unica finestra modale riusata sia dai pin del treno in hero
   sia dai marker della banda immagine: click su un pallino →
   apre, mostra immagine + testo del componente, si chiude con la
   X, clic sullo sfondo o tasto Esc. */

.site-footer{background:var(--footer-bg);color:var(--white)}
.site-footer__inner{
  width:100%;max-width:calc(var(--maxw) + var(--gutter)*2);margin-inline:auto;
  display:grid;grid-template-columns:1fr;gap:2.5rem;
  padding:clamp(2rem,4vw,3.1rem) var(--gutter);
}
.company__logo{width:100px;height:auto;margin-bottom:48px}
.company__logo--wide{display:none}
.company__info p+p{margin-top:16px}
.company__info{font-size:.875rem;line-height:1.4286}   /* 14/20 nel Figma */
.company__contacts{display:flex;flex-direction:column;gap:4px}
.company__info a{text-decoration:underline;text-underline-offset:2px}
/* la voce verso il sito principale pesa un po' di più delle altre */
.company__site{font-weight:700; margin-inline: auto;display: flex;width: fit-content; margin-bottom: 20px;}

.contact__head{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:flex-start;margin-bottom:32px}
.contact__title{font-size:var(--fs-contact);line-height:1.29}
.contact__lead{max-width:395px;padding-top:8px;line-height:1.19}

.form{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-size:var(--fs-body)}
.field input:not([type="checkbox"]),.field textarea{
  width:100%;background:none;border:0;border-bottom:1px solid var(--white);
  color:var(--white);font:inherit;padding:0 0 4px;border-radius:0;
}
.field textarea{resize:vertical;min-height:1.75rem}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--white);box-shadow:0 1px 0 0 var(--white)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--white);outline-offset:4px}
.field__error{font-size:.8125rem;color:#ffb4a8;min-height:0}
.field__error:empty{display:none}
.field.is-invalid input:not([type="checkbox"]),.field.is-invalid textarea{border-bottom-color:#ffb4a8}

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

.consent{gap:12px}
.consent__label{display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:.875rem;line-height:1.35}
.consent__label input{position:absolute;opacity:0;width:0;height:0}
.consent__box{width:18px;height:18px;border:1px solid var(--white);flex:none;margin-top:1px;display:grid;place-items:center}
.consent__label input:checked + .consent__box::after{content:"";width:10px;height:10px;background:var(--white)}
.consent__label input:focus-visible + .consent__box{outline:2px solid var(--white);outline-offset:3px}
.consent__text a{text-decoration:underline}
.consent.is-invalid .consent__box{border-color:#ffb4a8}

.form__actions{grid-column:1/-1;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:.5rem}
.btn{border:0;cursor:pointer}
.btn[disabled]{opacity:.6;cursor:progress}
.form__status{font-size:.875rem}
.form__status.is-error{color:#ffb4a8}


/* ---------- CONTACT FORM 7 ADAPTER ----------
   Il form originale nello ZIP usa .field / .consent / .form__actions.
   Nella landing WordPress, invece, .form è il wrapper dell'embed CF7:
   queste regole riportano sul markup generato da Contact Form 7 lo stesso
   layout e lo stesso trattamento visivo, senza richiedere HTML custom. */
.form > .wpcf7{
  grid-column:1/-1;
  width:100%;min-width:0;
}

.form .wpcf7-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
  width:100%;
}

/* CF7 mette ogni campo in un <p>. Il layout replica il form dello ZIP:
   nome full width, e-mail + subject affiancati, messaggio/privacy/actions full. */
.form .wpcf7-form > p{
  min-width:0;
  margin:0;
}
.form .wpcf7-form > p:nth-of-type(1),
.form .wpcf7-form > p:nth-of-type(4),
.form .wpcf7-form > p:nth-of-type(5),
.form .wpcf7-form > p:nth-of-type(6){
  grid-column:1/-1;
}

/* Se il browser supporta :has(), le aree restano corrette anche se CF7
   cambia l'ordine dei campi o aggiunge un paragrafo. */
@supports selector(:has(*)){
  .form .wpcf7-form > p:has([data-name="your-name"]),
  .form .wpcf7-form > p:has([data-name="your-message"]),
  .form .wpcf7-form > p:has([data-name="privacypolicy"]),
  .form .wpcf7-form > p:has(.wpcf7-submit){
    grid-column:1/-1;
  }
}

.form .wpcf7-form label{
  font-size:var(--fs-body);
}
.form .wpcf7-form-control-wrap{
  display:block;
  width:100%;
  margin-top:8px;
}

.form .wpcf7-text,
.form .wpcf7-email,
.form .wpcf7-textarea{
  display:block;
  width:100%;
  max-width:none;
  margin:0;
  padding:0 0 4px;
  background:none;
  border:0;
  border-bottom:1px solid var(--white);
  border-radius:0;
  color:var(--white);
  font:inherit;
  box-shadow:none;
  appearance:none;
  -webkit-appearance:none;
}
.form .wpcf7-textarea{
  height:1.75rem;          /* CF7 genera rows="10": lo neutralizziamo */
  min-height:1.75rem;
  resize:vertical;
  overflow:auto;
}
.form .wpcf7-text:focus,
.form .wpcf7-email:focus,
.form .wpcf7-textarea:focus{
  outline:none;
  border-bottom-color:var(--white);
  box-shadow:0 1px 0 0 var(--white);
}
.form .wpcf7-text:focus-visible,
.form .wpcf7-email:focus-visible,
.form .wpcf7-textarea:focus-visible{
  outline:2px solid var(--white);
  outline-offset:4px;
}

/* Validazione CF7 */
.form .wpcf7-not-valid{
  border-bottom-color:#ffb4a8;
}
.form .wpcf7-not-valid-tip{
  display:block;
  margin-top:6px;
  color:#ffb4a8;
  font-size:.8125rem;
  line-height:1.3;
}

/* Privacy: nel markup CF7 il checkbox viene dopo il testo del label.
   Lo portiamo visivamente a sinistra per replicare il form originale.
   nth-of-type(5) è il fallback per il markup dell'embed fornito. */
.form .wpcf7-form > p:nth-of-type(5) label{
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  font-size:.875rem;
  line-height:1.35;
}
@supports selector(:has(*)){
  .form .wpcf7-form > p:has([data-name="privacypolicy"]) label{
    display:flex;
    align-items:flex-start;
    gap:12px;
    cursor:pointer;
    font-size:.875rem;
    line-height:1.35;
  }
}
.form [data-name="privacypolicy"].wpcf7-form-control-wrap{
  order:-1;
  flex:none;
  width:auto;
  margin-top:1px;
}
.form .wpcf7-acceptance,
.form .wpcf7-list-item{
  display:block;
  margin:0;
}
.form .wpcf7-acceptance input[type="checkbox"]{
  display:grid;
  place-content:center;
  width:18px;
  height:18px;
  margin:0;
  padding:0;
  border:1px solid var(--white);
  border-radius:0;
  background:transparent;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.form .wpcf7-acceptance input[type="checkbox"]:checked{
  background:var(--white);
  box-shadow:inset 0 0 0 3px var(--footer-bg);
}
.form .wpcf7-acceptance input[type="checkbox"]:focus-visible{
  outline:2px solid var(--white);
  outline-offset:3px;
}
.form .wpcf7-acceptance input[type="checkbox"].wpcf7-not-valid{
  border-color:#ffb4a8;
}

/* Submit: stesso tag diagonale bianco del form originale. */
.form .wpcf7-form > p:nth-of-type(6){
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:8px;
}
@supports selector(:has(*)){
  .form .wpcf7-form > p:has(.wpcf7-submit){
    display:flex;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
    margin-top:8px;
  }
}
.form .wpcf7-submit{
  --slant:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  min-width:0;
  margin:0;
  padding:0 calc(var(--slant) + 8px);
  border:0;
  border-radius:0;
  background:var(--white);
  color:var(--brand);
  font-family:var(--font-body);
  font-size:.8125rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.03em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  clip-path:polygon(var(--slant) 0,100% 0,calc(100% - var(--slant)) 100%,0 100%);
  -webkit-appearance:none;
  appearance:none;
  transition:background-color .2s ease,opacity .2s ease;
}
.form .wpcf7-submit:hover,
.form .wpcf7-submit:focus-visible{
  background:#f2e8d8;
}
.form .wpcf7-submit:disabled{
  opacity:.6;
  cursor:progress;
}

/* CF7 default CSS non viene caricato in questa landing isolata: ricreiamo
   spinner, feedback e testo screen-reader indispensabili. */
.form .wpcf7-spinner{
  display:inline-block;
  width:18px;
  height:18px;
  margin:0;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:var(--white);
  border-radius:50%;
  vertical-align:middle;
  visibility:hidden;
  animation:wpcf7-berlin-spin .7s linear infinite;
}
.form .wpcf7-form.submitting .wpcf7-spinner{visibility:visible}
@keyframes wpcf7-berlin-spin{to{transform:rotate(360deg)}}

.form .wpcf7-response-output{
  grid-column:1/-1;
  margin:0;
  padding:0;
  border:0;
  color:var(--white);
  font-size:.875rem;
  line-height:1.35;
}
.form .wpcf7-form.invalid .wpcf7-response-output,
.form .wpcf7-form.unaccepted .wpcf7-response-output,
.form .wpcf7-form.spam .wpcf7-response-output,
.form .wpcf7-form.failed .wpcf7-response-output,
.form .wpcf7-form.aborted .wpcf7-response-output{
  color:#ffb4a8;
}

.form .screen-reader-response{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

@media (max-width:767px){
  .form .wpcf7-form{
    grid-template-columns:1fr;
    gap:24px;
  }
  .form .wpcf7-form > p{
    grid-column:1/-1;
  }
}

/* ---------- BREAKPOINTS ---------- */
@media (min-width:768px){
  .who__cols{grid-template-columns:1fr 1fr;gap:16px}
}
@media (min-width:1024px){
  .site-footer__inner{
    /* proporzione del Figma (421 su 1280), così la divisoria
       resta al suo posto anche con il contenitore più largo */
    grid-template-columns:minmax(0,32.9%) minmax(0,1fr);gap:0;
    padding:0 var(--gutter) 0 0;max-width:calc(var(--maxw) + var(--gutter)*2);
  }
  /* Il padding verticale sta sulle colonne, non sul contenitore:
     così il bordo di .contact — cioè la divisoria — lo comprende e
     arriva davvero da cima a fondo del footer. */
  .company,.contact{display:flex;flex-direction:column;justify-content:center}
  .company{gap:48px;padding:88px 24px 88px 28px}
  .contact{border-left:1px solid rgba(255,255,255,.35);padding:88px 24px 88px 26px}
  .company__logo{margin-bottom:0}
  .contact__head{margin-bottom:32px}
  .form{gap:24px}
  .form__actions{margin-top:8px}
}

@media (max-width:1023px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .card:nth-child(3n+1){border-inline-start:1px solid var(--rule)}
  .card:nth-child(2n+1){border-inline-start:0}
  .card:nth-child(n+3){border-top:1px solid var(--rule)}
}

@media (max-width:767px){
  /* =========================================================
     MOBILE — ricalcato sul frame homepage_mobile (390 × 6566).
     Ogni misura sotto è presa dalle coordinate del frame.
     ========================================================= */

  /* --- header: 0→60, riga contenuti 39px a y=8, divisoria a y=60 --- */
  .tag__long{display:none}
  .tag__short{display:inline}
  .tag{--slant:18px;height:32px;font-size:.75rem;padding:0 calc(var(--slant) + 4px)}
  .header-actions .tag--dark{margin-right:-14px}
  .header-actions .tag {--slant:14px;}
  .tag--dark .dot{display:none}
  .site-header{padding-top:0}
  .site-header__inner{padding:8px var(--gutter) 13px;min-height:39px}
  .logo__img--full{display:none}
  .logo__img--mark{display:block}

  /* --- hero: etichetta a y=89, titolo a y=123 (2 righe da 40),
         paragrafo a y=228 largo 282 e allineato a destra,
         fondo oro fino a y=1305 --- */
  .hero{
    /* 54 come nel frame: il browser manda a capo una riga in più
       rispetto a Figma, quindi l'hero risulta ~35px più alto.
       Meglio l'aria sotto al testo che l'altezza esatta. */
    padding-top:60px;padding-bottom:54px;
    --art-top:calc(82.6vw - 32px);--art-h:135.79vw;
  }
  .hero__train{width:191%;left:-81%}
  .hero__train-box{width:191%;left:-81%;height:var(--art-h)}
  .hero__inner{flex-direction:column;gap:0;padding-top:29px}
  /* in colonna, flex-basis diventa altezza: va azzerato */
  .hero__text{flex:none;max-width:none}
  .hero .eyebrow{margin-bottom:16px}   /* nell'hero il distacco è 16, altrove 8 */
  .h1{line-height:1.112}                /* 40px su 36 */
  .hero__lead{flex:none;max-width:none;margin-left:auto;margin-top:25px;width:79%;line-height:1.125}
  /* i marker restano: su mobile il treno è ingrandito e tagliato a
     sinistra, quindi vanno riposizionati sulla parte visibile */
  .pin{width:32px;height:32px}
  .pin::after{inset:-14px}          /* area di tocco ~60px */
  .pin--b{left:50%;top:37%;width:21px;height:21px}
  .pin--c{left:55%;top:40%;width:21px;height:21px}
  .pin--d{left:61%;top:43%;width:21px;height:21px}
  .pin--e{left:71%;top:26%;width:21px;height:21px}

  /* --- card pezzo: 159×135 a y=653. Immagine e testi affiancati,
         tipologia sotto. Padding 16 ai lati, 8 sopra e sotto. --- */
  .part-card{
    margin-top:333px;max-width:none;width:max-content;
    padding:8px 16px;margin-inline-start:var(--gutter);
    background:var(--dark);border-radius:8px;
    display:grid;grid-template-columns:auto auto;gap:16px;
    grid-template-areas:"img meta";align-items:center;
  }
  .part-card__media{display:contents}
  .part-card__frame{grid-area:img;height:81px;width:62px;background:none;overflow:visible}
  .part-card__frame img,
  .part-card__frame img[data-rotate="0"]{max-height:81px;max-width:62px}
  .part-card__meta{grid-area:meta;background:none;border-radius:0;padding:0;gap:6px;font-size:.8125rem;line-height:1}
  .part-card__chip{grid-area:chip;justify-self:start;min-width:0;font-size:.8125rem;height:22px;padding:0 8.5px}

  /* --- who we are: blocco a y=853, colonne a y=1037 larghe 274 --- */
  .who{margin-top:65px}
  .who__cols{margin-inline-start:auto;max-width:274px;margin-top:30px;gap:16px}
  .who__cols p{line-height:1.125}   /* 18px, come nel frame */

  .sheet{border-radius:20px 20px 0 0;margin-top:-20px}

  /* --- what we do: sezione a y=1336, griglia a y=1558 --- */
  /* 31 nel frame, +20 per recuperare la sovrapposizione del pannello */
  .work{padding-block:51px 0}
  .work__head{margin-bottom:48px}
  .work__intro{flex-direction:column;gap:16px}

  /* --- griglia: una colonna da 543,9; immagine 206×289 centrata
         con 56 sopra, titolo dopo 24, testo dopo 8 --- */
  .grid{grid-template-columns:1fr;border-top:1px solid var(--rule)}
  .card{
    border-inline-start:0 !important;border-top:1px solid var(--rule);
    padding:56px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:0;
    height:auto;
  }
  .card:first-child{border-top:0}
  .card__icon{display:none}
  .card__media{
    max-width:206.357px;width:100%;height:auto;
    aspect-ratio:206.357/288.9;margin:0 auto 24px;
  }
  /* l'immagine sta tutta dentro il riquadro: il ritaglio in
     percentuale era un residuo della vecchia impostazione e con
     `object-fit: contain` tagliava il sedile */
  .card__media img{inset:0;width:100%;height:100%;object-position:center}
  .card__title{margin:0 0 8px;line-height:1.107}   /* 31px su 28 */
  .card__text{position:static;opacity:1;transform:none;line-height:1.25}

  /* --- FAQ: sezione a y=4347, righe da 19 con 16 sopra e sotto --- */
  .faq{padding-block:69px 0;padding-bottom:0}
  .faq__title{margin-bottom:48px}
  .accordion__trigger{padding:16px 0;gap:1rem}
  .accordion__icon{width:19px;height:19px}
  .accordion__icon::before{height:19px}
  .accordion__icon::after{width:19px}

  /* --- certificazioni: sezione a y=4915, blocchi separati da
         32 sopra e 32 sotto la divisoria, che qui è orizzontale --- */
  .certs{padding-block:94px 83px}
  /* --- banda immagine su mobile ---
     I pallini restano sull'immagine (centrata sui sedili: 4 sedili con
     la finestra in mezzo). Toccando un pallino si apre una modale a
     schermo intero con la scheda, chiudibile con la X o toccando fuori. */
  .band{height:min(460px,118vw);margin-top:min(64px,16.4vw)}
  .band__art img{object-position:62% center}
  .band__pin{width:37px;height:37px}
  .band__pin--a{left:58%;top:40%}
  .band__pin--b{left:95%;top:40%}
  .band__pin--c{left:32%;top:42%}
  .band__pin--d{left:50%;top:12%}

  /* le schede diventano una modale centrata con sfondo scuro */
  .band__cards{position:fixed;inset:0;z-index:120;padding:24px;
    background:rgba(18,11,0,.74);
    opacity:0;pointer-events:none;transition:opacity .25s ease}
  .band__cards:has(.band__card.is-shown){opacity:1;pointer-events:auto}
  /* ogni scheda in assoluto e centrata: si sovrappongono, conta solo
     quella attiva, così la modale è compatta e ben centrata */
  .band__card,
  .band__card--a,.band__card--b,.band__card--c,.band__card--d{
    position:absolute;top:50%;left:50%;right:auto;
    width:min(320px,calc(100% - 48px));max-height:82vh;overflow-y:auto;
    transform:translate(-50%,-50%) translateY(22px) scale(.94);
    transition:opacity .34s ease,transform .48s cubic-bezier(.22,.9,.3,1),visibility 0s linear .48s;
  }
  .band__card.is-shown{transform:translate(-50%,-50%) scale(1);
    transition:opacity .34s ease,transform .48s cubic-bezier(.22,.9,.3,1),visibility 0s}
  /* immagine più contenuta, così la scheda non diventa altissima */
  .band__card img{max-height:172px;width:100%;object-fit:cover}
  .band__close{display:grid}
  .band__card .band__title{padding-right:30px}

  /* --- our work --- */
  .gallery{padding-block:69px 0}
  .gallery__head{margin-bottom:48px}
  .gallery{--photo-h:338px}
  .gallery__caption{margin-top:12px;font-size:.8125rem}

  .certs__list{grid-template-columns:1fr;gap:32px}
  .cert{padding-inline:0 !important;border-inline-start:0;padding-top:32px}
  .cert::before{
    left:0;right:0;top:0;bottom:auto;width:auto;height:1px;
    transform:scaleX(0);transform-origin:left;
  }
  .cert.is-visible::before{transform:scaleX(1)}
  .cert:first-child{padding-top:0}
  .cert__text{max-width:100%}
  .certs__title{margin-bottom:48px}

  /* --- footer: a tutta larghezza (nel frame è x=-1 w=391),
         padding 24 ai lati e 32 sopra e sotto.
         Prima il form, poi logo orizzontale e dati. --- */
  .site-footer{background:var(--footer-bg);padding:0}
  .site-footer__inner{
    background:none;border-radius:0;max-width:none;
    padding:64px 24px;gap:48px;
  }
  .contact{order:1;border-left:0;padding:0}
  .company{order:2;padding:0}
  .contact__head{flex-direction:column;gap:0;margin-bottom:32px}
  .contact__title{font-size:2.5rem;line-height:1.3}
  .contact__lead{max-width:none;padding-top:8px;line-height:1.0625}
  .company__logo--stacked{display:none}
  .company__logo--wide{display:block;width:min(100%,343px);height:auto;margin-bottom:32px}
  .form{grid-template-columns:1fr;gap:24px}
  .form__actions{margin-top:8px}
}

/* su qualunque device senza hover mostriamo sempre il testo */
/* dispositivi senza mouse: la descrizione è sempre aperta */
@media (hover:none){
  .card__text{position:static;opacity:1;transform:none}
  .card__icon{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .blob{animation:none}
  [data-anim]{opacity:1 !important;transform:none !important}
  [data-anim="rule"]::after{transform:scaleX(1) !important}
  [data-anim="rule"] .accordion__trigger{opacity:1 !important;transform:none !important}
  .cert::before{transform:scaleY(1) !important}
  .pin{opacity:1 !important;transform:translate(-50%,-50%) !important}
  .pin::after{animation:none !important}
}

/* fascia tablet: due colonne. L'intervallo è chiuso a 768px perché
   questa regola sta in fondo al file e altrimenti scavalcherebbe
   quella del mobile, che vuole una colonna sola. */
@media (min-width:768px) and (max-width:1023px){
  .certs__list{grid-template-columns:1fr 1fr;gap:32px 0}
  /* la terza va a capo: la sua divisoria diventa orizzontale */
  .cert:nth-child(3){border-inline-start:0;padding-inline-start:0;padding-top:32px}
  .cert:nth-child(3)::before{
    left:0;right:0;top:0;bottom:auto;width:auto;height:1px;
    transform:scaleX(0);transform-origin:left;
  }
  .cert:nth-child(3).is-visible::before{transform:scaleX(1)}
}