/* Salvatore Romano — nuova grafica
   Carta fredda, nero pieno, blu cobalto a campiture, menta a piccoli tocchi.
   Titoli: Bricolage Grotesque (grassetto). Testo: Inter. Entrambi ospitati sul sito. */

@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-grotesque-bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --paper:#eef3f5; --ink:#0a1a2c; --blue:#12304d; --mint:#7fd1a0; --white:#fff;
  --mut:#3F4654; --soft:#D5DAE3; --pale:#E9ECF6;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --text:Inter,system-ui,"Segoe UI",Arial,sans-serif;
  --max:1320px; --pad:clamp(20px,4vw,40px);
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;padding:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.55 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
[hidden]:not([hidden=until-found i]){display:none!important}
img,svg{max-width:100%}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.012em;line-height:1;margin:0;text-wrap:balance}
p{margin:0 0 1em}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
em{font-style:normal}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
#servizi :focus-visible,#preventivatore .flow :focus-visible,#preventivatore .quote-toggle :focus-visible,.site-footer :focus-visible,.menu-dialog :focus-visible{outline-color:var(--mint)}
::placeholder{color:#667085;opacity:1}

section[id],#assistenza,#step-summary{scroll-margin-top:84px}

.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-80px;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;font-weight:700;border-radius:999px}
.skip-link:focus{top:12px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sect{padding:clamp(64px,9vw,120px) 0}

/* ---------- etichette e titoli di sezione ---------- */
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 16px;font:700 0.84375rem/1.2 var(--text);letter-spacing:.09em;text-transform:uppercase}
.eyebrow::before{content:"";flex:none;width:11px;height:11px;background:var(--blue);transform:rotate(12deg)}
.sec-head h2,.atitle,.cgrid h2{font-size:clamp(2.7rem,6.6vw,5.6rem);line-height:.94}
.sec-head h2 em,.cgrid h2 em,.atitle em{color:var(--blue)}
.sec-head>p:not(.eyebrow){margin:18px 0 0;max-width:36em;font-size:clamp(1.06rem,1.5vw,1.3rem);line-height:1.45}
.head-ill{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:clamp(32px,4.5vw,60px)}
.head-ill .sec-head{min-width:0}
.scene{flex:none;width:min(36%,400px);height:auto;display:block}

