/* ===== RESET & BASE ===== */

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



/*

  .sr-only — heading/testo per SEO e screen reader, invisibile a schermo

  ma presente nel DOM e nell'albero di accessibilità (no display:none).

*/

.sr-only {

  position: absolute !important;

  width: 1px; height: 1px;

  padding: 0; margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}



:root {

  --bg:    #014b6e;   /* sfondo principale */

  --gold:  #f2bd52;   /* dettagli / accent */

  --white: #ffffff;

  --black: #000000;

}



/*

  Mangogrotesque — font originale di detroit.paris (CDN Webflow).

  Se l'URL non è raggiungibile, Anton (Google Fonts) è il fallback.

*/

@font-face {

  font-family: 'Mangogrotesque';

  src: url('https://cdn.prod.website-files.com/6916ebf7b464c0b6f4525011/69181a2028e7b970ff371011_MangoGrotesque-Bold.woff2') format('woff2');

  font-weight: 700;

  font-style: normal;

  font-display: swap;

}



html, body {

  width: 100%;

  height: 100%;

  overflow: hidden;

  background-color: var(--bg);

  font-family: 'Barlow', sans-serif;

  font-size: 1rem;

  font-weight: 400;

  line-height: 1.5;

  color: var(--white);

  cursor: default;

}



/* ===== NAVBAR ===== */

.nav-boiler {

  position: fixed;

  inset: 0 0 auto 0;

  z-index: 101;            /* sopra l'overlay: il toggle resta cliccabile */

  width: 100vw;

  min-height: 3.5rem;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 1rem 2.25rem;   /* l'aria attorno al logo e al bottone Menu */

  pointer-events: none;

  color: var(--white);

}



.nav-boiler .nav-logo {

  pointer-events: auto;

  display: flex;

  align-items: center;

}

/*

  ⚠️ Il png è 1318×1318 con la testa dentro il riquadro x 266-1052 / y 246-1034:

  il glifo occupa il 59.8% dell'altezza del file e il resto è trasparente.

  Dimensionando il file la testa risulterebbe grande il doppio del previsto e

  staccata dall'angolo, quindi --logo-h è l'altezza della TESTA a schermo e i

  margini negativi tolgono il bordo trasparente (20.2% sx, 18.7% top,

  21.5% bottom). Se sostituisci il png, ricalcola quelle percentuali.

*/

.nav-boiler .nav-logo img {

  --logo-h: clamp(24px, 2.4vw, 32px);        /* altezza della testa a schermo */

  --logo-file: calc(var(--logo-h) / 0.598);  /* altezza del file intero */

  height: var(--logo-file);

  width: auto;

  display: block;

  margin: calc(var(--logo-file) * -0.187)

          calc(var(--logo-file) * -0.202)

          calc(var(--logo-file) * -0.215)

          calc(var(--logo-file) * -0.202);

}



/* ===== MENU TOGGLE (hamburger → X) ===== */

.menu-toggle {

  pointer-events: auto;

  display: inline-flex;

  align-items: center;

  gap: 0.6rem;

  background: none;

  border: none;

  cursor: pointer;

  padding: 0.4rem 0;

  color: var(--white);

}

.menu-toggle-label {

  font-family: 'Barlow', sans-serif;

  font-weight: 700;

  font-size: 0.78rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  transition: color 0.25s ease;

}

.menu-toggle-icon {

  position: relative;

  width: 26px;

  height: 12px;

  display: inline-block;

}

.menu-toggle-icon span {

  position: absolute;

  left: 0;

  width: 100%;

  height: 2px;

  background: var(--gold);

  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), top 0.3s ease;

}

.menu-toggle-icon span:nth-child(1) { top: 0; }

.menu-toggle-icon span:nth-child(2) { top: 10px; }



.menu-toggle:hover .menu-toggle-label { color: var(--gold); }



/* Sulla sezione Servizi lo sfondo cambia colore mentre si scorre e su

   Creative diventa bianco: navbar bianca fissa = navbar invisibile.

   --sv-fg lo scrive applyColors() anche su :root apposta.

   Il menu aperto è escluso: lì l'overlay è sempre blu. */

body[data-panel="services"]:not(.menu-open) .menu-toggle-label {

  color: var(--sv-fg, var(--white));

}

body[data-panel="services"]:not(.menu-open) .menu-toggle-icon span {

  background: var(--sv-accent, var(--gold));

}



/* Stato aperto: le due linee diventano una X */

body.menu-open .menu-toggle-icon span:nth-child(1) {

  top: 5px;

  transform: rotate(45deg);

}

body.menu-open .menu-toggle-icon span:nth-child(2) {

  top: 5px;

  transform: rotate(-45deg);

}



/* ===== MARCHIO FISSO "どろろ" — basso a destra =====

   Il png è un glifo a tinta unita su fondo trasparente, quindi si usa come

   MASCHERA e non come immagine: il colore lo dà il CSS. Serve perché sulla

   sezione Servizi lo sfondo diventa bianco e giallo, e una scritta gialla

   fissa lì dentro sparirebbe (stesso motivo della navbar, riga sopra).



   ⚠️ Il file è 1318×1318 quasi tutto trasparente: il glifo occupa solo il

   riquadro x 324-1020 / y 484-732, cioè il 52.8% della larghezza e il 18.8%

   dell'altezza. Dimensionare il box sul file lascerebbe la scritta lontana

   dall'angolo, quindi --mark-w è la larghezza della SCRITTA e gli offset

   sottraggono il margine trasparente (22.6% a destra, 44.5% in basso).

   Se sostituisci il png, ricalcola quelle quattro percentuali. */

.brand-mark {

  --mark-w: clamp(70px, 7vw, 118px);       /* larghezza della scritta a schermo */

  --mark-file: calc(var(--mark-w) / 0.528); /* larghezza del file intero */

  position: fixed;

  z-index: 102;                             /* sopra navbar (101) e pannelli */

  right:  calc(2.25rem - var(--mark-file) * 0.226);   /* stesso rientro della navbar */

  bottom: calc(1.5rem  - var(--mark-file) * 0.445);

  width: var(--mark-file);

  aspect-ratio: 1;

  pointer-events: none;                     /* decorativo: non ruba i click */

  background-color: var(--gold);

  -webkit-mask: url('scritta gialla.png') center / contain no-repeat;

  mask: url('scritta gialla.png') center / contain no-repeat;

  opacity: 0.9;

  transition: opacity 0.3s ease, background-color 0.3s ease;

}



/* Sui Servizi segue il tema come la navbar */

body[data-panel="services"]:not(.menu-open) .brand-mark {

  background-color: var(--sv-accent, var(--gold));

}



/* A menu aperto sparisce: il footer dell'overlay arriva fin lì */

body.menu-open .brand-mark { opacity: 0; }



/* ===== MENU OVERLAY FULLSCREEN ===== */

