/* DriveForward — sito. Fasce alternate scure e chiare, numeri grandi in rosso, linee sottili, fasce inclinate. */
@font-face{font-family:"Space Grotesk";src:url("fonts/spacegrotesk-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("fonts/spacegrotesk-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --k:#05070C; --p:#F3F3EF; --w:#FFFFFF;
  --r:#D91F2C; --r2:#FF2E3C;
  --g1:#3A4252; --g2:#4A5160; --g3:#B8BFCC;
  --ln:#D3D5D9; --ln-d:rgba(255,255,255,.16);
  --display:"Space Grotesk","Arial Narrow",Arial,sans-serif;
  --body:"Inter","Segoe UI",Arial,sans-serif;
  --gl:max(20px,env(safe-area-inset-left,0px)); --gr:max(20px,env(safe-area-inset-right,0px));
  --sect:clamp(56px,8vw,112px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--p);color:var(--k);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--r2);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
.num{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.wrap{max-width:1200px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.band{padding-block:var(--sect)}
.band--light{background:var(--p);color:var(--k)}
.band--white{background:var(--w);color:var(--k)}
.band--dark{background:var(--k);color:var(--p)}
.band--tight{padding-top:0}

/* testata di sezione */
.head{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
.label{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--r);margin-bottom:14px}
.head .label{color:var(--r);margin-top:0;font-size:.8rem;max-width:none}
.band--dark .label,.band--dark .head .label,.hero .label{color:var(--r2)}
.head h2{font-size:clamp(1.75rem,3.8vw,2.9rem);text-transform:uppercase}
.head p{margin-top:16px;color:var(--g2);max-width:62ch;font-size:1.04rem}
.band--dark .head p{color:var(--g3)}

/* pulsanti */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--body);font-weight:600;font-size:.95rem;line-height:1.2;text-decoration:none;padding:14px 24px;border:1px solid transparent;cursor:pointer;transition:background .18s,color .18s,border-color .18s;text-align:center}
.btn--red{background:var(--r);color:#fff}
.btn--red:hover{background:var(--k);color:#fff}
.band--dark .btn--red:hover,.nav .btn--red:hover,.hero .btn--red:hover,.notice .btn--red:hover{background:#fff;color:var(--k)}
.btn--line{background:transparent;color:inherit;border-color:currentColor}
.btn--line:hover{background:var(--k);color:#fff;border-color:var(--k)}
.band--dark .btn--line:hover,.hero .btn--line:hover{background:#fff;color:var(--k);border-color:#fff}
.btn--sm{padding:10px 18px;font-size:.86rem}
.tlink{font-weight:600;text-decoration:underline;text-decoration-color:var(--r);text-underline-offset:4px;text-decoration-thickness:2px}
.tlink:hover{color:var(--r)}
.band--dark .tlink:hover{color:var(--r2)}

/* navigazione */
.nav{position:sticky;top:0;z-index:50;background:var(--k);color:var(--p);border-bottom:1px solid var(--ln-d)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:1.05rem;letter-spacing:.07em;white-space:nowrap}
.logo svg{width:28px;height:28px;flex:none}
.logo b{font-weight:700}.logo span span{font-weight:500}
.nav-links{display:flex;gap:26px}
.nav-links a{text-decoration:none;font-size:.88rem;color:var(--g3);padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:#fff;border-bottom-color:var(--r2)}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-toggle{display:none;background:none;border:1px solid var(--ln-d);color:var(--p);font:600 .86rem var(--body);padding:9px 14px;cursor:pointer}
@media (max-width:1140px){
  .nav-toggle{display:inline-block}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--k);border-bottom:1px solid var(--ln-d);padding:4px var(--gr) 12px var(--gl)}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--ln-d);font-size:1rem}
  .nav-links a:hover,.nav-links a[aria-current="page"]{border-bottom-color:var(--ln-d)}
}
@media (max-width:520px){.nav .btn{display:none}}

/* hero e testate di pagina: fasce inclinate a destra */
.hero{position:relative;overflow:hidden;background:var(--k);color:var(--p);padding-block:clamp(56px,9vw,120px) clamp(40px,6vw,72px)}
.hero::before,.hero::after{content:"";position:absolute;top:-20%;bottom:-20%;transform:skewX(-20deg);pointer-events:none}
.hero::before{right:13%;width:8%;background:var(--g1);opacity:.6}
.hero::after{right:-5%;width:15%;background:var(--r)}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(2.5rem,7.2vw,5.6rem);text-transform:uppercase;line-height:.96;max-width:11ch}
.hero h1 em{font-style:normal;color:var(--r2)}
.hero .lede{margin-top:26px;max-width:50ch;font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--g3)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero--page{padding-block:clamp(44px,7vw,88px) clamp(36px,5vw,64px)}
.hero--page h1{font-size:clamp(2.1rem,5.6vw,4rem);max-width:16ch}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px;margin-top:clamp(40px,6vw,72px);max-width:880px}
.stat{border-top:1px solid var(--ln-d);padding-top:16px}
.stat .num{display:block;font-size:clamp(1.9rem,3.6vw,2.8rem);color:var(--r2);line-height:1}
.stat span:last-child{display:block;margin-top:8px;font-size:.84rem;color:var(--g3);line-height:1.4}
@media (max-width:900px){.hero::before{display:none}.hero::after{right:-16%;width:24%;opacity:.22}.hero h1{max-width:9ch}}
@media (max-width:640px){.stats{grid-template-columns:1fr 1fr;gap:20px 20px}.hero::after{right:-24%;width:34%}}

/* manifesto */
.manifesto{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.manifesto blockquote{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3.2vw,2.7rem);line-height:1.1;letter-spacing:-.02em;text-wrap:balance;border-left:6px solid var(--r);padding-left:24px}
.manifesto blockquote b{color:var(--r)}
.manifesto p{color:var(--g2);max-width:56ch}
.manifesto p+p{margin-top:16px}

/* griglie a linee sottili */
.grid{display:grid;gap:0 36px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.item{border-top:2px solid var(--k);padding:22px 0 34px;min-width:0;display:flex;flex-direction:column;gap:10px}
.band--dark .item{border-top-color:var(--ln-d);border-top-width:1px}
.item .kind{font-size:.8rem;color:var(--g2);font-weight:600;letter-spacing:.04em}
.item h3{font-size:1.4rem;text-transform:uppercase}
.item p{color:var(--g2);font-size:.97rem}
.band--dark .item p{color:var(--g3)}
.item .meta{font-size:.84rem;color:var(--g2);border-top:1px solid var(--ln);padding-top:10px;margin-top:auto}
.item .btn{align-self:flex-start;margin-top:6px}

/* metodo: righe */
.rows{border-top:1px solid var(--ln-d)}
.row{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:12px 48px;padding:26px 0;border-bottom:1px solid var(--ln-d);align-items:baseline}
.row h3{font-size:1.45rem;text-transform:uppercase}
.row h3 small{display:block;font-family:var(--body);font-weight:400;font-size:.84rem;letter-spacing:0;text-transform:none;color:var(--g3);margin-top:6px}
.row p{color:var(--g3);max-width:66ch}

/* risultati */
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px}
.fig{border-top:1px solid var(--ln-d);padding:18px 0 30px}
.fig .num{display:block;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;color:#fff}
.fig b{display:block;margin-top:10px;font-weight:600;font-size:.95rem}
.fig>span:last-child{display:block;font-size:.86rem;color:var(--g3);margin-top:2px}
.fig .delta{color:var(--r2);font-weight:600}
.figs--red .fig .num{color:var(--r2);font-size:clamp(2.2rem,4.2vw,3.4rem)}
.figs--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sub{font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;margin:clamp(28px,4vw,44px) 0 16px}
.band--dark .sub{color:var(--g3)}
.sub:first-of-type{margin-top:0}

/* chi siamo */
.about{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.portrait{position:relative;background:var(--k)}
.portrait img{width:100%;aspect-ratio:445/557;object-fit:cover}
.portrait figcaption{background:var(--k);color:#fff;padding:16px 18px;border-top:6px solid var(--r)}
.portrait figcaption b{display:block;font-family:var(--display);font-size:1.35rem;line-height:1.1}
.portrait figcaption span{font-size:.86rem;color:var(--g3)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin-top:8px}
.facts div{border-bottom:1px solid var(--ln);padding:12px 0}
.facts b{display:block;font-family:var(--display);font-size:1.05rem}
.facts span{font-size:.82rem;color:var(--g2)}
.story .lede{font-size:1.15rem;font-weight:600;max-width:56ch}
.story p{max-width:62ch;color:var(--g2);margin-top:16px}
.story p.lede{color:var(--k);margin-top:0}
.route{margin-top:32px;border-top:2px solid var(--k);max-width:620px}
.route li{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--ln);align-items:baseline}
.route time{font-family:var(--display);font-weight:700;color:var(--r);font-variant-numeric:tabular-nums}
.route span{font-weight:600;font-size:.96rem}

/* pillole */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.quote{border-top:1px solid var(--ln-d);padding:26px 0 38px}
.quote p{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
.quote cite{display:block;margin-top:14px;font-style:normal;font-size:.84rem;color:var(--r2);font-weight:600;letter-spacing:.04em}

/* confronto */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.vs h3{font-size:1.25rem;text-transform:uppercase;padding-bottom:14px;border-bottom:2px solid var(--g3);color:var(--g2)}
.vs li{padding:14px 0;border-bottom:1px solid var(--ln);color:var(--g2)}
.vs--us h3{color:var(--k);border-bottom:6px solid var(--r)}
.vs--us li{color:var(--k);font-weight:600}

/* piani */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.plan{border-top:2px solid var(--k);padding:22px 0 0;display:flex;flex-direction:column;gap:14px;min-width:0}
.plan h3{font-size:1.4rem;text-transform:uppercase}
.plan .flag{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--r)}
.plan li{padding:11px 0;border-bottom:1px solid var(--ln);color:var(--g2);font-size:.96rem}
.plan li:first-child{border-top:1px solid var(--ln)}
.plan .tlink{align-self:flex-start;margin-top:4px}
.plan--hot{background:var(--k);color:var(--p);border-top:6px solid var(--r);padding:22px 24px 26px}
.plan--hot .flag{color:var(--r2)}
.plan--hot li{color:var(--g3);border-color:var(--ln-d)}
.plan--hot li:first-child{border-top-color:var(--ln-d)}
.plan--hot .tlink:hover{color:var(--r2)}

/* contatti e modulo */
.contact{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,72px);align-items:start}
.contact h2{font-size:clamp(1.9rem,4.4vw,3.3rem);text-transform:uppercase}
.contact h2 em{font-style:normal;color:var(--r2)}
.contact-left p{color:var(--g3);margin-top:18px;max-width:46ch}
.reach{margin-top:28px;border-top:1px solid var(--ln-d)}
.reach li{display:grid;grid-template-columns:90px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--ln-d);font-size:.98rem}
.reach span{color:var(--g3);font-size:.86rem}
.reach a{text-decoration:none;font-weight:600;overflow-wrap:anywhere}
.reach a:hover{color:var(--r2)}
.form{border-top:6px solid var(--r);background:#0C1018;padding:clamp(20px,3vw,34px)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f--full{grid-column:1/-1}
.f label{font-size:.82rem;font-weight:600;color:var(--g3)}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--g2);color:#fff;font:400 1rem var(--body);padding:10px 2px;border-radius:0;color-scheme:dark}
.form select{appearance:auto;background:#0C1018}
.form textarea{min-height:96px;resize:vertical;border:1px solid var(--g2);padding:10px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--r2)}
.form ::placeholder{color:#6B7384}
.check{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--g3);line-height:1.5}
.check input{margin-top:3px;width:16px;height:16px;accent-color:var(--r);flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form .btn{width:100%;margin-top:20px;padding:16px}
.form .btn[disabled]{opacity:.6;cursor:default}
.fnote{margin-top:12px;font-size:.86rem;color:var(--g3);text-align:center}
.fnote.ok{color:#fff;font-weight:600}
.fnote.err{color:var(--r2);font-weight:600}
.fnote a{color:inherit}

/* testo lungo (privacy) */
.prose{max-width:760px}
.prose h2{font-size:1.35rem;text-transform:uppercase;margin:38px 0 10px;padding-top:18px;border-top:2px solid var(--k)}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--g1);margin-top:10px}
.prose ul{list-style:none}
.prose li{padding-left:18px;position:relative}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:2px;background:var(--r)}
.prose a{font-weight:600;text-decoration:underline;text-decoration-color:var(--r);text-underline-offset:3px}
.prose .updated{font-size:.88rem;color:var(--g2);margin-top:32px}

