/* ==========================================================================
   PERITEAM — Foglio di stile principale
   --------------------------------------------------------------------------
   Ordine del file:
     1. Font locali (@font-face)
     2. Design token (:root)
     3. Reset e base
     4. Utility e componenti condivisi
     5. Header
     6. Hero
   --------------------------------------------------------------------------
   PRINCIPIO FONDAMENTALE — FALLBACK NO-JS
   Lo stato di default di ogni elemento e' VISIBILE. Le animazioni d'ingresso
   sono attivate solo dalla classe .js-on, che uno script inline nel <head>
   applica a <html> prima del primo render. Se il JavaScript non parte (o un
   previewer lo blocca), il sito resta un sito statico completo e leggibile:
   mai una pagina bianca. Non introdurre MAI opacity:0 o transform fuori da
   un selettore .js-on.
   ========================================================================== */


/* ==========================================================================
   1. FONT LOCALI
   Ospitati su periteam.it: nessuna chiamata a fonts.gstatic.com dal browser
   del visitatore (requisito GDPR + nessuna dipendenza esterna).
   Archivo e' un font variabile: un solo file copre i pesi 100-900.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fraunces e Geist: candidati per la nuova tipografia (vedi
   confronto-tipografia.html). Font variabili: un file per tutti i pesi.
   Finche' i token --font-display/--font-body non li usano, il browser
   NON li scarica: dichiararli qui e' a costo zero. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/fraunces-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/fraunces-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/geist-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/geist-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/marcellus-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/marcellus-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   2. DESIGN TOKEN
   ========================================================================== */

:root {
  /* --- Colore: navy (base identita') --- */
  --navy-900: #0A1424;
  --navy-800: #14243D;   /* navy di riferimento del brief */
  --navy-700: #1D3355;
  --navy-600: #2A4670;
  --navy-500: #3E5C8A;

  /* --- Colore: oro (accento primario, CTA) --- */
  --gold-800: #7A5C24;   /* oro scuro: testo piccolo su fondo tinto, 5,4:1 */
  --gold-700: #8E6F2C;
  --gold-600: #B08D3E;   /* oro di riferimento del brief */
  --gold-500: #C6A45C;
  --gold-400: #D9BE7E;
  --gold-200: #EFE2C4;

  /* --- Colore: argento (terzo colore del logo, righe e secondari) --- */
  --silver-600: #5A6E8C;
  --silver-500: #8CA0BE;
  --silver-300: #C3CEDF;
  --silver-100: #E7ECF3;

  /* --- Colore: teal ---
     Il brief lo indicava come accento, ma nel logo il teal non esiste:
     su richiesta della committente l'interfaccia usa solo navy/oro/argento.
     I token restano qui pronti se si decidesse di reintrodurlo. */
  --teal-600: #1F7A78;
  --teal-500: #2E9B98;
  --teal-400: #4FBFBB;
  --teal-200: #BEE7E5;

  /* --- Colore: neutri --- */
  --paper: #FFFFFF;
  --paper-alt: #F4F6F9;
  --paper-edge: #E4E9F0;
  --ink: #14243D;
  --ink-soft: #4A5A73;   /* 7:1 su bianco */
  /* --ink-faint veste testo piccolo (eyebrow, etichette mono da 11-12px):
     deve restare sopra 4,5:1 su bianco. A #7A88A0 dava 3,59:1 e non era
     conforme. Non schiarire oltre questo valore. */
  --ink-faint: #66758F;  /* 4,66:1 su bianco */

  /* --- Testo su fondo scuro --- */
  --on-dark: #F2F5FA;
  --on-dark-soft: #B9C5D8;
  --on-dark-faint: #7F8FA8;

  /* --- Tipografia ---
     Scelta definitiva (opzione B, 2026-07-18): Fraunces per i titoli,
     Geist per testo e UI, IBM Plex Mono per dati ed etichette.
     Marcellus e Archivo restano su disco ma non vengono piu' caricati. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Scala fluida: mobile-first, cresce con il viewport senza breakpoint */
  --fs-eyebrow: 0.75rem;
  --fs-small: 0.875rem;
  --fs-body: 1rem;
  --fs-lead: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-h2: clamp(1.625rem, 1.35rem + 1.3vw, 2.5rem);
  --fs-h1: clamp(2rem, 1.55rem + 2.1vw, 3.25rem);

  /* --- Spazio --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-section: clamp(3.5rem, 2rem + 7vw, 7rem);

  /* --- Struttura --- */
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);
  --header-h: 68px;

  /* --- Forma --- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;

  /* --- Elevazione --- */
  --shadow-sm: 0 1px 2px rgba(20, 36, 61, 0.06), 0 2px 8px rgba(20, 36, 61, 0.04);
  --shadow: 0 4px 12px rgba(20, 36, 61, 0.08), 0 12px 32px rgba(20, 36, 61, 0.06);
  --shadow-lg: 0 12px 32px rgba(20, 36, 61, 0.12), 0 32px 64px rgba(20, 36, 61, 0.10);

  /* --- Movimento --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 640ms;
}

@media (min-width: 900px) {
  :root { --header-h: 84px; }
}


/* ==========================================================================
   3. RESET E BASE
   ========================================================================== */

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

/* NON aggiungere overflow-x (né hidden né clip) su <html>: rompe
   l'header position:sticky — provato e misurato (l'header spariva
   scorrendo). L'eventuale overflow laterale va risolto alla fonte,
   sull'elemento che sfora. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Le ancore non devono finire sotto l'header sticky.
   Serve solo quando l'header e' sticky, cioe' con JS attivo. */
