:root{
--g:#163826;
--g2:#0e2619;
--g3:#2a6645;
--au:#c4974a;
--au2:#e8d5a4;
--wh:#ffffff;
--cr:#f7f4ef;
--tx:#1c1c1c;
--tx2:#6a6a6a;
--bd:#e8e3dc;
--footer:#060d08;
--f1:'Cormorant Garamond',Georgia,serif;
--f2:'Jost','Helvetica Neue',Arial,sans-serif;
--ease:cubic-bezier(.4,0,.2,1);
--max:1280px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--f2); color:var(--tx); background:var(--wh); line-height:1.65; font-size:16px;}
h1,h2,h3{font-family:var(--f1); font-weight:300; color:var(--tx);}
h1 em, h2 em, h3 em{font-style:italic; font-weight:500;}
a{text-decoration:none; color:inherit;}
img{display:block; max-width:100%;}
ul{list-style:none;}
.eyebrow{display:block; font-family:var(--f2); font-size:13px; letter-spacing:4px; text-transform:uppercase; color:var(--au); font-weight:500; margin-bottom:16px;}

/* NAV — piatta, trasparente, come il sito reale
   #nav è già position:fixed (sempre visibile): la modalità "sticky" qui è il passaggio
   allo stato .s (più sottile), attivato via JS (assets/js/nav-seo.js) quando si scende
   oltre metà altezza schermo, non ai primi px di scroll. */
#nav{position:fixed; top:0; left:0; right:0; z-index:10000; display:flex; align-items:center; justify-content:space-between; padding:10px 60px;
background-color: transparent;
transition:padding .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
#nav.s{padding:4px 60px; background:rgba(14,38,25,.99); box-shadow:0 2px 16px rgba(0,0,0,.18);}
#nav .nl img{height:110px; width:auto; transition:height .3s var(--ease);}
#nav.s .nl img{height:48px;}
#nav .nm{display:flex; gap:34px;}
#nav .nm a{font-family:var(--f2); font-size:14px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.75); transition:color .25s var(--ease);}
#nav .nm a:hover{color:var(--wh);}
#nav .cta{background:var(--au); color:var(--g2); font-family:var(--f2); font-size:14px; letter-spacing:1.5px; text-transform:uppercase; font-weight:500; padding:9px 20px;}

/* Hamburger — nascosto su desktop, mostrato sotto i 960px (dove .nm scompare, vedi media query)
   così le voci di menu restano sempre raggiungibili anche sui dispositivi touch. */
.hbg{display:none; flex-direction:column; gap:5px; cursor:pointer; padding:10px 8px;} /* padding: area cliccabile min. 24x24 (WCAG 2.5.8) */
.hbg span{width:24px; height:1.5px; background:var(--wh); display:block; transition:.3s;}

/* BUTTONS — spigoli vivi, come il sito reale (radius 0) */
.btng{display:inline-block; background:var(--au); color:var(--g2); font-family:var(--f2); font-size:11px; letter-spacing:2.5px; text-transform:uppercase; font-weight:500; padding:15px 34px; transition:background .25s var(--ease);}
.btng:hover{background:var(--au2);}
.btn-ghost{display:inline-block; border:1px solid rgba(255,255,255,.5); color:var(--wh); font-family:var(--f2); font-size:11px; letter-spacing:2.5px; text-transform:uppercase; font-weight:500; padding:15px 34px;}
.btn-ghost:hover{border-color:var(--wh);}

/* HERO — colonna centrata, come nella home reale.
   min-height (non height fissa) + nessun overflow:hidden: se il contenuto (titolo, sottotitolo,
   bottoni) richiede più spazio di quanto disponibile, la sezione si allunga invece di tagliarlo.
   dvh dopo vh: sui browser senza supporto a dvh la riga viene ignorata (fallback vh); dove
   supportata, dvh evita il "salto" di layout quando la barra indirizzi mobile appare/scompare. */
.om-hero{position:relative; min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center;}
.hbg-img{position:absolute; inset:0;}
.hbg-img img{width:100%; height:100%; object-fit:cover;}
.hov{position:absolute; inset:0; background:linear-gradient(120deg, rgba(10,30,18,.78) 0%, rgba(14,38,25,.52) 55%, rgba(0,0,0,.28) 100%);}
.hc{position:relative; z-index:2; max-width:860px; padding:150px 40px 60px; text-align:center; margin:0 auto;}
.h-ti{font-size:clamp(40px,7vw,88px); font-weight:300; line-height:1.08; color:var(--wh); margin-bottom:26px;}
.hc .sub{color:rgba(255,255,255,.82); font-size:18px; max-width:560px; margin:0 auto 34px; font-family:var(--f2);}
.hero-ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

