/* Ticino Subacquea — bozza Digitam. Rosso sopra, blu sotto: la bandiera ticinese come linea d'acqua. */
:root{
  --rosso:#d4202b; --rosso-2:#b3141f; --blu:#1a59a6; --blu-2:#123f7c; --abisso:#071c3a;
  --giallo:#f6c300; --bianco:#fff; --nebbia:#eaf1f8; --ink:#0b1a2e;
  --h:76px; --pad:clamp(20px,4.2vw,64px); --max:1320px;
  --disp:"Clash Grotesk",ui-sans-serif,system-ui,sans-serif;
  --text:"General Sans",ui-sans-serif,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.6 var(--text);color:var(--ink);background:var(--abisso);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--giallo);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--giallo);color:var(--ink);padding:10px 14px;z-index:100}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
h1,h2,h3{font-family:var(--disp);font-weight:500;letter-spacing:-.015em;line-height:.98;margin:0}

/* ---------- header (sempre fisso, fondo pieno) ---------- */
.site-h{position:sticky;top:0;z-index:50;background:var(--bianco);height:var(--h);box-shadow:0 1px 0 rgba(11,26,46,.08),0 8px 24px -18px rgba(11,26,46,.5)}
.site-h .wrap{height:100%;display:flex;align-items:center;gap:28px}
.brand{display:block;flex:none}
.brand img{height:50px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{font-weight:500;font-size:15.5px;text-decoration:none;padding:10px 13px;border-radius:999px;color:var(--ink)}
.nav a:hover{background:var(--nebbia)}
.nav a[aria-current="page"]{color:var(--blu);box-shadow:inset 0 -2px 0 var(--rosso);border-radius:0}
.nav .tel{background:var(--rosso);color:#fff;margin-left:10px;padding:11px 18px;white-space:nowrap}
.nav .tel:hover{background:var(--rosso-2)}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;border-radius:999px;background:var(--blu);color:#fff;font-weight:600}
.menu summary::-webkit-details-marker{display:none}
.menu summary i{width:18px;height:2px;background:#fff;position:relative;display:block}
.menu summary i::before,.menu summary i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff;transition:transform .25s}
.menu summary i::before{top:-6px}.menu summary i::after{top:6px}
.menu[open] summary i{background:transparent}
.menu[open] summary i::before{transform:translateY(6px) rotate(45deg)}
.menu[open] summary i::after{transform:translateY(-6px) rotate(-45deg)}
.menu nav{position:absolute;left:0;right:0;top:var(--h);background:var(--bianco);padding:8px var(--pad) 22px;max-height:calc(100svh - var(--h));overflow:auto;box-shadow:0 18px 30px -20px rgba(0,0,0,.5)}
.menu nav a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid #dfe6ef;font:500 22px/1.1 var(--disp);text-decoration:none}
.menu nav a[aria-current="page"]{color:var(--blu)}
.menu nav a.tel{border:0;margin-top:14px;justify-content:center;background:var(--rosso);color:#fff;border-radius:999px;font:600 17px var(--text)}

/* ---------- bottoni e sigilli ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;transition:transform .25s,background .25s}
.btn:hover{transform:translateY(-2px)}
.btn--rosso{background:var(--rosso);color:#fff}.btn--rosso:hover{background:var(--rosso-2)}
.btn--chiaro{background:#fff;color:var(--ink)}
.btn--linea{box-shadow:inset 0 0 0 2px currentColor;color:#fff}
.btn svg{width:18px;height:18px}
.sigilli{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.sigilli li{display:flex;flex-direction:column;justify-content:center;height:56px;padding:0 14px;border:1.5px solid rgba(255,255,255,.55);border-radius:6px;color:#fff;line-height:1.05}
.sigilli b{font:600 18px/1 var(--disp);letter-spacing:.04em}
.sigilli small{font-size:11.5px;opacity:.85;margin-top:3px;white-space:nowrap}

/* ---------- hero ---------- */
.hero{position:relative;min-height:calc(100svh - var(--h));display:grid;grid-template-rows:1fr auto;color:#fff;overflow:hidden;background:var(--abisso)}
.hero__foto{position:absolute;inset:0;z-index:0}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:55% 45%;animation:zoom 2.2s cubic-bezier(.2,.7,.1,1) backwards}
@keyframes zoom{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes sale{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes entra{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.hero__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,28,58,.88) 0%,rgba(7,28,58,.6) 38%,rgba(7,28,58,.08) 68%),linear-gradient(0deg,rgba(7,28,58,.75),transparent 40%)}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,4vw,72px);align-items:end;padding-top:clamp(36px,7vh,90px);padding-bottom:clamp(28px,4vh,48px)}
.hero h1{font-size:clamp(46px,6.6vw,104px);max-width:11.5ch}
.hero h1 span{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 span>em{font-style:normal;display:block;animation:sale 1.1s cubic-bezier(.2,.8,.1,1) backwards}
.hero h1 span:nth-child(2)>em{animation-delay:.12s}.hero h1 span:nth-child(3)>em{animation-delay:.24s}
.hero__sub{font-size:clamp(17px,1.35vw,20px);max-width:34em;margin:26px 0 30px;color:#e6eef8}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.scheda{background:var(--bianco);color:var(--ink);border-radius:10px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);animation:entra 1.1s .5s cubic-bezier(.2,.8,.1,1) backwards}
.scheda img{width:100%;aspect-ratio:3/2;object-fit:cover}
.scheda__t{padding:18px 20px 20px;border-top:5px solid var(--rosso)}
.scheda__t p{margin:0;font-size:15.5px;line-height:1.5}
.scheda__t strong{display:block;font:500 30px/1 var(--disp);color:var(--blu);margin-bottom:8px}
.prova{position:relative;z-index:1;background:var(--blu);border-top:4px solid var(--rosso)}
.prova .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 36px;padding-top:16px;padding-bottom:16px}
.prova__ref{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:0;padding:0;list-style:none;font-weight:500}
.prova__ref li:first-child{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#cfe0f5}
.prova__ref li+li+li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--giallo);margin-right:18px;vertical-align:middle}

/* ---------- onda (lo svolazzo del logo) ---------- */
.onda{display:block;width:100%;height:clamp(60px,9vw,140px)}
.onda path{transition:transform .1s linear}

/* ---------- sezioni a fondo pieno ---------- */
.sez{position:relative;padding:clamp(80px,11vw,160px) 0}
.sez--rosso{background:var(--rosso);color:#fff}
.sez--blu{background:var(--blu);color:#fff}
.sez--blu2{background:var(--blu-2);color:#fff}
.sez--abisso{background:var(--abisso);color:#fff}
.sez--chiaro{background:var(--nebbia);color:var(--ink)}
.sez h2{font-size:clamp(40px,5.4vw,84px)}
.lead{font:400 clamp(26px,2.6vw,40px)/1.14 var(--disp);letter-spacing:-.01em;margin:0;max-width:22ch}
.testo p{margin:0 0 1em;max-width:36em}
.due{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,48px);align-items:start}

/* superficie: chi siamo + trasporti */
.sup .lead{grid-column:1/8}
.sup .testo{grid-column:1/7;margin-top:40px;font-size:18px}
.sup__foto{grid-column:8/13;grid-row:1/4;position:relative;min-height:720px}
.sup__foto figure{margin:0;position:absolute;box-shadow:0 30px 50px -30px rgba(0,0,0,.6)}
.sup__foto .f1{right:0;top:0;width:88%}
.sup__foto .f2{left:0;bottom:0;width:50%;border:8px solid #fff}
.sup__foto img{width:100%;height:auto}
.trasporti{grid-column:1/7;margin-top:56px;padding-top:28px;border-top:2px solid rgba(255,255,255,.35)}
.trasporti h3{font-size:clamp(26px,2.4vw,36px);margin-bottom:12px}
.trasporti p{margin:0;max-width:34em}
figcaption{font-size:13px;line-height:1.35;padding:8px 2px 0;opacity:.85}
.sup__foto figcaption{position:absolute;left:0;right:0;top:100%;color:#fff}

/* sott'acqua: servizi */
.serv{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.serv__testa{grid-column:1/7}
.serv__testa .testo{margin-top:26px;color:#dce8f6}
.serv__lista{grid-column:1/7;margin:48px 0 0;padding:0;list-style:none;counter-reset:n var(--start,0)}
.serv__lista li{counter-increment:n;border-top:1px solid rgba(255,255,255,.28)}
.serv__lista li:last-child{border-bottom:1px solid rgba(255,255,255,.28)}
.serv__lista a{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;min-height:72px;text-decoration:none;font:500 clamp(22px,2.1vw,32px)/1.1 var(--disp);transition:padding .3s,color .3s}
.serv__lista a::before{content:counter(n,decimal-leading-zero);font:600 14px var(--text);color:var(--giallo)}
.serv__lista a::after{content:"→";font:400 24px var(--text);opacity:.5;transition:transform .3s,opacity .3s}
.serv__lista a:hover{padding-left:10px}
.serv__lista a:hover::after{opacity:1;transform:translateX(6px)}
.serv__strati{grid-column:7/13;grid-row:1/3;position:relative;min-height:760px}
.serv__strati figure{position:absolute;margin:0;will-change:transform}
.serv__strati img{width:100%;height:auto;border-radius:4px;box-shadow:0 40px 60px -30px rgba(0,0,0,.65)}
.serv__strati .s1{top:0;right:0;width:82%}
.serv__strati .s2{top:46%;left:0;width:50%;z-index:2}
.serv__strati .s3{top:62%;right:4%;width:40%;z-index:1}
.serv__strati figcaption{color:#fff}
.serv__piu{grid-column:1/7;margin-top:36px}

/* lavori speciali */
.speciali__testa{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin-bottom:56px}
.speciali__testa p{max-width:30em;margin:0;color:#c9d7ea}
.galleria{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:start}
.galleria figure{margin:0;will-change:transform}
.galleria img{width:100%;height:auto;border-radius:4px}
.galleria figcaption{font:500 18px/1.25 var(--disp);opacity:1;padding-top:12px}
.galleria figcaption small{display:block;font:400 13px var(--text);opacity:.7;margin-top:2px}
.g1{grid-column:1/8}.g2{grid-column:8/13;margin-top:120px}.g3{grid-column:2/6;margin-top:-40px}
.g4{grid-column:6/10;margin-top:60px}.g5{grid-column:10/13;margin-top:-20px}

/* certificazioni: il libretto */
.cert{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(90px,10vw,150px);padding-top:clamp(40px,5vw,64px);border-top:2px solid rgba(255,255,255,.2)}
.cert__testa{grid-column:1/5}
.cert__testa h2{font-size:clamp(36px,4vw,60px)}
.cert__testa p{color:#c9d7ea;margin:20px 0 0}
.libretto{grid-column:6/13;margin:0;padding:0;list-style:none}
.libretto li{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.libretto b{font:600 22px/1 var(--disp);letter-spacing:.05em;color:var(--giallo)}
.libretto span{font-size:18px}

/* contatti: si risale in superficie */
.contatti .due{align-items:start}
.contatti h2{grid-column:1/7;grid-row:1;font-size:clamp(48px,7vw,116px)}
.contatti .lead{grid-column:1/7;grid-row:2;margin-top:28px;font-size:clamp(22px,2vw,30px);max-width:26ch}
.recapiti{grid-column:7/13;grid-row:1/3;font-size:18px}
.recapiti a.grande{display:block;font:500 clamp(24px,2.7vw,42px)/1.05 var(--disp);text-decoration:none;margin-bottom:10px}
.recapiti a.grande:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.recapiti p{margin:18px 0 26px}
.contatti .sigilli{margin-top:28px}
.contatti .sigilli li{border-color:rgba(255,255,255,.7)}

/* piede */
.piede{background:var(--abisso);color:#c9d7ea;font-size:14.5px;padding:44px 0 36px}
.piede .wrap{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;align-items:center}
.piede nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.piede a{text-decoration:none}.piede a:hover{color:#fff;text-decoration:underline}
.piede p{margin:0}

/* pagine interne */
.p-hero{background:var(--blu);color:#fff;padding:clamp(48px,7vw,100px) 0 0;overflow:hidden}
.p-hero .due{align-items:end}
.p-hero__t{grid-column:1/7;padding-bottom:clamp(40px,6vw,90px)}
.p-hero h1{font-size:clamp(46px,6vw,96px)}
.p-hero__t .testo{margin-top:28px;color:#e2ecf8}
.p-hero__foto{grid-column:7/13;margin:0;position:relative}
.p-hero__foto img{width:100%;height:auto;border-radius:6px 6px 0 0}
.voci{display:grid;gap:clamp(70px,9vw,130px)}
.voce{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,48px);align-items:center;scroll-margin-top:calc(var(--h) + 16px)}
.voce figure{grid-column:1/8;margin:0}
.voce:nth-child(even) figure{grid-column:6/13;grid-row:1}
.voce:nth-child(even) .voce__t{grid-column:1/6;grid-row:1}
.voce img{width:100%;height:auto;border-radius:4px}
.voce__t{grid-column:8/13}
.voce__t b{display:block;font:600 14px var(--text);color:var(--giallo);margin-bottom:10px}
.voce__t h2{font-size:clamp(34px,3.6vw,56px)}
.voce__t p{margin:16px 0 0;color:#dce8f6;max-width:30em}
.voce figcaption{color:#fff}
.chiudi{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between}
.chiudi h2{font-size:clamp(34px,4vw,60px);max-width:16ch}
.chiudi__a{display:flex;flex-direction:column;gap:18px;align-items:flex-start}

/* entrate: poche e diverse, mai la stessa ovunque */
.su{opacity:0;transform:translateY(40px);transition:opacity .9s,transform 1.1s cubic-bezier(.2,.8,.1,1)}
.su.vis{opacity:1;transform:none}

@media (max-width:1100px){
  .nav{display:none}.menu{display:block}
  .hero__grid{grid-template-columns:1fr}
  .scheda{display:grid;grid-template-columns:160px 1fr;max-width:560px}
  .scheda img{height:100%;aspect-ratio:auto}
  .scheda__t{border-top:0;border-left:5px solid var(--rosso)}
  .sup .lead,.sup .testo,.trasporti,.serv__testa,.serv__lista,.serv__piu,.cert__testa,.libretto,.contatti h2,.contatti .lead,.recapiti,.p-hero__t,.p-hero__foto,.voce figure,.voce__t,.voce:nth-child(even) figure,.voce:nth-child(even) .voce__t{grid-column:1/-1;grid-row:auto}
  .sup__foto{grid-column:1/-1;grid-row:auto;min-height:0;margin-top:48px;display:grid;grid-template-columns:1.3fr 1fr;gap:16px;align-items:end}
  .sup__foto figure.f1,.sup__foto figure.f2{position:relative;inset:auto;width:auto}
  .sup__foto .f2{border-width:5px}
  .sup__foto figcaption{position:static}
  .serv__strati{grid-column:1/-1;grid-row:auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
  .serv__strati figure.s1,.serv__strati figure.s2,.serv__strati figure.s3{position:relative;inset:auto;width:auto}
  .serv__strati .s1{grid-column:1/-1}
  .galleria>figure{grid-column:span 6;margin-top:0}
  .galleria .g1{grid-column:1/-1}
  .recapiti{margin-top:36px}
}
@media (max-width:600px){
  :root{--h:66px}
  body{font-size:16.5px}
  .brand img{height:40px}
  .menu summary{padding:0 14px}
  .hero__grid{padding-top:32px}
  .hero__foto::after{background:linear-gradient(0deg,rgba(7,28,58,.92) 10%,rgba(7,28,58,.62) 60%,rgba(7,28,58,.4))}
  .prova__ref li+li+li::before{display:none}
  .prova__ref{gap:4px 16px}
  .hero h1{font-size:clamp(40px,11.4vw,56px)}
  .scheda{grid-template-columns:110px 1fr}
  .scheda__t{padding:14px}.scheda__t strong{font-size:24px}.scheda__t p{font-size:14px}
  .sigilli li{height:50px;padding:0 10px}.sigilli b{font-size:16px}
  .galleria>figure{grid-column:1/-1}
  .libretto li{grid-template-columns:1fr;gap:4px}
  .serv__lista a{grid-template-columns:40px 1fr auto;min-height:64px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .hero__foto img,.hero h1 span>em,.scheda,.su{transform:none!important;opacity:1!important}
}