/* ============================================================
   EUGENIO SERMONETA — Real Estate · Ostia / Lido di Ostia
   Mami Creative Studio
   ============================================================ */

:root{
  --cream:      #F5F0E7;
  --cream-2:    #E8DDCC;
  --white-warm: #FFFDF8;
  --gold:       #C5A15D;
  --gold-dark:  #98743A;
  --ink:        #171717;
  --ink-soft:   #4A4640;
  --line:       rgba(23,23,23,.12);
  --line-light: rgba(255,253,248,.22);

  --disp: "Playfair Display", Georgia, "Times New Roman", serif;
  --ui:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --pad: clamp(1.25rem, 5vw, 6rem);
  --ease: cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* IMPORTANTE: qui NON si può usare overflow-x:hidden.
   Renderebbe html/body dei contenitori di scorrimento e disattiverebbe
   position:sticky in tutta la pagina — quindi la zona "pin" delle sezioni
   video non si aggancerebbe più. Si usa overflow-x:clip, che taglia
   l'eccedenza orizzontale senza creare un contenitore di scorrimento
   e lascia funzionare lo sticky. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;width:100%}
body{font-family:var(--ui);color:var(--ink);background:var(--cream);
  font-weight:400;line-height:1.65;overflow-x:clip;width:100%;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden;height:100vh}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
em{font-style:italic}
::selection{background:var(--ink);color:var(--cream)}
h1,h2,h3{font-family:var(--disp);font-weight:500;line-height:1.05;letter-spacing:-.01em;color:var(--ink)}
p{max-width:58ch}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.kicker{font-family:var(--ui);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  font-weight:600;color:var(--gold-dark);display:inline-flex;align-items:center;gap:.7rem}
.kicker .idx{font-family:var(--disp);font-style:italic;font-size:1rem;letter-spacing:0;opacity:.85;color:var(--gold)}
.lead{font-size:clamp(1.1rem,2vw,1.4rem);line-height:1.55;color:var(--ink);font-weight:400}

.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:.5rem;
  font-family:var(--ui);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:1.1rem 2.1rem;transition:all .45s var(--ease);border:1px solid transparent;border-radius:2px}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:var(--gold-dark);color:var(--white-warm);transform:translateY(-2px)}
.btn--outline{border-color:var(--ink);color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--cream)}
.btn--outline-light{border-color:rgba(255,253,248,.55);color:var(--white-warm)}
.btn--outline-light:hover{background:var(--white-warm);color:var(--ink);border-color:var(--white-warm)}
.btn--underline{color:var(--ink);position:relative;padding:1.1rem .3rem}
.btn--underline::after{content:"";position:absolute;left:.3rem;right:.3rem;bottom:.85rem;height:1px;background:var(--gold);transition:transform .45s var(--ease)}
.btn--underline:hover::after{transform:scaleX(0);transform-origin:right}

.reveal{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.no-js .reveal,.reduce-motion .reveal{opacity:1;transform:none}

.section{padding:clamp(4rem,9vw,8rem) 0}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--pad)}

/* ============================================================
   NAV + DRAWER
   ============================================================ */
.nav{position:fixed;top:0;left:0;width:100%;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.5rem var(--pad);color:var(--white-warm);
  transition:background .5s var(--ease),padding .4s var(--ease),color .4s var(--ease)}
.nav__logo{font-family:var(--disp);font-size:1.25rem;letter-spacing:.02em;color:var(--white-warm);transition:color .4s var(--ease)}
.nav__logo em{color:var(--gold);font-style:normal}
/* Sopra il video il nav non ha sfondo: una velatura scura sfumata in alto
   tiene il logo e i link leggibili anche sui fotogrammi con il cielo chiaro,
   senza sporcare l'immagine con un blocco di colore. */
.nav:not(.solid)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(16,16,16,.55),rgba(16,16,16,0))}
.nav:not(.solid) .nav__logo,.nav:not(.solid) .nav__links a,.nav:not(.solid) .nav__tel{text-shadow:0 1px 12px rgba(0,0,0,.7)}
.nav__links{display:flex;gap:2.2rem}
.nav__links a{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;position:relative;opacity:.92}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--gold);transition:width .4s var(--ease)}
.nav__links a:hover::after{width:100%}
.nav__end{display:flex;align-items:center}
.nav__burger{display:none;flex-direction:column;gap:6px;width:34px;height:34px;justify-content:center;align-items:flex-end;z-index:1201}
.nav__burger span{height:1.5px;background:currentColor;transition:.4s var(--ease);display:block}
.nav__burger span:nth-child(1){width:34px}
.nav__burger span:nth-child(2){width:22px}
.nav__burger.open span:nth-child(1){transform:translateY(4px) rotate(45deg);width:30px}
.nav__burger.open span:nth-child(2){transform:translateY(-4px) rotate(-45deg);width:30px}

