/* =====================================================
   CONI NORGE — sito ufficiale
   Design system basato sul Brand Manual 2026
   ===================================================== */

:root{
  /* palette istituzionale */
  --red:#ed2127;
  --red-deep:#91181a;
  --olive:#949311;
  --ochre:#eea52c;
  --azure:#25aae1;
  --green:#297366;
  --lilac:#a58bba;
  --gold-1:#a87f2b;
  --gold-2:#f2dc9d;
  --gold-3:#c9a24a;

  /* neutri */
  --ink:#151110;
  --ink-soft:#3d3634;
  --paper:#fcfaf6;
  --cream:#f4eee3;
  --cream-2:#ece3d4;
  --wafer:#d8b98d;
  --line:rgba(21,17,16,.12);

  /* tipografia */
  --f-display:"Bodoni Moda", "Playfair Display", Georgia, serif;
  --f-edit:"Cardo", Georgia, serif;
  --f-ui:"Poppins", "Helvetica Neue", Arial, sans-serif;

  /* misure */
  --pad:clamp(20px,5vw,90px);
  --maxw:1560px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --nav-h:78px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-ui); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
::selection{background:var(--red); color:#fff}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--cream)}
::-webkit-scrollbar-thumb{background:var(--red); border-radius:9px}

/* ---------- tipografia ---------- */
.display{
  font-family:var(--f-display); font-weight:800; line-height:.98;
  letter-spacing:-.015em;
}
h1,h2,h3,h4{margin:0; font-weight:700}
.h-xl{font-size:clamp(2.8rem,9vw,9.2rem)}
.h-lg{font-size:clamp(2.2rem,5.6vw,5.2rem)}
.h-md{font-size:clamp(2rem,4.4vw,3.9rem)}
.h-sm{font-size:clamp(1.35rem,2.3vw,2.1rem)}
.eyebrow{
  font-family:var(--f-ui); font-size:.72rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--red);
  display:flex; align-items:center; gap:.8em;
}
.eyebrow::before{content:""; width:34px; height:1px; background:currentColor; flex:none}
.eyebrow.center{justify-content:center}
.lead{font-size:clamp(1.05rem,1.5vw,1.35rem); line-height:1.65; color:var(--ink-soft)}
.quote{font-family:var(--f-edit); font-style:italic; line-height:1.35}
.mono{font-family:var(--f-ui); font-variant-numeric:tabular-nums; letter-spacing:.04em}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:clamp(72px,11vw,170px); position:relative}
.grid{display:grid; gap:clamp(24px,3vw,56px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.rule{height:1px; background:var(--line); border:0; margin:0}
.bg-cream{background:var(--cream)}
.bg-red{background:var(--red); color:#fff}
.bg-ink{background:var(--ink); color:var(--paper)}
.bg-red .eyebrow,.bg-ink .eyebrow{color:currentColor}
.bg-red .lead,.bg-ink .lead{color:rgba(255,255,255,.82)}

/* ---------- cursore ---------- */
.cursor{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:12px; height:12px; border-radius:50%; background:var(--red);
  transform:translate(-50%,-50%); mix-blend-mode:normal;
  transition:width .35s var(--ease),height .35s var(--ease),background .3s;
}
.cursor__label{
  position:absolute; inset:0; display:grid; place-items:center; color:#fff;
  font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; transition:opacity .25s; white-space:nowrap;
}
.cursor.is-big{width:86px; height:86px}
.cursor.is-big .cursor__label{opacity:1}
.cursor.is-light{background:#fff}
.cursor.is-light .cursor__label{color:var(--red)}
@media (hover:none),(max-width:900px){.cursor{display:none}}

/* ---------- preloader ---------- */
.loader{
  position:fixed; inset:0; z-index:9000; background:var(--red);
  display:grid; place-items:center; transition:transform 1s var(--ease-io);
}
.loader__inner{text-align:center; color:#fff}
.loader__logo{width:min(48vw,320px); margin-inline:auto; opacity:0; transform:translateY(18px)}
.loader__bar{width:min(60vw,300px); height:2px; background:rgba(255,255,255,.28); margin:26px auto 12px; overflow:hidden}
.loader__bar i{display:block; height:100%; width:0; background:#fff}
.loader__num{font-family:var(--f-edit); font-size:.9rem; letter-spacing:.3em}
body.loaded .loader{transform:translateY(-101%)}

/* ---------- tendina transizione ---------- */
.curtain{position:fixed; inset:0; z-index:8000; background:var(--red); transform:translateY(101%); pointer-events:none}
.curtain.in{animation:curtIn .62s var(--ease-io) forwards}
.curtain.out{animation:curtOut .62s var(--ease-io) forwards}
@keyframes curtIn{from{transform:translateY(101%)}to{transform:translateY(0)}}
@keyframes curtOut{from{transform:translateY(0)}to{transform:translateY(-101%)}}

/* ---------- header ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:600; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--pad); transition:transform .5s var(--ease),background .4s,box-shadow .4s;
  mix-blend-mode:normal;
}
.nav.solid{background:rgba(252,250,246,.92); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line)}
.nav__logo img{height:34px; width:auto; transition:opacity .3s}
.nav__logo .on-dark{display:none}
.nav.on-dark .nav__logo .on-light{display:none}
.nav.on-dark .nav__logo .on-dark{display:block}
.nav.on-dark{color:#fff}
.nav__menu{display:flex; gap:clamp(18px,2.4vw,40px); align-items:center}
.nav__link{
  position:relative; font-size:.78rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; padding-block:6px;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__link:hover::after,.nav__link.active::after{transform:scaleX(1); transform-origin:left}
.nav__link.active{color:var(--red)}
.nav.on-dark .nav__link.active{color:#fff}
.nav__right{display:flex; align-items:center; gap:18px}
.lang{display:flex; align-items:center; gap:4px; font-size:.72rem; font-weight:600; letter-spacing:.1em}
.lang button{opacity:.42; transition:opacity .25s}
.lang button.on{opacity:1; color:var(--red)}
.nav.on-dark .lang button.on{color:#fff}
.lang span{opacity:.3}
.burger{display:none; width:34px; height:16px; position:relative}
.burger i{position:absolute; left:0; right:0; height:2px; background:currentColor; transition:transform .45s var(--ease),opacity .3s}
.burger i:first-child{top:0} .burger i:last-child{bottom:0}
body.menu-open .burger i:first-child{transform:translateY(7px) rotate(45deg)}
body.menu-open .burger i:last-child{transform:translateY(-7px) rotate(-45deg)}

.menu{
  position:fixed; inset:0; z-index:590; background:var(--red); color:#fff;
  display:flex; flex-direction:column; justify-content:center; padding:var(--pad);
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease-io); pointer-events:none;
}
body.menu-open .menu{clip-path:inset(0 0 0 0); pointer-events:auto}
.menu a{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.4rem,8vw,6rem); line-height:1.08; display:block;
  opacity:0; transform:translateY(40px); transition:all .7s var(--ease);
}
body.menu-open .menu a{opacity:1; transform:none}
.menu a:hover{font-style:italic}
.menu__meta{margin-top:44px; display:flex; gap:36px; flex-wrap:wrap; font-size:.8rem; letter-spacing:.1em; opacity:.85}

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex; align-items:center; gap:14px; padding:16px 30px;
  border:1px solid currentColor; border-radius:999px; font-size:.76rem;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  position:relative; overflow:hidden; isolation:isolate;
}
.btn span{position:relative; z-index:2; transition:color .45s var(--ease)}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--red); z-index:1;
  transform:translateY(101%); transition:transform .55s var(--ease-io);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover span{color:#fff}
.btn--fill{background:var(--red); color:#fff; border-color:var(--red)}
.btn--fill::before{background:var(--ink)}
.btn--light{color:#fff}
.btn--light::before{background:#fff}
.btn--light:hover span{color:var(--red)}
.btn i{width:18px; height:1px; background:currentColor; position:relative; z-index:2; transition:width .4s}
.btn:hover i{width:30px}

/* ---------- reveal ---------- */
[data-rv]{opacity:0; will-change:transform,opacity}
[data-rv="up"]{transform:translateY(46px)}
[data-rv="fade"]{transform:none}
[data-rv="left"]{transform:translateX(-46px)}
[data-rv="right"]{transform:translateX(46px)}
[data-rv="scale"]{transform:scale(.94)}
[data-rv].in{opacity:1; transform:none; transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.mask{overflow:hidden; display:block}
.mask>span{display:block; padding-bottom:.16em; margin-bottom:-.16em; transform:translateY(110%); transition:transform 1.05s var(--ease)}
.mask.in>span{transform:none}
.img-mask{overflow:hidden; position:relative}
.img-mask img{transform:scale(1.22); transition:transform 1.5s var(--ease)}
.img-mask::after{
  content:""; position:absolute; inset:0; background:var(--cream);
  transform-origin:bottom; transition:transform 1.1s var(--ease-io);
}
.img-mask.in img{transform:scale(1)}
.img-mask.in::after{transform:scaleY(0)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden; white-space:nowrap; display:flex; user-select:none}
.marquee__row{display:flex; flex:none; align-items:center; gap:.6em; padding-right:.6em; animation:mq 26s linear infinite}
.marquee.rev .marquee__row{animation-direction:reverse}
.marquee__row>*{flex:none}
@keyframes mq{to{transform:translateX(-100%)}}
.mq-word{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.4rem,7vw,7rem); line-height:1.05;
}
.mq-word.out{-webkit-text-stroke:1.4px currentColor; color:transparent}
.mq-dot{width:.22em; height:.22em; border-radius:50%; background:currentColor; display:inline-block}
.mq-sm .mq-word{font-size:clamp(.9rem,1.3vw,1.15rem); letter-spacing:.2em; font-family:var(--f-ui); font-weight:600; text-transform:uppercase}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--red); color:#fff}
.hero__bg{position:absolute; inset:0; z-index:0}
.hero__bg img{width:100%; height:120%; object-fit:cover; opacity:.4; filter:saturate(.6) contrast(1.05)}
.hero__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(237,33,39,.55) 0%,rgba(237,33,39,.2) 45%,rgba(145,24,26,.85) 100%)}
.hero__inner{position:relative; z-index:2; width:100%; padding:calc(var(--nav-h) + 40px) var(--pad) clamp(56px,6vw,86px); max-width:var(--maxw); margin-inline:auto}
.hero__kicker{display:flex; align-items:center; gap:16px; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; margin-bottom:clamp(18px,4vw,42px)}
.hero__kicker span{opacity:.85}
.hero__title{font-family:var(--f-display); font-weight:800; line-height:.98; font-size:clamp(2.25rem,7.2vw,7.4rem); letter-spacing:-.02em}
.hero__title em{font-style:italic; font-family:var(--f-edit); font-weight:400; text-transform:none; letter-spacing:-.01em}
.hero__foot{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-top:clamp(26px,4vw,54px); flex-wrap:wrap}
.hero__claim{max-width:44ch; font-size:clamp(.95rem,1.2vw,1.12rem); line-height:1.6; opacity:.92}
.scroll-hint{position:absolute; left:var(--pad); bottom:26px; z-index:3; display:flex; align-items:center; gap:12px; font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; opacity:.8}
.scroll-hint i{display:block; width:1px; height:42px; background:currentColor; position:relative; overflow:hidden}
.scroll-hint i::after{content:""; position:absolute; inset:0; background:#fff; animation:sh 1.9s var(--ease-io) infinite}
@keyframes sh{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- numeri ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line)}
.stat{background:var(--paper); padding:clamp(26px,3.4vw,54px) clamp(18px,2vw,34px)}
.bg-red .stat{background:var(--red)}
.bg-ink .stat{background:var(--ink)}
.stat__n{font-family:var(--f-display); font-weight:800; font-size:clamp(2.4rem,5vw,4.6rem); line-height:1; letter-spacing:-.03em}
.stat__l{margin-top:10px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; opacity:.7}

/* ---------- card categorie ---------- */
.cats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line)}
.cat{
  position:relative; background:var(--paper); padding:clamp(26px,3vw,44px);
  min-height:clamp(282px,21vw,352px); display:flex; flex-direction:column;
  justify-content:space-between; overflow:hidden; isolation:isolate;
}
.cat__body{position:relative}
.cat::before{content:""; position:absolute; inset:0; background:var(--red); transform:translateY(100%); transition:transform .7s var(--ease-io); z-index:-3}
.cat:hover::before{transform:translateY(0)}
.cat:hover{color:#fff}
.cat__img{position:absolute; right:5%; top:11%; width:46%; max-height:50%; object-fit:contain; object-position:top right; opacity:.95; transition:transform .8s var(--ease); z-index:-1}
.cat:hover .cat__img{transform:translateY(-14px) scale(1.06) rotate(-4deg)}
.cat__n{font-size:.7rem; letter-spacing:.2em; opacity:.5}
.cat__t{font-family:var(--f-display); font-weight:800; font-size:clamp(1.35rem,2vw,2rem); line-height:1.05; display:block; max-width:12ch}
.cat__c{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; opacity:.6}

/* ---------- galleria orizzontale ---------- */
.hscroll{position:relative}
.hscroll__sticky{position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden}
.hscroll__track{display:flex; gap:clamp(18px,2.4vw,44px); padding-inline:var(--pad); will-change:transform}
.hcard{flex:none; width:clamp(250px,26vw,420px)}
.hcard figure{margin:0; overflow:hidden; background:var(--cream); aspect-ratio:3/4}
.hcard img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.hcard:hover img{transform:scale(1.06)}
.hcard figcaption{margin-top:14px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; opacity:.62}

/* ---------- timeline storia ---------- */
.tl{position:relative}
.tl__line{position:absolute; left:calc(var(--pad) + 6px); top:0; bottom:0; width:1px; background:var(--line)}
.tl__line i{position:absolute; top:0; left:0; width:100%; height:0; background:var(--red)}
.tl__item{position:relative; padding-left:clamp(46px,7vw,120px); padding-block:clamp(34px,5vw,70px)}
.tl__dot{position:absolute; left:0; top:calc(clamp(34px,5vw,70px) + 10px); width:13px; height:13px; border-radius:50%; border:1px solid var(--red); background:var(--paper); transition:background .5s}
.tl__item.in .tl__dot{background:var(--red)}
.tl__y{font-family:var(--f-display); font-weight:800; font-size:clamp(2.6rem,7vw,6.4rem); line-height:.9; color:var(--red); letter-spacing:-.03em}
.tl__t{margin:12px 0 10px; font-size:clamp(1.15rem,1.9vw,1.6rem); font-weight:600}
.tl__b{max-width:62ch; color:var(--ink-soft)}
.tl__media{margin-top:26px; max-width:min(520px,100%); overflow:hidden}

/* ---------- split editoriale ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,90px); align-items:center}
.split--wide{grid-template-columns:.9fr 1.1fr}
.split figure{margin:0; overflow:hidden}
.split img{width:100%}
.stick{position:sticky; top:calc(var(--nav-h) + 30px)}

/* ---------- valori / pillars ---------- */
.pill{position:relative; border-top:1px solid var(--line); padding-block:clamp(24px,3vw,44px); display:grid; grid-template-columns:80px 1fr 1fr; gap:clamp(16px,3vw,50px); align-items:start}
.pill::after{content:""; position:absolute; left:0; top:-1px; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease)}
.pill:hover::after{transform:scaleX(1)}
.pill__n,.pill__t,.pill__b{transition:transform 1.2s var(--ease), opacity .8s var(--ease)}
.pill:hover .pill__n{transform:translateX(6px)}
.pill:hover .pill__t{transform:translateX(12px)}
.pill:hover .pill__b{transform:translateX(7px)}
.pill__n{font-family:var(--f-edit); color:var(--red); font-size:1rem; letter-spacing:.1em}
.pill__t{font-size:clamp(1.3rem,2.4vw,2rem); font-weight:600; line-height:1.15}
.pill__b{color:var(--ink-soft)}
.bg-red .pill,.bg-ink .pill{border-color:rgba(255,255,255,.18)}
.bg-red .pill__n{color:#fff; opacity:.6}
.bg-red .pill__b{color:rgba(255,255,255,.8)}

/* ---------- certificazioni ---------- */
.certs{display:flex; flex-wrap:wrap; gap:12px}
.cert{border:1px solid var(--line); border-radius:999px; padding:11px 22px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase}
.bg-red .cert,.bg-ink .cert{border-color:rgba(255,255,255,.3)}

/* ---------- prodotti: barra filtri ---------- */
.pbar{position:sticky; top:var(--nav-h); z-index:400; background:rgba(252,250,246,.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.pbar__in{display:flex; align-items:center; gap:18px; padding:14px var(--pad); flex-wrap:wrap}
.chips{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; flex:1 1 auto; flex-wrap:wrap}
@media (max-width:900px){.chips{flex-wrap:nowrap}}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none; border:1px solid var(--line); border-radius:999px; padding:9px 18px;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  transition:all .35s var(--ease);
}
.chip:hover{border-color:var(--red); color:var(--red)}
.chip.on{background:var(--red); border-color:var(--red); color:#fff}
.psearch{position:relative; flex:none}
.psearch input{
  border:1px solid var(--line); border-radius:999px; padding:10px 18px 10px 40px;
  font-family:var(--f-ui); font-size:.8rem; width:210px; background:transparent; outline:none;
  transition:border-color .3s,width .4s var(--ease);
}
.psearch input:focus{border-color:var(--red); width:250px}
.psearch svg{position:absolute; left:15px; top:50%; transform:translateY(-50%); opacity:.4}
.pcount{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; opacity:.55; flex:none}

/* ---------- prodotti: griglia ---------- */
.pgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line)}
@media (max-width:1699px){.pgrid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1299px){.pgrid{grid-template-columns:repeat(3,1fr)}}
.pcard{
  position:relative; background:var(--paper); padding:26px 22px 22px;
  display:flex; flex-direction:column; overflow:hidden; isolation:isolate;
  min-height:440px; text-align:left; transition:background .5s var(--ease);
}
.pcard::before{content:""; position:absolute; inset:0; background:var(--red); transform:translateY(100.5%); transition:transform .6s var(--ease-io); z-index:-1}
.pcard:hover::before{transform:translateY(0)}
.pcard:hover{color:#fff}
.pcard__code{font-size:.66rem; letter-spacing:.16em; opacity:.45}
.pcard__media{flex:1; display:grid; place-items:center; padding:20px 0; min-height:200px}
.pcard__t{margin-top:auto}
.pcard__media img{max-height:252px; width:auto; object-fit:contain; transition:transform .7s var(--ease); filter:drop-shadow(0 14px 22px rgba(0,0,0,.14))}
.pcard:hover .pcard__media img{transform:translateY(-8px) scale(1.05)}
.pcard__t{font-size:1rem; font-weight:600; line-height:1.25}
.pcard__s{font-size:.74rem; opacity:.6; margin-top:3px}
.pcard__specs{display:flex; gap:14px; margin-top:12px; font-size:.7rem; letter-spacing:.06em; opacity:.72; flex-wrap:wrap}
.pcard__specs b{font-weight:600}
.pcard__tag{position:absolute; top:20px; right:20px; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; border:1px solid currentColor; border-radius:999px; padding:4px 9px; opacity:.5}
.pcard__tag.new{background:var(--red); border-color:var(--red); color:#fff; opacity:1}
.pcard:hover .pcard__tag.new{background:#fff; color:var(--red); border-color:#fff}
.pempty{padding:80px var(--pad); text-align:center; opacity:.6}

/* ---------- prodotti: dettaglio ---------- */
.pdrawer{position:fixed; inset:0; z-index:700; pointer-events:none}
.pdrawer__bg{position:absolute; inset:0; background:rgba(21,17,16,.55); opacity:0; transition:opacity .5s; backdrop-filter:blur(3px)}
.pdrawer__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(560px,100%);
  background:var(--paper); transform:translateX(101%); transition:transform .7s var(--ease-io);
  display:flex; flex-direction:column; overflow:auto;
}
.pdrawer.open{pointer-events:auto}
.pdrawer.open .pdrawer__bg{opacity:1}
.pdrawer.open .pdrawer__panel{transform:none}
.pdrawer__close{position:absolute; top:20px; right:22px; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; z-index:3; transition:all .35s}
.pdrawer__close:hover{background:var(--red); border-color:var(--red); color:#fff; transform:rotate(90deg)}
.pdrawer__hero{background:var(--cream); display:grid; place-items:center; padding:60px 40px 40px; min-height:44vh}
.pdrawer__hero img{max-height:38vh; width:auto; filter:drop-shadow(0 24px 34px rgba(0,0,0,.18))}
.pdrawer__body{padding:34px clamp(24px,4vw,44px) 60px}
.pdrawer__cat{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--red)}
.pdrawer__t{font-family:var(--f-display); font-weight:800; font-size:clamp(1.8rem,3.4vw,2.9rem); line-height:1.05; margin:10px 0 6px}
.pdrawer__s{opacity:.65; font-size:.95rem}
.spec{display:grid; grid-template-columns:1fr auto; gap:10px; padding:15px 0; border-bottom:1px solid var(--line); font-size:.86rem}
.spec dt{opacity:.55; letter-spacing:.06em}
.spec dd{margin:0; font-weight:600; font-variant-numeric:tabular-nums}
.spec-list{margin:26px 0 0}
.pnote{margin-top:24px; font-size:.78rem; line-height:1.6; opacity:.6; border-left:2px solid var(--red); padding-left:14px}

/* ---------- contatti ---------- */
.cinfo{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line)}
.cinfo>div{background:var(--paper); padding:clamp(24px,3vw,42px)}
.cinfo h4{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin-bottom:14px}
.cinfo p{margin:0 0 4px; line-height:1.7}
.big-link{font-family:var(--f-display); font-weight:800; font-size:clamp(1.6rem,4.4vw,3.4rem); line-height:1.15; display:inline-block; position:relative}
.big-link::after{content:""; position:absolute; left:0; bottom:.06em; height:2px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .55s var(--ease)}
.big-link:hover::after{transform:scaleX(1); transform-origin:left}

/* ---------- footer ---------- */
.foot{background:var(--red); color:#fff; padding-top:clamp(48px,6vw,96px); position:relative}
.foot__top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(24px,3vw,50px); padding-inline:var(--pad); padding-bottom:clamp(44px,5vw,80px)}
.foot__logo{width:min(60vw,230px); margin-bottom:22px}
.foot h5{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; opacity:.5; margin:0 0 16px; font-weight:500}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.foot li a{font-size:.9rem; opacity:.85; transition:opacity .3s,padding-left .3s}
.foot li a:hover{opacity:1; padding-left:6px; color:var(--gold-2)}
.foot__bar{border-top:1px solid rgba(255,255,255,.22); padding:22px var(--pad); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.72rem; opacity:.5; letter-spacing:.06em}
.foot__mq{border-block:1px solid rgba(255,255,255,.22); padding-block:16px; color:rgba(255,255,255,.5)}

/* ---------- utility ---------- */
.progress{position:fixed; top:0; left:0; height:2px; background:var(--red); z-index:700; width:0}
.rot{writing-mode:vertical-rl; text-orientation:mixed}
.dim-note{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; opacity:.5}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .foot__top{grid-template-columns:1fr 1fr}
  .split,.split--wide{grid-template-columns:1fr}
  .stick{position:static}
  .stats{grid-template-columns:repeat(2,1fr)}
  .pill{grid-template-columns:44px 1fr; }
  .pill__b{grid-column:2}
}
@media (max-width:860px){
  :root{--nav-h:64px}
  .nav__menu{display:none}
  .burger{display:block}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .hscroll{height:auto !important; padding-block:clamp(40px,8vw,70px)}
  .hscroll__sticky{height:auto; position:static; padding-block:20px}
  .hscroll__track{overflow-x:auto; transform:none !important; padding-bottom:16px}
  .pdrawer__panel{width:100%}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .pcard{min-height:300px; padding:18px 14px}
  .pcard__media img{max-height:130px}
  .foot__top{grid-template-columns:1fr}
}
@media (max-width:520px){
  .cats{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  [data-rv]{opacity:1 !important; transform:none !important}
  .mask>span{transform:none !important}
  .img-mask::after{display:none}
  .img-mask img{transform:none !important}
}

/* ---------- correzioni griglie: niente flash grigio prima del reveal ---------- */
.cats,.pgrid,.cinfo{background:var(--paper)}
.cat,.pcard,.cinfo>div{outline:.5px solid var(--line); outline-offset:0}
.pgrid{border-top:0}
.hcard--intro .h-md{font-size:clamp(1.4rem,2.2vw,2.1rem)}

/* ---------- rifiniture mobile ---------- */
@media (max-width:860px){
  .tl__item img{max-width:100%}
  .tl__y{font-size:clamp(2.2rem,14vw,4rem)}
  .tl__item{padding-left:34px}
  .quote{font-size:1rem !important}
  .hero__kicker{font-size:.6rem; letter-spacing:.2em; gap:10px}
  .hero__inner{padding-top:calc(var(--nav-h) + 24px)}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .pbar__in{padding-block:10px; gap:10px}
  .psearch,.psearch input{width:100%}
  .pcard__specs{gap:8px; font-size:.62rem}
  .pcard__t{font-size:.9rem}
}
@media (max-width:520px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .pcard{min-height:250px; padding:14px 10px}
  .pcard__media img{max-height:110px}
}

/* nessun elemento decorativo deve creare scroll orizzontale */
main,section,.wrap{max-width:100vw}
@media (max-width:860px){section>img[data-speed]{max-width:34vw}}

/* =====================================================
   HERO — tratti calligrafici animati + coni obliqui
   (riprende il pattern di copertina del catalogo)
   ===================================================== */
.hero__lines{position:absolute; inset:-12% -8%; z-index:1; pointer-events:none}
.hero__lines svg{width:100%; height:100%; display:block; overflow:visible}
.hero__lines .ln{fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round}
.ln-xl{stroke-width:30} .ln-l{stroke-width:20} .ln-m{stroke-width:9} .ln-s{stroke-width:3.5}
.hero__lines .g-drift{animation:heroDrift 26s ease-in-out infinite}
.hero__lines .g-drift-2{animation:heroDrift2 34s ease-in-out infinite}
.hero__lines .g-spin{animation:heroSpin 110s linear infinite}
.hero__lines .g-spin-r{animation:heroSpin 140s linear infinite reverse}
@keyframes heroDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(-28px,18px)}}
@keyframes heroDrift2{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,-14px)}}
@keyframes heroSpin{to{transform:rotate(360deg)}}
@keyframes heroDraw{to{stroke-dashoffset:0}}
@keyframes heroTravel{to{stroke-dashoffset:-1200}}
.hero__lines .draw{stroke-dasharray:3600; stroke-dashoffset:3600; animation:heroDraw 3.6s var(--ease-io) forwards}
.hero__lines .draw.d2{animation-delay:.3s}
.hero__lines .draw.d3{animation-delay:.6s}
.hero__lines .draw.d4{animation-delay:.9s}
.hero__lines .dashed{stroke-dasharray:120 90; animation:heroTravel 46s linear infinite}
.hero__lines .dashed.slow{stroke-dasharray:38 54; animation-duration:80s}

