/* VERSIONE 20261102 — se apri questo file sul sito e NON vedi questa riga,
   il server sta ancora servendo un foglio di stile vecchio. */
/* ============================================================
   Piscine Dalla Bona — style.css
   Palette: porcellana / laguna / travertino / acciaio
   ============================================================ */

:root{
  --porcelain:#F5F7F9;
  --mist:#E9EDF2;
  --shell:#FFFFFF;
  --lagoon:#0A4B94;
  --lagoon-d:#073A74;
  --lagoon-l:#86B3E2;
  --ink:#0A2E57;
  --ink-2:#44607F;
  --ink-3:#8398B0;
  --travertine:#E3E7EC;
  --travertine-d:#C2CAD4;
  --inox:#9AA7B6;
  --line:#D7DFE8;
  --water:#A8C8EA;
  --inox-line:#B4BFCD;
  --deep-line:#5A80AC;

  --ff-d:"Fraunces", Georgia, serif;
  --ff-b:"Manrope", system-ui, -apple-system, sans-serif;
  --ff-m:"IBM Plex Mono", ui-monospace, monospace;

  --pad:clamp(20px, 5vw, 64px);
  --sec:clamp(72px, 10vw, 148px);
  --r:16px;
  --shadow:0 1px 2px rgba(10,46,87,.05), 0 18px 44px -24px rgba(10,46,87,.28);
  --star-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.09 6.9 7.41.79-5.54 5.05 1.55 7.36L12 17.9l-6.51 3.8 1.55-7.36L1.5 9.29l7.41-.79z'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--porcelain); color:var(--ink);
  font-family:var(--ff-b); font-weight:400; font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,canvas,iframe{display:block; max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--lagoon); outline-offset:3px; border-radius:4px}

.wrap{width:min(1280px, 100% - var(--pad)*2); margin-inline:auto}
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:12px 18px; z-index:200}
.skip:focus{left:12px; top:12px}

/* ---------- tipografia ---------- */
.h2{
  font-family:var(--ff-d); font-weight:400; font-optical-sizing:auto;
  font-size:clamp(30px, 4.2vw, 60px); line-height:1.03; letter-spacing:-.018em; margin:.24em 0 .5em;
}
.tav{
  font-family:var(--ff-m); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--lagoon-d); margin:0; display:flex; align-items:center; gap:14px;
}
.tav::after{content:""; flex:1; height:1px; background:var(--line); max-width:120px}
.lead{font-size:1.14em; color:var(--ink); line-height:1.55}
.sec-head{max-width:56ch; margin-bottom:clamp(38px,5vw,64px)}
.sec-head__p{color:var(--ink-2); margin:0; max-width:60ch}
.eyebrow{
  font-family:var(--ff-m); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--lagoon-d);
}
.eyebrow .sep{opacity:.4; margin:0 .35em}

.btn{
  --bg:var(--ink); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  background:var(--bg); color:var(--fg); border:1px solid var(--bg); border-radius:100px;
  padding:.78em 1.5em; font-weight:600; font-size:.95em; letter-spacing:.005em;
  text-decoration:none; cursor:pointer; transition:transform .25s cubic-bezier(.2,.8,.3,1), background .25s, box-shadow .25s;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(10,46,87,.55)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:.95em 1.9em; font-size:1em}
.btn--sm{padding:.6em 1.15em; font-size:.85em; white-space:nowrap}
.btn--ghost{--bg:transparent; --fg:var(--ink); border-color:var(--ink-3)}
.btn--ghost:hover{background:rgba(255,255,255,.6)}
.btn--wa{--bg:#fff; --fg:var(--ink); border-color:var(--line)}

/* ============ HEADER ============ */
.hdr{position:fixed; inset:0 0 auto; z-index:100; transition:background .35s, box-shadow .35s, backdrop-filter .35s}
.hdr__in{
  width:min(1540px, 100% - 44px); margin-inline:auto;
  display:flex; align-items:center; gap:clamp(12px,1.6vw,24px); padding:13px 0;
}
.hdr.is-stuck{background:rgba(245,247,249,.92); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line)}
.hdr__level{height:2px; background:linear-gradient(90deg,var(--lagoon),var(--lagoon-l)); width:0%; transition:width .1s linear}
.brand{display:flex; align-items:center; text-decoration:none; color:var(--ink); flex:none}
.brand img{
  display:block; width:clamp(158px,17vw,205px); height:auto;
  transition:opacity .25s ease;
}
.brand:hover img{opacity:.78}
@media (max-width:560px){.brand img{width:168px}}
@media (max-width:380px){.brand img{width:146px}}
.nav{display:flex; gap:clamp(8px,1.15vw,19px); margin-left:auto; font-size:.86em; white-space:nowrap}
.nav a{text-decoration:none; padding:6px 0; position:relative; color:var(--ink-2); transition:color .2s; white-space:nowrap}
.nav a::after{content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--lagoon); transition:width .3s cubic-bezier(.2,.8,.3,1)}
.nav a:hover,.nav a.is-here{color:var(--ink)}
.nav a:hover::after,.nav a.is-here::after{width:100%}
.hdr__cta{display:flex; align-items:center; gap:9px; margin-left:clamp(8px,1.2vw,18px); flex:none}
.burger{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.7); cursor:pointer; padding:0; place-content:center; gap:5px}
.burger span{display:block; width:18px; height:1.6px; background:var(--ink); margin-inline:auto; transition:transform .3s, opacity .3s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}

@media (max-width:1400px){
  .nav{
    /* l'header ha backdrop-filter, quindi fa da riferimento ai figli fissi:
       l'altezza va limitata a mano, non con bottom:0 */
    position:fixed; inset:72px 0 auto; max-height:calc(100svh - 72px);
    margin:0; flex-direction:column; gap:0;
    background:var(--porcelain); padding:8px var(--pad) 40px;
    border-top:1px solid var(--line); font-size:1.08em;
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    align-items:stretch;
    clip-path:inset(0 0 100% 0); transition:clip-path .4s cubic-bezier(.2,.8,.3,1); pointer-events:none;
  }
  .nav.is-open{clip-path:inset(0 0 0 0); pointer-events:auto}
  .nav > *{flex:0 0 auto}
  .nav a{padding:14px 0; border-bottom:1px solid var(--line); white-space:normal}
  .nav{white-space:normal}
  .hdr__cta{margin-left:auto}      /* spinge telefono e hamburger a destra */
  .burger{display:grid}
  .hdr{background:rgba(245,247,249,.9); backdrop-filter:blur(14px)}
}

/* su telefono l'occhiello sopra il titolo toglie spazio senza aggiungere nulla */
@media (max-width:640px){ .hero .eyebrow{display:none} }

/* ============ HERO ============ */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding-top:120px; overflow:hidden}
.hero__canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0}
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 58%),
    linear-gradient(180deg,
      rgba(245,247,249,.40) 0%,
      rgba(245,247,249,.04) 34%,
      rgba(245,247,249,.06) 62%,
      rgba(245,247,249,.34) 88%,
      rgba(245,247,249,.58) 100%);
}

.hero__in{position:relative; z-index:2; width:min(1280px,100% - var(--pad)*2); margin:auto auto 0; padding-bottom:clamp(28px,5vw,52px)}
.hero__h1{
  font-family:var(--ff-d); font-weight:300; font-optical-sizing:auto;
  font-size:clamp(46px, 10.4vw, 152px); line-height:.88; letter-spacing:-.035em;
  margin:.22em 0 .34em; display:grid;
}
.hero__h1 .l2{padding-left:.09em}
.hero__h1 .l2 i{font-style:italic; font-weight:300; color:var(--lagoon-d)}
.hero__h1 .l3{font-size:.36em; letter-spacing:-.01em; line-height:1.2; margin-top:.5em; font-family:var(--ff-b); font-weight:300; color:var(--ink-2)}
.hero__p{max-width:54ch; font-size:1.06em; color:var(--ink-2); margin:0 0 1.6em}