.nav.solid{background:var(--cream);color:var(--ink);box-shadow:0 1px 0 var(--line);padding-top:1.1rem;padding-bottom:1.1rem}
.nav.solid .nav__logo{color:var(--ink)}
/* Su fondo crema il dorato chiaro sparisce (contrasto 2.1:1):
   per il logo si usa una variante piu scura che raggiunge 4.5:1. */
.nav.solid .nav__logo em,.nav--legal .nav__logo em{color:#8A6832}
.nav.solid .nav__links a{color:var(--ink)}
.nav.solid .nav__book{border-color:var(--ink);color:var(--ink)}
.nav.solid .nav__book:hover{background:var(--ink);color:var(--cream)}
.nav__book{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--white-warm);color:var(--white-warm);padding:.75rem 1.5rem;border-radius:2px;transition:all .4s var(--ease)}
.nav__book:hover{background:var(--white-warm);color:var(--ink)}

.drawer{position:fixed;inset:0;z-index:1100;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;padding:var(--pad);
  clip-path:inset(0 0 100% 0);transition:clip-path .65s var(--ease);pointer-events:none}
.drawer.open{clip-path:inset(0 0 0 0);pointer-events:auto}
.drawer__nav{display:flex;flex-direction:column;gap:.2rem}
.drawer__nav a{font-family:var(--disp);font-size:clamp(2rem,8vw,3rem);color:var(--cream);
  display:flex;align-items:baseline;gap:1rem;padding:.35rem 0;transition:color .3s,padding-left .4s var(--ease)}
.drawer__nav a span{font-size:.75rem;font-family:var(--ui);letter-spacing:.2em;color:var(--gold);font-weight:600}
.drawer__nav a:hover{color:var(--gold);padding-left:.8rem}
.drawer__foot{margin-top:2.4rem;display:flex;flex-direction:column;gap:.5rem}
.drawer__foot a{color:var(--cream);font-size:1.3rem;font-family:var(--disp)}

/* ============================================================
   SCRUB — il video avanza fotogramma per fotogramma con lo scroll

   .scrub      = zona "pin", alta 3 viewport: è il binario di scorrimento.
   .scrub__pin = resta incollato (sticky) a schermo per tutta la zona.

   Lo sticky si sgancia esattamente quando il fondo della sezione
   raggiunge il fondo del pin. Il JS calcola l'avanzamento con le
   stesse due altezze misurate dal DOM, quindi progresso 1.0 e
   sgancio del pin cadono nello stesso identico punto.
   Lo sfondo è il colore medio dell'ultimo fotogramma: se anche
   restasse un pixel scoperto, non si vedrebbe mai del nero.
   ============================================================ */
.scrub{position:relative;width:100%;height:300svh;background:#5d564b}
.scrub__pin{position:sticky;top:0;height:100svh;width:100%;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;line-height:0}

/* CLOSER — video normale a tutto schermo: parte da solo, muto, in loop.
   Non è legato allo scroll (a differenza dell'hero). */
.closer{position:relative;width:100%;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:#666258;line-height:0}
.closer__inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.closer__video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block}
.closer__shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,16,16,.5) 0%,rgba(16,16,16,.28) 38%,rgba(16,16,16,.72) 100%)}
.scrub__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scrub__shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(16,16,16,.38) 0%,rgba(16,16,16,.12) 38%,rgba(16,16,16,.78) 100%)}
.scrub__overlay{position:relative;z-index:3;width:100%;max-width:1240px;line-height:1.65;
  padding:0 var(--pad) clamp(3.5rem,8vw,6rem)}
.scrub__cue{position:absolute;bottom:3.5vh;left:50%;transform:translateX(-50%);z-index:3;color:var(--white-warm);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;line-height:1;
  font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;transition:opacity .5s var(--ease)}