.js-on {
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Nessuna sezione deve poter causare scroll orizzontale su mobile.
     "clip" e non "hidden": ritaglia anche in RTL, dove con hidden
     restavano ~10px di scorrimento laterale sulla versione araba.
     Sicuro per l'header sticky (lo scroll container resta <html>);
     NON spostare questa regola su <html>, li' romperebbe lo sticky. */
  overflow-x: clip;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  /* Fraunces semibold: e' qui che vive la gerarchia. Il corpo resta 400. */
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;   /* richiesta: fra -0,01em e -0,02em */
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

/* <figure> nasce con margin: 1em 40px dal foglio di stile del browser.
   Non azzerarlo sfalsa qualunque figura posizionata. */
figure { margin: 0; }

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

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button { font: inherit; color: inherit; }

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

:focus-visible {
  outline: 2px solid var(--navy-600);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Rispetto delle preferenze di sistema: chi chiede meno movimento
   riceve il sito completo, semplicemente senza animazioni. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   4. UTILITY E COMPONENTI CONDIVISI
   ========================================================================== */

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

/* Visibile solo agli screen reader */
.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;
}

/* Link "salta al contenuto": primo elemento focusabile della pagina */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 200;
  padding: var(--sp-3) var(--sp-4);
  background: var(--navy-800);
  color: var(--on-dark);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: var(--fs-small);
}
.skip-link:focus { top: 0; }

/* --- Eyebrow: sopratitolo tecnico in mono --- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

/* --- Bottoni --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: center;
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
  /* Target tattile minimo 44px anche a font piccolo */
  min-height: 48px;
}
/* Sollevamento discreto: 2px, ombra morbida. Niente di piu'. */
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.btn:active { transform: translateY(0); box-shadow: none; }

/* Primario: oro pieno con testo navy.
   Testo bianco sull'oro darebbe 3,1:1 (illeggibile secondo WCAG AA);
   il navy profondo sull'oro arriva a ~6:1. Da non invertire. */
.btn--gold {
  background: var(--gold-600);
  border-color: var(--gold-600);
  color: var(--navy-900);
}
.btn--gold:hover {
  background: var(--gold-500);
  border-color: var(--gold-500);
}

/* Secondario su fondo chiaro: solo un filo navy, nessun riempimento */
.btn--ghost {
  background: transparent;
  border-color: var(--silver-300);
  color: var(--navy-800);
}
.btn--ghost:hover {
  border-color: var(--navy-800);
  background: var(--paper-alt);
}

/* Variante "fantasma" per fondi scuri (footer o sezioni navy future) */
.btn--ghost-dark {
  background: transparent;
  border-color: rgba(217, 190, 126, 0.38);
  color: var(--on-dark);
}
.btn--ghost-dark:hover {
  border-color: var(--gold-400);
  background: rgba(176, 141, 62, 0.12);
}


/* ==========================================================================
   5. HEADER
   Fondo chiaro: e' li' che il logo PNG (fondo bianco, wordmark bicolore)
   si legge a piena resa. Sticky, con bordo che si rinforza allo scroll.
   ========================================================================== */

.site-header {
  position: relative;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out);
}
/* Sticky solo con JavaScript attivo.
   Senza JS la nav non puo' collassare in un pannello e resta una riga di
   link che va a capo: l'header arriva a ~190px su mobile e, se fosse
   sticky, si mangerebbe un quarto dello schermo per tutta la visita.
   Senza JS quindi scorre via come un header qualsiasi. */
.js-on .site-header {
  position: sticky;
  top: 0;
}

/* .is-scrolled e' applicata da periteam.js: puro rifinimento visivo,
   la sua assenza non compromette nulla. */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--paper-edge);
  box-shadow: var(--shadow-sm);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

/* --- Logo --- */
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.brand img {
  height: 30px;
  width: auto;
  transition: opacity var(--dur) var(--ease-out);
}
.brand:hover img { opacity: 0.82; }

@media (min-width: 900px) {
  .brand img { height: 38px; }
}

/* --- Navigazione --- */
.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.nav a {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-soft);
  padding: var(--sp-2) 0;
  position: relative;
  /* Una voce di menu non deve MAI andare a capo: "Perché PERITEAM" spezzato
     su due righe alza l'header e sfalsa tutta la barra. */
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out);
}

/* Sopra i 1200px c'e' aria: la nav puo' respirare */
@media (min-width: 1200px) {
  .nav { gap: var(--sp-5); }
}
.nav a:hover { color: var(--navy-800); }

/* Sottolineatura oro: cresce da sinistra al passaggio, fissa sulla
   sezione in cui ci si trova (aria-current="page", applicato da JS). */