.menu-overlay {

  position: fixed;

  inset: 0;

  z-index: 100;

  background: var(--bg);

  /* Due righe: le voci prendono lo spazio libero, il footer solo il suo.

     Serve a fitMenu() per sapere quanta altezza resta davvero alle voci. */

  display: grid;

  grid-template-rows: 1fr auto;

  padding: 7rem 1.5rem 2.5rem;

  /* Rete di sicurezza: sotto al pavimento di fitMenu() il contenuto sfora

     e senza questo il footer resterebbe irraggiungibile. */

  overflow-y: auto;

  overscroll-behavior: contain;

  /* La barra resterebbe visibile solo per l'istante in cui il footer entra

     dal basso: un lampo verticale a destra a ogni apertura. */

  scrollbar-width: none;

  opacity: 0;

  visibility: hidden;

  transform: translateY(-1.5%);

  transition:

    opacity 0.45s ease,

    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),

    visibility 0.45s ease;

}

.menu-overlay::-webkit-scrollbar { display: none; }

body.menu-open .menu-overlay {

  opacity: 1;

  visibility: visible;

  transform: none;

}



/* Lista voci giganti */

.menu-nav {

  display: flex;

  flex-direction: column;

  gap: var(--menu-gap, 0.4rem);

  /* centrato nella riga 1fr; 'safe' evita che in overflow la prima voce

     finisca sopra al bordo e diventi irraggiungibile. La riga sopra è il

     fallback per chi non conosce 'safe' e scarterebbe la dichiarazione. */

  align-self: center;

  align-self: safe center;

  min-height: 0;

}

.menu-link {

  position: relative;

  display: inline-flex;

  align-items: baseline;

  gap: 1rem;

  width: fit-content;

  text-decoration: none;

  color: var(--white);

  font-family: 'Mangogrotesque', 'Anton', Arial Black, sans-serif;

  /* ⚠️ Il fallback dipende solo dalla larghezza: sei voci in colonna a 9vw

     sfondano qualsiasi finestra bassa. Il valore buono lo scrive fitMenu()

     in --menu-fs, che tiene conto anche dell'altezza rimasta. */

  font-size: var(--menu-fs, clamp(2.8rem, 9vw, 8rem));

  line-height: var(--menu-lh, 1.02);

  text-transform: uppercase;

  /* stato chiuso → entra dal basso, staggerato */

  opacity: 0;

  transform: translateY(40px);

  transition:

    opacity 0.5s ease,

    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),

    color 0.25s ease;

}

body.menu-open .menu-link { opacity: 1; transform: none; }

body.menu-open .menu-link:nth-child(1) { transition-delay: 0.08s; }

body.menu-open .menu-link:nth-child(2) { transition-delay: 0.16s; }

body.menu-open .menu-link:nth-child(3) { transition-delay: 0.24s; }

body.menu-open .menu-link:nth-child(4) { transition-delay: 0.32s; }

body.menu-open .menu-link:nth-child(5) { transition-delay: 0.40s; }

body.menu-open .menu-link:nth-child(6) { transition-delay: 0.48s; }



.menu-link:hover { color: var(--gold); }



.menu-link-num {

  font-family: 'Barlow', sans-serif;

  font-size: clamp(0.7rem, 1.4vw, 1rem);

  font-weight: 700;

  color: var(--gold);

  letter-spacing: 0.05em;

  align-self: flex-start;

  margin-top: 0.4em;

}



/* Voce di menu non ancora attiva (es. Shop): spenta e non cliccabile */

.menu-link--soon,

.menu-link--soon:hover {

  color: rgba(255, 255, 255, 0.38);

  cursor: default;

  pointer-events: none;

}

.menu-link--soon .menu-link-num { color: rgba(242, 189, 82, 0.45); }

.menu-link-soon {

  align-self: flex-start;

  margin-top: 0.55em;

  padding: 0.35em 0.8em;

  border: 1px solid rgba(242, 189, 82, 0.45);

  border-radius: 999px;

  font-family: 'Barlow', sans-serif;

  font-size: clamp(0.58rem, 1.1vw, 0.8rem);

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--gold);

  white-space: nowrap;

}



/* Footer del menu */

.menu-footer {

  display: flex;

  flex-wrap: wrap;

  gap: 2.5rem;

  padding-top: 2rem;

  border-top: 1px solid rgba(255, 255, 255, 0.15);

  /* anima insieme all'overlay */

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.5s ease 0.35s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;

}

body.menu-open .menu-footer { opacity: 1; transform: none; }



.menu-footer-col {

  display: flex;

  flex-direction: column;

  gap: 0.4rem;

}

.menu-footer-label {

  font-size: 0.65rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: var(--gold);

  margin-bottom: 0.2rem;

}

.menu-footer-col a,

.menu-footer-col span {

  color: var(--white);

  text-decoration: none;

  font-size: 0.95rem;

}

.menu-footer-col a { transition: color 0.2s ease; }

.menu-footer-col a:hover { color: var(--gold); }

.menu-footer-socials {

  display: flex;

  gap: 1.1rem;

  --social-size: 1.3rem;

}

/* Solo icone bianche: il nome sta in aria-label/title */

.menu-footer-col .menu-footer-socials a {

  display: inline-flex;

  width: var(--social-size);

  height: var(--social-size);

}

.menu-footer-socials svg {

  width: 100%;

  height: 100%;

}

.menu-footer-col .menu-footer-socials a:focus-visible { color: var(--gold); }

/* Tagline nell'angolo in basso a destra: margin-left auto la spinge al

   bordo anche quando il footer va a capo */

.menu-footer-tagline {

  margin: 0 0 0 auto;

  align-self: flex-end;

  color: var(--white);

  font-size: 0.95rem;

  text-align: right;

}

/* Partita IVA: obbligo di legge, ma non deve competere con i contatti */

.menu-footer-col .menu-footer-vat {

  font-size: 0.75rem;

  color: rgba(255, 255, 255, 0.5);

  letter-spacing: 0.02em;

}



/* ===== STAGE & PANNELLI — navigazione "in discesa" ===== */

.stage {

  position: fixed;

  inset: 0;

  z-index: 1;

  overflow: hidden;

}



/*

  Ogni pannello è a schermo intero. Stato di riposo: appena SOTTO la viewport

  (translateY(100%)), pronto a "salire". Quando diventa attivo va a 0; quando

  viene lasciato esce verso l'ALTO (-100%). Risultato: il sito sembra scendere.

*/

.panel {

  position: absolute;

  inset: 0;

  background: var(--bg);

  transform: translateY(100%);

  transition: transform 0.95s cubic-bezier(0.76, 0, 0.24, 1);

  will-change: transform;

}

.panel.is-active { transform: translateY(0); }

.panel.is-exit   { transform: translateY(-100%); }



/* Contenuto interno comune ai pannelli testuali */

.panel-inner {

  position: relative;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 1rem;

  padding: 7rem 1.5rem 3rem;

}

.panel-eyebrow {

  font-size: 0.7rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  color: var(--gold);

}



/*

  .drop — l'elemento "cade" dall'alto quando il pannello diventa attivo.

  Riposo: sopra di sé e invisibile. Attivo: in posizione. Stagger via --d.

*/

.drop {

  opacity: 0;

  transform: translateY(-115%);

  transition:

    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),

    opacity 0.6s ease;

  transition-delay: var(--d, 0s);

}

.panel.is-active .drop {

  opacity: 1;

  transform: translateY(0);

}