/* i tre punti di forza sotto il testo di apertura */
.hero__pts{
  list-style:none; margin:0 0 2em; padding:0; display:grid; gap:.6em; max-width:60ch;
}
.hero__pts li{position:relative; padding-left:28px; color:var(--ink); font-size:.97em}
.hero__pts li::before{
  content:''; position:absolute; left:0; top:.55em; width:15px; height:6px;
  border-left:1.7px solid var(--lagoon); border-bottom:1.7px solid var(--lagoon);
  transform:rotate(-45deg); transform-origin:left;
}
.hero__claim{
  position:relative; z-index:2; margin:0 auto; padding:clamp(18px,2.4vw,30px) 0;
  width:min(1280px,100% - var(--pad)*2);
  border-top:1px solid var(--line);
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.3em;
  font-family:var(--ff-d); font-weight:300; font-optical-sizing:auto;
  font-size:clamp(20px,2.4vw,34px); letter-spacing:-.015em; line-height:1.2;
  color:var(--ink);
}
.hero__claim i{font-style:italic; font-weight:300; color:var(--lagoon-d)}
.hero__claim::after{
  content:''; flex:1; min-width:40px; height:1px; margin-left:.5em;
  background:linear-gradient(90deg, var(--lagoon-l), transparent);
  align-self:center;
}
.hero__btns{display:flex; flex-wrap:wrap; gap:12px}
.hero__facts{
  position:relative; z-index:2; list-style:none; margin:0; padding:0;
  width:min(1280px,100% - var(--pad)*2); margin-inline:auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.hero__facts li{background:var(--porcelain); padding:20px clamp(12px,1.6vw,24px) 24px; display:grid; gap:3px}
.hero__facts b{font-family:var(--ff-m); font-size:.78em; letter-spacing:.13em; text-transform:uppercase; font-weight:500; color:var(--lagoon-d)}
.hero__facts span{font-size:.88em; color:var(--ink-2); line-height:1.4}
@media (max-width:840px){
  .hero__facts{grid-template-columns:repeat(2,1fr)}
  .hero__h1 .l3{font-size:.42em}
}

/* ============ INTRO ============ */
.intro{padding:var(--sec) 0; background:var(--shell)}
.grid-2{display:grid; grid-template-columns:minmax(240px,.85fr) 1.15fr; gap:clamp(28px,6vw,90px); align-items:start}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}
.intro__lead .h2{margin-top:.35em}
.intro__body p{margin:0 0 1.1em}
.ticks{list-style:none; margin:1.8em 0 0; padding:0; display:grid; gap:.7em}
.ticks li{position:relative; padding-left:30px; color:var(--ink-2)}
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em; width:16px; height:6px;
  border-left:1.6px solid var(--lagoon); border-bottom:1.6px solid var(--lagoon);
  transform:rotate(-45deg); transform-origin:left;
}

/* ============ METODO ============ */
.method{padding:var(--sec) 0; background:linear-gradient(180deg, var(--mist), var(--porcelain))}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--line); border-block:1px solid var(--line)}
.steps li{background:var(--shell); padding:clamp(22px,2.4vw,34px) clamp(16px,1.8vw,26px); position:relative}
.steps__n{
  font-family:var(--ff-m); font-size:11px; letter-spacing:.1em; color:var(--lagoon-d);
  display:inline-grid; place-content:center; width:30px; height:30px; border:1px solid var(--lagoon-l); border-radius:50%; margin-bottom:16px;
}
.steps h3{font-family:var(--ff-d); font-weight:400; font-size:1.24em; margin:0 0 .4em; letter-spacing:-.01em}
.steps p{margin:0; font-size:.9em; color:var(--ink-2)}

/* ============ ASSISTENZA ============ */
.care{padding:var(--sec) 0; background:var(--shell)}
.care__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(16px,2vw,26px)}
.care__c{background:var(--porcelain); border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,2.2vw,30px)}
.care__c h3{font-family:var(--ff-d); font-weight:400; font-size:1.2em; margin:0 0 .5em; letter-spacing:-.01em; line-height:1.2}
.care__c p{margin:0; font-size:.92em; color:var(--ink-2)}

/* ============ FAQ ============ */
.faq{padding:var(--sec) 0; background:var(--shell)}
.acc details{border-top:1px solid var(--line)}
.acc details:last-of-type{border-bottom:1px solid var(--line)}
.acc summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:var(--ff-d); font-weight:400; font-size:clamp(18px,1.5vw,22px); letter-spacing:-.012em; line-height:1.25;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:""; position:absolute; right:8px; top:50%; width:13px; height:13px; margin-top:-7px;
  border-right:1.6px solid var(--lagoon); border-bottom:1.6px solid var(--lagoon);
  transform:translateY(-3px) rotate(45deg); transition:transform .3s;
}
.acc details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.acc summary:hover{color:var(--lagoon-d)}
.acc div{padding:0 8% 24px 0}
.acc div p{margin:0; color:var(--ink-2); font-size:.95em}

/* ============ CONTATTI ============ */
.contact{padding:var(--sec) 0; background:var(--mist)}
.contact__grid{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(22px,3vw,46px); align-items:start}
@media (max-width:900px){.contact__grid{grid-template-columns:1fr}}
.form{background:var(--shell); border-radius:var(--r); padding:clamp(20px,2.6vw,36px)}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
@media (max-width:560px){.f2{grid-template-columns:1fr}}
.fld{margin:0 0 16px; display:grid; gap:6px}
.fld label{font-family:var(--ff-m); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
.fld input,.fld select,.fld textarea{
  width:100%; padding:12px 14px; background:var(--porcelain); border:1px solid var(--line);
  border-radius:10px; transition:border-color .2s, background .2s; font-size:.95em;
}
.fld textarea{resize:vertical; min-height:110px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none; border-color:var(--lagoon); background:#fff}
.fld input[aria-invalid="true"]{border-color:#D4674E; background:#FDF4F2}
.fld--check label{display:flex; gap:10px; align-items:flex-start; font-family:var(--ff-b); font-size:.82em; letter-spacing:0; text-transform:none; color:var(--ink-2); line-height:1.45; cursor:pointer}
.fld--check input{width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--lagoon)}
.form__go{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:8px}
.form__note{font-size:.8em; color:var(--ink-3); max-width:34ch}
.form__note.is-warn{color:#C0563C}
.form__note.is-ok{color:var(--lagoon-d)}

.info{display:grid; gap:20px; align-content:start}
.info__b{display:grid; gap:2px}
.info__k{margin:0; font-family:var(--ff-m); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.info__v{margin:0; font-size:1.02em; line-height:1.5}
.info__v a{text-decoration:none; border-bottom:1px solid var(--lagoon-l); transition:border-color .2s}
.info__v a:hover{border-color:var(--lagoon)}
.info__map{border-radius:var(--r); overflow:hidden; border:1px solid var(--line); margin-top:4px}
.info__map iframe{width:100%; height:260px; border:0; filter:grayscale(.35) contrast(1.02)}

/* ============ FOOTER ============ */
.ftr{background:var(--ink); color:#D3DFEC; padding:clamp(40px,5vw,70px) 0 34px}
.ftr__claim{margin:0; font-size:.9em; opacity:.7; max-width:40ch}
.ftr__legal{grid-column:1/-1; margin:22px 0 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); font-size:.78em; opacity:.6; line-height:1.7}
.ftr__legal a{text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3)}
.todo{border-bottom:1px dotted rgba(255,255,255,.5)}

/* ============ MOTION ============ */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.8,.3,1), transform .8s cubic-bezier(.2,.8,.3,1)}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .btn:hover,.card:hover{transform:none}
}


/* ============================================================
   RITRATTO DEL TITOLARE (sezione Chi siamo)
   ============================================================ */
.ritratto{
  margin:clamp(26px,4vw,40px) 0 0; display:flex; align-items:center; gap:18px;
  padding:14px 18px 14px 14px; border-radius:calc(var(--r) * .9);
  background:linear-gradient(140deg, #fff 0%, var(--mist) 100%);
  border:1px solid var(--line); box-shadow:var(--shadow);
  max-width:340px;
}
.ritratto__ph{
  width:96px; height:96px; flex:none; border-radius:50%; overflow:hidden;
  border:2px solid #fff; box-shadow:0 6px 18px rgba(10,46,87,.16);
  position:relative;
}
.ritratto__ph::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  box-shadow:inset 0 -14px 22px -14px rgba(10,75,148,.55);
}
.ritratto__ph img{width:100%; height:100%; object-fit:cover; display:block}
.ritratto figcaption{display:grid; gap:3px; line-height:1.25}
.ritratto figcaption b{font-family:var(--ff-d); font-weight:500; font-size:19px; letter-spacing:-.01em}
.ritratto figcaption span{
  font-family:var(--ff-m); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lagoon-d);
}
@media (max-width:900px){.ritratto{max-width:none}}
@media (max-width:420px){
  .ritratto{gap:14px; padding:12px}
  .ritratto__ph{width:76px; height:76px}
}

/* ============================================================
   RECENSIONI
   ============================================================ */
.revs{
  padding:var(--sec) 0;
  background:
    radial-gradient(120% 70% at 50% 0%, var(--mist) 0%, transparent 62%),
    var(--porcelain);
}

.revs__grid{
  margin-top:clamp(34px,5vw,54px);
  display:grid; gap:clamp(14px,1.8vw,22px);
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:980px){.revs__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.revs__grid{grid-template-columns:1fr}}