/* coni: mazzetto sulla destra — punte in comune, centrale dritto, laterali aperti */
.hero__bouquet{
  position:absolute; z-index:2; pointer-events:none;
  right:8%; top:19%; width:clamp(240px,29vw,490px); aspect-ratio:1/1.05;
}
.hero__bouquet>div{position:absolute; left:50%; bottom:0; transform-origin:50% 100%}
.hero__bouquet img{height:100%; width:auto; display:block; filter:drop-shadow(0 26px 42px rgba(0,0,0,.42))}
.bq-l{height:86%; z-index:1; animation:bqL 11s ease-in-out infinite}
.bq-c{height:100%; z-index:3; animation:bqC 9s ease-in-out infinite}
.bq-r{height:86%; z-index:2; animation:bqR 13s ease-in-out infinite}
@keyframes bqL{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(-26deg)}
  50%{transform:translateX(-50%) translateY(-10px) rotate(-21deg)}
}
@keyframes bqC{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(0deg)}
  50%{transform:translateX(-50%) translateY(-14px) rotate(2deg)}
}
@keyframes bqR{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(26deg)}
  50%{transform:translateX(-50%) translateY(-8px) rotate(21deg)}
}
.hero__inner{z-index:3}
.scroll-hint{z-index:4}

@media (max-width:860px){
  .hero__lines{inset:-4% -30%; opacity:.6}
  .ln-xl{stroke-width:16} .ln-l{stroke-width:11} .ln-m{stroke-width:5} .ln-s{stroke-width:2}
  .hero__bouquet{right:2%; top:15%; width:clamp(165px,49vw,265px)}
}
@media (prefers-reduced-motion:reduce){
  .hero__lines .g-drift,.hero__lines .g-drift-2,.hero__bouquet>div{animation:none !important}
  .hero__lines .draw{stroke-dashoffset:0}
  .bq-l{transform:translateX(-50%) rotate(-26deg)}
  .bq-c{transform:translateX(-50%)}
  .bq-r{transform:translateX(-50%) rotate(26deg)}
}