/* ── WORK — gallery verticale laterale ── */

.work-eyebrow {

  position: absolute;

  top: clamp(5.5rem, 11vw, 7.5rem);

  left: 1.5rem;

  z-index: 3;

  font-size: 0.7rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  color: var(--gold);

}

.work-wrap {

  position: absolute;

  inset: 0;

}



/* Colonna nomi (sinistra) */

.work-names {

  position: absolute;

  top: 0;

  left: 0;

  width: 58%;

  height: 100%;

  overflow: hidden;

  /* I nomi scorrono su tutta l'altezza e passano sotto alla navbar e

     all'eyebrow "Selected work". La sfumatura in alto e in basso li spegne

     prima che ci finiscano addosso — l'alternativa sarebbe accorciare la

     colonna, ma allora il nome selezionato non starebbe più a metà schermo. */

  -webkit-mask-image: linear-gradient(to bottom,

    transparent 0, transparent 3.5rem, #000 clamp(8rem, 16vh, 11rem),

    #000 calc(100% - 3rem), transparent 100%);

  mask-image: linear-gradient(to bottom,

    transparent 0, transparent 3.5rem, #000 clamp(8rem, 16vh, 11rem),

    #000 calc(100% - 3rem), transparent 100%);

}

.work-name {

  position: absolute;

  top: 0;

  left: clamp(1.5rem, 5vw, 5rem);

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  padding: 0;

  background: none;

  border: none;

  cursor: pointer;

  color: var(--white);

  text-align: left;

  transform-origin: left center;

  will-change: transform, opacity;

  transition: color 0.3s ease;

}

.work-name-head {

  display: flex;

  align-items: baseline;

  gap: 0.7rem;

  white-space: nowrap;

}

.work-name-num {

  font-family: 'Barlow', sans-serif;

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.05em;

  color: var(--gold);

  opacity: 0;

  transition: opacity 0.3s ease;

}

.work-name-text {

  font-family: 'Mangogrotesque', 'Anton', Arial Black, sans-serif;

  font-size: clamp(3rem, 6.4vw, 5.6rem);

  line-height: 1;

  text-transform: uppercase;

}

/* Descrizione — visibile solo per il lavoro selezionato */

.work-name-desc {

  display: block;

  max-width: 22rem;

  margin-top: 0;

  max-height: 0;

  opacity: 0;

  overflow: hidden;

  font-family: 'Barlow', sans-serif;

  font-size: 0.62rem;

  line-height: 1.45;

  letter-spacing: 0.01em;

  text-transform: none;

  color: rgba(255, 255, 255, 0.6);

  transition:

    max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1),

    opacity 0.35s ease,

    margin-top 0.45s ease;

}

.work-name.is-selected { color: var(--gold); }

.work-name.is-selected .work-name-num { opacity: 1; }

.work-name.is-selected .work-name-desc {

  max-height: 5rem;

  opacity: 1;

  margin-top: 0.5rem;

}



/* Colonna gallery (destra) */

.work-gallery {

  position: absolute;

  top: 0;

  right: 0;

  width: 42%;

  height: 100%;

  overflow: hidden;

  /* Stessa ragione dei nomi: le card sono ancorate a destra, dove c'è il

     bottone Menu, e senza sfumatura gli passano sopra. */

  -webkit-mask-image: linear-gradient(to bottom,

    transparent 0, transparent 4rem, #000 clamp(7rem, 13vh, 9.5rem),

    #000 100%);

  mask-image: linear-gradient(to bottom,

    transparent 0, transparent 4rem, #000 clamp(7rem, 13vh, 9.5rem),

    #000 100%);

}

.work-card {

  position: absolute;

  top: 0;

  right: 0;                       /* ancorata al bordo destro dello schermo */

  width: clamp(230px, 26vw, 400px);

  height: clamp(310px, 36vw, 520px);

  transform-origin: center right;  /* scala verso sinistra: il lato destro resta attaccato */

  will-change: transform, opacity;

  overflow: hidden;

}

.work-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  user-select: none;

  -webkit-user-drag: none;

}



/* ── WORK su schermi stretti ──

   Le due colonne affiancate (nomi 58% / foto 42%) sotto i 760px si

   accavallano: i titoli finiscono tagliati e le descrizioni spariscono

   sotto alle foto. Qui si impilano: foto al centro in alto, e in basso il

   SOLO lavoro selezionato con la sua descrizione.



   ⚠️ layout() riscrive transform e opacity di ogni .work-name a ogni frame,

   in inline style: da CSS si vince solo con !important. Non è una scorciatoia,

   è l'unico modo di neutralizzare l'impilamento verticale senza duplicare

   in JS tutta la logica di posizionamento.                                  */

@media (max-width: 760px) {

  .work-names {

    top: auto;

    bottom: 0;

    left: 0;

    width: 100%;

    height: auto;

    /* Il padding in alto serve al gradiente: senza, il titolo cadrebbe

       proprio dove lo sfondo è ancora trasparente e la card si vedrebbe

       attraverso le lettere. */

    padding: 4.5rem 1.3rem 2rem;

    overflow: visible;

    -webkit-mask-image: none;

    mask-image: none;

    z-index: 5;

    background: linear-gradient(to top, var(--bg) 0, var(--bg) 72%, transparent 100%);

    pointer-events: none;

  }

  .work-name {

    position: static;

    left: auto;

    display: none;

    transform: none !important;

    opacity: 0 !important;

  }

  .work-name.is-selected {

    display: flex;

    opacity: 1 !important;

    pointer-events: auto;

  }

  .work-name-head { white-space: normal; }

  .work-name-text { font-size: clamp(1.9rem, 9vw, 3rem); }

  .work-name-desc { font-size: 0.72rem; max-width: none; }

  .work-name.is-selected .work-name-desc { max-height: 9rem; }



  .work-gallery {

    width: 100%;

    /* Card centrata invece che incollata al bordo destro */

    /* La card che scorre in alto passa dietro a logo, Menu ed eyebrow:

       resta spenta finché non li ha superati. */

    -webkit-mask-image: linear-gradient(to bottom,

      transparent 0, transparent 3.5rem, #000 9rem, #000 100%);

    mask-image: linear-gradient(to bottom,

      transparent 0, transparent 3.5rem, #000 9rem, #000 100%);

  }

  .work-card {

    right: 12%;

    left: 12%;

    width: auto;

    height: clamp(230px, 46vh, 420px);

    transform-origin: center center;

  }

}



/* ── SERVICES — "Tre Pilastri" kinetic ──

   La rotella muove #svTrack (lerp via JS). Scorrendo si attraversano i 3 rami

   (Creative / Digital / Consulting): lo sfondo e il testo morphano colore

   (JS interpola --sv-bg / --sv-fg / --sv-accent su .panel-services) e ogni

   pilastro rivela i propri servizi in sequenza. */

.panel-services {

  --sv-bg: #014b6e;

  --sv-fg: #ffffff;

  --sv-accent: #f2bd52;

  background: var(--sv-bg);

  color: var(--sv-fg);

}

/* I pilastri sono più alti di una schermata: il loro contenuto scorre sotto

   al logo e al bottone Menu, che non hanno fondo. Questa velatura in alto usa

   --sv-bg, quindi segue da sola il morph colore della sezione. */

.panel-services::before {

  content: '';

  position: absolute;

  inset: 0 0 auto 0;

  height: clamp(4.5rem, 11vh, 7rem);

  background: linear-gradient(to bottom,

    var(--sv-bg) 0, var(--sv-bg) 42%, transparent 100%);

  z-index: 5;

  pointer-events: none;

}

.sv-track {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  will-change: transform;

}



/* Blocco generico (intro / outro) a tutta altezza */

.sv-scene {

  position: relative;

  width: 100%;

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: clamp(6rem, 10vw, 8rem) 1.5rem 4rem;

  overflow: hidden;

}



/* Scena intro */

.sv-scene--intro {

  flex-direction: column;

  text-align: center;

  gap: 1.4rem;

}

.sv-eyebrow {

  font-size: 0.72rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.18em;

  color: var(--sv-accent);

}

.sv-headline {

  font-family: 'Mangogrotesque', 'Anton', Arial Black, sans-serif;

  font-size: clamp(2.6rem, 9vw, 7rem);

  line-height: 0.98;

  text-transform: uppercase;

  color: var(--sv-fg);

  will-change: transform;

}

.sv-headline em { color: var(--sv-accent); font-style: normal; }

.sv-intro-sub {

  max-width: 34rem;

  font-family: 'Barlow', sans-serif;

  font-size: clamp(0.95rem, 1.4vw, 1.1rem);

  line-height: 1.6;

  color: color-mix(in srgb, var(--sv-fg) 72%, transparent);

}

.sv-scroll-hint {

  margin-top: 0.5rem;

  font-size: 0.7rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: color-mix(in srgb, var(--sv-fg) 55%, transparent);

  animation: svBounce 1.8s ease-in-out infinite;

}

@keyframes svBounce {

  0%, 100% { transform: translateY(0); }

  50%      { transform: translateY(8px); }

}



/* ── PILASTRO (un ramo) ── */

.sv-pillar {

  position: relative;

  min-height: 100vh;

  display: flex;

  align-items: center;

  padding: clamp(6rem, 12vh, 9rem) clamp(1.5rem, 6vw, 6rem) clamp(4rem, 8vh, 6rem);

  overflow: hidden;

}

/* Parola gigante di sfondo, in outline, con drift parallax (JS) */

.sv-pillar-bgword {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  font-family: 'Mangogrotesque', 'Anton', Arial Black, sans-serif;

  font-size: clamp(8rem, 26vw, 24rem);

  line-height: 0.8;

  text-transform: uppercase;

  white-space: nowrap;

  color: transparent;

  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--sv-fg) 13%, transparent);

  pointer-events: none;

  will-change: transform;

  z-index: 0;

}

.sv-pillar-inner {

  position: relative;

  z-index: 1;

  width: 100%;

  max-width: 1120px;

  margin: 0 auto;

}

.sv-pillar-head { margin-bottom: clamp(1.8rem, 4vh, 3rem); }

.sv-pillar-num {

  font-family: 'Barlow', sans-serif;

  font-weight: 700;

  font-size: 0.85rem;

  letter-spacing: 0.2em;

  color: var(--sv-accent);

}

.sv-pillar-name {

  font-family: 'Mangogrotesque', 'Anton', Arial Black, sans-serif;

  font-size: clamp(3rem, 11vw, 9rem);

  line-height: 0.9;

  text-transform: uppercase;

  color: var(--sv-fg);

  margin: 0.25rem 0 0.7rem;

}

.sv-pillar-name b { color: var(--sv-accent); font-weight: inherit; }

.sv-pillar-tag {

  max-width: 42rem;

  font-family: 'Barlow', sans-serif;

  font-size: clamp(0.95rem, 1.4vw, 1.15rem);

  line-height: 1.55;

  color: color-mix(in srgb, var(--sv-fg) 78%, transparent);

}



/* Lista servizi in griglia */

.sv-svc-list {

  list-style: none;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: clamp(0.9rem, 2.2vw, 1.8rem) clamp(2rem, 5vw, 5rem);

}

.sv-svc {

  border-top: 1px solid color-mix(in srgb, var(--sv-fg) 22%, transparent);

  padding-top: 0.85rem;

  opacity: 0;

  transform: translateY(28px);

  transition:

    opacity 0.7s ease,

    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

  transition-delay: calc(var(--i, 0) * 55ms);

}

.sv-pillar.in .sv-svc { opacity: 1; transform: none; }

.sv-svc-link {

  position: relative;

  display: block;

  text-decoration: none;

  color: inherit;

  padding-right: 1.6rem;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}

.sv-svc-link:hover { transform: translateX(6px); }

.sv-svc-name {

  display: block;

  font-family: 'Mangogrotesque', 'Anton', Arial Black, sans-serif;

  font-size: clamp(1.3rem, 2.4vw, 2rem);

  line-height: 1.05;

  text-transform: uppercase;

  color: var(--sv-fg);

  transition: color 0.3s ease;

}

.sv-svc-link:hover .sv-svc-name { color: var(--sv-accent); }

.sv-svc-line {

  display: block;

  margin-top: 0.35rem;

  font-family: 'Barlow', sans-serif;

  font-size: 0.88rem;

  line-height: 1.5;

  color: color-mix(in srgb, var(--sv-fg) 68%, transparent);

}

.sv-svc-go {

  position: absolute;

  top: 0;

  right: 0;

  font-family: 'Barlow', sans-serif;

  font-weight: 700;

  color: var(--sv-accent);

  opacity: 0;

  transform: translateX(-6px);

  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}

.sv-svc-link:hover .sv-svc-go { opacity: 1; transform: none; }



/* Pilastro Partner: griglia a 3 colonne, scala leggermente ridotta */

.sv-pillar--partner .sv-pillar-name { font-size: clamp(2.4rem, 7vw, 5rem); }

.sv-pillar--partner .sv-svc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }



/* Scena outro */

.sv-scene--outro {

  flex-direction: column;

  text-align: center;

  gap: 1.5rem;

}

.sv-outro-title {

  font-family: 'Mangogrotesque', 'Anton', Arial Black, sans-serif;

  font-size: clamp(2.6rem, 10vw, 8rem);

  line-height: 0.95;

  text-transform: uppercase;

  color: var(--sv-accent);

}

.sv-cta {

  font-family: 'Barlow', sans-serif;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  font-size: 0.9rem;

  color: var(--sv-fg);

  text-decoration: none;

  border-bottom: 2px solid var(--sv-accent);

  padding-bottom: 0.2rem;

  transition: color 0.3s ease;

}

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

.sv-scene--outro .sv-outro-title,

.sv-scene--outro .sv-cta {

  opacity: 0;

  transform: translateY(40px);

  transition:

    opacity 0.9s ease,

    transform 1s cubic-bezier(0.16, 1, 0.3, 1);

}

.sv-scene--outro.in .sv-outro-title,

.sv-scene--outro.in .sv-cta { opacity: 1; transform: none; }



/* Mobile: liste a colonna singola */

@media (max-width: 760px) {

  .sv-svc-list,

  .sv-pillar--partner .sv-svc-list { grid-template-columns: 1fr; }

  .sv-pillar-bgword { font-size: clamp(6rem, 34vw, 12rem); }

}



/* ── STUDIO ── */

.studio-statement {

  font-family: 'Mangogrotesque', 'Anton', Arial Black, sans-serif;

  font-size: clamp(2rem, 7vw, 5.5rem);

  line-height: 1.02;

  text-transform: uppercase;

  color: var(--white);

}

.studio-statement span { display: block; }

.studio-statement em { color: var(--gold); font-style: normal; }

.studio-note {

  margin-top: 1.5rem;

  font-size: 0.78rem;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: rgba(255, 255, 255, 0.7);

}



/* Frase a sinistra, "foto" 404 a destra; impilati sotto i 760px.

   La foto sta verso destra ma staccata dal bordo (padding-right):

   attaccata al bordo o centrata nel vuoto non funzionava. */

.studio-layout {

  display: grid;

  grid-template-columns: max-content minmax(0, 1fr);

  align-items: center;

  gap: 3rem;

  padding-right: clamp(0px, 8vw, 8rem);

}

.studio-layout .studio-404 {

  justify-self: end;

  width: min(100%, 34rem);

}

@media (min-width: 761px) {

  /* metà larghezza: il corpo pieno 7vw farebbe sforare "di comunicazione" */

  .studio-statement { font-size: clamp(2rem, 5.4vw, 5.5rem); }

}



/*

  Segnaposto 404 — riquadro semplice, glitch solo sul numero.

  Due copie (::before bianca, ::after blu chiaro, via data-text)

  compaiono a strisce sfalsate in tre raffiche per ciclo.

*/

.studio-404 {

  margin: 0;

  width: 100%;

  max-width: min(100%, 72vh);

  aspect-ratio: 4 / 3;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #011f35;

}

.studio-404-code {

  position: relative;

  font-family: 'Mangogrotesque', 'Anton', Arial Black, sans-serif;

  font-size: clamp(4.5rem, 13vw, 11rem);

  line-height: 0.9;

  color: var(--gold);

  animation: studio404-jump 2s steps(1) infinite;

}

.studio-404-code::before,

.studio-404-code::after {

  content: attr(data-text);

  position: absolute;

  inset: 0;

  clip-path: inset(0 0 100% 0);

}

.studio-404-code::before {

  color: var(--white);

  animation: studio404-slice-a 2s steps(1) infinite;

}

.studio-404-code::after {

  color: #5fc4f0;

  animation: studio404-slice-b 2s steps(1) infinite;

}

@keyframes studio404-jump {

  0%, 12%, 40%, 46%, 74%, 100% { transform: none; }

  4%  { transform: translateX(-8px) skewX(-6deg); }

  8%  { transform: translateX(6px); }

  42% { transform: translateX(5px); }

  76% { transform: translateX(-10px) skewX(8deg); }

  80% { transform: translateX(4px); }

  84% { transform: none; }

}

@keyframes studio404-slice-a {

  0%, 14%, 38%, 48%, 72%, 90% { clip-path: inset(0 0 100% 0); transform: none; }

  2%  { clip-path: inset(10% 0 65% 0); transform: translateX(14px); }

  6%  { clip-path: inset(55% 0 25% 0); transform: translateX(-12px); }

  10% { clip-path: inset(80% 0 5% 0);  transform: translateX(8px); }

  40% { clip-path: inset(35% 0 45% 0); transform: translateX(-9px); }

  44% { clip-path: inset(70% 0 12% 0); transform: translateX(11px); }

  74% { clip-path: inset(0 0 75% 0);   transform: translateX(-16px); }

  78% { clip-path: inset(45% 0 30% 0); transform: translateX(12px); }

  82% { clip-path: inset(85% 0 0 0);   transform: translateX(-6px); }

  86% { clip-path: inset(20% 0 60% 0); transform: translateX(7px); }

}

@keyframes studio404-slice-b {

  0%, 14%, 38%, 48%, 72%, 90% { clip-path: inset(0 0 100% 0); transform: none; }

  4%  { clip-path: inset(30% 0 50% 0); transform: translateX(-10px); }

  8%  { clip-path: inset(65% 0 15% 0); transform: translateX(9px); }

  42% { clip-path: inset(5% 0 80% 0);  transform: translateX(12px); }

  76% { clip-path: inset(50% 0 20% 0); transform: translateX(14px); }

  80% { clip-path: inset(15% 0 70% 0); transform: translateX(-12px); }

  84% { clip-path: inset(75% 0 8% 0);  transform: translateX(6px); }

}

@media (prefers-reduced-motion: reduce) {

  .studio-404-code,

  .studio-404-code::before,

  .studio-404-code::after { animation: none; }

}



@media (max-width: 760px) {

  .studio-layout {

    grid-template-columns: 1fr;

    gap: 1.6rem;

    padding-right: 0;

  }

  /* sotto la frase: più bassa, per non far sforare il pannello */

  .studio-404 {

    justify-self: stretch;

    max-width: none;

    aspect-ratio: 16 / 10;

    max-height: 32vh;

  }

  .studio-404-code { font-size: clamp(3.5rem, 20vw, 6rem); }

}



/* ── CONTACT — stra-semplice: email, telefono, indirizzo + form ── */

.contact-grid {

  margin-top: 1.5rem;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: clamp(2rem, 6vw, 5rem);

  align-items: start;

  width: 100%;

  max-width: 1000px;

}

.contact-big {

  display: block;

  width: fit-content;

  text-decoration: none;

  font-family: 'Mangogrotesque', 'Anton', Arial Black, sans-serif;

  font-size: clamp(2.6rem, 8vw, 5.5rem);

  line-height: 0.9;

  text-transform: uppercase;

  color: var(--white);

  transition: color 0.3s ease;

}

.contact-big:hover { color: var(--gold); }



.contact-list {

  list-style: none;

  margin-top: 1.6rem;

  display: flex;

  flex-direction: column;

  gap: 1rem;

}

.contact-list li { display: flex; flex-direction: column; gap: 0.15rem; }

.contact-k {

  font-family: 'Barlow', sans-serif;

  font-weight: 700;

  font-size: 0.66rem;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--gold);

}