.scrub__cue.is-hidden{opacity:0}
.scrub__cue i{width:1px;height:42px;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
.scrub__cue i::after{content:"";position:absolute;top:-42px;left:0;width:1px;height:42px;background:var(--white-warm);animation:cueRun 2.4s var(--ease) infinite}
@keyframes cueRun{0%{transform:translateY(0)}60%,100%{transform:translateY(84px)}}
.closer__overlay{position:relative;z-index:3;text-align:center;max-width:820px;margin:0 auto;
  line-height:1.65;padding:clamp(3.5rem,8vw,6rem) var(--pad)}

/* Senza JS o con "riduci movimento": niente zona pin, una sola schermata
   con il poster come sfondo — nessuno spazio vuoto. */
.no-js .scrub,.reduce-motion .scrub{height:100svh}
.no-js .scrub__pin,.reduce-motion .scrub__pin{position:relative}
.no-js .scrub__cue,.reduce-motion .scrub__cue{display:none}
.no-js #hero,.reduce-motion #hero{background:#5d564b center/cover url("../assets/video/video-apertura-poster.jpg")}
.no-js #closer,.reduce-motion #closer{background:#666258 center/cover url("../assets/video/video-chiusura-poster.jpg")}

/* hero overlay text — l'ombra tiene il testo leggibile anche sui
   fotogrammi in cui il cielo è molto chiaro */
/* Il dorato pieno sparisce sui fotogrammi con il cielo chiaro: qui serve
   un tono più luminoso, con un'ombra che lo stacca sempre dallo sfondo. */
.hero__mark{font-family:var(--ui);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:#E8CFA0;margin-bottom:1.3rem;
  text-shadow:0 1px 3px rgba(16,16,16,.9),0 2px 16px rgba(16,16,16,.8)}
.hero__title{font-size:clamp(2.6rem,8vw,6.2rem);line-height:1;font-weight:600;color:var(--white-warm);letter-spacing:-.01em;
  text-shadow:0 6px 34px rgba(16,16,16,.5)}
.hero__sub{font-family:var(--ui);font-size:clamp(.85rem,1.6vw,1.05rem);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-top:.9rem;font-weight:600;
  text-shadow:0 2px 14px rgba(16,16,16,.85)}
.hero__claim{font-family:var(--disp);font-style:italic;font-size:clamp(1.15rem,2.2vw,1.6rem);color:rgba(255,253,248,.92);margin:1.6rem 0 0;max-width:34ch;font-weight:400;
  text-shadow:0 3px 18px rgba(16,16,16,.6)}
.hero__cta{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:2.4rem}

/* closer overlay text */
.closer__mark{font-family:var(--ui);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:1.3rem}
.closer__title{font-size:clamp(2rem,5.5vw,3.6rem);color:var(--white-warm);font-weight:600;line-height:1.15}
.closer__cta{display:flex;align-items:center;justify-content:center;gap:1.4rem;flex-wrap:wrap;margin-top:2.4rem}

/* ============================================================
   CHI SONO
   ============================================================ */
.chisono{background:var(--cream)}
.chisono__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2.5rem,6vw,5rem);align-items:center}
.chisono__title{font-size:clamp(2.2rem,5vw,3.6rem);margin:1.3rem 0 1.6rem;font-weight:500}
.chisono__text p{margin-top:1.05rem;color:var(--ink-soft)}
.chisono__text .lead{margin-top:0}
.chisono__quote{font-family:var(--disp);font-style:italic;font-size:clamp(1.3rem,2.4vw,1.8rem);color:var(--gold-dark);
  margin:2rem 0;max-width:none;line-height:1.4;padding-left:1.3rem;border-left:2px solid var(--gold)}
.chisono__photos{position:relative}
.chisono__media{aspect-ratio:4/5;border-radius:2px;overflow:hidden;box-shadow:0 30px 70px -40px rgba(23,23,23,.35)}
.chisono__media img{width:100%;height:100%;object-fit:cover;display:block}
.chisono__media--sm{position:absolute;left:-8%;bottom:-10%;width:45%;aspect-ratio:4/5;
  border:6px solid var(--cream);box-shadow:0 24px 50px -20px rgba(23,23,23,.4);z-index:2}
.chisono__cta{margin-top:1.8rem}

/* ============================================================
   SERVIZI
   ============================================================ */