/* =====================================================
   BANNER DI PAGINA — still life dal catalogo + velatura rossa
   ===================================================== */
.phero{
  position:relative; overflow:hidden; color:#fff; background:var(--red-deep);
  padding:calc(var(--nav-h) + clamp(74px,10vw,140px)) 0 clamp(66px,9vw,130px);
}
.phero__bg{position:absolute; inset:-10% 0; z-index:0}
.phero__bg img{width:100%; height:100%; object-fit:cover; opacity:.6; filter:saturate(.8) contrast(1.02)}
.phero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(158deg,rgba(237,33,39,.86) 0%,rgba(237,33,39,.52) 46%,rgba(145,24,26,.92) 100%);
}
.phero__bg.deep::after{
  background:linear-gradient(158deg,rgba(145,24,26,.9) 0%,rgba(237,33,39,.6) 50%,rgba(21,17,16,.72) 100%);
}
.phero>.wrap{position:relative; z-index:3}
.phero .lead{color:rgba(255,255,255,.9)}
.phero .eyebrow{color:#fff}
/* tratti calligrafici dei banner di pagina: sempre da un bordo all'altro */
.phero__lines{position:absolute; inset:-14% -6%; z-index:1; pointer-events:none}
.phero__lines svg{width:100%; height:100%; display:block; overflow:visible}
.phero__lines .pn{fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round}
.phero__lines .draw{stroke-dasharray:4600; stroke-dashoffset:4600; animation:heroDraw 3.4s var(--ease-io) forwards}
.phero__lines .d2{animation-delay:.28s} .phero__lines .d3{animation-delay:.56s}
.phero__lines .ring{animation:heroSpin 120s linear infinite}
.phero__lines .ring-r{animation:heroSpin 150s linear infinite reverse}

/* una geometria, uno spessore e un respiro diversi per ogni pagina */
.pl1 .a{stroke-width:26} .pl1 .b{stroke-width:12} .pl1 .c{stroke-width:4}
.pl1 .g1{animation:phDriftA 30s ease-in-out infinite}
.pl1 .g2{animation:phDriftB 38s ease-in-out infinite}
.pl1 .draw{animation-duration:3.8s}

.pl2 .a{stroke-width:36} .pl2 .b{stroke-width:8} .pl2 .c{stroke-width:3}
.pl2 .g1{animation:phDriftC 24s ease-in-out infinite}
.pl2 .g2{animation:phDriftA 34s ease-in-out infinite}
.pl2 .draw{animation-duration:2.9s}

.pl3 .a{stroke-width:20} .pl3 .b{stroke-width:5} .pl3 .c{stroke-width:2.5}
.pl3 .g1{animation:phDriftB 42s ease-in-out infinite}
.pl3 .g2{animation:phDriftD 28s ease-in-out infinite}
.pl3 .draw{animation-duration:4.4s}

.pl4 .a{stroke-width:44} .pl4 .b{stroke-width:16} .pl4 .c{stroke-width:2}
.pl4 .g1{animation:phDriftD 34s ease-in-out infinite}
.pl4 .g2{animation:phDriftC 46s ease-in-out infinite}
.pl4 .draw{animation-duration:3.2s}

.pl5 .a{stroke-width:16} .pl5 .b{stroke-width:9} .pl5 .c{stroke-width:3.5}
.pl5 .g1{animation:phDriftA 26s ease-in-out infinite}
.pl5 .g2{animation:phDriftB 33s ease-in-out infinite}
.pl5 .draw{animation-duration:3.6s}

@keyframes phDriftA{0%,100%{transform:translate(0,0)}50%{transform:translate(-34px,20px)}}
@keyframes phDriftB{0%,100%{transform:translate(0,0)}50%{transform:translate(28px,-18px)}}
@keyframes phDriftC{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,-26px)}}
@keyframes phDriftD{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,14px)}}