.nav a::after {
  content: '';
  position: absolute;
  inset-inline-start: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--gold-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav a:hover::after,
.nav a[aria-current='page']::after { transform: scaleX(1); }

.nav a[aria-current='page'] { color: var(--gold-700); }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* Schermi stretti: logo + CINQUE bandiere + hamburger su una riga entro
   375-390px. Senza questi tagli l'header sfora di ~10px e l'hamburger
   viene rifilato dal bordo (misurato a 390px). */
@media (max-width: 480px) {
  .brand img { height: 22px; }
  .header-actions { gap: var(--sp-3); }
  .lang { gap: 2px; }
  .lang a { width: 26px; height: 26px; }
  .lang .flag { width: 19px; height: 19px; }
  .nav-toggle { width: 40px !important; height: 40px !important; }
}

/* --- Selettore lingua ---
   Struttura gia' pronta per FR/EN: le voci future sono presenti ma
   disattivate, cosi' l'aggiunta si limita a togliere l'attributo. */
/* --- Selettore lingua a bandierine ---
   Cerchi di 22px. La lingua attiva ha l'anello oro; le altre sono
   leggermente desaturate finché non ci passi sopra. */
.lang {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.lang a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.lang .flag {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  /* Anello sottile: stacca le bandiere chiare dal fondo bianco */
  box-shadow: inset 0 0 0 1px rgba(20, 36, 61, 0.18);
  opacity: 0.65;
  filter: saturate(0.75);
  transition: opacity var(--dur) var(--ease-out),
              filter var(--dur) var(--ease-out);
}
.lang .flag svg { display: block; width: 100%; height: 100%; }

.lang a:hover .flag { opacity: 1; filter: none; }
.lang a:hover { transform: translateY(-2px); }

.lang a[aria-current='true'] {
  box-shadow: 0 0 0 2px var(--gold-600);
}
.lang a[aria-current='true'] .flag { opacity: 1; filter: none; }

/* --- Telefono nell'header: reperibilita' h24 sempre a un tap --- */
.header-tel {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--navy-800);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out);
}
.header-tel:hover {
  border-color: var(--gold-600);
  background: rgba(176, 141, 62, 0.06);
}
/* Pallino "in linea": pulsa piano, segnala presidio attivo h24 */
.header-tel .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-600);
  flex-shrink: 0;
  animation: pulse-dot 2.6s var(--ease-in-out) infinite;
}
.header-tel span:not(.dot) { white-space: nowrap; }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(176, 141, 62, 0.45); }
  50%      { opacity: 0.75; box-shadow: 0 0 0 5px rgba(176, 141, 62, 0); }
}

/* Il telefono nell'header compare solo quando c'e' spazio vero accanto alla
   nav completa. Sotto questa soglia resta comunque a un tap dall'hero. */
@media (min-width: 1240px) {
  .header-tel { display: inline-flex; }
}

/* --- Bottone menu mobile ---
   Esiste solo con JS attivo: senza JS il menu non potrebbe aprirsi,
   quindi lo nascondiamo e mostriamo la nav a piena larghezza (vedi sotto). */
.nav-toggle { display: none; }


/* --- Comportamento navigazione: mobile vs desktop --- */

/* Fino a 900px, CON JavaScript: nav in pannello a scomparsa. */
@media (max-width: 899.98px) {
  .js-on .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--paper-edge);
    border-radius: var(--radius);
    cursor: pointer;
  }
  .js-on .nav-toggle:hover { border-color: var(--gold-600); }

  /* Icona hamburger che si trasforma in "X" */
  .nav-toggle .bars {
    position: relative;
    width: 18px; height: 12px;
  }
  .nav-toggle .bars i {
    position: absolute;
    left: 0;
    width: 100%; height: 1.5px;
    background: var(--navy-800);
    border-radius: 2px;
    transition: transform var(--dur) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
  }
  .nav-toggle .bars i:nth-child(1) { top: 0; }
  .nav-toggle .bars i:nth-child(2) { top: 5.25px; }
  .nav-toggle .bars i:nth-child(3) { top: 10.5px; }
  .nav-toggle[aria-expanded='true'] .bars i:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
  .nav-toggle[aria-expanded='true'] .bars i:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded='true'] .bars i:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

  .js-on .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-4) var(--gutter) var(--sp-6);
    background: var(--paper);
    border-bottom: 1px solid var(--paper-edge);
    box-shadow: var(--shadow);
    /* Chiusa: sollevata e non interattiva */
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--dur) var(--ease-out),
                opacity var(--dur) var(--ease-out),
                visibility var(--dur);
  }
  .js-on .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .js-on .nav a {
    padding: var(--sp-4) 0;
    font-size: var(--fs-body);
    border-bottom: 1px solid var(--paper-edge);
  }
  .js-on .nav a::after { display: none; }
  .js-on .nav a:last-child { border-bottom: 0; }

  /* SENZA JavaScript: nessun pannello, nessun toggle. La nav resta una
     riga di link che va a capo — sempre visibile, sempre utilizzabile.
     Deve valere SOLO senza JS: con .js-on l'header deve restare su una
     riga sola e compatto, altrimenti lo sticky si mangia il viewport. */
  html:not(.js-on) .nav {
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    justify-content: flex-start;
    padding-bottom: var(--sp-3);
  }
  html:not(.js-on) .header-bar { flex-wrap: wrap; }
}


/* ==========================================================================
   6. HERO
   Problema -> soluzione. Fondo navy, rosa dei venti come elemento
   ambientale che riprende il marchio senza imitarlo.
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--paper-edge);
}

/* --- Hero a video ---
   Il video riempie tutto l'hero; sopra, uno scrim navy quasi uniforme
   garantisce la leggibilita' del testo qualunque cosa passi nel filmato.
   Il <video> ha solo il poster nel markup: le <source> le aggiunge
   periteam.js DOPO il load, e solo su desktop senza reduced-motion.
   Cosi' il primo render non paga mai il video, e senza JS resta il poster. */