/* passi (check-up) */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid var(--k);padding:16px 0 28px}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:700;font-size:2.2rem;line-height:1;color:var(--r);display:block;margin-bottom:10px}
.steps h3{font-size:1.1rem;text-transform:uppercase;margin-bottom:6px}
.steps p{color:var(--g2);font-size:.95rem}
.small{font-size:.88rem;color:var(--g2);max-width:84ch;margin-top:28px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* piè di pagina */
.foot{background:var(--k);color:var(--g3);border-top:1px solid var(--ln-d);font-size:.86rem}
.foot .wrap{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center;justify-content:space-between;padding-block:26px}
.foot .logo{color:#fff}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot a{text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}

/* avviso sul trattamento dei dati */
.notice{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--k);color:var(--p);border-top:4px solid var(--r);padding:14px var(--gr) calc(14px + env(safe-area-inset-bottom,0px)) var(--gl)}
.notice-in{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.notice p{font-size:.88rem;color:var(--g3);max-width:86ch;line-height:1.5}
.notice p b{color:#fff}
.notice a{color:#fff;font-weight:600}
.notice[hidden]{display:none}

@media (max-width:980px){
  .manifesto,.about,.contact,.versus{grid-template-columns:1fr}
  .grid--4,.figs,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3,.plans,.figs--3{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .about .portrait{max-width:380px}
  .versus{gap:36px}
}
@media (max-width:640px){
  .grid--2,.grid--4,.quotes,.steps{grid-template-columns:1fr}
  .figs{grid-template-columns:1fr 1fr;gap:0 20px}
  .fgrid{grid-template-columns:1fr}
  .manifesto blockquote{padding-left:16px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{.nav,.notice,.form{display:none}}
