/*
Theme Name: Kikai
Theme URI: https://www.kikai.it
Author: [Agenzia]
Description: Tema su misura per Kikai — componenti speciali per barriere stradali. Tema classico, senza dipendenze da plugin a pagamento.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kikai
*/

:root{
  /* Unità di scala per monitor grandi (es. 27" 4K): vale 1px fino a 1920px di
     finestra, poi cresce in modo lineare fino a 1.5px a 3840px (4K al 100%).
     Font, contenitore (--max) e altezza header sono espressi in multipli di
     --u, così il sito mantiene le proporzioni di un Full HD invece di
     restare minuscolo al centro dello schermo. Sotto i 1920px nulla cambia. */
  --u:clamp(1px, calc(.5px + 100vw / 3840), 1.5px);
  /* Scala dei font: 16/18 (0.889), quindi corpo testo 16px dal mobile
     fino ai monitor 2K (2560px); poi cresce fino a 1.3 a 3840px (corpo ~23px). */
  --uf:clamp(.8889px, calc(.0667px + 100vw / 3114), 1.3px);
  --green:#316845;
  --green-deep:#1F422C;
  --green-ink:#152D1E;
  --ink:#2B2B2B;
  --ink-soft:#5F6660;
  --grey:#8A908B;
  --line:#DFE3DE;
  --bg:#FFFFFF;
  --bg-soft:#F3F6F2;
  --bg-grey:#EBEDEA;
  --max:calc(1280 * var(--u));
  --gut:32px;
  /* Respiro verticale delle sezioni: proporzionale a larghezza E altezza
     della finestra (su schermi bassi non spreca la prima schermata),
     tra 88 e 160px. Su mobile è fisso a 64px (media query ≤900px). */
  --sec-pad:clamp(88px, min(8vw, 14vh), calc(160 * var(--u)));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--ink);background:var(--bg);
  font-size:calc(18 * var(--uf));line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}

/* Fade-in al caricamento pagina (progressive enhancement: senza JS la pagina resta visibile). */
.js body{opacity:0}
.js body.kikai-loaded{opacity:1;transition:opacity .6s ease}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;padding:12px 18px;z-index:200}
.skip-link:focus{left:0}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sec{padding:var(--sec-pad) 0}
.sec--soft{background:var(--bg-soft)}
.sec--grey{background:var(--bg-grey)}
.sec--deep{background:var(--green-deep);color:#fff}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.grid2--top{align-items:start}
.narrow{max-width:62ch}
.valori-copy{max-width:calc(920 * var(--u));margin-top:42px;color:var(--ink-soft);font-size:calc(19 * var(--uf));line-height:1.75}
.valori-copy p{margin:0 0 24px}
.valori-copy ul{display:grid;grid-template-columns:1fr 1fr;gap:22px 48px;list-style:none;margin:34px 0;padding:0}
.valori-copy li{border-top:2px solid var(--green);padding:16px 0 0;color:var(--ink);font-size:calc(18 * var(--uf))}
.valori-copy strong{color:var(--ink);font-weight:600}

/* ---------- storia azienda: video full-bleed a destra, testo boxato ----------
   Stesso principio del .fcarousel: il markup è fuori da ".wrap" (figlio
   diretto di ".sec", che non ha padding orizzontale). La colonna di testo
   replica larghezza/gutter di ".wrap" con un padding-left calcolato; la
   colonna video riempie lo spazio restante fino al bordo del viewport. */
.storia-grid{display:grid;grid-template-columns:minmax(0,calc((var(--max) - 64px)/2)) 1fr;gap:64px;align-items:stretch;
	padding-left:max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
}
.storia-text{display:flex;flex-direction:column;justify-content:center;padding-right:var(--gut)}
.storia-media{position:relative;overflow:hidden}
.storia-media .r43{height:100%;aspect-ratio:auto}

.video-inline{position:relative}
.video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(0,0,0,.35);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s,border-color .18s}
.video-play:hover,.video-play:focus-visible{background:rgba(0,0,0,.55);border-color:var(--green)}
.video-play:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.video-play .material-symbols-outlined{font-size:calc(32 * var(--uf))}

.lightbox-video-box{width:min(80vw,calc(80vh * 16 / 9));aspect-ratio:16/9;background:#000}
.lightbox-video{width:100%;height:100%;object-fit:contain;display:block}

/* ---------- type ---------- */
h1,h2,h3,h4{line-height:1.15;font-weight:600;letter-spacing:-.02em}
h1{font-size:clamp(calc(40 * var(--uf)),5.5vw,calc(66 * var(--uf)));font-weight:700}
h2{font-size:clamp(calc(28 * var(--uf)),3.2vw,calc(40 * var(--uf)))}
h3{font-size:calc(22 * var(--uf))}
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:calc(14 * var(--uf));letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);font-weight:500;margin-bottom:18px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--green)}
p{color:var(--ink-soft);max-width:64ch}
p + p{margin-top:16px}
.lead{font-size:calc(20 * var(--uf));color:var(--ink-soft)}
h2 + p,h1 + p{margin-top:20px}
strong{color:var(--ink);font-weight:600}
.entry-content h2{margin-top:44px}
.entry-content h3{margin-top:32px}
.entry-content ul,.entry-content ol{margin:18px 0 18px 22px;color:var(--ink-soft)}
.entry-content li{margin-bottom:8px}

/* ---------- header ---------- */
/* Barra utility superiore: sticky con top negativo (= restare "agganciata"
   appena sopra il bordo visibile, cioè nascosta) come stato di riposo.
   .hd-utility e .hd-main devono essere entrambe figlie dirette di <body>
   (non annidate una dentro l'altra dentro un wrapper comune): altrimenti il
   "contenitore" per lo sticky sarebbe alto solo quanto le due barre messe
   insieme, senza spazio di manovra oltre quella soglia — appena lo scroll la
   supera, l'elemento smette di restare agganciato e scorre via per sempre.
   --hd-utility-h è impostata da main.js con l'altezza reale della barra. */