.rev{
  margin:0; padding:clamp(22px,2.6vw,30px);
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:14px;
  position:relative; overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
}
.rev::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--lagoon) 0%, rgba(10,75,148,0) 92%);
  opacity:.6;
}
.rev:hover{transform:translateY(-5px); box-shadow:0 2px 4px rgba(10,46,87,.06), 0 30px 60px -28px rgba(10,46,87,.38)}

.rev__stars{display:flex; gap:4px}
.rev__stars span{
  width:15px; height:15px; flex:none; background:var(--lagoon);
  -webkit-mask:var(--star-svg) center/contain no-repeat;
          mask:var(--star-svg) center/contain no-repeat;
}
.rev blockquote{margin:0}
.rev blockquote p{
  margin:0; font-size:clamp(15px,1.05vw,16.5px); line-height:1.62; color:var(--ink);
}
.rev blockquote p::before{content:'\201C'}
.rev blockquote p::after{content:'\201D'}
.rev figcaption{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  display:grid; gap:3px;
}
.rev figcaption b{font-family:var(--ff-d); font-weight:500; font-size:17px; letter-spacing:-.01em}
.rev figcaption span{
  font-family:var(--ff-m); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.revs__cta{
  margin:clamp(30px,4vw,44px) 0 0; display:flex; flex-wrap:wrap;
  gap:12px; justify-content:center;
}

/* ============================================================
   LOGO NEL FOOTER
   ============================================================ */
img.ftr__logo{
  display:block; width:190px; height:auto; margin:0 0 16px;
  /* il logo e' blu scuro: sul fondo scuro del footer va schiarito */
  filter:brightness(0) invert(1) opacity(.92);
}

/* ============================================================
   VISORE A TUTTO SCHERMO
   ============================================================ */
.lbx{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  grid-template-columns:auto 1fr auto; gap:clamp(8px,2vw,22px);
  padding:clamp(14px,3vw,40px);
  background:rgba(10,46,87,.88); backdrop-filter:blur(16px);
  opacity:0; transition:opacity .3s ease;
}
.lbx[hidden]{display:none}
.lbx.is-open{opacity:1}
.lbx__fig{margin:0; display:grid; gap:14px; justify-items:center; max-height:100%; min-width:0}
.lbx__fig img{
  max-width:100%; max-height:78svh; width:auto; height:auto;
  border-radius:calc(var(--r) * .75); box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
  background:var(--mist);
}
.lbx__fig figcaption{
  color:rgba(255,255,255,.92); text-align:center; font-size:15px; line-height:1.5;
  max-width:62ch;
}
.lbx__fig figcaption b{display:block; font-family:var(--ff-d); font-weight:500; font-size:21px; margin-bottom:3px}
.lbx__arw,.lbx__x{
  width:52px; height:52px; border-radius:50%; cursor:pointer; flex:none;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.09);
  color:#fff; display:grid; place-content:center; transition:background .25s ease;
}
.lbx__arw svg,.lbx__x svg{width:22px; height:22px}
.lbx__arw:hover,.lbx__x:hover{background:rgba(255,255,255,.2)}
.lbx__arw--n svg{transform:rotate(180deg)}
.lbx__x{position:absolute; top:clamp(12px,2.4vw,26px); right:clamp(12px,2.4vw,26px); z-index:2}
@media (max-width:640px){
  .lbx{grid-template-columns:1fr; grid-template-rows:1fr auto}
  .lbx__arw{position:static}
  .lbx__arw--p{grid-area:2/1; justify-self:start}
  .lbx__arw--n{grid-area:2/1; justify-self:end}
  .lbx__fig{grid-area:1/1}
  .lbx__fig img{max-height:66svh}
}
body.is-locked{overflow:hidden}


/* ============================================================
   SEPARAZIONE FRA LE SEZIONI
   Una linea d'acqua sfumata segna dove finisce una e inizia l'altra.
   ============================================================ */
.intro,.types,.spa,.vid,.gal,.method,.care,.revs,.faq,.contact{position:relative}
.types::before,.spa::before,.vid::before,.gal::before,.method::before,.care::before,
.revs::before,.faq::before,.contact::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,
    transparent 0%, var(--line) 14%, var(--deep-line) 50%, var(--line) 86%, transparent 100%);
  opacity:.55;
}


/* ============================================================
   LE NOSTRE PROPOSTE — schede con foto (home)
   ============================================================ */
.props{padding:var(--sec) 0; background:linear-gradient(180deg, var(--porcelain), var(--shell) 55%, var(--porcelain))}
.props__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,24px);
}
@media (max-width:940px){.props__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.props__grid{grid-template-columns:1fr}}

.prop{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--shell); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow);
  transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease, border-color .45s ease;
}
.prop:hover{
  transform:translateY(-6px); border-color:#BBD0E6;
  box-shadow:0 2px 4px rgba(10,46,87,.06), 0 30px 60px -28px rgba(10,46,87,.4);
}
.prop__ph{display:block; overflow:hidden; background:var(--mist); aspect-ratio:3/2}
.prop__ph img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.prop:hover .prop__ph img{transform:scale(1.05)}
.prop__b{display:flex; flex-direction:column; gap:.45em; padding:clamp(18px,2vw,26px)}
.prop__b b{
  font-family:var(--ff-d); font-weight:400; font-size:clamp(20px,1.7vw,25px);
  letter-spacing:-.015em; line-height:1.15;
}
.prop__b i{font-style:normal; font-size:.92em; color:var(--ink-2); line-height:1.5}
.prop__b em{
  font-style:normal; margin-top:auto; padding-top:.7em;
  font-family:var(--ff-m); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lagoon-d); display:inline-flex; align-items:center; gap:8px;
}
.prop__b em::after{
  content:''; width:16px; height:6px; flex:none;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(-45deg); transition:transform .3s ease, margin-left .3s ease;
}
.prop:hover .prop__b em::after{margin-left:6px}

/* ============================================================
   LA NOSTRA STORIA (home)
   ============================================================ */
.storia{padding:var(--sec) 0; background:var(--shell)}
.storia__lead .h2{margin-top:.35em}
.storia__body p{margin:0 0 1.1em}

/* ============================================================
   INTESTAZIONE DELLE PAGINE INTERNE
   ============================================================ */
.phero{
  padding:calc(86px + clamp(14px,2.6vw,34px)) 0 0;
  background:
    radial-gradient(110% 80% at 80% 0%, var(--mist) 0%, transparent 62%),
    var(--porcelain);
  position:relative;
}
.phero__in{padding-bottom:clamp(30px,4.4vw,54px)}
.phero__h1{
  font-family:var(--ff-d); font-weight:300; font-optical-sizing:auto;
  font-size:clamp(38px,6.6vw,86px); line-height:.98; letter-spacing:-.03em;
  margin:.2em 0 .38em; max-width:18ch;
}
.phero__h1 i{font-style:italic; color:var(--lagoon-d)}
.phero__p{margin:0; max-width:62ch; font-size:1.08em; color:var(--ink-2)}


/* ============================================================
   VIDEO
   ============================================================ */
.vid{padding:var(--sec) 0; background:var(--porcelain); position:relative}
.vid__frame{
  margin:0; border-radius:var(--r); overflow:hidden;
  background:var(--ink); box-shadow:var(--shadow); border:1px solid var(--line);
}
.vid__frame video{width:100%; height:auto; display:block; background:var(--ink)}

/* ============================================================
   FASCIA DI CHIAMATA ALL'AZIONE
   ============================================================ */
.cta{padding:var(--sec) 0; background:var(--mist); position:relative}
.cta__in{
  display:grid; grid-template-columns:1.15fr auto; align-items:center;
  gap:clamp(24px,4vw,60px);
  padding:clamp(28px,3.4vw,52px);
  border-radius:var(--r); border:1px solid #BBD0E6;
  background:
    radial-gradient(90% 160% at 100% 0%, rgba(10,75,148,.15) 0%, rgba(10,75,148,0) 62%),
    linear-gradient(135deg, var(--shell) 0%, var(--mist) 100%);
  box-shadow:var(--shadow);
}
@media (max-width:860px){.cta__in{grid-template-columns:1fr; align-items:start}}
.cta__in .h2{margin-top:.2em}
.cta__p{margin:0; color:var(--ink-2); max-width:56ch}
.cta__btns{display:flex; flex-direction:column; gap:12px}
@media (max-width:860px){.cta__btns{flex-direction:row; flex-wrap:wrap}}

/* ============================================================
   FOOTER a colonne
   ============================================================ */