@keyframes coneB{0%,100%{transform:rotate(15deg) translateY(0)}50%{transform:rotate(19deg) translateY(12px)}}
@keyframes coneC{0%,100%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-11px)}}
.phero__cone{position:absolute; z-index:2; pointer-events:none}
.phero__cone img{width:100%; filter:drop-shadow(0 24px 40px rgba(0,0,0,.4))}
.phero__cone.r1{width:clamp(78px,9vw,158px); top:19%; right:15%}
.phero__cone.r1 img{transform:rotate(15deg); animation:coneB 12s ease-in-out infinite}
.phero__cone.r2{width:clamp(64px,7.2vw,126px); top:50%; right:29%}
.phero__cone.r2 img{transform:rotate(-12deg); animation:coneC 14s ease-in-out infinite .5s}
@media (max-width:1100px){
  .phero__cone.r1{right:8%} .phero__cone.r2{right:24%}
}
@media (max-width:860px){
  .phero__lines{inset:-6% -26%; opacity:.7}
  .phero__cone.r2{display:none}
  .phero__cone.r1{top:6%; right:3%; width:clamp(58px,16vw,96px)}
}
@media (prefers-reduced-motion:reduce){
  .phero__lines .g1,.phero__lines .g2,.phero__lines .ring,.phero__lines .ring-r,
  .phero__cone img{animation:none !important}
  .phero__lines .draw{stroke-dashoffset:0}
  .phero__cone.r1 img{transform:rotate(15deg)} .phero__cone.r2 img{transform:rotate(-12deg)}
}