.contact-list a,

.contact-list span:not(.contact-k) {

  font-family: 'Barlow', sans-serif;

  font-size: 1.05rem;

  color: var(--white);

  text-decoration: none;

  width: fit-content;

}

.contact-list a { transition: color 0.25s ease; }

.contact-list a:hover { color: var(--gold); }



/* Form essenziale: input a sola riga inferiore */

.contact-form { display: flex; flex-direction: column; gap: 1.3rem; }

.cf-field { display: flex; flex-direction: column; gap: 0.4rem; }

.cf-field > span {

  font-family: 'Barlow', sans-serif;

  font-weight: 700;

  font-size: 0.66rem;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.65);

}

.cf-field input,

.cf-field textarea {

  font-family: 'Barlow', sans-serif;

  font-size: 1rem;

  color: var(--white);

  background: transparent;

  border: none;

  border-bottom: 1px solid rgba(255, 255, 255, 0.3);

  padding: 0.4rem 0;

  resize: vertical;

  transition: border-color 0.25s ease;

}

.cf-field input:focus,

.cf-field textarea:focus {

  outline: none;

  border-bottom-color: var(--gold);

}

.cf-field input::placeholder,

.cf-field textarea::placeholder { color: rgba(255, 255, 255, 0.35); }

.cf-submit {

  align-self: flex-start;

  margin-top: 0.4rem;

  font-family: 'Barlow', sans-serif;

  font-weight: 700;

  font-size: 0.8rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--bg);

  background: var(--gold);

  border: none;

  border-radius: 999px;

  padding: 0.7rem 1.6rem;

  cursor: pointer;

  transition: transform 0.25s ease, opacity 0.25s ease;

}