.ftr__in{
  display:grid; grid-template-columns:1.4fr repeat(3,1fr);
  gap:clamp(26px,3vw,48px); align-items:start;
}
@media (max-width:900px){.ftr__in{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__in{grid-template-columns:1fr}}
.ftr__nav{display:flex; flex-direction:column; gap:9px; align-items:flex-start}
.ftr__t{
  margin:0 0 6px; font-family:var(--ff-m); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--lagoon-l);
}
.ftr__nav a{font-size:.92em; text-decoration:none; opacity:.82; transition:opacity .2s}
.ftr__nav a:hover{opacity:1; text-decoration:underline}
.ftr__adr{margin:6px 0 0; font-size:.88em; opacity:.62; line-height:1.5}
.ftr__legal{grid-column:1/-1}

/* ============================================================
   SEZIONI GENERICHE DELLE PAGINE INTERNE
   ============================================================ */
.sec{padding:var(--sec) 0; position:relative; background:var(--shell)}
.sec--alt{background:linear-gradient(180deg, var(--porcelain), var(--mist) 50%, var(--porcelain))}
.sec::before,.sec--alt::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,
    transparent 0%, var(--line) 14%, var(--deep-line) 50%, var(--line) 86%, transparent 100%);
  opacity:.55;
}

/* schede testuali */
.feats{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.8vw,22px)}
@media (max-width:760px){.feats{grid-template-columns:1fr}}
.feat{
  background:var(--shell); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.4vw,32px); position:relative; overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s ease;
}
.sec--alt .feat{background:var(--shell)}
.feat::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--lagoon), rgba(10,75,148,0) 88%); opacity:.55;
}
.feat:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.feat h3{
  font-family:var(--ff-d); font-weight:400; font-size:clamp(20px,1.7vw,25px);
  letter-spacing:-.015em; line-height:1.18; margin:0 0 .55em;
}
.feat p{margin:0; color:var(--ink-2); font-size:.95em}

/* testo + immagine affiancati */
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(26px,4vw,64px); align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.split p{color:var(--ink-2); margin:0 0 1.1em}
.split .h2{margin-top:.25em}
.split__ph{margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:var(--mist)}
.split__ph img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block}

/* blocco di testo lungo */
.rich{max-width:78ch; margin-inline:auto}
.rich p{margin:0 0 1.15em; color:var(--ink-2)}
.rich .lead{color:var(--ink)}
.rich b{color:var(--ink)}

/* tre foto affiancate */
.trio{
  margin-top:clamp(16px,2vw,24px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,20px);
}
@media (max-width:760px){.trio{grid-template-columns:1fr}}
.trio figure{margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--mist); box-shadow:var(--shadow)}
.trio img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block}
.trio figcaption{
  padding:12px 16px 14px; font-family:var(--ff-m); font-size:10.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); background:var(--shell);
}

/* intestazione di un progetto */
.prj__head{display:grid; gap:clamp(18px,2.4vw,30px); margin-bottom:clamp(30px,4vw,48px)}
.prj__logo{
  width:clamp(170px,20vw,240px); height:auto; border-radius:8px;
  background:#fff; box-shadow:var(--shadow);
}
.prj__head .h2{margin-top:.2em}

/* avviso "contenuti in arrivo" */
.wip{
  width:min(1280px,100% - var(--pad)*2); margin:0 auto;
  padding:18px 22px; border-radius:var(--r);
  background:#FFF8F0; border:1px dashed #E0B87A; color:#7A5320; font-size:.92em;
}
.wip p{margin:0}
.wip code{font-family:var(--ff-m); font-size:.9em; background:rgba(0,0,0,.05); padding:1px 5px; border-radius:4px}

/* dati aziendali nella colonna contatti */
.info__v--sm{font-size:.86em; line-height:1.6; color:var(--ink-2)}

/* titoli dentro al modulo contatti */
.form__t{
  font-family:var(--ff-d); font-weight:400; font-size:clamp(23px,2.2vw,31px);
  letter-spacing:-.018em; line-height:1.15; margin:0 0 .35em;
}
.form__s{margin:0 0 clamp(20px,2.2vw,28px); color:var(--ink-2); font-size:.94em}
.info__s{font-size:.82em; color:var(--ink-3); display:inline-block; margin-top:3px}
.ftr__brand{display:grid; gap:0; align-content:start}

/* ============================================================
   REALIZZAZIONI — schede progetto
   ============================================================ */
.prjs{background:var(--shell)}

/* indice dei progetti in cima alla pagina */
.prj__indice{
  margin-top:clamp(32px,4vw,52px);
  /* a flex invece che a griglia: le voci dell'ultima riga si allargano
     da sole per riempirla, quindi non resta mai uno spazio vuoto.
     Con sette progetti escono 4 sulla prima riga e 3 sulla seconda. */
  display:flex; flex-wrap:wrap;
  gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.prj__indice a{flex:1 1 calc(25% - 1px); min-width:190px}
.prj__indice a{
  background:var(--shell); padding:16px 20px 18px; text-decoration:none;
  display:grid; gap:2px; transition:background .3s ease;
}
.prj__indice a:hover{background:var(--mist)}
.prj__indice b{font-family:var(--ff-d); font-weight:500; font-size:1.05em; letter-spacing:-.01em}
.prj__indice span{
  font-family:var(--ff-m); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3);
}

/* una scheda per progetto */
.prj{padding:var(--sec) 0; position:relative; scroll-margin-top:92px}
.prj::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,
    transparent 0%, var(--line) 14%, var(--deep-line) 50%, var(--line) 86%, transparent 100%);
  opacity:.55;
}
.prj:nth-child(even){background:linear-gradient(180deg, var(--porcelain), var(--mist) 50%, var(--porcelain))}

.prj__head{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,46px);
  align-items:start; margin-bottom:clamp(26px,3.4vw,42px);
}
@media (max-width:820px){.prj__head{grid-template-columns:1fr; gap:20px}}
.prj__logo{
  width:clamp(160px,17vw,215px); height:auto; border-radius:8px;
  background:#fff; box-shadow:var(--shadow);
}
.prj__intro{max-width:78ch}
.prj__intro .h2{margin:.18em 0 .5em; display:grid; gap:.14em}
.prj__luogo{
  font-family:var(--ff-m); font-size:.24em; letter-spacing:.2em; text-transform:uppercase;
  color:var(--lagoon-d); line-height:1.3;
}
.prj__intro p{margin:0 0 1em; color:var(--ink-2)}
.prj__specs{
  list-style:none; margin:1.4em 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px;
}
.prj__specs li{
  font-family:var(--ff-m); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 13px; border:1px solid var(--line); border-radius:100px;
  color:var(--ink-2); background:var(--shell);
}
.prj__video{margin:0 0 clamp(14px,1.8vw,22px)}

/* la griglia delle fotografie */
.prj__grid{display:grid; gap:clamp(10px,1.2vw,16px)}
.prj__grid--2{grid-template-columns:repeat(2,1fr)}
.prj__grid--3{grid-template-columns:repeat(3,1fr)}
.prj__grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){
  .prj__grid--3,.prj__grid--4{grid-template-columns:repeat(2,1fr)}
}
.shot{
  display:block; padding:0; border:0; cursor:zoom-in; position:relative;
  border-radius:calc(var(--r) * .8); overflow:hidden; background:var(--mist);
  box-shadow:var(--shadow); aspect-ratio:4/3;
  transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease;
}
@media (max-width:520px){
  .prj__grid--2,.prj__grid--3,.prj__grid--4{grid-template-columns:1fr}
  .shot{aspect-ratio:16/10}
}
.shot img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.shot::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,46,87,0) 58%, rgba(10,46,87,.34) 100%);
  opacity:0; transition:opacity .4s ease;
}
.shot:hover{transform:translateY(-4px); box-shadow:0 2px 4px rgba(10,46,87,.06), 0 26px 52px -26px rgba(10,46,87,.44)}
.shot:hover img{transform:scale(1.05)}
.shot:hover::after{opacity:1}

/* il prossimo progetto, ancora senza foto */
.prj__next{
  margin-top:clamp(30px,4vw,52px);
  padding:clamp(26px,3.2vw,44px); border-radius:var(--r);
  border:1px dashed #BBD0E6; background:var(--porcelain);
}
.prj__next .h2{margin:.18em 0 .45em; font-size:clamp(25px,2.8vw,38px)}
.prj__next p{margin:0 0 1em; color:var(--ink-2); max-width:70ch}
.prj__next p:last-child{margin:0}

/* didascalia del visore a tutto schermo */
.lbx__fig figcaption{display:grid; gap:6px; justify-items:center}
.lbx__fig figcaption em{
  font-style:normal; font-family:var(--ff-m); font-size:11px;
  letter-spacing:.18em; color:rgba(255,255,255,.55);
}
.lbx__arw[hidden]{display:none}
.phero__txt{min-width:0}
.vid__more{margin:clamp(14px,1.8vw,22px) 0 0}