:root{--hd-utility-h:42px}
.hd-utility{
  position:sticky;top:calc(-1 * var(--hd-utility-h));z-index:61;
  background:var(--green);transition:top .3s ease;
}
.hd-utility.is-revealed{top:0}
.hd-utility-in{display:flex;align-items:center;justify-content:space-between;gap:24px; padding: 10px var(--gut);}
.hd-utility-payoff{
  font-size:calc(13 * var(--uf));line-height:1.35;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(255,255,255,.85);
}
.hd-utility-contacts{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hd-contact{display:inline-flex;align-items:center;gap:6px;font-size:calc(14.5 * var(--uf));color:rgba(255,255,255,.9);white-space:nowrap;transition:color .16s}
.hd-contact .material-symbols-outlined{font-size:calc(18 * var(--uf));line-height:1}
a.hd-contact:hover{color:#fff}

/* Fascia principale (logo/menu/CTA): resta sempre agganciata in alto; quando
   la barra utility si rivela scorrendo verso l'alto (.is-pushed, da main.js)
   scende di conseguenza per non esserci sovrapposta. */
.hd-main{
  position:sticky;top:0;z-index:60;background:#fafbfa;border-bottom:1px solid var(--line);
  transition:top .3s ease;
}
.hd-main.is-pushed{top:var(--hd-utility-h)}

.hd{display:flex;align-items:center;gap:40px;height:max(74px, calc(74 * var(--uf)))}
.hd-left{display:flex;align-items:center;gap:16px;min-width:0;flex-shrink:0}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo a{min-width:0}
.mark{width:34px;height:34px;border:4px solid var(--green);border-radius:9px;flex-shrink:0}
.logo b{font-size:calc(28 * var(--uf));font-weight:700;letter-spacing:.02em}
.logo img{max-height:max(44px, calc(44 * var(--uf)));max-width:100%;width:auto;height:auto}
.hd-right{display:flex;align-items:center;gap:18px;margin-left:auto}

/* Motto accanto al logo, solo mobile (su desktop c'è già in .hd-utility). */
.hd-payoff-mobile{
  display:none;font-size:calc(10 * var(--uf));line-height:1.3;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);
  border-left:1px solid var(--line);padding-left:10px;min-width:0;
}

/* ---------- menu inline desktop ---------- */
.hd-nav > ul{display:flex;list-style:none;align-items:center;gap:28px}
.hd-nav li{position:relative}
.hd-nav > ul > li > a{
  display:flex;align-items:center;gap:2px;
  padding:10px 2px;font-size:calc(20 * var(--uf));font-weight:500;white-space:nowrap;
  color:var(--ink);transition:color .16s;
}
.hd-nav > ul > li > a:hover,
.hd-nav .current-menu-item > a,
.hd-nav .current_page_item > a{color:var(--green)}
.hd-nav .menu-item-has-children > a::after{
  content:"expand_more";font-family:'Material Symbols Outlined';
  font-size:calc(20 * var(--uf));line-height:1;margin-left:-2px;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  transition:transform .18s ease;
}
.hd-nav .menu-item-has-children:hover > a::after,
.hd-nav .menu-item-has-children:focus-within > a::after{transform:rotate(180deg)}
.hd-nav .sub-menu{
  position:absolute;top:100%;left:0;min-width:220px;z-index:70;
  background:#fff;border:1px solid var(--line);border-radius:6px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);padding:8px;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
}
.hd-nav li:hover > .sub-menu,
.hd-nav li:focus-within > .sub-menu{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear 0s;
}
.hd-nav .sub-menu a{
  display:block;padding:9px 12px;border-radius:4px;
  font-size:calc(18 * var(--uf));color:var(--ink-soft);white-space:nowrap;transition:background .14s,color .14s;
}
.hd-nav .sub-menu a:hover{background:var(--bg-soft);color:var(--green)}
/* Header desktop stretto (901–1120px, es. finestra affiancata a metà di un
   Full HD, tablet orizzontale): a dimensioni piene logo+menu+CTA chiedono
   ~1100px e l'header usciva dallo schermo con scroll orizzontale. */
@media(min-width:901px) and (max-width:1120px){
  .hd{gap:20px}
  .hd-nav > ul{gap:16px}
  .hd-nav > ul > li > a{font-size:calc(16 * var(--uf))}
  .hd .btn{padding:10px 14px;font-size:calc(14 * var(--uf))}
}
.btn{
  display:inline-block;background:var(--green);color:#fff;
  padding:13px 26px;border-radius:3px;font-weight:600;font-size:calc(16 * var(--uf));
  letter-spacing:.02em;transition:background .18s;
}
.btn:hover{background:var(--green-ink);color:#fff}
.btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.btn--ghost:hover{background:rgba(255,255,255,.14)}
.btn--black{background:transparent;color:#000;border:1.5px solid rgba(0, 0, 0, 0.6)}
.btn--black:hover{background:rgba(0, 0, 0, 0.14); color: #fff;}
.btn--block{width:100%;text-align:center}
.btn--pill{border-radius:999px}
.burger{display:none;width:34px;height:22px;position:relative;flex-shrink:0}
.burger i{position:absolute;left:0;right:0;height:2px;background:var(--ink);transition:.2s}
.burger i:nth-child(1){top:3px}
.burger i:nth-child(2){bottom:3px}

/* ---------- overlay menu ---------- */
.ov{
  position:fixed;inset:0;z-index:100;background:rgba(20,25,20,0);
  visibility:hidden;pointer-events:none;
  transition:background .38s ease,visibility 0s linear .38s;
}
.ov.open{
  background:rgba(20,25,20,.35);visibility:visible;pointer-events:auto;
  transition:background .38s ease,visibility 0s linear 0s;
}
.ov-panel{
  position:absolute;right:0;top:0;bottom:0;width:min(680px,88vw);
  background:#fff;padding:44px 56px;display:flex;flex-direction:column;overflow-y:auto;
  transform:translateX(100%);
  transition:transform .42s cubic-bezier(.22,1,.36,1);
}
.ov.open .ov-panel{transform:translateX(0)}
.ov-top{display:flex;justify-content:space-between;align-items:flex-start}
.ov-logo img{display:block;height:40px;width:auto}
.ov-close{font-size:calc(36 * var(--uf));line-height:1;color:var(--grey);font-weight:300}
.ov nav{margin-top:auto;margin-bottom:auto;text-align:right}
.ov nav ul{list-style:none}
.ov nav a{
  display:block;padding:11px 0;font-size:clamp(calc(19 * var(--uf)),2.2vw,calc(27 * var(--uf)));
  letter-spacing:.09em;text-transform:uppercase;color:var(--grey);font-weight:400;
  transition:color .16s;
}
.ov nav a:hover,.ov nav .current-menu-item > a,.ov nav .current_page_item > a{color:var(--green)}

/* Sottomenu ad accordion: il bottone-freccia è inserito da main.js (nessun
   Walker PHP), il markup annidato (.sub-menu, .menu-item-has-children) è
   già quello di default di WordPress. */
.ov nav .menu-item-has-children{position:relative}
.ov nav .menu-item-has-children > a{padding-right:44px}
.ov-caret{
  position:absolute;right:0;top:0;bottom:0;width:44px;
  display:flex;align-items:center;justify-content:center;
  color:var(--grey);transition:transform .2s ease;
}
.ov-caret .material-symbols-outlined{font-size:calc(24 * var(--uf))}
.menu-item-has-children.ov-open > .ov-caret{transform:rotate(180deg)}
.ov nav .sub-menu{max-height:0;overflow:hidden;transition:max-height .3s ease}
.menu-item-has-children.ov-open > .sub-menu{max-height:600px}
.ov nav .sub-menu a{
  font-size:calc(17 * var(--uf));text-transform:none;letter-spacing:0;
  padding:8px 0 8px 18px;color:var(--ink-soft);
}
.ov-foot{display:flex;gap:36px;justify-content:flex-end;font-size:calc(17 * var(--uf));color:var(--ink-soft);flex-wrap:wrap}
.ov-foot span{color:var(--green);margin-right:6px}

/* ---------- placeholder / media ---------- */
.ph{
  position:relative;
  background:repeating-linear-gradient(45deg,#e9ece8 0 12px,#e2e6e1 12px 24px);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:22px;overflow:hidden;
}
.ph em{
  font-style:normal;font-size:calc(14 * var(--uf));line-height:1.5;letter-spacing:.05em;
  text-transform:uppercase;color:#77807a;font-weight:500;max-width:34ch;
}
.ph--dark{background:repeating-linear-gradient(45deg,#243027 0 12px,#1e2a21 12px 24px);border-color:#31402f}
.ph--dark em{color:#93a396}
.media{overflow:hidden}
.media img{width:100%;height:100%;object-fit:cover}
.media video{width:100%;height:100%;object-fit:cover;display:block}
.r21{aspect-ratio:21/9}.r16{aspect-ratio:16/9}.r43{aspect-ratio:4/3}
.r11{aspect-ratio:1/1}.r34{aspect-ratio:3/4}.r52{aspect-ratio:5/2}

/* Reveal-on-scroll generico per immagini/segnaposto (.media/.ph), applicato
   via main.js con IntersectionObserver — vedi quel file per le esclusioni
   (hero, .pagehead-media, che hanno già una propria animazione). */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in-view{opacity:1;transform:translateY(0)}

/* ---------- hero ---------- */
.hero{position:relative}
.hero .ph,.hero .media{border:none}
.hero-copy{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.45);
}
.hero-copy .wrap{width:100%}
.hero-copy h1{max-width:26ch}
.hero-highlight{color:#fff}
.hero-copy p{color:rgba(255,255,255,.92);max-width:63ch;margin-top:18px}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgb(0, 0, 0) 0%,rgba(255,255,255,0) 50%)}
.hero .claims{position:absolute;left:0;right:0;bottom:0;background:transparent;border-bottom:none}
.hero-video-wrap{background-size:cover;background-position:center}
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
}

/* ---------- claims bar ---------- */
.claims{border-bottom:1px solid var(--line);background:#fff}
.claims ul{list-style:none;display:flex;gap:34px;justify-content:space-between;padding:26px 0;flex-wrap:wrap}
.claims li{display:flex;align-items:center;gap:11px;font-size:calc(16.5 * var(--uf));font-weight:500; color: #fff;}
.tick{
  width:21px;height:21px;border:1.5px solid var(--green);border-radius:50%;
  display:grid;place-items:center;flex-shrink:0;
}
.tick::after{content:"";width:6px;height:10px;border:solid var(--green);border-width:0 1.5px 1.5px 0;transform:rotate(42deg) translateY(-1px)}

/* ---------- stat ---------- */
.stat{border-top:1px solid var(--line);margin-top:36px;padding-top:26px}
.stat b{display:block;font-size:clamp(calc(42 * var(--uf)),7vw,calc(57 * var(--uf)));font-weight:700;color:var(--green);line-height:1;letter-spacing:-.03em}
.stat small{font-size:calc(13.5 * var(--uf));letter-spacing:.15em;text-transform:uppercase;color:var(--grey)}
.statgrid{display:grid;grid-template-columns:repeat(2,1fr);margin-top:20px;border:1px solid var(--line);border-top:2px solid var(--green);background:#fff}
.statgrid .stat{border-top:none;margin-top:0;padding:36px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.statgrid .stat:nth-child(2n){border-right:none}
.statgrid .stat:nth-child(n+3){border-bottom:none}

/* ---------- process cards ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:48px;border:1px solid var(--line);background:#fff}
.step{padding:30px 26px;border-right:1px solid var(--line)}
.step:last-child{border-right:none}
.step-top{display:flex;justify-content:space-between;align-items:flex-start}
.step-n{font-size:calc(15 * var(--uf));color:var(--grey);letter-spacing:.1em}
.step-icon{font-size:calc(28 * var(--uf));line-height:1;color:var(--green);flex-shrink:0;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.step h3{margin:26px 0 12px;font-size:calc(19 * var(--uf))}
.step p{font-size:calc(16 * var(--uf));line-height:1.6}

/* ---------- comparison ---------- */
.cmp{border-left:4px solid var(--green);padding-left:26px}
.cmp + .cmp{margin-top:44px}
.cmp b{display:block;font-size:clamp(calc(36 * var(--uf)),4.4vw,calc(56 * var(--uf)));font-weight:700;color:var(--green);line-height:1;letter-spacing:-.03em}
.cmp .alt{color:var(--ink)}
.cmp .alt .unit{font-size:calc(18 * var(--uf));font-weight:500;letter-spacing:0;margin-left:8px;vertical-align:middle;color:var(--ink)}

.cmp-bar{margin-top:18px;height:8px;border-radius:99px;background:#e4e4e4;overflow:hidden}
.cmp-bar-fill{height:100%;width:0;border-radius:inherit;background:var(--green);transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.cmp-bar--alt .cmp-bar-fill{background:var(--ink)}
.cmp-bar.in-view .cmp-bar-fill{width:var(--target)}
.cmp u{
  display:block;text-decoration:none;font-size:calc(14 * var(--uf));letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey);
  border-bottom:1px solid var(--line);padding:9px 0 14px;margin-bottom:14px;
}
.cmp p{font-size:calc(17 * var(--uf))}

/* ---------- product grids ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px;margin-top:44px}
.pcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);transition:background .18s;display:block}
.pcard:hover{background:rgba(255,255,255,.12)}
.pcard .ph,.pcard .media{aspect-ratio:4/3;border:none}
.pcard span{display:block;padding:18px 20px 22px;font-size:calc(17 * var(--uf));font-weight:500;color:#fff}
.sec--deep p{color:rgba(255,255,255,.78)}
.sec--deep .eyebrow{color:#8FD6A8}
.sec--deep .eyebrow::before{background:#8FD6A8}

.fam{margin-top:54px}
.fam:first-child{margin-top:0}
.fam h2{padding-bottom:12px;border-bottom:2px solid var(--green);display:inline-block;margin-bottom:26px;font-size:calc(24 * var(--uf))}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
/* Catalogo e famiglie: al massimo 4 colonne anche su schermi larghi
   (evidenza 2×2 a destra + 2 colonne di card normali a fianco). */
.fgrid--nofill{grid-template-columns:repeat(auto-fill,minmax(max(250px, calc((100% - 3 * 22px) / 4)),1fr))}
.fcard{border:1px solid var(--line);background:#fff;transition:border-color .18s;display:block}
.fcard:hover{border-color:var(--green)}
.fcard .ph,.fcard .media{aspect-ratio:4/3;border:none;border-bottom:1px solid var(--line)}
.fcard b{display:block;padding:18px 20px;font-size:calc(17.5 * var(--uf));font-weight:600}

/* Evidenza editoriale: bordo verde e accento sul titolo. */
.product-card--featured{position:relative}
.fcard.product-card--featured b{background:var(--green);color:#fff}
.product-card--featured:hover,.product-card--featured:focus-visible{box-shadow:0 4px 16px rgba(21,45,30,.16)}

/* Card in evidenza più grande: da 640px occupa due colonne (immagine 16:9);
   da 901px (almeno 3 colonne) occupa 2 colonne × 2 righe e l'immagine riempie
   l'altezza. La griglia "dense" riempie i vuoti con le card normali. */
@media(min-width:640px){
  .fgrid{grid-auto-flow:row dense}
  .product-card--featured{grid-column:span 2}
  .product-card--featured.fcard .media,.product-card--featured.fcard .ph{aspect-ratio:16/9}
  .fcard.product-card--featured b{font-size:calc(22 * var(--uf));padding:15px}
}
/* Classi assegnate da main.js (posizionamento senza buchi). */
.is-tall{display:flex;flex-direction:column}
.is-tall .media,.is-tall .ph{flex:1 1 auto;position:relative;aspect-ratio:auto!important;min-height:320px}
.is-tall .media img{position:absolute;inset:0}
.fcard.is-wide .media,.fcard.is-wide .ph,.pcard.is-wide .media,.pcard.is-wide .ph{aspect-ratio:16/9}
.fcard.is-xwide .media,.fcard.is-xwide .ph,.pcard.is-xwide .media,.pcard.is-xwide .ph{aspect-ratio:21/9}

/* ---------- galleria prodotto (miniature che aprono il lightbox) ---------- */
.pgallery h2{padding-bottom:12px;border-bottom:2px solid var(--green);display:inline-block;margin-bottom:26px;font-size:calc(24 * var(--uf))}
.pgallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.pgallery-item{border:1px solid var(--line);background:none;padding:0;cursor:pointer;transition:border-color .18s}
.pgallery-item:hover,.pgallery-item:focus-visible{border-color:var(--green)}
.pgallery-item:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.pgallery-item.media{aspect-ratio:4/3}
.pgallery-fig{margin:0}
.pgallery-fig figcaption{margin-top:8px;font-size:calc(15 * var(--uf));color:var(--grey);text-align:center}
.pgallery-grid--a4{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.pgallery-item.media.r-a4{aspect-ratio:210/297;background:#fff}
.pgallery-grid--a4 .pgallery-item img{object-fit:contain;padding:8px}
.product-certifications{margin-top:18px}
.product-certifications .pgallery-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}

/* ---------- carosello (voce corrente grande + successiva che sbuca, stile Apple) ----------
   Full-bleed: il markup lo colloca fuori da ".wrap", come figlio diretto di
   ".sec" (che non ha padding orizzontale), quindi qui basta occupare tutta
   la larghezza disponibile — niente trucchi 100vw/margini negativi, che
   richiederebbero di conoscere la larghezza del contenitore di chi lo chiama.
   Il track resta allineato al filo sinistro del testo sopra grazie al
   padding calcolato di seguito; scorrendo, le slide sbucano da destra fino
   al bordo del viewport, come lo slider dei prodotti su apple.com. */
.fcarousel{position:relative;width:100%}
.fcarousel-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none;
	padding-left:max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
	padding-right:var(--gut);
	scroll-padding-left:max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
}
.fcarousel-track::-webkit-scrollbar{display:none}
.fcarousel-track:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.fcarousel.is-dragging .fcarousel-track{scroll-snap-type:none}
.fcarousel.is-dragging .fcarousel-track,
.fcarousel.is-dragging .fcarousel-slide{cursor:grabbing}
.fcarousel-slide{position:relative;flex:0 0 62vw;scroll-snap-align:start;border:1px solid var(--line);background:#fff;cursor:pointer}
.fcarousel-slide.is-current{cursor:default}
.fcarousel-slide .ph,.fcarousel-slide .media{border:none;aspect-ratio:16/9}
.fcarousel-slide img{-webkit-user-drag:none}
.fcarousel-caption{position:absolute;left:0;right:0;bottom:0;padding:48px 20px 16px;background:linear-gradient(to top,rgba(20,26,21,.72),rgba(20,26,21,0));pointer-events:none}
.fcarousel-caption b{display:block;color:#fff;font-size:calc(17.5 * var(--uf));font-weight:600}
.fcarousel-photo-caption{position:absolute;top:20px;left:20px;max-width:calc(100% - 40px);padding:8px 16px;background:rgba(20,26,21,.72);color:#fff;font-size:calc(17.5 * var(--uf));line-height:1.3;border-radius:4px;pointer-events:none}
@media(max-width:900px){
	.fcarousel-slide{flex-basis:86vw}
}

.fcarousel-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px}
.fcarousel-dots{display:flex;align-items:center;gap:8px}
.fcarousel-dot{position:relative;width:9px;height:9px;padding:0;border-radius:99px;border:1px solid var(--line);background:#fff;cursor:pointer;overflow:hidden;transition:width .18s,border-color .18s}
.fcarousel-dot:hover{border-color:var(--green)}
.fcarousel-dot:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.fcarousel-dot.is-active{width:34px;border-color:var(--line)}
.fcarousel-dot-fill{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
.fcarousel-dot.is-active .fcarousel-dot-fill{transform:scaleX(1)}
.fcarousel-dot.is-active.is-playing .fcarousel-dot-fill{transition:transform linear}

.fcarousel-playpause{width:32px;height:32px;padding:0;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .18s}
.fcarousel-playpause:hover{border-color:var(--green)}
.fcarousel-playpause:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.fcarousel-playpause svg{width:11px;height:11px;fill:var(--ink)}
.fcarousel-playpause .icon-pause{display:none}
.fcarousel-playpause[aria-pressed="true"] .icon-play{display:none}
.fcarousel-playpause[aria-pressed="true"] .icon-pause{display:block}

/* ---------- lightbox galleria prodotto ----------
   Stesso pattern dell'overlay menu (.ov): background che anima da trasparente
   a scuro, con visibility/pointer-events ritardati sulla transizione così da
   0.35s per non intercettare click quando è chiuso. */
.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(10,12,10,0);
  visibility:hidden;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  transition:background .35s ease,visibility 0s linear .35s;
}
.lightbox.open{
  background:rgba(10,12,10,.94);visibility:visible;pointer-events:auto;
  transition:background .35s ease,visibility 0s linear 0s;
}
.lightbox-img{max-width:92vw;max-height:82vh;object-fit:contain;border:none}
.lightbox-close,.lightbox-arrow{
  position:absolute;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:calc(24 * var(--uf));line-height:1;transition:border-color .18s,background .18s;
}
.lightbox-close:hover,.lightbox-arrow:hover,
.lightbox-close:focus-visible,.lightbox-arrow:focus-visible{border-color:var(--green);background:rgba(255,255,255,.16)}
.lightbox-close:focus-visible,.lightbox-arrow:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.lightbox-close{top:24px;right:24px}
.lightbox-arrow--prev{left:24px;top:50%;transform:translateY(-50%)}
.lightbox-arrow--next{right:24px;top:50%;transform:translateY(-50%)}
.lightbox-count{position:absolute;left:0;right:0;bottom:24px;text-align:center;color:rgba(255,255,255,.7);font-size:calc(15 * var(--uf));letter-spacing:.08em}
@media(max-width:600px){
  .lightbox-arrow{width:38px;height:38px;font-size:calc(20 * var(--uf))}
  .lightbox-arrow--prev{left:10px}
  .lightbox-arrow--next{right:10px}
  .lightbox-close{top:14px;right:14px}
}
@media(prefers-reduced-motion:reduce){
  .lightbox{transition:none}
  .tl::after,.tlrow::before,.tl-num{transition:none}
}

/* ---------- timeline ---------- */
.tl{position:relative;margin-top:64px;--tl-progress:0}
.tl::before{content:"";position:absolute;left:11px;top:6px;bottom:0;width:1px;background:var(--line);z-index:0}
.tl::after{content:"";position:absolute;left:11px;top:6px;width:1px;height:calc(var(--tl-progress) * (100% - 6px));background:var(--green-deep);z-index:0;transition:height .1s linear}
.tlrow{display:grid;grid-template-columns:1fr 420px;gap:56px;padding-left:56px;position:relative;padding-bottom:78px;z-index:1}
.tlrow::before{content:"";position:absolute;left:5px;top:6px;width:13px;height:13px;border:1.5px solid var(--green);background:#fff;transition:background-color .25s ease,border-color .25s ease}
.tlrow.on::before{background:var(--green-deep);border-color:var(--green-deep)}
.tl-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.tl-num{background:var(--bg-soft);color:var(--green-deep);font-weight:600;font-size:calc(16 * var(--uf));padding:6px 12px;transition:background-color .25s ease,color .25s ease}
.tlrow.on .tl-num{background:var(--green-deep);color:#fff}
.tl-head h2{font-size:calc(18 * var(--uf));letter-spacing:.06em;text-transform:uppercase}
.det{margin-top:22px;border-top:1px solid var(--line)}
.det div{display:flex;justify-content:space-between;gap:26px;padding:9px 0;font-size:calc(16 * var(--uf))}
.det b{color:var(--green);font-weight:500;letter-spacing:.05em;text-transform:uppercase;font-size:calc(14.5 * var(--uf));white-space:nowrap}
.det span{color:var(--ink-soft);text-align:right}

/* ---------- tables & lists ---------- */
table{border-collapse:collapse;width:100%;margin-top:30px;font-size:calc(16.5 * var(--uf))}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:calc(14 * var(--uf));letter-spacing:.1em;text-transform:uppercase;color:var(--grey);font-weight:500}
td:first-child{font-weight:600;color:var(--ink)}
ul.tick-list{list-style:none;margin-top:24px}
ul.tick-list li{padding:13px 0 13px 28px;border-bottom:1px solid var(--line);position:relative;color:var(--ink-soft);font-size:calc(17 * var(--uf))}
ul.tick-list li::before{content:"";position:absolute;left:0;top:21px;width:9px;height:1.5px;background:var(--green)}

/* ---------- chain ---------- */
.chain{counter-reset:c;margin-top:46px}
.chainrow{display:grid;grid-template-columns:64px 1fr;gap:26px;padding-bottom:34px}
.chainrow::before{
  counter-increment:c;content:counter(c,decimal-leading-zero);
  font-size:calc(17 * var(--uf));font-weight:600;color:var(--green);
  border-top:2px solid var(--green);padding-top:10px;
}
.chainrow h3{font-size:calc(19 * var(--uf));margin-bottom:8px}
.chainrow p{font-size:calc(17 * var(--uf))}

/* ---------- case studies ---------- */
.case{border:1px solid var(--line);margin-top:34px;display:grid;grid-template-columns:1fr 1fr}
.case .ph,.case .media{border:none;border-right:1px solid var(--line);min-height:100%}
.case-body{padding:34px 36px}
.case-meta{font-size:calc(14.5 * var(--uf));letter-spacing:.09em;text-transform:uppercase;color:var(--grey);margin-bottom:14px}
.case-body h3{margin-bottom:18px}
.case-body h4{font-size:calc(14.5 * var(--uf));letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin:20px 0 6px}
.case-body p{font-size:calc(17 * var(--uf))}
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px;margin-top:34px}
.logos .ph,.logos .media{aspect-ratio:2/1;background:#fff;border:1px solid var(--line)}
.logos .media img{object-fit:contain;padding:16px}

/* ---------- boxes ---------- */
.box-quote{margin-top:26px;background:var(--bg-soft);padding:24px;border-left:3px solid var(--green)}
.box-label{font-size:calc(17 * var(--uf));letter-spacing:.06em;text-transform:uppercase;color:var(--green);font-weight:600}
.box-quote p,.box-plain p{font-size:calc(17 * var(--uf));margin-top:8px}
.box-plain{margin-top:26px}

/* ---------- form ---------- */
.form{background:var(--bg-soft);padding:40px;border:1px solid var(--line);scroll-margin-top:calc(max(74px, calc(74 * var(--uf))) + var(--hd-utility-h) + 16px)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:calc(14 * var(--uf));letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.fld input,.fld select,.fld textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);background:#fff;
  font:inherit;font-size:calc(17 * var(--uf));border-radius:2px;
}
.fld textarea{min-height:120px;resize:vertical}
.fld--file input{padding:10px;background:#fff}
.consent{display:flex;gap:10px;font-size:calc(15 * var(--uf));color:var(--ink-soft);margin-bottom:22px;align-items:flex-start}
.consent input{width:auto;margin-top:4px}
.hp{position:absolute;left:-9999px}
.msg{padding:16px 20px;margin-bottom:24px;border-left:3px solid;font-size:calc(17 * var(--uf))}
.msg--ok{background:#EDF7F0;border-color:var(--green);color:var(--green-ink)}
.msg--ko{background:#FDF0EE;border-color:#C0392B;color:#8E2A1F}

/* ---------- contact data ---------- */
.cdata dt{font-size:calc(14 * var(--uf));letter-spacing:.09em;text-transform:uppercase;color:var(--grey);margin-top:22px}
.cdata dd{font-size:calc(18 * var(--uf));margin-top:4px}

/* ---------- CTA band ---------- */
.ctaband{background:var(--ink);color:#fff;padding:74px 0}
.ctaband h2{max-width:20ch}
.ctaband p{color:rgba(255,255,255,.75);margin-top:16px}
.ctaband .actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- page head ---------- */
.pagehead{padding:74px 0 0;background:var(--bg-grey)}
.pagehead h1{color:var(--green-deep); position:relative; z-index:2}
.pagehead .wrap{padding-bottom:74px}
.back{font-size:calc(15.5 * var(--uf));color:var(--green);font-weight:500;margin-bottom:18px;display:inline-block}

/* Scheda prodotto: immagine in evidenza in sovraimpressione, ancorata a destra della finestra,
   tra il fondo del titolo e il bianco del body sottostante. */
.pagehead--product{position:relative}
.pagehead-product-title{font-size:clamp(calc(32 * var(--uf)),4vw,calc(48 * var(--uf)));overflow-wrap:break-word}
@media(min-width:1681px){
  .pagehead-product-title{font-size:clamp(calc(50 * var(--uf)),7.5vw,calc(94 * var(--uf)))}
  /* Variante con immagine a destra: il titolo sta in una colonna larga
     100vw - 52vw (immagine) - margine sinistro del .wrap - 48px, cioè
     560px - 2vw finché l'immagine non raggiunge il suo massimo (1250px),
     poi 50vw - 690px. Il corpo segue quella colonna (/7.2: "Calandratura"
     è ~6,8 volte il corpo) così nessuna parola va a capo o esce dalla colonna. */
  .pagehead--product:not(.pagehead--product-bg) .pagehead-product-title{
    font-size:min(calc(94 * var(--uf)), max(calc((560px - 2vw) / 7.2), calc((50vw - 690px) / 7.2)), max(30px, 7.5vh));
  }
}
/* Stessa variante sotto i 1680px: il corpo è limitato anche dall'altezza della
   finestra (7.5vh), così su schermi bassi il blocco titolo non spinge il
   contenuto sotto la piega (vedi --pm-* più sotto). */
@media(min-width:901px) and (max-width:1680px){
  .pagehead--product:not(.pagehead--product-bg) .pagehead-product-title{
    font-size:min(clamp(calc(32 * var(--uf)),4vw,calc(48 * var(--uf))), max(calc(30 * var(--uf)), 7.5vh));
  }
}
.pagehead-media{position:relative;z-index:1;pointer-events:none}
.pagehead-media .media,.pagehead-media .ph{margin:0}
/* Le foto di questa variante sono scontornate (PNG) e composte per uscire
   dall'angolo in alto a destra: si mostrano intere, nelle loro proporzioni,
   senza riquadro forzato (niente ritagli né bande vuote). */
.pagehead-media .media{aspect-ratio:auto}
.pagehead-media .media img{display:block;height:auto;max-height:calc(100vh - 120px);object-fit:contain;object-position:right top}

/* Desktop: griglia a due colonne, testo a sinistra e immagine a destra.
   Le colonne sono separate, quindi immagine e titolo non possono sovrapporsi
   con nessuna lunghezza di titolo né dimensione di schermo.
   L'immagine parte dal bordo alto della testata ed è attaccata al bordo destro
   della finestra; il testo è centrato in verticale sulla fascia grigia.
   --pm-w  larghezza immagine: 60vw fino a 1680px (titolo piccolo), 52vw oltre
           (titolo grande); limitata anche dall'altezza della finestra così su
           schermi larghi e bassi non diventa sproporzionata.
   --pm-bleed  quanto l'immagine sborda sul bianco della sezione successiva:
           quella sezione ha padding-top = sborda + --pm-gap, così tra la foto
           e il testo resta sempre lo stesso spazio (56–96px), qualunque sia
           il padding generico di .sec.
   Contenuto visibile al caricamento: il testo della sezione sotto deve
   iniziare entro la prima schermata, lasciando --pm-peek px visibili.
   Inizio testo = header + altezza foto + --pm-gap (la sborda è già dentro la
   foto), quindi l'altezza foto è limitata a
   100vh - header - --pm-gap - --pm-peek. Se invece è il blocco titolo a
   essere più alto (schermi molto bassi), lo tengono basso --pm-pad e il
   corpo del titolo limitato a 7.5vh. */
@media(min-width:901px){
  .single-kikai_prodotto{
    --pm-hdr:calc(var(--hd-utility-h) + max(75px, 75 * var(--uf)));
    --pm-gap:clamp(56px, 5vw, 96px);
    --pm-peek:90px;
    --pm-pad:clamp(28px, 6vh, 74px);
    --pm-hmax:max(214px, calc(100vh - var(--pm-hdr) - var(--pm-gap) - var(--pm-peek)));
    --pm-w:min(60vw, calc(var(--pm-hmax) * 1.5));
    --pm-bleed:min(140px, calc(var(--pm-w) * .12));
  }
  .pagehead.pagehead--product:not(.pagehead--product-bg){
    display:grid;
    grid-template-columns:minmax(0,1fr) var(--pm-w);
    padding-top:0;
  }
  .pagehead--product:not(.pagehead--product-bg) .wrap{
    grid-column:1;grid-row:1;align-self:center;
    max-width:none;margin:0;
    padding-left:max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
    padding-right:48px;
    padding-top:var(--pm-pad);
    padding-bottom:var(--pm-pad);
  }
  .pagehead-media{grid-column:2;grid-row:1;align-self:start;margin-bottom:calc(var(--pm-bleed) * -1)}
  /* Limite di altezza anche per foto non 3:2 (verticali, 4:3) e segnaposto. */
  .pagehead-media .media img,.pagehead-media .ph{max-height:var(--pm-hmax)}
  .pagehead--product:not(.pagehead--product-bg) + .sec{padding-top:calc(var(--pm-bleed) + var(--pm-gap))}
}
@media(min-width:1681px){
  .single-kikai_prodotto{--pm-w:min(52vw, 1250px, calc(var(--pm-hmax) * 1.5))}
}
.js .pagehead-media{
  opacity:0;transform:translateY(36px) scale(.97);
  transition:opacity .9s ease .2s,transform .9s cubic-bezier(.22,1,.36,1) .2s;
}
.js body.kikai-loaded .pagehead-media{opacity:1;transform:translateY(0) scale(1)}

/* Scheda prodotto, variante "sfondo": la foto diventa sfondo a piena larghezza
   della testata (come l'hero della home), con velo scuro e testo chiaro sopra —
   per le foto che non si prestano al ritaglio in sovraimpressione. */
.pagehead--product-bg{overflow:hidden}
/* Alta il 70% dello schermo, ma mai tanto da nascondere l'inizio del
   contenuto sotto: header + testata + padding .sec + 90px visibili ≤ 100vh. */
.pagehead.pagehead--product-bg{padding-top:0;min-height:min(70vh, calc(100vh - var(--hd-utility-h) - max(75px, 75 * var(--uf)) - var(--sec-pad) - 90px));display:flex;align-items:center}
.pagehead--product-bg .wrap{padding-bottom:0}
.pagehead--product-bg .pagehead-text,
.pagehead--product-bg h1{color:#fff;position:relative;z-index:2}
.pagehead--product-bg .back{color:#fff}
.pagehead-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
/* Gradiente verso il basso (come l'hero home) + un velo piatto al 15% su
   tutta l'immagine, per far risaltare il titolo anche quando è centrato
   verticalmente in zone meno coperte dal gradiente. */
.pagehead-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgb(0,0,0) 0%,rgba(255,255,255,0) 50%),rgba(0,0,0,.15);z-index:1}

/* ---------- footer ---------- */
.site-footer{background:#151915;color:rgba(255,255,255,.62);padding:66px 0 30px;font-size:calc(16 * var(--uf))}
.fgrid4{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px}
.site-footer .f-title{color:#fff;font-size:calc(14 * var(--uf));line-height:1.15;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;font-weight:500;max-width:none}
.site-footer ul{list-style:none}
.site-footer a{display:block;padding:5px 0;color:rgba(255,255,255,.62)}
.site-footer a:hover{color:#fff}
.site-footer .f-ico{display:flex;align-items:flex-start;gap:12px;padding:5px 0}
.site-footer .f-ico .material-symbols-outlined{font-size:22px;color:var(--green);flex:0 0 auto;margin-top:4px}
.site-footer .f-ico small{display:block;font-size:calc(14 * var(--uf));font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:2px}
.site-footer p{color:rgba(255,255,255,.55);font-size:calc(16 * var(--uf));max-width:34ch}
.fbot{border-top:1px solid rgba(255,255,255,.12);margin-top:52px;padding-top:24px;font-size:calc(14.5 * var(--uf));color:rgba(255,255,255,.4)}
.fbot a{display:inline}
@media(max-width:900px){
  :root{--gut:20px}
  .sec{padding:64px 0}
  .grid2,.steps,.tlrow,.case,.fgrid4,.frow,.storia-grid{grid-template-columns:1fr;gap:32px}
  .statgrid{grid-template-columns:1fr}
  .statgrid .stat{border-right:none;padding:24px 20px}
  .statgrid .stat:nth-child(n+3){border-bottom:1px solid var(--line)}
  .statgrid .stat:last-child{border-bottom:none}
  .valori-copy ul{grid-template-columns:1fr;gap:18px}
  .storia-grid{padding-left:var(--gut);padding-right:var(--gut)}
  .storia-text{padding-right:0}
  .storia-media .r43{aspect-ratio:4/3;height:auto}
  .hd-nav,.hd-utility{display:none}
  .mark{width:26px;height:26px;border-width:3px}
  .logo b{font-size:calc(21 * var(--uf))}
  .logo img{max-height:32px}
  .hd-payoff-mobile{display:block;max-width:120px}
  .burger{display:block}
  .step{border-right:none;border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:none}
  .tlrow{padding-bottom:52px}
  .case .ph,.case .media{border-right:none;border-bottom:1px solid var(--line);aspect-ratio:16/9;min-height:0}
  .ov-panel{padding:28px 24px}
  .ov nav{text-align:left}
  .ov-foot{justify-content:flex-start;gap:18px}
  .hd .btn{display:none}
  .hero{height:100vh;min-height:480px;display:flex;flex-direction:column}
  .hero .media{position:absolute;inset:0;height:100%}
  .hero .media.r21{aspect-ratio:auto}
  .hero-copy{position:relative;z-index:1;flex:1 1 auto}
  .hero .claims{position:relative;z-index:1;flex:0 0 auto;background:#fff;border-bottom:1px solid var(--line)}
  .hero .claims li{color:var(--ink)}
  .hero .claims ul{justify-content:flex-start;gap:16px 28px;padding:20px 0}
  .hero .hero-scrim{background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.2) 100%)}
  /* Hero "di pagina" (es. Azienda): foto + titolo/estratto senza video né
     claims — a differenza della hero della home non deve occupare tutto lo
     schermo, ma dimensionarsi sulla foto, con il testo sovrapposto come nel
     desktop invece di centrarsi in uno spazio vuoto alto quanto il viewport. */
  .hero--page{height:auto;min-height:0;display:block}
  .hero--page .media{position:relative;inset:auto;height:auto}
  .hero--page .media.r21{aspect-ratio:4/5}
  .hero--page .hero-copy{position:absolute;inset:0;flex:none}
  .ctaband .actions{justify-content:flex-start}
  .pagehead--product .wrap{padding-bottom:0}
  .pagehead-media{margin-top:28px}
  .pagehead--product-bg .wrap{padding-bottom:54px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}