/* ==========================================================================
   Telettra Impianti
   Identità: rosso, giallo, nero, Inter, taglio diagonale.
   La versione precedente è in _originali/versione-precedente/.
   ========================================================================== */

:root{
  --red:#ed1014;
  --red-deep:#c40a0f;
  --yellow:#ffdf2b;
  --ink:#111;
  --gutter:clamp(20px,4.15vw,64px);
  --header:92px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.77,0,.18,1);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
/* Lo scorrimento verso le sezioni è animato da app.js. */
html{scroll-padding-top:var(--header);scrollbar-gutter:stable}
section:focus{outline:none}
body{margin:0;color:var(--ink);background:#fff;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
body:has(dialog[open]){overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:3px solid #a97800;outline-offset:4px}
img{max-width:100%;display:block}
p,h1,h2{margin-top:0}
p{line-height:1.6}
h1,h2{font-weight:800;letter-spacing:-.05em}
h2{font-size:clamp(40px,6vw,96px);line-height:1;margin-bottom:0}
::selection{background:var(--yellow);color:var(--ink)}
.wrap{width:calc(100% - var(--gutter)*2);max-width:1440px;margin-inline:auto}
.skip{position:fixed;top:-70px;left:0;background:#fff;z-index:60;padding:12px}
.skip:focus{top:0}
.heading-accent,.service-accent{color:var(--red)}
.reading-word{display:inline-block}

/* Trattino giallo del marchio sopra i titoli di sezione. */
.line{display:block;width:48px;height:5px;background:var(--yellow);margin:0 0 clamp(18px,2vw,28px)}

/* ---------- Barra di avanzamento ---------- */
.progress{position:fixed;inset:0 0 auto;z-index:50;height:3px;background:linear-gradient(90deg,var(--red),var(--yellow));transform-origin:0 50%;transform:scaleX(var(--progress,0));pointer-events:none}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:20;background:#ffffffe0;-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid #0000000f;transition:transform .5s var(--ease),box-shadow .3s ease}
header.is-scrolled{box-shadow:0 10px 30px #0000001a}

.header{min-height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2vw,32px);transition:min-height .4s var(--ease)}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;line-height:1.05}
.brand-mark{width:64px;height:68px;flex:0 0 64px;object-fit:contain}
.brand>span{display:flex;flex-direction:column;align-items:flex-start;font-size:28px}
.brand b{font-size:1em;font-weight:900;letter-spacing:-.025em}
/* IMPIANTI è spostato in modo che l'asta della I cada esattamente sotto l'asta della T (valori misurati sui glifi di Inter). */
.brand small{font-size:.93em;font-weight:500;letter-spacing:.025em;transform:translateX(.2328em)}
.header nav{display:flex;gap:clamp(18px,2.7vw,42px);margin-left:auto}
.header nav a{position:relative;font-size:15px;font-weight:600;padding:12px 0}
.header nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
.header nav a:hover::after,.header nav a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
.header-cta{font-size:14px;white-space:nowrap}
.menu{display:none;place-content:center;gap:7px;width:44px;height:44px;padding:0;background:none;border:0;flex-shrink:0}
.menu span{display:block;width:26px;height:2.5px;background:var(--ink);transition:transform .45s var(--ease)}
.menu[aria-expanded="true"] span:first-child{transform:translateY(4.75px) rotate(45deg)}
.menu[aria-expanded="true"] span:last-child{transform:translateY(-4.75px) rotate(-45deg)}

/* ---------- Pulsanti: netti, con riempimento che scorre ---------- */
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;max-width:100%;min-height:54px;padding:15px 26px;border:0;color:#fff;font-size:16px;font-weight:700;line-height:1.4;background:linear-gradient(var(--ink),var(--ink)) no-repeat 0 0/0% 100%,var(--red);translate:var(--mx,0px) var(--my,0px);transition:background-size .55s var(--ease),translate .45s var(--ease),box-shadow .3s ease}
.button span{font-size:25px;line-height:1;font-weight:400;transition:transform .45s var(--ease)}
.button:active{scale:.97}
@media(hover:hover) and (pointer:fine){
  .button:hover{background-size:100% 100%;box-shadow:0 12px 28px #0003}
  .button:hover span{transform:translateX(7px)}
}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(480px,calc(88svh - var(--header)),800px);background:#1a1a1a;color:#fff;overflow:hidden}
.hero-photo{position:absolute;inset:0 0 0 45%;z-index:-3;overflow:hidden;background:#222}
.hero-photo::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,#00000066,#0000 40%),linear-gradient(0deg,#00000073,#0000 30%);pointer-events:none}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04)}
.hero-slide.is-active{opacity:1;transform:scale(1.13);transition:transform 9s ease-out}
.hero-slide.is-entering{opacity:1;z-index:1;animation:slide-wipe 1.3s var(--ease-io) both}
@keyframes slide-wipe{from{clip-path:polygon(125% 0,100% 0,100% 100%,100% 100%)}to{clip-path:polygon(0 0,100% 0,100% 100%,-25% 100%)}}

/* Pannello rosso e fascia gialla lungo il taglio diagonale, che entrano all'apertura. */
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--red);clip-path:polygon(0 0,60% 0,45.7% 100%,0 100%);animation:panel-in 1.15s var(--ease-io) backwards}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--yellow);clip-path:polygon(60% 0,61.4% 0,47.1% 100%,45.7% 100%);pointer-events:none;animation:stripe-in .9s var(--ease-io) .75s backwards}
@keyframes panel-in{from{clip-path:polygon(0 0,0 0,-14.3% 100%,0 100%)}}
@keyframes stripe-in{from{clip-path:polygon(60% 0,61.4% 0,61.4% 0,60% 0)}}