/* =====================================================
   TESSERE CATEGORIA — due tratti dorati, ritmo diverso per casella
   ===================================================== */
.cat__lines{position:absolute; inset:0; z-index:-2; pointer-events:none; opacity:0; transition:opacity .4s var(--ease)}
.cat__lines svg{width:100%; height:100%; display:block}
.cat__lines .cl{
  fill:none; stroke:#f2d489; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1700; stroke-dashoffset:1700;
  transition:stroke-dashoffset 1.15s var(--ease-io);
}
.cat__lines .cl.rev{stroke-dashoffset:-1700}
.cat:hover .cat__lines{opacity:1}
.cat:hover .cat__lines .cl{stroke-dashoffset:0}
.cat__lines .spin{animation:heroSpin 64s linear infinite; transform-origin:50% 50%}
.cat__lines .spin-r{animation:heroSpin 88s linear infinite reverse; transform-origin:50% 50%}

/* varianti di ritmo: ogni casella si disegna a modo suo */
.lv1 .cl{transition-duration:1.0s}                       .lv1 .cl2{transition-delay:.18s}
.lv2 .cl{transition-duration:1.45s}                      .lv2 .cl2{transition-delay:.3s; transition-duration:.9s}
.lv3 .cl{transition-duration:.8s}                        .lv3 .cl2{transition-delay:.12s; transition-duration:1.5s}
.lv4 .cl{transition-duration:1.7s; transition-timing-function:cubic-bezier(.65,0,.35,1)} .lv4 .cl2{transition-delay:.36s}
.lv5 .cl{transition-duration:1.15s; transition-timing-function:cubic-bezier(.16,1,.3,1)} .lv5 .cl2{transition-delay:.5s; transition-duration:.7s}
.lv6 .cl{transition-duration:1.3s}                       .lv6 .cl2{transition-delay:0s; transition-duration:1.3s}
.lv7 .cl{transition-duration:.95s; transition-timing-function:cubic-bezier(.34,1.2,.64,1)} .lv7 .cl2{transition-delay:.24s; transition-duration:1.6s}
.lv8 .cl{transition-duration:1.55s}                      .lv8 .cl2{transition-delay:.14s; transition-duration:1.0s}