.hero--video {
  background: var(--navy-800);
  color: var(--on-dark);
  border-bottom: 0;
}
.hero-video,
.hero-vposter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-vposter { background-size: cover; background-position: center; }
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Overlay navy uniforme; appena piu' denso a sinistra, dove c'e' il testo */
  background:
    linear-gradient(100deg, rgba(10, 20, 36, 0.42) 0%, transparent 55%),
    rgba(20, 36, 61, 0.82);
}
.hero--video .hero-inner {
  position: relative;
  z-index: 2;
  grid-template-columns: 1fr;      /* niente colonna-figura: il video e' ovunque */
  min-height: min(88vh, 46rem);
}
.hero--video .eyebrow { color: var(--gold-400); }
/* v3: titolo interamente bianco, contrasto pieno. Nessun accento colorato. */
.hero--video h1 { color: #fff; }
.hero--video .hero-lead { color: var(--on-dark-soft); }
.hero--video .hero-lead strong { color: #fff; }
.hero--video .hero-facts { border-top-color: rgba(255, 255, 255, 0.14); }
/* Etichette chiare, non grigio-blu: leggibili anche sopra il video */
.hero--video .fact dt { color: var(--on-dark-soft); }
.hero--video .fact dd { color: var(--gold-400); }
.hero--video .tel-sub { color: var(--on-dark-faint); }

/* Disponibilità operativa: stile dato/etichetta, visibile ma non commerciale */
.hero-ops {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--gold-400);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hero-ops .sep { color: var(--on-dark-faint); padding-inline: 0.35em; }

.hero-inner {
  display: grid;
  gap: var(--sp-6);
  padding-block: clamp(2.5rem, 1.5rem + 6vw, 5rem) clamp(2.5rem, 2rem + 3vw, 4rem);
  align-items: center;
}

/* Da 1080px in su la figura esce dal flusso e va a filo del bordo destro
   della finestra (vedi .hero-figure): la seconda colonna resta vuota e
   serve solo a riservarle lo spazio.
   La soglia e' 1080 e non 980 perche' il lato sinistro della figura e' un
   arco: sotto quella larghezza la curva entrava nella colonna di testo
   (a 1024px si sovrapponeva di 57px). Sotto 1080 si impila, come su mobile.
   Se cambi la larghezza della figura, ricontrolla questo incastro. */
@media (min-width: 1080px) {
  .hero-inner {
    grid-template-columns: minmax(0, 28rem) 1fr;
    gap: var(--sp-8);
    min-height: 32rem;
  }
}

/* --- Colonna testo --- */
.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 34rem;
}

.hero .eyebrow { margin-bottom: var(--sp-4); }

/* Filetto oro fra titolo e sommario: separa senza aggiungere una riga */
.rule {
  display: block;
  width: 40px;
  height: 3px;
  border: 0;
  border-radius: 2px;
  background: var(--gold-600);
  margin: var(--sp-5) 0;
}

/* ATTENZIONE: questa regola viene DOPO .hero--video h1 nel file, quindi a
   parita' di specificita' vincerebbe lei. Non impostare MAI il colore qui:
   e' stato il bug del "titolo navy sul video scuro" segnalato in revisione.
   Il colore lo danno i modificatori (.hero--video h1 → bianco). */
.hero h1 {
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-5);
}

.hero-lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: var(--sp-6);
  max-width: 34rem;
}
.hero-lead strong {
  color: var(--navy-800);
  font-weight: 600;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}
.hero-cta .btn { flex: 1 1 auto; }

@media (min-width: 480px) {
  .hero-cta .btn { flex: 0 0 auto; }
}

/* Etichetta h24 dentro il bottone telefono */
.btn .tel-sub {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
}

/* --- Striscia dati: i differenziatori misurabili --- */
.hero-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--paper-edge);
}

@media (min-width: 560px) {
  .hero-facts { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}

.fact { display: flex; flex-direction: column; gap: 2px; }
.fact dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  order: 2;
}
.fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--navy-800);
  order: 1;
}

/* La figura ad arco con la rosa dei venti e' stata sostituita dal video
   di sfondo (richiesta del 2026-07-18). Il pattern arco+duotone per le
   fotografie resta ricostruibile dalla cronologia git/backup se servira'. */


/* ==========================================================================
   ANIMAZIONI D'INGRESSO
   Applicate solo con .js-on. Senza JavaScript nulla di tutto questo esiste
   e il contenuto e' semplicemente gia' al suo posto, visibile.
   ========================================================================== */

/* ==========================================================================
   LEGGERE PRIMA DI TOCCARE QUESTO BLOCCO.
   E' la causa delle pagine bianche della versione precedente del sito.

   Nelle tab NASCOSTE (previewer mobile, bot di anteprima, prerender) il
   browser CONGELA l'orologio delle animazioni: transizioni e @keyframes
   restano ferme al primo fotogramma per sempre. I timer invece continuano
   a girare. Quindi qualunque contenuto nascosto in attesa di essere
   rivelato da una animazione o da una transizione NON APPARE MAI.
   Misurato dal vivo: document.timeline.currentTime avanzato di 0 ms in
   400 ms reali, con visibilityState = 'hidden'.

   Da qui tre difese indipendenti, in ordine di intervento:

   1. .anim-on  — lo stato nascosto esiste SOLO se la pagina era davvero
      visibile al caricamento. In una tab nascosta la classe non arriva
      proprio e il contenuto e' visibile da subito, senza animazioni.
   2. .is-ready — porta allo stato finale (rAF quando c'e', altrimenti un
      setTimeout che scatta anche col compositor fermo).
   3. .anim-done — rete di sicurezza finale: dopo 1,5s impone lo stato
      finale SPEGNENDO la transizione, quindi senza passare dal compositor.
      Se l'animazione era gia' finita non fa nulla; se l'orologio era
      congelato, salva la pagina.

   Regola da non violare: la visibilita' del contenuto non deve MAI
   dipendere dal completamento di un'animazione.
   ========================================================================== */