.servizi{background:var(--white-warm)}
.servizi__head{max-width:720px;margin:0 auto clamp(2.6rem,5vw,3.6rem);text-align:center}
.servizi__head h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.servizi__head p{margin:1.1rem auto 0;color:var(--ink-soft)}
.servizi__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.servizio{background:var(--cream);border:1px solid var(--line);border-radius:3px;padding:2.2rem 1.8rem;transition:border-color .35s,transform .35s var(--ease)}
.servizio:hover{border-color:var(--gold);transform:translateY(-4px)}
.servizio__icon{width:44px;height:44px;color:var(--gold-dark);margin-bottom:1.4rem}
.servizio__icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.3}
.servizio h3{font-size:1.15rem;letter-spacing:.02em;margin-bottom:.8rem;font-weight:600;font-family:var(--ui);text-transform:uppercase;font-size:.86rem;letter-spacing:.1em;color:var(--ink)}
.servizio p{font-size:.92rem;color:var(--ink-soft);max-width:none}

/* ============================================================
   METODO DI LAVORO
   ============================================================ */
.metodo{background:var(--ink);color:var(--cream)}
.metodo__head{max-width:640px;margin:0 auto clamp(2.6rem,5vw,3.8rem);text-align:center}
.metodo__head .kicker{color:var(--gold)}
.metodo__head h2{color:var(--white-warm);font-size:clamp(2.2rem,5vw,3.6rem)}
.metodo__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-light)}
.step{padding:2.2rem 1.6rem 0;border-left:1px solid var(--line-light);position:relative}
.step:first-child{border-left:none}
.step__num{font-family:var(--disp);font-style:italic;font-size:1.6rem;color:var(--gold);display:block;margin-bottom:1rem}
.step h3{color:var(--white-warm);font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;font-family:var(--ui);font-weight:600;margin-bottom:.9rem}
.step p{font-size:.92rem;color:rgba(245,240,231,.72)}

/* ============================================================
   OSTIA
   ============================================================ */
.ostia{background:var(--cream-2)}
.ostia__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2.5rem,6vw,5rem);align-items:center}
.ostia__title{font-size:clamp(2.2rem,5vw,3.6rem);margin:1.3rem 0 1.6rem;font-weight:500}
.ostia__text p{margin-top:1.05rem;color:var(--ink-soft)}
.ostia__quote{font-family:var(--disp);font-style:italic;font-size:clamp(1.25rem,2.2vw,1.6rem);color:var(--gold-dark);margin-top:2rem;max-width:none}
/* copertura estesa: si legge come un vantaggio del servizio, non come un avviso */
.ostia__estesa{margin-top:2.2rem;padding:1.6rem 1.8rem;background:var(--white-warm);
  border-left:2px solid var(--gold);border-radius:2px}
.ostia__estesa h3{font-family:var(--disp);font-size:clamp(1.15rem,2vw,1.45rem);font-weight:500;
  color:var(--ink);margin-bottom:.9rem;line-height:1.25}
.ostia__estesa p{font-size:.95rem;color:var(--ink-soft);max-width:none}
.ostia__estesa-claim{margin-top:.9rem;font-family:var(--disp);font-style:italic;
  font-size:clamp(1.02rem,1.7vw,1.2rem);color:var(--gold-dark)!important}
.ostia__media{aspect-ratio:1/1;border-radius:2px}

/* ============================================================
   ENGEL & VÖLKERS
   ============================================================ */
.ev{background:var(--ink);color:var(--cream);text-align:center}
.ev__wrap{max-width:760px;margin:0 auto}
.ev .kicker{color:var(--gold);justify-content:center}
.ev h2{color:var(--white-warm);font-size:clamp(2rem,4.6vw,3.2rem);margin:1.2rem 0 1.5rem}
.ev p{color:rgba(245,240,231,.78);margin:0 auto;max-width:56ch}
.ev__mark{margin-top:2.2rem;display:flex;align-items:center;justify-content:center;min-height:64px}
.ev__mark img{max-height:56px;width:auto;filter:brightness(0) invert(1)}
.ev__mark .ev-textmark{font-family:var(--disp);font-size:1.5rem;letter-spacing:.04em;color:var(--gold)}

/* ============================================================
   MAPPA E SEDE
   ============================================================ */
