/* Interiormente Design: aggiunte a style.css (copia del prototipo, da non toccare).
   Si carica dopo style.css. Solo classi nuove, con i gettoni del prototipo (:root di
   style.css): nessuna regola qui cambia le 15 pagine del prototipo.
   Contratto del markup: docs/redesign-v3/CONTRATTO-JS.md, parte «Classi di extra.css». */


/* ---------------------------------------------------------------- introduzione lunga
   page-intro con titoli lunghi (articoli del blog): l'h1 del prototipo arriva a 118px. */

.page-intro.intro-lunga h1{font-size:clamp(46px,4.8vw,78px);line-height:1.08;letter-spacing:-.05em;max-width:1120px}
.intro-lunga .lettura-meta{margin-top:30px}


/* ------------------------------------------------------------------ colonna di lettura
   Legali e articoli: a destra il testo (640px, allineato alla page-lead), a
   sinistra una colonna facoltativa con date, dati del titolare, indice. */

.lettura{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,640px);column-gap:clamp(40px,6vw,120px);padding-top:30px;padding-bottom:110px;background:var(--paper)}
.lettura-lato{grid-column:1;align-self:start;position:sticky;top:40px;display:grid;gap:30px}
.lettura-corpo{grid-column:2;min-width:0;color:#344e61;font-size:1rem;line-height:1.85;overflow-wrap:break-word}

.lettura-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;font-size:.75rem;font-weight:600;letter-spacing:.08em;line-height:1.5;color:var(--muted)}
.lettura-meta>:not(:last-child):after{content:'';display:inline-block;width:3px;height:3px;margin:0 12px;vertical-align:middle;background:currentColor}
.lettura-meta time{font-weight:600}