/* TICKER */
.om-media-strip{background:var(--g2); overflow:hidden; padding:15px 0; white-space:nowrap;}
.om-media-strip:hover .ticker-track{animation-play-state:paused;}
.ticker-track{display:inline-block; animation:ticker 34s linear infinite; color:rgba(255,255,255,.85); font-family:var(--f2); font-size:13px; letter-spacing:1.5px; text-transform:uppercase;}
.ticker-track span{margin:0 20px; color:var(--au);}
@keyframes ticker{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* CHI SIAMO — identico al pattern reale: cs-wr / cs-im / cs-tx */
#chi-siamo{background:var(--wh); padding:110px 60px;}
.cs-wr{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:86px; align-items:center;}
.cs-tx h2{font-size:clamp(28px,3.4vw,42px); margin-bottom:22px;}
.cs-tx p{margin-bottom:16px; color:var(--tx2); max-width:480px;}
.stat-row{display:flex; gap:36px; margin-top:30px;}
.stat-row .n{font-family:var(--f1); font-size:34px; font-weight:500; color:var(--g3);}
.stat-row .l{font-size:12px; color:var(--tx2); letter-spacing:.5px;}
.cs-im{aspect-ratio:4/5; overflow:hidden;}
.cs-im img{width:100%; height:100%; object-fit:cover;}

/* SEO CONTENT ★ */
.om-seo-content{background:var(--cr); padding:110px 60px;}
.seo-inner{max-width:var(--max); margin:0 auto;}
.seo-cols{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-bottom:90px;}
.seo-cols h2{font-size:clamp(26px,3.2vw,38px); margin-bottom:20px;}
.seo-cols p{margin-bottom:14px; color:var(--tx2);}
.seo-cols-2{display:grid; grid-template-columns: 1fr; gap:64px; align-items:center; margin-bottom:90px;}
.seo-cols-2 h2{font-size:clamp(26px,3.2vw,38px); margin-bottom:20px;}
.seo-cols-2 p{margin-bottom:14px; color:var(--tx2);}
.seo-img-placeholder{aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#948a76;}
.seo-img-placeholder svg{width:44px; height:44px; opacity:.6;}
.tags-title{font-family:var(--f1); font-size:24px; font-weight:300; margin-bottom:24px;}
.seo-tags{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:90px;}
.seo-tag{border:1px solid var(--tx); font-family:var(--f2); padding:10px 20px; font-size:13px; letter-spacing:.5px; background:var(--wh); transition:.2s var(--ease);}
.seo-tag:hover{background:var(--g); border-color:var(--g); color:var(--wh);}
.map-title{font-family:var(--f1); font-size:24px; font-weight:300; margin-bottom:6px;}
.map-addr{color:var(--tx2); margin-bottom:22px; font-size:15px;}
.seo-map-wrap{position:relative; overflow:hidden; height:420px; box-shadow:0 12px 40px rgba(22,56,38,.15);}
.seo-map-wrap iframe{width:100%; height:100%; border:0;}
.map-badge{position:absolute; top:18px; left:18px; z-index:10; background:var(--wh); padding:12px 18px; font-family:var(--f2); font-weight:600; font-size:14px;}
.map-badge span{display:block; font-weight:400; font-size:12px; color:var(--tx2); margin-top:2px;}

/* CHAPTERS */
.om-chapters{background:var(--wh); padding:110px 60px;}
.chapters-head{max-width:var(--max); margin:0 auto 54px; text-align:center;}
.chapters-head h2{font-size:clamp(28px,3.2vw,40px);}
.chapters-grid{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bd);}
.chapter-card{background:var(--cr); padding:40px 34px;}
.chapter-card .step-num{font-family:var(--f1); font-size:44px; font-weight:300; color:var(--au); margin-bottom:16px;}
.chapter-card h3{font-family:var(--f2); font-weight:600; font-size:16px; letter-spacing:.5px; text-transform:uppercase; margin-bottom:12px; color:var(--tx);}
.chapter-card p{font-size:14.5px; color:var(--tx2);}

/* SERVICES / PILLS */
.om-services{background:var(--cr); padding:110px 60px;}
.services-head{max-width:var(--max); margin:0 auto 54px; text-align:center;}
.services-head h2{font-size:clamp(28px,3.2vw,40px);}
.pills-grid{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--bd);}
.pill-card{background:var(--wh); padding:32px 26px; text-align:left;}
.pill-card .ic{width:20px; height:20px; margin-bottom:20px;}
.pill-card .ic svg{width:100%; height:100%; stroke:var(--g3);}
.pill-card h3{font-family:var(--f2); font-weight:600; font-size:15px; letter-spacing:.3px; margin-bottom:10px; color:var(--tx);}
.pill-card p{font-size:13.5px; color:var(--tx2); margin-bottom:16px;}
.pill-card a.more{font-size:12px; letter-spacing:1px; text-transform:uppercase; font-weight:600; color:var(--au);}

/* CASES */
.om-cases{background:var(--g2); padding:110px 60px;}
.cases-head{max-width:var(--max); margin:0 auto 54px; text-align:center;}
.cases-head h2{color:var(--wh); font-size:clamp(28px,3.2vw,40px);}
.cases-head p{color:rgba(255,255,255,.6); margin-top:12px; font-family:var(--f2);}
.cases-grid{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.08);}
.case-card{background:var(--g2); padding:34px 30px;}
.case-card .tagline{color:var(--au); font-family:var(--f2); font-size:12px; font-weight:500; letter-spacing:2px; text-transform:uppercase; margin-bottom:16px;}
.case-card h3{color:var(--wh); font-size:21px; margin-bottom:12px;}
.case-card p{color:rgba(255,255,255,.65); font-size:14px; font-family:var(--f2);}