.dove{background:var(--cream)}
.dove__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:stretch}
.dove__map{border-radius:3px;overflow:hidden;min-height:360px;box-shadow:0 30px 70px -50px rgba(23,23,23,.35)}
.dove__map iframe{width:100%;height:100%;min-height:360px;border:0;filter:grayscale(.2) contrast(1.03)}

/* Schermata prima del caricamento della mappa: nessuna chiamata a Google
   finché il visitatore non clicca. */
.mapgate{width:100%;height:100%;min-height:360px;display:flex;align-items:center;justify-content:center;
  background:var(--cream-2);border:1px solid var(--line);border-radius:3px;padding:1.5rem;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:38px 38px}
.mapgate__box{text-align:center;max-width:34ch}
.mapgate__pin{width:38px;height:38px;color:var(--gold-dark);margin:0 auto .8rem}
.mapgate__addr{font-family:var(--disp);font-size:1.15rem;color:var(--ink);margin-bottom:1.1rem;max-width:none}
.mapgate__note{margin-top:1rem;font-size:.74rem;line-height:1.5;color:var(--ink-soft);max-width:none}
.dove__info{display:flex;flex-direction:column;justify-content:center}
.dove__info h2{font-size:clamp(2rem,4.4vw,3rem);margin-bottom:1rem}
.dove__info p{color:var(--ink-soft);margin-bottom:.3rem}
.dove__addr{font-family:var(--disp);font-style:italic;font-size:1.3rem;color:var(--ink);margin:1.3rem 0 1.8rem;line-height:1.5}
.dove__info .btn{align-self:flex-start}

/* ============================================================
   CONTATTI
   ============================================================ */
.contatti{background:var(--ink);color:var(--cream)}
.contatti__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.contatti__title{color:var(--white-warm);font-size:clamp(2.2rem,5vw,3.6rem);margin:1.2rem 0 1.4rem}
.contatti .kicker{color:var(--gold)}
.contatti__text p{color:rgba(245,240,231,.78);margin-bottom:2.2rem}
.contatti__cta{display:flex;gap:1.2rem;flex-wrap:wrap}
.contatti__extra{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:1.2rem}
.contatti__card{background:rgba(255,253,248,.05);border:1px solid var(--line-light);border-radius:3px;padding:2.2rem}
.contatti__card p{color:rgba(245,240,231,.85);margin-bottom:.7rem}
.contatti__card strong{color:var(--white-warm);font-family:var(--disp);font-size:1.2rem;display:block;margin-bottom:.3rem}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:#0e0e0e;color:rgba(245,240,231,.68);padding:clamp(3rem,7vw,4.5rem) 0 2rem}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.4rem}
.footer__brand .nav__logo{color:var(--white-warm);font-size:1.3rem}
.footer__brand p{margin-top:1rem;font-size:.9rem;max-width:34ch;line-height:1.7}
.footer__col h4{font-family:var(--disp);font-size:1.05rem;color:var(--gold);margin-bottom:1rem;font-weight:500}
.footer__col a,.footer__col span{display:block;font-size:.88rem;margin-bottom:.55rem;transition:color .3s}
.footer__col a:hover{color:var(--white-warm)}
.footer__bar{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.6rem;padding-top:1.5rem;
  border-top:1px solid var(--line-light);font-size:.72rem;letter-spacing:.03em}
.footer__legal a{border-bottom:1px solid transparent}
.footer__legal a:hover{border-color:currentColor}
.footer__legal span{margin:0 .5rem;opacity:.5}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .nav__links,.nav__end{display:none}
  .nav__burger{display:flex}
  .servizi__grid{grid-template-columns:repeat(2,1fr)}
  .metodo__grid{grid-template-columns:repeat(2,1fr)}
  .step{border-left:none;border-top:1px solid var(--line-light);padding-top:2rem}
  .step:nth-child(odd){border-left:none}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .chisono__grid,.ostia__grid,.dove__grid,.contatti__grid{grid-template-columns:1fr}
  .chisono__photos{order:-1;display:flex;gap:1rem;margin-bottom:.5rem}
  .chisono__media{aspect-ratio:1/1;flex:1}
  .chisono__media--sm{position:relative;left:0;bottom:0;width:38%;aspect-ratio:1/1;border-width:4px;align-self:flex-end}
  .ostia__media{order:-1;aspect-ratio:16/10}
  /* su schermi stretti il testo dell'hero arriva fino in fondo:
     l'indicatore "Scorri" finirebbe sopra i pulsanti */
  .scrub__cue{display:none}
}
@media (max-width:560px){
  .servizi__grid{grid-template-columns:1fr}
  .metodo__grid{grid-template-columns:1fr}
  .step{border-left:none!important;border-top:1px solid var(--line-light);padding-top:1.8rem}
  .footer__grid{grid-template-columns:1fr}
  .hero__cta{gap:1rem}
  .hero__cta .btn{width:100%}
  .contatti__cta .btn{width:100%}
  .closer__cta{gap:1rem}
  .closer__cta .btn{width:100%}
}
@media (min-width:2000px){body{font-size:1.08rem}.wrap{max-width:1440px}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  /* con "riduci movimento" il video resta fermo sul poster */
  .scrub__cue{display:none}
}

