@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400&family=Lobster+Two:wght@400;700&family=Norican&family=Cookie&display=swap");

@font-face{
  font-family:"Peaches and Cream";
  src:url("assets/fonts/peaches-and-cream-regular.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --font-body:"Work Sans", "Helvetica Neue", Arial, sans-serif;
  --font-script:"Peaches and Cream", "Peaches & Cream", "Lobster Two", "Brush Script MT", "Segoe Script", cursive;
  --font-avenir:"Avenir Light", "Avenir Next", "Avenir", "Work Sans", Arial, sans-serif;
  --gold:#b99552;
  --menu:#ece7df;
  --page-gray:#eef0f1;
  --section-gray:#f0f1f2;
  --text:#3f3f3f;
  --muted:#777;
  --max:840px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:var(--text);font-family:var(--font-body);font-size:16px;font-weight:200;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
.narrow{width:min(var(--max),calc(100% - 32px));margin:0 auto}

.site-header{background:#fff}
.header-inner{width:min(840px,calc(100% - 32px));height:152px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding-top:2px}
.brand{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.brand-clivma{width:88px;height:auto}
.brand-soa{width:130px;height:auto}
.main-nav{display:flex;align-items:center;gap:12px;margin-left:44px}
.main-nav a{padding:15px 23px;font-size:17px;line-height:1;color:#555;white-space:nowrap;font-weight:300}
.main-nav a.active{background:var(--menu)}
.nav-toggle{display:none;background:transparent;border:0;font-size:31px;color:#555}

.hero-block{display:grid;grid-template-columns:61.5% 38.5%;align-items:stretch}
.hero-image-wrap{position:relative;min-height:850px;overflow:hidden}
.hero-image-wrap>img:first-child{width:100%;height:100%;object-fit:cover;object-position:center top}
.hero-text{background:#eceeef;text-align:center;padding:24px 16px 20px}
.hero-text h1,.portfolio-wrap h1,.simple-page h1,.cappotto-section h2,.services-grid h2{margin:0;color:var(--gold);font-family:var(--font-script);font-weight:400;line-height:1.04}
.hero-text h1{font-size:36px;margin-bottom:31px;font-weight:400;letter-spacing:-.4px;line-height:.98}
.hero-text p{font-family:var(--font-body);font-size:26px;line-height:1.43;margin:0;color:#2f2f2f;font-weight:200;letter-spacing:-.2px}
.portfolio-label{position:absolute;right:112px;bottom:230px;display:inline-block;border:3px solid #111;padding:7px 32px 8px;background:rgba(255,255,255,.25);font-family:var(--font-script);font-size:29px;color:#111;line-height:1;transition:background .18s ease,color .18s ease}
.portfolio-label:hover{background:#111;color:#fff}
.hero-hand-icon{position:absolute;right:153px;bottom:157px;width:52px;height:auto;pointer-events:none}
.cert-badge{position:absolute;left:24px;bottom:100px;width:92px;height:92px;border-radius:50%;background:rgba(170,174,181,.65);color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:12px;font-style:italic;line-height:1.1;clip-path:polygon(50% 0%,60% 9%,72% 5%,79% 17%,91% 20%,88% 34%,100% 45%,91% 55%,95% 68%,82% 75%,78% 89%,63% 87%,50% 100%,38% 90%,24% 94%,18% 80%,5% 73%,10% 58%,0 48%,10% 38%,6% 24%,21% 18%,27% 5%,40% 10%)}
.cert-badge strong{font-size:12px;color:#3b82c4;margin-top:5px}
.home-carousel{border:3px solid #111;border-top:0;overflow:hidden;background:#000}
.carousel-stage{position:relative;width:100%;height:360px;overflow:hidden;background:#000}
.carousel-slide{position:absolute;inset:0;width:108%;max-width:none;height:100%;object-fit:cover;object-position:center;opacity:0;transform:translateX(6%);transition:opacity 1200ms ease,transform 1200ms ease}
.carousel-slide.active{opacity:1;transform:translateX(0);animation:cameraPanLeft 7s linear forwards}
.carousel-stage.is-paused .carousel-slide.active{animation-play-state:paused}
.carousel-toggle{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);z-index:3;width:42px;height:25px;border:1px solid rgba(255,255,255,.85);background:rgba(0,0,0,.42);color:#fff;font-size:13px;line-height:1;cursor:pointer;font-family:Arial,sans-serif}
.carousel-toggle:hover{background:rgba(0,0,0,.75)}
@keyframes cameraPanLeft{from{transform:translateX(0)}to{transform:translateX(-7.4%)}}

.services-section{background:var(--section-gray);margin-top:25px;padding:43px 0 0}
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start}
.services-grid h2{font-size:34px;text-align:center;margin-bottom:18px}
.services-grid .black-script{color:#111;text-align:left;padding-left:20px}
.service-img{height:292px;width:100%;object-fit:cover;object-position:center}
.service-copy{background:#fff;padding:8px 36px 0;text-align:center;font-size:21px;line-height:1.46;min-height:292px;color:#333;font-weight:200}
.media-row{margin-top:0;display:flex;justify-content:center;background:#fff}
.media-row video{width:840px;height:300px;background:#000;object-fit:contain}
.cappotto-section{padding:52px 0 92px}
.cappotto-section h2{text-align:center;font-size:33px;margin-bottom:36px}
.cappotto-grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.cappotto-copy{background:var(--section-gray);padding:38px 29px;font-family:var(--font-avenir);font-size:15px;line-height:1.72;color:#898989;font-weight:300}
.cappotto-grid img{width:100%;height:100%;object-fit:cover}

.portfolio-page{background:var(--page-gray);min-height:calc(100vh - 152px)}
.portfolio-wrap{width:min(1080px,calc(100% - 40px));margin:0 auto;text-align:center;padding:20px 0 0}
.portfolio-wrap h1{font-size:42px;margin:0 0 48px}
.map-box{position:relative;width:1000px;max-width:100%;margin:0 auto;background:#fff;border:0;box-shadow:none}
.map-box>img{width:100%;height:auto}
.map-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:2;width:34px;height:44px;display:block;background:transparent;border-radius:50%;cursor:pointer;overflow:visible}
.pin-hitbox{position:absolute;top:-6px;left:-28px;width:88px;height:56px;background:transparent}
.map-pin.pin-left .pin-hitbox{left:-8px;width:88px}
.map-pin.pin-right .pin-hitbox{left:-78px;width:88px}
.pin-dot,.pin-label{display:none}
.map-note{font-size:26px;margin:32px 0 0;color:#111;line-height:1.2;font-weight:300}

.project-page{min-height:calc(100vh - 152px);padding-top:44px}
.project-view{width:min(900px,calc(100% - 32px));margin:0 auto;text-align:center}
.back-link{display:none}
.gallery-frame{position:relative;width:min(850px,100%);height:610px;margin:0 auto;background:#fff;display:flex;align-items:center;justify-content:center}
.gallery-frame img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(255,255,255,.68);font-size:62px;line-height:1;color:#333;width:60px;height:80px;cursor:pointer}
.gallery-arrow.prev{left:0}.gallery-arrow.next{right:0}
.project-view h1{font-size:22px;font-weight:300;margin:22px 0 8px;color:#333}.project-counter{font-size:13px;color:#888}

.simple-page{width:min(880px,calc(100% - 32px));margin:0 auto;text-align:center;min-height:650px;padding-top:45px}
.simple-page h1{font-size:47px;margin-bottom:24px}
.subtitle{font-size:20px;font-style:italic;margin:0 0 74px;color:#555;font-weight:300}
.clienti-logos{width:660px;max-width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:34px}
.clienti-logos .logo-edile{width:630px;max-width:100%}
.logo-row{display:flex;justify-content:center;align-items:center;gap:26px;width:100%}
.logo-row img{height:auto;object-fit:contain}
.logo-bruedil{width:300px}.logo-triaca{width:325px}.logo-norkos{width:310px}.logo-nardello{width:340px}.logo-vittadello{width:320px;margin-top:6px}
.partner-page{min-height:610px}.partner-card{width:735px;max-width:100%;background:var(--section-gray);margin:103px auto 0;padding:25px 40px 46px;position:relative}.partner-card:before{content:"";display:block;width:24px;height:3px;background:#111;margin:-40px auto 38px}.partner-card img{width:140px;height:140px;object-fit:contain;margin:0 auto 14px;border-radius:50%;background:#fff;padding:28px}.partner-card h2{font-family:Georgia,serif;font-size:16px;font-weight:300;font-style:italic;margin:0}.partner-card p{margin:58px 0 0;font-size:12px;color:#333}.contatti-page{min-height:720px}.contact-block{text-align:left;width:min(620px,100%);margin:40px auto 0;font-family:var(--font-avenir);font-size:16px;line-height:2.3;color:#666;font-weight:300}.contact-block p{margin:0 0 29px}

.site-footer{background:var(--section-gray);margin-top:0;color:#333}.footer-inner{width:min(735px,calc(100% - 32px));margin:0 auto;padding:43px 0 22px;display:flex;flex-wrap:wrap;gap:0 38px;justify-content:flex-start;font-family:var(--font-avenir);font-size:12px;line-height:1.6;font-weight:300}.footer-inner>div:first-child,.footer-inner>div:last-child{width:100%}.footer-inner>div:nth-child(2),.footer-inner>div:nth-child(3){width:auto}.footer-inner>div:last-child{margin-top:18px}.copyright{text-align:center;background:#fff;color:#aaa;font-family:var(--font-avenir);font-size:11px;padding:16px 0}body:not([data-page="home"]) .site-footer{background:#fff}body:not([data-page="home"]) .footer-inner{display:none}body:not([data-page="home"]) .copyright{padding:10px 0 15px}

.chat-button{position:fixed;right:25px;bottom:18px;background:#0789e8;color:#fff;border-radius:8px;padding:0 22px 0 18px;height:58px;display:inline-flex;align-items:center;gap:12px;font-size:18px;font-weight:400;z-index:50;box-shadow:0 3px 12px rgba(0,0,0,.18);border:0;cursor:pointer;font-family:var(--font-body)}
.chat-button-icon{position:relative;display:inline-block;width:24px;height:24px;background:#fff;border-radius:50%}
.chat-button-icon:before{content:"";position:absolute;left:6px;top:7px;width:11px;height:8px;border:2px solid #0789e8;border-top:none;border-left:none;border-right:none;border-radius:0 0 9px 9px}
.chat-button-icon:after{content:"";position:absolute;left:10px;bottom:5px;width:5px;height:5px;background:#0789e8;clip-path:polygon(0 0,100% 0,0 100%)}
.chat-button-label{display:inline-block;line-height:1}
.chat-panel{position:fixed;right:25px;bottom:94px;width:360px;max-width:calc(100vw - 32px);height:620px;max-height:calc(100vh - 120px);background:#fff;border-radius:7px;box-shadow:0 6px 28px rgba(0,0,0,.2);z-index:80;display:none;overflow:hidden;font-family:var(--font-body)}
.chat-panel.open{display:block}
.chat-head{height:78px;padding:22px 24px 8px;border-bottom:1px solid #eee;position:relative}
.chat-title{font-size:22px;color:#222;line-height:1;margin-bottom:8px;font-weight:300}
.chat-status{font-size:14px;color:#555}.chat-status:before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:#1bbb2a;margin-right:7px}
.chat-close{position:absolute;right:20px;top:25px;border:0;background:transparent;font-size:31px;line-height:1;cursor:pointer;color:#222;font-weight:200}
.chat-body{height:calc(100% - 78px - 62px);background:#c9c9c9;padding:18px 24px;overflow:auto}
.chat-thread{display:flex;flex-direction:column;gap:6px}
.chat-lead{margin-top:12px}
.chat-card{background:#fff;border-radius:8px;padding:18px 20px;margin-bottom:8px;color:#9a9a9a;font-size:16px;line-height:1.35}
.chat-form{background:#fff;border-radius:8px;padding:22px 20px;margin:8px 0 16px}
.chat-form input,.chat-form textarea{width:100%;border:0;border-bottom:1px solid #aaa;padding:12px 0 9px;margin-bottom:18px;font-family:var(--font-body);font-size:15px;outline:none;color:#555;background:transparent}
.chat-form textarea{resize:none;height:64px}
.chat-form button{width:100%;height:47px;border:0;border-radius:8px;background:#161616;color:#fff;font-size:15px;cursor:pointer}
.chat-bubble{margin-left:auto;background:#0789e8;color:#fff;border-radius:8px;padding:14px 18px;width:max-content;max-width:80%;font-size:15px}
.chat-sent{margin-left:auto;margin-top:2px;background:#fff;border-radius:4px;width:max-content;padding:6px 8px;font-size:12px;color:#777}
.chat-input{height:62px;display:flex;align-items:center;gap:12px;padding:0 16px;border-top:1px solid #eee;background:#fff}
.chat-text-input{flex:1;border:0;outline:none;font-family:var(--font-body);font-size:17px;color:#666;background:transparent}
.chat-text-input::placeholder{color:#9a9a9a;opacity:1}
.chat-send{width:36px;height:36px;border-radius:50%;border:0;background:#0789e8;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.chat-send:hover{background:#0677cb}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:100;display:none;align-items:center;justify-content:center}
.lightbox.open{display:flex}
.lightbox img{max-width:96vw;max-height:92vh;object-fit:contain}
.lightbox-close{position:absolute;right:28px;top:20px;background:transparent;border:0;color:#fff;font-size:45px;line-height:1;cursor:pointer}
.lightbox-arrow{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(255,255,255,.12);color:#fff;font-size:68px;width:76px;height:110px;cursor:pointer}
.lightbox-arrow.prev{left:20px}.lightbox-arrow.next{right:20px}
.gallery-frame img{cursor:zoom-in}

@media(max-width:800px){
  :root{--max:100vw}
  body{background:#fff;font-size:14px}
  .narrow{width:100%;max-width:none;margin:0 auto}

  .site-header{
    background:#fff;
    box-shadow:0 1px 8px rgba(0,0,0,.16);
    position:relative;
    z-index:20;
  }
  .header-inner{
    width:100%;
    height:73px;
    min-height:73px;
    padding:0 14px;
    align-items:center;
  }
  .brand{gap:10px}
  .brand-clivma{width:52px}
  .brand-soa{width:136px}
  .nav-toggle{
    display:block;
    font-size:31px;
    line-height:1;
    padding:4px 0;
    margin-left:auto;
    color:#111;
  }
  .main-nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:73px;
    margin:0;
    padding:0;
    background:#fff;
    z-index:30;
    border-top:1px solid #eee;
    box-shadow:0 4px 10px rgba(0,0,0,.12);
    flex-direction:column;
    gap:0;
  }
  .main-nav.open{display:flex}
  .main-nav a{
    width:100%;
    text-align:center;
    padding:15px 12px;
    font-size:16px;
    border-bottom:1px solid #eee;
  }

  /* Home mobile */
  .hero-block{display:block;width:100%}
  .hero-image-wrap{
    min-height:0;
    height:225px;
    width:100%;
  }
  .hero-image-wrap>img:first-child{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 18%;
  }
  .portfolio-label{
    right:49px;
    bottom:70px;
    border-width:2px;
    padding:4px 25px 5px;
    font-size:18px;
    background:rgba(255,255,255,.12);
  }
  .hero-hand-icon{
    right:76px;
    bottom:34px;
    width:54px;
  }
  .cert-badge{
    left:21px;
    bottom:26px;
    width:59px;
    height:59px;
    font-size:8px;
  }
  .cert-badge strong{font-size:8px;margin-top:3px}

  .hero-text{
    background:#fff;
    padding:7px 16px 15px;
  }
  .hero-text h1{
    font-family:var(--font-body);
    font-size:19px;
    line-height:1.22;
    letter-spacing:-.2px;
    margin:0 0 7px;
    color:var(--gold);
    font-weight:300;
  }
  .hero-text p{
    font-size:14px;
    line-height:1.33;
    letter-spacing:0;
    color:#333;
    font-weight:300;
  }

  .home-carousel{
    width:calc(100% - 32px);
    margin:0 auto;
    border:3px solid #111;
  }
  .carousel-stage{height:125px}
  .carousel-slide{width:112%;height:100%}
  .carousel-toggle{
    width:36px;
    height:36px;
    border-radius:50%;
    bottom:43px;
    font-size:16px;
    background:rgba(0,0,0,.35);
    border:2px solid rgba(255,255,255,.9);
  }

  .services-section{
    margin-top:13px;
    padding:0 0 0;
    background:#f5f5f5;
  }
  .services-grid{
    display:flex;
    flex-direction:column;
    width:calc(100% - 32px);
    margin:0 auto;
  }
  .services-grid h2{
    font-size:27px;
    margin:9px 0 8px;
    line-height:1;
  }
  .services-grid .black-script{
    text-align:center;
    padding-left:0;
    color:#111;
  }
  .service-img{
    height:176px;
    object-fit:cover;
    object-position:center;
  }
  .services-grid>div:nth-child(2){
    display:flex;
    flex-direction:column;
  }
  .services-grid>div:nth-child(2) h2{
    order:0;
    background:#efefef;
    width:100%;
    margin:13px 0 17px;
    padding:11px 0 9px;
    font-size:20px;
  }
  .service-copy{
    order:1;
    background:#fff;
    padding:0 10px 7px;
    min-height:0;
    font-size:14px;
    line-height:1.34;
    color:#444;
    font-weight:300;
  }
  .media-row{
    width:calc(100% - 32px);
    margin:0 auto;
    display:block;
  }
  .media-row video{
    width:100%;
    height:auto;
    display:block;
    background:#000;
  }

  .cappotto-section{
    width:calc(100% - 32px);
    padding:0 0 22px;
    display:flex;
    flex-direction:column;
  }
  .cappotto-section h2{
    font-size:19px;
    margin:11px 0 6px;
    order:2;
    text-align:center;
  }
  .cappotto-grid{
    display:flex;
    flex-direction:column;
  }
  .cappotto-grid img{
    order:1;
    width:100%;
    height:205px;
    object-fit:cover;
  }
  .cappotto-copy{
    order:3;
    padding:12px 12px 22px;
    font-size:13px;
    line-height:1.55;
    color:#8b8b8b;
    background:#f0f1f2;
  }

  .site-footer{background:#fff}
  .footer-inner{
    width:100%;
    padding:15px 0 8px;
    display:block;
    text-align:left;
    font-size:11px;
    line-height:2.1;
    color:#333;
  }
  .footer-inner>div{width:100%;padding-left:0;margin:0 0 3px}
  .footer-inner>div:last-child{margin-top:3px}
  .copyright{
    font-size:11px;
    padding:5px 0 13px;
    color:#aaa;
  }

  /* Generic mobile pages */
  .simple-page{
    width:100%;
    min-height:calc(100vh - 73px);
    padding:16px 16px 0;
    text-align:center;
  }
  .simple-page h1{
    font-size:25px;
    line-height:1;
    margin:0 0 34px;
  }
  .subtitle{
    font-size:18px;
    line-height:1.2;
    margin:0 0 28px;
  }

  .clienti-page{padding-top:23px}
  .clienti-page h1{
    font-size:24px;
    margin-bottom:36px;
  }
  .clienti-logos{
    width:100%;
    gap:20px;
  }
  .clienti-logos .logo-edile{width:260px}
  .logo-row{
    display:flex;
    flex-direction:column;
    gap:20px;
    width:100%;
  }
  .logo-triaca{width:100%;max-width:282px;order:1}
  .logo-bruedil{width:180px;order:2}
  .logo-norkos{width:100%;max-width:282px}
  .logo-nardello{width:100%;max-width:282px}
  .logo-vittadello{width:100%;max-width:260px;margin-top:0}

  .portfolio-page{
    min-height:calc(100vh - 73px);
    background:#eef0f1;
  }
  .portfolio-wrap{
    width:100%;
    padding:12px 0 0;
  }
  .portfolio-wrap h1{
    font-size:25px;
    margin:0 0 23px;
  }
  .map-box{
    width:100%;
    margin:0 auto;
    background:transparent;
  }
  .map-box>img{
    width:100%;
    height:auto;
  }
  .map-pin{
    width:18px;
    height:24px;
  }
  .pin-hitbox{
    top:-5px;
    left:-16px;
    width:48px;
    height:34px;
  }
  .map-pin.pin-left .pin-hitbox{left:-4px;width:48px}
  .map-pin.pin-right .pin-hitbox{left:-44px;width:48px}
  .map-note{
    width:100%;
    padding:11px 22px 10px;
    margin:0;
    background:#fff;
    font-size:13px;
    line-height:1.16;
    font-weight:300;
  }

  .partner-page{
    min-height:calc(100vh - 73px);
    padding:15px 0 0;
  }
  .partner-page h1{
    font-size:25px;
    margin:0 0 12px;
  }
  .partner-card{
    width:100%;
    margin:0;
    padding:10px 26px 36px;
    background:#eef0f1;
  }
  .partner-card:before{
    width:26px;
    height:3px;
    margin:0 auto 20px;
  }
  .partner-card img{
    width:150px;
    height:150px;
    padding:30px;
    margin:0 auto 19px;
  }
  .partner-card h2{
    font-size:16px;
    margin-bottom:24px;
  }
  .partner-card p{
    width:185px;
    margin:0 auto;
    font-size:12px;
    line-height:1.18;
  }

  .contatti-page{
    min-height:calc(100vh - 73px);
    padding-top:15px;
  }
  .contatti-page h1{
    font-size:25px;
    margin-bottom:48px;
  }
  .contact-block{
    width:100%;
    margin:0 auto;
    text-align:center;
    font-size:16px;
    line-height:1.8;
    color:#333;
  }
  .contact-block p{
    margin:0 0 22px;
  }

  /* Project mobile */
  .project-page{
    min-height:calc(100vh - 73px);
    padding-top:14px;
  }
  .project-view{
    width:100%;
    padding:0 16px;
  }
  .gallery-frame{
    width:100%;
    height:170px;
    background:#fff;
  }
  .gallery-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .gallery-arrow{
    width:42px;
    height:62px;
    font-size:48px;
    background:rgba(0,0,0,.08);
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,.3);
  }
  .project-view h1{
    font-size:13px;
    line-height:1.2;
    margin:10px 0 12px;
  }
  .project-counter{display:none}

  .chat-button{
    right:18px;
    bottom:18px;
    width:54px;
    height:54px;
    padding:0;
    border-radius:50%;
    justify-content:center;
    gap:0;
  }
  .chat-button-label{display:none}
  .chat-button-icon{width:22px;height:22px}
  .chat-panel{
    right:8px;
    bottom:82px;
    width:calc(100vw - 16px);
    height:560px;
    max-height:calc(100vh - 90px);
  }


  .chat-head{padding:18px 18px 8px;height:72px}
  .chat-title{font-size:18px}
  .chat-status{font-size:13px}
  .chat-body{height:calc(100% - 72px - 58px);padding:14px 14px 18px}
  .chat-card{font-size:14px;padding:14px 14px}
  .chat-form{padding:18px 14px 14px}
  .chat-form input,.chat-form textarea{font-size:14px;margin-bottom:14px}
  .chat-form button{height:44px}
  .chat-input{height:58px;padding:0 12px}
  .chat-text-input{font-size:15px}

  .lightbox-arrow{width:50px;height:82px;font-size:52px}
  .lightbox-arrow.prev{left:4px}
  .lightbox-arrow.next{right:4px}
}


/* v12: clickable rectangles aligned to original baked map labels + red markers */
.map-area{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  height:var(--h);
  z-index:6;
  display:block;
  background:transparent;
  cursor:pointer;
}
.map-area .area-label{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
body.debug-map .map-area{
  background:rgba(255,0,0,.18);
  outline:1px solid rgba(255,0,0,.55);
}

/* v13 partner background */
body[data-page="partner"]{background:#f0f1f2;}
body[data-page="partner"] .partner-page{background:#f0f1f2;}
body[data-page="partner"] .site-header,
body[data-page="partner"] .site-footer,
body[data-page="partner"] .copyright{background:#fff;}
body[data-page="partner"] .partner-card{background:#f6f6f6;}

/* v13 home video */
.media-row video{width:100%;height:300px;object-fit:cover;background:#000;}

/* v13 carousel circular controls */
.carousel-controls{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:5;display:flex;gap:10px;align-items:center;justify-content:center;}
.carousel-control{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.92);background:rgba(0,0,0,.38);color:#fff;display:flex;align-items:center;justify-content:center;line-height:1;font-family:Arial,sans-serif;font-size:13px;cursor:pointer;padding:0;}
.carousel-play{font-size:12px;padding-left:2px;}
.carousel-control:hover{background:rgba(0,0,0,.68);}

@media(max-width:800px){
  .portfolio-label{font-size:21px;padding:5px 30px 6px;}
  .hero-hand-icon{right:86px;bottom:38px;width:38px;}
  .carousel-controls{bottom:42px;gap:8px;}
  .carousel-control{width:32px;height:32px;font-size:12px;}
  .media-row video{width:100%;height:auto;object-fit:cover;}
  body[data-page="partner"] .partner-page{background:#f0f1f2;}
}

/* v15: gentle alignment with original Wix, based on v13 */
@media(min-width:801px){
  :root{--max:880px;}

  .header-inner{
    width:min(880px,calc(100% - 32px));
  }

  .hero-image-wrap{
    min-height:880px;
  }

  .hero-text{
    padding:32px 18px 24px;
  }

  .hero-text h1{
    font-size:40px;
    line-height:1.02;
    margin-bottom:38px;
  }

  .hero-text p{
    font-size:28px;
    line-height:1.42;
    color:#1f1f1f;
  }

  .portfolio-label{
    right:122px;
    bottom:244px;
    font-size:31px;
    padding:7px 34px 8px;
  }

  .hero-hand-icon{
    right:166px;
    bottom:184px;
    width:44px;
  }

  .cert-badge{
    left:29px;
    bottom:106px;
    width:106px;
    height:106px;
    font-size:13px;
  }

  .cert-badge strong{
    font-size:13px;
    margin-top:5px;
  }

  .carousel-stage{
    height:350px;
  }

  .services-section{
    margin-top:25px;
    padding-top:47px;
  }

  .services-grid h2{
    font-size:39px;
    margin-bottom:22px;
  }

  .services-grid .black-script{
    font-size:46px;
    padding-left:22px;
    margin-bottom:18px;
  }

  .service-img{
    height:330px;
  }

  .service-copy{
    min-height:330px;
    font-size:23px;
    line-height:1.43;
    padding:14px 38px 0;
  }

  .media-row{
    background:#000;
  }

  .media-row video{
    width:74%;
    height:300px;
    margin:0 auto;
    object-fit:cover;
    background:#000;
  }

  .cappotto-section{
    padding-top:58px;
  }

  .cappotto-section h2{
    font-size:39px;
    margin-bottom:40px;
  }

  .cappotto-copy{
    font-size:16px;
    line-height:1.72;
  }
}


/* ── Contact page form (v16) ── */
.contatti-page{min-height:calc(100vh - 152px);padding-top:50px}
.contatti-page h1{margin-bottom:48px}
.contatti-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:0 56px;text-align:left;max-width:820px;margin:0 auto 80px}
.contact-info-col{}
.contact-block{font-family:var(--font-avenir);font-size:15px;line-height:2;color:#555;font-weight:300}
.contact-block p{margin:0 0 22px}
.contact-block strong{font-weight:400;color:#333;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.contact-block a{color:var(--gold);border-bottom:1px solid transparent;transition:border-color .15s}
.contact-block a:hover{border-color:var(--gold)}
.piva{font-size:12px;color:#aaa}

.contact-form-col{}
.contact-form{display:flex;flex-direction:column;gap:0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.form-group{display:flex;flex-direction:column;margin-bottom:22px}
.form-group label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#888;font-weight:400;margin-bottom:6px}
.form-group input,
.form-group textarea{border:0;border-bottom:1.5px solid #d0d0d0;padding:8px 0 10px;font-family:var(--font-body);font-size:15px;color:#333;font-weight:300;background:transparent;outline:none;transition:border-color .2s;width:100%}
.form-group input:focus,
.form-group textarea:focus{border-bottom-color:var(--gold)}
.form-group input::placeholder,
.form-group textarea::placeholder{color:#bbb}
.form-group textarea{resize:none;line-height:1.5}
.contact-submit{margin-top:8px;padding:14px 38px;background:#111;color:#fff;border:0;font-family:var(--font-body);font-size:14px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;width:fit-content;transition:background .18s}
.contact-submit:hover{background:var(--gold)}
.form-note{font-size:12px;color:#aaa;margin:14px 0 0;font-weight:300}

@media(max-width:800px){
  .contatti-page{padding-top:22px;min-height:calc(100vh - 73px)}
  .contatti-page h1{font-size:25px;margin-bottom:28px}
  .contatti-layout{grid-template-columns:1fr;gap:0;margin-bottom:40px}
  .contact-block{font-size:14px;line-height:1.8;margin-bottom:32px}
  .form-row{grid-template-columns:1fr;gap:0}
  .contact-submit{width:100%;text-align:center;padding:15px}
}

/* v17: home grey bands + white central area alignment */
@media(min-width:801px){
  body[data-page="home"] .services-section{
    position:relative;
    background:#fff;
    margin-top:25px;
    padding:47px 0 0;
    overflow:visible;
  }

  body[data-page="home"] .services-section::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:444px;
    background:var(--section-gray);
    z-index:0;
    pointer-events:none;
  }

  body[data-page="home"] .services-grid,
  body[data-page="home"] .media-row{
    position:relative;
    z-index:1;
  }

  body[data-page="home"] .services-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    align-items:start;
  }

  body[data-page="home"] .services-grid > div{
    display:flex;
    flex-direction:column;
  }

  body[data-page="home"] .services-grid h2{
    height:52px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    margin:0 0 16px;
    font-size:39px;
    line-height:1.02;
  }

  body[data-page="home"] .services-grid .black-script{
    justify-content:flex-start;
    padding-left:22px;
    font-size:46px;
    color:#111;
  }

  body[data-page="home"] .service-img,
  body[data-page="home"] .service-copy{
    height:330px;
    min-height:330px;
  }

  body[data-page="home"] .service-img{
    width:100%;
    object-fit:cover;
    object-position:center;
  }

  body[data-page="home"] .service-copy{
    background:#fff;
    padding:14px 38px 0;
    text-align:center;
    font-size:23px;
    line-height:1.43;
    color:#333;
    font-weight:200;
    overflow:hidden;
  }

  body[data-page="home"] .media-row{
    margin-top:0;
    padding:0 0 44px;
    background:#fff;
    display:flex;
    justify-content:center;
  }

  body[data-page="home"] .media-row video{
    width:100%;
    height:300px;
    margin:0 auto;
    object-fit:cover;
    background:#000;
  }

  body[data-page="home"] .cappotto-section{
    position:relative;
    z-index:0;
    padding:52px 0 92px;
    background:transparent;
  }

  body[data-page="home"] .cappotto-section::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:100vw;
    height:458px;
    transform:translateX(-50%);
    background:var(--section-gray);
    z-index:0;
    pointer-events:none;
  }

  body[data-page="home"] .cappotto-section > *{
    position:relative;
    z-index:1;
  }

  body[data-page="home"] .cappotto-section h2{
    height:48px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    font-size:39px;
    line-height:1.02;
    margin:0 0 28px;
  }

  body[data-page="home"] .cappotto-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:stretch;
  }

  body[data-page="home"] .cappotto-copy,
  body[data-page="home"] .cappotto-grid img{
    height:330px;
    min-height:330px;
  }

  body[data-page="home"] .cappotto-copy{
    background:#fff;
    padding:34px 31px;
    font-size:16px;
    line-height:1.72;
    color:#777;
    font-weight:300;
    overflow:hidden;
  }

  body[data-page="home"] .cappotto-grid img{
    width:100%;
    object-fit:cover;
    object-position:center;
  }
}

/* v20: riallineamento desktop su screenshot originale Wix */
@media(min-width:801px){
  body[data-page="home"] .home-page{
    background:#fff;
  }

  body[data-page="home"] .home-page > .narrow,
  body[data-page="home"] .services-section > .narrow,
  body[data-page="home"] .cappotto-section.narrow{
    width:min(735px,calc(100% - 32px));
    max-width:735px;
  }

  body[data-page="home"] .hero-block{
    display:grid;
    grid-template-columns:61.5% 38.5%;
    align-items:stretch;
  }

  body[data-page="home"] .hero-image-wrap{
    min-height:0;
    height:620px;
    overflow:hidden;
  }

  body[data-page="home"] .hero-image-wrap > img:first-child{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
  }

  body[data-page="home"] .hero-text{
    height:620px;
    background:#eceeef;
    padding:22px 17px 18px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }

  body[data-page="home"] .hero-text h1{
    font-size:32px;
    line-height:.98;
    margin:0 0 24px;
  }

  body[data-page="home"] .hero-text p{
    font-size:22px;
    line-height:1.42;
    letter-spacing:-.2px;
  }

  body[data-page="home"] .portfolio-label{
    right:110px;
    bottom:185px;
    font-size:27px;
    padding:6px 30px 7px;
    border-width:3px;
  }

  body[data-page="home"] .hero-hand-icon{
    right:147px;
    bottom:122px;
    width:48px;
  }

  body[data-page="home"] .cert-badge{
    left:24px;
    bottom:76px;
    width:88px;
    height:88px;
  }

  body[data-page="home"] .home-carousel{
    border:3px solid #111;
    border-top:0;
    background:#000;
    overflow:hidden;
  }

  body[data-page="home"] .carousel-stage{
    height:315px;
    background:#000;
  }

  body[data-page="home"] .carousel-slide{
    width:108%;
    height:100%;
    object-fit:cover;
    object-position:center center;
  }

  body[data-page="home"] .services-section{
    position:relative;
    background:#fff;
    margin-top:0;
    padding:0 0 0;
    border-top:30px solid var(--section-gray);
    overflow:visible;
  }

  body[data-page="home"] .services-section::before{
    display:none;
  }

  body[data-page="home"] .services-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    align-items:start;
    padding-top:22px;
  }

  body[data-page="home"] .services-grid > div{
    display:flex;
    flex-direction:column;
  }

  body[data-page="home"] .services-grid h2{
    height:48px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    margin:0 0 16px;
    font-size:36px;
    line-height:1.02;
  }

  body[data-page="home"] .services-grid .black-script{
    justify-content:flex-start;
    padding-left:20px;
    font-size:43px;
    color:#111;
  }

  body[data-page="home"] .service-img,
  body[data-page="home"] .service-copy{
    height:315px;
    min-height:315px;
  }

  body[data-page="home"] .service-img{
    width:100%;
    object-fit:cover;
    object-position:center;
  }

  body[data-page="home"] .service-copy{
    background:#f1f2f3;
    padding:10px 30px 0;
    text-align:center;
    font-size:21px;
    line-height:1.43;
    color:#333;
    font-weight:200;
    overflow:hidden;
  }

  body[data-page="home"] .media-row{
    position:relative;
    z-index:1;
    margin-top:16px;
    padding:0 0 0;
    background:#000;
    display:flex;
    justify-content:center;
    overflow:hidden;
  }

  body[data-page="home"] .media-row video{
    width:100%;
    height:275px;
    margin:0 auto;
    object-fit:contain;
    background:#000;
  }

  body[data-page="home"] .cappotto-section{
    position:relative;
    z-index:0;
    padding:0 0 86px;
    margin-top:0;
    background:#fff;
    border-top:30px solid var(--section-gray);
  }

  body[data-page="home"] .cappotto-section::before{
    display:none;
  }

  body[data-page="home"] .cappotto-section > *{
    position:relative;
    z-index:1;
  }

  body[data-page="home"] .cappotto-section h2{
    height:auto;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    font-size:36px;
    line-height:1.02;
    margin:26px 0 34px;
  }

  body[data-page="home"] .cappotto-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:stretch;
  }

  body[data-page="home"] .cappotto-copy,
  body[data-page="home"] .cappotto-grid img{
    height:300px;
    min-height:300px;
  }

  body[data-page="home"] .cappotto-copy{
    background:#f1f2f3;
    padding:28px 28px;
    font-size:14px;
    line-height:1.72;
    color:#7f7f7f;
    font-weight:300;
    overflow:hidden;
  }

  body[data-page="home"] .cappotto-grid img{
    width:100%;
    object-fit:cover;
    object-position:center;
  }

  body[data-page="home"] .site-footer,
  body[data-page="home"] + .site-footer{
    background:var(--section-gray);
  }
}

/* v21: desktop home scale closer to original Wix reference */
@media(min-width:801px){
  body[data-page="home"] .home-page > .narrow,
  body[data-page="home"] .services-section > .narrow,
  body[data-page="home"] .cappotto-section.narrow{
    width:min(880px,calc(100% - 32px));
    max-width:880px;
  }

  body[data-page="home"] .hero-block{
    display:grid;
    grid-template-columns:560px 320px;
    align-items:stretch;
  }

  body[data-page="home"] .hero-image-wrap,
  body[data-page="home"] .hero-text{
    height:720px;
    min-height:720px;
  }

  body[data-page="home"] .hero-image-wrap > img:first-child{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
  }

  body[data-page="home"] .hero-text{
    background:#eceeef;
    padding:34px 22px 24px;
    overflow:hidden;
    text-align:center;
  }

  body[data-page="home"] .hero-text h1{
    font-size:34px;
    line-height:1.02;
    margin:0 0 42px;
    letter-spacing:-.25px;
  }

  body[data-page="home"] .hero-text p{
    font-size:23px;
    line-height:1.45;
    color:#242424;
    letter-spacing:-.15px;
    font-weight:300;
  }

  body[data-page="home"] .portfolio-label{
    right:96px;
    bottom:155px;
    font-size:29px;
    padding:7px 32px 8px;
    border-width:3px;
  }

  body[data-page="home"] .hero-hand-icon{
    right:137px;
    bottom:94px;
    width:48px;
  }

  body[data-page="home"] .cert-badge{
    left:31px;
    bottom:70px;
    width:96px;
    height:96px;
  }

  body[data-page="home"] .home-carousel{
    width:min(880px,calc(100% - 32px));
    max-width:880px;
    border:3px solid #111;
    border-top:0;
  }

  body[data-page="home"] .carousel-stage{
    height:315px;
  }

  body[data-page="home"] .services-section{
    border-top:30px solid var(--section-gray);
    margin-top:0;
    background:#fff;
  }

  body[data-page="home"] .services-grid{
    grid-template-columns:1fr 1fr;
    padding-top:22px;
  }

  body[data-page="home"] .services-grid h2{
    height:52px;
    font-size:39px;
    margin:0 0 16px;
  }

  body[data-page="home"] .services-grid .black-script{
    font-size:46px;
    padding-left:22px;
  }

  body[data-page="home"] .service-img,
  body[data-page="home"] .service-copy{
    height:330px;
    min-height:330px;
  }

  body[data-page="home"] .service-copy{
    background:#f1f2f3;
    padding:14px 38px 0;
    font-size:23px;
    line-height:1.43;
    color:#333;
  }

  body[data-page="home"] .media-row{
    width:min(880px,calc(100% - 32px));
    max-width:880px;
    margin-top:16px;
    background:#000;
  }

  body[data-page="home"] .media-row video{
    width:100%;
    height:300px;
    object-fit:contain;
    background:#000;
  }

  body[data-page="home"] .cappotto-section{
    border-top:30px solid var(--section-gray);
    padding:0 0 92px;
    background:#fff;
  }

  body[data-page="home"] .cappotto-section h2{
    font-size:39px;
    margin:28px 0 40px;
  }

  body[data-page="home"] .cappotto-copy,
  body[data-page="home"] .cappotto-grid img{
    height:330px;
    min-height:330px;
  }

  body[data-page="home"] .cappotto-copy{
    background:#f1f2f3;
    padding:34px 31px;
    font-size:16px;
    line-height:1.72;
  }
}

/* v22: final desktop tuning for home hero based on latest screenshot */
@media(min-width:801px){
  body[data-page="home"] .hero-block{
    grid-template-columns:580px 300px;
  }

  body[data-page="home"] .hero-image-wrap,
  body[data-page="home"] .hero-text{
    height:750px;
    min-height:750px;
  }

  body[data-page="home"] .hero-text{
    padding:34px 20px 18px;
  }

  body[data-page="home"] .hero-text h1{
    font-size:36px;
    line-height:1.04;
    margin:0 0 36px;
    letter-spacing:-.2px;
  }

  body[data-page="home"] .hero-text p{
    font-size:21px;
    line-height:1.42;
    color:#262626;
    letter-spacing:-.1px;
  }

  body[data-page="home"] .portfolio-label{
    right:98px;
    bottom:176px;
    font-size:28px;
    padding:7px 30px 8px;
  }

  body[data-page="home"] .hero-hand-icon{
    right:139px;
    bottom:114px;
    width:48px;
  }

  body[data-page="home"] .cert-badge{
    left:28px;
    bottom:74px;
    width:94px;
    height:94px;
  }

  body[data-page="home"] .carousel-stage,
  body[data-page="home"] .media-row video{
    height:270px;
  }
}


/* v23: stronger desktop override - makes the home change visible */
@media(min-width:801px){
  body[data-page="home"] .home-page > .narrow,
  body[data-page="home"] .services-section > .narrow,
  body[data-page="home"] .cappotto-section.narrow{
    width:920px;
    max-width:920px;
  }

  body[data-page="home"] .hero-block{
    display:grid;
    grid-template-columns:600px 320px;
    align-items:stretch;
  }

  body[data-page="home"] .hero-image-wrap,
  body[data-page="home"] .hero-text{
    height:790px;
    min-height:790px;
  }

  body[data-page="home"] .hero-image-wrap > img:first-child{
    height:100%;
    object-fit:cover;
    object-position:center top;
  }

  body[data-page="home"] .hero-text{
    background:#eceeef;
    padding:42px 24px 22px;
    overflow:hidden;
  }

  body[data-page="home"] .hero-text h1{
    font-size:38px;
    line-height:1.04;
    margin:0 0 42px;
  }

  body[data-page="home"] .hero-text p{
    font-size:21px;
    line-height:1.38;
    color:#222;
  }

  body[data-page="home"] .portfolio-label{
    right:112px;
    bottom:190px;
    font-size:30px;
    padding:7px 32px 8px;
  }

  body[data-page="home"] .hero-hand-icon{
    right:154px;
    bottom:128px;
    width:50px;
  }

  body[data-page="home"] .cert-badge{
    left:34px;
    bottom:82px;
    width:98px;
    height:98px;
  }

  body[data-page="home"] .home-carousel{
    width:920px;
    max-width:920px;
  }

  body[data-page="home"] .carousel-stage,
  body[data-page="home"] .media-row video{
    height:245px;
  }

  body[data-page="home"] .services-section{
    border-top:28px solid var(--section-gray);
  }
}

/* v24: real visual match to original - taller hero, less early carousel */
@media(min-width:801px){
  body[data-page="home"] .home-page > .narrow,
  body[data-page="home"] .services-section > .narrow,
  body[data-page="home"] .cappotto-section.narrow{
    width:920px !important;
    max-width:920px !important;
  }

  body[data-page="home"] .hero-block{
    display:grid !important;
    grid-template-columns:600px 320px !important;
    align-items:stretch !important;
  }

  body[data-page="home"] .hero-image-wrap,
  body[data-page="home"] .hero-text{
    height:1050px !important;
    min-height:1050px !important;
    max-height:none !important;
  }

  body[data-page="home"] .hero-image-wrap > img:first-child{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center top !important;
  }

  body[data-page="home"] .hero-text{
    background:#eceeef !important;
    padding:58px 25px 28px !important;
    overflow:hidden !important;
    text-align:center !important;
  }

  body[data-page="home"] .hero-text h1{
    font-size:42px !important;
    line-height:1.06 !important;
    margin:0 0 62px !important;
  }

  body[data-page="home"] .hero-text p{
    font-size:24px !important;
    line-height:1.43 !important;
    color:#222 !important;
    font-weight:300 !important;
  }

  body[data-page="home"] .portfolio-label{
    right:116px !important;
    bottom:270px !important;
    font-size:31px !important;
    padding:7px 34px 8px !important;
  }

  body[data-page="home"] .hero-hand-icon{
    right:158px !important;
    bottom:200px !important;
    width:52px !important;
  }

  body[data-page="home"] .cert-badge{
    left:34px !important;
    bottom:118px !important;
    width:100px !important;
    height:100px !important;
  }

  body[data-page="home"] .home-carousel{
    width:920px !important;
    max-width:920px !important;
  }

  body[data-page="home"] .carousel-stage,
  body[data-page="home"] .media-row video{
    height:245px !important;
  }
}


/* v25: force Servizi/Cappotto scale closer to original after v24 home fix */
@media(min-width:801px){
  body[data-page="home"] .services-section > .narrow,
  body[data-page="home"] .cappotto-section.narrow{
    width:min(880px,calc(100% - 32px)) !important;
    max-width:880px !important;
  }

  body[data-page="home"] .services-section{
    border-top:34px solid var(--section-gray) !important;
    background:#fff !important;
    padding-top:0 !important;
  }

  body[data-page="home"] .services-grid{
    display:grid !important;
    grid-template-columns:430px 450px !important;
    gap:0 !important;
    padding-top:24px !important;
    align-items:start !important;
  }

  body[data-page="home"] .services-grid h2{
    height:58px !important;
    margin:0 0 18px !important;
    font-size:42px !important;
    line-height:1.02 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
  }

  body[data-page="home"] .services-grid .black-script{
    font-size:50px !important;
    justify-content:flex-start !important;
    padding-left:18px !important;
    color:#111 !important;
  }

  body[data-page="home"] .service-img,
  body[data-page="home"] .service-copy{
    height:390px !important;
    min-height:390px !important;
  }

  body[data-page="home"] .service-img{
    width:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
  }

  body[data-page="home"] .service-copy{
    background:#f1f2f3 !important;
    padding:16px 42px 0 !important;
    font-size:24px !important;
    line-height:1.42 !important;
    color:#2a2a2a !important;
    overflow:hidden !important;
    text-align:center !important;
  }

  body[data-page="home"] .media-row{
    width:min(880px,calc(100% - 32px)) !important;
    max-width:880px !important;
    margin-top:18px !important;
    background:#000 !important;
    display:flex !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  body[data-page="home"] .media-row video{
    width:100% !important;
    height:300px !important;
    object-fit:contain !important;
    background:#000 !important;
  }

  body[data-page="home"] .cappotto-section{
    border-top:34px solid var(--section-gray) !important;
    padding:0 0 95px !important;
    background:#fff !important;
  }

  body[data-page="home"] .cappotto-section h2{
    font-size:42px !important;
    line-height:1.02 !important;
    margin:30px 0 42px !important;
    text-align:center !important;
  }

  body[data-page="home"] .cappotto-grid{
    display:grid !important;
    grid-template-columns:430px 450px !important;
    align-items:stretch !important;
  }

  body[data-page="home"] .cappotto-copy,
  body[data-page="home"] .cappotto-grid img{
    height:390px !important;
    min-height:390px !important;
  }

  body[data-page="home"] .cappotto-copy{
    background:#f1f2f3 !important;
    padding:36px 34px !important;
    font-size:17px !important;
    line-height:1.72 !important;
    color:#777 !important;
    overflow:hidden !important;
  }

  body[data-page="home"] .cappotto-grid img{
    width:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
  }
}

/* v26: enlarge section titles, uncut service copy, full-width gray band above cappotto */
@media(min-width:801px){
  body[data-page="home"] .services-grid h2{
    font-size:58px !important;
    height:76px !important;
    margin:0 0 18px !important;
    line-height:1 !important;
  }

  body[data-page="home"] .services-grid .black-script{
    font-size:70px !important;
    padding-left:12px !important;
  }

  body[data-page="home"] .cappotto-section h2{
    font-size:58px !important;
    margin:34px 0 44px !important;
    line-height:1 !important;
  }

  body[data-page="home"] .service-img,
  body[data-page="home"] .service-copy{
    height:445px !important;
    min-height:445px !important;
  }

  body[data-page="home"] .service-copy{
    padding:14px 34px 10px !important;
    font-size:22px !important;
    line-height:1.4 !important;
    overflow:hidden !important;
  }

  body[data-page="home"] .cappotto-section{
    position:relative !important;
    border-top:0 !important;
    padding-top:34px !important;
    overflow:visible !important;
  }

  body[data-page="home"] .cappotto-section::before{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    width:100vw !important;
    height:34px !important;
    background:var(--section-gray) !important;
    display:block !important;
    z-index:0 !important;
  }

  body[data-page="home"] .cappotto-section > *{
    position:relative !important;
    z-index:1 !important;
  }
}

/* v28: rollback v27 mistake + minimal fixes requested */
@media(min-width:801px){
  body[data-page="home"] .home-page > .narrow,
  body[data-page="home"] .home-carousel.narrow{
    width:min(880px,calc(100% - 32px)) !important;
    max-width:880px !important;
  }

  body[data-page="home"] .hero-block{
    grid-template-columns:580px 300px !important;
  }

  body[data-page="home"] .hero-image-wrap,
  body[data-page="home"] .hero-text{
    height:1050px !important;
    min-height:1050px !important;
  }

  body[data-page="home"] .hero-text{
    padding:42px 22px 24px !important;
    background:#eceeef !important;
    overflow:hidden !important;
  }

  body[data-page="home"] .hero-text h1{
    font-size:42px !important;
    line-height:1.04 !important;
    margin:0 0 58px !important;
  }

  body[data-page="home"] .hero-text p{
    font-size:24px !important;
    line-height:1.48 !important;
    color:#202020 !important;
    font-weight:300 !important;
  }

  body[data-page="home"] .portfolio-label{
    right:116px !important;
    bottom:245px !important;
    font-size:30px !important;
    padding:7px 32px 8px !important;
    border-width:3px !important;
  }

  body[data-page="home"] .hero-hand-icon{
    right:154px !important;
    bottom:176px !important;
    width:52px !important;
  }

  body[data-page="home"] .cert-badge{
    left:34px !important;
    bottom:128px !important;
    width:100px !important;
    height:100px !important;
  }

  body[data-page="home"] .home-carousel{
    width:min(880px,calc(100% - 32px)) !important;
    max-width:880px !important;
    border:3px solid #111 !important;
    border-top:0 !important;
    overflow:hidden !important;
    background:#000 !important;
  }

  body[data-page="home"] .carousel-stage{
    height:360px !important;
    background:#000 !important;
  }

  body[data-page="home"] .carousel-slide,
  body[data-page="home"] .carousel-stage img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
  }

  body[data-page="home"] .services-grid h2{
    font-size:58px !important;
  }

  body[data-page="home"] .services-grid .black-script{
    font-size:70px !important;
  }

  body[data-page="home"] .service-copy{
    height:445px !important;
    min-height:445px !important;
    padding:14px 34px 10px !important;
    font-size:22px !important;
    line-height:1.4 !important;
  }

  body[data-page="home"] .cappotto-section::before{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    width:100vw !important;
    height:34px !important;
    background:var(--section-gray) !important;
    display:block !important;
    z-index:0 !important;
  }
}


/* v29: desktop internal pages aligned to original Wix screenshots */
@media(min-width:801px){
  body:not([data-page="home"]) .site-header{background:#fff;}
  body:not([data-page="home"]) .copyright{
    background:#fff;
    color:#b3b3b3;
    font-size:9px;
    line-height:1;
    padding:8px 0 0;
  }

  /* Clienti */
  body[data-page="clienti"] .simple-page{
    width:min(760px,calc(100% - 32px));
    min-height:560px;
    padding-top:72px;
  }
  body[data-page="clienti"] .simple-page h1{
    font-size:56px;
    line-height:1;
    margin:0 0 14px;
  }
  body[data-page="clienti"] .subtitle{
    font-size:17px;
    font-style:italic;
    color:#737373;
    margin:0 0 52px;
    font-weight:300;
  }
  body[data-page="clienti"] .clienti-logos{
    width:660px;
    gap:22px;
    margin-bottom:18px;
  }
  body[data-page="clienti"] .clienti-logos .logo-edile{width:610px;max-width:100%;}
  body[data-page="clienti"] .logo-row{gap:16px;}
  body[data-page="clienti"] .logo-bruedil{width:185px;}
  body[data-page="clienti"] .logo-triaca{width:219px;}
  body[data-page="clienti"] .logo-norkos{width:201px;}
  body[data-page="clienti"] .logo-nardello{width:219px;}
  body[data-page="clienti"] .logo-vittadello{width:183px;margin-top:2px;}

  /* Portfolio */
  body[data-page="portfolio"] .portfolio-page{
    background:var(--section-gray);
    min-height:518px;
    padding:10px 0 0;
  }
  body[data-page="portfolio"] .portfolio-wrap{
    width:min(760px,calc(100% - 32px));
    margin:0 auto;
    padding-top:0;
  }
  body[data-page="portfolio"] .portfolio-wrap h1{
    font-size:52px;
    line-height:1;
    margin:0 0 28px;
  }
  body[data-page="portfolio"] .map-box{
    width:500px;
    max-width:100%;
    margin:0 auto;
    border:2px solid #f8f8f8;
    box-shadow:none;
    background:transparent;
  }
  body[data-page="portfolio"] .map-box img{
    display:block;
    width:100%;
    height:auto;
  }
  body[data-page="portfolio"] .map-note{
    margin:16px 0 0;
    color:#111;
    font-size:18px;
    line-height:1.2;
    font-weight:300;
  }
  body[data-page="portfolio"] .site-footer{background:#fff;}

  /* Partner */
  body[data-page="partner"] .simple-page{
    width:min(520px,calc(100% - 32px));
    min-height:420px;
    padding-top:72px;
  }
  body[data-page="partner"] .simple-page h1{
    font-size:56px;
    line-height:1;
    margin:0 0 58px;
  }
  body[data-page="partner"] .partner-card{
    width:420px;
    max-width:100%;
    min-height:218px;
    margin:0 auto 22px;
    padding:18px 22px 26px;
    background:#efefef;
    position:relative;
  }
  body[data-page="partner"] .partner-card:before{
    width:14px;
    height:2px;
    margin:-30px auto 24px;
    background:#111;
  }
  body[data-page="partner"] .partner-card img{
    width:94px;
    height:94px;
    padding:18px;
    margin:0 auto 10px;
    background:#fff;
    border-radius:50%;
  }
  body[data-page="partner"] .partner-card h2{
    font-size:13px;
    font-style:italic;
    font-weight:300;
    margin:0;
    line-height:1.2;
  }
  body[data-page="partner"] .partner-card p{
    margin:34px 0 0;
    font-size:8px;
    line-height:1.2;
    color:#333;
    letter-spacing:.15px;
  }

  /* Contatti */
  body[data-page="contatti"] .simple-page{
    width:min(520px,calc(100% - 32px));
    min-height:610px;
    padding-top:74px;
  }
  body[data-page="contatti"] .simple-page h1{
    font-size:56px;
    line-height:1;
    margin:0 0 26px;
  }
  body[data-page="contatti"] .simple-contact-block{
    width:430px;
    max-width:100%;
    margin:0 auto;
    text-align:left;
    font-family:var(--font-avenir);
    font-size:14px;
    line-height:1.8;
    color:#4e4e4e;
    font-weight:300;
  }
  body[data-page="contatti"] .simple-contact-block p{
    margin:0 0 18px;
  }
  body[data-page="contatti"] .simple-contact-block p:nth-child(2){
    margin-bottom:34px;
  }
  body[data-page="contatti"] .simple-contact-block a{
    color:inherit;
    text-decoration:none;
  }
}

/* v30: enlarge internal pages + restore larger home typography */
@media(min-width:801px){

  /* HOME: testi più vicini all'originale */
  body[data-page="home"] .hero-text h1{
    font-size:50px !important;
    line-height:1.04 !important;
    margin:0 0 62px !important;
  }

  body[data-page="home"] .hero-text p{
    font-size:27px !important;
    line-height:1.46 !important;
    color:#1f1f1f !important;
    font-weight:300 !important;
  }

  body[data-page="home"] .service-copy{
    font-size:25px !important;
    line-height:1.40 !important;
    color:#2b2b2b !important;
  }

  body[data-page="home"] .cappotto-copy{
    font-size:18px !important;
    line-height:1.72 !important;
  }

  /* PAGINE INTERNE: scala più grande, come originale */
  body[data-page="clienti"] .simple-page,
  body[data-page="partner"] .simple-page,
  body[data-page="contatti"] .simple-page{
    width:min(900px,calc(100% - 32px)) !important;
    max-width:900px !important;
  }

  body[data-page="clienti"] .simple-page h1,
  body[data-page="partner"] .simple-page h1,
  body[data-page="contatti"] .simple-page h1,
  body[data-page="portfolio"] .portfolio-wrap h1{
    font-size:64px !important;
    line-height:1 !important;
  }

  /* Clienti */
  body[data-page="clienti"] .simple-page{
    padding-top:58px !important;
    min-height:610px !important;
  }

  body[data-page="clienti"] .subtitle{
    font-size:19px !important;
  word-spacing:1px;
    margin:0 0 58px !important;
  }

  body[data-page="clienti"] .clienti-logos{
    width:760px !important;
    gap:28px !important;
  }

  body[data-page="clienti"] .clienti-logos .logo-edile{
    width:720px !important;
  }

  body[data-page="clienti"] .logo-row{
    gap:24px !important;
  }

  body[data-page="clienti"] .logo-bruedil{width:245px !important;}
  body[data-page="clienti"] .logo-triaca{width:300px !important;}
  body[data-page="clienti"] .logo-norkos{width:280px !important;}
  body[data-page="clienti"] .logo-nardello{width:315px !important;}
  body[data-page="clienti"] .logo-vittadello{width:285px !important;}

  /* Portfolio */
  body[data-page="portfolio"] .portfolio-page{
    min-height:590px !important;
    padding-top:16px !important;
    background:var(--section-gray) !important;
  }

  body[data-page="portfolio"] .portfolio-wrap{
    width:min(900px,calc(100% - 32px)) !important;
    max-width:900px !important;
  }

  body[data-page="portfolio"] .portfolio-wrap h1{
    margin:0 0 34px !important;
  }

  body[data-page="portfolio"] .map-box{
    width:640px !important;
    max-width:100% !important;
  }

  body[data-page="portfolio"] .map-note{
    font-size:25px !important;
    margin:20px 0 0 !important;
  }

  /* Partner */
  body[data-page="partner"] .simple-page{
    padding-top:60px !important;
    min-height:570px !important;
  }

  body[data-page="partner"] .simple-page h1{
    margin:0 0 72px !important;
  }

  body[data-page="partner"] .partner-card{
    width:650px !important;
    min-height:300px !important;
    padding:28px 44px 44px !important;
  }

  body[data-page="partner"] .partner-card:before{
    width:24px !important;
    height:3px !important;
    margin:-46px auto 38px !important;
  }

  body[data-page="partner"] .partner-card img{
    width:142px !important;
    height:142px !important;
    padding:28px !important;
    margin:0 auto 18px !important;
  }

  body[data-page="partner"] .partner-card h2{
    font-size:16px !important;
  }

  body[data-page="partner"] .partner-card p{
    margin:58px 0 0 !important;
    font-size:12px !important;
  }

  /* Contatti */
  body[data-page="contatti"] .simple-page{
    padding-top:64px !important;
    min-height:720px !important;
  }

  body[data-page="contatti"] .simple-page h1{
    margin:0 0 34px !important;
  }

  body[data-page="contatti"] .simple-contact-block{
    width:520px !important;
    font-size:16px !important;
    line-height:2.1 !important;
  }

  body[data-page="contatti"] .simple-contact-block p{
    margin:0 0 22px !important;
  }

  body[data-page="contatti"] .simple-contact-block p:nth-child(2){
    margin-bottom:44px !important;
  }
}


/* v31: enlarge portfolio layout further to match original */
@media(min-width:801px){
  body[data-page="portfolio"] .portfolio-page{
    min-height:640px !important;
    padding-top:12px !important;
    background:var(--section-gray) !important;
  }

  body[data-page="portfolio"] .portfolio-wrap{
    width:min(1120px,calc(100% - 32px)) !important;
    max-width:1120px !important;
    margin:0 auto !important;
  }

  body[data-page="portfolio"] .portfolio-wrap h1{
    font-size:72px !important;
    line-height:1 !important;
    margin:0 0 34px !important;
  }

  body[data-page="portfolio"] .map-box{
    width:760px !important;
    max-width:100% !important;
    margin:0 auto !important;
    border:3px solid #f5f5f5 !important;
  }

  body[data-page="portfolio"] .map-note{
    font-size:31px !important;
    line-height:1.15 !important;
    margin:20px 0 0 !important;
    color:#111 !important;
  }

  body[data-page="portfolio"] .copyright{
    padding-top:6px !important;
  }
}

/* v32: portfolio/projects +30%, fix cut home texts */
@media(min-width:801px){

  /* PORTFOLIO / PROGETTI: +30% circa rispetto a v31 */
  body[data-page="portfolio"] .portfolio-page{
    min-height:760px !important;
    padding-top:8px !important;
    background:var(--section-gray) !important;
  }

  body[data-page="portfolio"] .portfolio-wrap{
    width:min(1400px,calc(100% - 32px)) !important;
    max-width:1400px !important;
  }

  body[data-page="portfolio"] .portfolio-wrap h1{
    font-size:88px !important;
    line-height:1 !important;
    margin:0 0 38px !important;
  }

  body[data-page="portfolio"] .map-box{
    width:990px !important;
    max-width:100% !important;
    margin:0 auto !important;
    border:3px solid #f5f5f5 !important;
  }

  body[data-page="portfolio"] .map-note{
    font-size:40px !important;
    line-height:1.12 !important;
    margin:22px 0 0 !important;
    color:#111 !important;
  }

  /* Singole pagine progetto: immagini più grandi */
  body[data-page="progetto"] .project-view{
    width:min(1180px,calc(100% - 32px)) !important;
    max-width:1180px !important;
  }

  body[data-page="progetto"] .gallery-frame{
    width:min(1100px,100%) !important;
    height:760px !important;
  }

  body[data-page="progetto"] .project-view h1{
    font-size:30px !important;
  }

  body[data-page="progetto"] .gallery-arrow{
    font-size:78px !important;
    width:74px !important;
    height:104px !important;
  }

  /* HOME: evita testi tagliati */
  body[data-page="home"] .hero-text{
    overflow:visible !important;
  }

  body[data-page="home"] .hero-image-wrap,
  body[data-page="home"] .hero-text{
    height:1120px !important;
    min-height:1120px !important;
  }

  body[data-page="home"] .hero-text h1{
    font-size:46px !important;
    line-height:1.03 !important;
    margin:0 0 54px !important;
  }

  body[data-page="home"] .hero-text p{
    font-size:24px !important;
    line-height:1.43 !important;
    color:#202020 !important;
  }

  body[data-page="home"] .service-img,
  body[data-page="home"] .service-copy{
    height:520px !important;
    min-height:520px !important;
  }

  body[data-page="home"] .service-copy{
    overflow:visible !important;
    padding:18px 34px 18px !important;
    font-size:23px !important;
    line-height:1.37 !important;
  }

  body[data-page="home"] .cappotto-copy,
  body[data-page="home"] .cappotto-grid img{
    height:430px !important;
    min-height:430px !important;
  }

  body[data-page="home"] .cappotto-copy{
    overflow:visible !important;
    font-size:17px !important;
    line-height:1.68 !important;
    padding:34px 31px !important;
  }
}

/* v33: portfolio/project gray continuation + hover feedback on map */
@media(min-width:801px){
  /* portfolio: keep gray also under map/note/footer area */
  body[data-page="portfolio"]{
    background:var(--section-gray) !important;
  }

  body[data-page="portfolio"] .portfolio-page{
    background:var(--section-gray) !important;
    min-height:760px !important;
    padding-bottom:22px !important;
  }

  body[data-page="portfolio"] .site-footer,
  body[data-page="portfolio"] .copyright{
    background:var(--section-gray) !important;
  }

  body[data-page="portfolio"] .copyright{
    padding:10px 0 18px !important;
  }

  /* project pages: gray behind the whole gallery area */
  body[data-page="progetto"]{
    background:var(--section-gray) !important;
  }

  body[data-page="progetto"] .project-page{
    background:var(--section-gray) !important;
    min-height:calc(100vh - 80px) !important;
    padding-bottom:40px !important;
  }

  body[data-page="progetto"] .site-footer,
  body[data-page="progetto"] .copyright{
    background:var(--section-gray) !important;
  }

  /* hover feedback on portfolio map */
  body[data-page="portfolio"] .map-box{
    overflow:visible !important;
  }

  body[data-page="portfolio"] .map-area,
  body[data-page="portfolio"] .map-pin{
    transition:background-color .16s ease, box-shadow .16s ease, outline-color .16s ease, transform .16s ease;
  }

  body[data-page="portfolio"] .map-area:hover,
  body[data-page="portfolio"] .map-area:focus-visible{
    background:rgba(185,0,0,.12) !important;
    outline:2px solid rgba(185,0,0,.72) !important;
    box-shadow:0 0 0 5px rgba(185,0,0,.10) !important;
    z-index:20 !important;
  }

  body[data-page="portfolio"] .map-area .area-label{
    position:absolute !important;
    left:50% !important;
    bottom:calc(100% + 8px) !important;
    transform:translateX(-50%) !important;
    width:max-content !important;
    max-width:260px !important;
    height:auto !important;
    overflow:visible !important;
    clip:auto !important;
    white-space:normal !important;
    pointer-events:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    background:rgba(255,255,255,.96) !important;
    color:#111 !important;
    border:1px solid rgba(0,0,0,.18) !important;
    box-shadow:0 4px 14px rgba(0,0,0,.18) !important;
    padding:7px 10px !important;
    border-radius:2px !important;
    font-family:var(--font-avenir) !important;
    font-size:13px !important;
    line-height:1.2 !important;
    text-align:center !important;
    z-index:30 !important;
  }

  body[data-page="portfolio"] .map-area:hover .area-label,
  body[data-page="portfolio"] .map-area:focus-visible .area-label{
    opacity:1 !important;
    visibility:visible !important;
  }

  body[data-page="portfolio"] .map-pin:hover,
  body[data-page="portfolio"] .map-pin:focus-visible{
    transform:translate(-50%,-50%) scale(1.12) !important;
    z-index:20 !important;
  }

  body[data-page="portfolio"] .map-pin:hover .pin-label,
  body[data-page="portfolio"] .map-pin:focus-visible .pin-label{
    display:block !important;
    position:absolute !important;
    left:50% !important;
    bottom:100% !important;
    transform:translateX(-50%) !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(0,0,0,.18) !important;
    box-shadow:0 4px 14px rgba(0,0,0,.18) !important;
    padding:7px 10px !important;
    font-size:13px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    color:#111 !important;
  }
}

/* v34: replace large map rectangles with small hover targets + label feedback */
@media(min-width:801px){
  body[data-page="portfolio"] .map-area{
    left:calc(var(--x) + (var(--w) / 2)) !important;
    top:calc(var(--y) + (var(--h) / 2)) !important;
    width:22px !important;
    height:22px !important;
    transform:translate(-50%,-50%) !important;
    background:transparent !important;
    outline:0 !important;
    box-shadow:none !important;
    border-radius:50% !important;
    z-index:10 !important;
  }

  body[data-page="portfolio"] .map-area::after{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:10px !important;
    height:10px !important;
    transform:translate(-50%,-50%) !important;
    border-radius:50% !important;
    background:rgba(185,0,0,.92) !important;
    box-shadow:0 0 0 3px rgba(255,255,255,.9),0 2px 8px rgba(0,0,0,.28) !important;
    opacity:0 !important;
    transition:opacity .14s ease, transform .14s ease !important;
  }

  body[data-page="portfolio"] .map-area:hover,
  body[data-page="portfolio"] .map-area:focus-visible{
    background:transparent !important;
    outline:0 !important;
    box-shadow:none !important;
  }

  body[data-page="portfolio"] .map-area:hover::after,
  body[data-page="portfolio"] .map-area:focus-visible::after{
    opacity:1 !important;
    transform:translate(-50%,-50%) scale(1.25) !important;
  }

  body[data-page="portfolio"] .map-area .area-label{
    left:50% !important;
    bottom:calc(100% + 10px) !important;
    transform:translateX(-50%) !important;
    width:max-content !important;
    max-width:230px !important;
    height:auto !important;
    overflow:visible !important;
    clip:auto !important;
    white-space:normal !important;
    pointer-events:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    background:rgba(255,255,255,.97) !important;
    color:#111 !important;
    border:1px solid rgba(0,0,0,.22) !important;
    box-shadow:0 4px 14px rgba(0,0,0,.20) !important;
    padding:6px 9px !important;
    border-radius:2px !important;
    font-family:var(--font-avenir) !important;
    font-size:12px !important;
    line-height:1.2 !important;
    text-align:center !important;
    z-index:40 !important;
  }

  body[data-page="portfolio"] .map-area:hover .area-label,
  body[data-page="portfolio"] .map-area:focus-visible .area-label{
    opacity:1 !important;
    visibility:visible !important;
  }

  body[data-page="portfolio"] .map-pin:hover,
  body[data-page="portfolio"] .map-pin:focus-visible{
    transform:translate(-50%,-50%) scale(1.08) !important;
  }
}


/* v35: portfolio map selection = much larger centered circle above project name */
@media(min-width:801px){
  body[data-page="portfolio"] .map-area{
    width:36px !important;
    height:36px !important;
  }

  body[data-page="portfolio"] .map-area::after{
    width:30px !important;
    height:30px !important;
    background:rgba(185,0,0,.95) !important;
    box-shadow:0 0 0 5px rgba(255,255,255,.94),0 3px 12px rgba(0,0,0,.30) !important;
  }

  body[data-page="portfolio"] .map-area .area-label{
    bottom:calc(100% + 18px) !important;
    font-size:13px !important;
    padding:6px 10px !important;
  }

  body[data-page="portfolio"] .map-area:hover::after,
  body[data-page="portfolio"] .map-area:focus-visible::after{
    opacity:1 !important;
    transform:translate(-50%,-50%) scale(1.12) !important;
  }
}

/* v36: align hover circle above the existing baked project-name zones */
@media(min-width:801px){
  body[data-page="portfolio"] .map-area{
    left:var(--x) !important;
    top:var(--y) !important;
    width:var(--w) !important;
    height:var(--h) !important;
    transform:none !important;
    background:transparent !important;
    outline:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    z-index:10 !important;
  }

  body[data-page="portfolio"] .map-area::after{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:-10px !important;
    width:30px !important;
    height:30px !important;
    transform:translate(-50%,-50%) !important;
    border-radius:50% !important;
    background:rgba(185,0,0,.95) !important;
    box-shadow:0 0 0 5px rgba(255,255,255,.94),0 3px 12px rgba(0,0,0,.30) !important;
    opacity:0 !important;
    transition:opacity .14s ease, transform .14s ease !important;
    pointer-events:none !important;
  }

  body[data-page="portfolio"] .map-area:hover,
  body[data-page="portfolio"] .map-area:focus-visible{
    background:transparent !important;
    outline:0 !important;
    box-shadow:none !important;
  }

  body[data-page="portfolio"] .map-area:hover::after,
  body[data-page="portfolio"] .map-area:focus-visible::after{
    opacity:1 !important;
    transform:translate(-50%,-50%) scale(1.1) !important;
  }

  body[data-page="portfolio"] .map-area .area-label{
    left:50% !important;
    bottom:calc(100% + 26px) !important;
    transform:translateX(-50%) !important;
  }
}

/* v37: use real red locator coordinates, not text rectangles */
@media(min-width:801px){
  body[data-page="portfolio"] .map-area{
    display:none !important;
  }

  body[data-page="portfolio"] .map-pin{
    width:54px !important;
    height:54px !important;
    transform:translate(-50%,-50%) !important;
    overflow:visible !important;
    z-index:15 !important;
  }

  body[data-page="portfolio"] .map-pin:hover,
  body[data-page="portfolio"] .map-pin:focus-visible{
    transform:translate(-50%,-50%) scale(1.02) !important;
  }

  body[data-page="portfolio"] .pin-hitbox{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    width:54px !important;
    height:54px !important;
    background:transparent !important;
  }

  body[data-page="portfolio"] .pin-dot{
    display:block !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:30px !important;
    height:30px !important;
    transform:translate(-50%,-50%) scale(.88) !important;
    border-radius:50% !important;
    background:rgba(185,0,0,.96) !important;
    box-shadow:0 0 0 5px rgba(255,255,255,.95),0 3px 12px rgba(0,0,0,.30) !important;
    opacity:0 !important;
    transition:opacity .14s ease, transform .14s ease !important;
    pointer-events:none !important;
  }

  body[data-page="portfolio"] .map-pin:hover .pin-dot,
  body[data-page="portfolio"] .map-pin:focus-visible .pin-dot{
    opacity:1 !important;
    transform:translate(-50%,-50%) scale(1.15) !important;
  }

  body[data-page="portfolio"] .pin-label{
    display:block !important;
    position:absolute !important;
    left:50% !important;
    bottom:calc(100% + 8px) !important;
    transform:translateX(-50%) !important;
    width:max-content !important;
    max-width:230px !important;
    white-space:normal !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    background:rgba(255,255,255,.97) !important;
    color:#111 !important;
    border:1px solid rgba(0,0,0,.22) !important;
    box-shadow:0 4px 14px rgba(0,0,0,.20) !important;
    padding:6px 9px !important;
    border-radius:2px !important;
    font-family:var(--font-avenir) !important;
    font-size:12px !important;
    line-height:1.2 !important;
    text-align:center !important;
    z-index:40 !important;
  }

  body[data-page="portfolio"] .map-pin:hover .pin-label,
  body[data-page="portfolio"] .map-pin:focus-visible .pin-label{
    opacity:1 !important;
    visibility:visible !important;
  }
}


/* v38: clickable words and markers directly, without misplaced overlay circles */
@media(min-width:801px){
  body[data-page="portfolio"] .map-area,
  body[data-page="portfolio"] .map-pin{
    position:absolute !important;
    display:block !important;
    text-decoration:none !important;
    cursor:pointer !important;
    z-index:12 !important;
  }

  body[data-page="portfolio"] .map-area{
    background:transparent !important;
    border-radius:2px !important;
  }

  body[data-page="portfolio"] .map-area::after,
  body[data-page="portfolio"] .map-area .area-label,
  body[data-page="portfolio"] .map-pin .pin-dot,
  body[data-page="portfolio"] .map-pin .pin-label{
    display:none !important;
    content:none !important;
  }

  body[data-page="portfolio"] .map-area:hover,
  body[data-page="portfolio"] .map-area:focus-visible{
    background:rgba(255,255,255,.10) !important;
    outline:1px solid rgba(255,255,255,.55) !important;
    box-shadow:0 0 0 2px rgba(0,0,0,.10) inset !important;
  }

  body[data-page="portfolio"] .map-pin{
    width:18px !important;
    height:18px !important;
    transform:translate(-50%,-50%) !important;
    overflow:visible !important;
    background:transparent !important;
  }

  body[data-page="portfolio"] .pin-hitbox{
    position:absolute !important;
    left:-8px !important;
    top:-8px !important;
    width:34px !important;
    height:34px !important;
    background:transparent !important;
    border-radius:50% !important;
  }

  body[data-page="portfolio"] .map-pin:hover .pin-hitbox,
  body[data-page="portfolio"] .map-pin:focus-visible .pin-hitbox{
    box-shadow:0 0 0 2px rgba(255,255,255,.95), 0 0 0 5px rgba(190,0,0,.35) !important;
  }
}


/* v39: final portfolio clickable names + markers refinement */
@media(min-width:801px){
  body[data-page="portfolio"] .map-area:hover,
  body[data-page="portfolio"] .map-area:focus-visible{
    background:rgba(255,255,255,.06) !important;
    outline:1px solid rgba(255,255,255,.35) !important;
    box-shadow:none !important;
  }

  body[data-page="portfolio"] .map-pin:hover .pin-hitbox,
  body[data-page="portfolio"] .map-pin:focus-visible .pin-hitbox{
    box-shadow:0 0 0 2px rgba(255,255,255,.92), 0 0 0 4px rgba(190,0,0,.28) !important;
  }
}


/* v40: final portfolio interaction cleanup - names clickable, no extra circles */
@media(min-width:801px){
  body[data-page="portfolio"] .map-area,
  body[data-page="portfolio"] .map-pin,
  body[data-page="portfolio"] .map-area::before,
  body[data-page="portfolio"] .map-area::after,
  body[data-page="portfolio"] .map-pin::before,
  body[data-page="portfolio"] .map-pin::after,
  body[data-page="portfolio"] .pin-hitbox,
  body[data-page="portfolio"] .pin-dot,
  body[data-page="portfolio"] .pin-label,
  body[data-page="portfolio"] .area-label{
    box-sizing:border-box !important;
  }

  body[data-page="portfolio"] .map-area{
    position:absolute !important;
    display:block !important;
    z-index:30 !important;
    background:transparent !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    cursor:pointer !important;
    pointer-events:auto !important;
  }

  body[data-page="portfolio"] .map-area::before,
  body[data-page="portfolio"] .map-area::after,
  body[data-page="portfolio"] .map-area .area-label,
  body[data-page="portfolio"] .map-pin .pin-dot,
  body[data-page="portfolio"] .map-pin .pin-label{
    display:none !important;
    content:none !important;
  }

  body[data-page="portfolio"] .map-area:hover,
  body[data-page="portfolio"] .map-area:focus-visible,
  body[data-page="portfolio"] .map-area:active{
    background:rgba(255,255,255,.05) !important;
    outline:1px solid rgba(255,255,255,.28) !important;
    box-shadow:none !important;
  }

  body[data-page="portfolio"] .map-pin{
    position:absolute !important;
    display:block !important;
    width:18px !important;
    height:18px !important;
    transform:translate(-50%,-50%) !important;
    z-index:25 !important;
    background:transparent !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    cursor:pointer !important;
    pointer-events:auto !important;
    overflow:visible !important;
  }

  body[data-page="portfolio"] .pin-hitbox{
    position:absolute !important;
    left:-6px !important;
    top:-6px !important;
    width:30px !important;
    height:30px !important;
    background:transparent !important;
    border:0 !important;
    outline:0 !important;
    border-radius:50% !important;
    box-shadow:none !important;
  }

  body[data-page="portfolio"] .map-pin:hover,
  body[data-page="portfolio"] .map-pin:focus-visible,
  body[data-page="portfolio"] .map-pin:active,
  body[data-page="portfolio"] .map-pin:hover .pin-hitbox,
  body[data-page="portfolio"] .map-pin:focus-visible .pin-hitbox,
  body[data-page="portfolio"] .map-pin:active .pin-hitbox{
    box-shadow:none !important;
    outline:0 !important;
    background:transparent !important;
  }
}

/* v41: visible clickable project names over the baked map text */
@media(min-width:801px){
  body[data-page="portfolio"] .map-area{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    z-index:40 !important;
    pointer-events:auto !important;
    text-decoration:none !important;
    color:#151515 !important;
    background:rgba(238,238,238,.94) !important;
    border-radius:2px !important;
    outline:0 !important;
    box-shadow:none !important;
    padding:1px 2px !important;
  }

  body[data-page="portfolio"] .map-area::before,
  body[data-page="portfolio"] .map-area::after,
  body[data-page="portfolio"] .area-label{
    display:none !important;
    content:none !important;
  }

  body[data-page="portfolio"] .map-word-label{
    display:block !important;
    width:100% !important;
    font-family:var(--font-avenir) !important;
    font-size:10px !important;
    line-height:1.05 !important;
    font-weight:300 !important;
    color:#151515 !important;
    text-decoration:none !important;
    pointer-events:none !important;
  }

  body[data-page="portfolio"] .map-area:hover,
  body[data-page="portfolio"] .map-area:focus-visible{
    background:rgba(255,255,255,.98) !important;
    color:#8f0000 !important;
    outline:1px solid rgba(150,0,0,.35) !important;
    box-shadow:0 2px 8px rgba(0,0,0,.12) !important;
  }

  body[data-page="portfolio"] .map-area:hover .map-word-label,
  body[data-page="portfolio"] .map-area:focus-visible .map-word-label{
    color:#8f0000 !important;
  }

  body[data-page="portfolio"] .map-pin,
  body[data-page="portfolio"] .pin-hitbox{
    background:transparent !important;
    box-shadow:none !important;
    outline:0 !important;
  }
}


/* v43: portfolio labels visibly identical-ish and clickable on the map */
@media(min-width:801px){
  body[data-page="portfolio"] .map-box,
  body[data-page="portfolio"] #portfolioMap{
    position:relative !important;
    overflow:visible !important;
  }

  body[data-page="portfolio"] #portfolioMap > img{
    display:block !important;
    position:relative !important;
    z-index:1 !important;
  }

  body[data-page="portfolio"] .map-area{
    position:absolute !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    z-index:5 !important;
    text-decoration:none !important;
    cursor:pointer !important;
    pointer-events:auto !important;
    background:transparent !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  body[data-page="portfolio"] .map-area::before,
  body[data-page="portfolio"] .map-area::after,
  body[data-page="portfolio"] .map-area .area-label,
  body[data-page="portfolio"] .map-pin .pin-dot,
  body[data-page="portfolio"] .map-pin .pin-label{
    display:none !important;
    content:none !important;
  }

  body[data-page="portfolio"] .map-word-label{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-style:italic !important;
    font-size:11px !important;
    line-height:1.07 !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
    color:rgba(22,22,22,.94) !important;
    text-decoration:none !important;
    text-shadow:0 0 0.2px rgba(22,22,22,.7) !important;
    pointer-events:none !important;
    white-space:normal !important;
  }

  body[data-page="portfolio"] .map-area:hover .map-word-label,
  body[data-page="portfolio"] .map-area:focus-visible .map-word-label{
    color:#8a0000 !important;
    text-decoration:underline !important;
    text-underline-offset:2px !important;
  }

  body[data-page="portfolio"] .map-area:hover,
  body[data-page="portfolio"] .map-area:focus-visible{
    background:transparent !important;
    outline:0 !important;
    box-shadow:none !important;
  }

  body[data-page="portfolio"] .map-pin{
    position:absolute !important;
    display:block !important;
    width:18px !important;
    height:18px !important;
    transform:translate(-50%,-50%) !important;
    z-index:6 !important;
    cursor:pointer !important;
    background:transparent !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  body[data-page="portfolio"] .pin-hitbox{
    position:absolute !important;
    left:-6px !important;
    top:-6px !important;
    width:30px !important;
    height:30px !important;
    background:transparent !important;
    border-radius:50% !important;
    box-shadow:none !important;
  }

  body[data-page="portfolio"] .map-pin:hover .pin-hitbox,
  body[data-page="portfolio"] .map-pin:focus-visible .pin-hitbox{
    box-shadow:0 0 0 2px rgba(255,255,255,.9) !important;
  }
}


/* ================================================================
   FINAL DESKTOP ALIGNMENT — v44
   Sovrascrive tutti i blocchi precedenti per allineamento Wix.
   Tutte le correzioni desktop dentro @media(min-width:801px).
   ================================================================ */

/* --- Portfolio (tutte le larghezze: il layout è semplice) --- */
body[data-page="portfolio"] {
  background: #f0f1f2;
}
body[data-page="portfolio"] .portfolio-page {
  background: #f0f1f2;
  min-height: 720px;
  padding-top: 14px;
  padding-bottom: 30px;
}
body[data-page="portfolio"] .portfolio-wrap {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  text-align: center;
}
body[data-page="portfolio"] .portfolio-wrap h1 {
  font-size: 56px;
  line-height: 1;
  margin: 0 0 38px;
}
body[data-page="portfolio"] .map-box {
  position: relative;
  width: 760px;
  max-width: 100%;
  margin: 0 auto;
  border: 0;
  background: transparent;
  overflow: visible;
}
body[data-page="portfolio"] .map-box > img {
  display: block;
  width: 100%;
  height: auto;
}
body[data-page="portfolio"] .map-note {
  font-size: 26px;
  line-height: 1.15;
  margin: 20px 0 0;
  color: #111;
  font-weight: 300;
  white-space: nowrap;
}
/* Overlay trasparenti: nomi progetti */
body[data-page="portfolio"] .map-area {
  position: absolute;
  display: block;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  cursor: pointer;
  z-index: 20;
  text-decoration: none;
}
body[data-page="portfolio"] .map-area:hover {
  background: rgba(255,255,255,.06);
}
/* Overlay trasparenti: pin rossi */
body[data-page="portfolio"] .map-pin {
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  outline: 0;
  cursor: pointer;
  z-index: 21;
  text-decoration: none;
}
body[data-page="portfolio"] .map-pin:hover {
  background: rgba(255,255,255,.08);
  border-radius: 50%;
}
/* Nascondi tutto ciò che non deve essere visibile */
body[data-page="portfolio"] .map-word-label,
body[data-page="portfolio"] .area-label,
body[data-page="portfolio"] .pin-label,
body[data-page="portfolio"] .pin-dot,
body[data-page="portfolio"] .pin-hitbox,
body[data-page="portfolio"] .portfolio-project-list {
  display: none !important;
}

/* Mobile portfolio */
@media(max-width:800px){
  body[data-page="portfolio"] .portfolio-wrap h1 { font-size: 25px; margin-bottom: 18px; }
  body[data-page="portfolio"] .map-note { font-size: 13px; white-space: normal; }
}

/* ================================================================ */
@media(min-width:801px){

  /* --- HOME --- */
  body[data-page="home"] .hero-block {
    display: grid;
    grid-template-columns: 580px 300px;
    align-items: stretch;
    width: min(880px, calc(100% - 32px));
    margin: 0 auto;
  }
  body[data-page="home"] .hero-image-wrap,
  body[data-page="home"] .hero-text {
    height: 900px;
    min-height: 900px;
  }
  body[data-page="home"] .hero-text {
    background: #eceeef;
    padding: 34px 22px 24px;
    overflow: hidden;
    text-align: center;
  }
  body[data-page="home"] .hero-text h1 {
    font-family: var(--font-script);
    font-size: 36px;
    line-height: 1.06;
    margin: 0 0 48px;
    color: var(--gold);
  }
  body[data-page="home"] .hero-text p {
    font-size: 22px;
    line-height: 1.45;
    color: #222;
    font-weight: 300;
  }
  body[data-page="home"] .portfolio-label {
    right: 96px;
    bottom: 180px;
    font-size: 28px;
    padding: 7px 30px 8px;
    border-width: 3px;
  }
  body[data-page="home"] .hero-hand-icon {
    right: 136px;
    bottom: 120px;
    width: 48px;
  }
  body[data-page="home"] .cert-badge {
    left: 32px;
    bottom: 88px;
    width: 92px;
    height: 92px;
    font-size: 12px;
  }
  body[data-page="home"] .cert-badge strong {
    font-size: 12px;
  }

  /* Carousel */
  body[data-page="home"] .home-carousel {
    width: min(880px, calc(100% - 32px));
    margin: 0 auto;
  }
  body[data-page="home"] .carousel-stage {
    height: 300px;
  }
  body[data-page="home"] .carousel-slide {
    width: 108%;
    height: 100%;
    object-fit: cover;
  }

  /* Servizi */
  body[data-page="home"] .services-section {
    background: #fff;
    border-top: 30px solid #f0f1f2;
    padding-top: 22px;
    margin-top: 0;
  }
  body[data-page="home"] .services-section > .narrow {
    width: min(880px, calc(100% - 32px));
    max-width: 880px;
    margin: 0 auto;
  }
  body[data-page="home"] .services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  body[data-page="home"] .services-grid h2 {
    font-size: 42px;
    line-height: 1;
    height: 58px;
    margin: 0 0 14px;
  }
  body[data-page="home"] .services-grid .black-script {
    font-size: 50px;
    padding-left: 14px;
  }
  body[data-page="home"] .service-img,
  body[data-page="home"] .service-copy {
    height: 360px;
    min-height: 360px;
  }
  body[data-page="home"] .service-copy {
    background: #f1f2f3;
    padding: 16px 34px 12px;
    font-size: 21px;
    line-height: 1.42;
    color: #333;
    text-align: center;
    overflow: hidden;
  }
  body[data-page="home"] .media-row {
    width: min(880px, calc(100% - 32px));
    max-width: 880px;
    margin: 18px auto 0;
    background: #000;
    display: flex;
    justify-content: center;
  }
  body[data-page="home"] .media-row video {
    width: 100%;
    height: 285px;
    object-fit: contain;
    background: #000;
  }

  /* Cappotto termico */
  body[data-page="home"] .cappotto-section {
    position: relative;
    background: #fff;
    border-top: 30px solid #f0f1f2;
    padding: 30px 0 90px;
    width: min(880px, calc(100% - 32px));
    max-width: 880px;
    margin: 0 auto;
  }
  body[data-page="home"] .cappotto-section h2 {
    font-family: var(--font-script);
    font-size: 42px;
    line-height: 1;
    margin: 0 0 38px;
    text-align: center;
    color: var(--gold);
  }
  body[data-page="home"] .cappotto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  body[data-page="home"] .cappotto-copy,
  body[data-page="home"] .cappotto-grid img {
    height: 340px;
    min-height: 340px;
  }
  body[data-page="home"] .cappotto-copy {
    background: #f1f2f3;
    padding: 32px 30px;
    font-size: 16px;
    line-height: 1.68;
    color: #777;
    overflow: hidden;
  }

  /* --- CLIENTI --- */
  body[data-page="clienti"] .simple-page {
    width: min(900px, calc(100% - 32px));
    max-width: 900px;
    padding-top: 58px;
    min-height: 610px;
  }
  body[data-page="clienti"] .simple-page h1 {
    font-size: 60px;
    line-height: 1;
    margin: 0 0 16px;
  }
  body[data-page="clienti"] .subtitle {
    font-size: 20px;
    margin: 0 0 56px;
  }
  body[data-page="clienti"] .clienti-logos {
    width: 760px;
    gap: 26px;
  }
  body[data-page="clienti"] .clienti-logos .logo-edile { width: 720px; }
  body[data-page="clienti"] .logo-bruedil { width: 245px; }
  body[data-page="clienti"] .logo-triaca  { width: 300px; }
  body[data-page="clienti"] .logo-norkos  { width: 280px; }
  body[data-page="clienti"] .logo-nardello { width: 315px; }
  body[data-page="clienti"] .logo-vittadello { width: 285px; }
  body[data-page="clienti"] .logo-row { gap: 28px; }

  /* --- PARTNER --- */
  body[data-page="partner"] .partner-page {
    background: #f0f1f2;
    min-height: 560px;
    padding-top: 60px;
  }
  body[data-page="partner"] .simple-page h1 {
    font-size: 60px;
    line-height: 1;
    margin: 0 0 74px;
  }
  body[data-page="partner"] .partner-card {
    width: 650px;
    min-height: 300px;
    margin: 0 auto 22px;
    padding: 28px 44px 44px;
    background: #efefef;
  }
  body[data-page="partner"] .partner-card:before {
    width: 24px;
    height: 3px;
    margin: -46px auto 38px;
  }
  body[data-page="partner"] .partner-card img {
    width: 142px;
    height: 142px;
    padding: 28px;
    margin: 0 auto 18px;
  }
  body[data-page="partner"] .partner-card h2 { font-size: 16px; }
  body[data-page="partner"] .partner-card p  { margin: 58px 0 0; font-size: 12px; }

  /* --- CONTATTI --- */
  body[data-page="contatti"] .simple-page {
    width: min(900px, calc(100% - 32px));
    max-width: 900px;
    padding-top: 64px;
    min-height: 720px;
  }
  body[data-page="contatti"] .simple-page h1 {
    font-size: 60px;
    line-height: 1;
    margin: 0 0 34px;
  }
  body[data-page="contatti"] .simple-contact-block {
    width: 520px;
    margin: 0 auto;
    text-align: left;
    font-size: 16px;
    line-height: 2.1;
    color: #555;
    font-family: var(--font-avenir);
    font-weight: 300;
  }
  body[data-page="contatti"] .simple-contact-block p { margin: 0 0 22px; }
  body[data-page="contatti"] .simple-contact-block p:nth-child(2) { margin-bottom: 44px; }
  body[data-page="contatti"] .simple-contact-block a { color: inherit; }
  body[data-page="contatti"] .simple-contact-block a:hover { color: var(--gold); }

  /* --- FOOTER pagine interne --- */
  body:not([data-page="home"]) .footer-inner { display: none; }
  body:not([data-page="home"]) .copyright {
    background: transparent;
    color: #aaa;
    font-size: 10px;
    padding: 10px 0 16px;
  }

} /* fine @media(min-width:801px) */


/* ================================================================
   FINAL PATCH — v45
   ================================================================ */

/* 1. Partner — sfondo sezione più visibile */
body[data-page="partner"] .partner-page {
  background: #e6e7e8 !important;
}
body[data-page="partner"] .partner-card {
  background: #f0f0f0 !important;
}

/* 2. Portfolio — copyright in fascia bianca sotto */
body[data-page="portfolio"] .portfolio-page {
  background: #f0f1f2 !important;
}
body[data-page="portfolio"] .site-footer,
body[data-page="portfolio"] .copyright {
  background: #fff !important;
}
body[data-page="portfolio"] .footer-inner {
  display: none !important;
}
body[data-page="portfolio"] .copyright {
  color: #aaa !important;
  font-size: 10px !important;
  text-align: center !important;
  padding: 12px 0 18px !important;
}

/* 3. Portfolio — overlay invisibili nomi e pin */
body[data-page="portfolio"] .map-box {
  position: relative !important;
}
body[data-page="portfolio"] .map-area,
body[data-page="portfolio"] .map-pin {
  position: absolute !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  text-decoration: none !important;
}
body[data-page="portfolio"] .map-area {
  z-index: 30 !important;
}
body[data-page="portfolio"] .map-pin {
  width: 30px !important;
  height: 30px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  z-index: 31 !important;
}
body[data-page="portfolio"] .map-area:hover {
  background: rgba(255,255,255,.03) !important;
}
body[data-page="portfolio"] .map-word-label,
body[data-page="portfolio"] .area-label,
body[data-page="portfolio"] .pin-label,
body[data-page="portfolio"] .pin-dot,
body[data-page="portfolio"] .pin-hitbox,
body[data-page="portfolio"] .portfolio-project-list {
  display: none !important;
}

@media(min-width:801px){

/* 4. Home Servizi — testo più grande, box più compatto */
body[data-page="home"] .service-img,
body[data-page="home"] .service-copy {
  height: 340px !important;
  min-height: 340px !important;
}
body[data-page="home"] .service-copy {
  font-size: 22px !important;
  line-height: 1.38 !important;
  color: #333 !important;
  padding: 18px 32px !important;
  overflow: hidden !important;
}

/* 5. Home Cappotto — testo più grande, blocco proporzionato */
body[data-page="home"] .cappotto-copy,
body[data-page="home"] .cappotto-grid img {
  height: 350px !important;
  min-height: 350px !important;
}
body[data-page="home"] .cappotto-copy {
  font-size: 17px !important;
  line-height: 1.62 !important;
  color: #666 !important;
  padding: 30px 30px !important;
  overflow: hidden !important;
}

/* 6. Carousel e video — width 100%, no 108% */
body[data-page="home"] .carousel-slide {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
body[data-page="home"] .media-row video {
  width: 100% !important;
  height: 285px !important;
  object-fit: contain !important;
  background: #000 !important;
}

} /* fine @media(min-width:801px) */


/* ================================================================
   FINAL PATCH v46 — titoli + partner bg
   ================================================================ */

/* Partner: tutto il body grigio, header e copyright bianchi */
body[data-page="partner"] {
  background: #e8e9ea !important;
}
body[data-page="partner"] .site-header {
  background: #fff !important;
}
body[data-page="partner"] .partner-page {
  background: #e8e9ea !important;
  min-height: calc(100vh - 152px) !important;
}
body[data-page="partner"] .partner-card {
  background: #f2f2f2 !important;
}
body[data-page="partner"] .copyright {
  background: #fff !important;
  color: #aaa !important;
  font-size: 10px !important;
  padding: 12px 0 18px !important;
}

/* Titoli script grandi su tutte le pagine interne (desktop) */
@media(min-width:801px){
  .simple-page h1,
  .portfolio-wrap h1 {
    font-family: var(--font-script) !important;
    font-size: 64px !important;
    font-weight: 400 !important;
    color: var(--gold) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
  body[data-page="clienti"] .simple-page h1 { font-size: 60px !important; }
  body[data-page="portfolio"] .portfolio-wrap h1 { font-size: 58px !important; }
}


/* v47: portfolio project links separated above map; no invisible overlays on the image */
body[data-page="portfolio"] .portfolio-project-list{
  width:min(1000px, calc(100% - 32px));
  margin:0 auto 26px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px 22px;
  text-align:center;
}

body[data-page="portfolio"] .portfolio-project-list a{
  display:inline-block;
  color:#111;
  font-family:var(--font-avenir);
  font-size:15px;
  line-height:1.25;
  font-weight:300;
  text-decoration:none;
  border-bottom:1px solid rgba(17,17,17,.35);
  padding-bottom:2px;
  cursor:pointer;
}

body[data-page="portfolio"] .portfolio-project-list a:hover,
body[data-page="portfolio"] .portfolio-project-list a:focus-visible{
  color:#7f1416;
  border-bottom-color:#7f1416;
  outline:none;
}

body[data-page="portfolio"] .map-box{
  position:relative;
}

body[data-page="portfolio"] .map-box .map-area,
body[data-page="portfolio"] .map-box .map-pin{
  display:none !important;
  pointer-events:none !important;
}

@media (max-width:700px){
  body[data-page="portfolio"] .portfolio-project-list{
    gap:9px 14px;
    margin-bottom:20px;
  }

  body[data-page="portfolio"] .portfolio-project-list a{
    font-size:13px;
  }
}

/* v47 FIX: lista progetti realmente visibile e cliccabile sopra la mappa */
body[data-page="portfolio"] .portfolio-project-list,
body[data-page="portfolio"] #portfolioProjectLinks {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px 18px !important;
  width: min(980px, 100%) !important;
  margin: -18px auto 26px !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 50 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1;
}

body[data-page="portfolio"] .portfolio-project-list a,
body[data-page="portfolio"] #portfolioProjectLinks a {
  display: inline-block !important;
  position: relative !important;
  z-index: 60 !important;
  color: #111 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  background: transparent !important;
}

body[data-page="portfolio"] .portfolio-project-list a:hover,
body[data-page="portfolio"] #portfolioProjectLinks a:hover,
body[data-page="portfolio"] .portfolio-project-list a:focus-visible,
body[data-page="portfolio"] #portfolioProjectLinks a:focus-visible {
  color: #b68b1b !important;
  outline: none !important;
}

/* la mappa non contiene più hotspot: resta solo immagine */
body[data-page="portfolio"] #portfolioMap,
body[data-page="portfolio"] .map-box {
  pointer-events: none !important;
}
body[data-page="portfolio"] #portfolioMap img,
body[data-page="portfolio"] .map-box > img {
  pointer-events: none !important;
}

@media(max-width:800px){
  body[data-page="portfolio"] .portfolio-project-list,
  body[data-page="portfolio"] #portfolioProjectLinks {
    gap: 8px 12px !important;
    margin: 0 auto 18px !important;
  }
  body[data-page="portfolio"] .portfolio-project-list a,
  body[data-page="portfolio"] #portfolioProjectLinks a {
    font-size: 13px !important;
  }
}


/* v55: portfolio map corrected to match original crop, pin style, font, and caption */
body[data-page="portfolio"] .portfolio-project-list{
  display:none !important;
}

body[data-page="portfolio"] .portfolio-wrap-map{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
}

body[data-page="portfolio"] .map-box-clean{
  position:relative;
  width:min(100%, 1061px);
  margin:0 auto;
  background:#fff;
  border:1px solid #dddddd;
  padding:6px;
  box-sizing:border-box;
  overflow:hidden;
}

body[data-page="portfolio"] .map-box-clean img{
  display:block;
  width:100%;
  height:auto;
}

body[data-page="portfolio"] .portfolio-map-overlay{
  position:absolute;
  inset:6px;
  pointer-events:none;
}

body[data-page="portfolio"] .map-project-link{
  position:absolute;
  left:var(--x);
  top:var(--y);
  display:block;
  width:max-content;
  max-width:none;
  text-align:center;
  text-decoration:none;
  color:#111 !important;
  font-family:"Cookie", "Kaushan Script", "Segoe Print", "Brush Script MT", cursive !important;
  font-size:19px !important;
  word-spacing:1px;
  line-height:0.92;
  font-weight:400 !important;
  letter-spacing:0 !important;
  z-index:3;
  pointer-events:auto;
  transform:translate(calc(-50% + var(--dx, 0px)), calc(11px + var(--dy, 0px)));
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body[data-page="portfolio"] .map-project-link.align-left{
  transform:translate(var(--dx, 0px), calc(11px + var(--dy, 0px)));
  text-align:left;
}

body[data-page="portfolio"] .map-project-link.align-right{
  transform:translate(calc(-100% + var(--dx, 0px)), calc(11px + var(--dy, 0px)));
  text-align:right;
}

body[data-page="portfolio"] .map-project-pin{
  position:absolute;
  left:50%;
  top:-21px;
  width:15px;
  height:22px;
  transform:translateX(-50%);
  background:url('assets/site/portfolio-pin-original-tight.png') center/contain no-repeat;
  filter:none;
}

body[data-page="portfolio"] .map-project-text{
  display:block;
  white-space:nowrap;
  color:#111 !important;
  text-shadow:none !important;
  font-weight:700 !important;
  -webkit-text-stroke:0.08px rgba(17,17,17,.75);
  font-family:"Cookie", "Kaushan Script", "Segoe Print", "Brush Script MT", cursive !important;
  font-size:inherit !important;
  font-weight:400 !important;
}

body[data-page="portfolio"] .map-project-link:hover .map-project-text,
body[data-page="portfolio"] .map-project-link:focus-visible .map-project-text{
  color:#000 !important;
  text-decoration:underline;
}

body[data-page="portfolio"] .map-project-link:focus-visible{
  outline:none;
}

body[data-page="portfolio"] .map-note{
  margin-top:28px;
  font-size:22px;
  line-height:1.16;
}

@media (max-width: 900px){
  body[data-page="portfolio"] .map-project-link{
    font-size:16px !important;
    max-width:none;
    transform:translate(calc(-50% + var(--dx, 0px)), calc(9px + var(--dy, 0px)));
  }

  body[data-page="portfolio"] .map-project-link.align-left{
    transform:translate(var(--dx, 0px), calc(9px + var(--dy, 0px)));
  }

  body[data-page="portfolio"] .map-project-link.align-right{
    transform:translate(calc(-100% + var(--dx, 0px)), calc(9px + var(--dy, 0px)));
  }

  body[data-page="portfolio"] .map-project-pin{
    width:12px;
    height:18px;
    top:-18px;
  }
}

/* ================================================================
   FINAL PATCH v47 — partner: inversione grigi sfondo/box
   ================================================================ */
body[data-page="partner"] {
  background: #f2f2f2 !important;
}
body[data-page="partner"] .partner-page {
  background: #f2f2f2 !important;
}
body[data-page="partner"] .partner-card {
  background: #e8e9ea !important;
}


/* v6: clienti page logo layout aligned to original site */
body[data-page="clienti"] .clienti-logos{
  width: 760px !important;
  max-width: 100%;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 24px !important;
  margin: 0 auto 18px !important;
}
body[data-page="clienti"] .clienti-logos .logo-edile{
  width: 620px !important;
  max-width: 100%;
  display: block;
  margin: 0 auto 2px !important;
}
body[data-page="clienti"] .clienti-logos .logo-row{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  width:100%;
  margin:0 auto;
}
body[data-page="clienti"] .clienti-logos .logo-row-top{
  width: 560px !important;
  transform: translateX(-2px);
  margin-top: 4px;
}
body[data-page="clienti"] .clienti-logos .logo-row-bottom{
  width: 585px !important;
  transform: translateX(-1px);
  margin-top: -2px;
}
body[data-page="clienti"] .logo-bruedil{ width: 228px !important; }
body[data-page="clienti"] .logo-triaca{ width: 280px !important; }
body[data-page="clienti"] .logo-norkos{ width: 266px !important; }
body[data-page="clienti"] .logo-nardello{ width: 306px !important; }
body[data-page="clienti"] .logo-vittadello{
  width: 270px !important;
  display:block;
  margin: 4px auto 0 !important;
}
@media (max-width: 900px){
  body[data-page="clienti"] .clienti-logos{width:min(760px,100%) !important;gap:20px !important;}
  body[data-page="clienti"] .clienti-logos .logo-edile{width:min(620px,100%) !important;}
  body[data-page="clienti"] .clienti-logos .logo-row-top{width:min(560px,100%) !important;transform:none;}
  body[data-page="clienti"] .clienti-logos .logo-row-bottom{width:min(585px,100%) !important;transform:none;}
  body[data-page="clienti"] .logo-bruedil{width:min(228px,42vw) !important;}
  body[data-page="clienti"] .logo-triaca{width:min(280px,48vw) !important;}
  body[data-page="clienti"] .logo-norkos{width:min(266px,45vw) !important;}
  body[data-page="clienti"] .logo-nardello{width:min(306px,50vw) !important;}
  body[data-page="clienti"] .logo-vittadello{width:min(270px,48vw) !important;}
}


/* v9: clienti - dimensioni e distanze copiate più fedelmente dall'originale */
body[data-page="clienti"] .clienti-logos{
  width: 760px !important;
  max-width: 100% !important;
  gap: 28px !important;
  margin: 0 auto 18px !important;
}
body[data-page="clienti"] .clienti-logos .logo-edile{
  width: 720px !important;
  max-width: 100% !important;
  margin: 0 auto 0 !important;
}
body[data-page="clienti"] .clienti-logos .logo-row{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 auto !important;
}
body[data-page="clienti"] .clienti-logos .logo-row-top{
  width: 650px !important;
  transform: none !important;
  margin-top: 0 !important;
}
body[data-page="clienti"] .clienti-logos .logo-row-bottom{
  width: 645px !important;
  transform: none !important;
  margin-top: -2px !important;
}
body[data-page="clienti"] .logo-bruedil{ width: 245px !important; }
body[data-page="clienti"] .logo-triaca{ width: 300px !important; }
body[data-page="clienti"] .logo-norkos{ width: 280px !important; }
body[data-page="clienti"] .logo-nardello{ width: 315px !important; }
body[data-page="clienti"] .logo-vittadello{
  width: 285px !important;
  margin: 0 auto 0 !important;
}
@media (max-width: 900px){
  body[data-page="clienti"] .clienti-logos{width:min(760px,100%) !important;gap:22px !important;}
  body[data-page="clienti"] .clienti-logos .logo-edile{width:min(720px,100%) !important;}
  body[data-page="clienti"] .clienti-logos .logo-row-top{width:min(650px,100%) !important;}
  body[data-page="clienti"] .clienti-logos .logo-row-bottom{width:min(645px,100%) !important;}
  body[data-page="clienti"] .logo-bruedil{width:min(245px,42vw) !important;}
  body[data-page="clienti"] .logo-triaca{width:min(300px,48vw) !important;}
  body[data-page="clienti"] .logo-norkos{width:min(280px,45vw) !important;}
  body[data-page="clienti"] .logo-nardello{width:min(315px,50vw) !important;}
  body[data-page="clienti"] .logo-vittadello{width:min(285px,48vw) !important;}
}


/* v10: clienti - correzioni richieste dall'utente */
body[data-page="clienti"] .clienti-logos .logo-edile{
  width: 576px !important; /* 20% più piccolo */
}
body[data-page="clienti"] .clienti-logos .logo-row-top{
  width: 620px !important;
}
body[data-page="clienti"] .logo-bruedil{
  width: 290px !important;
}
body[data-page="clienti"] .logo-triaca{
  width: 300px !important;
  transform: translateX(-10px);
}
body[data-page="clienti"] .logo-vittadello{
  width: 315px !important;
}
@media (max-width: 900px){
  body[data-page="clienti"] .clienti-logos .logo-edile{width:min(576px,100%) !important;}
  body[data-page="clienti"] .clienti-logos .logo-row-top{width:min(620px,100%) !important;}
  body[data-page="clienti"] .logo-bruedil{width:min(290px,46vw) !important;}
  body[data-page="clienti"] .logo-triaca{width:min(300px,48vw) !important; transform:none !important;}
  body[data-page="clienti"] .logo-vittadello{width:min(315px,52vw) !important;}
}


/* v11: clienti - Bruedil/Vittadello/Triaca fine tuning */
body[data-page="clienti"] .clienti-logos .logo-row-top{
  width: 700px !important;
}
body[data-page="clienti"] .logo-bruedil{
  width: 390px !important;
}
body[data-page="clienti"] .logo-triaca{
  transform: translateX(-5px) !important;
}
body[data-page="clienti"] .logo-vittadello{
  width: 378px !important;
}
@media (max-width: 900px){
  body[data-page="clienti"] .clienti-logos .logo-row-top{width:min(700px,100%) !important;}
  body[data-page="clienti"] .logo-bruedil{width:min(390px,58vw) !important;}
  body[data-page="clienti"] .logo-triaca{transform:none !important;}
  body[data-page="clienti"] .logo-vittadello{width:min(378px,58vw) !important;}
}


/* v12: clienti - Bruedil e Triaca micro-correzioni */
body[data-page="clienti"] .logo-bruedil{
  width: 312px !important; /* circa 20% meno grande rispetto a v11 */
  transform: translateX(-18px);
}
body[data-page="clienti"] .logo-triaca{
  transform: translateX(-12px) !important;
}
@media (max-width: 900px){
  body[data-page="clienti"] .logo-bruedil{width:min(312px,50vw) !important; transform:none !important;}
  body[data-page="clienti"] .logo-triaca{transform:none !important;}
}


/* v13: clienti - allinea Bruedil e Triaca con i loghi sotto */
body[data-page="clienti"] .clienti-logos .logo-row-top{
  width: 645px !important;
}
body[data-page="clienti"] .logo-bruedil{
  transform: translateX(-16px) !important;
}
body[data-page="clienti"] .logo-triaca{
  transform: translateX(-8px) !important;
}
@media (max-width: 900px){
  body[data-page="clienti"] .clienti-logos .logo-row-top{width:min(645px,100%) !important;}
  body[data-page="clienti"] .logo-bruedil{transform:none !important;}
  body[data-page="clienti"] .logo-triaca{transform:none !important;}
}


/* v14: chat button replaced with custom SVG */
.chat-button.chat-button-svg-wrap{
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  width: 164px !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
  cursor: pointer;
  z-index: 60;
}

.chat-button.chat-button-svg-wrap .chat-button-svg{
  display: block;
  width: 100%;
  height: auto;
}

.chat-button.chat-button-svg-wrap:hover{
  transform: translateY(-1px);
}

.chat-button.chat-button-svg-wrap:focus-visible{
  outline: 2px solid #0F7EDB;
  outline-offset: 4px;
  border-radius: 14px;
}

@media (max-width: 700px){
  .chat-button.chat-button-svg-wrap{
    right: 14px !important;
    bottom: 14px !important;
    width: 148px !important;
  }
}


/* v15: footer year + page-specific footer positioning */
body[data-page="contatti"] .simple-page{
  min-height: calc(100vh - 230px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

body[data-page="contatti"] .site-footer{
  margin-top: auto !important;
}

body[data-page="partner"] .partner-page{
  min-height: auto !important;
  padding-bottom: 18px !important;
}

body[data-page="partner"] .site-footer{
  margin-top: 12px !important;
}

body[data-page="clienti"] .site-footer{
  margin-top: 22px !important;
}


/* v16: header logo spacing + larger chat button */
.brand{
  gap: 10px !important;
}

.brand-clivma{
  width: 78px !important;
  max-height: none !important;
}

.brand-soa{
  margin-left: 0 !important;
}

.chat-button.chat-button-svg-wrap{
  width: 180px !important; /* +10% circa */
}

@media (max-width: 700px){
  .chat-button.chat-button-svg-wrap{
    width: 163px !important;
  }
}


/* v17: force header Clivma logo larger and closer to CQOP SOA */
.site-header .header-inner .brand{
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.site-header .header-inner .brand img.brand-clivma{
  width: 94px !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  transform: scale(1.2) !important;
  transform-origin: center right !important;
}

.site-header .header-inner .brand img.brand-soa{
  margin-left: -4px !important;
}


/* v18: home carousel smooth loop + image zoom to avoid black bands */
body[data-page="home"] .home-carousel,
body[data-page="home"] [data-home-carousel]{
  overflow: hidden !important;
  background: #fff !important;
}

body[data-page="home"] .carousel-slide{
  overflow: hidden !important;
  background: #fff !important;
}

body[data-page="home"] .carousel-slide img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.14) !important;
  transform-origin: center center !important;
  will-change: transform, opacity;
}

/* evita bande nere durante il pan */
body[data-page="home"] .carousel-slide.active img{
  animation: clivmaCarouselPanZoom 7200ms linear forwards !important;
}

@keyframes clivmaCarouselPanZoom{
  0%{
    transform: scale(1.16) translate3d(-2.5%, 0, 0);
  }
  48%{
    transform: scale(1.18) translate3d(2.5%, 0, 0);
  }
  100%{
    transform: scale(1.16) translate3d(-2.5%, 0, 0);
  }
}

/* transizione più pulita tra una slide e l'altra */
body[data-page="home"] .carousel-slide{
  opacity: 0;
  transition: opacity 900ms ease-in-out !important;
}

body[data-page="home"] .carousel-slide.active{
  opacity: 1;
}


/* v19: home carousel +20% zoom and earlier crossfade */
body[data-page="home"] .carousel-slide img{
  object-fit: cover !important;
  transform: scale(1.38) !important;
  transform-origin: center center !important;
}

body[data-page="home"] .carousel-slide.active img{
  animation: clivmaCarouselPanZoomV19 7400ms linear forwards !important;
}

/* zoom aumentato: circa +20% rispetto alla v18 */
@keyframes clivmaCarouselPanZoomV19{
  0%{
    transform: scale(1.39) translate3d(-2.2%, 0, 0);
  }
  46%{
    transform: scale(1.42) translate3d(2.2%, 0, 0);
  }
  100%{
    transform: scale(1.39) translate3d(-2.2%, 0, 0);
  }
}

/* crossfade più lungo, così la transizione parte prima e non si vede lo stop */
body[data-page="home"] .carousel-slide{
  transition: opacity 1400ms ease-in-out !important;
}


/* v20: home carousel corrected — one-way pan, no visible stop */
body[data-page="home"] .home-carousel,
body[data-page="home"] [data-home-carousel],
body[data-page="home"] .carousel-slide{
  overflow: hidden !important;
  background: #fff !important;
}

body[data-page="home"] .carousel-slide{
  opacity: 0;
  transition: opacity 1300ms ease-in-out !important;
}

body[data-page="home"] .carousel-slide.active{
  opacity: 1;
}

body[data-page="home"] .carousel-slide img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform-origin: center center !important;
  will-change: transform, opacity;
}

/* Pan monodirezionale: non torna indietro prima del cambio slide */
body[data-page="home"] .carousel-slide.active img{
  animation: clivmaCarouselPanOneWay 7800ms linear forwards !important;
}

@keyframes clivmaCarouselPanOneWay{
  0%{
    transform: scale(1.32) translate3d(-3.8%, 0, 0);
  }
  100%{
    transform: scale(1.32) translate3d(3.8%, 0, 0);
  }
}


/* v21: REAL carousel fix — slides are IMG elements, not containers */
body[data-page="home"] .carousel-stage{
  position: relative !important;
  overflow: hidden !important;
  background: #fff !important;
}

body[data-page="home"] img.carousel-slide{
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0;
  transform: scale(1.36) translate3d(-3.5%, 0, 0);
  transform-origin: center center !important;
  transition: opacity 1400ms ease-in-out !important;
  will-change: opacity, transform;
  z-index: 1;
}

body[data-page="home"] img.carousel-slide.active{
  opacity: 1;
  z-index: 2;
  animation: clivmaCarouselImgPanV21 7800ms linear forwards !important;
}

@keyframes clivmaCarouselImgPanV21{
  0%{
    transform: scale(1.36) translate3d(-3.5%, 0, 0);
  }
  100%{
    transform: scale(1.36) translate3d(3.5%, 0, 0);
  }
}

/* controls must stay above absolute images */
body[data-page="home"] .carousel-controls{
  position: absolute !important;
  z-index: 5 !important;
}

/* avoid the previous img-child animation rules having any effect */
body[data-page="home"] .carousel-slide.active img{
  animation: none !important;
}


/* v22: carousel animation unblocked — transform must not be !important */
body[data-page="home"] img.carousel-slide{
  transform: scale(1.36) translate3d(-3.5%, 0, 0);
}

body[data-page="home"] img.carousel-slide.active{
  animation: clivmaCarouselImgPanV22 7600ms linear forwards !important;
}

@keyframes clivmaCarouselImgPanV22{
  from{
    transform: scale(1.36) translate3d(-3.5%, 0, 0);
  }
  to{
    transform: scale(1.36) translate3d(3.5%, 0, 0);
  }
}


/* v23: carousel loop hard fix */
body[data-page="home"] img.carousel-slide{
  animation-fill-mode: both !important;
  backface-visibility: hidden;
}

body[data-page="home"] img.carousel-slide.active{
  animation-name: clivmaCarouselImgPanLoopV23 !important;
  animation-duration: 7600ms !important;
  animation-timing-function: linear !important;
  animation-fill-mode: forwards !important;
}

@keyframes clivmaCarouselImgPanLoopV23{
  0%{
    transform: scale(1.36) translate3d(-3.5%, 0, 0);
  }
  100%{
    transform: scale(1.36) translate3d(3.5%, 0, 0);
  }
}


/* v30: v23 layout preserved; stable carousel loop only */
body[data-page="home"] .home-carousel .carousel-stage{
  position: relative !important;
  overflow: hidden !important;
  background: #fff !important;
}

body[data-page="home"] .home-carousel img.carousel-slide{
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform-origin: center center !important;
  opacity: 0;
  will-change: opacity, transform;
  backface-visibility: hidden;
  animation-fill-mode: both !important;
}

body[data-page="home"] .home-carousel img.carousel-slide-a{
  animation: clivmaHomeCarouselA_v30 13s linear infinite !important;
}

body[data-page="home"] .home-carousel img.carousel-slide-b{
  animation: clivmaHomeCarouselB_v30 13s linear infinite !important;
}

body[data-page="home"] .home-carousel .carousel-stage.is-paused img.carousel-slide{
  animation-play-state: paused !important;
}

@keyframes clivmaHomeCarouselA_v30{
  0%   { opacity: 1; transform: scale(1.34) translate3d(-3.8%, 0, 0); }
  42%  { opacity: 1; transform: scale(1.34) translate3d(2.4%, 0, 0); }
  50%  { opacity: 0; transform: scale(1.34) translate3d(3.6%, 0, 0); }
  88%  { opacity: 0; transform: scale(1.34) translate3d(-5.0%, 0, 0); }
  96%  { opacity: 1; transform: scale(1.34) translate3d(-4.1%, 0, 0); }
  100% { opacity: 1; transform: scale(1.34) translate3d(-3.8%, 0, 0); }
}

@keyframes clivmaHomeCarouselB_v30{
  0%   { opacity: 0; transform: scale(1.34) translate3d(-5.0%, 0, 0); }
  42%  { opacity: 0; transform: scale(1.34) translate3d(-5.0%, 0, 0); }
  50%  { opacity: 1; transform: scale(1.34) translate3d(-3.8%, 0, 0); }
  92%  { opacity: 1; transform: scale(1.34) translate3d(2.4%, 0, 0); }
  100% { opacity: 0; transform: scale(1.34) translate3d(3.6%, 0, 0); }
}

/* central carousel button */
body[data-page="home"] .home-carousel .carousel-controls,
body[data-page="home"] .home-carousel .carousel-control{
  display: none !important;
}

body[data-page="home"] .home-carousel .carousel-toggle{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(43, 48, 52, .92) !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.18) !important;
  cursor: pointer !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0;
  transition: opacity .18s ease, background .18s ease, transform .18s ease !important;
}

body[data-page="home"] .home-carousel .carousel-stage:hover .carousel-toggle,
body[data-page="home"] .home-carousel .carousel-stage:focus-within .carousel-toggle,
body[data-page="home"] .home-carousel .carousel-stage.is-paused .carousel-toggle{
  opacity: 1;
}

body[data-page="home"] .home-carousel .carousel-toggle:hover{
  background: rgba(25, 28, 30, .95) !important;
  transform: translate(-50%, -50%) scale(1.04) !important;
}

body[data-page="home"] .home-carousel .carousel-toggle-icon{
  position: relative;
  width: 12px;
  height: 15px;
  display: block;
}

body[data-page="home"] .home-carousel .carousel-toggle-icon::before,
body[data-page="home"] .home-carousel .carousel-toggle-icon::after{
  content: "";
  position: absolute;
  top: 0;
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: #fff;
}

body[data-page="home"] .home-carousel .carousel-toggle-icon::before{
  left: 1px;
}

body[data-page="home"] .home-carousel .carousel-toggle-icon::after{
  right: 1px;
}

body[data-page="home"] .home-carousel .carousel-stage.is-paused .carousel-toggle-icon{
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #fff;
  margin-left: 3px;
}

body[data-page="home"] .home-carousel .carousel-stage.is-paused .carousel-toggle-icon::before,
body[data-page="home"] .home-carousel .carousel-stage.is-paused .carousel-toggle-icon::after{
  display: none;
}


/* v31: fix white carousel — opacity must be animatable */
body[data-page="home"] .home-carousel img.carousel-slide{
  opacity: 0;
}

body[data-page="home"] .home-carousel img.carousel-slide-a{
  animation: clivmaHomeCarouselA_v31 13s linear infinite !important;
}

body[data-page="home"] .home-carousel img.carousel-slide-b{
  animation: clivmaHomeCarouselB_v31 13s linear infinite !important;
}

@keyframes clivmaHomeCarouselA_v31{
  0%   { opacity: 1; transform: scale(1.34) translate3d(-3.8%, 0, 0); }
  42%  { opacity: 1; transform: scale(1.34) translate3d(2.4%, 0, 0); }
  50%  { opacity: 0; transform: scale(1.34) translate3d(3.6%, 0, 0); }
  88%  { opacity: 0; transform: scale(1.34) translate3d(-5.0%, 0, 0); }
  96%  { opacity: 1; transform: scale(1.34) translate3d(-4.1%, 0, 0); }
  100% { opacity: 1; transform: scale(1.34) translate3d(-3.8%, 0, 0); }
}

@keyframes clivmaHomeCarouselB_v31{
  0%   { opacity: 0; transform: scale(1.34) translate3d(-5.0%, 0, 0); }
  42%  { opacity: 0; transform: scale(1.34) translate3d(-5.0%, 0, 0); }
  50%  { opacity: 1; transform: scale(1.34) translate3d(-3.8%, 0, 0); }
  92%  { opacity: 1; transform: scale(1.34) translate3d(2.4%, 0, 0); }
  100% { opacity: 0; transform: scale(1.34) translate3d(3.6%, 0, 0); }
}




/* v33: carousel with real crossfade/dissolvenza */
body[data-page="home"] .home-carousel .carousel-stage{
  position: relative !important;
  overflow: hidden !important;
  background: #fff !important;
}

body[data-page="home"] .home-carousel img.carousel-slide{
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform-origin: center center !important;
  opacity: 0;
  visibility: visible !important;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* Prima immagine sopra: dissolve out, poi dissolve in */
body[data-page="home"] .home-carousel img.carousel-slide-a{
  z-index: 2;
  animation: clivmaCarouselFadeA_v33 13s linear infinite !important;
}

/* Seconda immagine sotto: dissolve in mentre la prima dissolve out */
body[data-page="home"] .home-carousel img.carousel-slide-b{
  z-index: 1;
  animation: clivmaCarouselFadeB_v33 13s linear infinite !important;
}

body[data-page="home"] .home-carousel .carousel-stage.is-paused img.carousel-slide{
  animation-play-state: paused !important;
}

@keyframes clivmaCarouselFadeA_v33{
  0%   { opacity: 1; transform: scale(1.34) translate3d(-3.8%, 0, 0); }
  40%  { opacity: 1; transform: scale(1.34) translate3d(2.2%, 0, 0); }
  50%  { opacity: 0; transform: scale(1.34) translate3d(3.4%, 0, 0); }

  86%  { opacity: 0; transform: scale(1.34) translate3d(-5.0%, 0, 0); }
  96%  { opacity: 1; transform: scale(1.34) translate3d(-4.0%, 0, 0); }
  100% { opacity: 1; transform: scale(1.34) translate3d(-3.8%, 0, 0); }
}

@keyframes clivmaCarouselFadeB_v33{
  0%   { opacity: 1; transform: scale(1.34) translate3d(-5.0%, 0, 0); }
  40%  { opacity: 1; transform: scale(1.34) translate3d(-5.0%, 0, 0); }
  50%  { opacity: 1; transform: scale(1.34) translate3d(-3.8%, 0, 0); }

  86%  { opacity: 1; transform: scale(1.34) translate3d(2.2%, 0, 0); }
  96%  { opacity: 1; transform: scale(1.34) translate3d(3.4%, 0, 0); }
  100% { opacity: 1; transform: scale(1.34) translate3d(3.6%, 0, 0); }
}


/* v34: carousel button fades out on mouse leave + 100% larger */
body[data-page="home"] .home-carousel .carousel-toggle{
  width: 68px !important;
  height: 68px !important;
  opacity: 0 !important;
  transition: opacity .28s ease, background .18s ease, transform .18s ease !important;
}

/* show only while hovering/focusing the button area; no sticky focus-within visibility */
body[data-page="home"] .home-carousel .carousel-stage:hover .carousel-toggle,
body[data-page="home"] .home-carousel .carousel-toggle:focus-visible{
  opacity: 1 !important;
}

/* override older rules that kept the button visible while paused/focused */
body[data-page="home"] .home-carousel .carousel-stage.is-paused .carousel-toggle{
  opacity: 0 !important;
}

body[data-page="home"] .home-carousel .carousel-stage.is-paused:hover .carousel-toggle,
body[data-page="home"] .home-carousel .carousel-stage.is-paused .carousel-toggle:focus-visible{
  opacity: 1 !important;
}

/* playing state = larger pause icon */
body[data-page="home"] .home-carousel .carousel-toggle-icon{
  width: 24px !important;
  height: 30px !important;
}

body[data-page="home"] .home-carousel .carousel-toggle-icon::before,
body[data-page="home"] .home-carousel .carousel-toggle-icon::after{
  width: 8px !important;
  height: 30px !important;
  border-radius: 4px !important;
}

body[data-page="home"] .home-carousel .carousel-toggle-icon::before{
  left: 2px !important;
}

body[data-page="home"] .home-carousel .carousel-toggle-icon::after{
  right: 2px !important;
}

/* paused state = larger play icon */
body[data-page="home"] .home-carousel .carousel-stage.is-paused .carousel-toggle-icon{
  width: 0 !important;
  height: 0 !important;
  border-top: 16px solid transparent !important;
  border-bottom: 16px solid transparent !important;
  border-left: 24px solid #fff !important;
  margin-left: 6px !important;
}


/* v35: pause button without circle + dark pause bars + black top border on carousel */
body[data-page="home"] .home-carousel .carousel-stage{
  border: 1px solid #000 !important;
  box-sizing: border-box !important;
}

body[data-page="home"] .home-carousel .carousel-toggle{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body[data-page="home"] .home-carousel .carousel-toggle:hover{
  background: transparent !important;
}

/* pause state appearance: no circle, dark bars */
body[data-page="home"] .home-carousel .carousel-toggle-icon::before,
body[data-page="home"] .home-carousel .carousel-toggle-icon::after{
  background: #1f1f1f !important;
}

/* keep play icon visible when paused */
body[data-page="home"] .home-carousel .carousel-stage.is-paused .carousel-toggle-icon{
  border-left-color: #1f1f1f !important;
}


/* v36: uniform carousel border + restore old play button style */
body[data-page="home"] .home-carousel .carousel-stage{
  border: 3px solid #000 !important;
  box-sizing: border-box !important;
}

/* PLAYING state (pause visible): no circle, dark II */
body[data-page="home"] .home-carousel .carousel-toggle{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body[data-page="home"] .home-carousel .carousel-toggle:hover{
  background: transparent !important;
}

body[data-page="home"] .home-carousel .carousel-toggle-icon::before,
body[data-page="home"] .home-carousel .carousel-toggle-icon::after{
  background: #1f1f1f !important;
}

/* PAUSED state (play visible): restore previous circular button */
body[data-page="home"] .home-carousel .carousel-stage.is-paused .carousel-toggle{
  background: rgba(43, 48, 52, .92) !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.18) !important;
  border-radius: 999px !important;
}

body[data-page="home"] .home-carousel .carousel-stage.is-paused .carousel-toggle:hover{
  background: rgba(25, 28, 30, .95) !important;
}

body[data-page="home"] .home-carousel .carousel-stage.is-paused .carousel-toggle-icon{
  border-left-color: #fff !important;
}


/* v37: center "Rifacimento facciata" title */
@media(min-width:801px){
  body[data-page="home"] .services-grid > div:nth-child(2){
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body[data-page="home"] .services-grid > div:nth-child(2) h2{
    width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* v38: center "Rifacimento facciata" on full page width + remove carousel border */
@media (min-width: 801px){
  /* keep the right block normal, but center the heading on the full services width */
  body[data-page="home"] .services-grid > div:nth-child(2){
    display: block !important;
  }

  body[data-page="home"] .services-grid > div:nth-child(2) h2{
    position: relative !important;
    left: -100% !important;
    width: 200% !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* remove carousel black border completely */
body[data-page="home"] .home-carousel .carousel-stage{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}


/* v39: hero title line breaks, top-only carousel border, portfolio button text larger */
body[data-page="home"] .hero-text h1{
  line-height: 1.06 !important;
}

body[data-page="home"] .portfolio-label{
  background: transparent !important;
  font-size: 27px !important; /* +50% circa */
  padding: 14px 32px !important;
}

body[data-page="home"] .portfolio-label:hover{
  background: transparent !important;
  color: #111 !important;
}

body[data-page="home"] .home-carousel{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body[data-page="home"] .home-carousel .carousel-stage{
  border-top: 3px solid #000 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}


/* v44: put "Portfolio" above the button, keep button same size, remove white background */
body[data-page="home"] .portfolio-label{
  position: absolute !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 108px !important;
  height: 38px !important;
  padding: 0 18px !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: transparent !important; /* hide inner text, keep for accessibility */
  overflow: visible !important;
}

body[data-page="home"] .portfolio-label::before{
  content: "Portfolio";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  font-family: var(--font-script);
  font-size: 41px !important; /* +50% circa rispetto alla versione base */
  line-height: 1;
  color: #111;
  white-space: nowrap;
  pointer-events: none;
}

body[data-page="home"] .portfolio-label:hover,
body[data-page="home"] .portfolio-label:focus{
  background: transparent !important;
  background-color: transparent !important;
  color: transparent !important;
}

body[data-page="home"] .portfolio-label:hover::before,
body[data-page="home"] .portfolio-label:focus::before{
  color: #111 !important;
}


/* v45: keep portfolio box in original position/size, move only label above, restore original hand */
body[data-page="home"] .portfolio-label{
  right: 112px !important;
  bottom: 230px !important;
  border: 3px solid #111 !important;
  padding: 7px 32px 8px !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  overflow: visible !important;
}

body[data-page="home"] .portfolio-label::before{
  content: "Portfolio";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  font-family: var(--font-script);
  font-size: 43px !important;
  line-height: 1;
  color: #111 !important;
  white-space: nowrap;
  pointer-events: none;
}

body[data-page="home"] .portfolio-label:hover,
body[data-page="home"] .portfolio-label:focus{
  background: transparent !important;
  background-color: transparent !important;
  color: transparent !important;
}

/* restore original hand icon size/position */
body[data-page="home"] .hero-hand-icon{
  right: 153px !important;
  bottom: 157px !important;
  width: 52px !important;
  height: auto !important;
}


/* v46: portfolio text above the box without moving the box; smaller original hand */
body[data-page="home"] .portfolio-label{
  right: 112px !important;
  bottom: 230px !important;
  display: inline-block !important;
  border: 3px solid #111 !important;
  padding: 7px 32px 8px !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
}

body[data-page="home"] .portfolio-label::before{
  content: "Portfolio";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%);
  font-family: var(--font-script);
  font-size: 43px !important;
  line-height: 1 !important;
  color: #111 !important;
  white-space: nowrap;
  pointer-events: none;
}

body[data-page="home"] .portfolio-label:hover,
body[data-page="home"] .portfolio-label:focus{
  background: transparent !important;
  background-color: transparent !important;
  color: transparent !important;
}

body[data-page="home"] .hero-hand-icon{
  right: 170px !important;
  bottom: 176px !important;
  width: 26px !important;
  height: auto !important;
  pointer-events: none !important;
}


/* v47: portfolio text overlaid on the box + exact user hand reference */
body[data-page="home"] .hero-image-wrap{
  --portfolio-right: 112px;
  --portfolio-bottom: 230px;
  --portfolio-width: 162px;
  --portfolio-height: 46px;
}

body[data-page="home"] .portfolio-label{
  right: var(--portfolio-right) !important;
  bottom: var(--portfolio-bottom) !important;
  width: var(--portfolio-width) !important;
  height: var(--portfolio-height) !important;
  min-width: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border: 2px solid #111 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
}

body[data-page="home"] .portfolio-label::before{
  content: "Portfolio";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -56%);
  font-family: var(--font-script);
  font-size: 44px !important;
  line-height: 1 !important;
  color: #111 !important;
  white-space: nowrap;
  pointer-events: none;
}

body[data-page="home"] .portfolio-label:hover,
body[data-page="home"] .portfolio-label:focus{
  background: transparent !important;
  background-color: transparent !important;
  color: transparent !important;
}

body[data-page="home"] .hero-hand-icon{
  right: calc(var(--portfolio-right) + (var(--portfolio-width) / 2) - 14px) !important;
  bottom: 186px !important;
  width: 28px !important;
  height: auto !important;
  pointer-events: none !important;
}


/* v48: move Portfolio text upward and use transparent hand icon */
body[data-page="home"] .portfolio-label{
  width: 162px !important;
  height: 46px !important;
  border: 2px solid #111 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body[data-page="home"] .portfolio-label::before{
  content: "Portfolio";
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  font-family: var(--font-script);
  font-size: 44px !important;
  line-height: 1 !important;
  color: #111 !important;
  white-space: nowrap;
  pointer-events: none;
}

body[data-page="home"] .hero-hand-icon{
  width: 24px !important;
  height: auto !important;
  right: calc(var(--portfolio-right) + (var(--portfolio-width) / 2) - 12px) !important;
  bottom: 184px !important;
  pointer-events: none !important;
}


/* v49: portfolio text slightly lower, double-line box, new clean hand, flower-like Mapei badge */
body[data-page="home"] .hero-image-wrap{
  --portfolio-right: 112px;
  --portfolio-bottom: 230px;
  --portfolio-width: 162px;
  --portfolio-height: 46px;
}

body[data-page="home"] .portfolio-label{
  right: var(--portfolio-right) !important;
  bottom: var(--portfolio-bottom) !important;
  width: var(--portfolio-width) !important;
  height: var(--portfolio-height) !important;
  min-width: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid #111 !important;
  outline: 1px solid #111 !important;
  outline-offset: -4px !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
}

body[data-page="home"] .portfolio-label::before{
  content: "Portfolio";
  position: absolute;
  left: 50%;
  top: 55% !important;
  transform: translate(-50%, -50%) !important;
  font-family: var(--font-script);
  font-size: 44px !important;
  line-height: 1 !important;
  color: #111 !important;
  white-space: nowrap;
  pointer-events: none;
}

body[data-page="home"] .hero-hand-icon{
  width: 24px !important;
  height: auto !important;
  right: calc(var(--portfolio-right) + (var(--portfolio-width) / 2) - 12px) !important;
  bottom: 184px !important;
  pointer-events: none !important;
  image-rendering: pixelated;
}

body[data-page="home"] .cert-badge{
  width: 96px !important;
  height: 96px !important;
  left: 22px !important;
  bottom: 98px !important;
  background: rgba(180,183,191,.58) !important;
  border-radius: 0 !important;
  clip-path: polygon(
    50% 0%,
    58% 5%, 68% 4%, 75% 11%, 85% 15%, 89% 25%, 96% 33%, 95% 43%,
    100% 50%,
    95% 58%, 96% 68%, 89% 75%, 85% 85%, 75% 89%, 68% 96%, 58% 95%,
    50% 100%,
    42% 95%, 32% 96%, 25% 89%, 15% 85%, 11% 75%, 4% 68%, 5% 58%,
    0% 50%,
    5% 43%, 4% 33%, 11% 25%, 15% 15%, 25% 11%, 32% 4%, 42% 5%
  ) !important;
}

body[data-page="home"] .cert-badge span{
  font-size: 11px !important;
}

body[data-page="home"] .cert-badge strong{
  font-size: 12px !important;
  margin-top: 4px !important;
}


/* v50: match the reference screenshot more closely */
body[data-page="home"] .hero-image-wrap{
  --portfolio-right: 112px;
  --portfolio-bottom: 230px;
  --portfolio-width: 162px;
  --portfolio-height: 46px;
}

body[data-page="home"] .portfolio-label{
  right: var(--portfolio-right) !important;
  bottom: var(--portfolio-bottom) !important;
  width: var(--portfolio-width) !important;
  height: var(--portfolio-height) !important;
  min-width: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid #111 !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
}

body[data-page="home"] .portfolio-label::after{
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid #111;
  pointer-events: none;
}

body[data-page="home"] .portfolio-label::before{
  content: "Portfolio";
  position: absolute;
  left: 50%;
  top: 46% !important;
  transform: translate(-50%, -50%) !important;
  font-family: var(--font-script);
  font-size: 43px !important;
  line-height: 1 !important;
  color: #111 !important;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

body[data-page="home"] .hero-hand-icon{
  width: 22px !important;
  height: auto !important;
  right: calc(var(--portfolio-right) + (var(--portfolio-width) / 2) - 11px) !important;
  bottom: 182px !important;
  pointer-events: none !important;
  image-rendering: pixelated;
}

body[data-page="home"] .cert-badge{
  left: 18px !important;
  bottom: 94px !important;
  width: 88px !important;
  height: 101px !important;
  background: url("assets/site/installatori_mapei_badge.svg") center/contain no-repeat !important;
  border-radius: 0 !important;
  clip-path: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  display: block !important;
}

body[data-page="home"] .cert-badge span,
body[data-page="home"] .cert-badge strong{
  display: none !important;
}


/* v52: refined according to discussion */
body[data-page="home"] .portfolio-label::before{
  top: 39% !important; /* text higher, but still inside the box */
  transform: translate(-50%, -50%) !important;
}

body[data-page="home"] .hero-hand-icon{
  width: 24px !important;
  height: auto !important;
  right: calc(var(--portfolio-right) + (var(--portfolio-width) / 2) - 12px) !important;
  bottom: 186px !important;
  pointer-events: none !important;
  image-rendering: pixelated;
}

body[data-page="home"] .cert-badge{
  left: 18px !important;
  bottom: 94px !important;
  width: 88px !important;
  height: 101px !important;
  background: url("assets/site/installatori_mapei_badge.svg") center/contain no-repeat !important;
  border-radius: 0 !important;
  clip-path: none !important;
  display: block !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

body[data-page="home"] .cert-badge span,
body[data-page="home"] .cert-badge strong{
  display: none !important;
}


/* v53: move Portfolio text 15px upward */
body[data-page="home"] .portfolio-label::before{
  top: calc(39% - 15px) !important;
}


/* v54: insert SVG badge in site, hand 10% smaller and 5px left, Portfolio 5% bigger and 5px up */
body[data-page="home"] .portfolio-label::before{
  top: calc(39% - 20px) !important;
  font-size: 45px !important;
}

body[data-page="home"] .hero-hand-icon{
  width: 22px !important;
  right: calc(var(--portfolio-right) + (var(--portfolio-width) / 2) - 7px) !important;
}

body[data-page="home"] .cert-badge{
  background: url("assets/site/installatori_mapei_badge.svg") center/contain no-repeat !important;
  width: 94px !important;
  height: 94px !important;
  left: 18px !important;
  bottom: 94px !important;
}


/* v56: use updated badge SVG and make it 300% larger */
body[data-page="home"] .cert-badge{
  background: url("assets/site/installatori_mapei_badge.svg") center/contain no-repeat !important;
  width: 282px !important;
  height: 282px !important;
}


/* v57: partner page Mapei logo 175% larger */
body[data-page="partner"] .partner-card img{
  width: 249px !important;
  height: 249px !important;
  padding: 0 !important;
  object-fit: contain !important;
}


/* v59: repeated requested changes */
body[data-page="partner"] .partner-card img{
  width: 212px !important;   /* 15% smaller than 249px */
  height: 212px !important;
}

body[data-page="home"] .cert-badge{
  width: 226px !important;   /* 20% smaller than 282px */
  height: 226px !important;
}

body[data-page="home"] .hero-text h1{
  font-size: 42px !important;   /* same size as "Rifacimento facciata" */
  line-height: 1 !important;
  text-align: center !important;
  margin: 0 0 14px !important;
}


/* v60: hard final override for requested visible changes */
html body[data-page="partner"] main.partner-page section.partner-card > img{
  width: 212px !important;
  height: 212px !important;
  padding: 0 !important;
  object-fit: contain !important;
}

html body[data-page="home"] .hero-text > h1{
  font-size: 42px !important;
  line-height: 1 !important;
  text-align: center !important;
  margin: 0 0 14px !important;
}

html body[data-page="home"] .cert-badge{
  width: 226px !important;
  height: 226px !important;
  background: url("assets/site/installatori_mapei_badge.svg") center/contain no-repeat !important;
}


/* v62: Portfolio hover like v38 — black box, white text */
body[data-page="home"] .portfolio-label:hover,
body[data-page="home"] .portfolio-label:focus{
  background: #111 !important;
  background-color: #111 !important;
  color: transparent !important;
}

body[data-page="home"] .portfolio-label:hover::before,
body[data-page="home"] .portfolio-label:focus::before{
  color: #fff !important;
}

body[data-page="home"] .portfolio-label:hover::after,
body[data-page="home"] .portfolio-label:focus::after{
  border-color: #fff !important;
}


/* v63: remove inner border line on Portfolio hover */
body[data-page="home"] .portfolio-label:hover::after,
body[data-page="home"] .portfolio-label:focus::after{
  border-color: transparent !important;
}


/* v64: wider right hero column + title closer to original */
@media (min-width: 801px){
  body[data-page="home"] .hero-block.narrow{
    grid-template-columns: 57.5% 42.5% !important;
  }

  body[data-page="home"] .hero-text{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body[data-page="home"] .hero-text h1{
    font-size: 52px !important;
    line-height: 1.03 !important;
    text-align: center !important;
    margin: 0 0 34px !important;
    white-space: normal !important;
  }
}


/* v65: replace Installatori Mapei with the uploaded image */
body[data-page="home"] .cert-badge{
  background: url("assets/site/installatori_mapei_badge.svg") center/contain no-repeat !important;
  width: 226px !important;
  height: 226px !important;
}


/* v66: restore home hero proportions and make title same size as "Rifacimento facciata" */
@media (min-width: 801px){
  body[data-page="home"] .hero-block.narrow{
    grid-template-columns: 61.5% 38.5% !important;
  }

  body[data-page="home"] .hero-text{
    padding: 24px 16px 20px !important;
  }

  body[data-page="home"] .hero-text h1{
    font-size: 34px !important;   /* same as .services-grid h2 */
    line-height: 1.04 !important;
    text-align: center !important;
    margin: 0 0 24px !important;
    white-space: normal !important;
  }
}


/* v67: enlarge "Rifacimento facciata" title */
@media (min-width: 801px){
  body[data-page="home"] .services-grid > div:nth-child(2) h2{
    font-size: 42px !important;
    line-height: 1 !important;
  }
}


/* v68: use the new exact Installatori Mapei SVG */
body[data-page="home"] .cert-badge{
  background: url("assets/site/installatori_mapei_badge.svg") center/contain no-repeat !important;
  width: 226px !important;
  height: 226px !important;
}


/* v69: force larger Rifacimento title + 50% smaller Installatori Mapei badge */
body[data-page="home"] .cert-badge{
  background: url("assets/site/installatori_mapei_badge.svg") center/contain no-repeat !important;
  width: 113px !important;
  height: 113px !important;
}


/* v70: make Rifacimento facciata clearly larger and detached from the box */
@media (min-width: 801px){
  body[data-page="home"] .services-grid > div:nth-child(2) h2{
    font-size: 64px !important;
    line-height: 1 !important;
    text-align: center !important;
    margin: 0 0 38px !important;
    display: block !important;
  }

  body[data-page="home"] .services-grid > div:nth-child(2) .service-copy{
    margin-top: 10px !important;
  }
}


/* v71: make Installatori Mapei 50% smaller and enlarge the hero title */
body[data-page="home"] .cert-badge{
  width: 113px !important;
  height: 113px !important;
  background: url("assets/site/installatori_mapei_badge.svg") center/contain no-repeat !important;
}

@media (min-width: 801px){
  body[data-page="home"] .hero-text h1{
    font-size: 50px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    margin: 0 0 24px !important;
  }
}


/* v72: remove previous inline conflicts and force visible changes */
html body[data-page="home"] .cert-badge{
  width: 113px !important;
  height: 113px !important;
  background: url("assets/site/installatori_mapei_badge.svg") center/contain no-repeat !important;
}

html body[data-page="home"] .hero-text h1{
  font-size: 58px !important;
  line-height: 1.04 !important;
  text-align: center !important;
  margin: 0 0 26px !important;
}


/* v73: hero title in 2 lines, hero area 100px shorter */
html body[data-page="home"] .hero-image-wrap{
  min-height: 750px !important;
  height: 750px !important;
}

html body[data-page="home"] .hero-text{
  min-height: 750px !important;
  height: 750px !important;
  padding-top: 22px !important;
}

html body[data-page="home"] .hero-text h1{
  font-size: 39px !important;
  line-height: 1.08 !important;
  text-align: center !important;
  margin: 0 0 24px !important;
  white-space: normal !important;
}


/* v74: hero cut only 50px and restore large title */
html body[data-page="home"] .hero-image-wrap{
  min-height: 800px !important;
  height: 800px !important;
}

html body[data-page="home"] .hero-text{
  min-height: 800px !important;
  height: 800px !important;
}

html body[data-page="home"] .hero-text h1{
  font-size: 58px !important;
  line-height: 1.04 !important;
  text-align: center !important;
  margin: 0 0 26px !important;
}


/* v75: hero title on one line outside the column + hero cut only 25px */
html body[data-page="home"] .hero-image-wrap{
  min-height: 825px !important;
  height: 825px !important;
}

html body[data-page="home"] .hero-text{
  min-height: 825px !important;
  height: 825px !important;
  overflow: visible !important;
}

html body[data-page="home"] .hero-text h1{
  font-size: 58px !important;
  line-height: 1.04 !important;
  text-align: center !important;
  margin: 0 0 26px !important;
  white-space: nowrap !important;
  display: block !important;
  width: max-content !important;
  max-width: none !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  z-index: 2 !important;
}


/* v76: hero title on 2 lines, hero cut only 15px */
html body[data-page="home"] .hero-image-wrap{
  min-height: 835px !important;
  height: 835px !important;
}

html body[data-page="home"] .hero-text{
  min-height: 835px !important;
  height: 835px !important;
}

html body[data-page="home"] .hero-text h1{
  font-size: 58px !important;
  line-height: 1.04 !important;
  text-align: center !important;
  margin: 0 0 26px !important;
  white-space: normal !important;
  display: block !important;
  overflow: visible !important;
  z-index: 2 !important;
}


/* v77: hero title on 2 lines, hero cut only 5px */
html body[data-page="home"] .hero-image-wrap{
  min-height: 845px !important;
  height: 845px !important;
}

html body[data-page="home"] .hero-text{
  min-height: 845px !important;
  height: 845px !important;
}

html body[data-page="home"] .hero-text h1{
  font-size: 58px !important;
  line-height: 1.04 !important;
  text-align: center !important;
  margin: 0 0 26px !important;
  white-space: normal !important;
  display: block !important;
  overflow: visible !important;
  z-index: 2 !important;
}


/* v78: remove hero photo cut, restore full original height */
html body[data-page="home"] .hero-image-wrap{
  min-height: 850px !important;
  height: 850px !important;
}

html body[data-page="home"] .hero-text{
  min-height: 850px !important;
  height: 850px !important;
}


/* v79: hero image + right column 10px taller */
html body[data-page="home"] .hero-image-wrap{
  min-height: 860px !important;
  height: 860px !important;
}

html body[data-page="home"] .hero-text{
  min-height: 860px !important;
  height: 860px !important;
}


/* v80: reduce spacing by 5px between the two hero title lines */
html body[data-page="home"] .hero-text h1 {
  line-height: 0.96 !important;
}
html body[data-page="home"] .hero-text h1 span:last-child {
  display: inline-block !important;
  margin-top: -5px !important;
}


/* v81: hero image + right column 15px taller */
html body[data-page="home"] .hero-image-wrap{
  min-height: 875px !important;
  height: 875px !important;
}

html body[data-page="home"] .hero-text{
  min-height: 875px !important;
  height: 875px !important;
}


/* v82: hard reduce spacing between hero title lines by 5px */
html body[data-page="home"] .hero-text h1.hero-title-tight{
  line-height: 1 !important;
}

html body[data-page="home"] .hero-text h1.hero-title-tight .hero-title-line-2{
  display: inline-block !important;
  margin-top: -5px !important;
}


/* v83: second hero title line -20px, hero area +30px */
html body[data-page="home"] .hero-text h1.hero-title-tight .hero-title-line-2{
  display: inline-block !important;
  margin-top: -20px !important;
}

html body[data-page="home"] .hero-image-wrap{
  min-height: 905px !important;
  height: 905px !important;
}

html body[data-page="home"] .hero-text{
  min-height: 905px !important;
  height: 905px !important;
}


/* v84: hero +30px more, title lines much tighter */
html body[data-page="home"] .hero-image-wrap{
  min-height: 935px !important;
  height: 935px !important;
}

html body[data-page="home"] .hero-text{
  min-height: 935px !important;
  height: 935px !important;
}

html body[data-page="home"] .hero-text h1.hero-title-tight{
  line-height: 0.9 !important;
}

html body[data-page="home"] .hero-text h1.hero-title-tight .hero-title-line-2{
  display: inline-block !important;
  margin-top: -40px !important;
}


/* v85: tighten hero title line spacing again */
html body[data-page="home"] .hero-text h1.hero-title-tight{
  line-height: 0.82 !important;
}

html body[data-page="home"] .hero-text h1.hero-title-tight .hero-title-line-2{
  display: inline-block !important;
  margin-top: -60px !important;
}


/* v86: align services image and right column */
body[data-page="home"] .services-grid{
  align-items: start !important;
}

body[data-page="home"] .services-grid > div{
  display: grid !important;
  grid-template-rows: 86px auto !important;
  align-content: start !important;
}

body[data-page="home"] .services-grid .black-script,
body[data-page="home"] .services-grid > div:nth-child(2) h2{
  min-height: 86px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
}

body[data-page="home"] .services-grid .black-script{
  justify-content: flex-start !important;
  padding-left: 20px !important;
}

body[data-page="home"] .services-grid > div:nth-child(2) h2{
  justify-content: center !important;
}

body[data-page="home"] .service-img,
body[data-page="home"] .service-copy{
  margin-top: 0 !important;
  align-self: start !important;
}


/* v87: align services image with right text column by lowering left image */
body[data-page="home"] .services-grid > div:first-child .service-img{
  margin-top: 38px !important;
}

body[data-page="home"] .services-grid > div:nth-child(2) .service-copy{
  margin-top: 0 !important;
}


/* v88: light fade-in when opening Clienti / Portfolio / Partner / Contatti */
body[data-page="clienti"] main,
body[data-page="portfolio"] main,
body[data-page="partner"] main,
body[data-page="contatti"] main{
  animation: pageFadeIn_v88 .45s ease-out both;
}

@keyframes pageFadeIn_v88{
  from{
    opacity: 0;
    transform: translateY(8px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}


/* v89: page fade only, no vertical movement */
body[data-page="clienti"] main,
body[data-page="portfolio"] main,
body[data-page="partner"] main,
body[data-page="contatti"] main{
  animation: pageFadeOnly_v89 .45s ease-out both !important;
}

@keyframes pageFadeOnly_v89{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}


/* v90: scroll fade for Cappotto Termico texts */
.fade-scroll{
  opacity: 0;
  transition: opacity .7s ease;
  will-change: opacity;
}
.fade-scroll.is-visible{
  opacity: 1;
}

body[data-page="home"] .cappotto-section h2.fade-scroll{
  transition-delay: 0s;
}
body[data-page="home"] .cappotto-section .cappotto-copy.fade-scroll{
  transition-delay: .12s;
}


/* v91: scroll fade also for Rifacimento facciata and footer contact data */
body[data-page="home"] .services-grid > div:nth-child(2) h2.fade-scroll{
  transition-delay: 0s;
}

.site-footer .footer-inner > div.fade-scroll:nth-child(1){ transition-delay: 0s; }
.site-footer .footer-inner > div.fade-scroll:nth-child(2){ transition-delay: .08s; }
.site-footer .footer-inner > div.fade-scroll:nth-child(3){ transition-delay: .16s; }
.site-footer .footer-inner > div.fade-scroll:nth-child(4){ transition-delay: .24s; }


/* v92: opening effect for the double-line Portfolio box */
body[data-page="home"] .portfolio-label{
  animation: portfolioBoxAppear_v92 .75s ease-out .25s both;
}

body[data-page="home"] .portfolio-label::before{
  animation: portfolioTextAppear_v92 .55s ease-out .55s both;
}

body[data-page="home"] .portfolio-label::after{
  animation: portfolioInnerLineAppear_v92 .55s ease-out .42s both;
}

@keyframes portfolioBoxAppear_v92{
  0%{
    opacity: 0;
    transform: scaleX(.18);
    transform-origin: left center;
  }
  65%{
    opacity: 1;
    transform: scaleX(1.035);
    transform-origin: left center;
  }
  100%{
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left center;
  }
}

@keyframes portfolioInnerLineAppear_v92{
  0%{
    opacity: 0;
    transform: scaleX(.15);
    transform-origin: left center;
  }
  100%{
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left center;
  }
}

@keyframes portfolioTextAppear_v92{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}


/* v93: opening effect only on Portfolio box, including inner line; text stays normal */
body[data-page="home"] .portfolio-label{
  animation: portfolioBoxAppear_v93 .75s ease-out .25s both !important;
  transform-origin: left center !important;
}

body[data-page="home"] .portfolio-label::after{
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* cancel previous text fade-in */
body[data-page="home"] .portfolio-label::before{
  animation: none !important;
  opacity: 1 !important;
}

@keyframes portfolioBoxAppear_v93{
  0%{
    opacity: 0;
    transform: scaleX(.18);
  }
  65%{
    opacity: 1;
    transform: scaleX(1.035);
  }
  100%{
    opacity: 1;
    transform: scaleX(1);
  }
}


/* v94: Portfolio text has no animation; only the double-line box animates */
body[data-page="home"] .portfolio-label{
  animation: none !important;
  transform: none !important;
  border-color: transparent !important;
}

body[data-page="home"] .portfolio-label::before{
  animation: none !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
}

/* draw outer + inner line as one animated box layer */
body[data-page="home"] .portfolio-label::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border: 1px solid #111 !important;
  box-shadow: inset 0 0 0 4px #111 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transform-origin: left center !important;
  animation: portfolioBoxLayerAppear_v94 .75s ease-out .25s both !important;
}

@keyframes portfolioBoxLayerAppear_v94{
  0%{
    opacity: 0;
    transform: scaleX(.18);
  }
  65%{
    opacity: 1;
    transform: scaleX(1.035);
  }
  100%{
    opacity: 1;
    transform: scaleX(1);
  }
}

/* hover: keep text behavior, but do not animate it */
body[data-page="home"] .portfolio-label:hover::before,
body[data-page="home"] .portfolio-label:focus::before{
  animation: none !important;
}


/* v95: Portfolio double-line box slide-in; text remains static */
body[data-page="home"] .portfolio-label{
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  overflow: visible !important;
  animation: none !important;
  transform: none !important;
}

body[data-page="home"] .portfolio-label::before{
  animation: none !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 3 !important;
}

/* one layer containing both the outer and inner box lines */
body[data-page="home"] .portfolio-label::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  opacity: 0;
  transform: translateX(-28px);
  animation: portfolioBoxSlideIn_v95 .55s ease-out .25s forwards !important;
  background:
    /* outer line */
    linear-gradient(#111,#111) 0 0 / 100% 1px no-repeat,
    linear-gradient(#111,#111) 0 100% / 100% 1px no-repeat,
    linear-gradient(#111,#111) 0 0 / 1px 100% no-repeat,
    linear-gradient(#111,#111) 100% 0 / 1px 100% no-repeat,

    /* inner line */
    linear-gradient(#111,#111) 4px 4px / calc(100% - 8px) 1px no-repeat,
    linear-gradient(#111,#111) 4px calc(100% - 4px) / calc(100% - 8px) 1px no-repeat,
    linear-gradient(#111,#111) 4px 4px / 1px calc(100% - 8px) no-repeat,
    linear-gradient(#111,#111) calc(100% - 4px) 4px / 1px calc(100% - 8px) no-repeat !important;
}

@keyframes portfolioBoxSlideIn_v95{
  0%{
    opacity: 0;
    transform: translateX(-28px);
  }
  100%{
    opacity: 1;
    transform: translateX(0);
  }
}

/* keep hover clean: box turns black, text white, inner line disappears */
body[data-page="home"] .portfolio-label:hover,
body[data-page="home"] .portfolio-label:focus{
  background: #111 !important;
  background-color: #111 !important;
}

body[data-page="home"] .portfolio-label:hover::before,
body[data-page="home"] .portfolio-label:focus::before{
  color: #fff !important;
  animation: none !important;
}

body[data-page="home"] .portfolio-label:hover::after,
body[data-page="home"] .portfolio-label:focus::after{
  opacity: 0 !important;
  animation: none !important;
}


/* v96: reliable Portfolio slide-in box with visible double line */
body[data-page="home"] .portfolio-label{
  position: absolute !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  animation: none !important;
  transform: none !important;
}

/* static text */
body[data-page="home"] .portfolio-label::before{
  content: "Portfolio" !important;
  position: absolute !important;
  left: 50% !important;
  top: 46% !important;
  transform: translate(-50%, -50%) !important;
  font-family: var(--font-script) !important;
  font-size: 45px !important;
  line-height: 1 !important;
  color: #111 !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  animation: none !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

/* disable old pseudo-border layers */
body[data-page="home"] .portfolio-label::after{
  content: none !important;
  display: none !important;
}

/* actual animated box layer */
body[data-page="home"] .portfolio-label .portfolio-box-slide{
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
  border: 1px solid #111 !important;
  transform: translateX(-32px) !important;
  opacity: 0 !important;
  animation: portfolioBoxSlideIn_v96 .55s ease-out .28s forwards !important;
}

/* inner line belongs to the same animated box */
body[data-page="home"] .portfolio-label .portfolio-box-slide::after{
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  border: 1px solid #111 !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}

@keyframes portfolioBoxSlideIn_v96{
  from{
    opacity: 0;
    transform: translateX(-32px);
  }
  to{
    opacity: 1;
    transform: translateX(0);
  }
}

/* hover: full black box, text white, no inner line */
body[data-page="home"] .portfolio-label:hover,
body[data-page="home"] .portfolio-label:focus{
  background: #111 !important;
  background-color: #111 !important;
}

body[data-page="home"] .portfolio-label:hover::before,
body[data-page="home"] .portfolio-label:focus::before{
  color: #fff !important;
  animation: none !important;
}

body[data-page="home"] .portfolio-label:hover .portfolio-box-slide,
body[data-page="home"] .portfolio-label:focus .portfolio-box-slide{
  opacity: 0 !important;
  animation: none !important;
}


/* v97: force Portfolio double-line box visible + slide animation */
body[data-page="home"] .portfolio-label{
  position: absolute !important;
  display: block !important;
  width: var(--portfolio-width, 162px) !important;
  height: var(--portfolio-height, 46px) !important;
  min-width: 162px !important;
  min-height: 46px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* disable old pseudo text/border layers, use real spans */
body[data-page="home"] .portfolio-label::before,
body[data-page="home"] .portfolio-label::after{
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* visible text, no animation */
body[data-page="home"] .portfolio-label .portfolio-text{
  position: absolute !important;
  left: 50% !important;
  top: 46% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 4 !important;
  font-family: var(--font-script) !important;
  font-size: 45px !important;
  line-height: 1 !important;
  color: #111 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* actual double-line box */
body[data-page="home"] .portfolio-label .portfolio-box-slide{
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  border: 1px solid #111 !important;
  opacity: 0;
  transform: translateX(-32px);
  animation: portfolioBoxSlideIn_v97 .55s ease-out .28s forwards !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

body[data-page="home"] .portfolio-label .portfolio-box-slide::after{
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  display: block !important;
  box-sizing: border-box !important;
  border: 1px solid #111 !important;
}

@keyframes portfolioBoxSlideIn_v97{
  0%{
    opacity: 0;
    transform: translateX(-32px);
  }
  100%{
    opacity: 1;
    transform: translateX(0);
  }
}

/* hover: black fill, white text, hide double-line layer */
body[data-page="home"] .portfolio-label:hover,
body[data-page="home"] .portfolio-label:focus{
  background: #111 !important;
  background-color: #111 !important;
}

body[data-page="home"] .portfolio-label:hover .portfolio-text,
body[data-page="home"] .portfolio-label:focus .portfolio-text{
  color: #fff !important;
}

body[data-page="home"] .portfolio-label:hover .portfolio-box-slide,
body[data-page="home"] .portfolio-label:focus .portfolio-box-slide{
  opacity: 0 !important;
}


/* v98: restore visible Portfolio double-line box, no extra layers */
body[data-page="home"] .portfolio-label{
  position: absolute !important;
  right: var(--portfolio-right, 112px) !important;
  bottom: var(--portfolio-bottom, 230px) !important;
  width: var(--portfolio-width, 162px) !important;
  height: var(--portfolio-height, 46px) !important;
  min-width: 162px !important;
  min-height: 46px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid #111 !important;
  outline: 1px solid #111 !important;
  outline-offset: -5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  color: #111 !important;
  font-family: var(--font-script) !important;
  font-size: 45px !important;
  line-height: 1 !important;
  animation: portfolioBoxSlideIn_v98 .55s ease-out .28s both !important;
  transform-origin: left center !important;
}

/* remove all previous pseudo/child box attempts */
body[data-page="home"] .portfolio-label::before,
body[data-page="home"] .portfolio-label::after,
body[data-page="home"] .portfolio-label .portfolio-box-slide,
body[data-page="home"] .portfolio-label .portfolio-text{
  content: none !important;
  display: none !important;
  animation: none !important;
}

@keyframes portfolioBoxSlideIn_v98{
  0%{
    opacity: 0;
    transform: translateX(-32px);
  }
  100%{
    opacity: 1;
    transform: translateX(0);
  }
}

/* hover: black box, white text, no inner white line */
body[data-page="home"] .portfolio-label:hover,
body[data-page="home"] .portfolio-label:focus{
  background: #111 !important;
  background-color: #111 !important;
  color: #fff !important;
  outline-color: transparent !important;
}


/* v99: make Portfolio slide-in clearly visible on page open */
body[data-page="home"] .portfolio-label{
  opacity: 0 !important;
  transform: translateX(-95px) !important;
  transition: opacity .85s ease-out, transform .85s ease-out !important;
  animation: none !important;
}

body[data-page="home"] .portfolio-label.portfolio-slide-visible{
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* keep static double line */
body[data-page="home"] .portfolio-label{
  border: 1px solid #111 !important;
  outline: 1px solid #111 !important;
  outline-offset: -5px !important;
}

/* hover preserved */
body[data-page="home"] .portfolio-label:hover,
body[data-page="home"] .portfolio-label:focus{
  background: #111 !important;
  background-color: #111 !important;
  color: #fff !important;
  outline-color: transparent !important;
}


/* v100: Portfolio box drawn progressively, as in the reference */
body[data-page="home"] .portfolio-label{
  position: absolute !important;
  right: var(--portfolio-right, 112px) !important;
  bottom: var(--portfolio-bottom, 230px) !important;
  width: var(--portfolio-width, 162px) !important;
  height: var(--portfolio-height, 46px) !important;
  min-width: 162px !important;
  min-height: 46px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: 0 !important;
  display: block !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  transition: background-color .18s ease !important;
  animation: none !important;
}

/* disable old pseudo layers */
body[data-page="home"] .portfolio-label::before,
body[data-page="home"] .portfolio-label::after{
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* text: no slide; light reveal only */
body[data-page="home"] .portfolio-label .portfolio-text{
  position: absolute !important;
  left: 50% !important;
  top: 46% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 4 !important;
  font-family: var(--font-script) !important;
  font-size: 45px !important;
  line-height: 1 !important;
  color: #111 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0 !important;
  animation: portfolioTextAppear_v100 .25s ease-out .42s forwards !important;
}

body[data-page="home"] .portfolio-draw-box{
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

body[data-page="home"] .draw-line{
  position: absolute !important;
  display: block !important;
  background: #111 !important;
  pointer-events: none !important;
}

/* outer box */
body[data-page="home"] .outer-left{
  left: 0;
  top: 0;
  width: 1px;
  height: 0;
  animation: drawVertical_v100 .16s ease-out .18s forwards;
}
body[data-page="home"] .outer-top{
  left: 0;
  top: 0;
  width: 0;
  height: 1px;
  animation: drawHorizontal_v100 .36s ease-out .30s forwards;
}
body[data-page="home"] .outer-bottom{
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  animation: drawHorizontal_v100 .36s ease-out .30s forwards;
}
body[data-page="home"] .outer-right{
  right: 0;
  top: 0;
  width: 1px;
  height: 0;
  animation: drawVertical_v100 .16s ease-out .64s forwards;
}

/* inner box */
body[data-page="home"] .inner-left{
  left: 4px;
  top: 4px;
  width: 1px;
  height: 0;
  animation: drawInnerVertical_v100 .16s ease-out .22s forwards;
}
body[data-page="home"] .inner-top{
  left: 4px;
  top: 4px;
  width: 0;
  height: 1px;
  animation: drawInnerHorizontal_v100 .36s ease-out .34s forwards;
}
body[data-page="home"] .inner-bottom{
  left: 4px;
  bottom: 4px;
  width: 0;
  height: 1px;
  animation: drawInnerHorizontal_v100 .36s ease-out .34s forwards;
}
body[data-page="home"] .inner-right{
  right: 4px;
  top: 4px;
  width: 1px;
  height: 0;
  animation: drawInnerVertical_v100 .16s ease-out .68s forwards;
}

@keyframes drawHorizontal_v100{
  from{ width: 0; }
  to{ width: 100%; }
}
@keyframes drawVertical_v100{
  from{ height: 0; }
  to{ height: 100%; }
}
@keyframes drawInnerHorizontal_v100{
  from{ width: 0; }
  to{ width: calc(100% - 8px); }
}
@keyframes drawInnerVertical_v100{
  from{ height: 0; }
  to{ height: calc(100% - 8px); }
}
@keyframes portfolioTextAppear_v100{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* hover: black fill, white text, no inner white line */
body[data-page="home"] .portfolio-label:hover,
body[data-page="home"] .portfolio-label:focus{
  background: #111 !important;
  background-color: #111 !important;
}

body[data-page="home"] .portfolio-label:hover .portfolio-text,
body[data-page="home"] .portfolio-label:focus .portfolio-text{
  color: #fff !important;
  opacity: 1 !important;
  animation: none !important;
}

body[data-page="home"] .portfolio-label:hover .portfolio-draw-box,
body[data-page="home"] .portfolio-label:focus .portfolio-draw-box{
  opacity: 0 !important;
}


/* v101: restore Portfolio text + black hover with white text */
body[data-page="home"] .portfolio-label .portfolio-text{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #111 !important;
  z-index: 5 !important;
  animation: none !important;
}

body[data-page="home"] .portfolio-label:hover,
body[data-page="home"] .portfolio-label:focus{
  background: #111 !important;
  background-color: #111 !important;
}

body[data-page="home"] .portfolio-label:hover .portfolio-text,
body[data-page="home"] .portfolio-label:focus .portfolio-text{
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

body[data-page="home"] .portfolio-label:hover .portfolio-draw-box,
body[data-page="home"] .portfolio-label:focus .portfolio-draw-box{
  opacity: 0 !important;
}


/* v102: mobile closing pass */
@media (max-width: 800px){

  html, body{
    width: 100%;
    overflow-x: hidden;
    background: #f0f1f2;
  }

  body{
    display: block;
  }

  .site-header{
    width: 100%;
    background: #fff !important;
  }

  .header-inner{
    width: 100% !important;
    max-width: none !important;
    height: 82px !important;
    min-height: 82px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
  }

  .brand{
    gap: 12px !important;
    align-items: center !important;
  }

  .brand-clivma{
    width: 72px !important;
    height: auto !important;
  }

  .brand-soa{
    width: 176px !important;
    height: auto !important;
  }

  .nav-toggle{
    display: block !important;
    font-size: 34px !important;
    line-height: 1 !important;
    margin-left: auto !important;
    padding: 4px 0 !important;
  }

  .home-page,
  main{
    width: 100% !important;
    max-width: none !important;
    background: #fff;
  }

  .narrow{
    width: 100% !important;
    max-width: none !important;
  }

  /* Home hero mobile */
  body[data-page="home"] .hero-block{
    display: block !important;
    width: 100% !important;
  }

  body[data-page="home"] .hero-image-wrap{
    width: 100% !important;
    height: 250px !important;
    min-height: 250px !important;
    overflow: hidden !important;
  }

  body[data-page="home"] .hero-image-wrap > img:first-child{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30% !important;
  }

  body[data-page="home"] .hero-text{
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    background: #fff !important;
    padding: 14px 18px 18px !important;
    box-sizing: border-box !important;
  }

  body[data-page="home"] .hero-text h1,
  body[data-page="home"] .hero-text h1.hero-title-tight{
    font-family: var(--font-body) !important;
    font-size: 24px !important;
    line-height: 1.28 !important;
    color: var(--gold) !important;
    font-weight: 300 !important;
    letter-spacing: 0 !important;
    margin: 0 0 8px !important;
    text-align: center !important;
  }

  body[data-page="home"] .hero-text h1 span,
  body[data-page="home"] .hero-text h1.hero-title-tight span{
    display: inline !important;
    margin: 0 !important;
    white-space: normal !important;
  }

  body[data-page="home"] .hero-text p{
    font-size: 16px !important;
    line-height: 1.52 !important;
    color: #111 !important;
    text-align: center !important;
    margin: 0 !important;
  }

  body[data-page="home"] .portfolio-label{
    right: 96px !important;
    bottom: 108px !important;
    width: 148px !important;
    height: 44px !important;
    min-width: 148px !important;
    min-height: 44px !important;
  }

  body[data-page="home"] .portfolio-label .portfolio-text{
    font-size: 28px !important;
  }

  body[data-page="home"] .portfolio-label .portfolio-draw-box,
  body[data-page="home"] .portfolio-label .draw-line{
    display: block !important;
  }

  body[data-page="home"] .hero-hand-icon{
    width: 28px !important;
    right: 139px !important;
    bottom: 76px !important;
  }

  body[data-page="home"] .cert-badge{
    width: 74px !important;
    height: 74px !important;
    left: 18px !important;
    bottom: 28px !important;
  }

  /* Carousel/video mobile */
  body[data-page="home"] .home-carousel{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body[data-page="home"] .carousel-stage{
    height: 160px !important;
    border-width: 2px !important;
  }

  body[data-page="home"] .carousel-slide{
    object-fit: cover !important;
  }

  /* Services mobile */
  body[data-page="home"] .services-section{
    margin-top: 0 !important;
    padding: 18px 0 0 !important;
    border-top: 0 !important;
    background: #fff !important;
  }

  body[data-page="home"] .services-grid{
    display: block !important;
    width: 100% !important;
  }

  body[data-page="home"] .services-grid > div{
    display: block !important;
  }

  body[data-page="home"] .services-grid .black-script{
    font-size: 36px !important;
    text-align: center !important;
    padding-left: 0 !important;
    margin: 0 0 8px !important;
    min-height: 0 !important;
    display: block !important;
  }

  body[data-page="home"] .service-img{
    width: 82% !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    margin: 0 auto 18px !important;
    object-fit: cover !important;
  }

  body[data-page="home"] .services-grid > div:nth-child(2) h2{
    font-size: 26px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    margin: 0 auto 20px !important;
    min-height: 0 !important;
    display: block !important;
    width: 80% !important;
    background: #f1f2f3 !important;
    padding: 12px 8px !important;
    box-sizing: border-box !important;
  }

  body[data-page="home"] .service-copy{
    background: #fff !important;
    width: 84% !important;
    margin: 0 auto 18px !important;
    padding: 0 !important;
    min-height: 0 !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }

  body[data-page="home"] .media-row{
    width: 84% !important;
    margin: 0 auto 20px !important;
  }

  body[data-page="home"] .media-row video{
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border: 2px solid #111 !important;
    object-fit: cover !important;
  }

  /* Cappotto mobile */
  body[data-page="home"] .cappotto-section{
    width: 84% !important;
    margin: 0 auto !important;
    padding: 0 0 34px !important;
  }

  body[data-page="home"] .cappotto-section h2{
    font-size: 25px !important;
    line-height: 1.05 !important;
    background: #f1f2f3 !important;
    padding: 12px 8px !important;
    margin: 18px 0 0 !important;
  }

  body[data-page="home"] .cappotto-grid{
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 0 !important;
  }

  body[data-page="home"] .cappotto-grid img{
    width: 100% !important;
    height: auto !important;
    margin: 0 0 18px !important;
    display: block !important;
  }

  body[data-page="home"] .cappotto-copy{
    background: #f1f2f3 !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
    padding: 18px 18px 34px !important;
    text-align: left !important;
  }

  /* Clienti mobile */
  body[data-page="clienti"] .simple-page,
  body[data-page="partner"] .partner-page,
  body[data-page="portfolio"] .portfolio-page,
  body[data-page="contatti"] .contatti-page{
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 82px) !important;
    box-sizing: border-box !important;
  }

  body[data-page="clienti"] .simple-page h1,
  body[data-page="portfolio"] .portfolio-wrap h1,
  body[data-page="partner"] .partner-page h1,
  body[data-page="contatti"] .simple-page h1{
    font-size: 34px !important;
    text-align: center !important;
    margin: 28px 0 26px !important;
  }

  body[data-page="clienti"] .clients-logos{
    width: 84% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 18px !important;
  }

  body[data-page="clienti"] .clients-logos img{
    max-width: 100% !important;
    height: auto !important;
  }

  /* Portfolio mobile */
  body[data-page="portfolio"] .portfolio-map{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  body[data-page="portfolio"] .portfolio-instruction{
    font-size: 17px !important;
    line-height: 1.35 !important;
    text-align: center !important;
    padding: 20px 24px !important;
    background: #f1f2f3 !important;
  }

  /* Partner mobile */
  body[data-page="partner"] .partner-card{
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 24px 120px !important;
    box-sizing: border-box !important;
    background: #eef0f1 !important;
    text-align: center !important;
  }

  body[data-page="partner"] .partner-card:before{
    width: 40px !important;
    margin: 0 auto 22px !important;
  }

  body[data-page="partner"] .partner-card img{
    width: 270px !important;
    height: 270px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    object-fit: contain !important;
  }

  body[data-page="partner"] .partner-card h2{
    font-size: 25px !important;
    margin: 10px 0 28px !important;
  }

  body[data-page="partner"] .partner-card p{
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin: 0 auto !important;
    max-width: 320px !important;
  }

  /* Contatti mobile */
  body[data-page="contatti"] .contact-block{
    width: 86% !important;
    margin: 54px auto 0 !important;
    text-align: center !important;
    font-size: 25px !important;
    line-height: 1.65 !important;
    color: #111 !important;
  }

  body[data-page="contatti"] .contact-block p{
    margin: 0 0 30px !important;
  }

  /* Footer mobile */
  .site-footer{
    width: 100% !important;
    padding: 28px 0 70px !important;
    background: #fff !important;
    color: #111 !important;
    font-size: 15px !important;
    text-align: left !important;
  }

  .footer-inner{
    display: block !important;
    width: 100% !important;
    padding: 0 28px !important;
    box-sizing: border-box !important;
  }

  .footer-inner > div{
    margin: 0 0 22px !important;
  }

  .copyright{
    text-align: center !important;
    color: #9c9c9c !important;
    margin-top: 8px !important;
  }

  /* Chat mobile */
  .chat-button{
    right: 18px !important;
    bottom: 22px !important;
    width: 58px !important;
    height: 58px !important;
  }

  .chat-button-svg-wrap{
    width: 58px !important;
    height: 58px !important;
  }

  .chat-button-svg{
    width: 58px !important;
    height: 58px !important;
  }
}


/* v103: mobile home order + title styling */
@media (max-width: 800px){

  /* Ordine mobile:
     foto hero → titolo/testo → carosello → Servizi → immagine → Rifacimento → testo → video → immagine → Cappotto → testo
  */

  body[data-page="home"] .hero-block{
    display: flex !important;
    flex-direction: column !important;
  }

  body[data-page="home"] .hero-image-wrap{
    order: 1 !important;
    height: 560px !important;
    min-height: 560px !important;
  }

  body[data-page="home"] .hero-text{
    order: 2 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 18px 20px !important;
    background: #fff !important;
  }

  body[data-page="home"] .hero-text h1,
  body[data-page="home"] .hero-text h1.hero-title-tight{
    font-family: var(--font-script) !important;
    font-size: 33px !important;
    line-height: 1.08 !important;
    color: var(--gold) !important;
    font-weight: 400 !important;
    text-align: center !important;
    background: #f1f2f3 !important;
    padding: 14px 10px 12px !important;
    margin: 0 0 18px !important;
  }

  body[data-page="home"] .hero-text h1 span,
  body[data-page="home"] .hero-text h1.hero-title-tight span{
    display: inline !important;
    margin: 0 !important;
    white-space: normal !important;
  }

  body[data-page="home"] .hero-text p{
    font-size: 17px !important;
    line-height: 1.46 !important;
    text-align: center !important;
    margin: 0 !important;
  }

  body[data-page="home"] .home-carousel{
    order: 3 !important;
    margin: 0 auto 18px !important;
  }

  body[data-page="home"] .carousel-stage{
    height: 160px !important;
  }

  body[data-page="home"] .services-section{
    display: flex !important;
    flex-direction: column !important;
    padding-top: 0 !important;
    background: #fff !important;
  }

  body[data-page="home"] .services-grid{
    display: contents !important;
  }

  body[data-page="home"] .services-grid > div{
    display: contents !important;
  }

  body[data-page="home"] .services-grid .black-script{
    order: 4 !important;
    font-size: 36px !important;
    text-align: center !important;
    margin: 18px 0 10px !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
  }

  body[data-page="home"] .service-img{
    order: 5 !important;
    width: 82% !important;
    height: auto !important;
    margin: 0 auto 22px !important;
    display: block !important;
  }

  body[data-page="home"] .services-grid > div:nth-child(2) h2{
    order: 6 !important;
    width: 80% !important;
    font-size: 26px !important;
    line-height: 1.08 !important;
    text-align: center !important;
    margin: 0 auto 22px !important;
    background: #f1f2f3 !important;
    padding: 12px 8px !important;
    min-height: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  body[data-page="home"] .service-copy{
    order: 7 !important;
    width: 84% !important;
    margin: 0 auto 22px !important;
    padding: 0 !important;
    background: #fff !important;
    min-height: 0 !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }

  body[data-page="home"] .media-row{
    order: 8 !important;
    width: 84% !important;
    margin: 0 auto 22px !important;
  }

  body[data-page="home"] .media-row video{
    width: 100% !important;
    height: auto !important;
    border: 2px solid #111 !important;
    display: block !important;
  }

  body[data-page="home"] .cappotto-section{
    display: flex !important;
    flex-direction: column !important;
    width: 84% !important;
    margin: 0 auto !important;
    padding: 0 0 34px !important;
  }

  body[data-page="home"] .cappotto-grid{
    display: contents !important;
  }

  body[data-page="home"] .cappotto-grid img{
    order: 9 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 18px !important;
    display: block !important;
  }

  body[data-page="home"] .cappotto-section h2{
    order: 10 !important;
    width: 100% !important;
    font-size: 26px !important;
    line-height: 1.08 !important;
    text-align: center !important;
    background: #f1f2f3 !important;
    padding: 12px 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-page="home"] .cappotto-copy{
    order: 11 !important;
    width: 100% !important;
    background: #f1f2f3 !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
    padding: 18px 18px 34px !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
}


/* v104: mobile script/gold titles same size as Rifacimento facciata, centered */
@media (max-width: 800px){

  body[data-page="home"] .hero-text h1,
  body[data-page="home"] .hero-text h1.hero-title-tight,
  body[data-page="home"] .services-grid > div:nth-child(2) h2,
  body[data-page="home"] .cappotto-section h2,
  body[data-page="clienti"] .simple-page h1,
  body[data-page="portfolio"] .portfolio-wrap h1,
  body[data-page="partner"] .partner-page h1,
  body[data-page="contatti"] .simple-page h1{
    font-family: var(--font-script) !important;
    font-size: 26px !important;
    line-height: 1.08 !important;
    color: var(--gold) !important;
    font-weight: 400 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
  }

  body[data-page="home"] .hero-text h1,
  body[data-page="home"] .hero-text h1.hero-title-tight,
  body[data-page="home"] .services-grid > div:nth-child(2) h2,
  body[data-page="home"] .cappotto-section h2{
    background: #f1f2f3 !important;
    padding: 12px 8px !important;
    box-sizing: border-box !important;
  }

  body[data-page="home"] .hero-text h1,
  body[data-page="home"] .hero-text h1.hero-title-tight{
    width: 100% !important;
    margin: 0 auto 18px !important;
  }

  body[data-page="home"] .services-grid > div:nth-child(2) h2{
    width: 80% !important;
    margin: 0 auto 22px !important;
  }

  body[data-page="home"] .cappotto-section h2{
    width: 100% !important;
    margin: 0 !important;
  }

  body[data-page="clienti"] .simple-page h1,
  body[data-page="portfolio"] .portfolio-wrap h1,
  body[data-page="partner"] .partner-page h1,
  body[data-page="contatti"] .simple-page h1{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* v105: mobile title correction — all Peach/Cream titles large and centered */
@media (max-width: 800px){

  /* shared Peach/Cream title rule */
  body[data-page="home"] .hero-text h1,
  body[data-page="home"] .hero-text h1.hero-title-tight,
  body[data-page="home"] .services-grid > div:nth-child(2) h2,
  body[data-page="home"] .cappotto-section h2,
  body[data-page="clienti"] .simple-page h1,
  body[data-page="portfolio"] .portfolio-wrap h1,
  body[data-page="partner"] .partner-page h1,
  body[data-page="contatti"] .simple-page h1{
    font-family: var(--font-script) !important;
    font-size: 39px !important;
    line-height: 1.02 !important;
    color: var(--gold) !important;
    font-weight: 400 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* home title boxes */
  body[data-page="home"] .hero-text h1,
  body[data-page="home"] .hero-text h1.hero-title-tight,
  body[data-page="home"] .services-grid > div:nth-child(2) h2,
  body[data-page="home"] .cappotto-section h2{
    background: #f1f2f3 !important;
    padding: 18px 10px 14px !important;
  }

  /* Esperti title */
  body[data-page="home"] .hero-text h1,
  body[data-page="home"] .hero-text h1.hero-title-tight{
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto 18px !important;
  }

  /* Rifacimento: full same content width and centered */
  body[data-page="home"] .services-grid > div:nth-child(2) h2{
    width: 84% !important;
    max-width: 84% !important;
    margin: 0 auto 22px !important;
    transform: none !important;
    position: static !important;
  }

  /* Cappotto: same visual size as Rifacimento */
  body[data-page="home"] .cappotto-section{
    width: 84% !important;
    max-width: 84% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body[data-page="home"] .cappotto-section h2{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
    position: static !important;
  }

  /* other page titles */
  body[data-page="clienti"] .simple-page h1,
  body[data-page="portfolio"] .portfolio-wrap h1,
  body[data-page="partner"] .partner-page h1,
  body[data-page="contatti"] .simple-page h1{
    width: 100% !important;
    max-width: none !important;
    margin: 28px auto 26px !important;
    padding: 0 !important;
    background: transparent !important;
  }
}


/* v106: hard mobile alignment/size for Peach&Cream titles */
@media (max-width: 800px){

  body[data-page="home"] h2.mobile-script-title,
  body[data-page="home"] .services-grid > div:nth-child(2) h2.mobile-script-title,
  body[data-page="home"] .cappotto-section h2.mobile-script-title{
    font-family: var(--font-script) !important;
    font-size: 39px !important;
    line-height: 1.02 !important;
    color: var(--gold) !important;
    font-weight: 400 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    background: #f1f2f3 !important;
    padding: 18px 10px 14px !important;
    transform: none !important;
    position: static !important;
  }

  body[data-page="home"] .services-grid > div:nth-child(2) h2.mobile-script-title{
    margin-top: 0 !important;
    margin-bottom: 22px !important;
  }

  body[data-page="home"] .cappotto-section h2.mobile-script-title{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Make Cappotto block use the same content width as the Rifacimento title area */
  body[data-page="home"] .cappotto-section{
    width: 84% !important;
    max-width: 84% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* keep chat from overlapping the Cappotto title area too aggressively */
  body[data-page="home"] .cappotto-section h2.mobile-script-title + .cappotto-copy,
  body[data-page="home"] .cappotto-copy{
    padding-top: 22px !important;
  }
}


/* v107: mobile Peach/Cream titles same size as hero title */
@media (max-width: 800px){

  body[data-page="home"] .hero-text h1,
  body[data-page="home"] .hero-text h1.hero-title-tight,
  body[data-page="home"] h2.mobile-script-title,
  body[data-page="home"] .services-grid > div:nth-child(2) h2.mobile-script-title,
  body[data-page="home"] .cappotto-section h2.mobile-script-title,
  body[data-page="clienti"] .simple-page h1,
  body[data-page="portfolio"] .portfolio-wrap h1,
  body[data-page="partner"] .partner-page h1,
  body[data-page="contatti"] .simple-page h1{
    font-family: var(--font-script) !important;
    font-size: 33px !important;
    line-height: 1.08 !important;
    color: var(--gold) !important;
    font-weight: 400 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
  }

  body[data-page="home"] h2.mobile-script-title,
  body[data-page="home"] .services-grid > div:nth-child(2) h2.mobile-script-title,
  body[data-page="home"] .cappotto-section h2.mobile-script-title{
    font-size: 33px !important;
    line-height: 1.08 !important;
    padding: 14px 10px 12px !important;
  }
}


/* v108: force all mobile Peach/Cream titles to match hero title size */
@media (max-width: 800px){

  html body[data-page="home"] .hero-text h1,
  html body[data-page="home"] .hero-text h1.hero-title-tight,
  html body[data-page="home"] .services-grid > div:nth-child(2) > h2,
  html body[data-page="home"] .services-grid > div:nth-child(2) > h2.mobile-script-title,
  html body[data-page="home"] .cappotto-section > h2,
  html body[data-page="home"] .cappotto-section > h2.mobile-script-title,
  html body[data-page="clienti"] main h1,
  html body[data-page="portfolio"] main h1,
  html body[data-page="partner"] main h1,
  html body[data-page="contatti"] main h1{
    font-family: var(--font-script) !important;
    font-size: 33px !important;
    line-height: 1.08 !important;
    color: var(--gold) !important;
    font-weight: 400 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    transform: none !important;
  }

  html body[data-page="home"] .services-grid > div:nth-child(2) > h2,
  html body[data-page="home"] .services-grid > div:nth-child(2) > h2.mobile-script-title,
  html body[data-page="home"] .cappotto-section > h2,
  html body[data-page="home"] .cappotto-section > h2.mobile-script-title{
    display: block !important;
    width: 84% !important;
    max-width: 84% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: #f1f2f3 !important;
    padding: 14px 10px 12px !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
  }

  html body[data-page="home"] .cappotto-section > h2,
  html body[data-page="home"] .cappotto-section > h2.mobile-script-title{
    width: 100% !important;
    max-width: 100% !important;
  }

  html body[data-page="clienti"] main h1,
  html body[data-page="portfolio"] main h1,
  html body[data-page="partner"] main h1,
  html body[data-page="contatti"] main h1{
    display: block !important;
    width: 100% !important;
    margin: 28px auto 26px !important;
    padding: 0 !important;
    background: transparent !important;
  }
}


/* v109: hard mobile title fix — all Peach/Cream titles same size and centered */
@media (max-width: 800px){

  /* Home hero title */
  html body[data-page="home"] .hero-text{
    width: 100% !important;
    padding: 24px 18px 22px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html body[data-page="home"] .hero-text h1.mobile-hero-title{
    font-family: var(--font-script) !important;
    font-size: 33px !important;
    line-height: 1.08 !important;
    color: var(--gold) !important;
    font-weight: 400 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 22px !important;
    padding: 14px 10px 12px !important;
    box-sizing: border-box !important;
    background: #f1f2f3 !important;
    transform: none !important;
    position: static !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  /* Home section titles */
  html body[data-page="home"] h2.mobile-script-title,
  html body[data-page="home"] .services-grid > div:nth-child(2) > h2.mobile-script-title,
  html body[data-page="home"] .cappotto-section > h2.mobile-script-title{
    font-family: var(--font-script) !important;
    font-size: 33px !important;
    line-height: 1.08 !important;
    color: var(--gold) !important;
    font-weight: 400 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    display: block !important;
    width: 84% !important;
    max-width: 84% !important;
    margin: 0 auto 22px !important;
    padding: 14px 10px 12px !important;
    box-sizing: border-box !important;
    background: #f1f2f3 !important;
    transform: none !important;
    position: static !important;
    min-height: 0 !important;
  }

  html body[data-page="home"] .cappotto-section > h2.mobile-script-title{
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
  }

  /* Other pages: Clienti / Portfolio / Partner / Contattaci */
  html body[data-page="clienti"] main h1,
  html body[data-page="portfolio"] main h1,
  html body[data-page="partner"] main h1,
  html body[data-page="contatti"] main h1,
  html body[data-page="clienti"] .simple-page h1,
  html body[data-page="portfolio"] .portfolio-wrap h1,
  html body[data-page="partner"] .partner-page h1,
  html body[data-page="contatti"] .simple-page h1{
    font-family: var(--font-script) !important;
    font-size: 33px !important;
    line-height: 1.08 !important;
    color: var(--gold) !important;
    font-weight: 400 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 28px auto 26px !important;
    padding: 0 !important;
    background: transparent !important;
    transform: none !important;
    position: static !important;
    min-height: 0 !important;
  }
}


/* v110: mobile Peach/Cream titles detached from boxes and enlarged */
@media (max-width: 800px){

  /* All script/gold page and home-section titles */
  html body[data-page="home"] .hero-text h1.mobile-hero-title,
  html body[data-page="home"] .services-grid > div:nth-child(2) > h2.mobile-script-title,
  html body[data-page="home"] .cappotto-section > h2.mobile-script-title,
  html body[data-page="clienti"] main h1,
  html body[data-page="portfolio"] main h1,
  html body[data-page="partner"] main h1,
  html body[data-page="contatti"] main h1{
    font-family: var(--font-script) !important;
    font-size: 42px !important;
    line-height: 1.02 !important;
    color: var(--gold) !important;
    font-weight: 400 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    transform: none !important;
    position: static !important;
    min-height: 0 !important;
  }

  /* Hero title: detached but with breathing space */
  html body[data-page="home"] .hero-text h1.mobile-hero-title{
    margin: 0 auto 22px !important;
  }

  /* Rifacimento facciata */
  html body[data-page="home"] .services-grid > div:nth-child(2) > h2.mobile-script-title{
    margin: 6px auto 24px !important;
  }

  /* Cappotto Termico */
  html body[data-page="home"] .cappotto-section > h2.mobile-script-title{
    margin: 20px auto 16px !important;
  }

  /* Other page titles */
  html body[data-page="clienti"] main h1,
  html body[data-page="portfolio"] main h1,
  html body[data-page="partner"] main h1,
  html body[data-page="contatti"] main h1{
    margin: 30px auto 28px !important;
  }

  /* Keep the text blocks below titles visually separated */
  html body[data-page="home"] .service-copy{
    margin-top: 0 !important;
  }

  html body[data-page="home"] .cappotto-copy{
    padding-top: 18px !important;
  }
}


/* v111: all mobile Peach/Cream titles forced to the same size as hero */
@media (max-width: 800px){

  html body[data-page="home"] .hero-text h1.mobile-hero-title,
  html body[data-page="home"] .services-grid > div:nth-child(2) > h2.mobile-script-title,
  html body[data-page="home"] .cappotto-section > h2.mobile-script-title,
  html body[data-page="clienti"] main h1,
  html body[data-page="portfolio"] main h1,
  html body[data-page="partner"] main h1,
  html body[data-page="contatti"] main h1{
    font-family: var(--font-script) !important;
    font-size: 48px !important;
    line-height: 1.02 !important;
    color: var(--gold) !important;
    font-weight: 400 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: static !important;
    transform: none !important;
  }

  html body[data-page="home"] .hero-text h1.mobile-hero-title{
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }

  html body[data-page="home"] .services-grid > div:nth-child(2) > h2.mobile-script-title{
    margin-top: 8px !important;
    margin-bottom: 22px !important;
  }

  html body[data-page="home"] .cappotto-section > h2.mobile-script-title{
    margin-top: 16px !important;
    margin-bottom: 18px !important;
  }

  html body[data-page="clienti"] main h1,
  html body[data-page="portfolio"] main h1,
  html body[data-page="partner"] main h1,
  html body[data-page="contatti"] main h1{
    margin-top: 26px !important;
    margin-bottom: 26px !important;
  }
}


/* v112: force all mobile section/page titles large like hero */
@media (max-width: 800px){
  html body[data-page="home"] .hero-text h1.mobile-hero-title,
  html body[data-page="home"] .services-grid > div:first-child > h2.black-script,
  html body[data-page="home"] .services-grid > div:nth-child(2) > h2.mobile-script-title,
  html body[data-page="home"] .cappotto-section > h2.mobile-script-title,
  html body[data-page="clienti"] main h1,
  html body[data-page="portfolio"] main h1,
  html body[data-page="partner"] main h1,
  html body[data-page="contatti"] main h1 {
    font-size: 48px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
    position: static !important;
  }

  html body[data-page="home"] .services-grid > div:first-child > h2.black-script {
    margin-top: 12px !important;
    margin-bottom: 24px !important;
  }

  html body[data-page="home"] .services-grid > div:nth-child(2) > h2.mobile-script-title,
  html body[data-page="home"] .cappotto-section > h2.mobile-script-title,
  html body[data-page="clienti"] main h1,
  html body[data-page="portfolio"] main h1,
  html body[data-page="partner"] main h1,
  html body[data-page="contatti"] main h1 {
    color: var(--gold) !important;
    font-family: var(--font-script) !important;
    font-weight: 400 !important;
  }

  html body[data-page="home"] .services-grid > div:first-child > h2.black-script {
    color: #111 !important;
    font-family: var(--font-script-black, var(--font-script)) !important;
    font-weight: 400 !important;
  }
}


/* v113: mobile home boxes and spacing */
@media (max-width: 800px){
  html body[data-page="home"] .hero-text{
    min-height: auto !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 18px 8px !important;
    margin: 0 auto 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  html body[data-page="home"] .hero-text h1.mobile-hero-title{
    margin: 0 auto 18px !important;
  }

  html body[data-page="home"] .hero-text p{
    background: var(--section-gray) !important;
    padding: 28px 22px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  html body[data-page="home"] .home-carousel,
  html body[data-page="home"] .home-carousel.narrow{
    background: var(--section-gray) !important;
    margin: 0 auto 28px !important;
    padding: 6px 18px 0 !important;
    box-sizing: border-box !important;
  }

  html body[data-page="home"] .home-carousel .carousel-stage{
    margin: 0 auto !important;
  }

  html body[data-page="home"] .services-grid > div:nth-child(2) .service-copy{
    background: var(--section-gray) !important;
    padding: 28px 22px !important;
    margin: 0 auto 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* v114: mobile hero image more cropped */
@media (max-width: 800px){
  html body[data-page="home"] .hero-image-wrap{
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
    overflow: hidden !important;
  }

  html body[data-page="home"] .hero-image-wrap > img:first-child{
    object-fit: cover !important;
    object-position: center 28% !important;
    transform: scale(1.24) !important;
    transform-origin: center center !important;
  }
}


/* v115: mobile hero less zoomed and centered portfolio button */
@media (max-width: 800px){
  html body[data-page="home"] .hero-image-wrap{
    height: 390px !important;
    min-height: 390px !important;
    max-height: 390px !important;
    overflow: hidden !important;
  }

  html body[data-page="home"] .hero-image-wrap > img:first-child{
    object-fit: cover !important;
    object-position: center 24% !important;
    transform: scale(1.10) !important;
    transform-origin: center center !important;
  }

  html body[data-page="home"] .portfolio-label{
    left: 50% !important;
    right: auto !important;
    bottom: 96px !important;
    transform: translateX(-50%) !important;
    width: 148px !important;
    min-width: 148px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  html body[data-page="home"] .hero-hand-icon{
    left: 50% !important;
    right: auto !important;
    bottom: 46px !important;
    transform: translateX(-6px) !important;
    width: 28px !important;
  }
}


/* v116: stronger mobile hero crop + truly centered portfolio CTA */
@media (max-width: 800px){
  body[data-page="home"] .hero-block{
    display:flex !important;
    flex-direction:column !important;
  }

  body[data-page="home"] .hero-image-wrap{
    position:relative !important;
    width:100% !important;
    height:430px !important;
    min-height:430px !important;
    max-height:430px !important;
    overflow:hidden !important;
  }

  body[data-page="home"] .hero-image-wrap > img:first-child{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 16% !important;
    transform:none !important;
  }

  body[data-page="home"] .portfolio-label{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    bottom:28px !important;
    transform:translateX(-50%) !important;
    margin:0 !important;
    width:148px !important;
    min-width:148px !important;
    text-align:center !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
  }

  body[data-page="home"] .portfolio-label .portfolio-text{
    left:50% !important;
    top:48% !important;
    transform:translate(-50%,-50%) !important;
    white-space:nowrap !important;
  }

  body[data-page="home"] .hero-hand-icon{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    bottom:-8px !important;
    transform:translateX(14px) !important;
    width:32px !important;
    height:auto !important;
  }

  body[data-page="home"] .cert-badge{
    left:16px !important;
    bottom:16px !important;
    width:82px !important;
    height:82px !important;
  }
}


/* v117: remove inline-height problem; final mobile hero crop and centered CTA */
@media (max-width: 800px){

  html body[data-page="home"] .hero-image-wrap{
    position: relative !important;
    width: 100% !important;
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
    overflow: hidden !important;
  }

  html body[data-page="home"] .hero-image-wrap > img:first-child{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 26% !important;
    transform: none !important;
  }

  html body[data-page="home"] .portfolio-label{
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 70px !important;
    transform: translateX(-50%) !important;
    width: 148px !important;
    min-width: 148px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  html body[data-page="home"] .portfolio-label .portfolio-text{
    position: absolute !important;
    left: 50% !important;
    top: 48% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 28px !important;
    white-space: nowrap !important;
  }

  html body[data-page="home"] .hero-hand-icon{
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 34px !important;
    transform: translateX(12px) !important;
    width: 28px !important;
  }

  html body[data-page="home"] .cert-badge{
    left: 18px !important;
    bottom: 24px !important;
    width: 74px !important;
    height: 74px !important;
  }

  html body[data-page="home"] .hero-text{
    min-height: auto !important;
    height: auto !important;
  }

  html body[data-page="home"] .chat-button{
    position: fixed !important;
    right: 18px !important;
    bottom: 22px !important;
    left: auto !important;
    transform: none !important;
    z-index: 9999 !important;
  }
}


/* v118: final mobile fixes */
@media (max-width: 800px){

  /* 1. Installatori Mapei: 20% smaller */
  html body[data-page="home"] .cert-badge{
    width: 59px !important;
    height: 59px !important;
    left: 18px !important;
    bottom: 24px !important;
    font-size: 9px !important;
  }

  html body[data-page="home"] .cert-badge strong{
    font-size: 9px !important;
  }

  /* 2. Hand icon: 30% smaller + 10px right */
  html body[data-page="home"] .hero-hand-icon{
    width: 20px !important;
    left: 50% !important;
    right: auto !important;
    bottom: 36px !important;
    transform: translateX(22px) !important;
  }

  /* Keep Portfolio button centered */
  html body[data-page="home"] .portfolio-label{
    left: 50% !important;
    right: auto !important;
    bottom: 70px !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }

  /* 3. Remove/move grey strip under carousel */
  html body[data-page="home"] .home-carousel,
  html body[data-page="home"] .home-carousel.narrow{
    background: transparent !important;
    padding: 0 18px !important;
    margin: 0 auto 24px !important;
  }

  html body[data-page="home"] .home-carousel .carousel-stage{
    border: 2px solid #111 !important;
    margin: 0 auto !important;
  }

  /* 4. Header/logo: prevent Clivma logo overlap on hero */
  html body .site-header{
    overflow: hidden !important;
    background: #fff !important;
    position: relative !important;
    z-index: 20 !important;
  }

  html body .header-inner{
    height: 82px !important;
    min-height: 82px !important;
    overflow: hidden !important;
    align-items: center !important;
  }

  html body .brand{
    height: 82px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }

  html body .brand-clivma{
    width: 72px !important;
    max-height: 72px !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  html body .brand-soa{
    width: 176px !important;
    max-height: 58px !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* 5. Portfolio page: project names smaller and easier to tap */
  html body[data-page="portfolio"] .portfolio-map-overlay,
  html body[data-page="portfolio"] .portfolio-map-overlay *,
  html body[data-page="portfolio"] .map-box,
  html body[data-page="portfolio"] .map-box *{
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  html body[data-page="portfolio"] .portfolio-map-overlay a,
  html body[data-page="portfolio"] .portfolio-map-overlay button,
  html body[data-page="portfolio"] .map-marker,
  html body[data-page="portfolio"] [data-project],
  html body[data-page="portfolio"] .project-marker{
    font-size: 9px !important;
    line-height: 1.05 !important;
    padding: 1px 2px !important;
    min-width: 0 !important;
  }

  /* 6. Chat button: original-like round blue shape and fixed position */
  html body .chat-button{
    position: fixed !important;
    right: 18px !important;
    bottom: 22px !important;
    left: auto !important;
    top: auto !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    border-radius: 50% !important;
    background: #0788e8 !important;
    border: 0 !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.32) !important;
    transform: none !important;
    padding: 0 !important;
    z-index: 9999 !important;
    font-size: 0 !important;
    overflow: visible !important;
  }

  html body .chat-button-svg,
  html body .chat-button-svg-wrap svg,
  html body .chat-button span,
  html body .chat-button .chat-label{
    display: none !important;
  }

  html body .chat-button::before{
    content: "" !important;
    position: absolute !important;
    width: 27px !important;
    height: 21px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: #fff !important;
    border-radius: 13px !important;
    display: block !important;
  }

  html body .chat-button::after{
    content: "" !important;
    position: absolute !important;
    width: 13px !important;
    height: 3px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-38%, -50%) !important;
    background: #0788e8 !important;
    border-radius: 2px !important;
    box-shadow: 0 -6px 0 #0788e8, 0 6px 0 #0788e8 !important;
    display: block !important;
  }

  /* 7. Mobile titles on all non-home pages: larger like hero */
  html body[data-page="clienti"] main h1,
  html body[data-page="portfolio"] main h1,
  html body[data-page="partner"] main h1,
  html body[data-page="contatti"] main h1,
  html body[data-page="clienti"] .simple-page h1,
  html body[data-page="portfolio"] .portfolio-wrap h1,
  html body[data-page="partner"] .partner-page h1,
  html body[data-page="contatti"] .simple-page h1{
    font-family: var(--font-script) !important;
    font-size: 48px !important;
    line-height: 1.04 !important;
    color: var(--gold) !important;
    font-weight: 400 !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 26px auto 28px !important;
    padding: 0 !important;
    background: transparent !important;
    display: block !important;
    transform: none !important;
  }

  /* Servizi title also coherent on mobile */
  html body[data-page="home"] .services-grid > div:first-child > h2.black-script{
    font-size: 48px !important;
    line-height: 1.04 !important;
    text-align: center !important;
    padding-left: 0 !important;
    margin: 14px auto 22px !important;
    width: 100% !important;
  }
}


/* v119: fix mobile menu opening */
@media (max-width: 800px){

  html body .site-header{
    overflow: visible !important;
    z-index: 10000 !important;
  }

  html body .header-inner{
    overflow: visible !important;
    position: relative !important;
    z-index: 10001 !important;
  }

  html body .brand{
    overflow: visible !important;
  }

  html body .nav-toggle{
    display: block !important;
    position: relative !important;
    z-index: 10003 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: 0 !important;
  }

  html body .main-nav{
    position: absolute !important;
    top: 82px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #fff !important;
    z-index: 10002 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 8px 0 !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.15) !important;
  }

  html body .main-nav.is-open,
  html body .main-nav.open,
  html body .site-header.nav-open .main-nav,
  html body .header-inner.nav-open .main-nav{
    display: flex !important;
  }

  html body .main-nav a{
    display: block !important;
    width: 100% !important;
    padding: 14px 22px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-size: 18px !important;
    color: #111 !important;
    background: #fff !important;
  }

  html body .main-nav a.active{
    background: var(--menu) !important;
  }
}



/* v120 mobile follow-up fixes */
@media (max-width: 800px){

  /* White separation strip under the header to keep the logo from colliding with the hero image */
  .site-header{
    position: relative !important;
    margin-bottom: 0 !important;
  }
  .site-header::after{
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 8px !important;
    background: #ffffff !important;
  }

  /* Mobile home hero: slightly more compact and cleaner crop */
  .home .hero,
  .home .hero-section,
  .home .hero-wrap,
  .home .hero-image-wrap{
    margin-top: 0 !important;
  }

  .home .hero img,
  .home .hero-image,
  .home .hero-photo{
    object-fit: cover !important;
    object-position: center center !important;
    max-height: 520px !important;
    width: 100% !important;
  }

  .home .hero,
  .home .hero-image-wrap,
  .home .hero-image-holder{
    max-height: 520px !important;
    overflow: hidden !important;
  }

  /* Badge on mobile: smaller */
  .home .installatori-mapei,
  .home .mapei-badge,
  .home .hero-badge,
  .installatori-mapei,
  .mapei-badge{
    transform: scale(0.8) !important;
    transform-origin: left bottom !important;
  }

  /* Cursor/hand on mobile: 30% smaller and shifted 10px right */
  .home .portfolio-hand,
  .home .cursor-hand,
  .portfolio-hand,
  .cursor-hand{
    transform: scale(0.7) !important;
    transform-origin: center center !important;
    margin-left: 10px !important;
  }

  /* Center the portfolio button on mobile */
  .home .portfolio-cta,
  .home .portfolio-box-wrap,
  .home .portfolio-box,
  .portfolio-cta,
  .portfolio-box-wrap{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
  }

  /* If the text element is separate, keep it centered too */
  .home .portfolio-label,
  .portfolio-label{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }

  /* Remove / neutralize the grey band under the carousel on mobile */
  .home .carousel-band,
  .home .carousel-strip,
  .home .carousel-bottom-band,
  .home .hero-carousel-band,
  .carousel-band,
  .carousel-strip{
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* Portfolio mobile map labels and locators: smaller for easier tapping */
  .portfolio-page .map-label,
  .portfolio-page .project-label,
  .portfolio-page .locator-label,
  .map-label,
  .project-label,
  .locator-label{
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  .portfolio-page .locator,
  .portfolio-page .map-pin,
  .portfolio-page .pin,
  .locator,
  .map-pin,
  .pin{
    transform: scale(0.82) !important;
    transform-origin: center center !important;
  }

  /* Mobile chat button: circular and pinned bottom-right like the reference */
  .chat-button,
  .chat-widget-button,
  .floating-chat,
  .chat-trigger{
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    border-radius: 50% !important;
    right: 18px !important;
    bottom: 18px !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Mobile titles on inner pages: force them larger */
  .portfolio-page h1, .portfolio-page .page-title,
  .partner-page h1, .partner-page .page-title,
  .contact-page h1, .contact-page .page-title,
  .clients-page h1, .clients-page .page-title{
    font-size: 42px !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }
}


/* v121: mobile Portfolio button stable, centered, no jump */
@media (max-width: 800px){

  html body[data-page="home"] .portfolio-label{
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 70px !important;

    /* no translate on the button: avoids inherited animation jump */
    transform: none !important;
    animation: none !important;
    transition: background-color .18s ease, color .18s ease !important;

    width: 148px !important;
    min-width: 148px !important;
    max-width: 148px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    margin-left: -74px !important;
    margin-right: 0 !important;
    padding: 0 !important;

    display: block !important;
    box-sizing: border-box !important;
    text-align: center !important;
    overflow: visible !important;
  }

  html body[data-page="home"] .portfolio-label .portfolio-text{
    position: absolute !important;
    left: 50% !important;
    top: 48% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    animation: none !important;
    transition: color .18s ease !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 28px !important;
    line-height: 1 !important;
  }

  /* Keep drawn double-line visible but without mobile position movement */
  html body[data-page="home"] .portfolio-draw-box,
  html body[data-page="home"] .portfolio-draw-box *,
  html body[data-page="home"] .draw-line{
    transform: none !important;
  }

  html body[data-page="home"] .portfolio-label:hover,
  html body[data-page="home"] .portfolio-label:focus{
    transform: none !important;
    margin-left: -74px !important;
  }

  html body[data-page="home"] .portfolio-label:hover .portfolio-text,
  html body[data-page="home"] .portfolio-label:focus .portfolio-text{
    color: #fff !important;
  }

  html body[data-page="home"] .hero-hand-icon{
    left: 50% !important;
    right: auto !important;
    bottom: 34px !important;
    transform: none !important;
    margin-left: 22px !important;
    width: 20px !important;
    animation: none !important;
  }
}


/* v123: use uploaded chat_button_reference_v2.svg on mobile */
@media (max-width: 800px){

  html body .chat-button,
  html body .chat-button.chat-button-svg-wrap,
  html body button.chat-button{
    position: fixed !important;
    right: 18px !important;
    bottom: 22px !important;
    left: auto !important;
    top: auto !important;

    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;

    border: 0 !important;
    outline: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent url("assets/site/chat_button_mobile.svg") center/contain no-repeat !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    overflow: visible !important;
    z-index: 99999 !important;
    transform: none !important;

    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
  }

  html body .chat-button svg,
  html body .chat-button .chat-button-svg,
  html body .chat-button .chat-label,
  html body .chat-button span{
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  html body .chat-button::before,
  html body .chat-button::after{
    content: none !important;
    display: none !important;
  }
}

/* v125: hide floating chat button while panel is open */
body.chat-open .chat-button{opacity:0;pointer-events:none;visibility:hidden;}


/* v127: mobile home fine tuning - smaller Mapei badge, centered Portfolio box and hand */
@media (max-width: 800px){
  html body[data-page="home"] .hero-image-wrap{
    position: relative !important;
  }

  /* Installatori Mapei: 30% smaller on mobile */
  html body[data-page="home"] .cert-badge{
    left: 14px !important;
    bottom: 18px !important;
    transform: scale(0.7) !important;
    transform-origin: left bottom !important;
  }

  /* Portfolio box perfectly centered in the hero image */
  html body[data-page="home"] .portfolio-label{
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 68px !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    display: block !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  html body[data-page="home"] .portfolio-label:hover,
  html body[data-page="home"] .portfolio-label:focus,
  html body[data-page="home"] .portfolio-label:active{
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }

  html body[data-page="home"] .portfolio-label .portfolio-draw-box{
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
  }

  html body[data-page="home"] .portfolio-label .portfolio-text{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Hand centered under the box */
  html body[data-page="home"] .hero-hand-icon{
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 26px !important;
    width: 20px !important;
    height: auto !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    animation: none !important;
  }
}


/* v128: Portfolio mobile fixed center, no post-load shift */
@media (max-width: 800px){

  html body[data-page="home"] .portfolio-label{
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 68px !important;

    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;

    /* no transform on the outer button: avoids jump */
    transform: none !important;
    margin-left: -75px !important;
    margin-right: 0 !important;
    padding: 0 !important;

    animation: none !important;
    transition: background-color .18s ease, color .18s ease !important;
    display: block !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  html body[data-page="home"] .portfolio-label:hover,
  html body[data-page="home"] .portfolio-label:focus,
  html body[data-page="home"] .portfolio-label:active{
    transform: none !important;
    margin-left: -75px !important;
  }

  html body[data-page="home"] .portfolio-label .portfolio-text{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;

    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    animation: none !important;
    transition: color .18s ease !important;

    text-align: center !important;
    white-space: nowrap !important;
  }

  html body[data-page="home"] .portfolio-draw-box,
  html body[data-page="home"] .portfolio-draw-box *,
  html body[data-page="home"] .draw-line{
    transform: none !important;
  }

  html body[data-page="home"] .hero-hand-icon{
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 26px !important;
    width: 20px !important;
    margin-left: 0 !important;
    transform: translateX(-50%) !important;
    animation: none !important;
  }
}


/* v129: mobile chat panel aligned to bottom */
@media (max-width: 800px){
  html body .chat-panel{
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    bottom: 8px !important;
    top: auto !important;
    height: min(560px, calc(100vh - 16px)) !important;
    max-height: calc(100vh - 16px) !important;
    margin: 0 !important;
    border-radius: 10px !important;
    z-index: 100000 !important;
  }

  html body .chat-panel.open{
    display: block !important;
  }
}


/* v130: portfolio mobile locators and labels 50% smaller */
@media (max-width: 800px){
  html body[data-page="portfolio"] .map-project-link{
    font-size: 8px !important;
    line-height: 0.95 !important;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(5px + var(--dy, 0px))) !important;
  }

  html body[data-page="portfolio"] .map-project-link.align-left{
    transform: translate(var(--dx, 0px), calc(5px + var(--dy, 0px))) !important;
  }

  html body[data-page="portfolio"] .map-project-link.align-right{
    transform: translate(calc(-100% + var(--dx, 0px)), calc(5px + var(--dy, 0px))) !important;
  }

  html body[data-page="portfolio"] .map-project-text{
    font-size: inherit !important;
    line-height: 0.95 !important;
  }

  html body[data-page="portfolio"] .map-project-pin{
    width: 6px !important;
    height: 9px !important;
    top: -10px !important;
  }
}


/* v131: project gallery fixed 4:3 crop + photo crossfade */
.gallery-frame{
  aspect-ratio:4 / 3 !important;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden !important;
  background:#f3f3f3 !important;
}

.gallery-frame img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  transition:opacity .22s ease !important;
  opacity:1;
}

.gallery-frame img.is-fading{
  opacity:.08 !important;
}

body[data-page="progetto"] .gallery-frame{
  width:min(1100px,100%) !important;
  aspect-ratio:4 / 3 !important;
  height:auto !important;
}

@media(max-width:800px){
  .gallery-frame,
  body[data-page="progetto"] .gallery-frame{
    width:100% !important;
    aspect-ratio:4 / 3 !important;
    height:auto !important;
  }

  .gallery-frame img,
  body[data-page="progetto"] .gallery-frame img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
}


/* v131b: progetti 4:3 cropped image with crossfade */
.project-page .gallery-frame,
body[data-page="portfolio"] .gallery-frame{
  position:relative !important;
  width:min(850px,100%) !important;
  aspect-ratio:4 / 3 !important;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden !important;
  display:block !important;
  background:#f3f3f3 !important;
}

.project-page .gallery-frame img,
body[data-page="portfolio"] .gallery-frame img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  transition:opacity .22s ease !important;
  opacity:1 !important;
}

.project-page .gallery-frame img.is-fading,
body[data-page="portfolio"] .gallery-frame img.is-fading{
  opacity:.08 !important;
}

@media (max-width:800px){
  .project-page .gallery-frame,
  body[data-page="portfolio"] .gallery-frame{
    width:100% !important;
    aspect-ratio:4 / 3 !important;
    height:auto !important;
  }
}


/* v131c: mobile project title same as desktop (no script / no gold) */
@media (max-width:800px){
  body[data-page="progetto"] .project-view h1{
    font-family: var(--font-body) !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    color: #333 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    margin: 18px 0 8px !important;
    text-align: center !important;
  }
}


/* v139: desktop servizi safe alignment, no title changes */
@media (min-width: 801px){
  body[data-page="home"] .services-grid > div:nth-child(2) .service-copy{
    margin-top: 42px !important;
  }
}


/* v140: desktop chat panel aligned to bottom */
@media (min-width: 801px){
  html body .chat-panel{
    position: fixed !important;
    right: 25px !important;
    bottom: 18px !important;
    top: auto !important;
    transform: none !important;
    max-height: calc(100vh - 36px) !important;
  }

  html body.chat-open .chat-button{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}