.cf-submit:hover { transform: translateY(-2px); }

.cf-note {

  font-family: 'Barlow', sans-serif;

  font-size: 0.8rem;

  color: rgba(255, 255, 255, 0.6);

}



@media (max-width: 760px) {

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

}



/* ===== HERO CONTAINER FISSO ===== */

.pv-home {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100vh;

  z-index: 1;

}



/* ===== SECTION CENTER ===== */

.s-center {

  background-color: var(--bg);

  width: 100%;

  height: 100vh;

  min-height: 100vh;

  position: relative;

  display: flex;

  justify-content: flex-start;

  align-items: stretch;

  overflow: hidden;

}



/* ===== MAIN CONTENT ===== */

.c-home {

  position: relative;

  width: 100%;

  height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  align-items: stretch;

  padding-top: clamp(6rem, 12vw, 8rem);  /* lascia spazio al logo della navbar */

}



/* ===== HEADLINE BLOCK ===== */

.header-text-block {

  position: relative;

  /* Sopra le card: lo z-index della gallery arriva a round(SCALE_MAX × 10) = 21.

     Senza questo, la card che scorre sotto al sottotitolo glielo taglia a metà. */

  z-index: 30;

  padding: 0 1.5rem;

  pointer-events: none;

  user-select: none;

}



