:root{
  --sea-deep:#0b2e3d;
  --sea-mid:#134a5e;
  --foam:#f3efe6;
  --sail:#ffffff;
  --buoy:#e0632f;
  --ink:#0b2e3d;
  --line: rgba(11,46,61,0.14);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--foam);
  color:var(--ink);
  font-family:'Public Sans', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  margin:0 0 0.4em 0;
  letter-spacing:-0.01em;
}
.mono{font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em;}
a{color:inherit;}
img{display:block; max-width:100%;}
a:focus-visible, button:focus-visible{outline:2px solid var(--buoy); outline-offset:3px;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}

/* NAV */
header.site{
  position:sticky; top:0; z-index:20;
  background:rgba(243,239,230,0.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 24px; gap:24px;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Fraunces', serif; font-size:1.15rem; font-weight:600; text-decoration:none; color:var(--ink);}
.brand img{height:36px; width:auto;}
nav.links{display:flex; align-items:center; gap:6px; font-size:0.92rem;}
nav.links > a, .dd-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 14px; border-radius:6px; text-decoration:none; color:var(--ink);
  font:inherit; font-weight:500; background:none; border:none; cursor:pointer; white-space:nowrap;
  transition:background .2s ease, color .2s ease;
}
nav.links > a:hover, .dd-btn:hover, .dd.open .dd-btn{background:rgba(11,46,61,0.06);}
nav.links > a.active, .dd-btn.active{color:var(--buoy);}
.chev{width:12px; height:12px; transition:transform .2s ease;}
.dd{position:relative;}
.dd.open .chev{transform:rotate(180deg);}
.dd-menu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:290px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 14px 34px rgba(11,46,61,0.14); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.dd.open .dd-menu{opacity:1; visibility:visible; transform:none;}
.dd-title{display:none;}
.dd-menu a{display:block; padding:10px 12px; border-radius:6px; text-decoration:none; color:var(--ink);}
.dd-menu a strong{display:block; font-weight:600; font-size:0.93rem;}
.dd-menu a span{display:block; font-size:0.8rem; color:#5b6b6f; margin-top:2px;}
.dd-menu a:hover{background:var(--foam);}
.dd-menu a.active strong{color:var(--buoy);}
.nav-cta{background:var(--buoy) !important; color:#fff !important; font-weight:600 !important; margin-left:8px;}
.nav-cta:hover{background:#c9531f !important;}
.menu-toggle{display:none; width:44px; height:44px; background:none; border:none; cursor:pointer; position:relative;}
.menu-toggle span{position:absolute; left:11px; right:11px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease;}
.menu-toggle span:nth-child(1){top:15px;} .menu-toggle span:nth-child(2){top:21px;} .menu-toggle span:nth-child(3){top:27px;}
.menu-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

@media (max-width:960px){
  .menu-toggle{display:block;}
  nav.links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--foam); border-bottom:1px solid var(--line);
    box-shadow:0 18px 30px rgba(11,46,61,0.12);
    padding:8px 16px 20px; max-height:calc(100vh - 64px); overflow-y:auto;
    display:none;
  }
  nav.links.open{display:flex;}
  nav.links > a{padding:14px 8px; font-size:1.02rem; border-bottom:1px solid var(--line); border-radius:0;}
  .dd{border-bottom:1px solid var(--line);}
  .dd-btn{display:none;}
  .dd-title{display:block; font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--buoy); padding:14px 8px 4px;}
  .dd-menu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; background:none; padding:0 0 8px; min-width:0;}
  .dd-menu a{padding:10px 8px;}
  .nav-cta{margin:16px 0 0; justify-content:center; padding:14px !important; border-radius:6px; border-bottom:none !important;}
}

