/* =====================================================================
   Wedding Experience Nola — foglio di stile
   Direzione: fashion editorial. Bodoni Moda (display) + Cormorant Garamond
   (corsivi) + Jost (body, nav, microtesti). Palette neutra, filetti da 1px,
   nessun raggio di curvatura, nessuna ombra.
   ===================================================================== */

:root{
  /* Palette neutra: nero, bianco, grigio, off-white.
     Un solo tono caldo, --taupe, usato esclusivamente come filetto decorativo:
     su carta dà 2,1:1 di contrasto, quindi non può mai fare da colore-testo. */
  --paper:#F7F6F2;
  --soft-grey:#EDEBE7;
  --white:#FFFFFF;
  --black:#171717;        /* superfici scure */
  --ink:#202020;          /* testo */
  --grey:#77736F;         /* testo secondario e microtesti */
  --line:#D8D5CF;
  --line-dark:#333130;
  --taupe:#B4A99F;

  --display:"Bodoni Moda",Didot,"Times New Roman",serif;
  --serif:"Cormorant Garamond",Georgia,serif;
  --body:"Jost",Futura,"Century Gothic",Helvetica,Arial,sans-serif;

  --pad:clamp(20px,5vw,80px);
  --rule:1px solid var(--line);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:300 1rem/1.7 var(--body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--ink);color:var(--paper)}

.wrap{width:min(1420px,100%);margin:auto;padding-inline:var(--pad)}
.narrow{width:min(840px,100%);margin:auto;padding-inline:24px}
.center{text-align:center}

.skip-link{position:fixed;z-index:100;left:16px;top:-90px;background:#fff;color:#000;padding:12px 18px}
.skip-link:focus{top:16px}

/* ---------------------------------------------------------------- header */
.site-header{
  position:fixed;z-index:50;inset:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;
  height:84px;padding:0 var(--pad);
  color:#fff;
  transition:background .45s ease,color .45s ease,box-shadow .45s ease;
}
.site-header.scrolled,.site-header.menu-active{
  background:rgba(247,246,242,.96);
  color:var(--ink);
  box-shadow:0 1px 0 var(--line);
}
.site-header.scrolled{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* backdrop-filter crea un containing block: azzererebbe l'altezza del menu mobile */
.site-header.menu-active{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)}
.nav-logo{display:block;position:relative;width:clamp(132px,13vw,190px)}
.nav-logo img{width:100%;transition:opacity .4s ease}
.nav-logo .logo-light{position:absolute;inset:0}
.site-header.scrolled .logo-light,.site-header.menu-active .logo-light{opacity:0}
.site-header:not(.scrolled):not(.menu-active) .logo-dark{opacity:0}
/* pagine il cui contenuto parte su fondo chiaro (privacy): senza questo, a
   inizio pagina l'header sarebbe bianco su bianco e illeggibile */
body.page-light .site-header{background:rgba(247,246,242,.96);color:var(--ink);box-shadow:0 1px 0 var(--line)}
body.page-light .site-header:not(.menu-active) .logo-dark{opacity:1}
body.page-light .site-header:not(.menu-active) .logo-light{opacity:0}

.nav-links{
  display:flex;align-items:center;gap:clamp(18px,2.6vw,42px);
  /* Jost ha occhio più piccolo di Inter: .75rem lo riporta alla stessa
     presenza ottica. Il vincolo è 761px, ultimo punto con nav orizzontale. */
  font-size:.75rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
}
.nav-links a{position:relative;padding:12px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:1px;background:currentColor;transition:right .35s ease}
.nav-links a:hover::after,.nav-links a:focus-visible::after{right:0}
.nav-cta{border:1px solid currentColor;padding-inline:20px!important}
.nav-cta::after{display:none}

.menu-toggle{display:none;border:0;background:none;color:inherit;padding:12px}
.menu-toggle span{display:block;width:28px;height:1px;background:currentColor;transition:.3s}
.menu-toggle span+span{margin-top:8px}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-5px) rotate(-45deg)}