.hero-content{padding-block:clamp(40px,min(7vw,7svh),110px)}
.hero-content::before{content:"";display:block;width:clamp(64px,6vw,104px);height:clamp(6px,.6vw,9px);background:var(--yellow);margin-bottom:clamp(28px,3vw,44px);transform-origin:0 50%;animation:line-in .8s var(--ease) .35s backwards}
@keyframes line-in{from{transform:scaleX(0)}}
.hero h1{font-size:clamp(40px,6.6vw,108px);line-height:1;margin:0 0 clamp(24px,2.6vw,40px)}
.hero h1 .mask{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.hero h1 .mask>span{display:block;animation:rise 1.05s var(--ease) backwards;animation-delay:.4s}
.hero h1 .mask+.mask>span{animation-delay:.52s}
.hero h1 .mask+.mask+.mask>span{animation-delay:.64s}
@keyframes rise{from{transform:translateY(115%)}}
.hero p{font-size:clamp(17px,1.75vw,27px);line-height:1.45;max-width:min(41%,640px);margin:0 0 clamp(30px,3vw,48px);animation:fade-up .9s var(--ease) .75s backwards}
.hero .button{min-height:clamp(54px,4.6vw,70px);padding:15px clamp(26px,2.4vw,38px);font-size:clamp(16px,1.3vw,20px);color:var(--ink);background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 0/0% 100%,#fff;animation:fade-up .9s var(--ease) .88s backwards}
@keyframes fade-up{from{opacity:0;transform:translateY(26px)}}

/* ---------- Fascia gialla (solo decorativa) ---------- */
.energy-band{height:clamp(12px,1.4vw,20px);background:var(--yellow)}

/* ---------- Servizi ---------- */
.services{padding-block:clamp(44px,5.4vw,80px)}
.service-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(24px,3vw,40px)}
.service-intro .line{grid-column:1/-1;margin-bottom:0}
.service-intro-side p{font-size:clamp(16px,1.3vw,20px);margin-bottom:24px}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,28px);scroll-margin-top:calc(var(--header) + 24px)}
.service-grid article{position:relative;isolation:isolate;min-width:0;display:flex;flex-direction:column;padding:clamp(20px,2vw,32px);border:1px solid #e2e2dd;border-radius:22px;background:#fff;overflow:hidden;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:color .5s var(--ease),border-color .5s ease,box-shadow .5s ease,transform .45s var(--ease)}
/* Riempimento rosso che sale dal basso al passaggio. */
.service-grid article::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--red);transform:translateY(101%);transition:transform .65s var(--ease-io)}
.service-open{border:0;background:none;padding:0;text-align:left;width:100%}
.service-title{display:block;min-height:2.4em;margin-bottom:clamp(12px,1.3vw,20px);font-size:clamp(20px,1.7vw,27px);font-weight:800;line-height:1.2;letter-spacing:-.035em}
.service-accent{transition:color .5s ease}
.service-photo{display:block;width:100%;height:auto;aspect-ratio:260/156;object-fit:cover;background:#eee;border-radius:14px;transition:filter .5s ease}
.service-grid article p{font-size:15px;line-height:1.6;margin:16px 0 20px;opacity:.76}
.service-grid .service-cta{align-self:flex-start;margin-top:auto;min-height:48px;padding:12px 18px;gap:18px;font-size:15px}
@media(hover:hover) and (pointer:fine){
  .service-grid article:hover{color:#fff;border-color:var(--red);box-shadow:0 34px 70px #ed101447}
  .service-grid article:hover::before{transform:none}
  .service-grid article:hover .service-accent{color:var(--yellow)}
  .service-grid article:hover .service-photo{filter:saturate(1.15) brightness(1.06)}
  .service-grid article:hover p{opacity:1}
  .service-grid article:hover .service-cta{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 0/0% 100%,#fff;color:var(--ink)}
  .service-grid article .service-cta:hover{background-size:100% 100%}
}

/* ---------- Azienda ---------- */
.about{padding-block:clamp(48px,6vw,88px)}
.about-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(36px,5vw,80px);align-items:center}
.about h2{margin-bottom:clamp(24px,3vw,44px)}
.about-text p{font-size:clamp(17px,1.35vw,22px);font-weight:500;line-height:1.45;letter-spacing:-.015em;margin-bottom:1em}
.about-text p:last-child{margin-bottom:0}
/* Le parole si accendono mentre si scorre (solo con JS attivo). */
.js .about-text .word{color:#11111138;transition:color .45s ease}
.js .about-text .word.lit{color:var(--ink)}
.about-interview{margin:0;min-width:0}
.video-frame{position:relative;isolation:isolate}
.video-frame::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:22px;background:var(--red);translate:16px 16px}
.video-frame video{display:block;width:100%;aspect-ratio:16/9;background:#000;object-fit:cover;border-radius:22px;box-shadow:0 24px 54px #00000040}
/* Pulsante di avvio sopra l'anteprima (creato da app.js; senza JS restano i comandi standard). */
.video-play{position:absolute;inset:0;display:grid;place-items:center;padding:0;border:0;border-radius:22px;background:linear-gradient(#0000 45%,#00000080);cursor:pointer}
.video-play::before{content:"";width:clamp(64px,7vw,104px);aspect-ratio:1;border-radius:50%;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/46% no-repeat;box-shadow:0 0 0 0 #ed101480,0 14px 34px #00000059;transition:scale .45s var(--ease),background-color .3s ease;animation:play-pulse 2.4s ease-out infinite}
.video-play:hover::before{scale:1.1;background-color:#c50913}
@keyframes play-pulse{0%{box-shadow:0 0 0 0 #ed101480,0 14px 34px #00000059}70%,100%{box-shadow:0 0 0 26px #ed101400,0 14px 34px #00000059}}
.interview-title{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-size:clamp(16px,1.3vw,20px);font-weight:700;line-height:1.3;letter-spacing:-.02em}
.interview-title::before{content:"";flex:0 0 auto;border-left:12px solid var(--red);border-block:8px solid transparent}

/* ---------- Progetti ---------- */
.projects{padding-block:clamp(56px,7vw,104px)}
.section-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,56px)}
.filters{display:flex;flex-wrap:wrap;gap:10px}
.filters button{min-height:46px;padding:11px 20px;border:1.5px solid var(--ink);border-radius:999px;font-size:14px;font-weight:600;background:linear-gradient(var(--ink),var(--ink)) no-repeat 50% 100%/100% 0%,#fff;transition:background-size .45s var(--ease),color .3s ease,scale .2s ease}
.filters button:active{scale:.95}
.filters .selected{background-size:100% 100%;color:#fff}
@media(hover:hover) and (pointer:fine){.filters button:not(.selected):hover{background-image:linear-gradient(var(--yellow),var(--yellow));background-size:100% 100%}}
.project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(170px,18vw,280px);grid-auto-flow:dense;gap:clamp(12px,1.4vw,22px)}
.project{position:relative;min-width:0;overflow:hidden;border-radius:20px;background:var(--ink)}
.project[hidden]{display:none}
.project:nth-child(1){grid-column:span 2;grid-row:span 2}
.project:nth-child(2),.project:nth-child(5),.project:nth-child(6){grid-column:span 2}
.project img{width:100%;height:100%;object-fit:cover;transition:scale 1.1s var(--ease),filter .5s ease}
.project span{position:absolute;inset:auto 0 0;padding:80px clamp(16px,1.6vw,24px) clamp(16px,1.5vw,22px);color:#fff;font-size:clamp(16px,1.5vw,22px);font-weight:700;line-height:1.3;letter-spacing:-.02em;background:linear-gradient(#0000,#000000c7);pointer-events:none;transition:padding-bottom .5s var(--ease)}
@media(hover:hover) and (pointer:fine){
  .project:hover img{scale:1.08}
  .project:hover span{padding-bottom:clamp(24px,2.4vw,34px)}
}

/* ---------- Contatti ---------- */
.contact{background:linear-gradient(135deg,#d40c11,var(--red-deep));color:#fff;padding-block:clamp(48px,5vw,80px)}
.contact>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.contact h2{font-size:clamp(34px,4.2vw,64px);line-height:1.02;margin-bottom:clamp(16px,1.6vw,24px)}
.contact-intro p{font-size:clamp(16px,1.25vw,19px);font-weight:500;max-width:520px;margin:0}
/* Telefono ed email: due schede bianche, ognuna interamente cliccabile. */
.contact-details{display:grid;gap:clamp(12px,1.2vw,18px)}
.contact-card{display:flex;align-items:center;gap:clamp(14px,1.5vw,22px);padding:clamp(16px,1.5vw,22px) clamp(18px,1.9vw,28px);border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 14px 34px #0000002e;transition:background-color .4s ease,color .4s ease,transform .45s var(--ease),box-shadow .4s ease}
.contact-icon{flex:0 0 auto;display:grid;place-items:center;width:clamp(44px,3.8vw,56px);aspect-ratio:1;border-radius:50%;background:var(--red);color:#fff;transition:background-color .4s ease,color .4s ease}
.contact-icon svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.contact-text small{font-size:12px;font-weight:700;letter-spacing:.14em;color:#6a6a6a;transition:color .4s ease}
.contact-text strong{font-size:clamp(18px,1.9vw,29px);font-weight:800;line-height:1.2;letter-spacing:-.035em;overflow-wrap:anywhere}
.contact-card b{flex:0 0 auto;font-size:clamp(22px,2vw,30px);font-weight:400;line-height:1;color:var(--red);transition:transform .5s var(--ease),color .4s ease}
@media(hover:hover) and (pointer:fine){
  .contact-card:hover{background:var(--ink);color:#fff;transform:translateY(-4px);box-shadow:0 24px 50px #00000059}
  .contact-card:hover .contact-icon{background:var(--yellow);color:var(--ink)}
  .contact-card:hover small{color:#bdbdbd}
  .contact-card:hover b{color:var(--yellow);transform:rotate(45deg)}
}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:#bdbdbd;overflow:hidden}
.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:36px;font-size:13px}
.footer .brand{color:#fff}
.footer .brand-mark{width:52px;height:56px;flex-basis:52px}
.footer .brand>span{font-size:24px}
.footer a:not(.brand){transition:color .25s ease}
.footer a:not(.brand):hover{color:var(--yellow)}

/* ---------- Motion graphic "Impianti elettrici" (nel popup del servizio) ----------
   Ciclo di 8 secondi: interruttori che scattano, cavi che si accendono, edifici che si illuminano.
   Lo stato di base qui sotto è quello "acceso": è ciò che si vede con il movimento ridotto. */
.service-motion{margin:22px 0 0}
.service-motion svg{display:block;width:100%;height:auto;border-radius:16px;font-family:inherit}
.service-motion [class^="mg-"]{transform-box:fill-box;transform-origin:center}
.mg-labels{font-size:11px;font-weight:700;letter-spacing:.18em;fill:#9a9a9a}
.mg-switch,.mg-led,.mg-window{fill:var(--yellow)}
.mg-switch{animation:mg-switch-1 8s var(--ease) infinite}
.mg-led{animation:mg-led-1 8s linear infinite}
.mg-switch.mg-2{animation-name:mg-switch-2}.mg-led.mg-2{animation-name:mg-led-2}
.mg-switch.mg-3{animation-name:mg-switch-3}.mg-led.mg-3{animation-name:mg-led-3}
.mg-switch.mg-4{animation-name:mg-switch-4}.mg-led.mg-4{animation-name:mg-led-4}
@keyframes mg-switch-1{0%,8%{transform:translateY(22px);fill:#666}11%,94%{transform:none;fill:var(--yellow)}100%{transform:translateY(22px);fill:#666}}
@keyframes mg-switch-2{0%,14%{transform:translateY(22px);fill:#666}17%,94%{transform:none;fill:var(--yellow)}100%{transform:translateY(22px);fill:#666}}
@keyframes mg-switch-3{0%,20%{transform:translateY(22px);fill:#666}23%,94%{transform:none;fill:var(--yellow)}100%{transform:translateY(22px);fill:#666}}
@keyframes mg-switch-4{0%,26%{transform:translateY(22px);fill:#666}29%,94%{transform:none;fill:var(--yellow)}100%{transform:translateY(22px);fill:#666}}
@keyframes mg-led-1{0%,9%{fill:#444}11%,94%{fill:var(--yellow)}100%{fill:#444}}
@keyframes mg-led-2{0%,15%{fill:#444}17%,94%{fill:var(--yellow)}100%{fill:#444}}
@keyframes mg-led-3{0%,21%{fill:#444}23%,94%{fill:var(--yellow)}100%{fill:#444}}
@keyframes mg-led-4{0%,27%{fill:#444}29%,94%{fill:var(--yellow)}100%{fill:#444}}
.mg-bolt{animation:mg-bolt 8s var(--ease) infinite}
@keyframes mg-bolt{0%,2%{transform:scale(1)}5%{transform:scale(1.6)}10%,100%{transform:scale(1)}}
.mg-live{stroke-dasharray:1;stroke-dashoffset:0;animation:mg-draw 8s linear infinite}
@keyframes mg-draw{0%,29%{stroke-dashoffset:1;opacity:1}42%,93%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}
.mg-pulses{opacity:0;animation:mg-pulses 8s linear infinite}
@keyframes mg-pulses{0%,42%{opacity:0}45%,91%{opacity:1}95%,100%{opacity:0}}
.mg-flow{stroke-dasharray:.06 .94;animation:mg-flow 1.3s linear infinite}
.mg-flow-2{animation-delay:-.65s}
@keyframes mg-flow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.mg-window.mg-home{animation:mg-window-home 8s linear infinite}
.mg-window.mg-plant{animation:mg-window-plant 8s linear infinite}
@keyframes mg-window-home{0%,43%{fill:#3a3a3a}46%,94%{fill:var(--yellow)}100%{fill:#3a3a3a}}
@keyframes mg-window-plant{0%,46%{fill:#3a3a3a}49%,94%{fill:var(--yellow)}100%{fill:#3a3a3a}}
.mg-gear{fill:var(--yellow);stroke:var(--yellow);animation:mg-gear 8s linear infinite}
@keyframes mg-gear{0%,49%{transform:rotate(0);fill:#666;stroke:#666}52%{fill:var(--yellow);stroke:var(--yellow)}94%{transform:rotate(720deg);fill:var(--yellow);stroke:var(--yellow)}100%{transform:rotate(720deg);fill:#666;stroke:#666}}
.mg-glow{fill:var(--yellow);opacity:.2;filter:blur(18px)}
.mg-glow-1{animation:mg-glow 8s ease-in-out infinite}
.mg-glow-2{animation:mg-glow 8s ease-in-out infinite;animation-delay:.25s}
@keyframes mg-glow{0%,43%{opacity:0}50%{opacity:.34}64%{opacity:.16}79%{opacity:.3}93%{opacity:.2}100%{opacity:0}}

/* ---------- Motion graphic "Energie rinnovabili" (classi rn-) e "Domotica" (classi dm-) ----------
   Stesso schema di quello degli impianti elettrici: ciclo di 8 secondi, stato di base "acceso". */
.service-motion :is([class^="rn-"],[class^="dm-"]){transform-box:fill-box;transform-origin:center}
.service-motion :is(.rn-level,.rn-heat,.rn-fire,.rn-flicker,.dm-mercury){transform-origin:50% 100%}
.service-motion .dm-cone{transform-origin:100% 50%}

/* Rinnovabili */
.rn-sun{animation:rn-sun 8s var(--ease) infinite}
@keyframes rn-sun{0%,2%{transform:scale(0)}9%,94%{transform:scale(1)}100%{transform:scale(0)}}
.rn-rays{animation:rn-spin 14s linear infinite}
@keyframes rn-spin{to{transform:rotate(360deg)}}
.rn-beams{animation:rn-beams 8s linear infinite}
@keyframes rn-beams{0%,11%{opacity:0}15%,93%{opacity:1}98%,100%{opacity:0}}
.rn-beam{animation:rn-beam 1s linear infinite}
@keyframes rn-beam{to{stroke-dashoffset:-15}}
.rn-cell{fill:var(--yellow);animation:rn-cell-1 8s linear infinite}
.rn-cell.rn-c2{animation-name:rn-cell-2}
.rn-cell.rn-c3{animation-name:rn-cell-3}
@keyframes rn-cell-1{0%,16%{fill:#2b2b2b}19%,94%{fill:var(--yellow)}100%{fill:#2b2b2b}}
@keyframes rn-cell-2{0%,20%{fill:#2b2b2b}23%,94%{fill:var(--yellow)}100%{fill:#2b2b2b}}
@keyframes rn-cell-3{0%,24%{fill:#2b2b2b}27%,94%{fill:var(--yellow)}100%{fill:#2b2b2b}}
.rn-level{fill:var(--yellow);animation:rn-level 8s linear infinite}
@keyframes rn-level{0%,27%{transform:scaleY(0)}50%,94%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.rn-coil{stroke:var(--red);stroke-dasharray:1;stroke-dashoffset:0;animation:rn-coil 8s linear infinite}
@keyframes rn-coil{0%,22%{stroke-dashoffset:1}36%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.rn-heat{fill:var(--red);animation:rn-heat 8s linear infinite}
@keyframes rn-heat{0%,34%{transform:scaleY(.1)}58%,94%{transform:scaleY(1)}100%{transform:scaleY(.1)}}
.rn-pellet{fill:#8a8a8a;animation:rn-pellet 1.2s linear infinite}
.rn-pellet.rn-p2{animation-delay:-.4s}
.rn-pellet.rn-p3{animation-delay:-.8s}
@keyframes rn-pellet{from{transform:translateY(-12px);opacity:0}25%{opacity:1}to{transform:translateY(10px);opacity:1}}
.rn-fire{animation:rn-fire 8s var(--ease) infinite}
@keyframes rn-fire{0%,38%{transform:scale(0)}44%,94%{transform:scale(1)}100%{transform:scale(0)}}
.rn-flicker{animation:rn-flicker .45s ease-in-out infinite alternate}
@keyframes rn-flicker{from{transform:scale(1.05,.9)}to{transform:scale(.95,1.1)}}
.rn-waves{animation:rn-waves 8s linear infinite}
@keyframes rn-waves{0%,46%{opacity:0}50%,93%{opacity:1}98%,100%{opacity:0}}
.rn-wave{animation:rn-wave 1.8s ease-in infinite}
.rn-wave.rn-w2{animation-delay:-.6s}
.rn-wave.rn-w3{animation-delay:-1.2s}
@keyframes rn-wave{from{transform:translateY(8px);opacity:0}30%{opacity:1}to{transform:translateY(-14px);opacity:0}}

/* Domotica */
.dm-ring{opacity:.25;animation:dm-ring 2.6s ease-out infinite}
.dm-ring.dm-r2{animation-delay:-1.3s}
@keyframes dm-ring{from{transform:scale(.6);opacity:.7}to{transform:scale(1.2);opacity:0}}
.dm-home{animation:dm-home 8s var(--ease) infinite}
@keyframes dm-home{0%,2%{transform:scale(.4)}6%{transform:scale(1.25)}10%,100%{transform:scale(1)}}
.dm-live{stroke-dasharray:1;stroke-dashoffset:0;animation:dm-line-1 8s linear infinite}
.dm-live.dm-2{animation-name:dm-line-2}
.dm-live.dm-3{animation-name:dm-line-3}
.dm-live.dm-4{animation-name:dm-line-4}
@keyframes dm-line-1{0%,8%{stroke-dashoffset:1;opacity:1}16%,93%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dm-line-2{0%,20%{stroke-dashoffset:1;opacity:1}28%,93%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dm-line-3{0%,32%{stroke-dashoffset:1;opacity:1}40%,93%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dm-line-4{0%,44%{stroke-dashoffset:1;opacity:1}52%,93%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}
.dm-node{stroke:var(--yellow);animation:dm-node-1 8s linear infinite}
.dm-node.dm-2{animation-name:dm-node-2}
.dm-node.dm-3{animation-name:dm-node-3}
.dm-node.dm-4{animation-name:dm-node-4}
@keyframes dm-node-1{0%,16%{stroke:#444}18%,94%{stroke:var(--yellow)}100%{stroke:#444}}
@keyframes dm-node-2{0%,28%{stroke:#444}30%,94%{stroke:var(--yellow)}100%{stroke:#444}}
@keyframes dm-node-3{0%,40%{stroke:#444}42%,94%{stroke:var(--yellow)}100%{stroke:#444}}
@keyframes dm-node-4{0%,52%{stroke:#444}54%,94%{stroke:var(--yellow)}100%{stroke:#444}}
.dm-mercury{animation:dm-mercury 8s linear infinite}
@keyframes dm-mercury{0%,16%{transform:scaleY(.15)}30%,94%{transform:scaleY(1)}100%{transform:scaleY(.15)}}
.dm-wind{animation:dm-wind 8s linear infinite}
@keyframes dm-wind{0%,28%{transform:rotate(0)}94%,100%{transform:rotate(1080deg)}}
.dm-cam{animation:dm-cam 8s linear infinite}
@keyframes dm-cam{0%,40%{opacity:0}43%,93%{opacity:1}98%,100%{opacity:0}}
.dm-cone{fill:var(--yellow);opacity:.35;animation:dm-cone 2.4s ease-in-out infinite alternate}
@keyframes dm-cone{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
.dm-rec{fill:var(--red);animation:dm-rec 1s steps(1) infinite}
@keyframes dm-rec{50%{opacity:0}}
.dm-shield{stroke:var(--yellow);animation:dm-shield 8s linear infinite}
@keyframes dm-shield{0%,52%{stroke:#777}54%,94%{stroke:var(--yellow)}100%{stroke:#777}}
.dm-check{stroke:var(--yellow);stroke-dasharray:1;stroke-dashoffset:0;animation:dm-check 8s linear infinite}
@keyframes dm-check{0%,53%{stroke-dashoffset:1}59%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}

/* ---------- Popup dei servizi ---------- */
dialog{border:0;border-radius:18px;padding:44px;width:min(700px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 25px 100px #0006;overscroll-behavior:contain}
dialog::backdrop{background:#000000bf;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog .line{margin-bottom:20px}
dialog h2{font-size:clamp(28px,4vw,40px);line-height:1.1;letter-spacing:-.045em;margin-bottom:16px;padding-right:25px}
dialog p{color:#555}
.close{position:absolute;right:10px;top:10px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;font-size:32px;line-height:1;transition:rotate .45s var(--ease),background-color .25s ease}
.close:hover{rotate:90deg;background:var(--yellow)}
dialog[open]{animation:modal-enter .45s var(--ease) both}
dialog[open]::backdrop{animation:backdrop-enter .3s ease-out both}
dialog[open].is-closing{animation:modal-leave .2s ease-in both}
dialog[open].is-closing::backdrop{animation:backdrop-leave .2s ease-in both}
@keyframes modal-enter{from{opacity:0;transform:translateY(40px) scale(.94)}}
@keyframes modal-leave{to{opacity:0;transform:translateY(16px) scale(.97)}}
@keyframes backdrop-enter{from{opacity:0}}
@keyframes backdrop-leave{to{opacity:0}}
/* Tasselli a incastro: lista semantica per gli screen reader. */
dialog .service-puzzle{list-style:none;padding:0;margin:28px 0 0;isolation:isolate}
dialog .service-puzzle li{position:relative;margin:0;padding:30px 24px 34px;text-align:center;text-transform:uppercase;background:var(--red);color:#fff;font-weight:600;font-size:17px;line-height:1.45;clip-path:polygon(0 0,40% 0,40% 12px,60% 12px,60% 0,100% 0,100% calc(100% - 12px),60% calc(100% - 12px),60% 100%,40% 100%,40% calc(100% - 12px),0 calc(100% - 12px))}
dialog .service-puzzle li:first-child{clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),60% calc(100% - 12px),60% 100%,40% 100%,40% calc(100% - 12px),0 calc(100% - 12px));z-index:3}
dialog .service-puzzle li+li{margin-top:-9px}
dialog .service-puzzle li:nth-child(2){background:var(--ink);z-index:2}
dialog .service-puzzle li:last-child{background:var(--yellow);color:var(--ink);padding-bottom:24px;clip-path:polygon(0 0,40% 0,40% 12px,60% 12px,60% 0,100% 0,100% 100%,0 100%);z-index:1}
dialog[open]:not(.is-closing) .service-puzzle li{animation:tile-assemble .7s var(--ease) backwards;animation-delay:.18s}
dialog[open]:not(.is-closing) .service-puzzle li:nth-child(2){animation-delay:.28s}
dialog[open]:not(.is-closing) .service-puzzle li:nth-child(3){animation-delay:.38s}
@keyframes tile-assemble{from{opacity:0;transform:translateY(-46px)}}

/* ---------- Comparsa allo scorrimento (attiva solo con JS) ---------- */
.js [data-reveal]{opacity:0;translate:0 48px;transition:opacity .95s var(--ease),translate .95s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
/* Una striscia dell'1% resta "visibile" (ma trasparente) perché il browser possa rilevare l'ingresso in vista. */
.js [data-reveal="clip"]{translate:0 30px;clip-path:inset(0 0 99% 0 round 20px);transition:opacity .2s ease,clip-path 1.15s var(--ease-io),translate 1.15s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.js [data-reveal].is-in{opacity:1;translate:0}
.js [data-reveal="clip"].is-in{clip-path:inset(0 0 0 0 round 20px)}

/* ---------- Movimento legato allo scroll, dove il browser lo supporta ---------- */
@supports(animation-timeline:scroll()){
  @media(min-width:768px) and (prefers-reduced-motion:no-preference){
    .hero-photo{top:-12%;animation:photo-drift linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    .hero-content{animation:content-drift linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    @keyframes photo-drift{to{transform:translateY(10%)}}
    @keyframes content-drift{to{transform:translateY(-80px);opacity:.2}}
  }
}

/* ---------- Tablet ---------- */
@media(max-width:1023px){
  :root{--header:84px}
  .header-cta{display:none}
  .brand-mark{width:56px;height:60px;flex-basis:56px}
  .brand>span{font-size:25px}
  .hero p{max-width:min(44%,560px)}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .about-interview{max-width:none}
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(170px,34vw,300px)}
  .project:nth-child(n){grid-column:auto;grid-row:auto}
  .project:nth-child(1),.project:nth-child(6){grid-column:span 2}
}
/* Servizi a scorrimento orizzontale quando tre schede non ci stanno. */
@media(max-width:899px){
  .service-intro{grid-template-columns:1fr;gap:20px}
  .contact>.wrap{grid-template-columns:1fr;gap:32px}
  /* Tablet: tre schede compatte affiancate, tutte visibili. */
  .service-grid{gap:12px}
  .service-grid article{padding:16px;border-radius:18px}
  .service-title{font-size:17px;min-height:3.7em}
  .service-grid article p{font-size:14px}
  .service-grid .service-cta{align-self:stretch;padding:10px 14px;gap:10px;font-size:14px}
}
/* Telefono: le tre schede una sotto l'altra. */
@media(max-width:639px){
  .service-grid{grid-template-columns:1fr;gap:16px}
  .service-grid article{padding:22px;border-radius:22px}
  .service-title{font-size:22px;min-height:0}
  .service-grid article p{font-size:16px}
  .service-grid .service-cta{align-self:flex-start;padding:12px 18px;gap:18px;font-size:15px}
}

/* ---------- Mobile ---------- */
@media(max-width:767px){
  :root{--header:76px;--gutter:24px}
  .brand{gap:9px}
  .brand-mark{width:48px;height:52px;flex-basis:48px}
  .brand>span{font-size:23px}
  .menu{display:grid}
  /* Menu a tendina compatto sotto la barra: occupa solo lo spazio delle voci. */
  .header nav{position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;gap:0;padding:4px var(--gutter) 12px;background:#fff;border-top:1px solid #0000000f;box-shadow:0 22px 40px #00000029;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .45s var(--ease-io),visibility .45s}
  .header nav.open{visibility:visible;clip-path:inset(0 0 -70px 0)}
  .header nav a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:10px 0;font-size:19px;font-weight:700;letter-spacing:-.02em;border-bottom:1px solid #ececea;opacity:0;translate:0 -8px;transition:opacity .2s ease,translate .2s ease}
  .header nav a:last-child{border-bottom:0}
  .header nav a::after{content:"→";position:static;height:auto;background:none;transform:none;color:var(--red);font-size:22px;font-weight:400;line-height:1}
  .header nav.open a{opacity:1;translate:0;transition:opacity .4s ease,translate .5s var(--ease)}
  .header nav.open a:nth-child(1){transition-delay:.08s}
  .header nav.open a:nth-child(2){transition-delay:.13s}
  .header nav.open a:nth-child(3){transition-delay:.18s}
  .header nav.open a:nth-child(4){transition-delay:.23s}

  .hero{flex-direction:column;align-items:stretch;min-height:0;background:var(--red)}
  .hero::before,.hero::after{display:none}
  .hero-content{padding-block:48px 60px}
  .hero h1{font-size:clamp(34px,10.5vw,64px);margin-bottom:22px}
  .hero p{font-size:17px;max-width:580px;margin-bottom:26px}
  .hero-photo{order:1;position:relative;inset:auto;z-index:0;width:100%;height:clamp(240px,64vw,440px);margin-top:-30px;clip-path:polygon(0 15%,100% 0,100% 100%,0 100%)}

  h2{font-size:clamp(38px,10.5vw,64px)}
  .section-top{display:block}
  .filters{margin-top:24px;gap:8px}
  .filters button{padding:10px 14px;font-size:13px}
  .contact h2{font-size:clamp(32px,8.5vw,46px)}
  .contact-card{border-radius:14px}
  .video-frame::before{translate:10px 10px}
  .footer{flex-wrap:wrap;gap:18px}
  .footer .brand{width:100%}
  dialog{padding:48px 24px 26px}
  dialog .service-puzzle li{font-size:15px;padding-inline:16px}
}
@media(max-width:479px){
  .contact-card b{display:none}
  .contact-text strong{font-size:17px}
  .project-grid{grid-auto-rows:clamp(150px,44vw,220px);gap:10px}
  .project{border-radius:14px}
  .project span{font-size:14px;padding:50px 12px 12px}
}
@media(max-width:379px){
  :root{--gutter:16px;--header:70px}
  .brand>span{font-size:21px}
  .hero p{font-size:16px}
  .footer{font-size:12px}
  dialog{padding-inline:20px}
}

/* ---------- Movimento ridotto: tutto fermo, tutto visibile ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal]{opacity:1;translate:none;clip-path:none}
  .js .about-text .word{color:var(--ink)}

}