/* ==========================================================================
   KS Capital Partners — kscapitalpartners.it
   Foglio di stile unico. Nessuna dipendenza esterna, nessuna build.

   1. Token          2. Reset           3. Tipografia
   4. Layout         5. Movimento       6. Componenti
   7. Sezioni        8. Responsive      9. Stampa
   ========================================================================== */

/* 1 · TOKEN ============================================================== */
:root {
  /* Superfici — dal più profondo al più chiaro */
  --bg-0:  #08080a;
  --bg-1:  #0b0b0d;
  --bg-2:  #101014;
  --bg-3:  #16161b;
  --bg-4:  #1d1d23;

  /* Testo — rapporti di contrasto su --bg-1 indicati a fianco */
  --fg:      #f2efe9;   /* 17.2:1  AAA */
  --fg-mute: #a9a5a0;   /*  8.0:1  AAA */
  --fg-dim:  #8a857f;   /*  5.4:1  AA  su ogni superficie */

  /* Oro */
  --gold:      #d8b476; /*  9.9:1  AAA */
  --gold-deep: #c9a227;
  --gold-warm: #e6cd9d;
  --gold-8:    rgba(216, 180, 118, .08);
  --gold-16:   rgba(216, 180, 118, .16);
  --gold-32:   rgba(216, 180, 118, .32);
  --gold-dim:  #9a815a; /*  5.1:1  per testo oro attenuato */

  /* Linee */
  --line:        rgba(255, 255, 255, .085);
  --line-strong: rgba(255, 255, 255, .16);
  --line-gold:   rgba(216, 180, 118, .28);

  /* Tipografia */
  --serif: 'Cormorant Garamond', 'Times New Roman', Times, serif;
  --sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --t-display: clamp(2.75rem, 1.15rem + 6.4vw, 6.5rem);
  --t-h1:      clamp(2.35rem, 1.35rem + 4vw, 4.5rem);
  --t-h2:      clamp(1.95rem, 1.3rem + 2.6vw, 3.4rem);
  --t-h3:      clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  --t-lead:    clamp(1.0rem, .95rem + .4vw, 1.2rem);
  --t-body:    clamp(.9375rem, .91rem + .16vw, 1.0625rem);
  --t-small:   .8125rem;
  --t-label:   .6875rem;

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.72;

  --track-label: .22em;
  --track-nav:   .14em;

  /* Spaziature */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --gutter:    clamp(1.25rem, .6rem + 3vw, 4rem);
  --maxw:      1340px;
  --maxw-text: 68ch;

  /* Movimento — un solo posto in cui cambiare il ritmo del sito */
  --dur-fast: 220ms;
  --dur:      420ms;
  --dur-slow: 900ms;
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  --header-h: 82px;
  --logo-knockout: var(--bg-1);
  color-scheme: dark;
}

/* 2 · RESET ============================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  background: var(--bg-1);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: var(--lh-body);
  letter-spacing: .012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-height: 100svh;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:target { scroll-margin-top: calc(var(--header-h) + 2rem); }

::selection { background: var(--gold-32); color: var(--fg); }

/* Focus visibile e coerente col marchio, su qualsiasi fondo */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
  box-shadow: 0 0 0 5px var(--bg-0);   /* stacca l'anello anche sui fondi chiari */
}
.btn--solid:focus-visible, .cta__btn:focus-visible {
  outline-color: var(--bg-0);
  box-shadow: 0 0 0 5px var(--gold);
}
:focus:not(:focus-visible) { outline: none; }

/* Salto al contenuto */
.skip-link {
  position: fixed; top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 999;
  background: var(--gold); color: var(--bg-0);
  padding: .85rem 1.6rem;
  font-size: var(--t-label); font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); outline-offset: -4px; }

.visually-hidden {
  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;
}

/* 3 · TIPOGRAFIA ========================================================= */
.display, h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: -.012em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: var(--lh-snug); }

p { text-wrap: pretty; }

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
}

.lead  { font-size: var(--t-lead); color: var(--fg-mute); max-width: 46ch; }
.muted { color: var(--fg-mute); }
.dim   { color: var(--fg-dim); }
.prose { color: var(--fg-mute); max-width: var(--maxw-text); }
.prose + .prose { margin-top: var(--s-4); }

.rule {
  width: 68px; height: 1px;
  background: var(--gold);
  border: 0;
  transform-origin: left center;
}

/* 4 · LAYOUT ============================================================= */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: var(--bg-2); }
.section__head { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

/* 5 · MOVIMENTO =========================================================
   Un solo sistema di rivelazione allo scroll, guidato da IntersectionObserver.
   Regola d'oro: gli elementi partono nascosti SOLO se il JS è attivo, così
   senza JS la pagina resta interamente leggibile.
   ======================================================================== */
html.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y, 26px), 0);
  transition:
    opacity var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
html.js [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }

/* Varianti */
html.js [data-reveal="fade"]  { --reveal-y: 0px; }
html.js [data-reveal="left"]  { --reveal-y: 0px; transform: translate3d(-28px, 0, 0); }
html.js [data-reveal="scale"] { --reveal-y: 0px; transform: scale(1.06); }

/* Righello che si disegna da sé */
html.js [data-reveal="rule"] {
  opacity: 1; transform: scaleX(0);
  transition: transform var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms);
}
html.js [data-reveal="rule"].is-in { transform: scaleX(1); }

/* Titolo rivelato riga per riga da sotto una maschera */
.mask-lines { display: block; }
.mask-lines__line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.mask-lines__line > span {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1.05s var(--ease-out) var(--line-delay, 0ms);
}
html:not(.js) .mask-lines__line > span { transform: none; }
.mask-lines.is-in .mask-lines__line > span { transform: none; }