/* --------------------------------------------------- tipografia comune */
.kicker{
  display:flex;align-items:center;gap:14px;
  font-size:.6rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;
  color:var(--grey);margin:0 0 30px;
}
.kicker::before,.kicker::after{content:"";height:1px;background:currentColor;opacity:.45;flex:0 0 42px}
.kicker::after{flex:1 1 auto}
.center .kicker,.kicker.center{justify-content:center}
.center .kicker::after,.kicker.center::after{flex:0 0 42px}
.kicker em{font-style:normal;color:var(--grey)}
.kicker.light{color:rgba(255,255,255,.72)}

h1,h2,h3{font-weight:400;margin:0}
.hero h1,.section h2,.territory h2,.after-registration :is(h1,h2){
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:400;
  line-height:.94;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.hero h1 em,.section h2 em,.territory h2 em,.after-registration h2 em{
  font-family:var(--display);font-style:italic;font-weight:400;
}

.lead{
  font:italic 300 clamp(1.2rem,2.1vw,1.6rem)/1.65 var(--serif);
  color:var(--ink);
  margin:38px auto 20px;
}
p{margin:0 0 20px}

.button{
  min-height:52px;display:inline-flex;align-items:center;justify-content:center;
  padding:12px 34px;border:1px solid currentColor;
  text-transform:uppercase;letter-spacing:.24em;font-size:.62rem;font-weight:500;
  text-align:center;transition:background .3s ease,color .3s ease,transform .3s ease;
}
.button:hover{transform:translateY(-2px)}
.button-light{background:var(--white);color:var(--black);border-color:var(--white)}
.button-light:hover{background:transparent;color:#fff}
.button-dark{background:var(--black);color:var(--paper);border-color:var(--black)}
.button-dark:hover{background:transparent;color:var(--ink)}

.text-link{
  display:inline-flex;gap:12px;align-items:center;
  border-bottom:1px solid;padding-bottom:6px;
  font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
}

/* --------------------------------------------------------- copertina */
.hero{
  min-height:100svh;position:relative;
  display:grid;place-items:center;
  padding:104px var(--pad) 88px;
  color:#fff;text-align:center;
  background:
    linear-gradient(rgba(8,8,8,.52),rgba(8,8,8,.62) 45%,rgba(8,8,8,.78)),
    url('../img/6.png') 40% 40%/cover no-repeat;
}
.hero-frame{
  position:relative;
  width:min(1240px,100%);
  padding:clamp(34px,5vw,72px) clamp(20px,4vw,64px);
  border:1px solid rgba(255,255,255,.34);
}
.hero-content{position:relative}
.issue-line{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;
  margin:0 0 clamp(28px,4vw,46px);
  /* cresce solo oltre i ~930px: sotto resta .58rem, perché già a 768px la riga
     occupa 607px dei 613px disponibili e qualsiasi aumento la manderebbe a capo */
  font-size:clamp(.58rem,1vw,.70rem);font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.86);
}
.issue-line i{display:block;width:22px;height:1px;background:rgba(255,255,255,.5)}
.hero-masthead{
  width:clamp(240px,40vw,520px);
  margin:0 auto clamp(30px,4vw,48px);
}
.hero h1{font-size:clamp(2rem,4.4vw,4.1rem);max-width:20ch;margin-inline:auto}
.hero-copy{
  max-width:600px;margin:30px auto 38px;
  color:rgba(255,255,255,.86);font-size:.95rem;line-height:1.85;
}
.scroll-cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  display:grid;gap:8px;place-items:center;
  font-size:.54rem;letter-spacing:.3em;text-transform:uppercase;
}
.scroll-cue span{display:block;height:32px;width:1px;background:rgba(255,255,255,.7)}

