/* =========================================================
   VARIABILI GLOBALI
========================================================= */
:root{
  --container-max: 1280px;
  --c-primary:#0a66c2;
  --c-muted: #4a6076;
  --c-bg-soft:#f7f9fc;



  /* NAV */
  --nav-h: 96px;            
  --nav-pad-left: 8px;      
  --nav-pad-right: 24px;    
  --brand-gap: 12px;        
  --logo-h: 100px;          
  --brand-font: 20px;       

  /* Shifts personalizzati */
  --brand-left-shift: 310px;  
  --call-right-shift: 270px;  

  /* Box telefono */
  --phone-ic: 30px;
  --call-pad-y: 10px;
  --call-pad-x: 16px;

  /* HERO */
  --hero-h: 420px;
}

/* =========================================================
   RESET BASE
========================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: #0b2239;
  background: #fff;
  line-height: 1.45;
}

/* =========================================================
   CONTENITORE
========================================================= */
.container{
  width: min(var(--container-max), 94vw);
  margin-inline: auto;
}

/* =========================================================
   HEADER / NAVBAR
========================================================= */
.site-header{
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  position: sticky; /* rimane fissata */
  top: 0;
  z-index: 1000;
}

/* Griglia interna nav: logo | menu | telefono */
.nav{
  height: var(--nav-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding-left: var(--nav-pad-left);
  padding-right: var(--nav-pad-right);
}

/* Brand (logo + testo) */
.brand{
  display: inline-flex;
  align-items: center;
  gap: var(--brand-gap);
  margin-left: calc(-1 * var(--brand-left-shift)); /* shift a sinistra */
}
.brand__logo{
  height: var(--logo-h);
  width: auto;
  object-fit: contain;
}
.brand__name{
  font-weight: 800;
  font-size: var(--brand-font);
  letter-spacing: .4px;
  white-space: nowrap;
}

/* Menu centrale */
.menu{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.menu a{
  font-weight: 600;
  padding: 8px 4px;
}
.menu a:hover{ color: #0a66c2; }

/* Box telefono */
.call-us{
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: var(--call-pad-y) var(--call-pad-x);
  border-radius: 10px;
  border: 1px solid #e1e7f0;
  background: #f3f6fb;
  white-space: nowrap;
  margin-right: calc(-1 * var(--call-right-shift));
}
.phone-ic{
  width: var(--phone-ic);
  height: var(--phone-ic);
  fill: #0a66c2;
  flex-shrink: 0;
}
.call-us__label{ font-size: 12px; line-height: 1.1; color:#385273; }
.call-us__num{ font-size: 16px; font-weight: 800; letter-spacing: .35px; }


/* Hamburger */
.hamburger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid #e1e7f0;background:#f3f6fb;border-radius:10px;cursor:pointer}
.hamburger__bar{display:block;width:22px;height:2px;background:#0b2239;margin:3px 0;transition:transform .2s ease,opacity .2s ease}
body.menu-open .hamburger__bar:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu-open .hamburger__bar:nth-child(2){opacity:0}
body.menu-open .hamburger__bar:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
body.menu-open::before{content:"";position:fixed;inset:var(--nav-h) 0 0 0;background:rgba(0,0,0,.3);z-index:900}

@media(max-width:900px){
  .nav{grid-template-columns:auto 1fr auto auto}
  .call-us{grid-column:3}
  .hamburger{display:inline-flex;grid-column:4;justify-self:end}
  .menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:#fff;padding:14px 16px;box-shadow:0 10px 20px rgba(0,0,0,.12);z-index:1000;flex-direction:column;gap:12px}
  body.menu-open .menu{display:flex}
}
@media(max-width:720px){
  .brand__name{display:none}
  .brand__logo{height:72px}
  .menu{gap:12px}
  .call-us{padding:8px 12px}
  .phone-ic{width:24px;height:24px}
}

/* ==================== HERO (sottile, moderno) ==================== */
.hero{position:relative;min-height:var(--hero-h);background:#111;color:#fff}
.hero--about{
  background-image:url('../immagini/billa.jpeg'); /* cambia immagine */
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.65));z-index:0}
.hero__inner{
  position:relative;z-index:1;height:100%;max-width:950px;margin:0 auto;padding:24px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center
}
.hero__title{margin:8px 0 10px;font-size:clamp(36px,5.2vw,56px);line-height:1.05;font-weight:900}
.hero__subtitle{max-width:820px;font-size:clamp(16px,2.1vw,20px);line-height:1.55;opacity:.96}

/* ==================== INTRO (foto + testo) ==================== */
.about-intro{padding:60px 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about-text h2{margin:0 0 16px;font-size:clamp(22px,3vw,30px)}
.about-text p{margin:0 0 12px;color:var(--c-muted);line-height:1.6}
.bullets{margin:14px 0 0;padding-left:18px;color:var(--c-text)}
.bullets li{margin:6px 0}

/* ==================== VALORI ==================== */
.about-values{background:var(--c-bg-soft);padding:60px 0}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}
.value-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 10px 25px rgba(0,0,0,.06)}
.value-card img{width:48px;height:48px;margin:0 auto 12px}
.value-card h3{margin:0 0 8px;font-size:1.15rem}
.value-card p{margin:0;color:var(--c-muted)}

/* ==================== STATS ==================== */
.about-stats{padding:44px 0;background:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}
.stat{background:#fff;border:1px solid #e9eef5;border-radius:14px;padding:22px;box-shadow:0 8px 18px rgba(0,0,0,.05)}
.stat__num{font-size:clamp(28px,4.5vw,40px);font-weight:900;color:#0b2239}
.stat__label{color:var(--c-muted);margin-top:4px}

/* ==================== TIMELINE ==================== */
.about-timeline{padding:60px 0}
.about-timeline h2{margin:0 0 14px}
.timeline{list-style:none;margin:0;padding:0;border-left:3px solid #e9eef5;padding-left:18px}
.timeline li{position:relative;margin:16px 0 16px}
.timeline li::before{
  content:""; position:absolute; left:-10px; top:6px; width:10px; height:10px; border-radius:50%;
  background:var(--c-primary);
}
.t-year{display:inline-block;min-width:56px;font-weight:700;color:#0b2239}
.timeline p{display:inline;margin:0;color:var(--c-muted)}

/* ==================== MAPPA + CONTATTI ==================== */
.about-map{padding:60px 0}
.about-map h2{margin:0 0 10px}
.about-map p{margin:0 0 6px;color:var(--c-muted)}
.map-grid{display:grid;grid-template-columns:2fr 1fr;gap:30px;margin-top:20px}
.map-contacts{background:#fff;border:1px solid #e9eef5;border-radius:12px;padding:18px;box-shadow:0 6px 16px rgba(0,0,0,.05)}
.map-contacts h3{margin:0 0 10px}
.map-contacts p{margin:8px 0}
/* Wrapper mappa (ingrandito) */
.map-embed{
  position: relative;
  width: 100%;
  height: 520px;       /* ← aumenta qui: 420px, 480px o 500px */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.map-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.socials a{display:inline-block;margin-right:10px}
.socials img{width:22px;height:22px;display:inline-block}

/* ==================== CTA e BOTTONI ==================== */
.post-map-cta{padding:24px 0 56px;text-align:center}
.btn-primary{
  display:inline-block;margin-top:0;padding:12px 28px;background:var(--c-primary);color:#fff;font-weight:800;
  border:none;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.15);transition:all .25s ease
}
.btn-primary:hover{background:#084f97;box-shadow:0 6px 18px rgba(0,0,0,.25);transform:translateY(-2px)}

/* ==================== FOOTER (coerente col sito) ==================== */
.footer{background:#0b4a7a;color:#fff;padding:20px 0;font-size:14px;text-align:center}
.footer__inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.footer__left p{margin:2px 0}
.footer__links a{color:#fff;margin-left:15px}
.footer__links a:hover{text-decoration:underline}
.footer__social a{margin-left:10px;display:inline-block}
.footer__social img{width:30px;height:30px;filter:none}

/* ==================== RESPONSIVE ==================== */
@media(max-width:992px){
  .values-grid{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:1fr 1fr 1fr}
  .map-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .about-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr;gap:14px}
}