/* ===================================================================
   NoHalfWay | Project — shared styles
   Palette: bianco / nero (come l'originale). Nessun colore d'accento.
   =================================================================== */

/* ---- Font self-hosted: Fira Mono (OFL, vedi fonts/OFL.txt) ---- */
@font-face{font-family:'Fira Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/FiraMono-Regular.woff2') format('woff2'),url('fonts/FiraMono-Regular.woff') format('woff')}
@font-face{font-family:'Fira Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/FiraMono-Medium.woff2') format('woff2'),url('fonts/FiraMono-Medium.woff') format('woff')}
@font-face{font-family:'Fira Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/FiraMono-Bold.woff2') format('woff2'),url('fonts/FiraMono-Bold.woff') format('woff')}

:root{
  --bg:#000000;
  --surface:#0d0d0d;
  --surface-2:#141414;
  --line:#242424;
  --text:#ffffff;
  --muted:#9a9a9a;
  --muted-dim:#6a6a6a;
  --purple:#7f43ff;   /* accento navigazione: hover + pagina attiva */

  --ff-display:'Fira Mono', ui-monospace, monospace;
  --ff-body:'Fira Mono', ui-monospace, monospace;

  --maxw:1200px;
  --pad:clamp(20px,5vw,56px);
  --nav-h:70px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--ff-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
:focus-visible{outline:2px solid #fff;outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

.eyebrow{
  font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.muted{color:var(--muted)}

/* ---------------- NAV ---------------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;background:var(--bg);
  border-bottom:1px solid transparent;transition:border-color .3s ease;
}
header.scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;width:100%}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:38px;width:auto}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--muted);position:relative;padding:6px 0;transition:color .2s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--purple);transition:width .28s ease;
}
.nav-links a:hover{color:var(--purple)}
.nav-links a.active{color:var(--purple)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}

.socials{display:flex;gap:16px;align-items:center}
.socials a{color:var(--muted);transition:color .2s,transform .2s}
.socials a:hover{color:#fff;transform:translateY(-2px)}
.socials svg{width:18px;height:18px;display:block}

.nav-right{display:flex;align-items:center;gap:26px}

.menu-toggle{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:4px}

/* mobile menu */
.mobile-menu{
  display:none;position:fixed;inset:var(--nav-h) 0 0;z-index:99;background:var(--bg);
  flex-direction:column;padding:36px var(--pad);gap:4px;
}
.mobile-menu.open{display:flex}
.mobile-menu a{
  font-family:var(--ff-display);text-transform:uppercase;font-size:2rem;letter-spacing:.02em;
  padding:16px 0;border-bottom:1px solid var(--line);color:#fff;
}
.mobile-menu a.active{color:var(--purple)}
.mobile-menu .m-soc{display:flex;gap:22px;margin-top:30px}
.mobile-menu .m-soc a{font-family:var(--ff-body);font-size:.95rem;border:0;padding:0;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:.65em;
  font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:15px 26px;border:1px solid #fff;background:transparent;color:#fff;
  cursor:pointer;transition:background .25s ease,color .25s ease;
}
.btn .arr{transition:transform .25s ease}
.btn:hover{background:#fff;color:#000}
.btn:hover .arr{transform:translateX(4px)}
.btn--solid{background:#fff;color:#000}
.btn--solid:hover{background:transparent;color:#fff}

/* ---------------- PAGE INTRO (subpages) ---------------- */
.page{padding-top:var(--nav-h);padding-bottom:clamp(60px,10vh,120px)}
.wordmark{margin:0 auto clamp(40px,6vh,72px);text-align:center}
.wordmark img{height:auto;width:auto;max-width:min(760px,90%);max-height:120px;margin:0 auto}
.page-eyebrow{text-align:center;margin-bottom:22px}

/* ---------------- TYPE BLOCKS ---------------- */
.lead{font-size:clamp(1.08rem,1.7vw,1.35rem);max-width:60ch;color:#fff;line-height:1.6}
.copy{max-width:64ch;color:var(--muted);font-size:1.06rem;line-height:1.75}
.copy p+p{margin-top:1.25em}
.copy .em{color:#fff;font-weight:600}
.copy i{font-style:italic;font-weight:700;color:#fff;letter-spacing:.02em}
.center{margin-left:auto;margin-right:auto;text-align:center}
.center .copy,.center .lead{margin-left:auto;margin-right:auto}

.cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
.cta-row.center{justify-content:center}

.section-gap{margin-top:clamp(56px,9vh,104px)}

.display-h{
  font-family:var(--ff-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,5.5vw,4rem);line-height:.96;letter-spacing:.005em;
}

/* divider */
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------------- HERO (home) ---------------- */
.hero{
  min-height:calc(100svh - 0px);display:grid;grid-template-columns:1.1fr .9fr;
  align-items:center;gap:clamp(30px,5vw,70px);
  padding-top:var(--nav-h);
}
.hero-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.hero-eyebrow .ln{height:1px;width:48px;background:#fff}
.hero h1{
  font-family:var(--ff-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.4rem,4.8vw,4.4rem);line-height:1.05;letter-spacing:0;
  text-wrap:balance;overflow-wrap:break-word;
}
.hero-sub{margin-top:30px;max-width:44ch;color:var(--muted);font-size:1.06rem}
.hero-media{position:relative;height:min(74vh,640px)}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
/* video di sfondo dentro i gateway / blocchi foto */
.gate .gate-img video{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gate:hover .gate-img video{transform:scale(1.05)}
.single-photo video,.photo-strip .ph video{width:100%;height:100%;object-fit:cover;filter:grayscale(100%)}

/* video nella parte testuale delle sezioni (HQ / Program) */
.section-video{margin:40px auto 0;max-width:760px;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line)}
.section-video video{width:100%;height:100%;object-fit:cover}

/* ---------------- GATEWAYS (home topics) ---------------- */
.gateways{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gate{position:relative;display:block;background:var(--bg);overflow:hidden;min-height:460px}
.gate .gate-img{position:absolute;inset:0}
.gate .gate-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gate:hover .gate-img img{transform:scale(1.05)}
.gate .gate-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.66),rgba(0,0,0,.45) 80%)}
.gate-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;gap:18px;padding:clamp(28px,4vw,48px)}
.gate-inner .wm{max-width:300px;max-height:54px;width:auto;height:auto;margin-bottom:4px}
.gate-inner h2{font-family:var(--ff-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.02;letter-spacing:0;max-width:16ch}
.gate .go{display:inline-flex;align-items:center;gap:.6em;font-size:.82rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}
.gate .go .arr{transition:transform .3s ease}
.gate:hover .go .arr{transform:translateX(6px)}

/* ---------------- IMAGES on subpages ---------------- */
.media-block{margin:clamp(50px,8vh,90px) auto;text-align:center}
.media-block.full img{width:100%;height:auto}
.orari{max-width:680px;margin-left:auto;margin-right:auto;border:1px solid var(--line)}
.photo-strip{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.photo-strip .ph{aspect-ratio:4/3;overflow:hidden;background:var(--surface)}
.photo-strip .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%);
  transition:transform .6s ease,filter .5s ease}
.photo-strip .ph:hover img{transform:scale(1.04);filter:grayscale(0%)}
.single-photo{aspect-ratio:16/7;overflow:hidden;border:1px solid var(--line)}
.single-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%)}
.single-photo.portrait{aspect-ratio:2/3;max-width:460px;margin-left:auto;margin-right:auto}

/* sezioni testo con VIDEO DI SFONDO (HQ / Program): testo + pulsante sopra */
.text-hero{position:relative;overflow:hidden;padding:clamp(64px,11vh,130px) 0}
.text-hero-media{position:absolute;inset:0;z-index:0}
.text-hero-media img,.text-hero-media video{width:100%;height:100%;object-fit:cover}
.text-hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.72))}
.text-hero-inner{position:relative;z-index:2}
.text-hero .wordmark{margin-bottom:clamp(28px,5vh,52px)}
.text-hero .copy{color:#dcdcdc}
.text-hero .cta-row{margin-top:38px}

/* ---------------- QUOTE ---------------- */
.quote{max-width:60ch;margin:clamp(50px,8vh,90px) auto;text-align:center}
.quote p{font-size:clamp(1.2rem,2.2vw,1.65rem);font-weight:500;line-height:1.45;color:#fff}
.quote cite{display:block;margin-top:18px;font-style:italic;color:var(--muted);font-size:1.05rem}

/* ---------------- PRICING ---------------- */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:46px}
.price{border:1px solid var(--line);background:var(--surface);padding:clamp(28px,3vw,44px);
  display:flex;flex-direction:column;gap:18px;transition:border-color .3s ease,transform .35s ease}
.price:hover{border-color:#fff;transform:translateY(-4px)}
.price .pname{font-family:var(--ff-display);text-transform:uppercase;font-size:1.6rem;letter-spacing:.02em}
.price .amt{display:flex;align-items:baseline;gap:8px}
.price .amt .big{font-family:var(--ff-display);font-size:clamp(2.6rem,6vw,3.8rem);line-height:1}
.price .amt .per{color:var(--muted);font-size:.9rem;letter-spacing:.06em}
.price .ptag{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.price .pdesc{color:var(--muted);font-size:.98rem;flex:1}
.price .btn{align-self:flex-start;margin-top:4px}

/* ---------------- FOOTER ---------------- */
footer{border-top:1px solid var(--line);padding:clamp(60px,9vh,100px) 0 38px}
.foot-grid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:32px}
.foot-title{font-family:var(--ff-display);text-transform:uppercase;
  font-size:clamp(1.4rem,3vw,2rem);line-height:1;margin-bottom:0}
.foot-col h4{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  font-weight:600;margin-bottom:16px}
.foot-col a,.foot-col p{display:block;color:#fff;font-size:1.04rem;margin:0 auto 10px;
  width:fit-content;transition:opacity .2s}
.foot-col a:hover{opacity:.6}
.foot-phone{font-family:var(--ff-display);font-size:1.9rem!important;letter-spacing:.03em}
.foot-socials{display:flex;gap:18px;margin-top:8px;justify-content:center}
.foot-socials a{color:var(--muted)}
.foot-socials a:hover{color:#fff}
.foot-socials svg{width:22px;height:22px}
.foot-bottom{margin-top:60px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:.78rem;letter-spacing:.06em;color:var(--muted-dim)}
.foot-bottom a:hover{color:#fff}

/* ---------------- SCROLL REVEAL ---------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal.s1{transition-delay:.08s}.reveal.s2{transition-delay:.16s}.reveal.s3{transition-delay:.24s}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:860px){
  .nav-links,.nav-right .socials{display:none}
  .menu-toggle{display:block}
  /* mobile: testo SOPRA la foto (due layer, opacità 100%) */
  .hero{position:relative;display:flex;align-items:center;min-height:82svh;gap:0;padding-top:calc(var(--nav-h) + 20px);padding-bottom:40px}
  .hero>div:first-child{position:relative;z-index:2;width:100%}
  .hero-media{position:absolute;inset:0;height:100%;order:0;z-index:0}
  .gateways,.prices,.photo-strip,.foot-grid{grid-template-columns:1fr}
  .single-photo{aspect-ratio:4/3}
}

/* ---- TELEFONO: tutto ridimensionato per stare nello schermo ---- */
@media(max-width:600px){
  :root{--nav-h:58px}
  .brand img{height:32px}

  /* hero */
  .hero{gap:24px;padding-top:calc(var(--nav-h) + 20px)}
  .hero h1{font-size:clamp(1.85rem,8.5vw,2.6rem);line-height:1;max-width:none}
  .hero-eyebrow{margin-bottom:18px}
  .hero-sub{font-size:.96rem;margin-top:22px;max-width:none}
  .hero-media{height:100%}

  /* titoli e testi */
  .display-h{font-size:clamp(1.55rem,7vw,2rem)}
  .lead{font-size:1rem}
  .copy{font-size:.98rem}
  .eyebrow{font-size:.68rem;letter-spacing:.24em}

  /* wordmark immagini più piccole */
  .wordmark{margin-bottom:30px}
  .wordmark img{max-height:62px;max-width:88%}
  .page{padding-top:var(--nav-h);padding-bottom:60px}
  .page-eyebrow{margin-bottom:16px}

  /* gateway (i due topic in home) più compatti */
  .gate{min-height:300px}
  .gate-inner{padding:24px}
  .gate-inner .wm{max-width:190px;max-height:38px}
  .gate-inner h2{font-size:1.35rem}

  /* bottoni: meno larghi, testo che va a capo se serve */
  .btn{font-size:.74rem;padding:13px 18px;letter-spacing:.08em}
  .cta-row{gap:12px;margin-top:30px}

  /* ORARI: entra nello schermo, niente zoom */
  .media-block{margin:40px auto}
  .orari{max-width:100%;max-height:80vh;width:auto}

  /* quote / prezzi */
  .quote{margin:46px auto}
  .quote p{font-size:1.12rem}
  .prices{margin-top:34px}
  .price{padding:26px}
  .price .pname{font-size:1.35rem}
  .price .amt .big{font-size:2.4rem}

  /* sezioni meno “arie” verticali */
  .section-gap{margin-top:48px}

  /* footer */
  .foot-title{font-size:clamp(1.3rem,6vw,1.7rem)}
  .foot-phone{font-size:1.5rem!important}
  .foot-col a,.foot-col p{font-size:.98rem}
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ---------------- FORM ISCRIZIONE ---------------- */
.form-wrap{max-width:560px;margin:0 auto}
.form-note{color:var(--muted);font-size:.95rem;margin-bottom:30px;max-width:60ch}
.field{margin-bottom:20px}
.field label{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;font-weight:600}
.field input{width:100%;background:var(--surface);border:1px solid var(--line);color:#fff;
  padding:14px 16px;font-family:var(--ff-body);font-size:1rem;transition:border-color .2s}
.field input:focus{outline:none;border-color:var(--purple)}
.field input::placeholder{color:var(--muted-dim)}
.field .err{display:none;color:#ff6b6b;font-size:.82rem;margin-top:7px}
.field.invalid input{border-color:#ff6b6b}
.field.invalid .err{display:block}
.consent{display:flex;gap:12px;align-items:flex-start;margin:26px 0;font-size:.9rem;color:var(--muted)}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--purple);flex-shrink:0}
.consent a{color:#fff;text-decoration:underline}
.consent a:hover{color:var(--purple)}
.form-status{margin-top:18px;font-size:.92rem;min-height:1.2em}
.form-status.error{color:#ff6b6b}
.honeypot{position:absolute!important;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0}

/* ---------------- COOKIE BANNER ---------------- */
.cookie-banner{
  position:fixed;left:50%;bottom:18px;transform:translate(-50%,160%);z-index:200;
  width:min(700px,calc(100% - 28px));background:var(--surface-2);border:1px solid var(--line);
  padding:20px 22px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.cookie-banner.show{transform:translate(-50%,0)}
.cookie-banner p{margin:0;flex:1;min-width:230px;font-size:.9rem;line-height:1.55;color:var(--muted)}
.cookie-banner p a{color:#fff;text-decoration:underline}
.cookie-banner .cookie-ok{flex-shrink:0}
@media(prefers-reduced-motion:reduce){.cookie-banner{transition:none}}

/* ---------------- LEGAL PAGES ---------------- */
.legal{padding-top:calc(var(--nav-h) + clamp(40px,7vh,80px));padding-bottom:clamp(60px,9vh,110px)}
.legal .wrap{max-width:820px}
.legal h1{font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(2rem,5vw,3.4rem);
  line-height:1.02;letter-spacing:.005em;margin-bottom:8px}
.legal .updated{color:var(--muted-dim);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:42px}
.legal h2{font-family:var(--ff-display);text-transform:uppercase;font-size:1.35rem;letter-spacing:.02em;
  margin:42px 0 14px;padding-top:22px;border-top:1px solid var(--line)}
.legal h3{font-size:1.02rem;font-weight:700;color:#fff;margin:22px 0 8px}
.legal p,.legal li{color:var(--muted);font-size:1rem;line-height:1.72}
.legal p{margin-bottom:14px}
.legal ul{margin:0 0 16px;padding:0}
.legal li{position:relative;padding-left:22px;margin-bottom:8px}
.legal li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:2px;background:var(--purple)}
.legal a{color:#fff;text-decoration:underline}
.legal a:hover{color:var(--purple)}
.legal .ph{color:var(--purple);font-weight:700} /* segnaposto da compilare */
.legal table{width:100%;border-collapse:collapse;margin:6px 0 24px;font-size:.9rem}
.legal th,.legal td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top;color:var(--muted)}
.legal th{color:#fff;font-weight:700;background:var(--surface)}
.legal .back{display:inline-block;margin-top:46px;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;text-decoration:none}
.legal .back:hover{color:var(--purple)}

/* ---- TELEFONO: override pagine legali + banner (in fondo per precedenza) ---- */
@media(max-width:600px){
  .legal h1{font-size:clamp(1.8rem,9vw,2.4rem)}
  .legal h2{font-size:1.2rem}
  .legal table{font-size:.76rem}
  .legal th,.legal td{padding:7px 8px}
  .cookie-banner{padding:16px;gap:12px;bottom:12px}
  .cookie-banner p{font-size:.84rem;min-width:0}
  .cookie-banner .cookie-ok{width:100%;justify-content:center}
}

/* Fira Mono: peso ai titoli (ex Anton) per dare impatto */
.hero h1,.display-h,.foot-title,.section-title,.gate-inner h2,.price .pname,
.price .amt .big,.foot-phone,.legal h1,.legal h2,.mobile-menu a,.brand{font-weight:700}