/* ---------- bottoni ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:2px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:700 1.0rem/1.1 var(--text);text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,transform .1s}
.btn svg{flex:none}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--ink);color:#fff}
.btn.pri:hover{background:var(--blue);border-color:var(--blue)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn[aria-disabled=true]{opacity:.42;pointer-events:none}
.menu-btn{width:46px;min-width:46px;height:46px;min-height:46px;padding:0}
.text-button{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font-weight:700;text-align:left;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
.text-button:hover{text-decoration-color:var(--blue)}
.text-button:disabled{opacity:.45;cursor:not-allowed;text-decoration:none}

/* ---------- intestazione ---------- */
.site-header{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:2px solid var(--ink)}
.hbar{max-width:var(--max);margin:0 auto;padding:10px var(--pad);min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;flex-direction:column;gap:2px;text-decoration:none;line-height:1}
.brand b{font:700 1.625rem/1 var(--display);letter-spacing:-.01em}
.brand span{font-size:0.71875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.dnav{display:flex;gap:clamp(16px,2vw,28px)}
.dnav a{display:inline-flex;align-items:center;min-height:44px;font-size:0.9375rem;font-weight:600;text-decoration:none;box-shadow:inset 0 -3px 0 transparent;transition:box-shadow .15s}
.dnav a:hover,.dnav a[aria-current=location]{box-shadow:inset 0 -3px 0 var(--blue)}
.hact{display:flex;align-items:center;gap:10px}
.hact .btn{min-height:46px;padding:0 20px;font-size:0.9375rem}
#menu-open{width:auto;gap:8px;padding:0 16px}
#menu-open .ic-plus{display:none}
@media(min-width:1100px){#menu-open{display:none}}
@media(max-width:1099px){.dnav{display:none}}
@media(max-width:419px){.brand b{font-size:1.375rem}.brand span{font-size:0.65625rem}.hact .btn.hbtn{padding:0 14px}#menu-open{padding:0 13px}#menu-open .mt{display:none}}

/* ---------- menu compatto ---------- */
.menu-dialog{width:min(28rem,calc(100% - 32px));height:auto;margin:16px auto;padding:0;border:2px solid var(--ink);background:#fff;color:var(--ink)}
.menu-dialog[open]{display:block}
.menu-dialog::backdrop{background:rgba(0,0,0,.5)}
.menu-top{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:2px solid var(--ink);font:700 .85rem/1.3 var(--text);letter-spacing:.09em;text-transform:uppercase}
.menu-dialog nav{display:grid;padding:12px 20px}
.menu-dialog nav a{padding:10px 0;color:var(--ink);font:700 1.375rem/1.3 var(--display);text-decoration:none}
.menu-dialog nav a:hover,.menu-dialog nav a[aria-current=location]{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.menu-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 20px 20px}
.menu-dialog .btn.pri{background:var(--ink);border-color:var(--ink);color:#fff}
.menu-dialog .btn.pri:hover{background:#fff;color:var(--ink)}
.menu-dialog .btn.ghost{background:#fff;border-color:var(--ink);color:var(--ink)}
.menu-dialog .btn.ghost:hover{background:var(--ink);color:#fff}
.menu-dialog :focus-visible{outline-color:var(--ink)}

/* ---------- hero ---------- */
.hero{padding:clamp(28px,4.6vw,60px) 0 0;overflow-x:clip}
.hgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,430px);align-items:center;gap:30px clamp(32px,5.5vw,76px)}
.hcopy{min-width:0;container-type:inline-size}
.hcopy h1{margin:0 0 24px;font-size:clamp(2.4rem,7vw,5.9rem);font-size:clamp(2.2rem,12.2cqi,5.4rem);line-height:.96;text-wrap:nowrap}
.hcopy h1 em{display:inline-block;margin-top:.12em;padding:0 .13em .05em;background:var(--blue);color:#fff;transform:rotate(-2.5deg)}
.hero-sub{margin:0 0 28px;max-width:34em;font-size:clamp(1.08rem,1.55vw,1.32rem);line-height:1.45}
.acts{display:flex;flex-wrap:wrap;gap:12px}
.acts .btn{flex:1 1 170px;min-height:60px;font-size:1.125rem}
.hero-photo{position:relative;width:100%;max-width:430px;margin:0 auto}
.hero-photo::before{content:"";position:absolute;top:9%;right:-5%;bottom:-4%;left:9%;background:var(--blue);transform:rotate(4deg)}
.hero-photo img{position:relative;display:block;width:100%;height:auto;aspect-ratio:1/1.06;object-fit:cover;border:3px solid var(--ink);border-radius:0;background:#D9DDE3}
.deco{position:absolute;height:auto}
.deco-cursor{left:-20px;bottom:32px;width:74px;transform:rotate(-8deg)}
.deco-wifi{right:-12px;top:0;width:84px;transform:rotate(14deg)}
.trust{grid-column:1/-1;list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 14px}
.trust li{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border:2px solid var(--ink);border-radius:999px;background:#fff;font-weight:700;line-height:1.2}
.trust svg{flex:none;width:20px;height:20px}
.trust li:nth-child(1){transform:rotate(-2deg)}
.trust li:nth-child(2){background:var(--mint);transform:rotate(1.5deg)}
.trust li:nth-child(3){background:var(--blue);color:#fff;transform:rotate(-1deg)}
@media(max-width:899px){
  .hgrid{grid-template-columns:minmax(0,1fr)}
  .hero-photo{max-width:340px;margin-top:10px}
  .trust{margin-top:22px}
}

/* il cavo */
.cable{display:flex;align-items:center;padding-left:var(--pad);padding-right:var(--pad);margin:10px 0 -2px}
.cable-line{flex:1 1 0;min-width:0;height:90px;display:block}
.cable-plug{flex:none;width:130px;height:90px;display:block;overflow:visible}
@media(max-width:699px){.cable-line{height:62px}.cable-plug{width:90px;height:62px}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes plugin{from{transform:translateX(-12px)}to{transform:translateX(15px)}}
@keyframes wob{0%,100%{transform:rotate(14deg)}50%{transform:rotate(4deg)}}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:auto}
  .deco-wifi{animation:wob 7s ease-in-out infinite}
  @supports (animation-timeline:view()){
    .cable-line{animation:wipe linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
    .cable-plug .plug{animation:plugin linear both;animation-timeline:view();animation-range:cover 40% cover 58%}
  }
}

/* ---------- servizi ---------- */
#servizi{background:var(--blue);color:#fff;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
#servizi .eyebrow::before,#preventivatore .sec-head .eyebrow::before{background:var(--mint)}
#servizi .sec-head h2 em{color:var(--mint)}
.grid3{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:2px;counter-reset:svc;color:var(--ink)}
.svc{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px 20px 18px;background:#fff;outline:2px solid var(--ink);counter-increment:svc;transition:background-color .18s}
.svc::before{content:counter(svc,decimal-leading-zero);font:700 0.9375rem/1 var(--display);letter-spacing:.06em}
.svc h3{display:flex;flex-direction:column;gap:12px;font-size:1.6875rem;line-height:1.02}
.ill{flex:none;display:block;width:104px;height:104px;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.svc>p,.svc .grow p{margin:0;font-size:0.9375rem;line-height:1.45;color:var(--mut)}
.svc .grow{display:flex;flex-direction:column;gap:10px}
.svc .svc-foot{margin-top:auto;padding-top:6px;display:flex;justify-content:flex-end}
.svc .more{display:grid;place-items:center;width:44px;height:44px;padding:0;border:2px solid var(--ink);border-radius:50%;background:#fff;color:var(--ink);transition:background-color .15s,color .15s,transform .2s}
.svc .more::after{content:"";position:absolute;inset:0}
.svc:hover{background:var(--mint)}
.svc:hover .ill{transform:rotate(-5deg) scale(1.05)}
.svc:hover .more{background:var(--ink);color:#fff;transform:rotate(90deg)}
.svc:has(.more:focus-visible){outline:4px solid var(--mint);z-index:1}
.svc .more:focus-visible{outline-color:var(--blue)}
@media(max-width:1099px){
  .grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .svc.wide{grid-column:1/-1}
  .svc.wide h3{flex-direction:row;align-items:center;gap:18px}
  .svc.wide .grow p{max-width:60ch}
}
@media(max-width:759px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc.wide{grid-column:auto}
  .svc.wide h3{flex-direction:column;align-items:flex-start;gap:12px}
}
@media(max-width:539px){
  .grid3{grid-template-columns:minmax(0,1fr)}
  .svc,.svc.wide{display:grid;grid-template-columns:minmax(0,1fr) 44px;column-gap:12px;row-gap:5px;align-items:start;padding:16px 14px 16px 100px;min-height:112px}
  .svc::before{grid-column:1;font-size:0.8125rem}
  .svc h3,.svc.wide h3{display:block;grid-column:1;font-size:1.5rem}
  .svc .ill{position:absolute;left:14px;top:18px;width:74px;height:74px}
  .svc>p,.svc .grow{grid-column:1}
  .svc .grow{gap:5px}
  .svc .svc-foot{grid-column:2;grid-row:1/span 3;align-self:center;margin:0;padding:0}
}

/* ---------- preventivo ---------- */
#preventivatore{background:var(--ink);color:#fff}
#preventivatore .sec-head h2 em{color:var(--mint)}
#preventivatore .sec-head>p:not(.eyebrow){color:var(--soft)}
#preventivatore .sec-head{margin-bottom:clamp(32px,4.5vw,56px)}
.flow-steps{list-style:none;margin:0 0 clamp(32px,4vw,48px);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 44px}
.flow-steps li{display:flex;flex-direction:column;gap:14px;padding-top:18px;border-top:2px solid #fff}
.flow-steps .step-number{font:700 clamp(5rem,9.5vw,8.4rem)/.8 var(--display);color:var(--mint)}
.flow-steps h3{font-size:1.8125rem;line-height:1.04;margin-bottom:8px}
.flow-steps p{margin:0;color:var(--soft)}
@media(max-width:759px){
  .flow-steps{grid-template-columns:minmax(0,1fr);gap:0}
  .flow-steps li{flex-direction:row;align-items:flex-start;gap:18px;padding:16px 0 18px}
  .flow-steps .step-number{flex:none;width:.62em;font-size:4.6rem;line-height:.84}
  .flow-steps h3{font-size:1.625rem}
}
@media(prefers-reduced-motion:no-preference){
  .flow-steps.anim li{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
  .flow-steps.anim li:nth-child(2){transition-delay:.18s}
  .flow-steps.anim li:nth-child(3){transition-delay:.36s}
  .flow-steps.anim.in li{opacity:1;transform:none}
}
#quote-toggle{width:100%;min-height:74px;border-color:var(--mint);background:var(--mint);color:var(--ink);font:700 clamp(1.6rem,3vw,2.1rem)/1 var(--display);letter-spacing:-.005em}
#quote-toggle:hover{background:#fff;border-color:#fff}

.qwrap{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start;margin-top:8px;color:var(--ink)}
@media(min-width:1000px){.qwrap{grid-template-columns:minmax(0,1fr) 380px}.sum{position:sticky;top:100px}}
.qcard{display:flex;flex-direction:column;gap:34px;padding:clamp(18px,3vw,36px);background:var(--paper)}
.notice{display:flex;align-items:flex-start;gap:12px;margin:0;padding:14px 16px;background:var(--mint);border:2px solid var(--ink);font-size:0.9375rem;font-weight:600;line-height:1.4}
.notice p{margin:0}
.notice svg{flex:none;margin-top:1px}
.quote-step{min-width:0;margin:0;padding:0;border:0}
.quote-step legend{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 16px;padding:0;font:700 clamp(1.55rem,2.6vw,1.95rem)/1.05 var(--display);letter-spacing:-.008em}
.quote-step .step-number{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;font-size:1.3125rem;line-height:1}
.helper{margin:10px 0 0;font-size:0.90625rem;line-height:1.45;color:var(--mut)}
.helper b{display:inline-grid;place-items:center;width:20px;height:20px;border:2px solid var(--ink);border-radius:50%;font-size:0.75rem;line-height:1;color:var(--ink)}
.mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:639px){.mgrid{grid-template-columns:minmax(0,1fr)}}
.mc{position:relative;display:block;cursor:pointer}
.mc input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.mc-body{display:flex;align-items:center;gap:12px;height:100%;min-height:74px;padding:13px 16px;background:#fff;border:2px solid var(--ink);transition:background-color .15s,color .15s}
.mc-body svg{flex:none}
.mc b{display:block;font-size:1.0625rem;line-height:1.2}
.mc small{display:block;margin-top:2px;font-size:0.8125rem;line-height:1.3;color:var(--mut)}
.mc:hover .mc-body{background:var(--pale)}
.mc:has(input:checked) .mc-body{background:var(--blue);color:#fff}
.mc:has(input:checked) small{color:#E3E8F5}
.mc:has(input:focus-visible) .mc-body{outline:3px solid var(--blue);outline-offset:3px}
.select-wrap{position:relative}
.select-wrap svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none}
select,input:not([type]),input[type=text],textarea{width:100%;min-height:56px;padding:0 16px;background:#fff;border:2px solid var(--ink);border-radius:0;font-weight:600;appearance:none;-webkit-appearance:none}
select{padding-right:48px;cursor:pointer}
select:disabled{opacity:.5;cursor:not-allowed}
textarea{display:block;min-height:150px;padding:14px 16px;font-weight:400;line-height:1.5;resize:vertical}
.qcard label:not(.mc):not(.sc-label):not(.sr-only),.info-dialog label{display:block;margin:0 0 8px;font-weight:700}
#other-town-field{margin-top:6px}
.optional{font-weight:400;color:var(--mut)}
.cg{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:16px}
@media(min-width:700px){.cg{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sc{position:relative;align-self:start;background:#fff;border:2px solid var(--ink);transition:background-color .15s}
.sc-label{display:flex;align-items:flex-start;gap:12px;min-height:66px;padding:13px 58px 13px 14px;cursor:pointer}
.sc-label input{position:absolute;left:14px;top:14px;width:26px;height:26px;margin:0;opacity:0;cursor:pointer}
.cb{flex:none;display:grid;place-items:center;width:26px;height:26px;margin-top:1px;border:2px solid var(--ink);background:#fff;color:#fff}
.cb svg{width:18px;height:18px;opacity:0}
.sc b{display:block;font-size:1.0rem;line-height:1.25}
.sc small{display:block;margin-top:3px;font-size:0.875rem;color:var(--mut)}
.sc:hover{background:var(--pale)}
.sc.selected,.sc:has(input:checked){background:var(--pale);border-color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue)}
.sc-label input:checked+.cb{background:var(--blue);border-color:var(--blue)}
.sc-label input:checked+.cb svg{opacity:1}
.sc:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.sc.incompatible{border-style:dashed;box-shadow:none;background:#fff}
.compatibility-note{margin:0;padding:0 14px 13px 52px;font-size:0.875rem;font-weight:700;line-height:1.4}
.sc-more>summary{position:absolute;right:7px;top:10px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;list-style:none;cursor:pointer}
.sc-more>summary::-webkit-details-marker{display:none}
.sc-more>summary:hover{background:var(--mint)}
.sc-more[open]>summary{background:var(--ink);color:#fff}
.sc-more>div{padding:0 14px 14px 52px;font-size:0.90625rem;line-height:1.45;color:var(--mut)}
.sc-more>div p{margin:0}
.sc-more>div p+p{margin-top:6px}
.sc-more>div b{display:inline;font-size:inherit;color:var(--ink)}
.territory{border-top:2px solid var(--ink)}
.territory>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 4px;font-weight:700;list-style:none;cursor:pointer}
.territory>summary::-webkit-details-marker{display:none}
.territory>summary svg{flex:none;transition:transform .2s}
.territory[open]>summary svg{transform:rotate(180deg)}
.territory>div{padding-top:8px}
.territory>div p{margin:0;font-size:0.90625rem;color:var(--mut)}
.town-fees{list-style:none;margin:10px 0 0;padding:0;columns:2;column-gap:36px;font-size:0.9375rem}
.town-fees li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed #AEB7C6;break-inside:avoid}
@media(max-width:539px){.town-fees{columns:1}}

/* lo scontrino */
.sum{display:flex;flex-direction:column;gap:14px;padding:26px 24px 40px;background:#fff;color:var(--ink);font-variant-numeric:tabular-nums;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 51% repeat-x,linear-gradient(#000 0 0) top/100% 50% no-repeat;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 51% repeat-x,linear-gradient(#000 0 0) top/100% 50% no-repeat}
.sum .eyebrow{margin:0}
.summary-location{font:700 1.5rem/1.05 var(--display)}
#summary-items{padding:10px 0;border-top:2px dashed var(--ink);border-bottom:2px dashed var(--ink)}
#summary-items .helper{margin:4px 0}
.summary-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 14px;padding:6px 0;font-size:0.9375rem;line-height:1.35}
.summary-row b{text-align:right;white-space:nowrap}
.summary-row small{grid-column:1/-1;font-size:0.8125rem;color:var(--mut)}
.total-block{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 14px}
.total-block span{padding-bottom:6px;font-size:0.78125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.total-block strong{font:700 clamp(2.5rem,5vw,3.5rem)/.9 var(--display);text-align:right}
.total-block p{grid-column:1/-1;margin:0;font-size:0.875rem;color:var(--mut)}
.quote-warnings:empty{display:none}
.quote-warnings{display:grid;gap:7px}
.quote-warnings p{position:relative;margin:0;padding-left:20px;font-size:0.875rem;line-height:1.4}
.quote-warnings p::before{content:"";position:absolute;left:1px;top:.36em;width:10px;height:10px;background:var(--mint);border:2px solid var(--ink);transform:rotate(12deg)}
.quote-exclusions,.privacy-hint{margin:0;font-size:0.84375rem;line-height:1.45;color:var(--mut)}
.sum .btn{width:100%;text-align:center}
.sum .helper{margin:-4px 0 0}
.sum-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 20px}

.price-bar{position:fixed;left:0;right:0;bottom:0;z-index:33;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:#fff;color:var(--ink);border-top:2px solid var(--ink)}
.price-bar>div{display:grid;min-width:0;line-height:1.15}
.price-bar span{font-size:0.71875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.price-bar strong{font:700 1.875rem/1 var(--display)}
.price-bar small{font-size:0.75rem;color:var(--mut)}
.price-bar .btn{flex:none;min-height:48px;padding:0 18px;font-size:0.9375rem}

/* ---------- finestre di dettaglio ---------- */
.info-dialog{width:min(560px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;padding:24px 24px 26px;border:2px solid var(--ink);border-radius:0;background:#fff;color:var(--ink);box-shadow:10px 10px 0 var(--blue);font:400 1.0625rem/1.55 var(--text)}
.info-dialog::backdrop{background:rgba(10,12,16,.66)}
.info-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.info-top h3{font-size:clamp(1.8rem,5vw,2.2rem);line-height:1.02;padding-top:4px}
.info-lead{margin:0 0 18px;color:var(--ink);font-size:1.0625rem}
.info-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:11px}
.info-list li{position:relative;padding-left:22px;line-height:1.45;color:var(--mut)}
.info-list li::before{content:"";position:absolute;left:0;top:.42em;width:10px;height:10px;background:var(--blue);transform:rotate(12deg)}
.info-list b{display:block;color:var(--ink)}
.info-how{margin:0 0 18px;font-weight:700}
.info-note{margin:-6px 0 18px;font-size:0.875rem;color:var(--mut)}
.info-dialog .btn.pri{width:100%}
.info-dialog textarea{min-height:260px;margin-bottom:14px;font-size:0.9375rem}
.info-dialog .helper:empty{display:none}
.pk-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.pk-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 14px;padding:14px 16px;border:2px solid var(--ink)}
.pk-list b{font-size:1.0625rem}
.pk-p{font:700 1.75rem/1 var(--display);text-align:right;white-space:nowrap}
.pk-p s{margin-left:8px;font:500 0.875rem/1 var(--text);color:var(--mut)}
.pk-list small{grid-column:1/-1;font-size:0.875rem;line-height:1.45;color:var(--mut)}
.pk-list li.best{background:var(--mint)}
.pk-list li.best small,.pk-list li.best s{color:#1D2B26}
.town-list{list-style:none;margin:0 0 18px;padding:0;columns:2;column-gap:28px;font-weight:600}
.town-list li{padding:5px 0;border-bottom:1px dashed #AEB7C6;break-inside:avoid}

/* ---------- lezioni ---------- */
.price3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:2px}
.pc{display:flex;flex-direction:column;gap:10px;padding:26px 24px 24px;background:#fff;outline:2px solid var(--ink)}
.pc h3{display:flex;flex-direction:column;gap:14px;font-size:1.9375rem;line-height:1.02}
.pc .big{display:flex;align-items:baseline;gap:8px;min-height:calc(clamp(3.6rem,6.4vw,5.2rem)*.9);margin:8px 0 0;font:700 clamp(3.6rem,6.4vw,5.2rem)/.9 var(--display);letter-spacing:-.015em;color:var(--blue)}
.pc .big small{font:600 1.0rem/1 var(--text);letter-spacing:0;color:var(--ink)}
.pc .big.text{align-items:flex-end;font-size:clamp(2.3rem,4vw,3.2rem);line-height:1}
.pc-sum{margin:0;color:var(--mut)}
.pc .svc-foot{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;gap:10px}
.pc .more{min-height:46px;padding:0 20px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:700 0.9375rem/1 var(--text);transition:background-color .15s,color .15s}
.pc .more:hover{background:var(--mint)}
.pc .more.pk-btn{background:var(--ink);color:#fff}
.pc .more.pk-btn:hover{background:var(--blue);border-color:var(--blue)}
.pc:hover .ill{transform:rotate(-5deg) scale(1.05)}
.cta-line{margin:clamp(28px,4vw,40px) 0 0}
@media(max-width:859px){
  .price3{grid-template-columns:minmax(0,1fr)}
  .pc h3{flex-direction:row;align-items:center;gap:16px}
  .pc .ill{width:76px;height:76px}
  .pc .big{min-height:0}
  .cta-line .btn{width:100%}
}

/* ---------- chi sono ---------- */
#chi-sono{background:var(--mint);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.about{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);grid-template-areas:"title ill" "text path";gap:30px clamp(32px,6vw,88px)}
.atitle{grid-area:title;align-self:end}
.atitle .eyebrow{margin-bottom:18px}
.about-ill{grid-area:ill;justify-self:end;align-self:end;width:min(100%,230px);height:auto;transform:rotate(3deg)}
.atext{grid-area:text;display:flex;flex-direction:column;min-width:0}
.atext p{margin:0;max-width:60ch}
.atext p+p{margin-top:14px}
.atext .lead{max-width:24em;font:700 clamp(1.6rem,2.8vw,2.2rem)/1.08 var(--display);letter-spacing:-.008em}
.atext .lead+p{margin-top:20px}
.atext .emph{align-self:flex-start;max-width:33em;margin-top:30px;padding:18px 22px;background:#fff;border:2px solid var(--ink);font-size:1.12rem;font-weight:700;line-height:1.4;transform:rotate(-1deg)}
.path{grid-area:path;align-self:start;padding:26px 28px 32px;background:var(--ink);color:#fff}
.path .eyebrow{margin:0 0 22px;color:var(--mint)}
.path .eyebrow::before{background:var(--mint)}
.path ol{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:26px}
.path ol::before{content:"";position:absolute;left:10px;top:12px;bottom:12px;width:3px;background:#fff;transform-origin:top}
.path li{display:flex;align-items:center;gap:16px}
.path li::before{content:"";position:relative;z-index:1;flex:none;width:23px;height:23px;border:3px solid #fff;border-radius:50%;background:var(--ink)}
.path li:last-child::before{background:var(--mint);border-color:var(--mint)}
.path li b{font:700 clamp(1.8rem,3vw,2.3rem)/1 var(--display)}
.path.anim li{opacity:0;transition:opacity .6s ease}
.path.anim li:nth-child(2){transition-delay:.35s}
.path.anim li:nth-child(3){transition-delay:.7s}
.path.anim ol::before{transform:scaleY(0);transition:transform 1.1s ease .1s}
.path.anim.in li{opacity:1}
.path.anim.in ol::before{transform:none}
@keyframes cityPulse{0%{box-shadow:0 0 0 0 rgba(166,220,196,.6)}70%,100%{box-shadow:0 0 0 13px rgba(166,220,196,0)}}
.path.anim.in li:last-child::before{animation:cityPulse 2.4s ease-out 1.4s infinite}
@media(max-width:859px){
  .about{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "text" "path"}
  .about-ill{grid-area:ill;align-self:start;width:104px}
  .atitle{padding-right:112px}
}

/* ---------- contatti ---------- */
.contact-sect{padding-bottom:clamp(64px,8vw,112px)}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:40px clamp(32px,6vw,84px)}
.cgrid h2{font-size:clamp(2.5rem,5.4vw,4.5rem);line-height:.96;margin-bottom:20px}
.intro{margin:0 0 18px;max-width:32em;font-size:1.1rem}
.area{display:flex;align-items:flex-start;gap:10px;margin:8px 0 0;font-weight:600;line-height:1.45}
.area svg{flex:none;margin-top:3px}
.area .text-button{display:inline;min-height:0}
.chs{display:grid;gap:12px}
.ch{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px 20px;background:#fff;border:2px solid var(--ink);color:var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.ch:hover{transform:translate(-4px,-4px);box-shadow:6px 6px 0 var(--ink)}
.tile{display:grid;place-items:center;width:54px;height:54px;border:2px solid var(--ink);border-radius:50%;background:var(--mint);color:var(--ink)}
.ch b{display:block;font:700 1.875rem/1 var(--display)}
.ch small{display:block;margin-top:5px;font-size:0.90625rem;line-height:1.35;color:var(--mut);overflow-wrap:anywhere}
.ch .go{display:grid;place-items:center}
.ch.main{background:var(--blue);color:#fff}
.ch.main small{color:#E6EAF6}
.ch.main .tile{background:#fff}
.skyline{display:block;width:100%;height:clamp(120px,16vw,190px);margin-top:clamp(44px,6vw,76px)}
@media(max-width:859px){.cgrid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:419px){.ch{gap:12px;padding:16px 14px}.tile{width:46px;height:46px}.ch b{font-size:1.625rem}}

/* ---------- piè di pagina ---------- */
.site-footer{padding:34px 0 26px;background:var(--ink);color:#fff}
.fgrid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.site-footer .brand span{color:#B9C1CF}
.fnote{display:flex;align-items:center;gap:10px;margin:0;font-size:0.9375rem}
.fnote svg{flex:none;color:var(--mint)}
.fnote b{color:var(--mint)}
.flinks{display:flex;gap:24px}
.flinks a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-underline-offset:4px}
.flinks a:hover{color:var(--mint)}
.fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-top:22px;padding-top:18px;border-top:1px solid #2B3140;font-size:0.84375rem;color:#B9C1CF}

.totop{position:fixed;right:16px;bottom:16px;z-index:34;display:grid;place-items:center;width:48px;height:48px;padding:0;border:2px solid var(--ink);border-radius:50%;background:var(--mint);color:var(--ink);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s,bottom .2s}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:#fff}
body:has(.price-bar.in-view) .totop{bottom:96px}

/* ---------- pagine di servizio (privacy, cookie, 404) ---------- */
.legal,.nf{padding-top:clamp(40px,7vw,84px)}
.doc{max-width:820px}
.doc h1,.nf h1{margin-bottom:14px;font-size:clamp(3.2rem,9vw,6rem);line-height:.92}
.doc .updated{margin:0 0 26px;font-size:0.875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.doc .lead-box{margin:0 0 28px;padding:18px 20px;background:var(--mint);border:2px solid var(--ink);font-size:1.1rem;line-height:1.45}
.doc .notice{margin:0 0 24px}
.doc h2{margin:2em 0 .5em;font-size:clamp(1.9rem,4vw,2.5rem)}
.doc h3{margin:1.5em 0 .35em;font:700 1.12rem/1.3 var(--text);letter-spacing:0}
.doc p{margin:0 0 1em}
.doc ul{margin:0 0 1em;padding-left:1.25em}
.doc li{margin:.45em 0}
.doc li::marker{color:var(--blue)}
.doc a:not(.btn){font-weight:600;text-decoration-thickness:2px;text-underline-offset:3px}
.doc a:not(.btn):hover{color:var(--blue)}
.doc .back{margin:40px 0 0}
.narrow{max-width:760px}
.nf-ill{display:block;width:min(320px,82%);height:auto;margin:0 0 30px}
.nf p{max-width:32em;font-size:1.15rem}

@media(max-width:699px){
  .head-ill{flex-direction:column;align-items:flex-start;gap:26px}
  .scene{width:min(78%,300px)}
}
@media print{
  .site-header,.totop,.price-bar,.cable,.skyline,.menu-dialog{display:none!important}
  #servizi,#preventivatore,#chi-sono,.site-footer{background:#fff!important;color:#000!important}
}
@media(forced-colors:active){
  .btn,.svc,.pc,.sc,.mc-body,.ch,.sum,.qcard{border:2px solid CanvasText}
}

/* disposizione hero: testo, foto, poi pulsanti (su telefono); su computer i pulsanti restano sotto il testo */
.hgrid>.hcopy{grid-column:1;grid-row:1;align-self:center}
.hgrid>.acts{grid-column:1;grid-row:2;align-self:start;margin-top:-2px}
.hgrid>.hero-photo{grid-column:2;grid-row:1}
.hgrid .hero-sub{margin-bottom:0}
@media(max-width:899px){
  .hgrid>.hcopy,.hgrid>.acts,.hgrid>.hero-photo{grid-column:1;grid-row:auto}
  .hgrid>.hero-photo{margin-top:0}
  .hgrid>.acts{margin-top:6px;order:3}
  .hgrid>.hcopy{order:1}
  .hgrid>.hero-photo{order:2}
  .hgrid>.trust{order:4}
}



/* Responsive type, identity and overlays. */
html{scroll-behavior:auto}
body{overflow-wrap:break-word}
h1,h2,h3,h4{line-height:1.1}
.btn{height:auto;padding-block:.75em;line-height:1.35;white-space:normal;text-align:center}
.brand{flex-direction:row;align-items:center;gap:10px;min-width:0}
.brand-mark{flex:none;width:48px;height:auto}
.brand-name{display:flex;flex-direction:column;gap:4px;min-width:0}
.brand b{font-size:1.45rem;line-height:1.05}
.brand span{line-height:1.35}
.hcopy{container-type:normal}
.hcopy h1{font-size:clamp(2rem,1.2rem + 3vw,4.5rem);line-height:1.08;text-wrap:balance}
.hcopy h1 em{max-width:100%;overflow-wrap:anywhere}
.sec-head h2,.atitle,.cgrid h2{font-size:clamp(2rem,1.3rem + 2.5vw,3.6rem);line-height:1.1}
.svc h3,.pc h3{font-size:1.5rem;line-height:1.2}
.connection-mark{grid-column:1/-1;order:4;height:40px;display:flex;align-items:center;margin-top:10px}
.connection-mark svg{display:block;width:240px;height:40px;max-width:100%}
.trust{order:5;margin-top:0;margin-bottom:40px}
.hgrid>.trust{order:5}
@media(prefers-reduced-motion:no-preference){.connection-mark{animation:connect-in .7s ease-out both}}
@keyframes connect-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.about{grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);grid-template-areas:"title text" "path text" "ill text";gap:24px 56px;align-items:start}
.atitle{align-self:start;padding:0}
.path{width:100%;padding:20px 24px}
.path ol{gap:16px}
.path li b{font-size:1.5rem;line-height:1.25}
.about-ill{grid-area:ill;justify-self:center;align-self:center;width:min(100%,180px);transform:rotate(3deg)}
.atext .lead{font:700 1.4rem/1.45 var(--display)}
.atext .emph{transform:rotate(-1deg);font-size:1.0625rem;line-height:1.55}
.total-block{grid-template-columns:minmax(0,1fr);gap:8px}
.total-block strong{font-size:clamp(2rem,1.5rem + 1vw,3rem);line-height:1.15;text-align:left;min-width:0;overflow-wrap:anywhere}
.total-block strong.is-status{font-size:1.5rem;line-height:1.25}
.total-block p{grid-column:auto}
.summary-row{grid-template-columns:minmax(0,1fr) minmax(0,auto)}
.summary-row b{white-space:normal;overflow-wrap:anywhere}
.sum{position:static;mask:none;-webkit-mask:none;padding-bottom:28px}
.price-bar strong{font-size:1.25rem;line-height:1.25}
.price-bar>div{flex:1}
.price-bar .btn{flex:0 1 auto}
.dialog-backdrop{position:fixed;inset:0;z-index:100;background:rgba(10,12,16,.65);backdrop-filter:blur(3px)}
body.dialog-open .totop,body.dialog-open .price-bar{visibility:hidden}
dialog.info-dialog,dialog.menu-dialog{position:absolute;inset:auto 0 auto;margin:0 auto 24px;width:min(44rem,calc(100% - 32px));height:auto;max-height:none;max-width:none;overflow:visible;z-index:101;border:2px solid var(--ink);padding:24px;background:var(--paper);color:var(--ink);box-shadow:8px 8px 0 var(--mint)}
dialog.menu-dialog{width:min(28rem,calc(100% - 32px));padding:0;background:#fff;color:var(--ink);box-shadow:6px 6px 0 var(--ink)}
.menu-dialog[open]{display:block}
.menu-top{padding:12px 20px}
.menu-dialog nav{display:grid;flex:none;overflow:visible;padding:12px 20px;gap:0}
.menu-dialog nav a{font-size:1.375rem;line-height:1.3;padding:10px 0;border-bottom:1px solid #0a1a2c30;min-height:44px}
.menu-cta{padding:16px 20px 20px}
.menu-dialog .menu-top{background:#fff;color:var(--ink)}
.menu-dialog :focus-visible{outline-color:var(--ink)}
.menu-dialog .menu-top :focus-visible{outline-color:var(--ink)}
.info-top{gap:12px}
.info-top h3{font-size:1.5rem;line-height:1.25}
.info-top .menu-btn{flex:none}
.info-lead{font-size:1.0625rem}
.info-dialog textarea{resize:none;min-height:12rem;font-size:1rem}
.info-dialog .info-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
.town-list{columns:2;font-size:1rem}
.skip-link{position:fixed}
@media(max-width:1099px){.brand-mark{width:40px}}
@media(max-width:859px){
 .about{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "path" "text" "ill";gap:24px}
 .path ol{display:grid;gap:16px}
 .path ol::before{display:block}
 .path li{gap:14px}
 .path li b{font-size:1.25rem}
 .path li::before{width:23px;height:23px}
 .about-ill{width:150px}
}
@media(max-width:539px){
 .hbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;min-height:72px}
 .site-header .brand-name b{max-width:10ch}
 .site-header .brand-name span{font-size:.5625rem;letter-spacing:.02em}
 .site-header .brand-mark{width:28px}
 .site-header .brand-name{gap:3px}
 .hact{flex-wrap:nowrap}
 #menu-open{width:44px;min-width:44px;padding:0}
 #menu-open .mt{display:none}
 .brand b{font-size:1.125rem}
 .brand span{font-size:.625rem;letter-spacing:.06em}
 .brand-mark{width:32px}
 .brand{gap:6px}
 .hact{gap:6px;margin-left:auto}
 .hact .btn.hbtn{padding-inline:12px;font-size:.875rem}
 .hact .menu-btn{min-width:44px;min-height:44px}
 .hcopy h1{font-size:clamp(2rem,1.4rem + 3vw,3rem);text-wrap:wrap}
 .head-ill .scene{width:180px}
 .info-dialog .info-list{grid-template-columns:minmax(0,1fr)}
 dialog.info-dialog{padding:20px;box-shadow:5px 5px 0 var(--mint)}
 .town-list{columns:1}
 .pc h3{flex-wrap:wrap}
 .pk-list li{grid-template-columns:minmax(0,1fr)}
 .pk-p{text-align:left;white-space:normal;line-height:1.3}
 .pk-list small{grid-column:auto}
 .price-bar{flex-wrap:wrap}
 .price-bar .btn{font-size:.875rem}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .path.anim li,.path.anim ol::before,.flow-steps.anim li{opacity:1;transform:none}
}
@media(forced-colors:active){
 :focus-visible{outline:3px solid Highlight!important}
 .dialog-backdrop{background:Canvas;opacity:.8}
 .cb,.path li::before,.menu-dialog nav a{border-color:CanvasText}
}
@media print{.connection-mark,.dialog-backdrop,dialog{display:none!important}}

section[id],#assistenza,#step-summary{scroll-margin-top:var(--header-offset,100px)}

.pc .big{flex-wrap:wrap;line-height:1.1}
@media(max-width:359px),(max-height:450px){.site-header{position:relative}section[id],#assistenza,#step-summary{scroll-margin-top:16px}html{scroll-padding-top:0!important}}

/* Hero badges and compact horizontal journey. */
.trust{justify-content:center;align-items:center;gap:22px;margin:12px 0 48px}
.trust li{justify-content:center;text-align:center;min-height:58px;padding:14px 26px;font-size:1.125rem;line-height:1.35;max-width:100%}
.about{grid-template-columns:minmax(0,1.5fr) minmax(180px,.65fr);grid-template-areas:"title title" "path path" "text ill";gap:28px 48px;align-items:center}
.about-ill{grid-area:ill;align-self:center;justify-self:center;width:min(100%,230px);height:auto}
.path{padding:16px 22px;width:100%}
.path .eyebrow{margin-bottom:12px;font-size:.8125rem}
.path ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.path ol::before{display:block;left:16.6667%;right:16.6667%;top:8px;bottom:auto;width:auto;height:2px;transform-origin:left center}
.path li{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;text-align:center}
.path li::before{width:18px;height:18px;border-width:2px}
.path li b{font-size:1.125rem;line-height:1.3;overflow-wrap:anywhere}
.path.anim ol::before{transform:scaleX(0)}
.path.anim.in ol::before{transform:scaleX(1)}
.head-ill{display:grid;grid-template-columns:minmax(0,1fr) minmax(100px,28%);align-items:center}
.head-ill .scene{width:100%;max-width:300px;justify-self:center;align-self:center}
@media(max-width:899px){
 .hgrid>.hero-photo{grid-column:1;grid-row:auto}
 .trust{width:100%;margin-top:12px;gap:22px}
 .trust li{width:min(100%,26rem)}
}
@media(max-width:859px){
 .about{grid-template-columns:minmax(0,1fr) 76px;grid-template-areas:"title ill" "path path" "text text";gap:24px 16px}
 .about-ill{grid-area:ill;width:76px;align-self:center}
 .atitle{padding:0;min-width:0}
 .path{padding:16px 12px}
 .path li b{font-size:1rem}
 .head-ill{grid-template-columns:minmax(0,1fr) 76px;gap:16px;align-items:center}
 .head-ill .scene{width:76px}
}
@media(prefers-reduced-motion:reduce){
 .path.anim ol::before,.path.anim.in ol::before{transform:none}
}

/* The overlay owns scrolling; the panel itself has no internal scroll area. */
body.dialog-open{overflow:hidden}
.dialog-viewport{position:fixed;inset:0;z-index:101;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:16px 24px 24px 16px;-webkit-overflow-scrolling:touch}
.dialog-viewport dialog.info-dialog,.dialog-viewport dialog.menu-dialog{position:relative;inset:auto;margin:0 auto;max-height:none;overflow:visible;width:min(44rem,100%)}
.dialog-viewport dialog.menu-dialog{width:min(28rem,100%)}
@media print{.dialog-viewport{display:none!important}}

/* ===== Allineamenti ripresi dal sito online ===== */
/* Contatti: testo, illustrazione sotto il sottotitolo (mobile) o a destra (desktop), card sotto */
.cgrid{align-items:start}
.cgrid .cscene{display:block;width:min(100%,340px);margin:8px 0 4px;height:auto}
@media(min-width:900px){
  .cgrid{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:36px clamp(32px,6vw,84px);align-items:center}
  .cgrid>div:first-child{grid-column:1;grid-row:1}
  .cgrid .cscene{grid-column:2;grid-row:1;width:min(34vw,380px);margin:0}
  .cgrid .chs{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr))}
  .cgrid .intro{max-width:34rem}
}
@media(min-width:900px) and (max-width:1179px){.cgrid .chs{grid-template-columns:1fr}.cgrid .ch small{overflow-wrap:anywhere}}
@media(max-width:359px){.ch{padding:16px 12px;gap:12px}.ch small{font-size:.8125rem;overflow-wrap:anywhere}}
.ch small{overflow-wrap:anywhere}

/* Servizi su mobile: solo titolo e pulsante "Dettagli" */
@media(max-width:759px){
  .svc>p,.svc .grow>p{display:none!important}
  .svc,.svc.wide{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between;gap:12px;padding:14px 14px 14px 92px;min-height:0}
  .svc::before{display:none}
  .svc .ill{top:50%;transform:translateY(-50%);width:62px;height:62px;left:14px}
  .svc:hover .ill{transform:translateY(-50%) rotate(-5deg)}
  .svc h3,.svc.wide h3{font-size:1.3125rem;flex:1;min-width:0}
  .svc .grow{flex:1;min-width:0;gap:0}
  .svc .svc-foot{margin:0;padding:0;align-self:center}
  .svc .more{width:auto;height:44px;padding:0 16px;border-radius:999px;font:700 .9375rem/1 var(--text)}
  .svc .more svg{display:none}
  .svc .more:after{content:"Dettagli";position:static;inset:auto}
}
@media(max-width:759px){
  .svc,.svc.wide{padding:12px 12px 12px 78px;gap:8px}
  .svc .ill{width:52px;height:52px;left:14px}
  .svc h3,.svc.wide h3{font-size:1.125rem;line-height:1.12;hyphens:none;overflow-wrap:normal;word-break:normal}
  .svc .more{height:40px;padding:0 13px;font-size:.875rem}
}
@media(max-width:899px){.cgrid>div:first-child{order:0}.cgrid .cscene{order:1;margin:0}.cgrid .chs{order:2}}

/* Chi sono: navy con card bianche (come il ritmo del sito attuale) */
.about-sect{background:#0a1a2c;color:#eef3f5}
.about-sect .atitle{color:#eef3f5}
.about-sect .atitle em{color:#8cd4a8}
.about-sect .atext p{color:#cfd9e0}
.about-sect .atext .lead{color:#fff}
.about-sect .atext .emph{background:#fff;color:#0a1a2c;border-color:#fff}
.about-sect .path{background:#fff;color:#0a1a2c}
.about-sect .path .eyebrow{color:#0a1a2c}
.about-sect .path .eyebrow::before{background:#75cc95}
.about-sect .path ol::before{background:#0a1a2c}
.about-sect .path li::before{border-color:#0a1a2c;background:#fff}
.about-sect .path li:last-child::before{background:#75cc95;border-color:#75cc95}
.about-sect .about-ill{filter:drop-shadow(0 0 0 transparent)}
section#chi-sono.about-sect{background:#0a1a2c!important;color:#eef3f5!important}
.about-sect .about-ill{stroke:#eef3f5}

/* Illustrazioni di testata (Servizi, Lezioni): stesso allineamento del sito online */
@media(max-width:599px){
  .head-ill{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
  .head-ill .scene{width:min(100%,340px);max-width:340px;justify-self:auto;align-self:flex-start}
}
@media(min-width:600px){
  .head-ill{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px}
  .head-ill .scene{flex:none;width:min(34%,340px);max-width:340px;justify-self:auto;align-self:flex-end}
}

/* Allineamento a metà schermo (900–1179px): illustrazioni sulla stessa linea di base del testo */
@media(min-width:900px){.cgrid .cscene{align-self:end}}
@media(min-width:900px) and (max-width:1179px){
  .about{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title ill" "path path" "text text";align-items:end}
  .about-ill{grid-area:ill;justify-self:end;align-self:end;width:150px}
  .atext p{max-width:none}
}
.about-sect .atitle .eyebrow{color:#eef3f5}
.about-sect .atitle .eyebrow::before{background:#75cc95}

/* Hero desktop: pillole sotto il sottotitolo, foto alta quanto tutto il blocco di testo */
@media(min-width:900px){
  .hgrid{align-items:stretch;row-gap:0}
  .hgrid>.hcopy{grid-column:1;grid-row:1;align-self:end}
  .hgrid>.trust{grid-column:1;grid-row:2;order:0;justify-content:flex-start;align-items:center;margin:28px 0 0;gap:14px;width:auto;align-self:start}
  .hgrid>.trust li{width:auto;min-height:0;padding:9px 18px;font-size:1rem;justify-content:flex-start;text-align:left}
  .hgrid>.hero-photo{grid-column:2;grid-row:1/3;align-self:stretch;display:flex;margin:0;max-width:430px}
  .hgrid>.hero-photo img{height:100%;aspect-ratio:auto;min-height:0}
}
@media(min-width:900px){.hgrid>.hero-photo{margin-bottom:0}.hgrid{padding-bottom:48px}}

/* Chi sono senza illustrazione */
@media(max-width:1179px){.about{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"title" "path" "text"!important;gap:24px!important}.atitle{padding-right:0!important}}
@media(min-width:1180px){.about{grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr)!important;grid-template-areas:"title title" "text path"!important}}

/* Menu al centro dello schermo quando non è su telefono */
@media(min-width:600px){
  dialog.menu-dialog{position:fixed!important;top:50%!important;bottom:auto!important;left:0!important;right:0!important;margin:0 auto!important;transform:translateY(-50%)}
}

/* Servizi su mobile: titolo + sottotitolo + pulsante Dettagli */
@media(max-width:759px){
  .svc>p,.svc .grow>p{display:block!important;font-size:.875rem;line-height:1.4}
  .svc,.svc.wide{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto;row-gap:6px;align-items:start!important;padding:16px 14px 16px 84px;min-height:84px}
  .svc .ill{top:16px;transform:none;width:56px;height:56px}
  .svc:hover .ill{transform:rotate(-5deg)}
  .svc h3,.svc.wide h3{font-size:1.1875rem;grid-column:1}
  .svc>p,.svc .grow{grid-column:1}
  .svc .grow{display:flex;flex-direction:column;gap:6px}
  .svc .svc-foot{grid-column:1;justify-content:flex-start;padding:4px 0 0;margin:0}
  .svc .more{height:38px;padding:0 14px}
}
@media(max-width:759px){
  .svc h3,.svc.wide h3{grid-row:1}
  .svc>p,.svc .grow{grid-row:2}
  .svc .svc-foot{grid-row:3!important;grid-column:1!important}
  .svc::before{display:none}
}
@media(min-width:1180px){.about .path{align-self:start!important;margin:0}.about .atext{align-self:start}}

/* Chi sono e Contatti: stesso allineamento del sito online a mezza larghezza */
@media(min-width:800px){
  .about{grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr)!important;grid-template-areas:"title title" "text path"!important;align-items:start!important;gap:28px clamp(32px,6vw,88px)!important}
  .about .path{align-self:start!important;width:100%;padding:26px 28px 32px}
  .about .path ol{display:grid;grid-template-columns:1fr;gap:26px}
  .about .path ol::before{display:block;left:10px;right:auto;top:12px;bottom:12px;width:3px;height:auto;transform-origin:top}
  .about .path li{flex-direction:row;align-items:center;text-align:left;gap:16px}
  .about .path li::before{width:23px;height:23px;border-width:3px}
  .about .path li b{font-size:clamp(1.5rem,2.4vw,2.1rem);overflow-wrap:normal}
  .about .path.anim ol::before{transform:scaleY(0)}
  .about .path.anim.in ol::before{transform:none}
  .atext p{max-width:60ch!important}
}
@media(min-width:900px){.cgrid .cscene{align-self:center!important}}

/* Menu: blu del sito al posto del nero */
dialog.menu-dialog{border:2px solid #12304d!important;box-shadow:6px 6px 0 #12304d!important}
dialog.menu-dialog .menu-top{background:#12304d!important;color:#fff!important;border-bottom:0!important}
dialog.menu-dialog .menu-top .menu-btn{background:transparent!important;border-color:#fff!important;color:#fff!important}
dialog.menu-dialog .menu-top .menu-btn:hover{background:#fff!important;color:#12304d!important}
dialog.menu-dialog nav a{color:#12304d!important;border-bottom-color:#12304d2e!important}
dialog.menu-dialog nav a:hover,dialog.menu-dialog nav a[aria-current=location]{color:#12304d!important}
dialog.menu-dialog .btn.pri{background:#12304d!important;border-color:#12304d!important;color:#fff!important}
dialog.menu-dialog .btn.pri:hover{background:#fff!important;color:#12304d!important}
dialog.menu-dialog .btn.ghost{background:#fff!important;border-color:#12304d!important;color:#12304d!important}
dialog.menu-dialog .btn.ghost:hover{background:#12304d!important;color:#fff!important}
dialog.menu-dialog :focus-visible{outline-color:#75cc95!important}

/* Menu tablet: pannello a destra sotto l'intestazione, come sul sito attuale */
@media(min-width:600px){
  dialog.menu-dialog{position:fixed!important;top:80px!important;bottom:auto!important;left:auto!important;right:12px!important;margin:0!important;transform:none!important;width:360px!important;max-width:calc(100vw - 24px)}
}

/* Scontrino: bordo inferiore a denti di sega, a tutte le larghezze */
.sum,.sum{
  padding-bottom:44px!important;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 9px repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat!important;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 9px repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat!important;
  border:0!important;outline:0!important
}

/* Pulsante dei servizi: niente rotazione che esce dalla card */
.svc:hover .more{transform:none!important}
@media(hover:hover) and (min-width:760px){.svc:hover .more{transform:rotate(45deg)!important}}

/* Menu: barra e cornice nel blu scuro della sezione Preventivo */
dialog.menu-dialog{border-color:#0a1a2c!important;box-shadow:6px 6px 0 #0a1a2c!important}
dialog.menu-dialog .menu-top{background:#0a1a2c!important}
dialog.menu-dialog .btn.pri{background:#0a1a2c!important;border-color:#0a1a2c!important}
dialog.menu-dialog .btn.ghost{border-color:#0a1a2c!important}
dialog.menu-dialog .menu-top .menu-btn{color:#0a1a2c!important}