/* Grana pellicola: un unico strato fisso su tutto il sito */
.grain {
  position: fixed; inset: -50%;
  z-index: 60; pointer-events: none;
  opacity: .038;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
  animation: grain-drift 6s steps(4) infinite;
}
@keyframes grain-drift {
  0%,100% { transform: translate3d(0,0,0); }
  25% { transform: translate3d(-2%, 1%, 0); }
  50% { transform: translate3d(1%, -2%, 0); }
  75% { transform: translate3d(2%, 2%, 0); }
}

/* Bagliore che segue il puntatore, solo su dispositivi con mouse */
.spotlight {
  position: fixed; z-index: 1; pointer-events: none;
  inset: 0; opacity: 0;
  transition: opacity 600ms var(--ease);
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(216, 180, 118, .055), transparent 70%);
}
html.js.has-pointer .spotlight { opacity: 1; }

/* Rispetto delle preferenze di movimento, a livello di architettura */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .mask-lines__line > span { transform: none !important; }
  .grain { animation: none; }
  .spotlight { display: none; }
  .kenburns { animation: none !important; }
}

/* 6 · COMPONENTI ========================================================= */

/* --- Testata --------------------------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: height var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(8,8,10,.72), transparent);
  opacity: 1; transition: opacity var(--dur) var(--ease);
}
.header.is-stuck {
  height: 66px;
  background: rgba(8, 8, 10, .82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line);
}
.header.is-stuck::before { opacity: 0; }
.header.is-hidden { transform: translateY(-100%); }

.header__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}

/* --- Logo ------------------------------------------------------------ */
.logo { display: flex; align-items: center; gap: .7rem; color: var(--gold); }
.logo__mark { width: 38px; height: auto; flex: none; transition: transform var(--dur) var(--ease); }
.logo:hover .logo__mark { transform: rotate(-3deg) scale(1.04); }
.logo__type { display: flex; flex-direction: column; line-height: 1; color: var(--fg); }
.logo__name {
  font-family: var(--serif); font-size: 1.06rem; font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; white-space: nowrap;
}
.logo__sub {
  font-family: var(--sans); font-size: .5rem; font-weight: 400;
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--fg-dim); margin-top: .34rem; white-space: nowrap;
}
.header.is-stuck .logo__mark { width: 32px; }

/* --- Navigazione ----------------------------------------------------- */
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.3rem); }
.nav__link {
  position: relative;
  font-size: var(--t-label); font-weight: 400;
  letter-spacing: var(--track-nav); text-transform: uppercase;
  color: var(--fg-mute);
  padding-block: .5rem;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right center;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--fg); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left center; }
.nav__link[aria-current="true"] { color: var(--gold); }
.nav__link[aria-current="true"]::after { transform: scaleX(1); }

/* --- Selettore lingua ------------------------------------------------ */
.lang { display: flex; align-items: center; gap: .1rem; margin-left: .6rem; }
.lang__btn {
  font-size: var(--t-label); font-weight: 400; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-dim);
  padding: .45rem .5rem;
  transition: color var(--dur-fast) var(--ease);
}
.lang__btn:hover { color: var(--fg); }
.lang__btn[aria-pressed="true"] { color: var(--gold); }
.lang__sep { color: var(--line-strong); font-size: var(--t-label); }

/* --- Menu mobile ----------------------------------------------------- */
.burger {
  display: none;
  width: 44px; height: 44px;
  position: relative; z-index: 2;
  margin-right: -10px;
}
.burger__bar {
  position: absolute; left: 11px; right: 11px; height: 1px;
  background: var(--fg);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease);
}
.burger__bar:nth-child(1) { top: 17px; }
.burger__bar:nth-child(2) { top: 23px; }
.burger__bar:nth-child(3) { top: 29px; }
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 45;
  background: var(--bg-0);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--header-h) var(--gutter) var(--s-8);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 680ms var(--ease-out), visibility 0s linear 680ms;
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s, 0s; }
.drawer__nav { display: flex; flex-direction: column; gap: .2rem; }
.drawer__link {
  font-family: var(--serif); font-size: clamp(1.9rem, 8vw, 2.9rem);
  font-weight: 300; line-height: 1.35; color: var(--fg);
  display: flex; align-items: baseline; gap: 1rem;
  opacity: 0; transform: translateY(18px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out), color var(--dur-fast) var(--ease);
}
.drawer.is-open .drawer__link { opacity: 1; transform: none; }
.drawer__link:hover { color: var(--gold); }
.drawer__num {
  font-family: var(--sans); font-size: var(--t-label);
  letter-spacing: var(--track-label); color: var(--gold); opacity: .7;
}
.drawer__foot {
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  align-items: center; justify-content: space-between;
  font-size: var(--t-small); color: var(--fg-dim);
}

/* --- Bottoni --------------------------------------------------------- */
.btn {
  --btn-fg: var(--gold);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
  padding: 1.05rem 2.1rem;
  border: 1px solid var(--line-gold);
  color: var(--btn-fg);
  font-size: var(--t-label); font-weight: 400;
  letter-spacing: var(--track-label); text-transform: uppercase;
  line-height: 1; overflow: hidden;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  isolation: isolate;
}
/* Riempimento che sale dal basso */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gold);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover, .btn:focus-visible { color: var(--bg-0); border-color: var(--gold); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn--solid { background: var(--gold); color: var(--bg-0); border-color: var(--gold); }
.btn--solid::before { background: var(--gold-warm); }
.btn--solid:hover { color: var(--bg-0); }
.btn--ghost { border-color: var(--line-strong); color: var(--fg); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--bg-0); border-color: var(--gold); }
.btn__arrow { transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(5px); }