.lettura-scheda{margin:0;padding:26px 28px;background:#e5edf3;display:grid;gap:16px}
.lettura-scheda>div{display:grid;gap:3px}
.lettura-scheda dt{font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.lettura-scheda dd{margin:0;font-size:.875rem;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.lettura-scheda a{text-decoration:underline;text-underline-offset:4px}

.lettura-corpo>:first-child{margin-top:0}
.lettura-corpo>:last-child{margin-bottom:0}
.lettura-corpo p{margin:0 0 22px}
.lettura-corpo h2,.lettura-corpo h3,.lettura-corpo h4{color:var(--ink);font-weight:500;scroll-margin-top:30px}
.lettura-corpo h2{font-size:clamp(28px,2.5vw,38px);line-height:1.18;letter-spacing:-.045em;margin:58px 0 20px}
.lettura-corpo h3{font-size:clamp(21px,1.7vw,25px);line-height:1.3;letter-spacing:-.03em;margin:40px 0 14px}
.lettura-corpo h4{font-size:1rem;font-weight:600;line-height:1.5;letter-spacing:0;margin:30px 0 10px}
.lettura-corpo h3 em,.lettura-corpo h4 em{font-family:var(--serif);font-weight:400}
.lettura-corpo h2+h3{margin-top:24px}
.lettura-corpo strong,.lettura-corpo b{font-weight:600;color:var(--ink)}
.lettura-corpo em{font-family:var(--serif);font-size:1.08em;line-height:1}
.lettura-corpo h2 em{font-size:1em}
.lettura-corpo a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .25s}
.lettura-corpo a:hover{color:#234764;text-decoration-thickness:2px}
.lettura-corpo ul,.lettura-corpo ol{list-style:none;margin:0 0 26px;padding:0}
.lettura-corpo li{position:relative;padding-left:30px;margin-bottom:10px}
.lettura-corpo li:last-child{margin-bottom:0}
.lettura-corpo ul>li:before{content:'';position:absolute;left:4px;top:.78em;width:5px;height:5px;background:var(--blue)}
.lettura-corpo ol{counter-reset:voce}
.lettura-corpo ol>li{counter-increment:voce}
.lettura-corpo ol>li:before{content:counter(voce,decimal-leading-zero);position:absolute;left:0;top:.2em;font-size:.75rem;font-weight:600;letter-spacing:.04em;line-height:1.85;color:var(--blue)}
.lettura-corpo li>ul,.lettura-corpo li>ol{margin:10px 0 0}
.lettura-corpo blockquote{margin:36px 0;padding:2px 0 2px 28px;border-left:1px solid var(--blue);color:var(--ink);font-size:1.25rem;line-height:1.6;letter-spacing:-.02em}
.lettura-corpo blockquote p{margin:0 0 12px}
.lettura-corpo blockquote p:last-child{margin-bottom:0}
.lettura-corpo figure{margin:40px 0}
.lettura-corpo figure img{width:100%;height:auto}
.lettura-corpo figure picture{display:block}
.lettura-corpo figcaption{margin-top:12px;font-size:.75rem;letter-spacing:.04em;line-height:1.6;color:var(--muted)}
.lettura-corpo hr{border:0;border-top:1px solid var(--line);margin:44px 0}
.lettura-corpo code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875em;padding:1px 5px;background:#e5edf3;color:var(--ink)}

/* tabelle: il contenitore di testo_ricco() scorre da solo sui telefoni */
.lettura-corpo .post__tabella,.lettura-tabella{margin:30px 0 34px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.lettura-corpo table{width:100%;border-collapse:collapse;font-size:.875rem;line-height:1.6;color:#344e61}
.lettura-corpo .post__tabella table,.lettura-tabella table{min-width:560px}
.lettura-corpo th,.lettura-corpo td{padding:14px 18px 14px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.lettura-corpo th:last-child,.lettura-corpo td:last-child{padding-right:0}
.lettura-corpo thead th{padding-top:0;border-bottom-color:var(--ink);font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.lettura-corpo tbody th{font-weight:600;color:var(--ink)}

/* copertina dell'articolo, fra introduzione e testo */
.lettura-copertina{margin:0;background:var(--paper)}
.lettura-copertina img{width:100%;aspect-ratio:16/8;height:auto;object-fit:cover;background:#dde7ee}
.lettura-copertina figcaption{padding-top:14px;font-size:.75rem;letter-spacing:.04em;color:var(--muted)}


/* ------------------------------------------------------------------- indice del blog */

.blog-indice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:60px 24px;padding-top:10px;padding-bottom:110px;background:var(--paper)}
.blog-scheda{display:flex;flex-direction:column;min-width:0}
.blog-scheda-foto{position:relative;overflow:hidden;aspect-ratio:1.18;background:#405668}
.blog-scheda-foto img,.blog-scheda-foto picture{width:100%;height:100%}
.blog-scheda-foto img{object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.blog-scheda-apri{position:absolute;right:20px;top:20px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--paper);color:var(--ink);font-size:24px;transition:background .25s,transform .25s}
.blog-scheda .lettura-meta{margin-top:22px}
.blog-scheda h2{margin-top:12px;font-size:clamp(22px,1.65vw,28px);line-height:1.25;letter-spacing:-.035em;text-wrap:pretty}
.blog-scheda-estratto{margin-top:12px;font-size:.875rem;line-height:1.75;color:var(--muted)}
.blog-scheda:hover .blog-scheda-foto img{transform:scale(1.035)}
.blog-scheda:hover .blog-scheda-apri{background:var(--accent);transform:rotate(45deg)}
.blog-vuoto{padding-bottom:110px;color:var(--muted)}


/* --------------------------------------------------------------------- pagina 404 */

.pagina-errore{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px;padding-top:85px;padding-bottom:110px;background:var(--paper)}
.pagina-errore .eyebrow{color:var(--blue)}
.pagina-errore h1{font-size:clamp(64px,7.1vw,118px);line-height:1.04;letter-spacing:-.058em;max-width:900px}
.pagina-errore h1 em{color:var(--blue)}
.pagina-errore .page-lead{margin:32px 0 0;max-width:560px}
.pagina-errore-numero{font-size:clamp(160px,21vw,330px);line-height:.8;font-weight:500;letter-spacing:-.085em;padding-right:.085em;color:#dce5ec;margin:0 0 -.04em;user-select:none}
.pagina-errore-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:26px 40px;margin-top:44px}


/* ------------------------------------------------------------ riga legale del footer
   Dentro .footer-legal, fra il copyright e la firma dello studio. I punti fra le voci
   sono disegnati dal CSS dopo ogni voce, fuori dai link: non finiscono nel nome letto
   ad alta voce e, andando a capo, non aprono la riga nuova. */

.footer-legal-link{display:flex;flex-wrap:wrap;align-items:center;margin:-3px 0;padding:0;list-style:none}
.footer-legal-link li{display:flex;align-items:center}
.footer-legal-link li:not(:last-child):after{content:'·';content:'·' / '';margin:0 8px}
.footer-legal-link a,.footer-legal-link button{padding:3px 0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer}
.footer-legal-link a:hover,.footer-legal-link button:hover{color:#bad3e5;text-decoration:underline;text-underline-offset:4px}
.footer-editorial button:focus-visible{outline-color:#bad3e5}


/* ----------------------------------------------------------------------- nota privacy
   Il testo sta in p.form-privacy (style.css, link già sottolineati). Qui solo lo stato
   di errore della registrazione, scritto da app.js in #form-status[data-esito]. */

.form-status[data-esito="errore"]{color:#9a3423}
.form-status a{overflow-wrap:anywhere}


/* ------------------------------------------------------------------ esca del modulo
   Il campo sito_web resta vuoto per le persone: fuori schermo, fuori dal tab
   (tabindex=-1 sull'input) e fuori dalla lettura (aria-hidden sul contenitore). */

.form-esca{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}


/* ------------------------------------------------------------------- banner cookie
   Markup di render._banner_cookie, comportamento di assets/cookie.js. Non è un muro:
   la pagina dietro resta usabile. «Solo i necessari» e «Accetta tutti» hanno lo stesso
   peso visivo (linee guida del Garante del 10 giugno 2021). */

.cookie{position:fixed;left:var(--gutter);right:var(--gutter);bottom:24px;z-index:130;display:flex;justify-content:flex-start;pointer-events:none}
.cookie[hidden]{display:none}
.cookie__scheda{width:min(540px,100%);max-height:min(80svh,660px);overflow-y:auto;overscroll-behavior:contain;padding:30px 32px 32px;background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 18px 50px #1d2d3c29;pointer-events:auto;animation:cookie-entra .45s cubic-bezier(.2,.65,.25,1) both}
@keyframes cookie-entra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.cookie h2{font-size:26px;line-height:1.3;letter-spacing:-.04em;margin:0 0 10px}
.cookie h2:focus{outline:none}
.cookie h2:focus-visible{outline:3px solid #315e83;outline-offset:6px}
.cookie p{font-size:.875rem;line-height:1.7;color:var(--muted)}
.cookie p a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

.cookie__scelte{display:grid;gap:10px;margin-top:22px}
.cookie__scelte[hidden]{display:none}
.cookie__voce{display:grid;gap:4px;padding:16px 17px;border:1px solid var(--line);cursor:pointer;transition:background .25s,border-color .25s}
.cookie__voce:has(input:checked:not(:disabled)){background:#dceaf4;border-color:#557e9f}
.cookie__voce:has(input:disabled){background:#e5edf3;cursor:default}
.cookie__voce:has(input:focus-visible){outline:3px solid #315e83;outline-offset:3px}
.cookie__voce-testa{display:flex;align-items:center;gap:12px}
.cookie__voce-testa b{font-size:.875rem;font-weight:600}
.cookie__voce input{flex:none;width:17px;height:17px;margin:0;accent-color:#315e83}
.cookie__voce input:focus-visible{outline:none}
.cookie__fisso{margin-left:auto;font-size:.75rem;letter-spacing:.04em;color:var(--muted)}
.cookie__voce-testo{padding-left:29px;font-size:.75rem;line-height:1.7;color:var(--muted)}

.cookie__azioni{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
.cookie__azioni--scelte{margin-top:26px}
.cookie__btn{flex:1 1 150px;min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border:1px solid transparent;font-size:.875rem;font-weight:600;line-height:1.3;text-align:center;transition:background .25s,color .25s,border-color .25s}
.cookie__btn[hidden]{display:none}
/* rifiutare pesa quanto accettare: stesso bottone pieno */
.cookie__btn--si,.cookie__btn[data-cookie="rifiuta"]{background:var(--ink);color:var(--paper)}
.cookie__btn--si:hover,.cookie__btn[data-cookie="rifiuta"]:hover{background:#31506a}
/* «Scegli tu»: link sottolineato come .text-link, fuori dalla coppia */
.cookie__btn[data-cookie="personalizza"]{flex:0 0 auto;order:3;min-height:44px;padding:0 0 4px;border-width:0 0 1px;border-color:currentColor;background:none;color:var(--ink)}
.cookie__btn[data-cookie="personalizza"]:hover{color:var(--blue)}
.cookie__btn:focus-visible{outline:3px solid #315e83;outline-offset:4px}


/* ------------------------------------------------------------------- media query */

@media(max-width:999px){
 .lettura{grid-template-columns:minmax(0,1fr);row-gap:40px;padding-top:10px;padding-bottom:80px}
 .lettura-copertina+.lettura{padding-top:40px}
 .lettura-lato{grid-column:1;position:static;max-width:640px}
 .lettura-corpo{grid-column:1;max-width:640px}
 .blog-indice{grid-template-columns:repeat(2,minmax(0,1fr));gap:50px 20px;padding-bottom:80px}
 .pagina-errore{grid-template-columns:minmax(0,1fr);gap:0;padding-top:60px;padding-bottom:80px}
 .pagina-errore h1{font-size:clamp(60px,9vw,84px)}
 .pagina-errore-numero{order:-1;font-size:clamp(130px,26vw,220px);margin:0 0 30px}
 .page-intro.intro-lunga h1{font-size:clamp(42px,6.4vw,60px)}
}
@media(max-width:699px){
 .lettura{row-gap:32px;padding-bottom:64px}
 .lettura-scheda{padding:22px 20px}
 .lettura-corpo h2{margin:46px 0 16px}
 .lettura-corpo h3{margin:32px 0 12px}
 .lettura-corpo blockquote{padding-left:20px;font-size:1.125rem}
 .lettura-corpo li{padding-left:26px}
 .lettura-copertina img{aspect-ratio:4/3}
 .blog-indice{grid-template-columns:minmax(0,1fr);gap:48px;padding-bottom:64px}
 .blog-scheda-apri{width:37px;height:37px;right:15px;top:15px;font-size:21px}
 .blog-scheda h2{font-size:23px}
 .pagina-errore{padding-top:43px;padding-bottom:64px}
 .pagina-errore h1{font-size:clamp(43px,11.1vw,74px);line-height:1.1;letter-spacing:-.05em}
 .pagina-errore .page-lead{margin-top:25px}
 .pagina-errore-numero{font-size:clamp(110px,32vw,160px);margin-bottom:22px}
 .pagina-errore-azioni{flex-direction:column;align-items:flex-start;gap:28px;margin-top:34px}
 .page-intro.intro-lunga h1{font-size:clamp(34px,9vw,46px);line-height:1.12;letter-spacing:-.045em}
 .cookie{left:12px;right:12px;bottom:12px}
 .cookie__scheda{width:100%;max-height:78svh;padding:24px 20px 22px}
 .cookie h2{font-size:24px}
 .cookie__azioni{gap:10px}
 .cookie__btn{flex-basis:100%}
 .cookie__btn[data-cookie="personalizza"]{flex-basis:auto;margin:4px auto 0}
}


/* ============================================================ ritocchi del 18 set 2026 */

/* --------------------------------------------------------- rotella dell'hero magico
   Il prototipo disegnava l'outline con :focus-within e magic-hero.js dava il focus al
   cursore a ogni trascinamento: sul telefono compariva un riquadro attorno alla
   rotella. L'outline resta solo per chi arriva con la tastiera. */

.magic-dial{-webkit-tap-highlight-color:transparent}
/* il cursore nativo resta per Tab e lettori di schermo, ma non sotto il dito: toccandolo
   saltava al punto toccato mentre magic-hero.js trascinava dal valore di partenza */
.magic-dial input{pointer-events:none}
.magic-dial:focus-within{outline:none}
.magic-dial:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:5px;border-radius:90% 90% 8px 8px}


/* ------------------------------------------------- confronto nel dettaglio delle schede
   Markup di progetti._figura_dettaglio, comportamento di assets/detail-reveal.js.
   La figura resta .case-detail-image (misure e colonna di style.css), ma non è più il
   riquadro: il 3:4 passa al palco, la didascalia scende sotto la foto. */

.case-study .case-detail-image.detail-reveal{aspect-ratio:auto;overflow:visible;min-height:0;height:auto}
.detail-reveal:after{content:none}
.detail-reveal-stage{--split:50%;position:relative;aspect-ratio:3 / 4;overflow:hidden;background:#344e61;touch-action:pan-y pinch-zoom;cursor:ew-resize;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.case-study .detail-reveal-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none;pointer-events:none;-webkit-user-drag:none}
.detail-reveal-stage .detail-reveal-before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.detail-reveal-divider{position:absolute;top:0;bottom:0;left:var(--split);z-index:2;width:2px;transform:translateX(-50%);background:#fff;box-shadow:0 0 5px #0005;pointer-events:none}
/* la maniglia segue la linea ma resta tutta dentro il palco anche a 0 e 100% */
.detail-reveal-handle{--mezza:28px;position:absolute;top:50%;left:clamp(var(--mezza),var(--split),calc(100% - var(--mezza)));z-index:3;transform:translate(-50%,-50%);display:grid;place-items:center;width:calc(var(--mezza) * 2);height:calc(var(--mezza) * 2);border-radius:50%;background:#fff;color:#17374e;box-shadow:0 2px 18px #0003;pointer-events:none}
.detail-reveal-handle svg{width:26px;height:26px}
/* le etichette stanno sopra la linea: quando la tendina ci passa sopra il testo resta intero */
.detail-reveal-label{position:absolute;bottom:16px;z-index:3;padding:8px 13px;border-radius:30px;background:#17374ef2;color:#fff;font-size:12px;letter-spacing:.02em;line-height:1.3;pointer-events:none;transition:opacity .25s}
.detail-reveal-label-before{left:14px}
.detail-reveal-label-after{right:14px}
.reveal-solo-dopo .detail-reveal-label-before,.reveal-solo-prima .detail-reveal-label-after{opacity:0}
.detail-reveal-range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.detail-reveal-stage:has(.detail-reveal-range:focus-visible){outline:3px solid var(--accent);outline-offset:5px}
.case-detail-image.detail-reveal figcaption{position:static;display:grid;gap:8px;margin-top:16px;padding:0;font-size:.75rem;letter-spacing:.045em;line-height:1.6;color:#c4d5e1}
.detail-reveal .detail-reveal-nota{letter-spacing:0;color:#9fb6c7}
@media(prefers-reduced-motion:reduce){.detail-reveal-label{transition:none}}
@media(max-width:699px){
 .detail-reveal-handle{--mezza:24px}
 .detail-reveal-handle svg{width:22px;height:22px}
 .detail-reveal-label{bottom:12px;padding:7px 11px;font-size:11px}
 .detail-reveal-label-before{left:10px}.detail-reveal-label-after{right:10px}
 .case-detail-image.detail-reveal figcaption{margin-top:12px}
}


/* ------------------------------------------------------------- WhatsApp fisso a destra
   render._whatsapp: su tutte le pagine, in basso a destra. In home compare dopo la
   scena che si arreda (app.js aggiunge .wa-float-visibile), per non coprire la
   rotella e «Salta». Sotto il banner dei cookie (130) e sotto i dialog. */

.wa-float{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:120;display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:7px 22px 7px 7px;border-radius:40px;background:var(--ink);color:var(--paper);font-size:.875rem;font-weight:600;line-height:1.2;box-shadow:0 12px 32px #0d1c2a38,0 0 0 1px #ffffff45 inset;transition:background .25s,transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s,visibility .35s}
.wa-float:hover{background:#31506a}
/* anello a due toni: il pulsante passa su fondi chiari e scuri */
.wa-float:focus-visible{outline:3px solid var(--blue);outline-offset:3px;box-shadow:0 0 0 6px var(--paper),0 12px 32px #0d1c2a38}
.wa-float-icona{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#25d366;color:#fff}
.wa-float-icona svg{width:22px;height:22px}
.wa-float-breve{display:none}
.wa-float-nascosto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.magic-home .wa-float:not(.wa-float-visibile),body.menu-open .wa-float,body.dialog-open .wa-float,body:has(.cookie:not([hidden])) .wa-float{opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none}
/* a fondo pagina il pulsante non deve coprire i link legali e la riga dello studio */
body:has(.wa-float) .footer{padding-bottom:97px}
@media(max-width:699px){
 .wa-float{right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));gap:9px;min-height:50px;padding:5px 17px 5px 5px;font-size:.8125rem}
 .wa-float-icona{width:40px;height:40px}
 .wa-float-lunga{display:none}
 .wa-float-breve{display:inline}
}
@media(prefers-reduced-motion:reduce){.wa-float{transition:none}}
@media print{.wa-float{display:none}}


/* ----------------------------------------------------------- galleria: due colonne e zoom
   Sui telefoni le foto stanno in due colonne (style.css le metteva in fila); ogni
   foto è un link che assets/photo-gallery.js apre in dialog.photo-lightbox. */

/* la griglia non stira mai le righe: le tessere restano 3:4 a qualunque numero di foto */
.photo-grid{align-items:start}
.photo-tile{align-self:start}
.photo-open{position:absolute;inset:0;display:block;overflow:hidden;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.photo-open img{transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.photo-open:hover img{transform:scale(1.03)}
.photo-open:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.photo-open-icona{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#f5f7f9e6;color:var(--ink);opacity:0;transform:scale(.9);transition:opacity .25s,transform .25s}
.photo-open-icona svg{width:17px;height:17px}
.photo-open:hover .photo-open-icona,.photo-open:focus-visible .photo-open-icona{opacity:1;transform:none}
@media(hover:none){.photo-open-icona{opacity:1;transform:none}}
@media(max-width:699px){
 /* due colonne sempre uguali: align-items:start e niente altezza minima, se no con pochi
    scatti (una categoria da una o due foto) la riga si stira e le tessere non sono più 3:4 */
 .photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:16px;padding-bottom:45px;align-items:start;min-height:0}
 .photo-tile{width:auto;height:auto;align-self:start}
 /* categoria con una foto sola: la tessera prende tutte e due le colonne (photo-gallery.js) */
 .photo-grid-una .photo-tile:not([hidden]){grid-column:1 / -1}
 .photo-open-icona{right:8px;bottom:8px;width:30px;height:30px}
 .photo-open-icona svg{width:14px;height:14px}
}

.photo-lightbox{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:#0f1b26e6;color:var(--paper);overflow:hidden;overscroll-behavior:contain}
.photo-lightbox[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.photo-lightbox::backdrop{background:#0f1b26f5}
.photo-lightbox:focus{outline:none}
.photo-lightbox-annuncio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.photo-lightbox-barra{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left));font-size:.8125rem;letter-spacing:.06em}
.photo-lightbox-chiudi,.photo-lightbox-freccia{display:grid;place-items:center;flex:none;width:48px;height:48px;border:1px solid #ffffff38;border-radius:50%;background:#1d2d3ccc;color:var(--paper);cursor:pointer;transition:background .2s,border-color .2s}
.photo-lightbox-chiudi:hover,.photo-lightbox-freccia:hover{background:#31506a;border-color:#ffffff66}
.photo-lightbox-chiudi svg,.photo-lightbox-freccia svg{width:22px;height:22px}
.photo-lightbox button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.photo-lightbox-figura{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:0;margin:0;padding:0 84px max(24px,env(safe-area-inset-bottom));touch-action:pan-y pinch-zoom}
.photo-lightbox-figura img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100svh - 150px);object-fit:contain;transition:opacity .25s;user-select:none;-webkit-user-drag:none}
.photo-lightbox-figura img.photo-lightbox-carica{opacity:.35}
.photo-lightbox-figura figcaption{max-width:720px;font-size:.8125rem;line-height:1.6;text-align:center;color:#c4d5e1}
.photo-lightbox-freccia{position:absolute;top:50%;transform:translateY(-50%)}
.photo-lightbox-freccia[hidden]{display:none}
.photo-lightbox-prec{left:max(18px,env(safe-area-inset-left))}
.photo-lightbox-succ{right:max(18px,env(safe-area-inset-right))}
.photo-lightbox-succ svg{transform:rotate(180deg)}
@media(max-width:699px){
 .photo-lightbox-barra{padding-top:12px;padding-bottom:8px}
 .photo-lightbox-figura{padding:0 0 max(86px,calc(env(safe-area-inset-bottom) + 76px))}
 .photo-lightbox-figura img{max-height:calc(100svh - 190px)}
 .photo-lightbox-figura figcaption{padding:0 20px;font-size:.75rem}
 .photo-lightbox-freccia{top:auto;bottom:max(18px,env(safe-area-inset-bottom));transform:none;width:52px;height:52px}
 .photo-lightbox-prec{left:calc(50% - 64px)}
 .photo-lightbox-succ{right:calc(50% - 64px)}
}
@media(prefers-reduced-motion:reduce){.photo-open img,.photo-open-icona,.photo-lightbox-figura img{transition:none}}


/* ------------------------------------------------------------- texture del preventivo
   Solo la sezione del modulo (section.contact, in home e su /contatti/): una griglia
   di cerchi tangenti con i centri sugli incroci di una quadrettatura sottile, come
   una cementina disegnata a filo. In cima la trama entra sfumando, così non taglia
   la fascia sopra. */

.contact{background-color:var(--accent);background-image:linear-gradient(var(--accent),#bad3e500 180px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%231d2d3c' stroke-width='1'%3E%3Cpath d='M0 .5H64M.5 0V64' stroke-opacity='.05'/%3E%3Cg stroke-opacity='.085'%3E%3Ccircle r='32'/%3E%3Ccircle cx='64' r='32'/%3E%3Ccircle cy='64' r='32'/%3E%3Ccircle cx='64' cy='64' r='32'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-size:auto,64px 64px;background-position:0 0,center top;background-repeat:no-repeat,repeat}


/* ================================================== pagina Lo studio, 19 set 2026
   Badge Google e carosello delle recensioni, reel di Instagram, mappa al clic,
   disegni al tratto negli spazi liberi (src/disegni.py). Regole mobile in fondo. */

/* ---------------------------------------------------------- carosello a scorrimento
   Recensioni e reel (assets/studio.js): una fila che scorre col dito o col trackpad,
   frecce e barra di avanzamento sotto. */
.rail-controls{display:flex;align-items:center;gap:18px;margin-top:28px}
.rail-controls[hidden]{display:none}
.rail-controls button{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:none;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,opacity .2s}
.rail-controls button:hover:not([aria-disabled=true]){border-color:var(--blue);background:#ffffff80}
.rail-controls button[aria-disabled=true]{opacity:.3;cursor:default}
.rail-controls svg{width:22px;height:22px}
.rail-controls [data-rail-prev] svg{transform:rotate(180deg)}
.rail-progress{position:relative;flex:0 1 240px;height:2px;background:var(--line);overflow:hidden}
.rail-progress>span{position:absolute;inset:0 auto 0 0;width:100%;background:var(--blue);transition:transform .15s linear}
/* la fila è il blocco contenitore dei testi nascosti (.wa-float-nascosto, assoluti) delle
   schede: senza, restano fuori dal ritaglio e allargano la pagina */
[data-rail-track]{position:relative}

/* ---------------------------------------------------------- recensioni e badge Google */
.studio-reviews{padding-bottom:78px}
.studio-reviews-heading{align-items:flex-end;margin-bottom:44px}
.google-badge{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 16px;flex:none;width:min(100%,360px);padding:18px 20px 16px;border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:0 18px 40px #0b1c2a40;transition:transform .25s,box-shadow .25s}
a.google-badge:hover{transform:translateY(-2px);box-shadow:0 22px 46px #0b1c2a59}
a.google-badge:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.google-badge-logo{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.google-badge-logo .logo-google{width:24px;height:24px}
.google-badge-corpo{display:flex;flex-direction:column;gap:2px;min-width:0}
.google-badge-etichetta{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.google-badge-voto{display:flex;align-items:center;gap:10px}
.google-badge-voto strong{font-size:1.875rem;font-weight:600;line-height:1.15;letter-spacing:-.04em}
.google-badge-conto{font-size:.8125rem;line-height:1.45;color:var(--muted)}
.google-badge-verifica{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line);font-size:.8125rem;font-weight:600;color:var(--blue)}
.google-badge-verifica svg{width:16px;height:16px;flex:none}
.stelle{position:relative;display:inline-flex;flex:none;line-height:0}
.stelle svg{width:18px;height:18px;flex:none;fill:currentColor}
.stelle-vuote{display:inline-flex;gap:2px;color:#d6dde3}
.stelle-piene{position:absolute;inset:0 auto 0 0;display:inline-flex;gap:2px;overflow:hidden;color:#f4b400;white-space:nowrap}
.reviews-carousel{max-width:none;margin:0}
.reviews-carousel .studio-review-grid{align-items:stretch;gap:24px;scroll-padding-left:0;padding-bottom:2px}
.reviews-carousel .studio-review-grid:has(.review-more[aria-expanded="true"]){align-items:flex-start}
.reviews-carousel .studio-review-card{flex:0 0 calc((100% - 48px)/3);padding:28px 30px 26px;border-radius:14px}
.studio-review-grid:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.review-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:22px}
.review-stars .stelle svg{width:17px;height:17px}
.studio-review-card .review-source-label{display:inline-flex;align-items:center;gap:7px;margin:0 0 0 auto;font-size:.8125rem;color:var(--muted)}
.review-source-label .logo-google{width:16px;height:16px}
.studio-review-card blockquote.review-text{margin:18px 0 14px;font-size:1.0625rem;line-height:1.7;letter-spacing:-.005em}
.review-text p+p{margin-top:.7em}
.review-text-chiuso{max-height:calc(1.7em * 7);overflow:hidden}
.review-text-tagliato{-webkit-mask-image:linear-gradient(#000 62%,#0000);mask-image:linear-gradient(#000 62%,#0000)}
.review-more{align-self:flex-start;margin:0 0 22px;padding:4px 0;border:0;background:none;font-size:.875rem;font-weight:600;color:var(--blue);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.review-more[hidden]{display:none}
.review-more:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.studio-reviews-nota{max-width:720px;margin-top:22px;font-size:.75rem;line-height:1.7;color:#c1d4e1}
.studio-reviews .rail-controls button{border-color:#8caec5;color:#fff}
.studio-reviews .rail-controls button:hover:not([aria-disabled=true]){border-color:#fff;background:#ffffff14}
.studio-reviews .rail-controls button:focus-visible,.studio-reel .rail-controls button:focus-visible,.studio-reel-intro .text-link:focus-visible{outline-color:var(--accent)}
.studio-reviews .rail-progress{background:#ffffff2e}
.studio-reviews .rail-progress>span{background:var(--accent)}

/* ---------------------------------------------------------- reel di Instagram */
.studio-reel{padding-top:100px;padding-bottom:90px;background:var(--ink);color:var(--paper)}
.studio-reel-heading{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px 8vw;align-items:end;margin-bottom:46px}
.studio-reel-heading .eyebrow{color:#b9cedf}
.studio-reel-heading h2{font-size:clamp(42px,4.6vw,74px);line-height:1.1}
.studio-reel-heading h2 em{color:var(--accent)}
.studio-reel-intro p{max-width:430px;margin-bottom:24px;font-size:1rem;line-height:1.8;color:#cfdeea}
.studio-reel-intro .text-link{color:var(--accent);gap:18px}
.reel-track{display:flex;gap:18px;margin:0;padding:0 0 2px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.reel-track::-webkit-scrollbar{display:none}
.reel-track:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.reel-card{flex:0 0 calc((100% - 72px)/5);min-width:0;scroll-snap-align:start}
.reel-open{display:flex;flex-direction:column;gap:14px;color:inherit}
.reel-open:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:12px}
.reel-cover{position:relative;display:block;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#2b3e50}
.reel-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.65,.25,1)}
.reel-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(#0f1b2600 55%,#0f1b2666)}
.reel-play{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#f5f7f9e6;color:var(--ink);transform:translate(-50%,-50%);transition:transform .25s,background .25s}
.reel-play svg{width:22px;height:22px;margin-left:3px;fill:currentColor}
.reel-open:hover .reel-cover img{transform:scale(1.04)}
.reel-open:hover .reel-play{transform:translate(-50%,-50%) scale(1.08);background:#fff}
.reel-info{display:flex;flex-direction:column;gap:6px}
.reel-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:.9375rem;font-weight:600;line-height:1.45}
.reel-info time{font-size:.75rem;color:#9fb3c4}
.studio-reel .rail-controls button{border-color:#8caec5;color:#fff}
.studio-reel .rail-controls button:hover:not([aria-disabled=true]){border-color:#fff;background:#ffffff14}
.studio-reel .rail-progress{background:#ffffff2e}
.studio-reel .rail-progress>span{background:var(--accent)}
.studio-reel-nota{max-width:640px;margin-top:22px;font-size:.75rem;line-height:1.7;color:#9fb3c4}
.reel-dialog{width:min(440px,calc(100vw - 32px));max-width:none;max-height:none;margin:auto;padding:0;border:0;background:none;color:var(--paper);overflow:visible}
.reel-dialog::backdrop{background:#0f1b26f2}
.reel-dialog-barra{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.reel-dialog-apri{display:inline-flex;align-items:center;gap:10px;font-size:.875rem;font-weight:600;color:var(--accent)}
.reel-dialog-apri svg{width:16px;height:16px}
.reel-dialog [data-reel-chiudi]{display:grid;place-items:center;width:46px;height:46px;border:1px solid #ffffff38;border-radius:50%;background:#1d2d3ccc;color:var(--paper);cursor:pointer}
.reel-dialog [data-reel-chiudi]:hover{background:#31506a}
.reel-dialog [data-reel-chiudi] svg{width:22px;height:22px}
.reel-dialog a:focus-visible,.reel-dialog button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.reel-dialog-video iframe{display:block;width:100%;height:min(calc(100svh - 110px),780px);border:0;border-radius:12px;background:#fff}

/* ---------------------------------------------------------- mappa, prima del piè di pagina */
.studio-mappa{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:6vw;align-items:center;padding-top:100px;padding-bottom:100px;background:var(--paper)}
.studio-mappa-testo .eyebrow{color:var(--blue)}
.studio-mappa-testo h2{font-size:clamp(42px,4.4vw,70px);line-height:1.1;margin-bottom:26px}
.studio-mappa-testo h2 em{color:var(--blue)}
.studio-mappa-lead{max-width:440px;font-size:1rem;line-height:1.8;color:var(--muted)}
.studio-mappa-testo address{margin:28px 0 32px;padding-left:18px;border-left:2px solid var(--accent);font-style:normal;font-size:1.0625rem;line-height:1.65}
.studio-mappa-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}
.studio-mappa-azioni .text-link{gap:18px}
.studio-mappa-riquadro{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#dbe8f1;box-shadow:inset 0 0 0 1px var(--line)}
.studio-mappa-anteprima{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.studio-mappa-pin{position:absolute;left:50%;top:50%;z-index:1;width:0;height:0}
.studio-mappa-pin:before{content:"";position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#315e8333;animation:mappa-onda 2.4s ease-out infinite}
.studio-mappa-pin svg{position:absolute;left:-17px;bottom:0;width:34px;height:45px;fill:var(--blue);filter:drop-shadow(0 6px 8px #1d2d3c40)}
.studio-mappa-pin svg circle{fill:var(--paper)}
.studio-mappa-pin span{position:absolute;left:24px;bottom:22px;padding:7px 12px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:.75rem;font-weight:600;line-height:1.3;white-space:nowrap;box-shadow:0 8px 18px #1d2d3c33}
@keyframes mappa-onda{0%{transform:scale(.6);opacity:1}100%{transform:scale(3.4);opacity:0}}
.studio-mappa-carica{position:absolute;left:18px;bottom:18px;z-index:2;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:12px 18px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font-size:.875rem;font-weight:600;cursor:pointer;box-shadow:0 10px 24px #1d2d3c26;transition:background .2s,border-color .2s}
.studio-mappa-carica[hidden]{display:none}
.studio-mappa-carica:hover{background:#fff;border-color:var(--blue)}
.studio-mappa-carica:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.studio-mappa-carica svg{width:20px;height:20px;flex:none;color:var(--blue)}
.studio-mappa-osm{position:absolute;right:8px;bottom:6px;z-index:2;padding:1px 6px;border-radius:3px;background:#f5f7f9cc;font-size:.625rem;line-height:1.6;color:var(--muted)}
.studio-mappa-riquadro iframe{position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0}
.studio-mappa-caricata .studio-mappa-pin,.studio-mappa-caricata .studio-mappa-osm{display:none}
.studio-mappa-nota{margin-top:12px;font-size:.75rem;line-height:1.7;color:var(--muted)}

@media(max-width:1199px){
 .reviews-carousel .studio-review-card{flex-basis:calc((100% - 24px)/2)}
 .reel-card{flex-basis:calc((100% - 54px)/4)}
}
@media(max-width:999px){
 .studio-reviews-heading{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
 .studio-reel-heading{grid-template-columns:1fr;gap:26px}
 .reel-card{flex-basis:calc((100% - 36px)/3.3)}
 .studio-mappa{grid-template-columns:1fr;gap:44px}
}
@media(max-width:699px){
 .studio-reviews{padding-bottom:50px}
 .studio-reviews-heading{margin-bottom:30px}
 .google-badge{width:100%}
 .reviews-carousel .studio-review-grid{gap:14px}
 .reviews-carousel .studio-review-card{flex-basis:86%;padding:24px 22px 22px}
 .studio-review-card blockquote.review-text{font-size:1rem}
 .rail-controls{margin-top:22px}
 .rail-progress{flex-basis:auto;flex-grow:1}
 .studio-reel{padding-top:58px;padding-bottom:56px}
 .studio-reel-heading{margin-bottom:30px}
 .studio-reel-heading h2{font-size:40px}
 .reel-track{gap:12px}
 .reel-card{flex-basis:62%}
 .reel-play{width:50px;height:50px}
 .studio-mappa{padding-top:58px;padding-bottom:60px;gap:32px}
 .studio-mappa-testo h2{font-size:40px}
 .studio-mappa-riquadro{aspect-ratio:1}
 .studio-mappa-carica{left:12px;right:12px;bottom:12px;justify-content:center}
 .studio-mappa-osm{bottom:auto;top:6px}
 .studio-mappa-pin span{left:-10px;bottom:auto;top:8px;transform:translateX(-100%)}
 .reel-dialog-video iframe{height:min(calc(100svh - 96px),720px)}
}
@media(max-width:379px){
 .studio-mappa-pin span{left:0;transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
 .studio-mappa-pin:before{animation:none;opacity:0}
 .reel-cover img,.google-badge,.reel-play{transition:none}
}


/* ---------------------------------------------------------- disegni della pagina Lo studio
   SVG inline di src/disegni.py: pianta accanto al titolo, icone dei tre principi,
   poltrone nella fascia celeste finale. Tratto in currentColor e non scalabile (lo
   spessore resta in pixel veri), campiture «acc» nell'accent.
   I tratti .tr si disegnano quando il contenitore [data-reveal] riceve .visible; i
   gruppi tr2, tr3, tr4 partono dopo (--rit). Senza .motion-on, o con
   prefers-reduced-motion, i disegni sono già completi.
   Chrome, con vector-effect non-scaling-stroke, misura il trattino di pathLength in
   pixel di schermo: se il disegno fosse più grande del suo viewBox il tratto si
   fermerebbe a metà. Per questo, a disegno finito, il trattino diventa «1 0» (linea
   piena a qualunque scala), e le misure qui sotto non superano comunque il viewBox
   (pianta 600, poltrone 560, icone 64). */

.disegno{display:block;width:100%;height:100%;overflow:visible}
.disegno text{font-family:var(--sans);font-weight:500}
.disegno .acc{fill:var(--accent);fill-opacity:.6}
.studio-disegno{color:var(--blue);pointer-events:none}

/* apertura: la pianta nello spazio libero a destra del titolo, sopra la page-lead.
   L'altezza segue quella del titolo (due righe da 1,04), così il fondo della pianta
   resta sempre sopra il paragrafo, allineato a destra con lui. */
.studio-intro{position:relative}
.studio-disegno-pianta{position:absolute;top:48px;right:var(--gutter);height:calc(clamp(64px,7.1vw,118px)*2.12 + 97px);aspect-ratio:600/440}
.studio-disegno-pianta .fondo{fill:var(--paper)}
.studio-disegno-pianta .acc{fill-opacity:.45}

/* principi: il segno in alto a destra, sulla riga del numero */
.principle-grid article{position:relative}
.principio-icona{--dur:1.1s;position:absolute;top:16px;right:0;width:64px;height:64px;color:var(--blue)}

/* invito: le poltrone nella metà destra; la linea del pavimento (y 300 su 360) cade
   sul filo inferiore del pulsante, cioè a 95px dal fondo della fascia */
.page-cta-disegno{position:relative}
.studio-disegno-conversazione{--dw:min(38vw,560px);position:absolute;right:var(--gutter);bottom:calc(95px - var(--dw)*.1071);width:var(--dw);aspect-ratio:560/360}
.disegno-conversazione .fondo{fill:#cddfec}
.disegno-conversazione .luce{fill:#fff;fill-opacity:.42}

/* il tratto che si disegna: pathLength 1, trattino 1 e vuoto 2 spostato di 1 */
.disegno .tr2{--rit:.4s}
.disegno .tr3{--rit:.8s}
.disegno .tr4{--rit:1.2s}
.motion-on [data-reveal] .disegno .tr{stroke-dasharray:1 2;stroke-dashoffset:1;transition:stroke-dashoffset var(--dur,1.5s) cubic-bezier(.5,.05,.25,1) var(--rit,0s),stroke-dasharray 0s linear calc(var(--rit,0s) + var(--dur,1.5s)),fill-opacity .9s ease calc(var(--rit,0s) + .5s)}
.motion-on [data-reveal] .disegno .fa{opacity:0;transition:opacity .9s ease calc(var(--rit,0s) + .7s)}
.motion-on [data-reveal] .disegno-conversazione .fondo{fill-opacity:0}
.motion-on [data-reveal].visible .disegno .tr{stroke-dashoffset:0;stroke-dasharray:1 0}
.motion-on [data-reveal].visible .disegno .fa{opacity:1}
.motion-on [data-reveal].visible .disegno-conversazione .fondo{fill-opacity:1}
@media(prefers-reduced-motion:reduce){
 .disegno .tr{stroke-dasharray:none!important;stroke-dashoffset:0!important}
 .disegno .fa{opacity:1!important}
 .disegno-conversazione .fondo{fill-opacity:1!important}
}

@media(max-width:999px){
 .studio-disegno-pianta{top:40px;height:calc(clamp(60px,9vw,84px)*2.05 + 80px)}
 .principio-icona{top:16px;width:48px;height:48px}
 .studio-disegno-conversazione{--dw:clamp(180px,calc(100vw - 490px),35vw);bottom:calc(75px - var(--dw)*.1071)}
}
@media(max-width:699px){
 .studio-disegno-pianta{position:static;height:auto;width:min(100%,360px);margin:34px 0 0 auto}
 .principio-icona{top:14px;width:56px;height:56px}
 .studio-disegno-conversazione{position:static;width:min(100%,360px);margin:40px 0 0 auto}
}


/* ================================================== pagina Il metodo, 20 set 2026
   Una foto per passo (solo qui: in home i passi restano di solo testo) e trama
   geometrica leggera nella fascia «Prima di iniziare». I disegni al tratto stanno
   nel blocco dei disegni, in fondo. Regole mobile in fondo al blocco. */

/* la griglia vale per il passo che ha la foto, non per la pagina: un passo senza foto
   resta come in home, e la colonna non resta vuota */
.method-step:has(.method-photo){display:grid;grid-template-columns:auto minmax(0,1fr) clamp(200px,17vw,260px);align-items:start;column-gap:clamp(20px,2.2vw,34px)}
.method-photo{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:10px;background:#e4eaf0}
.method-photo img{display:block;width:100%;height:100%;object-fit:cover}
/* la stessa trama del preventivo, più tenue: griglia e cerchi tangenti, sfumata in cima */
/* la trama schiarisce il fondo: il testo grigio scenderebbe sotto il 4,5:1 */
.page-metodo .prepare p,.page-metodo .prepare .eyebrow,.page-landing .prepare p,.page-landing .prepare .eyebrow{color:#4e6070}
.page-metodo .prepare,.page-landing .prepare:not(.landing-zona){background-color:#e5edf3;background-image:linear-gradient(#e5edf3,#e5edf300 200px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%231d2d3c' stroke-width='1'%3E%3Cpath d='M0 .5H64M.5 0V64' stroke-opacity='.04'/%3E%3Cg stroke-opacity='.06'%3E%3Ccircle r='32'/%3E%3Ccircle cx='64' r='32'/%3E%3Ccircle cy='64' r='32'/%3E%3Ccircle cx='64' cy='64' r='32'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-size:auto,64px 64px;background-position:0 0,center top;background-repeat:no-repeat,repeat}

/* fino a 1499 la foto sta sotto il testo: di fianco resterebbero una miniatura e una
   colonna di testo da venti caratteri per riga */
@media(max-width:1499px){
 .method-step:has(.method-photo){grid-template-columns:auto minmax(0,1fr)}
 .method-photo{grid-column:2;width:100%;max-width:420px;margin-top:24px;aspect-ratio:16/10}
}
@media(max-width:699px){
 .method-photo{margin-top:20px;border-radius:8px}
}


/* ------------------------------------------------------- disegni della pagina Il metodo
   SVG inline di src/disegni.py: il percorso in quattro tappe accanto al titolo, quello
   che porti al primo incontro nella fascia azzurra, il punto di domanda nella FAQ.
   Stessa grammatica dei disegni di Lo studio (blocco sopra): tratto in currentColor e
   non scalabile, campiture «acc» nell'accent, .fondo del colore della fascia perché i
   pezzi davanti coprano quelli dietro.
   Le larghezze (466, 420, 104px) restano sotto al viewBox dei rispettivi disegni
   (560, 520, 120): è la condizione che tiene buono il trattino di pathLength su
   Chrome, che con non-scaling-stroke lo misura in pixel di schermo. */

/* apertura: il percorso nello spazio libero a destra del titolo, sopra la page-lead.
   La larghezza segue lo spazio che il titolo lascia libero (la prima riga cresce con
   la finestra: alla destra restano circa 35vw, meno 40px di respiro).
   Il disegno è centrato sul blocco h1, che comincia a 133px dal bordo alto della
   sezione (85 di padding più 48 di occhiello) ed è alto 2,23 volte il corpo del
   titolo, qui sempre di due righe. */
.page-metodo .metodo-intro{position:relative;--dw:min(35vw - 40px,466px)}
/* il titolo si ferma prima del disegno: un h1 più lungo va a capo invece di finirci sotto */
@media(min-width:1000px){.page-metodo .metodo-intro h1{max-width:calc(100% - var(--dw) - 40px)}}
.page-metodo .metodo-disegno-apertura{--dw:min(35vw - 40px,466px);position:absolute;right:var(--gutter);top:calc(133px + (clamp(64px,7.1vw,118px)*2.23 - var(--dw)/2.373)/2);width:var(--dw);aspect-ratio:560/236}
.page-metodo .metodo-disegno-apertura .fondo{fill:var(--paper)}

/* prepare: la composizione in fondo alla colonna sinistra, sotto il titolo */
.page-metodo .metodo-disegno-prepara{width:min(100%,420px);aspect-ratio:520/260;margin:46px 0 0}
.page-metodo .metodo-disegno-prepara .fondo{fill:#e5edf3}
.page-metodo .metodo-disegno-prepara .acc{fill-opacity:.7}

/* FAQ: il punto di domanda sotto «Scrivici», nella colonna che resta vuota */
.page-metodo .metodo-disegno-faq{width:104px;aspect-ratio:120/170;margin:56px 0 0}

@media(max-width:999px){
 /* sotto i 1000px il titolo occupa tutta la riga: il disegno scende sotto la page-lead */
 .page-metodo .metodo-disegno-apertura{position:static;width:min(100%,430px);margin:40px 0 0 auto}
 .page-metodo .metodo-disegno-prepara{margin-top:40px}
 .page-metodo .metodo-disegno-faq{width:92px;margin-top:48px}
}
@media(max-width:699px){
 .page-metodo .metodo-disegno-apertura{width:100%;margin-top:34px}
 .page-metodo .metodo-disegno-prepara{width:100%;margin-top:34px}
 .page-metodo .metodo-disegno-faq{width:84px;margin-top:40px}
}


/* ------------------------------------------------------- landing per gli annunci Google
   /progettazione-online/ e /interior-designer-trani-bari/ (7 ott 2026, src/landing.py).
   Quasi tutto è il markup delle altre pagine (page-intro, method, prepare, bedroom-reveal,
   portfolio-grid, studio-reviews, studio-mappa, faq, contact): qui solo l'apertura con
   pulsante e striscia di fiducia, le griglie dei blocchi nuovi, «quanto costa», i servizi
   in breve, negozi e locali e il pulsante fisso sul telefono. Fondi alternati come nelle
   altre pagine: carta, azzurro #e5edf3, blu scuro delle recensioni, celeste del modulo. */

/* apertura: il testo sotto il titolo a sinistra (nelle altre pagine sta a destra), poi
   pulsante e striscia */
.landing-intro .page-lead{margin:28px 0 0;max-width:720px}
.landing-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;margin-top:36px}
.landing-fiducia{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 30px;font-size:.875rem;line-height:1.5;color:#4e6070}
.landing-fiducia li{display:flex;align-items:center;gap:10px}
.landing-fiducia li:not(.landing-fiducia-google)::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.landing-fiducia-google a{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.landing-fiducia-google a:hover span strong,.landing-fiducia-google strong{color:var(--ink)}
.landing-fiducia .stelle svg{width:15px;height:15px}

/* testata dei blocchi: occhiello, titolo, testo e link */
.landing-testa{max-width:780px}
.landing-testa h2{font-size:clamp(42px,4.4vw,70px)}
.landing-testa>p:not(.eyebrow){margin:24px 0 0;max-width:620px;color:var(--muted);line-height:1.85}
.landing-testa .text-link{margin-top:28px}

/* cosa ricevi: la griglia dei principi della pagina Lo studio, quattro colonne */
.landing-ricevi{padding-top:90px;padding-bottom:95px;background:#e5edf3}
.landing-ricevi .landing-testa>p:not(.eyebrow),.landing-ricevi .landing-griglia p,.landing-ricevi .eyebrow{color:#4e6070}
.principle-grid.landing-griglia{grid-template-columns:repeat(4,minmax(0,1fr));gap:3vw;margin:56px 0 0}
.landing-griglia article{border-top-color:#c8d7e2}
.landing-griglia h3{font-size:clamp(24px,1.9vw,30px);line-height:1.2;letter-spacing:-.02em;margin:22px 0 14px}
.landing-griglia p{font-size:.9375rem}

/* progetti: titolo e link sopra le schede della pagina Progetti */
.landing-progetti{padding-top:95px;padding-bottom:100px}
.landing-progetti .landing-testa{margin-bottom:50px}
.landing-progetti .portfolio-grid{padding:0}
.landing-zona+.landing-progetti,.landing-dove+.landing-progetti{border-top:1px solid var(--line)}

/* quanto costa (#costi): due colonne come «Prima di iniziare» */
.landing-costi{display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding-top:90px;padding-bottom:95px;background:#e5edf3}
.landing-costi h2{font-size:clamp(42px,4.4vw,70px)}
.landing-costi p,.landing-costi .eyebrow{color:#4e6070}
.landing-costi p{line-height:1.85}
.landing-costi>div:last-child>p:first-child{margin-top:0}
.landing-costi p.landing-costi-sopra{margin:34px 0 0;font-size:.75rem;letter-spacing:.08em;font-weight:600;text-transform:uppercase;color:var(--ink)}
.landing-costi .prepare-list{margin-top:12px}
.landing-prezzi{margin-top:34px;padding:24px 28px 10px;background:var(--paper)}
.landing-prezzi h3{font-size:1.5rem;line-height:1.25;margin:0 0 12px}
.landing-prezzi dl{margin:0}
.landing-prezzi dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-top:1px solid var(--line);padding:14px 0}
.landing-prezzi dt{color:var(--ink)}
.landing-prezzi dd{margin:0;font-weight:600;color:var(--ink);white-space:nowrap}
.landing-prezzi p{font-size:.875rem;margin:4px 0 14px}

/* servizi in breve: sei schede che portano ai capitoli di /servizi/ */
.landing-servizi{padding-top:90px;padding-bottom:95px;background:#e5edf3}
.landing-servizi .landing-testa>p:not(.eyebrow),.landing-servizi .eyebrow{color:#4e6070}
.landing-servizi-griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 4vw;margin-top:56px}
.landing-servizio{display:flex;flex-direction:column;gap:14px;padding:28px 0 32px;border-top:1px solid #c8d7e2;color:inherit;text-decoration:none}
.landing-servizio-numero{font-size:.875rem;color:var(--blue)}
.landing-servizio h3{font-size:clamp(26px,2.2vw,34px);line-height:1.15;letter-spacing:-.02em;margin:0}
.landing-servizio p{flex:1;margin:0;color:#4e6070;line-height:1.8;font-size:.9375rem}
.landing-servizio-link{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;padding-bottom:6px;border-bottom:1px solid currentColor;font-size:.875rem;font-weight:600}
.landing-servizio-link svg{width:18px;height:18px;transition:transform .25s}
.landing-servizio:hover .landing-servizio-link svg{transform:translate(3px,-3px)}
.landing-servizio:focus-visible{outline:2px solid var(--blue);outline-offset:6px}

/* come ci incontriamo: la fascia «Prima di iniziare» su carta, dopo i servizi azzurri */
.page-landing .landing-zona{background:var(--paper)}
.landing-nota{margin-top:24px;font-size:.9375rem}

/* dove lavoriamo: i comuni come etichette */
.landing-dove{padding-top:80px;padding-bottom:85px}
.landing-comuni{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.landing-comuni li{padding:9px 18px;border:1px solid var(--line);border-radius:40px;font-size:.9375rem}

/* negozi e locali (#locali): foto e testo come un capitolo di /servizi/ */
.landing-locali{display:grid;grid-template-columns:1.1fr 1fr;gap:8vw;align-items:center;padding-top:80px;padding-bottom:85px;background:#e5edf3}
.landing-locali .chapter-copy>p:not(.eyebrow),.landing-locali .eyebrow{color:#4e6070}
.landing-locali .landing-azioni{margin-top:34px}

/* dopo la mappa (su carta) la FAQ prende una riga sopra */
.page-landing .studio-mappa+.faq{border-top:1px solid var(--line)}

/* disegni del metodo anche qui: i materiali nella fascia azzurra, il punto di domanda
   nelle FAQ (stesse misure della pagina Il metodo) */
.page-landing .landing-disegno-prepara{width:min(100%,420px);aspect-ratio:520/260;margin:46px 0 0}
.page-landing .landing-disegno-prepara .fondo{fill:#e5edf3}
.page-landing .landing-disegno-prepara .acc{fill-opacity:.7}
.page-landing .landing-disegno-faq{width:104px;aspect-ratio:120/170;margin:56px 0 0}

/* pulsante fisso verso il modulo: solo sul telefono, a sinistra del WhatsApp, che qui
   resta un cerchio (il testo «Scrivici» resta per i lettori di schermo) */
.landing-cta-fissa{display:none}

@media(max-width:1199px){
 .principle-grid.landing-griglia{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 5vw}
}
@media(max-width:999px){
 .landing-costi,.landing-locali{gap:6vw}
 .landing-servizi-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
 .page-landing .landing-disegno-prepara{margin-top:40px}
 .page-landing .landing-disegno-faq{width:92px;margin-top:48px}
}
@media(max-width:699px){
 .landing-azioni{margin-top:28px}
 .landing-fiducia{margin-top:24px;gap:10px 22px;font-size:.8125rem}
 .landing-testa h2,.landing-costi h2{font-size:44px}
 .landing-ricevi,.landing-servizi,.landing-costi{padding-top:55px;padding-bottom:60px}
 .principle-grid.landing-griglia{grid-template-columns:1fr;gap:30px;margin-top:34px}
 .landing-griglia h3{font-size:26px;margin:16px 0 10px}
 .landing-progetti{padding-top:55px;padding-bottom:60px}
 .landing-progetti .landing-testa{margin-bottom:32px}
 .landing-costi{grid-template-columns:1fr;gap:26px}
 .landing-servizi-griglia{grid-template-columns:1fr;margin-top:30px}
 .landing-servizio{padding:24px 0 28px}
 .landing-dove{padding-top:55px;padding-bottom:60px}
 .landing-locali{display:flex;flex-direction:column;gap:30px;padding-top:40px;padding-bottom:50px}
 .page-landing .landing-disegno-prepara{width:100%;margin-top:34px}
 .page-landing .landing-disegno-faq{width:84px;margin-top:40px}

 .landing-cta-fissa{position:fixed;left:max(14px,env(safe-area-inset-left));right:calc(max(14px,env(safe-area-inset-right)) + 60px);bottom:max(14px,env(safe-area-inset-bottom));z-index:119;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:0 20px;border-radius:40px;background:#315e83;color:#fff;font-size:.8125rem;font-weight:600;box-shadow:0 12px 32px #0d1c2a38;transition:opacity .25s,visibility .25s,transform .25s}
 .landing-cta-fissa svg{width:18px;height:18px;flex:none}
 .landing-cta-fissa:focus-visible{outline:3px solid var(--blue);outline-offset:3px;box-shadow:0 0 0 6px var(--paper),0 12px 32px #0d1c2a38}
 .landing-cta-fissa[data-nascosto],body.menu-open .landing-cta-fissa,body.dialog-open .landing-cta-fissa,body:has(.cookie:not([hidden])) .landing-cta-fissa{opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none}
 .page-landing .wa-float{gap:0;padding:5px}
 .page-landing .wa-float .wa-float-breve{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
@media(prefers-reduced-motion:reduce){
 .landing-cta-fissa,.landing-servizio-link svg{transition:none}
}
@media print{
 .landing-cta-fissa{display:none}
}