:root{
  --bg:#F1F6E7; --bg-rgb:241,246,231;
  --surface:#FFFFFF; --soft:#E3ECD1;
  --ink:#20241C; --ink-2:#55594E; --line:#D3DFBE;
  --olive:#3C6722; --olive-ink:#2F5419; --sprout:#8EB824; --bark:#8E8A7F;
  --band:#2F5419; --band-ink:#F2F6EA; --focus:#8EB824;
  color-scheme:light;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --wrap:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:90px; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.12; margin:0; color:var(--olive-ink); letter-spacing:-0.01em}
p{margin:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
:focus-visible{outline:3px solid var(--olive); outline-offset:2px; border-radius:6px}
.band :focus-visible{outline-color:var(--band-ink)}
.skip{position:absolute; left:16px; top:-60px; z-index:100; background:var(--olive-ink); color:#fff; padding:12px 18px; border-radius:10px; font-weight:600; text-decoration:none}
.skip:focus{top:12px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
[hidden]{display:none !important}

/* header */
.site-header{position:sticky; top:0; z-index:40; background:rgba(var(--bg-rgb),.95); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:24px; height:76px}
.brand{display:flex; align-items:center; text-decoration:none; flex-shrink:0}
.brand img{height:50px; width:auto}
.nav{display:flex; gap:4px; margin-left:auto}
.nav a{text-decoration:none; font-size:15px; font-weight:500; color:var(--ink-2); padding:8px 12px; border-radius:8px}
.nav a:hover{color:var(--ink); background:var(--soft)}
.nav a[aria-current="page"]{color:var(--olive-ink); background:var(--soft)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:15px; text-decoration:none; border-radius:999px; padding:12px 22px; border:1.5px solid transparent; cursor:pointer; line-height:1.2}
.btn svg{width:18px; height:18px; flex-shrink:0}
.btn-primary{background:var(--sprout); color:#17260B}
.btn-primary:hover{background:#7FA61C}
.btn-outline{border-color:var(--olive); color:var(--olive-ink); background:transparent}
.btn-outline:hover{background:var(--soft)}
.btn-small{padding:11px 18px; font-size:14px; min-height:44px}
.btn{min-height:46px}
.btn.ext::after{content:""; width:14px; height:14px; flex-shrink:0; background:currentColor; opacity:.75; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center/contain no-repeat}
.menu-btn{display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:10px; width:44px; height:44px; align-items:center; justify-content:center; color:var(--ink); cursor:pointer}
.mobile-nav{display:none}
@media (max-width:999px){
  .nav,.bar>.btn{display:none}
  .menu-btn{display:inline-flex}
  .mobile-nav{display:block; border-top:1px solid var(--line); padding:8px 24px 20px}
  .mobile-nav a{display:block; text-decoration:none; padding:13px 4px; font-size:17px; font-weight:500; border-bottom:1px solid var(--line)}
  .mobile-nav a[aria-current="page"]{color:var(--olive-ink)}
  .mobile-nav .btn{display:flex; margin-top:16px; border-bottom:0}
  .brand img{height:44px}
}

/* sezioni */
.section{padding-top:72px; padding-bottom:72px}
.section + .section{padding-top:0}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:28px}
.section-head h2{font-size:clamp(26px,3.4vw,34px)}
.section-head p{color:var(--ink-2); margin-top:8px; max-width:60ch}
.page-head{padding-top:56px; padding-bottom:8px}
.page-head h1{font-size:clamp(34px,5vw,52px)}
.page-head p{color:var(--ink-2); font-size:18px; margin-top:14px; max-width:62ch}

/* hero */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-media{position:absolute; top:0; bottom:0; right:0; width:50%}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 30%}
.hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(var(--bg-rgb),1) 0%, rgba(var(--bg-rgb),.55) 30%, rgba(var(--bg-rgb),.08) 70%, rgba(var(--bg-rgb),0) 100%)}
.hero-inner{position:relative; min-height:clamp(480px,72vh,640px); display:flex; align-items:center; padding-top:48px; padding-bottom:56px}
.hero-copy{max-width:560px}
.hero h1{font-size:clamp(38px,5.4vw,62px); line-height:1.04}
.hero-copy p.sub{font-size:18.5px; color:var(--ink-2); margin-top:20px; max-width:46ch}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
@media (prefers-reduced-motion:no-preference){
  .hero-copy > *{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy > *:nth-child(2){animation-delay:.08s}
  .hero-copy > *:nth-child(3){animation-delay:.16s}
  .hero-media img{animation:fade 1.1s ease both .1s}
  @keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
  @keyframes fade{from{opacity:0} to{opacity:1}}
}
@media (max-width:1099px){
  .hero-media{position:relative; width:100%; height:240px}
  .hero-media::after{background:linear-gradient(180deg, rgba(var(--bg-rgb),0) 45%, rgba(var(--bg-rgb),1) 100%)}
  .hero-inner{min-height:0; padding-top:4px; padding-bottom:48px}
}

/* social */
.social-row{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:700px){ .social-row{grid-template-columns:repeat(3,1fr)} }
.social-card{display:flex; align-items:center; gap:16px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px 22px; text-decoration:none; transition:border-color .15s}
.social-card:hover{border-color:var(--bark)}
.social-card .ic{width:46px; height:46px; border-radius:12px; background:var(--soft); color:var(--olive); display:flex; align-items:center; justify-content:center; flex-shrink:0}
.social-card .ic svg{width:24px; height:24px}
.social-card b{display:block; font-family:var(--serif); font-size:19px; color:var(--olive-ink)}
.social-card span.t{font-size:14.5px; color:var(--ink-2)}
.social-btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}

/* chi siamo + pilastri */
.about{display:grid; gap:40px; grid-template-columns:1fr}
@media (min-width:900px){ .about{grid-template-columns:5fr 7fr; align-items:start} }
.about-text p{font-size:17.5px; color:var(--ink-2); max-width:58ch}
.about-text .btn{margin-top:22px}
.pillars{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:600px){ .pillars{grid-template-columns:1fr 1fr} }
.pillar{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px}
.pillar-icon{width:40px; height:40px; border-radius:12px; background:var(--soft); color:var(--olive); display:flex; align-items:center; justify-content:center; margin-bottom:14px}
.pillar-icon svg{width:22px; height:22px}
.pillar h3{font-size:19px; margin-bottom:6px}
.pillar p{color:var(--ink-2); font-size:15px}

/* organigramma */
.org-group{margin-top:40px}
.org-group h3{font-size:21px; margin-bottom:16px}
.org-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.person{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px}
.avatar{position:relative; overflow:hidden; width:46px; height:46px; border-radius:50%; background:var(--soft); color:var(--olive-ink); font-family:var(--serif); font-weight:600; font-size:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.person .n{font-weight:600; line-height:1.3}
.person .r{font-size:14px; color:var(--ink-2)}

/* riquadri con pulsante */
.cta-cards{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:800px){ .cta-cards{grid-template-columns:1fr 1fr} }
.cta-card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:28px; display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.cta-card h3{font-size:24px}
.cta-card p{color:var(--ink-2); max-width:46ch}
.cta-card .btn{margin-top:10px}
.band{background:var(--band); color:var(--band-ink)}
.band h2{color:var(--band-ink)}
.band p{opacity:.9}
.band-inner{display:grid; gap:40px; grid-template-columns:1fr}
@media (min-width:800px){ .band-inner{grid-template-columns:1fr 1fr; gap:64px} }
.band-item h2{font-size:clamp(26px,3.2vw,34px); margin-bottom:12px}
.band-item p{max-width:42ch; margin-bottom:22px}
.btn-light{border-color:var(--band-ink); color:var(--band-ink); background:transparent}
.btn-light:hover{background:rgba(255,255,255,.12)}
.band .btn-primary{color:#17260B}

/* il nostro ordine */
.ordine-hero{background:var(--band); border-radius:22px; padding:32px 36px; display:grid; gap:24px; grid-template-columns:1fr; align-items:center}
@media (min-width:860px){ .ordine-hero{grid-template-columns:5fr 6fr} }
.ordine-hero img{width:100%; max-width:520px; height:auto}
.ordine-hero p{color:var(--band-ink); font-size:17.5px; max-width:48ch}
.services{border-top:2px solid var(--olive)}
.svc{display:grid; gap:14px; padding:28px 0; border-bottom:1px solid var(--line); grid-template-columns:1fr}
@media (min-width:860px){ .svc{grid-template-columns:4fr 8fr; gap:40px} }
.svc h3{font-size:21px}
.svc ul{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.svc li{position:relative; padding-left:24px; color:var(--ink-2); font-size:15.5px}
.svc li::before{content:""; position:absolute; left:2px; top:.62em; width:9px; height:9px; border-radius:50%; background:var(--sprout)}
.sede{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:800px){ .sede{grid-template-columns:1fr 1fr} }
.info-card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px}
.info-card h3,.info-card h2{margin-bottom:6px}
.info-card h3{font-size:22px}
.info-row{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line)}
.info-row:last-of-type{border-bottom:0}
.info-row svg{width:20px; height:20px; color:var(--olive); flex-shrink:0; margin-top:3px}
.info-row .lbl{font-size:13.5px; color:var(--ink-2)}
.info-row .val{font-weight:500; word-break:break-word}
.info-row .val small{display:block; font-weight:400; color:var(--ink-2); font-size:14px}
.info-row a{color:var(--olive-ink)}
.info-card .btn{margin-top:14px}

/* contatti */
.contact{display:grid; gap:28px; grid-template-columns:1fr; padding-top:28px; padding-bottom:80px}
@media (min-width:900px){ .contact{grid-template-columns:7fr 5fr; align-items:stretch} }
.contact-photo{border-radius:18px; overflow:hidden; min-height:220px; background:var(--soft)}
.contact-photo img{width:100%; height:100%; object-fit:cover; object-position:center}
.contact .info-card h2{font-size:24px}
.contact-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.contact-actions .btn{margin-top:0}
.map-card{padding:0; overflow:hidden}
.map-card iframe{display:block; width:100%; height:100%; min-height:340px; border:0}

/* footer */
.site-footer{border-top:1px solid var(--line); padding:44px 0 36px}
.foot{display:grid; gap:28px; grid-template-columns:1fr}
@media (min-width:760px){ .foot{grid-template-columns:2fr 1fr 1fr} }
.foot .brand img{height:56px}
.foot p{color:var(--ink-2); font-size:14.5px; max-width:44ch; margin-top:12px}
.foot .foot-h{font:600 14.5px var(--sans); margin:0 0 6px}
.foot ul{list-style:none; padding:0; margin:0}
.foot li a{display:inline-block; padding:9px 0; color:var(--ink-2); text-decoration:none; font-size:14.5px}
.foot li a:hover{color:var(--olive-ink)}
.copy{margin-top:30px; padding-top:18px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-2)}

/* partner: scorrimento orizzontale (si ferma con mouse, tastiera, pulsante o se le animazioni sono disattivate) */
.marquee{overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex; gap:20px; width:max-content; margin:0; padding:4px 0; list-style:none; animation:mq var(--mq-time,30s) linear infinite}
.mq-track li{flex:0 0 auto}
@keyframes mq{to{transform:translateX(calc(-50% - 10px))}}
.marquee:hover .mq-track,.marquee:focus-within .mq-track,.marquee.paused .mq-track{animation-play-state:paused}
.mq-item{display:flex; align-items:center; justify-content:center; width:200px; height:125px; padding:10px; background:var(--surface); border:1px solid var(--line); border-radius:14px; text-decoration:none; text-align:center}
a.mq-item:hover{border-color:var(--bark)}
.mq-item img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.sp-name{font:600 17px/1.25 var(--serif); color:var(--olive-ink)}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask:none; mask:none}
  .mq-track{animation:none; width:auto; flex-wrap:wrap; justify-content:center}
  .mq-track li[aria-hidden="true"]{display:none}
  #mq-toggle{display:none}
}