/* ----------------------------------------------------------- sezioni */
.section{padding:clamp(90px,12vw,180px) 0}
.section-head{max-width:820px;margin-bottom:clamp(56px,8vw,104px)}
.section-head h2{font-size:clamp(2.9rem,6.4vw,6.2rem)}
.section-head .lead{margin-inline:0}

.intro{min-height:90vh;display:grid;place-items:center;position:relative}
.intro::before,.intro::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:min(760px,80%);height:1px;background:var(--line);
}
.intro::before{top:clamp(50px,7vw,90px)}
.intro::after{bottom:clamp(50px,7vw,90px)}
/* corpo calibrato sulla riga più lunga ("Vivi il tuo matrimonio,") perché le
   quattro righe forzate in index.html non vadano ulteriormente a capo */
.intro h2{font-size:clamp(2.1rem,7.6vw,5rem)}
.intro p:not(.kicker){max-width:660px;margin-inline:auto}
.intro .claim{
  max-width:620px;
  color:var(--grey);
  font-size:1.02rem;letter-spacing:.015em;line-height:1.7;
}
.intro .lead{max-width:720px}

.senses{
  display:flex;justify-content:center;align-items:center;gap:clamp(8px,2vw,24px);
  margin:52px 0 40px;
  text-transform:uppercase;letter-spacing:.28em;font-size:.64rem;font-weight:500;
}
.senses i{font:300 .9rem var(--body);color:var(--grey);font-style:normal}

/* ------------------------------------------------- pagina fotografica */
.statement-media{position:relative;height:min(94vh,940px);overflow:hidden;background:#000}
.statement-media img{width:100%;height:100%;object-fit:cover;object-position:center 34%;filter:grayscale(1) contrast(1.04);opacity:.6}
.statement-media p{
  position:absolute;z-index:1;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  width:92%;margin:0;color:#fff;text-align:center;
  /* solo il minimo è stato abbassato: sotto i ~560px serve per tenere
     "l'emozione del tuo evento" su una riga sola */
  font:400 clamp(2rem,7.4vw,7rem)/.92 var(--display);letter-spacing:-.03em;
}
.statement-media p em{font-style:italic}
.photo-credit{
  position:absolute;z-index:1;right:var(--pad);bottom:26px;
  font-size:.54rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6);
}

/* ------------------------------------------------------- il percorso */
.timeline{
  display:grid;grid-template-columns:repeat(6,1fr);
  list-style:none;padding:0;margin:0 0 clamp(80px,10vw,120px);
  border-top:1px solid var(--ink);
}
.timeline li{position:relative;padding:42px 22px 22px 0}
.timeline li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.timeline li+li{padding-left:24px;border-left:var(--rule)}
.time-index{font:400 .95rem var(--display);color:var(--grey);letter-spacing:.1em}
.timeline h3{font:400 clamp(1.3rem,2vw,1.7rem) var(--display);margin:20px 0 12px}
/* micro-intestazione: stesso linguaggio di .fig-no e delle categorie fornitori */
.timeline-tag{
  display:block;margin:0 0 12px;
  font:500 .6rem var(--body);
  letter-spacing:.24em;text-transform:uppercase;color:var(--grey);
}
.timeline p{font-size:.82rem;line-height:1.7;color:var(--grey);margin:0}

.manifesto{
  font:400 clamp(2.8rem,7.6vw,7rem)/.92 var(--display);
  letter-spacing:-.03em;text-align:center;margin:0 0 68px;
}
.manifesto em{font-style:italic}

/* --------------------------------------------- servizio fotografico */
.spread{background:var(--soft-grey);padding:clamp(80px,10vw,150px) 0}
.spread .kicker{margin-bottom:clamp(44px,6vw,70px)}
.spread-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(26px,5vw,90px);align-items:start;
}
.spread figure{margin:0}
.spread figure.offset{margin-top:clamp(30px,7vw,110px)}
.spread img{width:100%;filter:grayscale(1) contrast(1.03)}
.spread figcaption{
  display:grid;gap:8px;
  margin-top:20px;padding-top:16px;border-top:var(--rule);
  font:italic 300 .95rem/1.6 var(--serif);color:var(--grey);
}
.fig-no{
  font:500 .55rem var(--body);font-style:normal;
  letter-spacing:.3em;text-transform:uppercase;color:var(--grey);
}