/* ============================================================
   PAGINE LEGALI (privacy / cookie)
   ============================================================ */
.nav--legal{position:sticky;background:var(--cream);color:var(--ink);
  box-shadow:0 1px 0 var(--line);padding-top:1.1rem;padding-bottom:1.1rem}
.nav--legal .nav__logo{color:var(--ink)}
.nav--legal .nav__book{border-color:var(--ink);color:var(--ink)}
.nav--legal .nav__book:hover{background:var(--ink);color:var(--cream)}

.legal{background:var(--cream);padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem)}
.legal__wrap{width:100%;max-width:780px;margin:0 auto;padding:0 var(--pad)}
.legal h1{font-size:clamp(2.1rem,5vw,3.2rem);margin:.8rem 0 .6rem}
.legal h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:2.6rem 0 .9rem;
  padding-top:1.4rem;border-top:1px solid var(--line)}
.legal h3{font-size:1.02rem;font-family:var(--ui);font-weight:600;letter-spacing:.02em;
  margin:1.6rem 0 .6rem;color:var(--ink)}
.legal p{color:var(--ink-soft);margin-bottom:.9rem;max-width:none}
.legal a{color:var(--gold-dark);border-bottom:1px solid rgba(197,161,93,.45)}
.legal a:hover{color:var(--ink);border-color:var(--ink)}
.legal__updated{font-size:.82rem;letter-spacing:.04em;color:var(--ink-soft);
  margin-bottom:2rem!important}

/* riquadro "bozza da completare" — da togliere quando il testo è definitivo */
.legal__todo{background:#FFF6E0;border:1px solid var(--gold);border-left-width:3px;
  border-radius:3px;padding:1.1rem 1.3rem;margin-bottom:2.2rem;
  font-size:.9rem;line-height:1.6;color:var(--ink)}
.legal__ph{background:rgba(197,161,93,.22);border-bottom:1px dashed var(--gold-dark);
  padding:.05em .35em;border-radius:2px;color:var(--gold-dark);font-weight:600;
  white-space:nowrap}
.legal__hint{font-size:.86rem;font-style:italic;background:var(--white-warm);
  border-left:2px solid var(--gold);padding:.7rem 1rem;border-radius:2px}
.legal__highlight{background:var(--white-warm);border-left:2px solid var(--gold);
  padding:1rem 1.2rem;border-radius:2px;font-size:1.02rem;color:var(--ink)!important}

.legal__table{width:100%;border-collapse:collapse;margin:1.1rem 0 1.4rem;font-size:.9rem}
.legal__table th,.legal__table td{text-align:left;vertical-align:top;
  padding:.75rem .9rem;border:1px solid var(--line)}
.legal__table th{background:var(--cream-2);font-family:var(--ui);font-weight:600;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.legal__table td{color:var(--ink-soft)}

.legal__list{margin:.6rem 0 1rem 1.2rem;color:var(--ink-soft)}
.legal__list li{margin-bottom:.4rem}
.legal__back{margin-top:2.8rem;padding-top:1.6rem;border-top:1px solid var(--line)}

@media (max-width:560px){
  .legal__table,.legal__table tbody,.legal__table tr,.legal__table td{display:block;width:100%}
  .legal__table thead{display:none}
  .legal__table tr{margin-bottom:.9rem;border:1px solid var(--line);border-radius:3px;overflow:hidden}
  .legal__table td{border:none;border-bottom:1px solid var(--line)}
  .legal__table td:last-child{border-bottom:none}
}