/* Collegamento testuale con freccia */
.link-arrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: var(--t-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--fg);
  transition: color var(--dur-fast) var(--ease), gap var(--dur) var(--ease-out);
}
.link-arrow svg { color: var(--gold); transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover { color: var(--gold); gap: 1.05rem; }
.link-arrow:hover svg { transform: translateX(4px); }

/* --- Superfici immagine (con ripiego procedurale) --------------------- */
/* Ogni riquadro immagine funziona anche senza fotografia: lo sfondo
   procedurale sottostante è progettato per reggere da solo.             */
.figure {
  position: relative; overflow: hidden;
  background-color: var(--bg-3);
  isolation: isolate;
}
.figure img {
  /* Assoluta, non nel flusso: alcuni riquadri (il blocco d'invito) prendono
     l'altezza dal testo, e un'immagine in flusso li spingerebbe in basso. */
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--focal, center);
}
/* <picture> sceglie solo il file: non deve generare un box suo, altrimenti
   l'immagine si posizionerebbe rispetto a lui e non al riquadro. */
.figure picture { display: contents; }
.figure__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(8,8,10,.92) 0%, rgba(8,8,10,.35) 42%, transparent 78%);
}
.kenburns { animation: kenburns 26s var(--ease-in-out) infinite alternate; }
@keyframes kenburns {
  from { transform: scale(1) translate3d(0,0,0); }
  to   { transform: scale(1.09) translate3d(-1.2%, -1.4%, 0); }
}

/* --- Arte procedurale ------------------------------------------------
   Fondali generati interamente in CSS/SVG: il sito è compiuto anche a
   fotografie assenti. Quando l'immagine arriva, si sovrappone (z-index 1)
   e questi livelli restano come colore di base durante il caricamento.
   -------------------------------------------------------------------- */
.figure::after {                       /* grana di pietra condivisa */
  content: ""; position: absolute; inset: 0; z-index: 0;
  opacity: .5; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23s)'/%3E%3C/svg%3E");
}
.figure:has(img)::after { opacity: .16; }

/* Corridoio: fessura di luce calda che si apre sull'orizzonte */
.art--hero {
  background-image: url("../img/art-hero.svg");
  background-size: cover; background-position: center;
}
/* Montanti architettonici che incorniciano la fessura */
.art--hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.86) 0 14%, transparent 30%),
    linear-gradient(270deg, rgba(0,0,0,.80) 0 12%, transparent 26%),
    linear-gradient(to top, rgba(216,180,118,.10) 0 22%, transparent 46%);
}

/* Petrolio: laccatura nera con un solo colpo di luce radente */
.art--oil {
  background-image: url("../img/art-drum.svg");
  background-size: cover; background-position: center;
}

/* Arte: cono di luce da museo su fondo profondo */
.art--art {
  background-image: url("../img/art-plinth.svg");
  background-size: cover; background-position: center;
}

/* Travertino: venatura orizzontale stirata, calda */
.art--stone {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .09' numOctaves='5' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23t)'/%3E%3C/svg%3E"),
    linear-gradient(122deg, #cbb491 0%, #a98f6d 38%, #7d6749 62%, #3d3225 100%);
  background-size: cover, cover;
  background-blend-mode: soft-light, normal;
}
.art--stone::before {                  /* spigolo del blocco: due facce */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(102deg, transparent 0 54%, rgba(0,0,0,.44) 54.4%, rgba(0,0,0,.60) 100%),
    linear-gradient(to bottom, rgba(255,240,214,.14), transparent 46%);
}

/* Interno silenzioso: sole basso e ombre lunghe */
.art--about {
  background-image: url("../img/art-light.svg");
  background-size: cover; background-position: center;
}

/* Rete: geometria di connessioni, niente mappamondo luminoso */
.art--network {
  background-image:
    radial-gradient(1.6px 1.6px at 18% 32%, var(--gold) 50%, transparent),
    radial-gradient(1.6px 1.6px at 62% 18%, var(--gold) 50%, transparent),
    radial-gradient(1.6px 1.6px at 84% 56%, var(--gold) 50%, transparent),
    radial-gradient(1.6px 1.6px at 38% 72%, var(--gold) 50%, transparent),
    radial-gradient(1.6px 1.6px at 72% 84%, var(--gold) 50%, transparent),
    linear-gradient(66deg, transparent 0 49.85%, rgba(216,180,118,.17) 49.9% 50.1%, transparent 50.15%),
    linear-gradient(-38deg, transparent 0 49.9%, rgba(216,180,118,.12) 49.94% 50.06%, transparent 50.1%),
    linear-gradient(14deg, transparent 0 49.9%, rgba(216,180,118,.10) 49.94% 50.06%, transparent 50.1%),
    radial-gradient(90% 70% at 30% 40%, rgba(120, 96, 60, .16), transparent 70%),
    linear-gradient(150deg, #0e0e12 0%, #08080a 100%);
}

/* Basalto per il blocco d'invito */
.art--texture {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .03' numOctaves='6' seed='19'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23b)'/%3E%3C/svg%3E"),
    linear-gradient(112deg, #1c1b20 0%, #121116 44%, #0a0a0c 100%);
  background-size: cover, cover;
  background-blend-mode: overlay, normal;
}

/* 7 · SEZIONI ============================================================ */

/* Barra di avanzamento */
.progress { position: fixed; inset: 0 0 auto 0; z-index: 55; height: 2px; pointer-events: none; }
.progress__bar {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-warm));
  transform: scaleX(0); transform-origin: left center;
}

/* --- Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(4rem, 10vh, 7rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__kb { position: absolute; inset: 0; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(105deg, var(--bg-1) 0%, rgba(11,11,13,.94) 28%, rgba(11,11,13,.55) 52%, rgba(11,11,13,.30) 100%),
    linear-gradient(to bottom, rgba(8,8,10,.86) 0%, transparent 34%, transparent 62%, var(--bg-1) 100%);
}
.hero__inner { position: relative; z-index: 2; }
.hero__eyebrow { margin-bottom: clamp(1.4rem, 3vh, 2.4rem); }
.hero__title {
  font-size: var(--t-display);
  font-weight: 300;
  letter-spacing: -.022em;
  max-width: 16ch;
}
.hero__rule { margin-block: clamp(1.8rem, 4vh, 3rem); }
.hero__body { max-width: 44ch; color: var(--fg-mute); font-size: var(--t-lead); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: clamp(2rem, 4vh, 3rem); }

.hero__scroll {
  position: absolute; left: var(--gutter); bottom: clamp(1.5rem, 4vh, 2.6rem);
  z-index: 2;
  display: flex; align-items: center; gap: .9rem;
  font-size: var(--t-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--fg-dim);
  transition: color var(--dur-fast) var(--ease);
}
.hero__scroll:hover { color: var(--gold); }
.hero__scroll-line { display: block; width: 62px; height: 1px; background: var(--line-strong); position: relative; overflow: hidden; }
.hero__scroll-line::after {
  content: ""; position: absolute; inset: 0; background: var(--gold);
  transform-origin: left center; animation: scroll-sweep 2.6s var(--ease-in-out) infinite;
}
@keyframes scroll-sweep {
  0%   { transform: translateX(-100%) scaleX(.6); }
  55%  { transform: translateX(100%) scaleX(.6); }
  100% { transform: translateX(100%) scaleX(.6); }
}

/* --- Aree di attività -------------------------------------------------- */
.focus__head {
  display: grid; gap: var(--s-5) var(--s-8);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: end;
}
.focus__title { margin-top: var(--s-4); max-width: 14ch; }
.focus__intro { max-width: 42ch; font-size: var(--t-body); padding-bottom: .4rem; }

.sectors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }

.sector { position: relative; background: var(--bg-2); }
/* Il titolo h3 avvolge il pulsante solo per la struttura del documento:
   non deve portare con sé il carattere e la misura dei titoli. */
.sector__heading { font: inherit; letter-spacing: inherit; text-wrap: wrap; }
.sector__toggle {
  display: block; width: 100%; text-align: left;
  position: relative; overflow: hidden;
  background: var(--bg-2);
}
.sector__media {
  display: block; position: absolute; inset: 0; z-index: 0;
  transition: transform 1.2s var(--ease-out), filter var(--dur) var(--ease);
  filter: saturate(.9) brightness(.92);
}
.sector__toggle:hover .sector__media,
.sector__toggle:focus-visible .sector__media { transform: scale(1.07); filter: saturate(1) brightness(1.04); }
/* La stanza del collezionista è la più scura delle tre: un filo di luce in più
   la mette alla pari con le altre schede. */
.sector__media.art--art { filter: saturate(.92) brightness(1.08); }
.sector__toggle:hover .sector__media.art--art,
.sector__toggle:focus-visible .sector__media.art--art { filter: saturate(1) brightness(1.18); }
.sector__toggle::after {                     /* velo per la leggibilità del testo */
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* La fascia alta resta scura: ci poggiano nome e sommario. Il centro si apre,
     perché lì non c'è testo ed è dove la fotografia deve farsi vedere. */
  background: linear-gradient(to bottom, rgba(6,6,8,.90) 0%, rgba(6,6,8,.74) 15%,
              rgba(6,6,8,.13) 34%, rgba(6,6,8,.18) 48%, rgba(6,6,8,.72) 64%,
              rgba(6,6,8,.92) 82%, rgba(6,6,8,.96) 100%);
  transition: opacity var(--dur) var(--ease);
}
.sector__body {
  position: relative; z-index: 2;
  /* garanzia di leggibilità sopra le zone chiare della fotografia */
  text-shadow: 0 1px 14px rgba(6, 8, 10, .92), 0 0 3px rgba(6, 8, 10, .7);
  display: flex; flex-direction: column;
  min-height: clamp(400px, 46vw, 540px);
  padding: clamp(1.6rem, 2.4vw, 2.4rem);
}
.sector__name {
  font-family: var(--serif); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.95rem);
  font-weight: 400; letter-spacing: .07em; text-transform: uppercase; line-height: 1.1;
}
.sector__hr {
  display: block; width: 42px; height: 1px; background: var(--gold);
  margin: 1rem 0 .9rem;
  transition: width var(--dur-slow) var(--ease-out);
}
.sector__toggle:hover .sector__hr { width: 84px; }
.sector__sub {
  font-size: var(--t-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--gold);
}
.sector__text {
  margin-top: auto; padding-top: var(--s-6);
  color: var(--fg-mute); font-size: var(--t-small); line-height: 1.75;
  max-width: 34ch;
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.sector__toggle:hover .sector__text,
.sector__toggle:focus-visible .sector__text,
.sector.is-open .sector__text { opacity: 1; transform: none; }
.sector__cta { margin-top: var(--s-5); }
.sector.is-open .sector__cta svg { transform: rotate(90deg); }

.sector__panel {
  height: 0; overflow: hidden;
  transition: height 420ms var(--ease-out);
  background: var(--bg-3);
  border-top: 1px solid var(--line-gold);
}
.sector__detail, .sector__points { padding-inline: clamp(1.6rem, 2.4vw, 2.4rem); }
.sector__detail { padding-top: var(--s-5); color: var(--fg-mute); font-size: var(--t-small); line-height: 1.8; }
.sector__points {
  display: flex; flex-direction: column; gap: .55rem;
  padding-block: var(--s-4) var(--s-6);
}
.sector__points li {
  position: relative; padding-left: 1.5rem;
  font-size: var(--t-small); color: var(--fg);
}
.sector__points li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: 12px; height: 1px; background: var(--gold);
}