/* --------------------------------------------------------- territorio */
.territory{display:grid;grid-template-columns:1.02fr .98fr;background:var(--black);color:#fff}
.territory-image{min-height:800px;position:relative;overflow:hidden}
.territory-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03)}
.territory-copy{align-self:center;padding:clamp(64px,8vw,140px)}
.territory h2{font-size:clamp(2.7rem,5.6vw,5.4rem);margin-bottom:44px}
.territory-copy p:not(.kicker){color:rgba(255,255,255,.72);max-width:560px;font-size:.95rem}

/* ---------------------------------------------------------- fornitori */
.suppliers{background:#fff}
.partner-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:var(--rule);border-left:var(--rule);
}
.partner-card{
  min-height:280px;padding:34px;
  border-right:var(--rule);border-bottom:var(--rule);
  display:flex;flex-direction:column;align-items:flex-start;
  transition:background .35s ease;
}
.partner-card:hover{background:var(--paper)}
.partner-mark{
  display:grid;place-items:center;
  width:74px;height:74px;
  border:1px solid var(--line);
  font:500 .62rem var(--body);letter-spacing:.24em;color:var(--grey);
  margin-bottom:auto;
}
.partner-card h3{font:400 1.4rem var(--display);margin:34px 0 8px;letter-spacing:-.01em}
.partner-card p{margin:0;color:var(--grey);font-size:.6rem;font-weight:500;text-transform:uppercase;letter-spacing:.24em}
/* piede della scheda: filetto a tutta larghezza invece della sottolineatura,
   come il taglio inferiore di una scheda di rivista */
.partner-card a{
  width:100%;margin-top:22px;padding-top:16px;border-top:var(--rule);
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
  transition:color .3s ease,border-color .3s ease;
}
.partner-card a:hover{color:var(--ink);border-top-color:var(--ink)}

/* fornitore confermato: scheda chiara, il logo mantiene i suoi colori */
.partner-card.is-confirmed{box-shadow:inset 0 3px 0 var(--taupe)}
.partner-card.is-confirmed h3{color:var(--ink)}
.partner-card.is-confirmed p{color:var(--grey)}
/* cornice larga: i loghi dei fornitori vanno dal quadrato allo sviluppo orizzontale.
   Resta bianca anche in hover, così i loghi su fondo bianco ci si fondono. */
.partner-mark-logo{
  --mark-h:118px;
  width:100%;max-width:250px;height:150px;padding:16px 18px;
  background:#fff;
}
/* altezza in px (non %): dentro una griglia la percentuale non si risolve */
.partner-mark-logo img{width:100%;height:var(--mark-h);object-fit:contain}
/* per i loghi consegnati su fondo nero: la cornice prende lo stesso nero,
   così l'immagine ci si fonde invece di apparire come un rettangolo incollato */