.anim-on .reveal-load {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out) var(--d, 0ms),
              transform var(--dur-slow) var(--ease-out) var(--d, 0ms);
}

.anim-on.is-ready .reveal-load {
  opacity: 1;
  transform: none;
}

/* Difesa 3: stato finale imposto senza compositor. */
.anim-on.anim-done .reveal-load {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Chi chiede meno movimento riceve il contenuto subito, senza scomparse */
@media (prefers-reduced-motion: reduce) {
  .anim-on .reveal-load {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Reveal allo scroll ---
   Stessa filosofia del reveal-load: lo stato nascosto esiste SOLO sotto
   .anim-on, e .anim-done lo forza comunque visibile. .is-in e' aggiunta
   dall'IntersectionObserver in periteam.js; se l'observer manca o la
   pagina e' nascosta, lo stato nascosto non c'e' e il contenuto e' li'. */
.anim-on .reveal {
  opacity: 0;
  /* Salita + un respiro di scala appena percettibile (1.5%): rifinisce
     l'ingresso senza diventare uno zoom. Niente rotazioni né entrate
     laterali, come da regole del progetto. */
  transform: translateY(18px) scale(0.985);
  transition: opacity var(--dur-slow) var(--ease-out) var(--d, 0ms),
              transform var(--dur-slow) var(--ease-out) var(--d, 0ms);
}
.anim-on .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Il filetto oro sotto i titoli si disegna da sinistra quando la sezione
   entra in vista. E' decorativo: se non parte, la riga resta comunque
   al suo posto (larghezza piena di default sotto .anim-done). */
.anim-on .section-head--rule .section-title::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out) 220ms;
}
.anim-on .section-head--rule.is-in .section-title::after {
  transform: scaleX(1);
}
.anim-on.anim-done .section-head--rule .section-title::after {
  transform: none !important;
  transition: none !important;
}
.anim-on.anim-done .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .anim-on .reveal { opacity: 1; transform: none; transition: none; }
}


/* ==========================================================================
   7. IMPIANTO DELLE SEZIONI
   ========================================================================== */

.section {
  padding-block: var(--sp-section);
}
/* Fondo appena tinto per alternare il ritmo delle sezioni */
.section--alt {
  background: var(--paper-alt);
}
.section--tight { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem); }

/* Intestazione di sezione: eyebrow, titolo, eventuale sommario */
.section-head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head .eyebrow { margin-bottom: var(--sp-3); }

.section-title {
  font-size: var(--fs-h2);
  color: var(--navy-800);
  letter-spacing: -0.01em;
}
/* Filetto oro sotto il titolo, ripreso dall'hero */
.section-head--rule .section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold-600);
  margin-top: var(--sp-4);
}
.section-head--center.section-head--rule .section-title::after {
  margin-inline: auto;
}

.section-intro {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  color: var(--ink-soft);
}


/* ==========================================================================
   8. TRANSIZIONI TRA PAGINE
   Crossfade nativo del browser alla navigazione (cambio lingua, pagine
   legali). Tre righe di CSS, nessuna libreria: dove non è supportato
   (Firefox) la navigazione resta quella normale, senza rotture.
   Il fondo navy evita il lampo bianco durante lo scambio.
   ========================================================================== */

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}


/* ==========================================================================
   9. SOLUZIONI RAPIDE — il ciclo di gestione del sinistro
   È una vera sequenza (intervento → nota 24h → rapporti → aggiornamento →
   chiusura): la numerazione 01–05 codifica l'ordine, non decora.
   ========================================================================== */

.steps {
  display: grid;
  gap: var(--sp-5);
  counter-reset: step;
}

@media (min-width: 760px) {
  .steps { gap: 0; }
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: start;
}

@media (min-width: 760px) {
  .step {
    gap: var(--sp-6);
    padding-bottom: var(--sp-7);
  }
  /* Linea verticale che collega le tappe: il filo del processo */
  .step:not(:last-child)::before {
    content: '';
    position: absolute;
    inset-inline-start: 27px;
    top: 3.4rem;
    bottom: 0;
    width: 1px;
    background: linear-gradient(var(--gold-600), var(--paper-edge));
  }
}

.step-num {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  color: var(--gold-800);
}
.section--alt .step-num { background: var(--paper-alt); }
.step-num::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
}

.step-body { padding-top: var(--sp-2); }
.step-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--navy-800);
  margin-bottom: var(--sp-2);
}
.step-text {
  color: var(--ink-soft);
  max-width: 46rem;
}

.section-cta {
  margin-top: var(--sp-6);
}


/* ==========================================================================
   10. CHI SIAMO — radici italiane, esperienza internazionale
   ========================================================================== */

.about {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}
@media (min-width: 900px) {
  .about { grid-template-columns: 1.5fr 1fr; gap: var(--sp-8); }
}
.about-body > p + p { margin-top: var(--sp-4); }
.about-body p { color: var(--ink-soft); }
.about-body strong { color: var(--navy-800); font-weight: 600; }