/* HERO home */
.hero{position:relative; overflow:hidden; color:var(--sail);}
.hero-img{
  width:100%; height:88vh; min-height:560px; object-fit:cover;
  object-position:center 65%;
  filter:brightness(0.55) saturate(1.05);
  transform:scale(1.03);
}
@media (max-width:700px){
  .hero-img{height:78vh; min-height:480px; object-position:center 55%;}
  .hero-content .wrap{padding-bottom:40px;}
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,46,61,0.35) 0%, rgba(11,46,61,0.05) 30%, rgba(11,46,61,0.75) 100%);
  pointer-events:none;
}
.hero-content{position:absolute; inset:0; display:flex; align-items:flex-end;}
.hero-content .wrap{padding-bottom:64px;}
.coords{
  font-size:0.72rem; color:#0b2e3d; margin-bottom:18px;
  display:inline-block; background:var(--foam); padding:6px 12px;
}
.hero h1{font-size:clamp(2.4rem, 6.5vw, 4.6rem); max-width:17ch; color:var(--sail); line-height:1.04;}
.hero p.lede{max-width:50ch; font-size:1.1rem; color:#eef3f2; margin-top:16px;}
.hero-actions{margin-top:32px; display:flex; gap:16px; flex-wrap:wrap;}
.hero-wave{position:absolute; bottom:-1px; left:0; width:100%; line-height:0; z-index:2;}

/* HERO pagine interne (più basso) */
.page-hero{position:relative; overflow:hidden; color:var(--sail);}
.page-hero-img{
  width:100%; height:46vh; min-height:320px; object-fit:cover;
  filter:brightness(0.5) saturate(1.05);
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,46,61,0.4) 0%, rgba(11,46,61,0.15) 40%, rgba(11,46,61,0.85) 100%);
  pointer-events:none;
}
.page-hero-content{position:absolute; inset:0; display:flex; align-items:flex-end;}
.page-hero-content .wrap{padding-bottom:40px;}
.page-hero h1{font-size:clamp(2rem, 5vw, 3.2rem); max-width:20ch; color:var(--sail); line-height:1.06;}
.page-hero .eyebrow{color:#bcd8de;}

.btn{
  display:inline-block; padding:13px 26px; border-radius:2px; font-size:0.92rem;
  text-decoration:none; font-weight:600; border:1px solid transparent;
  transition:transform .15s ease, background .2s ease;
}
.btn-primary{background:var(--buoy); color:#fff;}
.btn-primary:hover{transform:translateY(-1px); background:#c8551f;}
.btn-ghost{border-color:rgba(255,255,255,0.55); color:var(--sail);}
.btn-ghost:hover{background:rgba(255,255,255,0.1);}

section{padding:72px 0; border-bottom:1px solid var(--line);}
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--buoy); margin-bottom:10px;
}
.section-head{max-width:640px; margin-bottom:36px;}
.section-head h2{font-size:clamp(1.5rem, 3vw, 2.1rem);}

/* CHI SIAMO (home) */
#chi-siamo{background:var(--sea-deep); color:var(--foam); border-bottom:none;}
#chi-siamo .eyebrow{color:#8fd0d9;}
.chisiamo{display:grid; grid-template-columns:0.75fr 1.25fr; gap:56px; align-items:start;}
@media (max-width:800px){ .chisiamo{grid-template-columns:1fr;} }
.chisiamo h2{font-size:clamp(1.8rem, 4vw, 2.8rem); color:var(--sail); max-width:11ch;}
.chisiamo p{color:#dbe9ea; font-size:1.05rem;}
.chisiamo blockquote{
  border-left:2px solid var(--buoy); padding-left:22px;
  font-family:'Fraunces', serif; font-style:italic; color:var(--sail);
  margin:28px 0 0; font-size:1.5rem; line-height:1.35;
}
.stat-row{display:flex; gap:40px; margin-top:28px; flex-wrap:wrap;}
.stat .num{font-family:'IBM Plex Mono', monospace; font-size:1.9rem; color:var(--sail);}
.stat .label{font-size:0.8rem; color:#a9c2c6;}
.chisiamo .more-link{color:#8fd0d9; font-weight:600; text-decoration:underline; text-underline-offset:3px;}

/* IN EVIDENZA */
.evidenza-box{
  border:1px solid var(--line); background:#fff;
  padding:28px 32px; display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.evidenza-box p{margin:0; max-width:60ch; color:#3d4b4e;}

/* CARD GRID pagine - mosaico asimmetrico */
.card-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:220px;
  gap:20px;
  margin-top:36px;
}
.page-card{
  display:block; text-decoration:none; color:inherit;
  position:relative; overflow:hidden;
  background:var(--sea-mid);
  transition:transform .25s ease;
}
.page-card.featured{grid-column:span 2; grid-row:span 2;}
.page-card.wide{grid-column:span 2;}
@media (max-width:900px){
  .card-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:200px;}
  .page-card.featured{grid-column:span 2; grid-row:span 2;}
  .page-card.wide{grid-column:span 2;}
}
@media (max-width:600px){
  .card-grid{grid-template-columns:1fr; grid-auto-rows:220px;}
  .page-card.featured{grid-column:span 1; grid-row:span 1;}
  .page-card.wide{grid-column:span 1;}
}
.page-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .4s ease;
}
.page-card:hover img{transform:scale(1.08);}
.page-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,46,61,0) 40%, rgba(11,46,61,0.88) 100%);
}
.page-card .body{position:absolute; left:0; right:0; bottom:0; padding:18px 20px; z-index:2; color:var(--sail);}
.page-card h3{font-size:1.05rem; margin-bottom:4px; color:var(--sail);}
.page-card.featured h3{font-size:1.5rem;}
.page-card p{font-size:0.85rem; color:#dbe9ea; margin:0; max-width:34ch;}
.page-card .cta{font-size:0.78rem; color:#ffb489; margin-top:8px; font-weight:600;}

/* STRUMENTI */
.tools-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px;}
@media (max-width:800px){ .tools-grid{grid-template-columns:1fr;} }
.tool-card{border:1px solid var(--line); background:#fff; padding:22px;}
.tool-card .icon{font-size:1.4rem; margin-bottom:10px;}
.tool-card h3{font-size:0.98rem; margin-bottom:6px;}
.tool-card p{font-size:0.86rem; color:#546165; margin:0 0 14px;}
.tool-card .value{
  font-family:'IBM Plex Mono', monospace; font-size:0.85rem; color:var(--sea-mid);
  border-top:1px dashed var(--line); padding-top:10px;
}

/* GALLERIA assaggio (home) e griglie complete (pagine gallerie) */
.gallery-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:32px;}
@media (max-width:700px){ .gallery-strip{grid-template-columns:repeat(2,1fr);} }
.gallery-strip .g-item, .gallery-grid .g-item{aspect-ratio:1/1; overflow:hidden; background:var(--sea-mid); cursor:pointer;}
.gallery-strip img, .gallery-grid img, .video-grid video{width:100%; height:100%; object-fit:cover; transition:transform .3s ease;}
.gallery-strip .g-item:hover img, .gallery-grid .g-item:hover img{transform:scale(1.06);}
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:36px;}
@media (max-width:900px){ .gallery-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:600px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} }