/* CONTACT FINAL */
.om-contact-final{background:var(--g); padding:120px 60px; text-align:center;}
.contact-inner{max-width:720px; margin:0 auto;}
.om-contact-final h2{color:var(--wh); font-size:clamp(30px,4.2vw,48px); margin-bottom:22px;}
.om-contact-final p{color:rgba(255,255,255,.75); font-size:17px; margin-bottom:36px; font-family:var(--f2);}
.contact-ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.phone-link{color:rgba(255,255,255,.7); font-weight:500; margin-top:24px; display:inline-block; font-size:14px; font-family:var(--f2);}

/* FOOTER — struttura identica al sito reale: fgrid (fbrand col-6 / fc col-3 / fc col-3) + fbot */
footer{background:var(--footer); color:rgba(255,255,255,.55); padding:80px 60px 30px;}
.fgrid{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:44px; padding-bottom:36px;}
.fbrand img{height:34px; margin-bottom:18px; filter:brightness(0) invert(1);}
.fbrand p{font-size:14px; line-height:1.8; max-width:340px; font-family:var(--f2);}
.fc h5{color:var(--wh); font-size:13px; margin-bottom:18px; letter-spacing:1.5px; text-transform:uppercase; font-weight:500; font-family:var(--f2);}
.fc li{margin-bottom:11px; font-size:14px; font-family:var(--f2);}
.fbot{max-width:var(--max); margin:0 auto; padding-top:26px; border-top:1px solid rgba(255,255,255,.08); font-size:12.5px; color:rgba(255,255,255,.35); font-family:var(--f2); line-height:1.9;}
.fbot a{text-decoration:underline; text-underline-offset:2px;}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — dal più largo al più stretto (desktop-first).
   Fasce: >1100px desktop/laptop, 961–1100px tablet landscape,
   ≤960px tablet portrait/mobile (nav → hamburger da qui in giù),
   ≤560px mobile portrait piccolo. Il mobile landscape (telefono
   ruotato, poca altezza) è gestito a parte via (orientation+max-height),
   perché la sola larghezza non lo distingue da un tablet stretto. */

/* ---- Tablet landscape (≤1100px) ---- */
@media (max-width:1100px){
.hc{padding:140px 32px 55px;}
.pills-grid{grid-template-columns:repeat(3,1fr);}
}

/* ---- Tablet portrait / mobile (≤960px): qui il menu diventa hamburger ---- */
@media (max-width:960px){
#nav{padding:14px 24px;}
#nav.s{padding:6px 24px;}
#nav .nl img{height:56px;}
#nav.s .nl img{height:40px;}
#nav .nm{display:none;}
.hbg{display:flex;} /* senza questo il menu spariva sotto i 960px senza alcun modo di riaprirlo */
.hc{padding:130px 24px 50px;}
.cs-wr{grid-template-columns:1fr; gap:40px;}
.seo-cols{grid-template-columns:1fr; gap:40px;}
.chapters-grid{grid-template-columns:1fr;}
.pills-grid{grid-template-columns:repeat(2,1fr);}
.cases-grid{grid-template-columns:1fr;}
.fgrid{grid-template-columns:1fr 1fr;}
.fbrand{grid-column:1/-1;}
#chi-siamo,.om-chapters,.om-services,.om-cases,.om-seo-content,footer{padding-left:24px; padding-right:24px;}
.seo-map-wrap{height:300px;}
}

/* ---- Mobile portrait piccolo (≤560px) ---- */
@media (max-width:560px){
#nav{padding:12px 16px;}
#nav .cta{padding:8px 14px; font-size:12px;} /* logo+cta+hamburger sulla stessa riga: meno padding per non andare in overflow sui telefoni più stretti */
.h-ti{font-size:clamp(30px,9vw,44px);}
.hc{padding:110px 20px 40px;}
.pills-grid{grid-template-columns:1fr;}
.seo-tags{gap:8px;}
.seo-tag{font-size:12px; padding:7px 14px;}
.seo-map-wrap{height:260px;}
.stat-row{gap:20px;}
}

/* ---- Mobile landscape: telefono ruotato, larghezza normale ma altezza ridotta ----
   .om-hero usa già min-height (non height fissa) e non ha overflow:hidden, quindi il
   testo non viene mai tagliato; qui si stringe solo lo spazio verticale per estetica,
   così l'hero non deve quasi mai crescere oltre lo schermo per contenere tutto. */
@media (max-height:500px) and (orientation:landscape){
.hc{padding:110px 40px 30px;}
.h-ti{font-size:clamp(28px,5.5vw,44px); margin-bottom:14px;}
.hc .sub{font-size:15px; margin-bottom:20px;}
#nav{padding:8px 24px;}
#nav .nl img{height:44px;}
}