.partner-mark-logo.is-dark-logo{background:#000}

.all-categories{border-bottom:var(--rule);margin-top:40px}
.all-categories summary,.faq summary{
  list-style:none;display:flex;justify-content:space-between;gap:24px;cursor:pointer;
  padding:24px 0;text-transform:uppercase;font-size:.63rem;font-weight:500;letter-spacing:.24em;
}
.all-categories summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
.all-categories p{max-width:1000px;color:var(--grey);padding-bottom:26px;font-size:.9rem}

/* ------------------------------------------------ perché partecipare */
.reasons{background:var(--black);color:#fff}
.reasons .section-head h2{color:#fff}
.reason-list{list-style:none;padding:0;margin:0}
.reason-list li{
  display:grid;grid-template-columns:160px 1fr;align-items:center;
  border-top:1px solid var(--line-dark);padding:36px 0;
}
.reason-list li:last-child{border-bottom:1px solid var(--line-dark)}
.reason-list span{font:400 clamp(2.2rem,4.6vw,4.4rem) var(--display);color:var(--grey)}
.reason-list p{font:400 clamp(1.25rem,2.7vw,2.3rem)/1.24 var(--display);margin:0;max-width:900px}

/* ------------------------------------------------------ registrazione */
.registration-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(48px,8vw,120px);align-items:start}
.registration-intro{position:sticky;top:132px}
.registration-intro h2{font-size:clamp(2.8rem,5.6vw,5.4rem)}
.registration-intro .lead{margin-top:36px}
.event-data{
  display:grid;gap:10px;margin-top:44px;padding-top:26px;border-top:var(--rule);
  text-transform:uppercase;letter-spacing:.26em;font-size:.62rem;font-weight:500;
}
.registration-form{width:100%;max-width:760px}
/* Riquadro di invito al modulo. Il modulo non è più incorporato: si apre
   su Google in una nuova scheda, quindi qui non serve più alcuna altezza
   fissa né gestione dello scorrimento interno. */
.form-shell{
  background:var(--white);border:var(--rule);
  padding:clamp(36px,5vw,64px) clamp(24px,4vw,48px);
  text-align:center;
}
.form-kicker{
  margin:0 0 14px;
  font-size:.6rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--grey);
}
.form-lead{
  margin:0 auto 10px;max-width:42ch;
  font:italic 300 clamp(1.05rem,1.8vw,1.25rem)/1.6 var(--serif);color:var(--ink);
}
.form-sub{
  margin:0 auto 30px;max-width:42ch;
  font-size:.86rem;line-height:1.7;color:var(--grey);
}
/* riga di servizio sotto il pulsante: la più discreta del blocco */
.form-source{
  margin:18px 0 0;
  font-size:.66rem;letter-spacing:.04em;line-height:1.6;color:var(--grey);
}
.form-note{margin:20px 0 0;color:var(--grey);font-size:.74rem;line-height:1.7}

/* --------------------------------------------- dopo la registrazione */
.after-registration{background:var(--black);color:#fff;padding:clamp(100px,14vw,190px) 0}
.after-registration h2{font-size:clamp(3rem,7.4vw,7rem)}
/* il titolo di grazie.html è molto più lungo: stesso stile, corpo ridimensionato */
.after-registration h1{font-size:clamp(1.9rem,4.4vw,3.5rem)}
.after-registration p{color:rgba(255,255,255,.7)}
.after-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin:44px 0}
.after-actions a{
  min-height:50px;display:inline-flex;align-items:center;
  border:1px solid rgba(255,255,255,.4);padding:0 26px;
  text-transform:uppercase;letter-spacing:.24em;font-size:.62rem;font-weight:500;
  transition:background .3s ease,color .3s ease;
}
.after-actions a:hover{background:#fff;color:var(--ink)}
.after-registration small{color:rgba(255,255,255,.42);font-size:.7rem;letter-spacing:.08em}

/* ---------------------------------------------------------------- faq */
.faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(46px,9vw,140px)}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{color:var(--ink)}
.faq-list p{padding:0 0 26px;margin:0;color:var(--grey);font-size:.92rem}
.faq details[open] summary span,.all-categories[open] summary span{transform:rotate(45deg)}

/* -------------------------------------------------------- pagina legale */
/* colonna di lettura stretta: 720px sono ~75 caratteri per riga, la misura
   comoda per un testo lungo. Corpo a 1rem e peso 400 (non 300 come il body)
   perché un'informativa si legge per intero, non si scorre. */
.legal{width:min(720px,100%);margin:auto;padding-inline:24px}
.legal h1{font:400 clamp(1.9rem,4.2vw,3rem)/1.1 var(--display);letter-spacing:-.02em;margin:0 0 20px}
.legal-sub{
  font:italic 300 clamp(1rem,1.8vw,1.2rem)/1.6 var(--serif);
  color:var(--grey);margin:0 0 clamp(20px,3vw,32px);
}
.legal section{border-top:var(--rule);padding-top:clamp(30px,4vw,42px);margin-top:clamp(30px,4vw,42px)}
.legal h2{font:400 clamp(1.15rem,2vw,1.4rem) var(--display);margin:0 0 16px}
/* solo i paragrafi dell'informativa, che stanno tutti dentro <section>:
   altrimenti questa regola sovrascrive .kicker e .legal-sub, che sono
   figli diretti di .legal */
.legal section p,.legal li{font-size:1rem;font-weight:400;line-height:1.85;color:var(--ink)}
.legal section p{margin:0 0 16px}
.legal section p:last-of-type{margin-bottom:0}
.legal ul{list-style:none;margin:0 0 16px;padding-left:1.2em}
.legal li{position:relative;margin-bottom:8px}
.legal li::before{content:"—";position:absolute;left:-1.2em;color:var(--grey)}
.legal a{border-bottom:1px solid var(--line);padding-bottom:1px;word-break:break-word}
.legal a:hover{border-color:currentColor}
.legal .text-link{border-bottom-color:currentColor;margin-top:clamp(40px,5vw,60px)}
.faq summary span,.all-categories summary span{transition:transform .25s ease}

/* ----------------------------------------------------------- colophon */
.footer{background:var(--black);color:var(--white);padding:clamp(70px,9vw,110px) 0 30px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px}
.footer-logo{width:clamp(190px,20vw,260px);margin-bottom:30px}
.footer-credit{
  color:rgba(255,255,255,.72);font-size:.78rem;letter-spacing:.06em;line-height:1.9;margin:0;
}
.footer-credit em{
  display:inline-block;margin-top:4px;
  font:italic 400 0.8rem var(--display);color:#fff;letter-spacing:0;
}
.footer p{color:rgba(255,255,255,.6);font-size:.8rem}
.footer a{display:block;color:rgba(255,255,255,.68);font-size:.76rem;margin:10px 0;letter-spacing:.06em}
.footer a:hover{color:var(--white)}
.footer-label{
  color:#fff!important;text-transform:uppercase;letter-spacing:.26em;
  font-weight:500;font-size:.6rem;margin-bottom:18px;
}
/* contatti: nome, ruolo e numero telefonabile */
.footer-contacts{list-style:none;padding:0;margin:0;display:grid;gap:24px}
.footer-contacts li{display:grid;gap:3px}
.contact-name{color:#fff;font-size:.84rem;letter-spacing:.02em}
.contact-role{color:rgba(255,255,255,.5);font-size:.72rem;letter-spacing:.06em}
/* padding verticale: area di tocco comoda sul telefono */
.footer-contacts a{
  justify-self:start;margin:2px 0 0;padding:7px 0;
  font-size:.86rem;letter-spacing:.1em;font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--line-dark);
}
.footer-contacts a:hover{border-color:var(--white)}
/* blocco location in fondo alla pagina */
.footer-venue{
  border-top:1px solid var(--line-dark);
  margin-top:clamp(48px,6vw,72px);padding-top:30px;
}
/* prefisso .footer necessario: senza, ".footer p" vince per specificità
   e schiaccia il nome della location a .8rem */
.footer .venue-name{font:400 clamp(1.3rem,2.4vw,1.75rem) var(--display);color:#fff;margin:0 0 6px}
.footer .venue-address{color:rgba(255,255,255,.6);font-size:.84rem;margin:0}
.venue-map{
  display:inline-block;margin-top:16px;padding:9px 0;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  border-bottom:1px solid var(--line-dark);
}
.venue-map:hover{border-color:var(--white)}
.footer-bottom{
  display:flex;justify-content:space-between;gap:20px;
  border-top:1px solid var(--line-dark);margin-top:clamp(56px,7vw,80px);padding-top:26px;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
.footer-bottom a{display:inline;color:rgba(255,255,255,.55);font-size:inherit;letter-spacing:inherit}

/* -------------------------------------------------------- animazioni */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.reveal.visible{opacity:1;transform:none}
:focus-visible{outline:1px solid currentColor;outline-offset:5px}

/* ------------------------------------------------------ breakpoints */
@media(max-width:1020px){
  .timeline{grid-template-columns:repeat(3,1fr);row-gap:48px;border-top:0}
  .timeline li,.timeline li+li{border-top:1px solid var(--ink);border-left:0;padding:34px 18px 10px 0}
  .territory{grid-template-columns:1fr}
  .territory-image{min-height:62vh}
  .territory-copy{padding:88px var(--pad)}
  .partner-grid{grid-template-columns:repeat(2,1fr)}
  .registration-grid{grid-template-columns:1fr}
  .registration-intro{position:static}
  .faq-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}

@media(max-width:760px){
  html{scroll-padding-top:72px}
  .site-header{height:72px;padding:0 18px}
  .nav-logo{width:120px}
  .menu-toggle{display:block;z-index:2}
  .nav-links{
    position:fixed;inset:72px 0 0;background:var(--paper);color:var(--ink);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    transform:translateX(100%);visibility:hidden;transition:transform .4s ease,visibility .4s ease;
  }
  .nav-links.open{transform:none;visibility:visible}
  .nav-links a{font:400 clamp(2rem,10vw,3.2rem) var(--display);letter-spacing:-.01em;text-transform:none}
  .nav-links .nav-cta{font:500 .64rem var(--body);letter-spacing:.24em;text-transform:uppercase;margin-top:30px;padding:13px 24px!important}
  .hero{padding:100px 18px 84px;background-position:44% 40%}
  .hero-frame{padding:34px 20px}
  .hero h1 br{display:none}
  .issue-line{font-size:.52rem;letter-spacing:.24em;gap:8px}
  .button{width:100%;max-width:360px}
  .intro{min-height:auto}
  .senses{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;font-size:.58rem}
  .senses i:nth-of-type(2){display:none}
  .senses span:last-child{grid-column:2/4}
  .statement-media{height:76vh}
  .statement-media img{object-position:center top}
  .photo-credit{right:auto;left:18px;bottom:18px;font-size:.5rem}
  .timeline{display:block;margin-bottom:76px}
  .timeline li,.timeline li+li{display:grid;grid-template-columns:52px 1fr;padding:26px 0;border-top:1px solid var(--line)}
  .timeline li::before{display:none}
  .timeline h3{margin-top:0}
  .spread-grid{grid-template-columns:1fr;gap:44px}
  .spread figure.offset{margin-top:0}
  .territory-image{min-height:54vh}
  .partner-grid{grid-template-columns:1fr}
  .partner-card{min-height:auto;padding:30px}
  .partner-mark{margin-bottom:26px}
  .partner-mark-logo{--mark-h:98px;max-width:230px;height:130px;padding:16px}
  .reason-list li{grid-template-columns:76px 1fr;padding:26px 0}
  /* su mobile: cornice quasi assente, più spazio utile al modulo */
  .registration-form{max-width:none}
  .form-shell{padding:32px 20px}
  .footer-grid{grid-template-columns:1fr;gap:38px}
  .footer-brand{grid-column:auto}
  .footer-bottom{flex-direction:column;gap:12px}
  .after-actions{display:grid}
  .after-actions a{justify-content:center}
}

@media(max-width:374px){
  .hero h1{font-size:1.85rem}
  .intro h2{font-size:1.75rem}
  .statement-media p{font-size:1.7rem}
  .section{padding:78px 0}
  .reason-list li{grid-template-columns:60px 1fr}
  .reason-list p{font-size:1.18rem}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}