/* Colonna dei fatti: pochi dati veri, in cornice */
.about-facts {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-lg);
}
.section--alt .about-facts { background: var(--paper); }
.statline { display: flex; flex-direction: column; gap: 2px; }
.statline + .statline {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--paper-edge);
}
.statline dt {
  order: 2;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.statline dd {
  order: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--navy-800);
}


/* ==========================================================================
   10b. ESPERIENZA INTERNAZIONALE — riquadri fattuali + mappa della copertura
   ========================================================================== */

/* --- Riquadro istituzionale unico: testo EXPERTEAM + profilo KB ---
   Distinto dagli altri componenti (filo oro in testa, ombra) ma coerente
   col sistema. Su mobile i blocchi si impilano: prima il testo. */
.about-panel {
  display: grid;
  gap: var(--sp-6);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-top: 3px solid var(--gold-600);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 900px) {
  .about-panel {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--sp-8);
  }
}
.about-panel-text p { color: var(--ink-soft); }
.about-panel-text p + p { margin-top: var(--sp-4); }
.about-panel-text strong { color: var(--navy-800); font-weight: 600; }

/* Profilo Kamel Benjelloun */
.kb-profile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--paper-alt);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-lg);
  align-self: start;
}
.kb-mono,
.kb-photo {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  margin-bottom: var(--sp-3);
}
.kb-mono {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
  color: var(--gold-400);
  font-family: var(--font-display);
  font-size: 2.25rem;
}
/* Ritratti: filo oro sottile, li lega alla palette senza appesantire */
.kb-photo,
.profile-photo {
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--paper-edge), 0 0 0 4px rgba(176, 141, 62, 0.16);
}
.kb-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--navy-800);
}
.kb-role {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--gold-800);
}
.kb-desc { color: var(--ink-soft); font-size: var(--fs-small); margin-top: var(--sp-2); }
/* Link LinkedIn dei profili (Omayma, e Kamel quando avremo l'URL) */
.profile-linkedin {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--paper-edge);
  border-radius: 100px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--navy-800);
  transition: color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.profile-linkedin:hover {
  color: #0A66C2;                 /* blu LinkedIn, solo all'hover */
  border-color: #0A66C2;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.kb-profile .profile-linkedin { margin-top: var(--sp-3); }

/* --- Fascia mappa: chiude la sezione a tutta larghezza --- */
#chi-siamo { padding-bottom: 0; }
.map-band {
  margin-top: clamp(2.5rem, 2rem + 3vw, 4rem);
  background: linear-gradient(170deg, var(--navy-800) 0%, var(--navy-900) 100%);
  padding-block: clamp(2rem, 1.5rem + 3vw, 3.5rem);
}
.map-frame {
  overflow: hidden;
  border-radius: var(--radius);
}
.worldmap { display: block; width: 100%; height: auto; }

/* Su mobile la mappa si allarga al 300% e si centra sull'Europa con un
   margine negativo: l'Atlantico e parte delle Americhe escono dal quadro
   (crop previsto dalla specifica), Milano resta al centro. Geometria SVG
   pura: i marker e i punti crescono in proporzione, niente transform. */
@media (max-width: 700px) {
  .worldmap {
    width: 300%;
    max-width: none;
    margin-left: -108%;
  }
}

/* Punti-terra: il mondo intero resta visibile ma neutro… */
.wm-resto {
  fill: none;
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 3.4;
  stroke-linecap: round;
}
/* …le aree coperte dalla rete emergono con un tono piu' chiaro */
.wm-rete {
  fill: none;
  stroke: rgba(195, 206, 223, 0.44);
  stroke-width: 3.4;
  stroke-linecap: round;
}

/* Marker oro con impulso discreto */
.wm-marker .dot {
  fill: var(--gold-400);
  stroke: var(--navy-900);
  stroke-width: 1;
}
.wm-marker .pulse {
  fill: none;
  stroke: var(--gold-400);
  stroke-width: 1.4;
  opacity: 0.55;
  transform-box: fill-box;
  transform-origin: center;
  animation: wm-pulse 3.2s var(--ease-out) infinite;
}
/* I due marker non pulsano all'unisono */
.wm-marker:nth-of-type(2) .pulse { animation-delay: 1.6s; }
@keyframes wm-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-marker .pulse { animation: none; opacity: 0.3; }
}

.wm-marker text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  fill: var(--gold-200);
  /* Alone navy dietro le lettere: l'etichetta resta leggibile anche
     dove i punti-terra le passano sotto (tecnica cartografica standard) */
  stroke: rgba(10, 20, 36, 0.92);
  stroke-width: 3;
  paint-order: stroke;
}
/* Etichette: complete su desktop, solo citta' su mobile.
   (La mappa mobile e' gia' ingrandita 3x: marker e testi crescono da soli,
   il font si riduce nel sistema di coordinate per compensare.) */
.wm-marker .lbl-short { display: none; }
@media (max-width: 700px) {
  .wm-marker .lbl-full { display: none; }
  .wm-marker .lbl-short { display: block; font-size: 6px; }
}

.map-caption {
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.06em;
  color: var(--on-dark-soft);
  text-align: center;
}


/* ==========================================================================
   11. DIREZIONE E COMPETENZE — profilo
   ========================================================================== */

.profile {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 720px) {
  .profile { grid-template-columns: auto 1fr; gap: var(--sp-7); }
}

/* Monogramma: segnaposto del ritratto.
   Per il ritratto vero: sostituire .profile-mono con
   <img class="profile-photo" src="..." alt="Omayma Fakir">. */