/* ============================================================
   MENU A TENDINA
   ============================================================ */
.nav__has{position:relative; display:flex; align-items:center}
.nav__ar{
  display:inline-block; width:7px; height:7px; margin-left:7px; vertical-align:1px;
  border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-2px); opacity:.5; transition:transform .3s ease;
}
.nav__has:hover .nav__ar{transform:rotate(225deg) translateY(-2px); opacity:.9}
.nav__sub{
  position:absolute; top:100%; left:-16px; z-index:20; min-width:250px;
  padding:10px 0; margin-top:8px;
  background:var(--shell); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 2px 6px rgba(10,46,87,.06), 0 24px 48px -22px rgba(10,46,87,.4);
  display:grid; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.nav__has:hover .nav__sub,
.nav__has:focus-within .nav__sub{opacity:1; visibility:visible; transform:none}
.nav__sub::before{content:''; position:absolute; left:0; right:0; top:-10px; height:10px}
.nav__sub a{
  padding:9px 20px; white-space:nowrap; font-size:.95em; color:var(--ink-2);
  transition:background .2s ease, color .2s ease;
}
.nav__sub a::after{display:none}
.nav__sub a:hover,.nav__sub a.is-here{background:var(--mist); color:var(--ink)}

@media (max-width:1240px){
  .nav__has{display:block}
  .nav__ar{display:none}
  .nav__sub{
    position:static; opacity:1; visibility:visible; transform:none; margin:0;
    background:none; border:0; box-shadow:none; padding:0 0 10px 18px; min-width:0;
  }
  .nav__sub a{
    padding:10px 0; font-size:.88em; border-bottom:1px solid var(--line);
    border-left:2px solid var(--lagoon-l); padding-left:14px;
  }
  .nav__sub a:hover,.nav__sub a.is-here{background:none; color:var(--lagoon-d)}
}

/* ============================================================
   ELENCHI PUNTATI DELLE PAGINE INTERNE
   ============================================================ */
.plus{list-style:none; margin:1.6em 0; padding:0; display:grid; gap:.85em}
.plus li{position:relative; padding-left:30px; color:var(--ink-2)}
.plus li b{color:var(--ink)}
.plus li::before{
  content:''; position:absolute; left:0; top:.62em; width:16px; height:6px;
  border-left:1.7px solid var(--lagoon); border-bottom:1.7px solid var(--lagoon);
  transform:rotate(-45deg); transform-origin:left;
}
.rich__end{font-size:1.04em; color:var(--ink)}
.rich__go{margin:1.8em 0 0}

.feats--2{grid-template-columns:repeat(2,1fr)}
.feats--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.feats--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.feats--2,.feats--3{grid-template-columns:1fr}}

.props__grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:940px){.props__grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.props__grid--3{grid-template-columns:1fr}}

/* scheda senza fotografia */
.prop__ph--vuota{
  display:block; aspect-ratio:3/2;
  background:
    radial-gradient(90% 120% at 30% 10%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, var(--mist), var(--water));
  position:relative;
}
.prop__ph--vuota::after{
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.35) 0 2px, rgba(255,255,255,0) 2px 16px);
  opacity:.6;
}

/* ============================================================
   PUNTEGGI DELLE RECENSIONI
   ============================================================ */
.voti{
  display:flex; flex-wrap:wrap; gap:clamp(12px,1.6vw,20px);
  margin-bottom:clamp(28px,3.6vw,46px);
}
.voto{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding:18px 26px; border-radius:var(--r); text-decoration:none;
  background:var(--shell); border:1px solid var(--line); box-shadow:var(--shadow);
  transition:transform .3s ease, box-shadow .3s ease;
}
.voto:hover{transform:translateY(-3px); box-shadow:0 2px 4px rgba(10,46,87,.06), 0 24px 44px -24px rgba(10,46,87,.4)}
.voto b{font-family:var(--ff-d); font-weight:500; font-size:2.2em; line-height:1; color:var(--lagoon-d)}
.voto span{font-size:.9em; color:var(--ink-3)}
.voto i{
  font-style:normal; width:100%; font-family:var(--ff-m); font-size:10.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); margin-top:4px;
}
.revs__nota{
  margin:clamp(20px,2.4vw,30px) 0 0; font-size:.83em; color:var(--ink-3);
  text-align:center; max-width:70ch; margin-inline:auto;
}

/* ============================================================
   SOCIAL NEL FOOTER
   ============================================================ */