/* VIDEO IN EVIDENZA (home) */
.featured-video{
  position:relative; max-width:900px; margin:0 auto;
  background:var(--sea-deep); border:1px solid var(--line);
  overflow:hidden;
}
.featured-video video{width:100%; display:block; aspect-ratio:16/9; background:#000;}
.featured-video-caption{
  padding:14px 20px; font-family:'IBM Plex Mono', monospace;
  font-size:0.8rem; color:var(--sea-mid); background:#fff;
  border-top:1px solid var(--line);
}

/* GALLERIA VIDEO (pagina dedicata) */
.video-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px;}
@media (max-width:800px){ .video-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .video-grid{grid-template-columns:1fr;} }
.video-card{background:#fff; border:1px solid var(--line); overflow:hidden;}
.video-card video{width:100%; aspect-ratio:16/9; object-fit:cover; background:#000; display:block;}
.video-card .v-label{padding:12px 14px; font-size:0.85rem; color:#3d4b4e;}

/* CONTENUTO testuale pagine interne */
.content{max-width:760px;}
.content p{font-size:1.02rem; color:#2c393c;}
.content ul{padding-left:20px; color:#2c393c;}
.content li{margin-bottom:6px;}
.content h2{font-size:clamp(1.4rem, 3vw, 1.9rem); margin-top:1.2em;}
.content h2:first-child{margin-top:0;}
.pull-note{
  border-left:2px solid var(--buoy); padding:4px 0 4px 20px;
  font-family:'Fraunces', serif; font-style:italic; color:var(--sea-mid);
  font-size:1.15rem; margin:28px 0;
}
.info-box{border:1px solid var(--line); background:#fff; padding:24px 28px; margin-top:32px;}
.info-box h3{font-size:1rem; margin-bottom:12px;}
.info-list{list-style:none; padding:0; margin:0; font-size:0.95rem;}
.info-list li{padding:8px 0; border-bottom:1px solid var(--line);}
.info-list li:last-child{border-bottom:none;}
.partner-badge{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line); background:#fff; padding:10px 16px;
  font-size:0.88rem; margin-top:20px;
}

/* CONTATTI / FOOTER */
.contact-section{background:var(--sea-deep); color:var(--foam); border-bottom:none;}
.contact-section .eyebrow{color:#8fd0d9;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
@media (max-width:800px){ .contact-grid{grid-template-columns:1fr;} }
.contact-list{list-style:none; padding:0; margin:20px 0 0; font-size:0.96rem;}
.contact-list li{padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.14);}
.contact-list a{text-decoration:underline; text-underline-offset:3px;}
footer{padding:24px 0; text-align:center; font-size:0.8rem; color:#5b6b6f;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;} *{transition:none !important;}
}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* Dissolvenza hero al caricamento */
.hero-img, .page-hero-img{
  opacity:0;
  animation:heroFadeIn 1.6s ease forwards;
}
@keyframes heroFadeIn{
  from{opacity:0; transform:scale(1.08);}
  to{opacity:1; transform:scale(1.03);}
}
.page-hero-img{animation-name:pageHeroFadeIn;}
@keyframes pageHeroFadeIn{
  from{opacity:0; transform:scale(1.05);}
  to{opacity:1; transform:scale(1);}
}
.hero-content, .page-hero-content{
  opacity:0;
  animation:contentFadeIn 1.2s ease 0.5s forwards;
}
@keyframes contentFadeIn{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}

/* Dissolvenza immagini a caricamento lento (gallerie, card) */
img[loading="lazy"], .page-card img, .g-item img{
  opacity:0;
  transition:opacity .7s ease;
}
img[loading="lazy"].loaded, .page-card img.loaded, .g-item img.loaded{opacity:1;}

@media (prefers-reduced-motion: reduce){
  .hero-img, .page-hero-img, .hero-content, .page-hero-content{animation:none; opacity:1; transform:none;}
  img[loading="lazy"], .page-card img, .g-item img{opacity:1;}
}

/* Parallax hero */
.hero, .page-hero{will-change:transform;}
.hero-img, .page-hero-img{will-change:transform;}

/* Playlist YouTube */
.yt-frame{position:relative; aspect-ratio:16/9; max-width:960px; background:var(--sea-deep); border:1px solid var(--line);}
.yt-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.yt-link{color:var(--buoy); font-weight:600; text-decoration:none;}
.yt-link:hover{text-decoration:underline;}

/* Bande fotografiche con parallasse */
.band{position:relative; height:clamp(380px, 72vh, 680px); overflow:hidden; clip-path:inset(0); background:var(--sea-deep); display:flex; align-items:center;}
.band-img{position:fixed; top:0; left:0; width:100%; height:100vh; object-fit:cover;}
.band::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,46,61,0.25), rgba(11,46,61,0.55));}
.band-text{position:relative; z-index:1; width:100%; text-align:center; color:var(--sail); }
.band-text .eyebrow{color:#f3c7b0;}
.band-text p{font-family:'Fraunces', serif; font-size:clamp(1.7rem, 4.5vw, 3.2rem); line-height:1.12; margin:6px auto 0; max-width:18ch; text-shadow:0 2px 18px rgba(0,0,0,0.35);}

/* Comparsa a cascata */
.reveal .stagger > *{opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in .stagger > *{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal .stagger > *{opacity:1 !important; transform:none !important; transition:none !important;}
}


/* Finestre: la foto resta ferma e la pagina le scorre sopra */
.band::after{z-index:0;}
.band-text{z-index:1;}

/* Meteo in tempo reale */
.sea-badge{display:inline-block; margin-top:12px; padding:6px 10px; border-radius:20px; font-size:0.8rem; font-weight:600;}
.sea-badge.ok{background:#dff3e6; color:#1d6b3a;}
.sea-badge.warn{background:#fdf0d5; color:#8a5a00;}
.sea-badge.no{background:#fbe0dc; color:#a3281a;}
.windy{margin-top:24px; aspect-ratio:16/8; border:1px solid var(--line); background:var(--sea-deep);}
.windy iframe{width:100%; height:100%; border:0; display:block;}
@media (max-width:700px){ .windy{aspect-ratio:4/5;} }
.meteo-note{margin-top:14px; font-size:0.8rem; color:#5b6b6f;}
.meteo-note a{color:inherit;}

/* Mappa sede */
.map-box{margin-top:40px; aspect-ratio:16/7; border-radius:8px; overflow:hidden; background:#123;}
.map-box iframe{width:100%; height:100%; border:0; display:block;}
@media (max-width:700px){ .map-box{aspect-ratio:4/3;} }
.map-link{margin-top:14px;}
.map-link a{color:#8fd0d9; font-weight:600;}