.profile-mono {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
  color: var(--gold-400);
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0.02em;
}
.profile-photo {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
}
.profile-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--navy-800);
}
.profile-role {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--gold-700);
  margin-top: 2px;
}
.profile-body { margin-top: var(--sp-4); }
.profile-body p { color: var(--ink-soft); }
.profile-body p + p { margin-top: var(--sp-3); }

.chips-label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: var(--sp-5);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.chip {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--paper-edge);
  border-radius: 100px;
  color: var(--ink-soft);
}


/* ==========================================================================
   12. SERVIZI — catalogo (non è una sequenza: nessun numero)
   ========================================================================== */

.services {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 680px) {
  .services { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .services { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}

.service {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-lg);
  /* Filo oro in cima, rivelato all'hover */
  border-top: 3px solid var(--paper-edge);
  transition: border-top-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.service:hover {
  border-top-color: var(--gold-600);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

/* Stato SELEZIONATO (aria-pressed, gestito da periteam.js): piu' netto
   dell'hover e persistente — resta riconoscibile quando il puntatore se ne
   va. Non affidato al solo colore: cambia anche bordo, ombra e titolo. */
.service[aria-pressed='true'] {
  border-color: var(--gold-600);
  border-top-color: var(--gold-600);
  background: linear-gradient(180deg, rgba(176, 141, 62, 0.06) 0%, var(--paper) 45%);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.service[aria-pressed='true'] .service-title { color: var(--gold-800); }
.service--featured[aria-pressed='true'] {
  background: linear-gradient(150deg, var(--navy-600) 0%, var(--navy-800) 60%, var(--navy-900) 100%);
  border-color: var(--gold-600);
}
.service--featured[aria-pressed='true'] .service-title { color: var(--gold-400); }
.service:focus-visible {
  outline: 2px solid var(--navy-600);
  outline-offset: 3px;
}
/* v3: "Perizie e Claims Management" NON è una tipologia di perizia ma il
   livello di servizio complessivo — trattamento visivo distinto: fondo navy,
   testo chiaro, filo oro. Occupa tutta la riga, punti su due colonne. */
.service--featured {
  grid-column: 1 / -1;
  background: linear-gradient(150deg, var(--navy-700) 0%, var(--navy-800) 60%, var(--navy-900) 100%);
  border-color: var(--navy-700);
  border-top-color: var(--gold-600);
}
.service--featured .service-title { color: #fff; }
.service--featured .service-text { color: var(--on-dark-soft); }
.service--featured .service-list li { color: var(--on-dark-soft); }
.service--featured .service-list li::before { background: var(--gold-400); }
.service--featured:hover {
  border-top-color: var(--gold-400);
}
.service-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--navy-800);
  margin-bottom: var(--sp-3);
}
.service-text { color: var(--ink-soft); }
.service-text + .service-list { margin-top: var(--sp-4); }

.service-list {
  display: grid;
  gap: var(--sp-2);
}
.service--featured .service-list {
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .service--featured .service-list { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2) var(--sp-6); }
}
.service-list li {
  position: relative;
  padding-inline-start: var(--sp-5);
  color: var(--ink-soft);
  font-size: var(--fs-small);
}
/* Pallino oro come marcatore di elenco */
.service-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-600);
}

/* Attributo trasversale dell'elenco (stati di conservazione): non è una
   voce di elenco, è una qualifica che vale per tutte le voci. */
.service-note {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--paper-edge);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}


/* ==========================================================================
   12b. STACCO VIDEO — respiro a tutta larghezza fra le sezioni
   Stesso trattamento dell'hero: video + scrim navy. Il parallasse (leggero)
   e' applicato da periteam.js solo su desktop e senza reduced-motion:
   il video e' scalato 1.12 per non scoprire i bordi durante lo scorrimento.
   ========================================================================== */

.video-break {
  position: relative;
  overflow: hidden;
  background: var(--navy-800);
  color: var(--on-dark);
  min-height: clamp(16rem, 42vh, 24rem);
  display: grid;
  align-items: center;
}
.break-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.break-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(20, 36, 61, 0.78);
}
.break-inner {
  position: relative;
  z-index: 2;
  padding-block: var(--sp-7);
}
/* Dichiarazione di metodo: DUE righe su desktop.
   Il taglio lo fa la larghezza (in ch, quindi legata alla misura del
   carattere) + text-wrap: balance, che pareggia le due righe. Nessun <br>
   nel markup: spezzerebbe la stringa da tradurre. */
.break-inner { text-align: center; }
.break-statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  color: #fff;
  letter-spacing: -0.01em;
  max-width: 50ch;
  margin-inline: auto;
  text-wrap: balance;
}
@media (max-width: 699.98px) {
  .break-statement { max-width: 24ch; }
}


/* ==========================================================================
   13. FASCIA CTA — "Un sinistro non aspetta. Nemmeno noi."
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 140% at 85% 0%, rgba(176,141,62,0.18) 0%, transparent 55%),
    linear-gradient(160deg, var(--navy-700) 0%, var(--navy-800) 50%, var(--navy-900) 100%);
  color: var(--on-dark);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 1.5rem + 4vw, 3.5rem);
  text-align: center;
}
.cta-band-title {
  font-size: var(--fs-h2);
  color: #fff;
  max-width: 22ch;
  margin-inline: auto;
}
.cta-band-sub {
  margin-top: var(--sp-4);
  color: var(--on-dark-soft);
  font-size: var(--fs-lead);
  max-width: 48ch;
  margin-inline: auto;
}
/* I due recapiti, chiaramente distinti: urgenze (cellulare, 24/7) e
   ufficio (fisso). Mai confondibili — il cellulare non è il numero
   generico dell'azienda. */