.ftr__social{display:flex; gap:10px; margin-top:16px}
.ftr__social a{
  width:36px; height:36px; border-radius:50%; display:grid; place-content:center;
  background:rgba(255,255,255,.1); transition:background .25s ease, transform .25s ease;
}
.ftr__social a:hover{background:rgba(255,255,255,.22); transform:translateY(-2px)}
.ftr__social svg{width:17px; height:17px; fill:#fff; opacity:.9}

/* ============================================================
   ICONE TELEFONO E WHATSAPP NELL'INTESTAZIONE
   ============================================================ */
.hdr__ico{
  width:38px; height:38px; flex:none; border-radius:50%;
  display:grid; place-content:center; text-decoration:none;
  border:1px solid var(--line); background:var(--shell);
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.hdr__ico svg{width:18px; height:18px}
.hdr__ico:hover{transform:translateY(-2px)}
.hdr__ico--tel svg{fill:var(--lagoon-d)}
.hdr__ico--tel:hover{background:var(--mist); border-color:var(--lagoon-l)}
@media (max-width:1240px){
  .hdr__cta{gap:10px}
  .hdr__ico{width:40px; height:40px}
}
@media (max-width:420px){
  .hdr__ico{width:36px; height:36px}
  .hdr__ico svg{width:17px; height:17px}
}

/* ============================================================
   BOLLA WHATSAPP
   ============================================================ */
.wabub{
  position:fixed; right:clamp(14px,2.4vw,26px); bottom:clamp(14px,2.4vw,26px);
  z-index:95; display:flex; align-items:center; gap:12px;
  opacity:0; transform:translateY(14px) scale(.9);
  transition:opacity .45s cubic-bezier(.2,.8,.3,1), transform .45s cubic-bezier(.2,.8,.3,1);
}
.wabub.is-in{opacity:1; transform:none}
.wabub__btn{
  width:58px; height:58px; flex:none; border-radius:50%;
  display:grid; place-content:center; background:#25D366;
  box-shadow:0 6px 18px -4px rgba(37,211,102,.55), 0 2px 6px rgba(10,46,87,.2);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
  position:relative;
}
.wabub__btn svg{width:30px; height:30px; fill:#fff}
.wabub__btn:hover{transform:scale(1.08); box-shadow:0 10px 26px -6px rgba(37,211,102,.7)}
.wabub__btn::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; animation:wapulse 2.6s cubic-bezier(.2,.8,.3,1) infinite;
}
@keyframes wapulse{
  0%{transform:scale(1); opacity:.7}
  70%{transform:scale(1.55); opacity:0}
  100%{transform:scale(1.55); opacity:0}
}
.wabub__msg{
  position:relative; max-width:min(74vw, 264px);
  background:var(--shell); color:var(--ink); border:1px solid var(--line);
  border-radius:14px; padding:13px 34px 13px 16px;
  font-size:.88em; line-height:1.4; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateX(10px);
  transition:opacity .4s ease, transform .4s cubic-bezier(.2,.8,.3,1), visibility .4s;
}
.wabub__msg.is-in{opacity:1; visibility:visible; transform:none}
.wabub__msg::after{
  content:''; position:absolute; right:-7px; top:50%; margin-top:-7px;
  width:12px; height:12px; background:var(--shell);
  border-right:1px solid var(--line); border-top:1px solid var(--line);
  transform:rotate(45deg);
}
.wabub__x{
  position:absolute; top:5px; right:7px; width:22px; height:22px;
  border:0; background:none; cursor:pointer; color:var(--ink-3);
  font-size:19px; line-height:1; border-radius:50%;
}
.wabub__x:hover{color:var(--ink); background:var(--mist)}
@media (prefers-reduced-motion:reduce){
  .wabub,.wabub__msg{transition:none}
  .wabub__btn::before{animation:none; opacity:0}
}
@media (max-width:560px){
  .wabub__btn{width:52px; height:52px}
  .wabub__btn svg{width:27px; height:27px}
}

/* ============================================================
   BANNER COOKIE
   ============================================================ */
.ckb{
  position:fixed; left:clamp(12px,2.4vw,26px); bottom:clamp(12px,2.4vw,26px);
  z-index:110; width:min(calc(100vw - 24px), 580px);
  background:var(--shell); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 4px 10px rgba(10,46,87,.08), 0 30px 70px -26px rgba(10,46,87,.5);
  opacity:0; transform:translateY(18px);
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.3,1);
}
.ckb[hidden]{display:none}
.ckb.is-in{opacity:1; transform:none}
.ckb__in{padding:clamp(20px,2.4vw,28px); max-height:min(80svh, 660px); overflow-y:auto}
.ckb__t{
  margin:0 0 10px; font-family:var(--ff-d); font-weight:400;
  font-size:clamp(19px,1.7vw,23px); letter-spacing:-.015em;
}
.ckb__txt p{margin:0 0 16px; font-size:.9em; line-height:1.55; color:var(--ink-2)}
.ckb__txt b{color:var(--ink)}
.ckb__txt a{color:var(--lagoon-d)}
.ckb__btns{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.ckb__pref{
  border:0; background:none; cursor:pointer; padding:6px 2px;
  font-family:var(--ff-m); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2); border-bottom:1px solid var(--line); transition:color .2s, border-color .2s;
}
.ckb__pref:hover{color:var(--lagoon-d); border-color:var(--lagoon)}
.ckb__opts{margin:0 0 18px; padding:16px 0 18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; gap:15px}
.ckb__opts[hidden]{display:none}
.ckb__opt{display:flex; gap:12px; align-items:flex-start; cursor:pointer}
.ckb__opt input{width:18px; height:18px; flex:none; margin-top:3px; accent-color:var(--lagoon)}
.ckb__opt input:disabled{opacity:.55}
.ckb__opt span{display:grid; gap:2px}
.ckb__opt b{font-size:.92em}
.ckb__opt i{font-style:normal; font-size:.82em; color:var(--ink-2); line-height:1.45}
.ckb__salva[hidden],.ckb__pref[hidden]{display:none}
.ckb__salva{flex:1 1 auto; min-width:180px}
.ckb__in{scrollbar-width:thin}
/* i pulsanti restano sempre raggiungibili anche a pannello aperto */
.ckb__btns{
  position:sticky; bottom:0; margin:0 -2px; padding:14px 2px 2px;
  background:linear-gradient(180deg, rgba(255,255,255,0), var(--shell) 22%);
}
/* mentre si sceglie, la bolla WhatsApp non deve coprire il banner */
body.is-cookie .wabub{opacity:0; visibility:hidden; pointer-events:none}
@media (min-width:861px){
  body.is-cookie .wabub{opacity:1; visibility:visible; pointer-events:auto}
}
@media (max-width:860px){
  .ckb{left:12px; right:12px; width:auto; bottom:12px}
  .ckb__in{max-height:min(84svh, 620px)}
  .ckb__btns .btn{flex:1 1 auto; justify-content:center}
}

/* riquadro al posto di un contenuto di terze parti non ancora accettato */
.embed{position:relative; background:var(--mist)}
.embed__off{
  position:absolute; inset:0; display:grid; align-content:center; justify-items:center;
  gap:10px; padding:22px; text-align:center;
  background:linear-gradient(140deg, var(--mist), var(--porcelain));
}
.embed__off p{margin:0; font-size:.85em; color:var(--ink-2); max-width:34ch; line-height:1.5}
.embed__alt a{font-size:.95em; color:var(--lagoon-d)}
.embed iframe[data-src]{visibility:hidden}

/* ============================================================
   PAGINE LEGALI
   ============================================================ */
.legale{max-width:76ch; margin-inline:auto}
.legale h2{
  font-family:var(--ff-d); font-weight:400; font-size:clamp(21px,2vw,27px);
  letter-spacing:-.015em; line-height:1.2; margin:2em 0 .6em;
  padding-top:1.1em; border-top:1px solid var(--line);
}
.legale h2:first-of-type{margin-top:1.4em}
.legale h3{
  font-family:var(--ff-b); font-weight:700; font-size:1em; margin:1.6em 0 .4em;
  color:var(--ink);
}
.legale p{margin:0 0 1.05em; color:var(--ink-2); font-size:.97em}
.legale b{color:var(--ink)}
.legale a{color:var(--lagoon-d)}
.legale__intro{font-size:1.08em; color:var(--ink)}
.legale__nota{font-size:.86em; color:var(--ink-3)}
.legale__agg{
  margin-top:2.6em; padding-top:1.2em; border-top:1px solid var(--line);
  font-family:var(--ff-m); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
.legale__link{
  border:0; background:none; padding:0; cursor:pointer; font:inherit;
  color:var(--lagoon-d); border-bottom:1px solid var(--lagoon-l);
}
.legale__link:hover{border-color:var(--lagoon)}

.tabella{overflow-x:auto; margin:1.4em 0 1.8em; border:1px solid var(--line); border-radius:12px}
.tabella table{border-collapse:collapse; width:100%; min-width:520px; font-size:.88em}
.tabella th,.tabella td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.tabella th{
  background:var(--mist); font-family:var(--ff-m); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; font-weight:500; color:var(--ink-2);
}
.tabella tr:last-child td{border-bottom:0}
.tabella td{color:var(--ink-2)}

/* ============================================================
   BRICIOLE DI PANE
   ============================================================ */
.bred{
  /* l'intestazione e' fissa: le briciole devono stargli sotto */
  padding:calc(78px + clamp(10px,1.4vw,18px)) 0 0;
  font-family:var(--ff-m); font-size:10.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
  background:var(--porcelain);
}
.bred .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:7px}
.bred a{text-decoration:none; color:var(--ink-2); transition:color .2s}
.bred a:hover{color:var(--lagoon-d)}
.bred__s{opacity:.45}
.bred span[aria-current]{color:var(--lagoon-d)}
.phero--bred{padding-top:clamp(12px,1.8vw,26px)}

/* <picture> non deve rompere i layout costruiti attorno a <img> */
picture{display:contents}
.ritratto__ph picture,.prop__ph picture,.shot picture,.phero__ph picture,
.split__ph picture,.trio picture{display:contents}

/* ============================================================
   RITRATTO GRANDE (home)
   ============================================================ */
.ritratto--grande{
  max-width:none; display:grid; gap:18px; justify-items:start;
  padding:0; background:none; border:0; box-shadow:none;
  margin-top:clamp(28px,4vw,44px);
}
.ritratto--grande .ritratto__ph{
  width:100%; max-width:340px; aspect-ratio:1; height:auto; border-radius:var(--r);
  border:1px solid var(--line); box-shadow:var(--shadow);
  background:linear-gradient(160deg, var(--mist), var(--porcelain));
}
.ritratto--grande .ritratto__ph::after{border-radius:var(--r); box-shadow:none}
.ritratto--grande figcaption{gap:4px}
.ritratto--grande figcaption b{font-size:clamp(21px,1.8vw,25px)}
@media (max-width:900px){
  .ritratto--grande{justify-items:center; text-align:center}
  .ritratto--grande .ritratto__ph{max-width:280px}
}

/* ============================================================
   DOVE ANDARE ADESSO (sotto il video, in home)
   ============================================================ */
.dove{
  margin-top:clamp(18px,2.4vw,30px);
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.6vw,20px);
}
@media (max-width:760px){.dove{grid-template-columns:1fr}}
.dove__c{
  display:grid; gap:.5em; align-content:start; text-decoration:none; color:inherit;
  padding:clamp(22px,2.6vw,32px);
  background:var(--shell); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease, border-color .45s ease;
}
.dove__c::after{
  content:''; position:absolute; right:-40px; top:-40px; width:150px; height:150px;
  border-radius:50%; background:radial-gradient(circle, rgba(10,75,148,.12), transparent 70%);
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.dove__c:hover{
  transform:translateY(-5px); border-color:#BBD0E6;
  box-shadow:0 2px 4px rgba(10,46,87,.06), 0 30px 60px -28px rgba(10,46,87,.42);
}
.dove__c:hover::after{transform:scale(1.5)}
.dove__n{
  font-family:var(--ff-m); font-size:11px; letter-spacing:.18em; color:var(--lagoon-d);
  display:inline-grid; place-content:center; width:34px; height:34px;
  border:1px solid var(--lagoon-l); border-radius:50%; margin-bottom:6px;
}
.dove__c b{
  font-family:var(--ff-d); font-weight:400; font-size:clamp(21px,1.9vw,27px);
  letter-spacing:-.015em; line-height:1.18;
}
.dove__c i{font-style:normal; font-size:.93em; color:var(--ink-2); line-height:1.55}
.dove__c em{
  font-style:normal; margin-top:.6em;
  font-family:var(--ff-m); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lagoon-d); display:inline-flex; align-items:center; gap:8px;
}
.dove__c em::after{
  content:''; width:16px; height:6px; flex:none;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(-45deg); transition:margin-left .3s ease;
}
.dove__c:hover em::after{margin-left:6px}