.fat-text {

  /* Mangogrotesque se carica, Anton come fallback robusto */

  font-family: 'Mangogrotesque', 'Anton', Arial Black, sans-serif;

  font-size: clamp(5rem, 14vw, 14.375rem);

  font-weight: 700;

  line-height: 0.8;

  text-transform: uppercase;

  color: var(--gold);

}



.fat-text.snd {

  margin-top: -0.5rem;

}



.subtitle-block {

  margin-top: 1.5rem;

}



.h1-home {

  font-family: 'Barlow', sans-serif;

  font-size: 0.75rem;

  font-weight: 700;

  line-height: 1.3;

  text-transform: uppercase;

  letter-spacing: 0.02em;

  max-width: 22rem;

  color: var(--white);

}



.tag-line {

  font-size: 0.7rem;

  font-weight: 400;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  margin-top: 0.4rem;

  color: var(--white);

}



/* ===== GALLERY CONTAINER ===== */

.artist-list-w {

  position: absolute;

  inset: auto 0 0;

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: flex-start;

  align-items: flex-end;

  font-size: 2rem;

  user-select: none;

  pointer-events: none;

  overflow: visible;

}



.artist-list {

  position: relative;

  display: flex;

  flex-direction: row;

  align-items: flex-end;

  height: 100%;

  width: 0;

  pointer-events: none;

}



/* ===== GALLERY ITEM ===== */

.gallery-item {

  position: absolute;

  left: 0;

  bottom: 0;

  /* Misure calcolate da applyResponsiveConfig() in main.js: derivano dal

     viewport, i px qui sotto sono solo il fallback prima che il JS parta. */

  width: var(--item-w, 519px);

  height: var(--item-h, 476px);

  pointer-events: auto;

  transform-origin: left bottom;

  will-change: transform, scale, opacity;

  scale: 0;                /* nascosto prima che JS lo inizializzi */

  overflow: visible;

  --parallax-x: 0%;

}



.gallery-item a {

  display: block;

  width: 100%;

  height: 100%;

  overflow: hidden;

  text-decoration: none;

  user-select: none;

}



/* Immagine con parallax interno */

.gallery-item img,

.gallery-item video {

  pointer-events: none;

  user-select: none;

  -webkit-user-drag: none;

  width: 110%;          /* leggermente più larga per spazio parallax */

  height: 100%;

  object-fit: cover;

  will-change: transform;

  transform: translate(var(--parallax-x));

  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);

  display: block;

}



/* Hover: aggiunge scale 1.03 all'immagine */

.gallery-item:hover img,

.gallery-item:hover video {

  transform: translate(var(--parallax-x)) scale(1.03);

}



/* ===== TAG (TITOLO) — sale dal basso all'hover ===== */

.item-tag {

  position: absolute;

  inset: -5% auto auto 0;

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  font-size: 0.75rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  color: var(--gold);

  transform-origin: left bottom;

  will-change: translate, opacity;

  translate: 0 100%;

  opacity: 0;

  transition:

    translate 0.4s cubic-bezier(0.33, 1, 0.68, 1),

    opacity   0.4s cubic-bezier(0.33, 1, 0.68, 1);

  pointer-events: none;

  white-space: nowrap;

}



.gallery-item:hover .item-tag {

  translate: 0 0;

  opacity: 1;

}



/* Dove non c'è il puntatore (telefoni, tablet) :hover non scatta mai e i

   titoli resterebbero invisibili per sempre. Li mostra la card al centro,

   marcata .is-current da updateLayout(). */

@media (hover: none) {

  .gallery-item.is-current .item-tag {

    translate: 0 0;

    opacity: 1;

  }

}



.item-tag .dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--gold);

  flex-shrink: 0;

}



/* ===== RESPONSIVE ===== */



/* Sotto i 1024px il titolo sta sopra alla gallery invece che a sinistra.

   Appoggiato in alto lasciava un buco di blu fino alle foto: qui si centra

   nello spazio che resta sopra la banda delle immagini. --gallery-h è

   l'altezza della foto più grande, la scrive applyResponsiveConfig(). */

@media (max-width: 1023px) {

  .c-home {

    justify-content: center;

    padding-top: 4rem;

    padding-bottom: var(--gallery-h, 40vh);

  }

}



/* Tablet */

@media (max-width: 900px) {

  .nav-boiler { padding: 0 1rem; }

  .header-text-block { padding: 0 1rem; }

}



/* Mobile */