.lines {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-align: start;
}
@media (min-width: 620px) {
  .lines {
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: var(--sp-8);
  }
}
.line { display: flex; flex-direction: column; gap: 2px; }
.line-label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}
.line--urgent .line-label { color: var(--gold-400); }
.line-number {
  font-family: var(--font-mono);
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 500;
}
.line-number a { color: var(--on-dark); }
.line--urgent .line-number a { color: var(--gold-400); }
.line-number a:hover { color: #fff; }
/* Pulsante WhatsApp: verde del marchio, usato solo qui — è un canale,
   non un colore del sito. */
.btn--whatsapp {
  background: #25D366;
  border-color: #25D366;
  color: #0B3D22;
}
.btn--whatsapp:hover {
  background: #1FBE5A;
  border-color: #1FBE5A;
}
.btn--whatsapp svg { flex: none; }

.cta-band-actions {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}


/* ==========================================================================
   14. CONTATTI + FORM APERTURA INCARICO
   ========================================================================== */

.contact {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
}
@media (min-width: 900px) {
  .contact { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-8); }
}

/* --- Form --- */
.form-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .field--full { grid-column: 1 / -1; }
}
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--navy-800);
}
.field .req { color: var(--gold-700); }
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: var(--fs-small);
  color: var(--ink);
  padding: 0.75rem 0.875rem;
  background: var(--paper);
  border: 1px solid var(--silver-300);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.section--alt .field input,
.section--alt .field select,
.section--alt .field textarea { background: var(--paper); }
.field textarea { resize: vertical; min-height: 6rem; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-600);
  box-shadow: 0 0 0 3px rgba(176, 141, 62, 0.16);
}
.form-actions {
  margin-top: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.form-note {
  font-size: var(--fs-eyebrow);
  color: var(--ink-faint);
  max-width: 40ch;
}

/* Honeypot antispam: invisibile a utenti e screen reader (aria-hidden),
   ma NON display:none — alcuni bot lo rilevano e saltano il campo.
   NB: niente left:-9999px. In RTL un offset negativo non finisce fuori
   schermo, allarga l'area scorribile e produce scroll orizzontale
   (misurato sulla versione araba: 9999px di eccesso). Questo pattern
   di ritaglio è sicuro in entrambi i versi di scrittura. */
.field--hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Consenso privacy */
.field--consent .consent {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--ink-soft);
  cursor: pointer;
}
.field--consent input[type='checkbox'] {
  width: 18px; height: 18px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--gold-600);
}
.field--consent a {
  color: var(--gold-800);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Messaggio post-invio (inserito da periteam.js) */
.form-sent {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: rgba(176, 141, 62, 0.08);
  border: 1px solid var(--gold-500);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  color: var(--navy-800);
}

/* --- Recapiti --- */
.contact-details {
  padding: clamp(1.5rem, 1rem + 2vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-lg);
}
.section--alt .contact-details { background: var(--paper); }
.contact-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: var(--sp-4);
}
.contact-row + .contact-row { border-top: 1px solid var(--paper-edge); }
.contact-row dt {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.contact-row dd {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--navy-800);
}
.contact-row a:hover { color: var(--gold-700); }


/* ==========================================================================
   15. FOOTER — dati legali
   ========================================================================== */

.site-footer {
  background: var(--navy-900);
  color: var(--on-dark-soft);
  padding-block: var(--sp-8) var(--sp-6);
}
.footer-grid {
  display: grid;
  gap: var(--sp-6);
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-7); }
}
.footer-word {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.03em;
}
.footer-rose { width: 26px; height: 26px; flex: none; }
.footer-wordmark { display: inline-flex; }
.w-peri { color: var(--on-dark); }
.w-team { color: var(--gold-400); }
.footer-tagline {
  margin-top: var(--sp-4);
  max-width: 34ch;
  font-size: var(--fs-small);
  color: var(--on-dark-faint);
}
.footer-col h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin-bottom: var(--sp-4);
}
.footer-col li { margin-bottom: var(--sp-2); font-size: var(--fs-small); }
.footer-col a:hover { color: var(--gold-400); }
/* Social dell'impresa: attivi solo quando esistono URL reali */
.footer-social {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.footer-social a {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  color: var(--on-dark-soft);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.footer-social a:hover { color: var(--gold-400); border-color: var(--gold-400); }
.footer-legal {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-eyebrow);
  color: var(--on-dark-faint);
}
.footer-legal a:hover { color: var(--gold-400); }
.footer-legal .mono { font-family: var(--font-mono); letter-spacing: 0.04em; }


/* ==========================================================================
   16. PAGINE LEGALI (privacy, cookie)
   ========================================================================== */

.legal-copy { color: var(--ink-soft); }
.legal-copy h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--navy-800);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}
.legal-copy p + p { margin-top: var(--sp-4); }
.legal-copy a { color: var(--gold-700); text-decoration: underline; text-underline-offset: 2px; }
.legal-copy a:hover { color: var(--gold-600); }
.legal-copy strong { color: var(--navy-800); }
.legal-updated {
  margin-top: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  color: var(--ink-faint);
}