/* ============================================================
   PULSANTE FISSO DELLE PREFERENZE COOKIE
   Resta sempre in basso a sinistra: e' il modo per cambiare
   idea in ogni momento, come richiede la normativa.
   ============================================================ */
.ckbtn{
  position:fixed; left:clamp(14px,2.4vw,26px); bottom:clamp(14px,2.4vw,26px);
  z-index:94; width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:grid; place-content:center; padding:0;
  background:var(--shell); border:1px solid var(--line); color:var(--ink-2);
  box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), background .25s ease,
             color .25s ease, opacity .3s ease, visibility .3s;
}
.ckbtn svg{width:21px; height:21px; fill:currentColor}
.ckbtn:hover{transform:translateY(-3px) rotate(-12deg); background:var(--mist); color:var(--lagoon-d)}
/* mentre il banner e' aperto il pulsante sparisce: starebbe sopra */
body.is-cookie .ckbtn{opacity:0; visibility:hidden; pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .ckbtn{transition:opacity .2s ease, visibility .2s}
  .ckbtn:hover{transform:none}
}
@media (max-width:560px){
  .ckbtn{width:40px; height:40px}
  .ckbtn svg{width:19px; height:19px}
}

/* ============================================================
   INTESTAZIONE SU TELEFONO
   Logo leggibile, pulsante Contatti sempre presente, menu che
   parte esattamente sotto la barra.
   ============================================================ */
@media (max-width:1400px){
  .hdr__in{gap:10px}
  .hdr__cta{margin-left:auto; gap:7px}
  .hdr__btn{padding:.62em 1.05em; font-size:.82em}
}
@media (max-width:620px){
  .hdr__btn{padding:.6em .95em; font-size:.8em}
  .hdr__ico{width:38px; height:38px}
}
@media (max-width:380px){
  .hdr__btn{padding:.55em .8em; font-size:.76em}
  .hdr__ico{width:35px; height:35px}
  .hdr__ico svg{width:16px; height:16px}
  .burger{width:40px; height:40px}
}

/* il menu parte dall'altezza reale della barra, misurata dal JS */
@media (max-width:1400px){
  .nav{
    inset:var(--hdr-h, 72px) 0 auto;
    max-height:calc(100svh - var(--hdr-h, 72px));
  }
}

/* ============================================================
   PROTEZIONI: dimensioni di riserva, nel caso una regola
   piu' specifica non venisse applicata
   ============================================================ */
.ftr__social svg{width:17px !important; height:17px !important}
.wabub__btn svg{width:30px; height:30px}
.hdr__ico svg{max-width:20px; max-height:20px}
.ckbtn svg{max-width:22px; max-height:22px}

/* su telefono il messaggio della bolla non deve arrivare sul biscotto */
@media (max-width:560px){
  .wabub__msg{max-width:min(60vw, 210px); font-size:.82em; padding:11px 30px 11px 13px}
}

/* ============================================================
   VOCE "CONTATTI" NEL MENU
   Su desktop il pulsante e' gia' nella barra: la voce sarebbe
   un doppione. Nel menu a tendina del telefono invece serve.
   ============================================================ */
.nav__ct{display:none}
@media (max-width:1400px){
  .nav__ct{
    display:block;
    margin-top:10px; padding:14px 16px !important;
    border:0 !important; border-radius:12px;
    background:var(--ink); color:#fff; text-align:center; font-weight:600;
  }
  .nav__ct::after{display:none}
  .nav__ct:hover,.nav__ct.is-here{color:#fff}
}

/* i pulsanti flottanti non devono coprire i link legali in fondo */
.ftr{padding-bottom:clamp(74px,12vw,90px)}
@media (min-width:861px){ .ftr{padding-bottom:clamp(40px,5vw,70px)} }

/* ============================================================
   INTESTAZIONE A TUTTO SCHERMO (pagine interne)
   La fotografia riempie la larghezza, il testo sta a sinistra
   su una sfumatura scura che ne garantisce la leggibilita'.
   ============================================================ */
.phero--big{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding:calc(86px + clamp(30px,6vw,80px)) 0 clamp(48px,7vw,86px);
  background:var(--ink);
}
.phero--big.phero--bred{padding-top:calc(118px + clamp(20px,4vw,56px))}

.phero__bg{position:absolute; inset:0; z-index:-2}
.phero__bg img{width:100%; height:100%; object-fit:cover; display:block}

/* la sfumatura: densa a sinistra e in basso, trasparente in alto a destra */
.phero--big::before{
  content:''; position:absolute; inset:0; z-index:-1;
  /* la velatura copre solo la meta' sinistra, dove sta la scritta:
     il resto della fotografia resta pulito */
  background:linear-gradient(90deg,
    rgba(6,28,54,.86) 0%,
    rgba(6,28,54,.72) 20%,
    rgba(6,28,54,.44) 36%,
    rgba(6,28,54,.16) 50%,
    rgba(6,28,54,0) 62%);
}
/* un velo sottile solo dietro la barra: il menu resta leggibile
   anche quando la fotografia e' chiara in alto a destra */
.phero--big::after{
  content:''; position:absolute; left:0; right:0; top:0; height:150px; z-index:-1;
  background:linear-gradient(180deg, rgba(6,28,54,.46) 0%, rgba(6,28,54,0) 100%);
  pointer-events:none;
}

@media (max-width:860px){
  /* su schermi stretti la scritta occupa tutta la larghezza:
     li' la velatura sale dal basso */
  .phero--big::after{height:110px}
  .phero--big::before{
    background:linear-gradient(0deg,
      rgba(6,28,54,.88) 4%,
      rgba(6,28,54,.58) 46%,
      rgba(6,28,54,.20) 76%,
      rgba(6,28,54,.06) 100%);
  }
}

.phero--big .phero__in{position:relative; z-index:1; padding-bottom:0}
.phero--big .tav{color:var(--lagoon-l)}
.phero--big .tav::after{background:rgba(255,255,255,.3)}
.phero--big .phero__in{max-width:min(1280px, 100% - var(--pad)*2)}
.phero--big .phero__h1{
  color:#fff; max-width:14ch;
  font-size:clamp(40px, 6.4vw, 92px); line-height:.98; letter-spacing:-.03em;
  text-shadow:0 2px 24px rgba(0,0,0,.34);
}
.phero--big .phero__h1 i{color:var(--lagoon-l)}
.phero--big .phero__p{
  color:rgba(255,255,255,.92); max-width:46ch; font-size:clamp(16px,1.25vw,19px);
  text-shadow:0 1px 14px rgba(0,0,0,.42);
}

/* le briciole di pane stanno sopra la fotografia */
.phero--big + .sec{border-top:0}
.bred--dentro{
  position:absolute; left:0; right:0; z-index:2; background:none;
  top:calc(78px + clamp(8px,1.2vw,16px)); padding:0;
}
.bred--dentro a{color:rgba(255,255,255,.76)}
.bred--dentro a:hover{color:#fff}
.bred--dentro span[aria-current]{color:var(--lagoon-l)}
.bred--dentro .bred__s{color:rgba(255,255,255,.42)}

/* ============================================================
   I TRE PILASTRI (sotto "La nostra storia", in home)
   ============================================================ */
.pilastri{
  margin-top:clamp(42px,5.5vw,76px); padding-top:clamp(34px,4.4vw,56px);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,30px);
}
@media (max-width:860px){.pilastri{grid-template-columns:1fr; gap:clamp(22px,4vw,34px)}}
.pil{display:grid; gap:14px; align-content:start}
.pil__ph{
  margin:0; border-radius:var(--r); overflow:hidden; background:var(--mist);
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.pil__ph img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block}
.pil h3{
  font-family:var(--ff-d); font-weight:400; font-size:clamp(20px,1.7vw,25px);
  letter-spacing:-.015em; line-height:1.2; margin:.2em 0 0;
}
.pil p{margin:0; font-size:.94em; color:var(--ink-2); line-height:1.6}

/* collegamento al sito del committente, nelle schede progetto */
.prj__sito{margin:1.2em 0 0}
.prj__sito a{
  font-family:var(--ff-m); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lagoon-d); text-decoration:none; border-bottom:1px solid var(--lagoon-l);
  padding-bottom:2px; transition:border-color .2s;
}
.prj__sito a:hover{border-color:var(--lagoon)}

/* ============================================================
   BARRA SOPRA UNA FOTOGRAFIA SCURA
   Sulle pagine con l'intestazione a tutto schermo la barra resta
   trasparente finche' non si scorre: testo e icone diventano
   bianchi per restare leggibili sulla foto.
   Sotto i 1400px la barra ha gia' un fondo chiaro: li' non si applica.
   ============================================================ */
