/* ===== Core Styles (no external fonts) ===== */
:root{
  --bg: #ffffff;
  --ink: #1f2937;
  --muted: #4b5563;
  --brand: #2f4c9a;
  --brand-2: #a98b5a;
  --g1: #f3efe6;
  --g2: #e7e1d6;
  --container: 1200px;
  --pad-sm: 12px;
  --pad-md: 18px;
  --pad-lg: 24px;
}

*{ box-sizing: border-box }
html,body{ margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif }
h1,h2,h3{ margin:0 0 .35em }
.h1{ font-size: clamp(28px, 4vw, 40px); line-height:1.15; font-weight:700 }
.h2{ font-size: clamp(22px, 3vw, 28px); line-height:1.25; font-weight:700 }
.lead{ color:var(--muted); font-size: clamp(16px, 2.2vw, 18px) }
.container{ max-width:var(--container); margin:0 auto; padding:0 var(--pad-sm) }
@media (min-width:680px){ .container{ padding:0 var(--pad-md) } }
@media (min-width:1100px){ .container{ padding:0 var(--pad-lg) } }

/* Header */
.sitebar{ border-bottom:1px solid #e5e7eb; background:#fff }
.sitebar .top{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0 }
.brand{ display:flex; align-items:center; gap:12px }
.brand .emblem{ display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; color:var(--brand) }
.brand-title{ font-size:20px; font-weight:700 }
.brand-sub{ color:var(--muted); font-size:14px }
.contactline{ display:flex; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:14px }

.nav{ border-top:1px solid #f1f5f9; }
.nav .container{ display:flex; flex-wrap:wrap; gap:8px; padding:10px 0 }
.nav a{ color:#1f2937; text-decoration:none; padding:8px 12px; border-radius:10px }
.nav a:hover{ background:#f1f5f9 }

/* Buttons */
.btn{ display:inline-block; padding:10px 16px; border-radius:12px; background:var(--brand); color:#fff; text-decoration:none; font-weight:600 }
.btn.secondary{ background:#fff; color:var(--brand); border:2px solid var(--brand) }
.btn + .btn{ margin-left:10px }

/* Hero – clean fallback + image mode */
.hero{ position:relative; isolation:isolate; color:#1e2734; background:linear-gradient(135deg,var(--g1),var(--g2)) }
.hero::before, .hero::after{ content:none !important; background:none !important; box-shadow:none !important; filter:none !important; }
.hero .bg{ position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center; opacity:0 }
.hero.has-hero{ color:#fff; background:#0e141f }
.hero.has-hero .bg{ opacity:.76 }
.hero.has-hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,15,25,.35), rgba(10,15,25,.55)) }
.hero-inner{ padding:48px 0 }
.kicker{ color:#d1d5db; text-transform:uppercase; letter-spacing:.12em; font-size:12px; margin-bottom:6px }

/* Sections */
.section{ padding:22px 0 }
img{ max-width:100%; height:auto; display:block; border-radius:8px }

/* Footer */
.footer{ border-top:1px solid #e5e7eb; margin-top:30px; padding:16px 0; color:var(--muted); font-size:14px }

/* HERO – immagine grande in alto */
.hero{
  max-width: var(--page-max, 1200px);
  margin: 16px auto 24px;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
.hero-img{
  display: block !important;
  width: 100%;
  height: auto;
}

/* FIX HERO: mostra immagine e overlay SOPRA, non sotto */
.hero.has-hero{ background: transparent !important; }   /* toglie il fondo pieno che copriva la foto */
.hero .bg{ z-index: 0 !important; opacity: .82 !important; }   /* l'immagine sta sopra lo sfondo della section */
.hero.has-hero::after{ z-index: 1 !important; }         /* lo scrim (overlay) sta sopra l'immagine */