:root{
  --blue:#0d5fb8;
  --text:#17202a;
  --muted:#6b7280;
  --white:#fff;
  --maxw:1200px;
  --topbar-h:50px;
  --header-h:86px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --slide-delay:5600ms;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:var(--text)}
body{font-family:Montserrat,system-ui,Segoe UI,Roboto,Helvetica,Arial}

/* ==== Topbar (blu) ==== */
.topbar{
  position:fixed; top:0; left:0; right:0; height:var(--topbar-h);
  background:var(--blue); display:flex; align-items:center; justify-content:flex-end; gap:14px;
  padding:0 16px; z-index:1000; transition:transform .36s var(--ease), opacity .36s var(--ease);
}
.topbar.is-hidden{ transform:translateY(-100%); opacity:.0; }
.numeroVerde{height:34px; width:auto; display:block}
.wrapper{display:flex; gap:.5rem; align-items:center}
.share{ width:32px; height:32px; display:grid; place-items:center; border-radius:50%; color:#eef4ff;
  background:rgba(255,255,255,.1); box-shadow:0 1px 6px rgba(0,0,0,.08);
  transition:transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.share:hover{ transform:scale(1.06); background:rgba(255,255,255,.18); box-shadow:0 6px 16px rgba(0,0,0,.12)}
.svg--icon{width:18px;height:18px;display:block;fill:currentColor}

/* ==== Header (desktop) ==== */
.site-header{
  position:fixed; left:0; right:0; top:var(--topbar-h); height:var(--header-h);
  z-index:900; display:flex; align-items:flex-start; background:transparent;
  transition:background .32s var(--ease), box-shadow .32s var(--ease), top .32s var(--ease);
}
.site-header.stuck{ top:0; }
.site-header.solid,
.site-header.hovered{ background:#fff; box-shadow:0 10px 24px rgba(0,0,0,.06) }

.header-wrap{max-width:var(--maxw); margin:0 auto; padding:0 18px; width:100%; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between}

.logo img{height:154px; width:auto; display:block}

.nav{display:flex; gap:34px; align-items:center}
.nav > a,
.nav > .nav-item > span{
  text-decoration:none; color:#222; letter-spacing:.28em;
  font-weight:300; font-size:0.9rem; cursor:pointer;
  transition:color .2s var(--ease);
}
.site-header:not(.solid):not(.hovered) .nav > a,
.site-header:not(.solid):not(.hovered) .nav > .nav-item > span{ color:#f1f5f9 }

.nav-item{ position:relative }
.nav-item .submenu{
  position:absolute; top:calc(100% + 18px); left:0; width:340px;
  background:#fff; border:1px solid #e5e7eb; box-shadow:0 16px 48px rgba(0,0,0,.12);
  border-radius:4px; padding:14px; display:none;
}
.nav-item:hover .submenu{ display:block }
.submenu a{ display:block; padding:10px 12px; color:#222; text-decoration:none; border-radius:4px }
.submenu a:hover{ background:#f5f7fb }

/* lineetta sotto alla label */
.nav-item > span{ position:relative }


/* hover + stato aperto: testo più scuro e linea visibile */
.nav-item:hover > span,
.nav-item.open  > span{ color:#000; }
.nav-item:hover > span::after,
.nav-item.open  > span::after{ transform:scaleX(1); }

/* dropdown: riga nera quanto la label, non tutta la larghezza */

.nav-item .submenu::before{
  content:""; position:absolute; top:-2px; left:0; height:2px;
  width:var(--subline-w, 0px); background:#111;
}

.nav-item:hover .submenu,
.nav-item.open  .submenu{ display:block; }



/* ===== Dropdown desktop: transizione morbida + ponte anti-gap ===== */
.nav-item { position:relative; }
.nav-item .submenu{
  position:absolute; left:0; top:100%;
  margin-top:18px; width:340px;
  background:#fff; border:1px solid #e5e7eb;
  box-shadow:0 16px 48px rgba(0,0,0,.12);
  border-radius:4px; padding:14px; z-index:1300;

  /* transizione fluida */
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
}
/* riga nera in cima larga quanto la label (impostata via JS con --subline-w) */
.nav-item .submenu::before{
  content:""; position:absolute; top:-2px; left:0; height:2px; width:var(--subline-w,0px); background:#111;
}
/* ponte invisibile per non perdere l’hover tra label e sottomenu */
.nav-item .submenu::after{
  content:""; position:absolute; left:0; right:0; top:-18px; height:18px; background:transparent;
}

/* stato aperto su hover */
.nav-item:hover > .submenu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}

/* ==== Burger + Mobile Nav ==== */
.burger{display:none; border:0; background:transparent; padding:10px; margin-left:-6px; cursor:pointer}
.burger span{display:block; width:24px; height:2px; background:#111; margin:5px 0; transition:transform .3s var(--ease)}
.site-header:not(.solid):not(.hovered) .burger span{ background:#f1f5f9 }

.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(90vw,480px);
  background:#fff; transform:translateX(100%);
  transition:transform .35s var(--ease);
  z-index:1800; /* ↑ sopra il backdrop */
  box-shadow:-16px 0 40px rgba(0,0,0,.18);
}
.mobile-nav.open{ transform:translateX(0) }
.mobile-head{ display:flex; justify-content:flex-end; padding:16px }
.close-mobile{ border:0; background:transparent; font-size:26px; cursor:pointer; }
.m-list{ list-style:none; margin:0; padding:0 16px 22px }
.m-list > li{ border-bottom:1px solid #e9ecef }
.m-list a, .m-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%; text-decoration:none; background:transparent; border:0; padding:18px 0; color:#111; font-family:"Cormorant Garamond",serif; letter-spacing:.23em; font-size:1.05rem }
.m-toggle span{ display:inline-block; transition:transform .2s var(--ease) }
.m-group.open .m-toggle span{ transform:rotate(90deg) }
.m-sub{ list-style:none; padding:0 0 12px 0; margin:0; display:none }
.m-group.open .m-sub{ display:block }
.m-sub a{ font-family:Montserrat; letter-spacing:normal; padding:10px 0; font-size:.98rem; color:#333 }

/* backdrop per click-fuori del menu mobile */
.mobile-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
  z-index:100; /* ↓ sotto al pannello */
}
.mobile-backdrop.show{ opacity:1; pointer-events:auto; }

/* sicurezza: sempre cliccabile */
.mobile-nav, .mobile-nav * { pointer-events:auto; }

/* ==== Cerca panel ==== */
.search-btn{border:0;background:transparent; cursor:pointer; padding:8px; border-radius:10px; color:#111}
.site-header:not(.solid):not(.hovered) .search-btn{ color:#f1f5f9 }

.search-panel{
  position:absolute; top:100%; left:0; right:0; border-top:1px solid rgba(255,255,255,.4);
  background:transparent; transition:background .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
  transform-origin:top; transform:scaleY(0); z-index:50;
}
.search-panel.open{ transform:scaleY(1) }
/* quando header bianco -> anche cerca bianco */
.site-header.solid .search-panel,
.site-header.hovered .search-panel{ background:#fff; border-top-color:#eee }
.search-inner{ max-width:var(--maxw); margin:0 auto; padding:16px 18px 26px }
.search-row{ display:flex; align-items:center; gap:12px; border-bottom:1px solid #e5e7eb; padding-bottom:14px }
.search-row input{ flex:1; font-size:1.3rem; border:0; outline:0; padding:10px 0; letter-spacing:.12em; background:transparent; }
.search-close{ border:0; background:transparent; font-size:22px; cursor:pointer }
.search-ico{ font-size:18px }
.results-title{ margin-top:18px; font-size:.9rem; letter-spacing:.35em; color:#666 }
#resultsList{ list-style:none; margin:10px 0 0; padding:0 }
#resultsList li a{ display:block; padding:10px 0; color:#111; text-decoration:none }
#resultsList li a:hover{ text-decoration:underline }

/* quando header TRASPARENTE: testi/placeholder bianchi */
.site-header:not(.solid):not(.hovered) .search-row{ border-bottom:1px solid rgba(255,255,255,.35) }
.site-header:not(.solid):not(.hovered) .search-row input{ color:#fff }
.site-header:not(.solid):not(.hovered) .search-row input::placeholder{ color:rgba(255,255,255,.75) }
.site-header:not(.solid):not(.hovered) .results-title{ color:#eee }
.site-header:not(.solid):not(.hovered) #resultsList li a{ color:#fff }

/* ==== Hero / Carousel ==== */
.hero{ position:relative; height:72vh; min-height:520px; overflow:hidden }
.slides{ position:absolute; inset:0; }
.slide{
  position:absolute; inset:0; opacity:0; transform:scale(1.03);
  transition:opacity .8s var(--ease), transform 1.4s var(--ease);
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
.slide::before{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.36), rgba(0,0,0,.36)); }
.slide.is-active{ opacity:1; transform:scale(1) }

.hero-content{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#fff; padding:0 16px }
.hero h1{
  margin:0 0 18px; color:#fff; font-family:"Cormorant Garamond",serif;
  font-weight:300; letter-spacing:.35em; text-transform:uppercase; font-size:clamp(28px,3.2vw,56px);
}

/* CTA con riempimento morbido */
.cta-btn{
  position:relative; display:inline-block; padding:14px 28px; border:2px solid #fff; color:#fff;
  background:transparent; border-radius:4px; text-decoration:none; letter-spacing:.20em; text-transform:uppercase; font-weight:600;
  overflow:hidden; transition:color .48s var(--ease), border-color .48s var(--ease);
}
.cta-btn::before{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,.96);
  transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease);
}
.cta-btn > span{ position:relative; z-index:1 }
.cta-btn:hover{ color:#111; border-color:transparent }
.cta-btn:hover::before{ transform:scaleX(1) }

/* Dots con progresso fluido */
.dots{ position:absolute; right:26px; bottom:24px; display:flex; gap:12px; z-index:5; }
.dot{
  position:relative; width:16px; height:16px; border:0; padding:0; cursor:pointer; background:rgba(255,255,255,.28); border-radius:50%;
  display:inline-grid; place-items:center; transition:transform .25s var(--ease), filter .25s; filter:drop-shadow(0 1px 3px rgba(0,0,0,.22));
}
.dot:hover{ transform:scale(1.08) }
.dot svg{ position:absolute; inset:0; width:16px; height:16px; transform:rotate(-90deg); }
.dot .track{ stroke:rgba(255,255,255,.35); stroke-width:2; fill:none; }
.dot .ring{ stroke:#fff; stroke-width:2; fill:none; stroke-dasharray:44; stroke-dashoffset:44; transition:stroke-dashoffset var(--slide-delay) linear; }
.dot.running .ring{ stroke-dashoffset:0 }

/* contenuto */
.pad-after-hero{ height: calc(var(--topbar-h) + var(--header-h)) }
.section{padding:56px 0}
.wrap{max-width:var(--maxw); margin:0 auto; margin-top:-90px; padding:0 18px}
.grid{display:grid; gap:20px}
@media (min-width:900px){ .grid.cols-3{ grid-template-columns:repeat(3,1fr) } }

.card{border:1px solid #eee; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 10px 24px rgba(0,0,0,.04)}
.card img{width:100%;height:180px;object-fit:cover;display:block}
.card .p{padding:14px}
.card h3{margin:0 0 6px;font-size:1.05rem}
.card p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.45}

/* responsive */
@media (max-width:980px){
  .nav{display:none}
  .burger{display:block}
}
.site-footer{background:#0b0f19;color:#fff;padding:24px 0;margin-top:28px}



/* ===== Mobile: root -> subview (titolo + back) con fade/slide morbido ===== */
.mobile-nav{ overflow:hidden; } /* evita scroll orizzontali */

.m-overlay{
  position:relative; height:calc(100vh - 56px); /* sotto la testata mobile */
}

.m-view{
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
  transform:translateY(10px);
  transition:opacity .28s var(--ease), transform .28s var(--ease);
  background:#fff;
  padding:0 16px 22px;
}
.m-view.active{
  opacity:1; pointer-events:auto; transform:translateY(0);
}

/* subview: barra superiore */
.m-subhead{
  display:flex; align-items:center; gap:12px;
  padding:8px 4px 16px;
}
.m-back{
  border:0; background:transparent; font-size:22px; line-height:1;
  cursor:pointer; padding:6px 8px;
}
.m-subtitle{
  font-family:"Cormorant Garamond", serif;
  letter-spacing:.23em; font-size:1.02rem; color:#555;
}

/* lista voci dentro la subview */
.m-sublist{ list-style:none; margin:0; padding:0; }
.m-sublist li a{
  display:block; padding:16px 0; color:#111; text-decoration:none;
  border-bottom:1px solid #ececec; letter-spacing:.18em;
}

/* la tua root list resta identica (m-list / m-toggle); nessuna modifica */


/* ===== Mobile views: SOLO la vista .active prende i click ===== */
.m-overlay{ position:relative; height:calc(100vh - 56px); overflow:auto; }
.m-view{
  position:absolute; inset:0;
  opacity:0; visibility:hidden; pointer-events:none;     /* <— qui la magia */
  transform:translateY(10px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s var(--ease);
  background:#fff;
  padding:0 16px 22px;
  z-index:0;
}
.m-view.active{
  opacity:1; visibility:visible; pointer-events:auto;    /* <— clic abilitati solo qui */
  transform:translateY(0);
  z-index:1;
}


/* ===== Dropdown desktop: cross-fade morbido tra voci ===== */
.nav-item { position:relative; }

/* stato base nascosto */
.nav-item .submenu{
  position:absolute; left:0; top:100%;
  margin-top:18px; width:340px;
  background:#fff; border:1px solid #e5e7eb;
  box-shadow:0 16px 48px rgba(0,0,0,.12);
  border-radius:4px; padding:14px; z-index:1300;

  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(6px);
  transition:
    opacity .48s cubic-bezier(.25,.8,.25,1),
    transform .48s cubic-bezier(.25,.8,.25,1),
    visibility .48s cubic-bezier(.25,.8,.25,1);
}

/* riga nera larga quanto la label (settata dal JS) */
.nav-item .submenu::before{
  content:""; position:absolute; top:-2px; left:0; height:2px;
  width:var(--subline-w,0px); background:#111;
}

/* ponte anti-gap tra label e menu */
.nav-item .submenu::after{
  content:""; position:absolute; left:0; right:0; top:-18px; height:18px; background:transparent;
}

/* voce attualmente aperta */
.nav-item.open > .submenu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}

/* voce che sta chiudendosi (resta qualche ms per il fade-out) */
.nav-item.closing > .submenu{
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(4px);
  /* durata di uscita un filo più lunga per eleganza */
  transition-duration:.6s,.6s,.6s;
}





/* ===== Categorie (griglia) ===== */
.catgrid{
  --cols: 8;
  background: no-repeat center/100% var(--bg-img, none);
  display:grid; grid-template-columns: repeat(var(--cols),1fr);
  gap:1.1rem; padding:1rem;
}
.catgrid[data-bg]{ --bg-img: attr(data-bg url); }

.catbox{ position:relative; background:#fff; border:2px solid #3172B7; border-radius:10px;
  overflow:hidden; display:flex; flex-direction:column; height:280px; text-decoration:none; color:#111;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.catbox:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.15) }

.catbox__img{ height:200px; display:flex; align-items:center; justify-content:center; background:#fff; overflow:hidden }
.catbox__img img{ width:100%; height:100%; object-fit:cover; transition:opacity .35s var(--ease) }

.catbox__label{ background:#3172B7; color:#fff; padding:10px 12px; text-align:center; flex:1; display:grid; place-items:center }
.catbox__label h3{ margin:0; font-size:1rem; font-weight:700; }
.catbox__label p{ margin:2px 0 0; font-size:.78rem; opacity:.95 }

.catbox__hover{ position:absolute; left:5%; right:5%; bottom:16px; background:rgba(0,0,0,.72); color:#fff;
  padding:10px; border-radius:6px; opacity:0; transform:translateY(8px); transition:.35s var(--ease);
}
.catbox:hover .catbox__img img{ opacity:.1 }
.catbox:hover .catbox__hover{ opacity:1; transform:translateY(0) }

/* responsive catgrid */
@media (max-width:1200px){ .catgrid{ --cols:6 } }
@media (max-width:992px){ .catgrid{ --cols:4 } }
@media (max-width:768px){
  .catgrid{ --cols:2 }
  .catbox{ height:250px }
  .catbox__img{ height:60% }
  .catbox__hover{ display:none } /* su mobile mostriamo solo titolo */
}

/* ===== Due colonne testo/immagine ===== */
.two-col{ display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; align-items:center }
.two-col__text p{ margin:0 0 10px; line-height:1.6 }
.two-col__media img{ width:100%; height:auto; display:block; border-radius:10px }
.tt-center{text-align:center}
.tt-upper{text-transform:uppercase; letter-spacing:.22em}
.tt-over{ text-transform:uppercase; letter-spacing:.35em; font-size:.85rem; color:#666; text-align:center; margin-bottom:6px }
.tt-red{ color:#d00000 }
.divider-red{ border:0; border-top:1px solid #d00000; margin:10px 0 20px;   width:100vw;          /* sempre quanto la viewport */
  margin:10px 0;        /* spazio sopra/sotto */
  margin-left:50%;
  transform:translateX(-50%);}

@media (max-width:900px){
  .two-col{ grid-template-columns:1fr; }
  .two-col__media{ order:-1 }
}

/* ===== Strip YouTube ===== */
.yt-strip{ display:flex; gap:12px; overflow-x:auto; padding:10px; scroll-snap-type:x mandatory }
.yt-strip iframe{ flex:0 0 calc(50% - 6px); height:315px; border:0; scroll-snap-align:start; border-radius:10px }
@media (max-width:768px){
  .yt-strip iframe{ flex:0 0 100%; height:220px }
}

/* Bottoncino “vai al canale” (stile richiesto) */
.button-54{font-family: "Open Sans", sans-serif; font-size:16px; letter-spacing:2px; text-transform:uppercase; color:#000;
  border:3px solid; padding:.25em .75em; box-shadow:1px 1px 0,2px 2px 0,3px 3px 0,4px 4px 0,5px 5px 0; position:relative}
.button-54:active{ box-shadow:0 0 0; top:5px; left:5px }

/* ===== Prima/Dopo ===== */
.before-after{ position:relative; width:100%; aspect-ratio: 16/9; overflow:hidden; border-radius:10px }
.before-after .ba{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.before-after .ba--before{ clip-path: inset(0 50% 0 0); transition:clip-path .35s var(--ease) }
.before-after .ba-range{ position:absolute; inset:auto 0 0 0; width:100%; appearance:none; height:24px; background:transparent; cursor:ew-resize }
.before-after .ba-handle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; color:#111; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.25) }
.before-after::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; background:rgba(255,255,255,.8); transform:translateX(-50%) }

/* ===== Loghi ===== */
.section--light{ background:#f8fafc }
.logos-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; align-items:center; justify-items:center; padding:12px 0 }
.logos-grid img{ max-width:220px; width:100%; height:auto; filter:grayscale(0); opacity:.95 }
.logos-grid--8{ grid-template-columns:repeat(4,1fr) }
@media (max-width:900px){ .logos-grid, .logos-grid--8{ grid-template-columns:repeat(2,1fr) } }

/* ===== Fade-out dei submenu su desktop (uscita lenta) ===== */
.nav-item .submenu{
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s step-end;
}
.nav-item:hover .submenu,
.nav-item.open .submenu{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility 0s step-start;
}
/* ===== Titoli sezione ===== */
.section-title{
  font-family:"Cormorant Garamond",serif;
  text-transform:uppercase;
  letter-spacing:.32em;
  text-align:center;
  margin-top: 0;
  font-weight:300;
}
.section-title.blue{ color:#2f61b7 }
.section-title.red{ color:#c61a18 }
.section-title.spaced{ letter-spacing:.35em }
.section-overline{
  text-align:center; color:#666; letter-spacing:.35em;
  font-family:"Cormorant Garamond",serif; text-transform:uppercase;
  margin:0 0 6px; font-size:.9rem;
}
.section-overline.small{ font-size:.8rem; color:#7a7a7a }

/* ===== Griglia servizi (sfondo logo + hover “amianto”) ===== */
.services-grid{ position:relative }
.services-bg{
  position:absolute; inset:0;
  background:url("../img/LgoTrasparente.png") center/60% no-repeat;
  opacity:.06; pointer-events:none;
}
.services{ list-style:none; margin:0; padding:0; display:grid; gap:18px }
@media (min-width:700px){ .services{ grid-template-columns:repeat(4,1fr) } }
@media (min-width:1100px){ .services{ grid-template-columns:repeat(8,1fr) } }

.service-card{ border-radius:12px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.08); background:#fff }
.service-link{ display:block; text-decoration:none; color:inherit }
.service-fig{ position:relative; margin:0; height:100% }
.service-fig img{ width:100%; height:200px; object-fit:cover; display:block; }
.service-fig figcaption{
  background:#2f61b7; color:#fff; text-align:center; padding:12px 10px;
}
.service-fig h3{ margin:0 0 4px; font-size:1.05rem }
.service-fig p{ margin:0; font-size:.9rem; opacity:.95 }

/* overlay opaco + box scuro */
.service-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.0);
  opacity:0; transition:opacity .35s var(--ease), background .35s var(--ease);
}
.service-card:hover .service-overlay{ opacity:1; background:rgba(0,0,0,.55); }
.service-overlay .overlay-box{
  max-width:86%; color:#fff; text-align:center; padding:16px 14px; border-radius:12px;
  background:rgba(25,25,25,.85);
}
.service-overlay .overlay-box h4{ margin:0 0 10px; letter-spacing:.25em }
.show-on-hover{ opacity:0 } /* amianto: sparisce tutto e resta overlay */

.service-card:hover img{ filter:grayscale(.1) opacity(.8) }
.service-card:hover figcaption{ filter:blur(4px); opacity:.0; transition:opacity .25s }

/* ===== Split testo+immagine ===== */
.about-split{ display:grid; gap:24px; align-items:center }
@media (min-width:900px){ .about-split{ grid-template-columns:1.15fr .85fr } }
.about-text p{ line-height:1.7 }
.about-subtitle{
  font-family:"Cormorant Garamond",serif; letter-spacing:.35em; text-transform:uppercase;
  margin:16px 0 8px; font-weight:400;
}
.about-ul{ padding-left:18px; line-height:1.6 }
.about-picture img{ width:100%; height:auto; display:block; border-radius:4px }

/* ===== YouTube ===== */
.youtube-section{ background:#f2f3f5 }
.video-container{
  display:flex; gap:10px; overflow-x:auto; padding:10px; scroll-behavior:smooth;
}
.video-container iframe{ flex:0 0 auto; width:calc(50% - 10px); height:315px; border:none }
@media (max-width:768px){ .video-container iframe{ width:100%; height:220px } }
.yt-cta{ text-align:center; margin-top:10px }

/* ===== Prima & Dopo (slider senza delay) ===== */
.beforeafter-section{ background:#fff }
.before-after{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:6px; overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.ba-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.ba-after{ clip-path:inset(0 0 0 50%) }      /* metà destra visibile */
.ba-divider{
  position:absolute; top:0; bottom:0; left:50%; width:2px; background:rgb(255, 255, 255);
  box-shadow:0 0 0 1px rgba(0,0,0,.15) inset;
}
.ba-handle{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid rgba(0,0,0,.2);
  box-shadow:0 8px 16px rgba(0,0,0,.18); cursor:ew-resize;
}
/* Frecce nel knob del before/after */
.ba-handle::before,
.ba-handle::after{
  content:"";
  position:absolute;
  width:10px;                 /* lunghezza braccio freccia */
  height:10px;
  border-top:2px solid #111;  /* colore frecce */
  border-right:2px solid #111;
  transform:rotate(45deg);
  pointer-events:none;
}

/* freccia sinistra */
.ba-handle::before{
  left:12px;
  transform:rotate(-135deg);
}

/* freccia destra */
.ba-handle::after{
  right:12px;
  transform:rotate(45deg);
}

/* opzionale: piccolo effetto al passaggio */
.ba-handle:hover{
  transform:translate(-50%,-50%) scale(1.06);
}



.about{ background:#fff; }
.about .tight{ letter-spacing:.16em }
.about-wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 18px 40px;
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap:36px; align-items:center;
}
.about-text{ order:1; font-family: Montserrat, system-ui; line-height:1.9; font-size:1.05rem; color:#24262a; }
.about-text strong{ font-weight:700 }
.about-text ul{ margin:10px 0 12px 18px; padding-left:10px }
.about-text li{ margin:6px 0 }
.about-text .subtle{
  font-family:"Cormorant Garamond", serif; letter-spacing:.28em; font-weight:400;
  margin:20px 0 8px; font-size:1.25rem; color:#222; border-bottom:2px solid #222; display:inline-block; padding-bottom:6px;
}
.about-media{ order:2; }
.about-media img{ display:block; width:100%; height:auto; border-radius:8px; }

@media (max-width: 900px){
  .about-wrap{ grid-template-columns:1fr; }
  .about-media{ order:1; }
  .about-text{ order:2; font-size:1rem; }
  .section-title{ margin-bottom:6px }
}