@media (max-width: 600px) {

  .nav-boiler {

    padding: 0 0.9rem;

    min-height: 3rem;

  }

  .menu-toggle-label { font-size: 0.7rem; }

  .menu-overlay { padding: 5.5rem 1.2rem 1.6rem; }

  /* Tre colonne affiancate su 390px diventano tre colonnine da 8ch:

     impilate restano leggibili e costano meno altezza del wrap a metà. */

  .menu-footer {

    gap: 1.1rem;

    padding-top: 1.4rem;

  }

  .menu-footer-col { gap: 0.25rem; }

  .menu-footer-label { font-size: 0.6rem; margin-bottom: 0.1rem; }

  .menu-footer-col a,

  .menu-footer-col span { font-size: 0.88rem; }

  .menu-footer-socials { gap: 1rem; --social-size: 1.2rem; }

  .menu-footer-tagline { font-size: 0.88rem; }



  /* Il titolo prende tutta la larghezza disponibile: su 390px lo spazio

     è poco e il blocco testo deve lasciare aria alla gallery sotto. */

  .header-text-block { padding: 0 1.1rem; }

  .fat-text { font-size: clamp(3.4rem, 24vw, 8rem); }

  .fat-text.snd { margin-top: -0.3rem; }

  .subtitle-block { margin-top: 1rem; }

  .h1-home { font-size: 0.68rem; max-width: 24ch; }

  .tag-line { font-size: 0.62rem; }



  /* ⚠️ Il titolo vive dentro .gallery-item, che è scalato: a scala 1.36

     un titolo lungo come "Live Session Performance" finirebbe fuori dallo

     schermo. Dividendo per --sc (scritto da updateLayout a ogni frame)

     resta a corpo costante qualunque sia la scala della card. */

  .item-tag {

    inset: calc(-14px / var(--sc, 1)) auto auto 0;

    font-size: calc(0.72rem / var(--sc, 1));

    padding-left: calc(14px / var(--sc, 1));

    gap: calc(0.5rem / var(--sc, 1));

  }

  .item-tag .dot {

    width:  calc(6px / var(--sc, 1));

    height: calc(6px / var(--sc, 1));

  }

}



/* ⚠️ Telefono con la barra URL aperta (es. 375×600). Lì il blocco titolo si

   mangia il 38% dell'altezza, e il tetto di applyResponsiveConfig() se la

   prendeva con le foto: rimpicciolendo la card si accorcia anche lo slot,

   così ne entravano cinque invece di tre, piccole. A cedere dev'essere il

   testo, non le immagini. */

@media (max-width: 600px) and (max-height: 700px) {

  .fat-text { font-size: clamp(2.6rem, 17vw, 5rem); }

  .h1-home  { font-size: 0.62rem; max-width: 32ch; }

  .subtitle-block { margin-top: 0.7rem; }

}



/* =========================================================================

   PAGINE STATICHE SERVIZIO — /servizio/<slug>/ e hub /servizio/

   Pagine reali (non SPA): scroll verticale normale, contenuto completo.

   ========================================================================= */

html.svc-html { height: auto; overflow-y: auto; }

.svc-html body.svc-body {

  height: auto;

  min-height: 100%;

  overflow: visible;

  background: #011f35;

  color: var(--white);

}

.svc-nav {

  position: sticky;

  top: 0;

  z-index: 10;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  padding: 0.9rem clamp(1.2rem, 5vw, 4rem);

  background: rgba(1, 31, 53, 0.85);

  backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}

/* Stesso scorporo del bordo trasparente della navbar principale */

.svc-nav .nav-logo img {

  --logo-h: clamp(22px, 3vw, 28px);

  --logo-file: calc(var(--logo-h) / 0.598);

  height: var(--logo-file);

  width: auto;

  display: block;

  margin: calc(var(--logo-file) * -0.187)

          calc(var(--logo-file) * -0.202)

          calc(var(--logo-file) * -0.215)

          calc(var(--logo-file) * -0.202);

}

.svc-back {

  font-family: 'Barlow', sans-serif;

  font-weight: 700;

  font-size: 0.78rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--white);

  text-decoration: none;

  transition: color 0.25s ease;

}

.svc-back:hover { color: var(--gold); }



.svc-detail {

  max-width: 880px;

  margin: 0 auto;

  padding: clamp(3rem, 9vw, 7rem) clamp(1.4rem, 5vw, 3rem) 4rem;

}

.svc-detail-branch {

  font-family: 'Barlow', sans-serif;

  font-weight: 700;

  font-size: 0.75rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: var(--gold);

}

.svc-detail-title {

  margin: 0.6rem 0 2rem;

  font-family: 'Mangogrotesque', 'Anton', Arial Black, sans-serif;

  font-size: clamp(2.6rem, 9vw, 6rem);

  line-height: 0.92;

  text-transform: uppercase;

  color: var(--white);

}

.svc-detail-text p {

  font-family: 'Barlow', sans-serif;

  font-size: clamp(1rem, 1.5vw, 1.2rem);

  line-height: 1.75;

  color: rgba(255, 255, 255, 0.82);

  margin-bottom: 1.4rem;

  max-width: 42rem;

}

.svc-detail-text p:first-child::first-letter {

  /* leggero accento editoriale sul primo paragrafo */

  color: var(--gold);

}

.svc-detail-cta {

  display: inline-block;

  margin-top: 1.5rem;

  font-family: 'Barlow', sans-serif;

  font-weight: 700;

  font-size: 0.9rem;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: var(--white);

  text-decoration: none;

  border-bottom: 2px solid var(--gold);

  padding-bottom: 0.25rem;

  transition: color 0.3s ease;

}

.svc-detail-cta:hover { color: var(--gold); }



/* Servizi correlati (stesso ramo) */

.svc-related {

  margin-top: clamp(3rem, 7vw, 5rem);

  padding-top: 2rem;

  border-top: 1px solid rgba(255, 255, 255, 0.12);

}

.svc-related-label {

  display: block;

  font-family: 'Barlow', sans-serif;

  font-weight: 700;

  font-size: 0.72rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.5);

  margin-bottom: 1rem;

}

.svc-related-list {

  list-style: none;

  display: flex;

  flex-wrap: wrap;

  gap: 0.6rem 1.4rem;

}

.svc-related-list a {

  font-family: 'Mangogrotesque', 'Anton', Arial Black, sans-serif;

  font-size: clamp(1.1rem, 2.2vw, 1.6rem);

  text-transform: uppercase;

  color: var(--white);

  text-decoration: none;

  transition: color 0.25s ease;

}

.svc-related-list a:hover { color: var(--gold); }



.svc-foot {

  padding: 2rem clamp(1.4rem, 5vw, 4rem) 3rem;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  font-family: 'Barlow', sans-serif;

  font-size: 0.78rem;

  letter-spacing: 0.04em;

  color: rgba(255, 255, 255, 0.5);

}

.svc-foot a { color: var(--gold); text-decoration: none; }



/* Hub /servizio/ — indice di tutti i servizi */

.svc-hub {

  max-width: 1100px;

  margin: 0 auto;

  padding: clamp(3rem, 9vw, 7rem) clamp(1.4rem, 5vw, 3rem) 4rem;

}

.svc-hub-title {

  font-family: 'Mangogrotesque', 'Anton', Arial Black, sans-serif;

  font-size: clamp(2.6rem, 10vw, 7rem);

  line-height: 0.92;

  text-transform: uppercase;

  color: var(--gold);

  margin-bottom: 0.8rem;

}

.svc-hub-intro {

  max-width: 44rem;

  font-family: 'Barlow', sans-serif;

  font-size: clamp(1rem, 1.5vw, 1.15rem);

  line-height: 1.7;

  color: rgba(255, 255, 255, 0.8);

  margin-bottom: clamp(2.5rem, 6vw, 4rem);

}

.svc-hub-branch { margin-bottom: clamp(2.5rem, 6vw, 4rem); }