/* --- Pilastri ---------------------------------------------------------- */
.pillars {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.pillar {
  text-align: center;
  padding-inline: clamp(.5rem, 1.4vw, 1.4rem);
  position: relative;
}
.pillar + .pillar::before {
  content: ""; position: absolute; left: calc(-1 * clamp(.75rem, 1.5vw, 1.5rem));
  top: 8%; bottom: 8%; width: 1px; background: var(--line);
}
.pillar__icon { width: 34px; height: 34px; margin: 0 auto var(--s-5); color: var(--gold); }
.pillar__name {
  font-family: var(--sans); font-size: var(--t-label); font-weight: 400;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg);
}
.pillar__hr { display: block; width: 26px; height: 1px; background: var(--gold-32); margin: .9rem auto 1rem; }
.pillar__text { font-size: var(--t-small); color: var(--fg-mute); line-height: 1.8; max-width: 30ch; margin-inline: auto; }

/* --- Chi siamo --------------------------------------------------------- */
.about__grid {
  display: grid; gap: clamp(2.5rem, 5vw, 5.5rem);
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  align-items: start;
}
.about__media {
  aspect-ratio: 4 / 5;
  position: sticky; top: calc(var(--header-h) + 2.5rem);
}
.about__title { margin-top: var(--s-4); max-width: 15ch; }
.about__col .rule { margin-top: var(--s-5); }
.about__lead { margin-block: var(--s-5) var(--s-5); max-width: 48ch; }
.quote {
  margin-top: var(--s-6);
  padding-left: var(--s-5);
  border-left: 1px solid var(--gold);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem);
  line-height: 1.45; color: var(--fg);
  max-width: 34ch;
}
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: clamp(2.5rem, 4vw, 3.6rem);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.stat { display: flex; flex-direction: column; gap: .5rem; }
.stat__value {
  font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  font-weight: 400; color: var(--gold); line-height: 1.1;
}
.stat__label {
  font-size: var(--t-small); color: var(--fg-dim); line-height: 1.5;
  max-width: 22ch;
}

/* --- Metodo ------------------------------------------------------------ */
.approach__head {
  display: grid; gap: var(--s-5) var(--s-8);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
}
.approach__head h2 { margin-top: var(--s-4); }
.approach__intro { max-width: 46ch; padding-bottom: .4rem; }
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
.step {
  display: flex; gap: clamp(1.2rem, 2vw, 2rem);
  padding: clamp(2rem, 3.4vw, 3.4rem);
  background: var(--bg-2);
  transition: background var(--dur) var(--ease);
  position: relative;
}
.step::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.step:hover { background: var(--bg-3); }
.step:hover::after { transform: scaleX(1); }
.step__num {
  font-family: var(--serif); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem);
  font-weight: 300; color: var(--gold-dim); line-height: 1; flex: none;
  transition: color var(--dur) var(--ease);
}
.step:hover .step__num { color: var(--gold); }
.step__name { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.step__text { font-size: var(--t-small); line-height: 1.8; max-width: 42ch; }
/* Compliance e integrità: la coda del metodo, non una pagina legale. Stessa
   griglia della testata della sezione, un filo d'oro sopra, nessun riquadro. */
.integrity {
  display: grid; gap: var(--s-5) var(--s-8);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid var(--line-gold);
}
.integrity__title { margin-top: var(--s-4); max-width: 20ch; }
.integrity__body .prose { max-width: 52ch; }
.integrity__note { margin-top: var(--s-4); font-size: var(--t-small); line-height: 1.8; max-width: 52ch; }

/* --- Rete -------------------------------------------------------------- */
.network { overflow: hidden; isolation: isolate; }
/* Terrazza sul Mediterraneo: cielo e mare sfumati sotto il testo, la balaustra
   a destra sotto l'elenco delle controparti. A .20 resta atmosfera e il testo
   resta testo: misurato sui pixel, a testo nascosto, il punto più chiaro dietro
   ogni riga lascia almeno 4,5:1 da 1024 a 1920px. */
.network__bg {
  position: absolute; inset: 0; z-index: -1;
  opacity: .2;
  -webkit-mask-image: radial-gradient(120% 90% at 78% 50%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 78% 50%, #000 30%, transparent 78%);
}
.network__grid {
  display: grid; gap: clamp(2.5rem, 5vw, 5rem);
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: start;
}
.network__col h2 { margin-top: var(--s-4); max-width: 14ch; }
.network__col .rule { margin-block: var(--s-5); }
.network__note { font-size: var(--t-small); margin-top: var(--s-5); max-width: 44ch; }
.network__lists {
  display: grid; gap: clamp(1.6rem, 2.4vw, 2.6rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.netlist__head {
  font-family: var(--sans); font-size: var(--t-label); font-weight: 400;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--gold); padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-gold);
}
.netlist__items { display: grid; }
.netlist__items li {
  padding-block: .95rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-body); color: var(--fg-mute);
  display: flex; align-items: center; gap: .9rem;
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur) var(--ease-out);
}
.netlist__items li::before {
  content: ""; width: 5px; height: 5px; flex: none;
  border: 1px solid var(--gold); transform: rotate(45deg);
  transition: background var(--dur-fast) var(--ease);
}
.netlist__items li:hover { color: var(--fg); padding-left: .5rem; }
.netlist__items li:hover::before { background: var(--gold); }