@media (hover:none){.cat__lines{display:none}}
@media (prefers-reduced-motion:reduce){
  .cat__lines .spin,.cat__lines .spin-r{animation:none}
  .cat__lines .cl{transition:none; stroke-dashoffset:0}
}
.cat--cta{background:var(--red); color:#fff}
.cat--cta .cat__lines{opacity:.5}
.cat--cta:hover .cat__lines{opacity:1}
.cat--cta .cat__lines .cl{stroke-dashoffset:0}
.cat:hover .cat__c{opacity:.9}
.cat:hover .cat__n{opacity:.75}
.cat__body{position:relative; z-index:1}

/* cono scontornato che fluttua, dentro una colonna editoriale */
.split--narrow{grid-template-columns:.72fr 1.28fr}
.float-cone{margin:0; display:flex; justify-content:center; align-items:center; padding:clamp(16px,3vw,48px) 0}
.float-cone img{
  width:clamp(88px,10.5vw,155px); height:auto;
  filter:drop-shadow(0 32px 46px rgba(21,17,16,.24));
  animation:floatCone 12s ease-in-out infinite;
}
@keyframes floatCone{
  0%,100%{transform:translateY(0) rotate(-7deg)}
  50%{transform:translateY(-18px) rotate(-2deg)}
}
@media (max-width:1100px){
  .split--narrow{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .float-cone img{animation:none; transform:rotate(-7deg)}
}

/* =====================================================
   CHIUSURE ROSSE — sezioni finali e footer con i tratti di brand
   ===================================================== */
.section.bg-red{overflow:hidden}
.sect-lines{position:absolute; inset:-12% -6%; z-index:0; pointer-events:none}
.sect-lines svg{width:100%; height:100%; display:block; overflow:visible}
.sect-lines .pn{fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round}
.sect-lines .draw{stroke-dasharray:4600; stroke-dashoffset:4600}
.sect-lines.in .draw{animation:heroDraw 3.4s var(--ease-io) forwards}
.sect-lines .d2{animation-delay:.26s} .sect-lines .d3{animation-delay:.52s}
.sect-lines .g1{animation:phDriftA 30s ease-in-out infinite}
.sect-lines .g2{animation:phDriftB 38s ease-in-out infinite}
.section.bg-red>.wrap{position:relative; z-index:2}
@media (prefers-reduced-motion:reduce){
  .sect-lines .g1,.sect-lines .g2{animation:none}
  .sect-lines .draw{stroke-dashoffset:0}
}

/* banner: titolo un po' più contenuto e più aria fra le righe */
.phero .h-xl{font-size:clamp(2.3rem,6.4vw,6.2rem); line-height:1.02}
.phero .lead{font-size:clamp(1rem,1.25vw,1.15rem)}

/* coni dei banner: proporzioni più vicine fra loro */
.phero__cone.r1{width:clamp(86px,9.6vw,168px); top:18%; right:15%}
.phero__cone.r2{width:clamp(76px,8.6vw,148px); top:48%; right:29%}
.phero__cone.r3{width:clamp(70px,7.8vw,134px); top:66%; right:12%}
.phero__cone.r3 img{transform:rotate(9deg); animation:coneB 15s ease-in-out infinite .9s}
/* prodotti piatti (coppe, dischi): più larghi per pesare come i coni */
.phero__cone--wide.r1{width:clamp(120px,13.5vw,225px)}
.phero__cone--wide.r2{width:clamp(108px,12vw,200px)}
.phero__cone--wide.r3{width:clamp(96px,10.6vw,178px)}
@media (max-width:1100px){.phero__cone.r3{right:6%; top:62%}}
@media (max-width:860px){.phero__cone.r3{display:none}}
/* banner della storia: coni un po' più presenti */
.phero--lg .phero__cone.r1{width:clamp(104px,11.6vw,205px)}
.phero--lg .phero__cone.r2{width:clamp(92px,10.4vw,182px)}
/* stacco fra la chiusura rossa e il footer */
.foot{border-top:1px solid rgba(255,255,255,.16)}
.foot__mq{color:rgba(255,255,255,.62)}
/* prodotti lunghi e sottili (sigarette, cannoli): serve più corsa */
.phero__cone--long.r3{width:clamp(150px,17vw,290px); right:13%; top:63%}
/* link di download nel footer */
.foot__dl{display:inline-flex; align-items:center; gap:8px; color:var(--gold-2) !important; font-weight:500}
.foot__dl::after{content:"↓"; font-size:1.05em; transition:transform .35s var(--ease)}
.foot__dl:hover::after{transform:translateY(3px)}

/* =====================================================
   GALLERIE ORIZZONTALI — varianti card
   ===================================================== */
.hcard--wide{width:clamp(330px,38vw,600px)}
.hcard--wide figure{aspect-ratio:4/3}
/* due bottoni affiancati */
.btnrow{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* =====================================================
   PAGINE LEGALI
   ===================================================== */
.lhero{
  position:relative; overflow:hidden; background:var(--cream);
  padding:calc(var(--nav-h) + clamp(56px,8vw,104px)) 0 clamp(30px,4vw,52px);
  border-bottom:1px solid var(--line);
}
.lhero__lines{position:absolute; inset:0; z-index:0; pointer-events:none}
.lhero__lines svg{width:100%; height:100%; display:block}
.lhero__lines .pn{fill:none; stroke:var(--red); stroke-linecap:round; stroke-width:1.5; opacity:.16}
.lhero__lines .pn.thick{stroke-width:34; opacity:.05}
.lhero .wrap{position:relative; z-index:1}
.lhero h1{max-width:20ch}

.lnav{display:flex; gap:8px; flex-wrap:wrap; margin-top:clamp(26px,3.4vw,40px)}
.lnav a{
  font-family:var(--f-ui); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  padding:9px 17px; border:1px solid var(--line); border-radius:100px; color:var(--ink-soft);
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.lnav a:hover{border-color:var(--ink); color:var(--ink)}
.lnav a[aria-current="page"]{background:var(--red); border-color:var(--red); color:#fff}

.legal{max-width:76ch}
.legal__upd{
  font-family:var(--f-ui); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.65; margin-bottom:clamp(30px,4vw,48px);
}
.legal h2{
  font-family:var(--f-display); font-weight:500; line-height:1.18;
  font-size:clamp(1.3rem,2.1vw,1.85rem); margin:clamp(46px,5.5vw,76px) 0 16px;
}
.legal h2:first-of-type{margin-top:0}
.legal h3{
  font-family:var(--f-ui); font-weight:600; font-size:.92rem; letter-spacing:.01em;
  color:var(--ink); margin:32px 0 10px;
}
.legal p,.legal li{
  font-family:var(--f-edit); font-size:clamp(1rem,1.02vw,1.09rem); line-height:1.82; color:var(--ink-soft);
}
.legal p{margin:0 0 15px}
.legal ul{margin:0 0 18px; padding-left:1.15em}
.legal li{margin-bottom:8px}
.legal li::marker{color:var(--red)}
.legal strong{color:var(--ink); font-weight:700}
.legal a{color:var(--red); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.legal a:hover{color:var(--red-deep)}
.legal__note{
  border-left:2px solid var(--red); padding:4px 0 4px 20px; margin:26px 0;
}
.legal__note p:last-child{margin-bottom:0}

.ltable{width:100%; border-collapse:collapse; margin:6px 0 26px; display:block; overflow-x:auto}
.ltable thead,.ltable tbody,.ltable tr{width:100%}
.ltable table{width:100%}
.ltable th,.ltable td{
  text-align:left; padding:13px 16px 13px 0; border-bottom:1px solid var(--line); vertical-align:top;
}
.ltable th{
  font-family:var(--f-ui); font-weight:600; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap;
}
.ltable td{font-family:var(--f-ui); font-size:.86rem; line-height:1.65; color:var(--ink-soft)}
.ltable td:first-child{color:var(--ink); font-weight:500}
.ltable code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82em;
  background:var(--cream); padding:2px 6px; border-radius:3px; color:var(--ink);
}

/* =====================================================
   PROGETTI FINANZIATI UE
   ===================================================== */
.fund{background:var(--cream); border-top:1px solid var(--line)}
.fund .wrap{padding-block:clamp(56px,7vw,104px)}
.fund__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.32fr); gap:clamp(28px,4vw,74px); align-items:start}
.fund__body p{
  font-family:var(--f-ui); font-size:.86rem; line-height:1.78; color:var(--ink-soft); margin:0 0 14px;
}
.fund__body p:last-child{margin-bottom:0}
.fund__body strong{color:var(--ink); font-weight:600}
.fund__prj{padding-top:26px; margin-top:26px; border-top:1px solid var(--line)}
.fund__prj:first-child{padding-top:0; margin-top:0; border-top:0}
.fund__prj h3{
  font-family:var(--f-display); font-weight:500; font-size:clamp(1.05rem,1.5vw,1.32rem);
  line-height:1.25; color:var(--ink); margin:0 0 14px;
}
.fund__tag{
  display:inline-block; font-family:var(--f-ui); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red); margin-bottom:9px;
}
@media (max-width:900px){
  .fund__grid{grid-template-columns:1fr}
}

.fund__loghi{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:22px clamp(18px,1.8vw,26px);
  margin-top:clamp(30px,3.6vw,46px);
  padding-top:clamp(24px,2.8vw,34px);
  border-top:1px solid var(--line);
}
.fund__loghi img{display:block; width:auto; flex:none}
.fund__loghi .l-coesione{height:36px}
.fund__loghi .l-ue{height:29px}
.fund__loghi .l-rep{height:38px}
.fund__loghi .l-lazio{height:31px}
@media (max-width:900px){
  .fund__loghi .l-coesione{height:40px}
  .fund__loghi .l-ue{height:32px}
  .fund__loghi .l-rep{height:42px}
  .fund__loghi .l-lazio{height:34px}
}
@media (max-width:480px){
  .fund__loghi{gap:18px 20px}
  .fund__loghi .l-coesione{height:32px}
  .fund__loghi .l-ue{height:26px}
  .fund__loghi .l-rep{height:34px}
  .fund__loghi .l-lazio{height:27px}
}

/* =====================================================
   COOKIE — banner e preferenze
   ===================================================== */
.ck{
  position:fixed; left:var(--pad); right:var(--pad); bottom:clamp(16px,2.4vw,28px); z-index:9000;
  max-width:640px; background:var(--ink); color:var(--paper);
  padding:clamp(22px,2.6vw,30px); box-shadow:0 24px 70px rgba(0,0,0,.34);
  transform:translateY(140%); transition:transform .9s var(--ease); will-change:transform;
}
.ck.on{transform:translateY(0)}
.ck h4{
  font-family:var(--f-display); font-weight:500; font-size:1.18rem; margin:0 0 10px; line-height:1.25;
}
.ck p{
  font-family:var(--f-ui); font-size:.82rem; line-height:1.7; color:rgba(255,255,255,.72); margin:0 0 18px;
}
.ck p a{color:#fff; text-decoration:underline; text-underline-offset:3px}
.ck__row{display:flex; gap:10px; flex-wrap:wrap}
.ckbtn{
  font-family:var(--f-ui); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  padding:12px 22px; border:1px solid rgba(255,255,255,.26); background:transparent; color:#fff;
  cursor:pointer; border-radius:100px; transition:background .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease);
}
.ckbtn:hover{border-color:#fff}
.ckbtn--fill{background:var(--red); border-color:var(--red)}
.ckbtn--fill:hover{background:#fff; border-color:#fff; color:var(--ink)}

.ckm{position:fixed; inset:0; z-index:9100; display:none}
.ckm.on{display:block}
.ckm__veil{position:absolute; inset:0; background:rgba(21,17,16,.62); opacity:0; transition:opacity .6s var(--ease)}
.ckm.in .ckm__veil{opacity:1}
.ckm__panel{
  position:absolute; top:0; right:0; height:100%; width:min(560px,100%);
  background:var(--paper); overflow-y:auto; padding:clamp(28px,3.4vw,48px);
  transform:translateX(100%); transition:transform .8s var(--ease);
}
.ckm.in .ckm__panel{transform:translateX(0)}
.ckm__x{
  position:absolute; top:20px; right:20px; width:38px; height:38px; border:1px solid var(--line);
  background:none; cursor:pointer; border-radius:50%; color:var(--ink); font-size:1rem; line-height:1;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.ckm__x:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.ckm h4{font-family:var(--f-display); font-weight:500; font-size:1.5rem; margin:0 0 14px; max-width:16ch}
.ckm__lead{font-family:var(--f-ui); font-size:.84rem; line-height:1.75; color:var(--ink-soft); margin:0 0 8px}
.ckm__lead a{color:var(--red); text-decoration:underline; text-underline-offset:3px}
.ckopt{padding:22px 0; border-top:1px solid var(--line)}
.ckopt:first-of-type{margin-top:24px}
.ckopt__head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.ckopt__t{font-family:var(--f-ui); font-weight:600; font-size:.9rem; color:var(--ink)}
.ckopt__d{font-family:var(--f-ui); font-size:.79rem; line-height:1.7; color:var(--ink-soft); margin:9px 0 0}
.ckopt__fix{
  font-family:var(--f-ui); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.6; white-space:nowrap; padding-top:3px;
}
.ckopt__d code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; background:var(--cream); padding:1px 5px; border-radius:3px}
.sw{position:relative; flex:none; width:50px; height:28px; cursor:pointer}
.sw input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:2}
.sw span{
  position:absolute; inset:0; background:var(--cream-2); border-radius:100px;
  transition:background .45s var(--ease);
}
.sw span::after{
  content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.2); transition:transform .45s var(--ease);
}
.sw input:checked + span{background:var(--red)}
.sw input:checked + span::after{transform:translateX(22px)}
.sw input:focus-visible + span{outline:2px solid var(--ink); outline-offset:2px}
.ckm__row{display:flex; gap:10px; flex-wrap:wrap; margin-top:30px; padding-top:24px; border-top:1px solid var(--line)}
.ckm .ckbtn{border-color:var(--line); color:var(--ink)}
.ckm .ckbtn:hover{border-color:var(--ink)}
.ckm .ckbtn--fill{background:var(--red); border-color:var(--red); color:#fff}
.ckm .ckbtn--fill:hover{background:var(--ink); border-color:var(--ink); color:#fff}

.foot__legal{display:flex; gap:8px 22px; flex-wrap:wrap; align-items:center}
.foot__legal button{
  font:inherit; background:none; border:0; padding:0; cursor:pointer; color:inherit;
  text-decoration:underline; text-underline-offset:3px; opacity:.8;
}
.foot__legal button:hover{opacity:1}

@media (prefers-reduced-motion:reduce){
  .ck,.ckm__panel,.ckm__veil{transition:none}
}
@media (max-width:640px){
  .ck{left:12px; right:12px; bottom:12px}
  .ckm__panel{width:100%}
}

/* =====================================================
   LAVORA CON NOI — annuncio e candidatura
   ===================================================== */
.jwrap{max-width:78ch}

.job{border-top:2px solid var(--ink); padding-top:clamp(24px,3vw,38px)}
.job h2{
  font-family:var(--f-display); font-weight:500; line-height:1.1;
  font-size:clamp(1.75rem,3.4vw,2.9rem); margin:0 0 18px;
}
.job h3{
  font-family:var(--f-ui); font-weight:600; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red); margin:clamp(34px,4vw,50px) 0 14px;
}
.job p,.job li{font-family:var(--f-edit); font-size:clamp(1rem,1.02vw,1.09rem); line-height:1.82; color:var(--ink-soft)}
.job p{margin:0 0 14px}
.job ul{margin:0 0 6px; padding-left:1.15em}
.job li{margin-bottom:9px}
.job li::marker{color:var(--red)}
.job strong{color:var(--ink); font-weight:700}
.job a,.jnone a{color:var(--red); text-decoration:underline; text-underline-offset:3px}
.job a:hover,.jnone a:hover{color:var(--red-deep)}

.jmeta{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px}
.jmeta span{
  font-family:var(--f-ui); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 15px; border:1px solid var(--line); border-radius:100px; color:var(--ink-soft);
}
.jmeta span.hi{background:var(--red); border-color:var(--red); color:#fff}

.joffer{background:var(--cream); padding:clamp(22px,2.6vw,32px); margin:clamp(30px,3.6vw,44px) 0}
.joffer h3{margin-top:0}
.joffer ul{margin-bottom:0}
.jfoot{
  font-family:var(--f-ui); font-size:.76rem; line-height:1.7; color:var(--ink-soft);
  opacity:.75; margin-top:clamp(30px,4vw,46px); padding-top:20px; border-top:1px solid var(--line);
}


/* --- come candidarsi --- */
.apply{
  background:var(--ink); color:var(--paper); padding:clamp(28px,3.4vw,44px);
  margin-top:clamp(38px,4.6vw,64px);
}
.apply .eyebrow{color:var(--gold-2); opacity:.9}
.apply h3{
  font-family:var(--f-display); font-weight:500; color:#fff; text-transform:none; letter-spacing:0;
  font-size:clamp(1.4rem,2.5vw,2rem); line-height:1.2; margin:16px 0 14px; max-width:20ch;
}
.apply p{
  font-family:var(--f-ui); font-size:.92rem; line-height:1.75;
  color:rgba(255,255,255,.74); margin:0 0 26px; max-width:56ch;
}
.apply strong{color:#fff; font-weight:600}
.apply .btn{border-color:var(--red)}
.apply .btn::before{background:#fff}
.apply .btn:hover span{color:var(--ink)}

.jnone{
  border-top:1px solid var(--line); margin-top:clamp(50px,6vw,90px); padding-top:clamp(28px,3.4vw,44px);
}
.jnone p{font-family:var(--f-edit); font-size:1.02rem; line-height:1.8; color:var(--ink-soft); max-width:60ch; margin:0 0 18px}