.svc-hub-branch h2 {

  font-family: 'Mangogrotesque', 'Anton', Arial Black, sans-serif;

  font-size: clamp(1.8rem, 5vw, 3.2rem);

  text-transform: uppercase;

  color: var(--white);

  margin-bottom: 1.2rem;

}

.svc-hub-grid {

  list-style: none;

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

  gap: 1.2rem 2rem;

}

.svc-hub-grid a {

  display: block;

  text-decoration: none;

  color: inherit;

  border-top: 1px solid rgba(255, 255, 255, 0.18);

  padding-top: 0.7rem;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}

.svc-hub-grid a:hover { transform: translateX(5px); }

.svc-hub-grid strong {

  display: block;

  font-family: 'Mangogrotesque', 'Anton', Arial Black, sans-serif;

  font-weight: 400;

  font-size: 1.2rem;

  text-transform: uppercase;

  color: var(--white);

}

.svc-hub-grid:hover a:hover strong { color: var(--gold); }

.svc-hub-grid span {

  display: block;

  margin-top: 0.25rem;

  font-family: 'Barlow', sans-serif;

  font-size: 0.82rem;

  line-height: 1.45;

  color: rgba(255, 255, 255, 0.6);

}



/* ============================================================

   PRELOADER — Dororino corre sul sito sfocato, poi fade-off

   Fasi (i tempi reali stanno in main.js → oggetto PRELOADER):

     ① fade-in del gif + barra   ② HOLD: corsa a dimensione normale

     ③ fade-off = il sito va a fuoco

   ============================================================ */

.preloader {

  position: fixed;

  inset: 0;

  z-index: 9999;              /* sopra navbar (101) e menu overlay (100) */

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  /*

    Niente muro di colore pieno: si vede il sito vero, sfocato e velato di

    blu. Alla fine il blur va a 0 → il sito "va a fuoco" invece di comparire

    da uno schermo morto.

  */

  background-color: rgba(1, 75, 110, 0.62);   /* velo blu: il sito resta leggibile sotto */

  -webkit-backdrop-filter: blur(16px) saturate(1.1);

  backdrop-filter: blur(16px) saturate(1.1);

  opacity: 1;

  transition: opacity var(--pl-fade, 700ms) ease-out,

              backdrop-filter var(--pl-fade, 700ms) ease-out,

              -webkit-backdrop-filter var(--pl-fade, 700ms) ease-out;

  will-change: opacity;



  --pl-size: clamp(280px, 30vw, 440px);   /* lato del file gif → personaggio ≈ 30% */

}



/* ③ fade-off: l'overlay sparisce e il sito torna nitido */

.preloader.is-out {

  opacity: 0;

  pointer-events: none;

  -webkit-backdrop-filter: blur(0px) saturate(1);

  backdrop-filter: blur(0px) saturate(1);

}



/*

  Il gif è 1080×1080 quasi tutto trasparente: il personaggio occupa solo

  il riquadro x 440-768 / y 672-1028 → il suo centro sta al 55.9% / 78.7%

  del file, non al centro. Si mostra l'immagine intera e la si trasla di

  (50% − 55.9%, 50% − 78.7%) così è il PERSONAGGIO a finire al centro

  dello schermo, non il centro del file.

*/

.preloader-mascot {

  width: var(--pl-size);

  height: auto;

  image-rendering: pixelated;         /* pixel art nitida anche ingrandita */

  transform: translate(-5.9%, -28.7%);

  opacity: 0;

  animation: pl-fade-in 280ms ease-out forwards;   /* ① solo opacity: non tocca il transform */

  will-change: opacity;

}



/*

  Barra di caricamento sotto ai piedi del personaggio.

  L'offset verticale segue --pl-size: il personaggio è alto 356/1080 del

  file, quindi il suo bordo inferiore sta a --pl-size × 0.165 dal centro.

*/

.preloader-bar {

  position: absolute;

  left: 50%;

  top: calc(50% + var(--pl-size) * 0.165 + 1.6rem);

  transform: translateX(-50%);

  width: min(160px, 42vw);

  height: 2px;

  background-color: rgba(255, 255, 255, 0.3);

  overflow: hidden;

  /* L'entrata è già data dal riempimento: niente fade-in sull'opacity */

  opacity: 1;

  transition: opacity 220ms ease-out;

}

.preloader-bar::after {

  content: '';

  display: block;

  height: 100%;

  background-color: var(--gold);

  transform: scaleX(0);

  transform-origin: left center;

  animation: pl-bar var(--pl-hold, 1000ms) cubic-bezier(0.3, 0.8, 0.4, 1) forwards;

}



@keyframes pl-fade-in {

  from { opacity: 0; }

  to   { opacity: 1; }

}



@keyframes pl-bar {

  from { transform: scaleX(0); }

  to   { transform: scaleX(1); }

}



/* Niente scroll dietro l'overlay finché il preloader è attivo */

body.is-preloading { overflow: hidden; }



/* Accessibilità: chi ha ridotto le animazioni vede il gif comparire subito */

@media (prefers-reduced-motion: reduce) {

  .preloader-mascot { animation-duration: 200ms; }

}



/* ⚠️ Schermi bassi — landscape telefono, finestre schiacciate.

   Qui l'altezza è l'unica risorsa scarsa: fitMenu() rimpicciolisce le voci

   fino al suo pavimento, e tutto il resto (padding, footer, interlinea)

   cede per primo così le voci restano leggibili invece che diventare

   sei righe da 20px. Sotto a questo, l'overlay scrolla. */

@media (max-height: 560px) {

  /* ⚠️ Il logo è dimensionato sulla larghezza (3.4vw): su un landscape largo

     e basso cresce fin dove comincia la prima voce del menu.

     Su schermi bassi lo si lega all'altezza, non alla larghezza. */

  .nav-boiler {

    min-height: 2.6rem;

    padding: 0.5rem 1.4rem;

  }

  .nav-boiler .nav-logo img { --logo-h: clamp(18px, 5vh, 24px); }



  .menu-overlay {

    padding: 4.2rem 1.5rem 1.2rem;

    --menu-gap: 0.15rem;

    --menu-lh: 0.98;

  }

  .menu-footer {

    gap: 0 1.6rem;

    padding-top: 0.9rem;

  }

  .menu-footer-col { gap: 0.15rem; }

  .menu-footer-label { font-size: 0.55rem; margin-bottom: 0; }

  .menu-footer-col a,

  .menu-footer-col span { font-size: 0.8rem; }

  .menu-footer-col .menu-footer-vat { font-size: 0.68rem; }

  .menu-footer-socials { gap: 0.8rem; --social-size: 1rem; }

  .menu-footer-tagline { font-size: 0.8rem; }

  .menu-link-num { font-size: 0.65rem; margin-top: 0.3em; }

  .menu-link-soon {

    font-size: 0.56rem;

    padding: 0.28em 0.6em;

    margin-top: 0.4em;

  }

}



/* Finestre molto basse: si recupera altezza solo dal padding. La colonna

   Studio resta: la P. IVA è un obbligo di legge, non un dettaglio grafico. */

@media (max-height: 460px) {

  .menu-overlay { padding: 3.6rem 1.5rem 1rem; }

}