/* --- Blocco d'invito --------------------------------------------------- */
.cta__band {
  position: relative;
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1.6rem, 4vw, 4.5rem);
  border: 1px solid var(--line);
}
.cta__band::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(8,8,10,.93) 0%, rgba(8,8,10,.62) 44%, rgba(8,8,10,.30) 100%);
}
/* La frase di chiusura tiene una colonna larga, su due righe; testo e pulsante
   stanno uno sopra l'altro nella seconda, così l'etichetta lunga del pulsante
   non toglie spazio al titolo. */
.cta__inner {
  position: relative; z-index: 2;
  display: grid; gap: var(--s-5) clamp(1.5rem, 4vw, 4.5rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
}
.cta__title { font-size: var(--t-h2); max-width: 24ch; grid-row: span 2; }
.cta__body { font-size: var(--t-small); line-height: 1.8; max-width: 44ch; align-self: end; }
.cta__btn { justify-self: start; align-self: start; white-space: nowrap; }

/* --- Contatti ---------------------------------------------------------- */
.contact__grid {
  display: grid; gap: clamp(2.5rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  align-items: start;
}
.contact__col h2 { margin-top: var(--s-4); max-width: 15ch; }
.contact__col .rule { margin-block: var(--s-5); }
.contact__note { font-size: var(--t-small); margin-top: var(--s-5); max-width: 44ch; }
.contact__info { display: grid; }
.cinfo {
  display: grid; gap: .5rem;
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.cinfo:first-child { border-top: 1px solid var(--line); }
.cinfo__key {
  font-size: var(--t-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--fg-dim);
}
.cinfo__val {
  margin: 0; font-size: var(--t-lead); color: var(--fg);
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
}
.contact__email {
  font-family: var(--serif); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  color: var(--fg);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: left 92%;
  transition: background-size var(--dur) var(--ease-out), color var(--dur-fast) var(--ease);
}
.contact__email:hover { color: var(--gold); background-size: 100% 1px; }
.copy {
  font-size: var(--t-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--fg-dim);
  border: 1px solid var(--line); padding: .5rem .9rem; line-height: 1;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.copy:hover { color: var(--gold); border-color: var(--line-gold); }
.copy.is-done { color: var(--gold); border-color: var(--gold); }
.contact__cta { padding-top: var(--s-6); }

/* --- Piede ------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); padding-top: clamp(3rem, 5vw, 4.5rem); background: var(--bg-0); }
.footer__grid {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.footer__tagline { margin-top: var(--s-5); font-size: var(--t-small); max-width: 34ch; }
.footer__head {
  font-family: var(--sans); font-size: var(--t-label); font-weight: 400;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--s-4);
}
.footer__col ul { display: grid; gap: .7rem; }
.footer__col a { font-size: var(--t-small); color: var(--fg-mute); transition: color var(--dur-fast) var(--ease); }
.footer__col a:hover { color: var(--gold); }
.footer__col li.dim { font-size: var(--t-small); }
.footer__bar {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: center; justify-content: space-between;
  padding-block: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
}
.footer__top {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: var(--t-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--fg-mute);
  transition: color var(--dur-fast) var(--ease);
}
.footer__top:hover { color: var(--gold); }
.footer__top svg { transition: transform var(--dur) var(--ease-out); }
.footer__top:hover svg { transform: translateY(-3px); }

/* --- Pagina legale ----------------------------------------------------- */
.legal { padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)); padding-bottom: var(--section-y); }
.legal__wrap { max-width: 980px; }
.legal__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.legal__head h1 { margin-top: var(--s-4); }
.legal__head .rule { margin-top: var(--s-5); }
.legal__notice {
  margin-top: var(--s-5); padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-gold); background: var(--gold-8);
  font-size: var(--t-small); color: var(--fg-mute); max-width: 62ch;
}
.legal__toc { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.legal__toc ul { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.legal__toc a {
  font-size: var(--t-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--fg-mute);
  padding-bottom: .4rem; border-bottom: 1px solid var(--line);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.legal__toc a:hover { color: var(--gold); border-color: var(--gold); }
.legal__section { padding-top: clamp(2rem, 4vw, 3rem); }
.legal__section + .legal__section { border-top: 1px solid var(--line); margin-top: clamp(2rem, 4vw, 3rem); }
.legal__section h2 { font-size: var(--t-h3); margin-bottom: var(--s-5); }
.legal__body { color: var(--fg-mute); max-width: 72ch; }
.legal__body p + p { margin-top: var(--s-4); }

/* 8 · ADATTAMENTO AGLI SCHERMI =========================================== */

@media (max-width: 1180px) {
  .pillars { grid-template-columns: repeat(2, 1fr); row-gap: clamp(2.5rem, 5vw, 3.5rem); }
  .pillar:nth-child(3)::before { display: none; }
  .cta__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cta__title { grid-row: auto; }
  .cta__body { align-self: center; }
  .cta__btn { grid-column: 1 / -1; justify-self: start; }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  :root { --header-h: 68px; }
  .nav--desktop { display: none; }
  .burger { display: block; }

  .focus__head, .approach__head { grid-template-columns: 1fr; align-items: start; }
  .focus__intro, .approach__intro { max-width: 52ch; padding-bottom: 0; }

  .sectors { grid-template-columns: 1fr; gap: 1px; }
  .sector__body { min-height: 320px; }
  .sector__text { opacity: 1; transform: none; max-width: 46ch; }

  .about__grid, .network__grid, .contact__grid, .integrity { grid-template-columns: 1fr; }
  /* relative, non static: l'immagine dentro è in posizione assoluta e deve
     avere il riquadro come riferimento. Con static il riferimento diventava
     l'intera sezione: finché durava la rivelazione transform e will-change
     tenevano la foto al suo posto, poi a rivelazione finita si allargava di
     colpo a tutto schermo e a tutta l'altezza della sezione, tagliata. */
  .about__media { position: relative; top: auto; aspect-ratio: 16 / 10; }
  .steps { grid-template-columns: 1fr; }
  /* Fra l'introduzione del metodo e il passo 01 basta un respiro, non mezzo schermo. */
  .approach__head { margin-bottom: var(--s-7); }
  .network__lists { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar::before { display: none !important; }
  .pillar { text-align: left; padding-inline: 0; padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
  .pillar:last-child { border-bottom: 0; padding-bottom: 0; }
  .pillar__icon { margin-inline: 0; }
  .pillar__hr { margin-inline: 0; }
  .pillar__text { margin-inline: 0; }

  .stats { grid-template-columns: 1fr; gap: var(--s-4); }
  .stat { flex-direction: row; align-items: baseline; gap: var(--s-4); }
  .stat__value { flex: none; min-width: 9rem; }

  .network__lists { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__actions .btn { flex: 1 1 100%; }
  /* Pulsanti a tutta larghezza: l'etichetta lunga ("Start a confidential
     conversation") deve stare su una riga dove può, e andare a capo centrata
     e bilanciata dove non può. La freccia, che sul telefono non ha un hover
     da annunciare, lascia spazio al testo. */
  .btn {
    white-space: normal; text-align: center; text-wrap: balance;
    line-height: 1.5; padding-inline: 1.25rem; letter-spacing: .16em;
  }
  .btn__arrow { display: none; }
  .cta__btn { justify-self: stretch; white-space: normal; }
  .contact__cta .btn { width: 100%; }
  .hero__scroll { display: none; }
  .cta__inner { grid-template-columns: 1fr; }
  /* I passi diventano un elenco a filo del testo, separato da righe sottili:
     niente riquadri rientrati che spostano "01" lontano dal titolo. */
  .steps { border-top: 1px solid var(--line); }
  .step { flex-direction: column; gap: var(--s-3); padding: var(--s-6) 0; }
  .approach__head { margin-bottom: var(--s-6); }
  .legal__toc ul { flex-direction: column; gap: var(--s-3); }
  .legal__toc a { display: inline-block; }
}

/* Aree sicure sui telefoni con notch */
@supports (padding: max(0px)) {
  .wrap, .header__inner {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .footer__bar { padding-bottom: max(var(--s-5), env(safe-area-inset-bottom)); }
}

/* Blocco dello scorrimento a menu aperto */
body.is-locked { overflow: hidden; }

/* Bersagli di tocco adeguati sui dispositivi touch */
@media (hover: none) {
  .nav__link, .footer__col a, .netlist__items li { min-height: 44px; }
  .lang__btn { padding: .7rem .6rem; }
  .sector__media { transform: none !important; }
}

/* 9 · STAMPA ============================================================= */
@media print {
  .header, .drawer, .burger, .grain, .spotlight, .progress,
  .hero__scroll, .hero__media, .network__bg, .footer__top, .copy { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  * { color: #000 !important; box-shadow: none !important; }
  .section { padding-block: 1.5cm; break-inside: avoid; }
  .hero { min-height: auto; padding-top: 0; }
  .sector__panel { height: auto !important; display: block !important; }
  .sector__panel[hidden] { display: block !important; }
  a[href^="http"]::after, a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .figure, [class*="art--"] { background: none !important; border: 1px solid #ccc; }
}

/* 10 · EFFETTI FIRMA ===================================================== */

/* --- Luce radente sul titolo -------------------------------------------
   Il titolo resta al buio come pietra non illuminata, poi una lama di luce
   calda lo attraversa in diagonale e lo lascia acceso. Alla fine dell'onda
   il testo torna a colore pieno: nessuna trasparenza permanente, così il
   contrasto reale della pagina resta quello dichiarato.
   ---------------------------------------------------------------------- */
@property --rake { syntax: '<percentage>'; inherits: false; initial-value: -35%; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  html.js .hero__title.rake:not(.rake-done) {
    --rake: -35%;
    /* Ciò che la luce ha già attraversato resta acceso; davanti alla lama
       la pietra è ancora al buio. La lama va da sinistra a destra. */
    background-image: linear-gradient(102deg,
      var(--fg)        0 calc(var(--rake) + 6%),
      #fff8ec            calc(var(--rake) + 14%),
      var(--gold-warm)   calc(var(--rake) + 21%),
      #43414a            calc(var(--rake) + 31%),
      #43414a            100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    contain: paint;
  }
  html.js .hero__title.rake.is-lit:not(.rake-done) {
    transition: --rake 1500ms cubic-bezier(.33, 0, .18, 1);
    --rake: 125%;
  }
}
/* Fine dell'effetto, movimento ridotto, o browser senza @property */
.hero__title.rake-done {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: var(--fg);
}
@media (prefers-reduced-motion: reduce) {
  html.js .hero__title.rake:not(.rake-done) {
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* --- Indice laterale delle sezioni ------------------------------------- */
.rail {
  position: fixed; z-index: 40;
  right: clamp(1rem, 1.8vw, 2rem); top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column; gap: .1rem;
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
html.js .rail { display: flex; }
.rail.is-visible { opacity: 1; }
.rail__item {
  display: flex; align-items: center; justify-content: flex-end; gap: .75rem;
  padding: .42rem 0;
  color: var(--fg-dim);
  transition: color var(--dur-fast) var(--ease);
}
.rail__label {
  font-size: .625rem; letter-spacing: var(--track-label);
  text-transform: uppercase; line-height: 1;
  opacity: 0; transform: translateX(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.rail__tick {
  display: block; width: 18px; height: 1px; flex: none;
  background: currentColor;
  transition: width var(--dur) var(--ease-out), background var(--dur-fast) var(--ease);
}
.rail__item:hover, .rail__item:focus-visible { color: var(--fg); }
.rail__item:hover .rail__label, .rail__item:focus-visible .rail__label { opacity: 1; transform: none; }
.rail__item:hover .rail__tick { width: 30px; }
.rail__item[aria-current="true"] { color: var(--gold); }
.rail__item[aria-current="true"] .rail__tick { width: 34px; background: var(--gold); }
.rail__item[aria-current="true"] .rail__label { opacity: 1; transform: none; }

@media (max-width: 1180px) { html.js .rail { display: none; } }
@media (prefers-reduced-motion: reduce) { .rail__label { transition: none; } }

/* --- Parentesi sul focus da tastiera ------------------------------------
   Sui bersagli grandi l'anello pieno è pesante: due parentesi angolari oro
   dicono la stessa cosa con il tono del marchio, restando ben percepibili.
   ---------------------------------------------------------------------- */
.sector__toggle:focus-visible {
  outline: none; box-shadow: none;
  position: relative;
}
.sector__toggle:focus-visible::before {
  content: ""; position: absolute; inset: 10px; z-index: 3;
  border: 1px solid var(--gold);
  clip-path: polygon(0 0, 26px 0, 26px 1px, 1px 1px, 1px 26px, 0 26px,
                     0 100%, 26px 100%, 26px calc(100% - 1px), 1px calc(100% - 1px), 1px calc(100% - 26px), 0 calc(100% - 26px),
                     100% 0, calc(100% - 26px) 0, calc(100% - 26px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) 26px, 100% 26px,
                     100% 100%, calc(100% - 26px) 100%, calc(100% - 26px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 26px), 100% calc(100% - 26px));
  pointer-events: none;
}

/* --- Pagina non trovata ------------------------------------------------- */
.notfound {
  position: relative; isolation: isolate;
  min-height: 78svh;
  display: flex; align-items: center;
  padding-block: calc(var(--header-h) + var(--section-y)) var(--section-y);
  overflow: hidden;
}
.notfound__media { position: absolute; inset: 0; z-index: -1; opacity: .5; }
.notfound__media::before {
  content: ""; position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(100deg, var(--bg-1) 0%, rgba(11,11,13,.9) 46%, rgba(11,11,13,.6) 100%);
}
.notfound__title { font-size: var(--t-h1); margin-top: var(--s-4); }
.notfound .rule { margin-block: var(--s-5); }
.notfound__actions { margin-top: var(--s-6); }

/* --- Dati societari nel piede -------------------------------------------
   Per una S.r.l. l'art. 2250 c.c. richiede che sede, registro, REA e capitale
   siano riportati sul sito. Vanno letti, non nascosti: testo piccolo ma con
   contrasto pieno.
   ---------------------------------------------------------------------- */
.footer__legalinfo {
  padding-block: var(--s-5);
  border-top: 1px solid var(--line);
}
.footer__legalinfo .footer__head { margin-bottom: var(--s-3); }
.footer__legalinfo p {
  display: flex; flex-wrap: wrap;
  gap: .35rem 1.6rem;
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--fg-dim);
}
.footer__legalinfo b { color: var(--fg-mute); font-weight: 400; }
.footer__legalinfo .footer__statement {
  display: block; margin-top: var(--s-3);
  max-width: 96ch; line-height: 1.7;
}
.footer__legalinfo a {
  color: inherit;
  border-bottom: 1px solid var(--line);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.footer__legalinfo a:hover { color: var(--gold); border-color: var(--gold); }

/* --- Telefono nella scheda contatti ------------------------------------- */
.contact__phone {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem);
  color: var(--fg);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: left 92%;
  transition: background-size var(--dur) var(--ease-out), color var(--dur-fast) var(--ease);
  font-variant-numeric: tabular-nums;
}
.contact__phone:hover { color: var(--gold); background-size: 100% 1px; }

/* --- Telefono: immagini ferme, testata ferma -----------------------------
   Sotto i 960px nessuna immagine cambia misura, taglio o scala mentre si
   scorre: niente zoom lento sulla hero, niente rivelazione in scala, niente
   sfondo che si allunga su tutta l'altezza della sezione. Lo sfondo della
   rete diventa una fotografia incorniciata, con gli stessi margini e lo
   stesso rapporto di quella di "Who we are". Il desktop tiene i suoi effetti.
   ---------------------------------------------------------------------- */
@media (max-width: 960px) {
  .kenburns { animation: none; }
  html.js [data-reveal="scale"] { transform: none; }
  html.js [data-reveal="left"] { transform: translate3d(-12px, 0, 0); }
  .network__bg {
    position: relative; inset: auto; z-index: auto;
    aspect-ratio: 16 / 10;
    margin: 0 var(--gutter) clamp(2.5rem, 5vw, 5.5rem);
    opacity: 1;
    -webkit-mask-image: none; mask-image: none;
  }

  /* Altezza e logo costanti: la testata non si restringe e non scompare,
     così niente sobbalzi mentre la barra di Safari entra ed esce. */
  .header,
  .header.is-stuck { height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }
  .header { padding-top: env(safe-area-inset-top, 0px); }
  .header.is-stuck .logo__mark { width: 38px; }
  .header.is-hidden { transform: none; }

  /* La grana fissa in fusione su tutta la pagina costa fotogrammi in
     scorrimento, e su uno schermo piccolo non si vede. */
  .grain { display: none; }
}
@supports (padding: max(0px)) {
  @media (max-width: 960px) {
    .network__bg {
      margin-left: max(var(--gutter), env(safe-area-inset-left));
      margin-right: max(var(--gutter), env(safe-area-inset-right));
    }
  }
}