@media (min-width:1401px){
.testa-scura .hdr:not(.is-stuck) .brand img{filter:brightness(0) invert(1)}
.testa-scura .hdr:not(.is-stuck) .nav > a,
.testa-scura .hdr:not(.is-stuck) .nav__has > a{color:rgba(255,255,255,.88)}
.testa-scura .hdr:not(.is-stuck) .nav > a:hover,
.testa-scura .hdr:not(.is-stuck) .nav__has > a:hover,
.testa-scura .hdr:not(.is-stuck) .nav > a.is-here,
.testa-scura .hdr:not(.is-stuck) .nav__has > a.is-here{color:#fff}
.testa-scura .hdr:not(.is-stuck) .nav a::after{background:#fff}
.testa-scura .hdr:not(.is-stuck) .hdr__ico{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.34);
}
.testa-scura .hdr:not(.is-stuck) .hdr__ico svg{fill:#fff}
.testa-scura .hdr:not(.is-stuck) .hdr__ico:hover{background:rgba(255,255,255,.26)}
.testa-scura .hdr:not(.is-stuck) .hdr__btn{
  --bg:#fff; --fg:var(--ink); border-color:#fff;
}
.testa-scura .hdr:not(.is-stuck) .burger{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.34);
}
.testa-scura .hdr:not(.is-stuck) .burger span{background:#fff}
/* i sottomenu restano chiari: si aprono su fondo bianco */
.testa-scura .hdr:not(.is-stuck) .nav__sub a{color:var(--ink-2)}
.testa-scura .hdr:not(.is-stuck) .nav__sub a:hover,
.testa-scura .hdr:not(.is-stuck) .nav__sub a.is-here{color:var(--ink)}
}

/* ============================================================
   APERTURA CON IL VIDEO
   Il filmato del Caribe Lagoon fa da sfondo alla prima schermata.
   Sotto c'e' sempre una fotografia: su telefono resta solo quella,
   cosi' non si scarica un video su rete mobile.
   ============================================================ */
.hero--video{background:var(--ink)}
.hero--video .hero__bg{position:absolute; inset:0; z-index:0; overflow:hidden}
.hero--video .hero__bg img,
.hero--video .hero__bg video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.hero--video .hero__bg video{opacity:0; transition:opacity .9s ease}
.hero--video .hero__bg video.is-on{opacity:1}

/* sopra una fotografia scura il testo diventa bianco */
.hero--video .hero__veil{
  background:linear-gradient(180deg,
    rgba(6,28,54,.64) 0%, rgba(6,28,54,.30) 22%, rgba(6,28,54,.36) 50%,
    rgba(6,28,54,.74) 80%, rgba(6,28,54,.92) 100%);
}
.hero--video .hero__h1,
.hero--video .hero__pts li,
.hero--video .hero__claim{color:#fff}
.hero--video .hero__p{color:rgba(255,255,255,.88)}
.hero--video .eyebrow{color:rgba(255,255,255,.76)}
.hero--video .hero__h1 .l2 i,
.hero--video .hero__claim i{color:var(--lagoon-l)}
.hero--video .hero__pts li::before{border-left-color:var(--lagoon-l); border-bottom-color:var(--lagoon-l)}
.hero--video .hero__claim{border-top-color:rgba(255,255,255,.22)}
.hero--video .btn:not(.btn--ghost){--bg:#fff; --fg:var(--ink); border-color:#fff}
.hero--video .btn--ghost{--fg:#fff; border-color:rgba(255,255,255,.55)}
.hero--video .btn--ghost:hover{background:rgba(255,255,255,.14)}

/* ============================================================
   L'ACQUA ANIMATA SOTTO "LE NOSTRE PROPOSTE"
   La tela sta dietro ai riquadri; il velo chiaro tiene leggibili
   i testi. Il movimento segue il puntatore su tutta la fascia.
   ============================================================ */
.props{position:relative; isolation:isolate; overflow:hidden}
.props__acqua{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:-2; pointer-events:none;
}
.props::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(245,247,249,.74) 0%, rgba(245,247,249,.40) 38%,
    rgba(245,247,249,.48) 72%, rgba(245,247,249,.80) 100%);
}

/* ============================================================
   LA CORNETTA SOLO SU TELEFONO
   Da computer non si telefona: il pulsante di chiamata sparisce
   e resta il tasto Contatti.
   ============================================================ */
@media (min-width:861px){
  .hdr__ico--tel{display:none}
}


/* ============================================================
   SCELTA OBBLIGATORIA NEL MODULO: privato o progettista
   ============================================================ */
.fld--scelta{border:0; margin:0 0 16px; padding:0}
.fld--scelta legend{
  padding:0; margin:0 0 8px;
  font-family:var(--ff-m); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2);
}
.fld--scelta .scelte{display:flex; flex-wrap:wrap; gap:10px}
.fld--scelta label{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:11px 18px; border:1px solid var(--line); border-radius:100px;
  background:var(--porcelain);
  /* le altre etichette del modulo sono maiuscoletto: queste no, sono
     scelte da leggere, non titoli di campo */
  font-family:var(--ff-b); font-size:.95em; letter-spacing:0;
  text-transform:none; color:var(--ink);
  transition:border-color .2s ease, background .2s ease;
}
.fld--scelta label:hover{border-color:var(--lagoon-l)}
.fld--scelta input{width:17px; height:17px; flex:none; accent-color:var(--lagoon)}
.fld--scelta label:has(input:checked){border-color:var(--lagoon); background:#fff}
.fld--scelta[aria-invalid="true"] legend{color:#C0563C}
.fld--scelta[aria-invalid="true"] label{border-color:#D4674E}

/* ============================================================
   IL MOTTO SOTTO IL TITOLO DELLA HOME
   ============================================================ */
.hero__motto{
  margin:-.2em 0 1.1em;
  font-family:var(--ff-d); font-weight:300; font-optical-sizing:auto;
  font-size:clamp(20px,2.6vw,36px); line-height:1.18; letter-spacing:-.015em;
  color:var(--ink);
}
.hero--video .hero__motto{color:#fff}

/* le quattro province restano visibili anche su telefono:
   sono una riga sola e dicono dove lavoriamo */
@media (max-width:640px){
  .hero .eyebrow{display:block; font-size:10px; letter-spacing:.18em; line-height:1.6}
}

/* ============================================================
   IL PULSANTE DELLA BARRA
   "Richiedi informazioni" per esteso dove c'e' spazio, solo
   "Informazioni" su schermo stretto: altrimenti spinge fuori
   l'hamburger.
   ============================================================ */
.hdr__btn-corto{display:none}
@media (max-width:760px){
  .hdr__btn-lungo{display:none}
  .hdr__btn-corto{display:inline}
}

/* ============================================================
   DEALER GRUNDFOS: testo e mappa affiancati
   ============================================================ */
.grund{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(26px,4vw,64px); align-items:center;
}
@media (max-width:860px){.grund{grid-template-columns:1fr; gap:clamp(24px,5vw,40px)}}
.grund p{color:var(--ink-2); margin:0 0 1.1em}
.grund .lead{color:var(--ink)}
.grund .h2{margin-top:.25em}
.grund__mappa{margin:0; justify-self:center}
.grund__mappa img{width:min(330px,74vw); height:auto; display:block}

/* ============================================================
   IL TASTO "RICHIEDI INFORMAZIONI" NEL MENU DEL TELEFONO
   La regola generica ".nav a" vinceva su ".nav__ct" e il testo
   restava blu scuro su fondo blu scuro: invisibile.
   ============================================================ */
@media (max-width:1400px){
  .nav a.nav__ct{color:#fff}
  .nav a.nav__ct:hover,
  .nav a.nav__ct.is-here{color:#fff}
}

/* ============================================================
   APERTURA DELLA HOME: tutto piu' leggibile
   Le scritte sopra e sotto il titolo erano troppo piccole
   rispetto alla dimensione del titolo stesso.
   ============================================================ */
.hero .eyebrow{font-size:clamp(12.5px,1.05vw,15px); letter-spacing:.2em}
.hero__motto{font-size:clamp(24px,3vw,44px)}
.hero__p{font-size:clamp(17px,1.35vw,21px); max-width:52ch}
.hero__pts li{font-size:clamp(16px,1.2vw,19px); padding-left:31px}
.hero__pts li::before{top:.62em; width:17px; height:7px}
.hero__btns .btn{font-size:clamp(15.5px,1.1vw,17.5px)}
@media (max-width:640px){
  .hero .eyebrow{font-size:11.5px; letter-spacing:.14em; line-height:1.7}
}

/* se l'ultima riga di una griglia a tre resta con un solo riquadro,
   quello si allarga: niente buco in fondo */
@media (min-width:761px){
  .feats--3 > .feat:last-child:nth-child(3n + 1){grid-column:span 2}
}