/* ── The site, after the film ─────────────────────────────────────────────────────────────
   docs/SCENOGRAFIA_FILM.md § 12. A monochrome grey system: the film's neutral stage grey is the
   protagonist of the whole site. Depth comes from luminance steps, surfaces lit like plaster and
   stone, and real shadows, never from hue. Type is the film's: Newsreader titles, Outfit text.
   Everything here is scoped below #journey: the film's own styles are untouched. */
:root{
 --g50:#F5F5F7;--g100:#EDEDEF;--g150:#E4E4E7;--g200:#D8D8DC;--g300:#BDBEC2;--g400:#929398;--g500:#76777C;
 --g600:#56575B;--g700:#393A3E;--g800:#242528;--g900:#18191B;--site-ink:#17181A;
 --ease-out:cubic-bezier(.16,1,.3,1);--gut:48px;--col-gap:24px;
 --grain:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.3' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
}
::selection{background:var(--g800);color:var(--g50)}
#site{position:relative;z-index:1;color:var(--site-ink);font-family:var(--sans)}
#site *,#sitenav *{box-sizing:border-box}
#site a,#sitenav a{color:inherit}
#site :focus-visible,#sitenav :focus-visible,.skip:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{position:relative;max-width:1600px;margin:0 auto;padding:0 var(--gut)}

/* Skip link: the film is the experience, but the site is always one key away. */
.skip{position:fixed;z-index:40;left:16px;top:16px;padding:12px 18px;border-radius:10px;background:var(--g800);color:var(--g50);font:500 14px/1 var(--sans);text-decoration:none;transform:translateY(-200%);transition:transform .3s var(--ease-out)}
.skip:focus{transform:none}

/* ── Shared type ─────────────────────────────────────────────────────────────────────────── */
.s-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end}
.s-title{grid-column:1/8;margin:0;font:600 7.4vh/.98 var(--display);letter-spacing:-.032em;font-kerning:normal;text-wrap:balance}
.s-lede{grid-column:9/13;margin:0 0 .5em;max-width:34ch;font:400 max(17px,2.05vh)/1.45 var(--sans);letter-spacing:.003em}
h3{font-weight:inherit}
/* Each line rises through its own mask, like the film's titles; content is visible without JS. */
.ln{display:block;overflow:hidden;padding:.1em 0 .16em;margin:-.1em 0 -.16em}
.ln>span{display:block;white-space:nowrap}
.js-site .reveal .ln>span{transform:translate3d(0,104%,0);opacity:0;transition:transform 1.25s var(--ease-out),opacity .7s ease-out;transition-delay:calc(var(--i,0)*90ms)}
.js-site .reveal.in .ln>span{transform:none;opacity:1}
.js-site .reveal:not(:has(.ln)){opacity:0;transform:translate3d(0,28px,0);transition:opacity .9s ease-out .25s,transform 1.2s var(--ease-out) .25s}
.js-site .reveal.in:not(:has(.ln)){opacity:1;transform:none}

/* ── Site navigation (appears once the film has scrolled away) ───────────────────────────── */
#sitenav{position:fixed;z-index:20;top:14px;left:16px;right:16px;height:58px;display:flex;justify-content:flex-start;align-items:center;gap:30px;padding:0 9px 0 26px;border-radius:14px;
 color:var(--site-ink);background:rgba(245,245,247,.8);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);
 box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 14px 34px -22px rgba(10,11,12,.55);transform:translate3d(0,-150%,0);visibility:hidden;
 transition:transform .8s var(--ease-out),visibility 0s linear .8s,background-color .5s,color .5s,box-shadow .5s}
#sitenav.is-on{transform:none;visibility:visible;transition:transform .8s var(--ease-out),visibility 0s,background-color .5s,color .5s,box-shadow .5s}
#sitenav[data-theme=dark]{color:var(--g50);background:rgba(36,37,40,.78);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 14px 34px -22px rgba(0,0,0,.7)}
.sn-brand{font:500 21px/1 var(--sans);letter-spacing:-.045em;text-decoration:none;margin-right:auto}
.sn-links{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.sn-links a,.sn-film{position:relative;font:500 14px/1 var(--sans);letter-spacing:.01em;text-decoration:none;padding:8px 0}
.sn-links a::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.sn-links a:hover::after,.sn-links a[aria-current=true]::after{transform:scaleX(1);transform-origin:left}
.sn-film{display:flex;align-items:center;gap:8px;opacity:.72;transition:opacity .3s}
.sn-film:hover{opacity:1}.sn-film svg{width:15px;height:15px;transition:transform .6s var(--ease-out)}.sn-film:hover svg{transform:rotate(-200deg)}
.sn-cta{font:500 14px/1 var(--sans);text-decoration:none;padding:13px 20px;border-radius:10px;background:var(--g800);color:var(--g50)!important;transition:background-color .3s,transform .3s var(--ease-out)}
.sn-cta:hover{background:var(--g900)}.sn-cta:active{transform:scale(.97)}
#sitenav[data-theme=dark] .sn-cta{background:var(--g50);color:var(--g800)!important}

/* ── 1 · Qualità: premium cards on concrete grey ─────────────────────────────────────────────
   The hand-over (docs/SCENOGRAFIA_FILM.md § 12). The section is pulled up one viewport, over the last
   pinned viewport of the film's stage, and is transparent there: during the hand-over the backdrop is the
   stage's own, still. Its cards are held in place by position:sticky (top --q-rest) while site.js brings
   them in, and let go exactly when the stage does (end of #journey): from there both scroll as one page.
   Geometry: .q-pin starts (--q-rest − --q-hold) above the section top and holds the cards for --q-hold
   of scroll, ending at the release. Below the transparent viewport the grey continues the stage's bottom
   edge (the same ellipse as #grey, its centre one viewport higher): no seam when they scroll together.
   overflow-x only: a vertical clip would cut the cards while they are held above the section's top.
   flow-root: .q-pin's negative margin must not collapse into the section's own (the larger would win). */
.s-qualita{--q-rest:2.4vh;--q-hold:80vh;position:relative;isolation:isolate;display:flow-root;overflow-x:clip;margin-top:-100vh;padding:0 0 17vh;pointer-events:none;
 background:linear-gradient(180deg,transparent 0,transparent 100vh,#727375 100vh,#87888c 118vh,#8f9095 142vh,#929398 190vh,#97989c calc(100% - 46vh),#c4c5c9 calc(100% - 14vh),var(--g200) 100%)}
.s-qualita::before{content:'';position:absolute;z-index:-1;left:0;right:0;top:100vh;height:100vh;
 background:radial-gradient(78% 70% at 56% -62%,#a9a9a9 0%,#999a9a 34%,#818283 70%,#6f7071 100%);
 -webkit-mask:linear-gradient(#000 0,#000 2vh,transparent 26vh);mask:linear-gradient(#000 0,#000 2vh,transparent 26vh)}
.s-qualita::after{content:'';position:absolute;z-index:-1;left:0;right:0;top:100vh;bottom:0;opacity:.035;background-image:var(--grain);pointer-events:none}
.q-pin{margin-top:calc(var(--q-rest) - var(--q-hold));pointer-events:none}
.q-pin>*,.s-qualita .cards{pointer-events:auto}
/* (The transparent top of the section lies over the pinned stage: it lets the pointer through.) */
.q-pin::after{content:'';display:block;height:var(--q-hold)}
/* The three cards come straight after the scene has emptied (the "Tre qualità" head was removed on
   12 October; its text stays as the section's hidden heading). They are held by position:sticky at
   --q-rest while site.js brings them in one at a time (75 vh of scroll; --q-hold must exceed it), and
   let go with the stage.
   --q-rest 2.4 vh centres the 95.2 vh block of cards in the viewport while it is held (none is cut).
   Opacity never reaches 0 (.001): the cards and their live drawings are rasterised before they show. */
.s-qualita .cards{position:sticky;top:var(--q-rest)}
.js-site #qualita .card-shell{opacity:.001;will-change:transform,opacity;transform-origin:50% 100%}

.cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);grid-template-rows:9vh 40vh 3.2vh 36vh 7vh}
.cs-silenzio{grid-column:1/7;grid-row:1/5}
.cs-efficienza{grid-column:7/13;grid-row:2/3}
.cs-controllo{grid-column:8/13;grid-row:4/6}
.card-shell{position:relative;perspective:1500px}
/* .001, not 0: the cards are rasterised before they are revealed (at 0 the first paint of their
   live drawings landed inside the 3D reveal and cost one 50–67 ms frame on a cold browser). */
.js-site .card-shell.reveal{opacity:.001;transform:translate3d(0,9vh,0) rotateX(9deg);transform-origin:50% 100%;transition:opacity 1s ease-out,transform 1.5s var(--ease-out);transition-delay:calc(var(--i,0)*140ms)}
.js-site .card-shell.reveal.in{opacity:1;transform:none}
.card{--rx:0deg;--ry:0deg;--sx:0;--sy:0;--mx:50%;--my:0%;--glow:0;
 position:relative;height:100%;border-radius:16px;overflow:hidden;display:grid;padding:clamp(28px,4.4vh,46px) clamp(28px,3vw,48px);
 transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:flat;will-change:transform;
 box-shadow:0 1px 0 rgba(255,255,255,.75) inset,0 -1px 0 rgba(0,0,0,.06) inset,0 2px 3px rgba(14,15,17,.10),
  calc(var(--sx)*1px) calc(26px + var(--sy)*1px) 54px -22px rgba(14,15,17,.48),calc(var(--sx)*2.4px) calc(70px + var(--sy)*2.4px) 120px -44px rgba(14,15,17,.42)}
/* A soft key light that follows the pointer across the surface. */
.card::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:var(--glow);transition:opacity .6s ease-out;
 background:radial-gradient(520px circle at var(--mx) var(--my),rgba(255,255,255,.55),rgba(255,255,255,0) 60%);mix-blend-mode:soft-light}
.card::before{content:'';position:absolute;inset:0;opacity:.05;background-image:var(--grain);pointer-events:none}
.c-visual{position:relative;transform:translate3d(calc(var(--sx)*-.55px),calc(var(--sy)*-.55px),0)}
.c-text{position:relative;align-self:end;transform:translate3d(calc(var(--sx)*.22px),calc(var(--sy)*.22px),0)}
.c-title{margin:0;font:600 6.4vh/.95 var(--display);letter-spacing:-.03em}
.c-body{margin:2.1vh 0 0;max-width:31ch;font:400 max(16px,1.86vh)/1.5 var(--sans);letter-spacing:.004em}
.c-silenzio{grid-template-rows:1fr auto;color:var(--site-ink);background:linear-gradient(162deg,#FBFBFC 0%,var(--g50) 38%,#E9E9EC 100%)}
.c-silenzio .c-title{font-size:9.6vh}
.c-silenzio .c-visual{align-self:center;margin:0 -.5vw}
/* Silenzio: a voice-note waveform that settles into a row of still dots (rounded caps: a bar of
   zero height is a dot). */
.c-quiet{display:block;width:100%;height:auto;overflow:visible}
.c-quiet line{stroke:var(--site-ink);stroke-width:3.6;stroke-linecap:round}
.c-efficienza{grid-template-columns:1fr 1.15fr;column-gap:2vw;color:var(--site-ink);background:linear-gradient(158deg,#E2E2E6 0%,var(--g200) 45%,#C9CACE 100%);
 box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -1px 0 rgba(0,0,0,.07) inset,0 2px 3px rgba(14,15,17,.10),
  calc(var(--sx)*1px) calc(26px + var(--sy)*1px) 54px -22px rgba(14,15,17,.46),calc(var(--sx)*2.4px) calc(70px + var(--sy)*2.4px) 120px -44px rgba(14,15,17,.4)}
.c-efficienza .c-visual{align-self:center}
.c-bundle{display:block;width:100%;height:auto;overflow:visible}
.c-bundle path{fill:none;stroke:var(--site-ink);stroke-width:1.05;vector-effect:non-scaling-stroke}
.c-controllo{grid-template-columns:1fr auto;align-items:end;column-gap:1.4vw;color:var(--g50);background:radial-gradient(120% 90% at 85% 0%,#36373B 0%,#2A2B2E 42%,#1F2023 100%);
 box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 -1px 0 rgba(0,0,0,.4) inset,0 2px 3px rgba(14,15,17,.16),
  calc(var(--sx)*1px) calc(28px + var(--sy)*1px) 56px -20px rgba(10,11,12,.6),calc(var(--sx)*2.4px) calc(74px + var(--sy)*2.4px) 120px -40px rgba(10,11,12,.55)}
.c-controllo::after{background:radial-gradient(520px circle at var(--mx) var(--my),rgba(255,255,255,.16),rgba(255,255,255,0) 60%);mix-blend-mode:normal}
.c-controllo .c-visual{grid-column:2;grid-row:1/3;align-self:center;width:min(16vw,34vh)}
.c-controllo .c-text{grid-column:1;grid-row:1/3}
.c-controllo .c-body{color:#D9D9DD}
.c-dial{display:block;width:100%;height:auto;overflow:visible}

/* ── 2 · Numeri: luminous surface, giant figures ───────────────────────────────────────── */
.s-numeri{position:relative;isolation:isolate;padding:20vh 0 18vh;background:linear-gradient(180deg,var(--g200) 0,#E2E2E5 34vh,#ECECEE 80vh,var(--g50) 100%)}
.s-numeri::after{content:'';position:absolute;z-index:-1;inset:0;opacity:.05;background-image:var(--grain);pointer-events:none;mix-blend-mode:multiply}
.n-note{grid-column:9/13;margin:0 0 .7em;max-width:36ch;font:400 14px/1.5 var(--sans);color:var(--g600)}
.n-star,.fig-cap sup{font:500 1em/1 var(--sans);vertical-align:super;font-size:.7em;margin-right:.35em}
.fig{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end;margin-top:13vh;padding-top:5vh}
.fig::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--site-ink);opacity:.16;transform:scaleX(var(--line,1));transform-origin:left}
.fig-num{margin:0;font:500 clamp(140px,28vh,330px)/.84 var(--display);letter-spacing:-.045em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;color:var(--site-ink)}
.fig-unit{font-size:.34em;letter-spacing:-.01em;margin-left:.08em;vertical-align:.95em;font-weight:340}
.fig-cap{max-width:32ch}
.fig-cap h3{margin:1.4vh 0 0;font:600 max(21px,2.7vh)/1.2 var(--display);letter-spacing:-.015em}
.fig-cap p{margin:1.2vh 0 0;font:400 max(15px,1.75vh)/1.55 var(--sans);color:var(--g700)}
.tag{display:inline-block;font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:6px 9px 5px;border:1px solid currentColor;border-radius:4px;color:var(--g600)}
.f-temp .fig-num{grid-column:1/9;grid-row:1}
.f-temp .fig-scale{grid-column:1/9;grid-row:2;width:100%;height:auto;margin-top:4vh;overflow:visible}
.f-temp .fig-cap{grid-column:10/13;grid-row:1/3;align-self:end}
.f-flap{align-items:center}
.f-flap .fig-gauge{grid-column:1/5;grid-row:1;width:100%;height:auto;overflow:visible}
.f-flap .fig-cap{grid-column:1/5;grid-row:2;margin-top:2vh}
.f-flap .fig-num{grid-column:6/13;grid-row:1/3;justify-self:end;font-size:clamp(180px,36vh,420px)}
.f-zone{align-items:stretch}
.f-zone .fig-cap{grid-column:1/4;grid-row:1;align-self:start;padding-top:2vh}
.f-zone .fig-num{grid-column:4/11;grid-row:1;align-self:end;padding-left:2vw}
.f-zone .fig-ruler{grid-column:11/13;grid-row:1;justify-self:end;width:auto;height:52vh;overflow:visible}
.fig svg text{font-family:var(--sans);font-size:13px;letter-spacing:.06em;fill:var(--g600)}

/* ── 3 · Laboratorio: a graphite slab, the site's second big moment ──────────────────────── */
.s-lab{position:relative;padding:0 16px;background:linear-gradient(180deg,var(--g50) 50%,var(--g100) 50%)}
.slab{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;color:var(--g50);padding:17vh 0 11vh;
 background:radial-gradient(110% 70% at 72% 0%,#303135 0%,var(--g800) 46%,#1B1C1F 100%);
 box-shadow:0 40px 90px -50px rgba(0,0,0,.55),0 -24px 70px -50px rgba(0,0,0,.4)}
.slab::after{content:'';position:absolute;z-index:-1;inset:0;opacity:.03;background-image:var(--grain);pointer-events:none}
.slab .wrap{padding:0 calc(var(--gut) - 16px)}
.slab .s-title{color:var(--g50)}
.l-intro{grid-column:8/13;margin-bottom:.6em}
.l-intro .s-lede{margin:0;color:#E6E6E9}
.l-disclaimer{display:flex;gap:10px;align-items:flex-start;margin:2.2vh 0 0;max-width:40ch;font:400 13.5px/1.5 var(--sans);color:#A9AAAF}
.l-disclaimer svg{flex:none;width:16px;height:16px;margin-top:1px}
.lab{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);margin-top:9vh;align-items:start}
.lab-stage{grid-column:1/10;margin:0;min-width:0}
/* The film styles every canvas as its full-bleed, click-through layer; the lab's canvas is an
   ordinary interactive element, so it opts out of all of it. */
#labCanvas{position:relative;inset:auto;z-index:auto;pointer-events:auto;filter:none;height:auto;display:block;width:100%;aspect-ratio:16/9;border-radius:16px;background:#141517;cursor:none;touch-action:none;
 box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 30px 70px -40px rgba(0,0,0,.8)}
#labCanvas:focus-visible{outline:2px solid var(--g300);outline-offset:4px}
.lab-legend{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:18px;font:400 13px/1.3 var(--sans);color:#A9AAAF}
.lab-legend span{display:inline-flex;align-items:center;gap:9px}
.lab-legend i{display:inline-block;flex:none}
.lg-line{width:22px;height:1px;background:linear-gradient(90deg,rgba(235,240,244,.2),rgba(235,240,244,.9))}
.lg-dot{width:7px;height:7px;border-radius:50%;background:#F5F7F8;box-shadow:0 0 8px 2px rgba(235,242,246,.55)}
.lg-band{width:18px;height:10px;border-top:1px dashed rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.lg-ring{width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.7)}
.lab-panel{grid-column:10/13;display:flex;flex-direction:column;gap:30px;padding:4px 0 0 4px}
.presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:4px;border-radius:12px;background:rgba(255,255,255,.05);box-shadow:0 0 0 1px rgba(255,255,255,.07) inset}
.presets button{font:500 13px/1 var(--sans);color:#C9CACE;padding:11px 0;border-radius:9px;transition:background-color .35s var(--ease-out),color .35s}
.presets button:hover{color:var(--g50);background:rgba(255,255,255,.05)}
.presets button[aria-pressed=true]{color:var(--g800);background:var(--g50);box-shadow:0 6px 16px -8px rgba(0,0,0,.6)}
.ctl-head{display:flex;justify-content:space-between;align-items:baseline}
.ctl label{font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#B3B4B9}
.ctl output{font:300 30px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--g50)}
.ctl-scale{display:flex;justify-content:space-between;margin-top:9px;font:400 12px/1 var(--sans);color:#A6A7AC}
.ctl input[type=range]{--p:50%;appearance:none;-webkit-appearance:none;display:block;width:100%;height:30px;margin:12px 0 0;background:transparent;cursor:pointer}
.ctl input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(90deg,var(--g50) var(--p),rgba(255,255,255,.18) var(--p))}
.ctl input[type=range]::-moz-range-track{height:2px;background:rgba(255,255,255,.18)}
.ctl input[type=range]::-moz-range-progress{height:2px;background:var(--g50)}
.ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-9px;border-radius:50%;background:var(--g50);
 box-shadow:0 0 0 6px rgba(245,245,247,.08),0 4px 10px rgba(0,0,0,.5);transition:box-shadow .3s,transform .3s var(--ease-out)}
.ctl input[type=range]:hover::-webkit-slider-thumb,.ctl input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(245,245,247,.12),0 4px 10px rgba(0,0,0,.5)}
.ctl input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
.ctl input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--g50)}
.ctl input[type=range]:focus-visible{outline:none}
.ctl input[type=range]:focus-visible::-webkit-slider-runnable-track{box-shadow:0 0 0 6px rgba(255,255,255,.06)}
.readouts{display:grid;gap:20px;margin:6px 0 0;padding:24px 0 0;border-top:1px solid rgba(255,255,255,.09)}
.ro{display:grid;grid-template-columns:1fr auto;align-items:baseline;row-gap:9px}
.ro dt{font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#B3B4B9}
.ro dd{margin:0;font:300 26px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ro dd small{margin-left:7px;font:400 11px/1 var(--sans);letter-spacing:.06em;color:#A6A7AC}
.ro-bar{grid-column:1/3;display:block;height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.ro-bar b{display:block;height:100%;width:100%;background:var(--g50);transform-origin:left;transform:scaleX(0)}
.lab-actions{display:flex;gap:10px}
.lab-actions button{flex:1;font:500 13px/1 var(--sans);color:var(--g50);padding:13px 0;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.16) inset;transition:background-color .3s,box-shadow .3s}
.lab-actions button:hover{color:var(--g50);background:rgba(255,255,255,.07);box-shadow:0 0 0 1px rgba(255,255,255,.28) inset}
.lab-actions button[aria-pressed=true]{background:rgba(255,255,255,.1)}
.ro-note{margin:-12px 0 0;font:400 12px/1.4 var(--sans);color:#A6A7AC}

/* ── 4 · Come funziona: sticky drawing, steps that advance ───────────────────────────────── */
.s-metodo{position:relative;isolation:isolate;padding:22vh 0 16vh;background:linear-gradient(180deg,var(--g100) 0,#E4E4E7 50%,var(--g200) 100%)}
.s-metodo::after{content:'';position:absolute;z-index:-1;inset:0;opacity:.05;background-image:var(--grain);pointer-events:none;mix-blend-mode:multiply}
.m-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.m-visual-col{grid-column:1/7}
.m-visual{position:sticky;top:12vh;height:76vh;margin:0;border-radius:16px;overflow:hidden;background:linear-gradient(165deg,#FBFBFC 0%,var(--g50) 40%,#E8E8EB 100%);
 box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 2px 3px rgba(14,15,17,.08),0 30px 60px -30px rgba(14,15,17,.35),0 80px 120px -60px rgba(14,15,17,.3)}
/* The film styles every canvas as its full-bleed, blurred layer: the drawing is a plain canvas. */
.m-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;filter:none}
.m-caption{position:absolute;z-index:1;left:28px;right:28px;bottom:24px;display:flex;align-items:center;gap:18px;font:500 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--g600)}
.m-count b{font-weight:500;color:var(--site-ink)}
.m-caption [data-m=name]{color:var(--site-ink)}
.m-rail{display:flex;gap:6px;margin-left:auto}
.m-rail i{display:block;width:34px;height:2px;background:rgba(23,24,26,.15);overflow:hidden;position:relative}
/* Filled by site.js with the drawing's own state (--p), so it moves with the scroll. */
.m-rail i::after{content:'';position:absolute;inset:0;background:var(--site-ink);transform:scaleX(var(--p,0));transform-origin:left}
.m-steps{grid-column:8/13}
.m-head{display:block}
.m-head .s-title{font-size:7.4vh}
.m-head .s-lede{margin:3vh 0 0}
.m-step{min-height:64vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .7s var(--ease-out)}
.m-step.is-active{opacity:1}
.m-step:last-child{min-height:82vh}
.m-no{margin:0;font:500 13px/1 var(--sans);letter-spacing:.24em;display:flex;align-items:center;gap:16px}
.m-no::after{content:'';width:32px;height:1px;background:currentColor;opacity:.55}
.m-step h3{margin:2.2vh 0 0;font:600 7.6vh/.96 var(--display);letter-spacing:-.032em}
.m-step p:not(.m-no){margin:2.6vh 0 0;max-width:38ch;font:400 max(17px,2vh)/1.5 var(--sans)}
.m-step .m-legend{font-size:max(14px,1.6vh)!important;color:var(--g600)}

/* ── 4b · L'insieme: three cards, the product's benefits, before the closing ───────────────────
   The section keeps its place and surface. The cards are three materials in one tonal progression
   (plaster, stone, graphite, the same family as the Qualità cards), set as editorial pages: a folio with
   a hairline at the top, a faint large numeral in the surface, the title low with a short rule and the
   text. They enter once, one after the other (the site's reveal observer); hover lifts a card a little,
   deepens its shadow, brightens its edge and surface a touch and lengthens the rule. */
.s-insieme{position:relative;isolation:isolate;padding:19vh 0 20vh;background:linear-gradient(180deg,var(--g200) 0,#D0D0D4 45%,#CDCDD1 70%,var(--g200) 100%)}
.s-insieme::after{content:'';position:absolute;z-index:-1;inset:0;opacity:.05;background-image:var(--grain);pointer-events:none;mix-blend-mode:multiply}
.i-title{margin:0;color:var(--site-ink)}
/* Lines rise through masks; the tight tracking would clip the last letter, so the masks get side room. */
.i-title .ln{padding-left:.06em;padding-right:.14em;margin-left:-.06em;margin-right:-.14em}
.i-q{font:600 5.4vh/1.04 var(--display);letter-spacing:-.03em}
.i-a{margin-top:1vh!important;font:700 13vh/.96 var(--display);letter-spacing:-.045em}
.i-cards{list-style:none;margin:10vh 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:calc(var(--col-gap)*1.25)}
.i-shell{position:relative}
.js-site .i-cards .i-shell.reveal{opacity:0;transform:translate3d(0,5vh,0);transition:opacity 1s cubic-bezier(.33,0,.2,1),transform 1.4s var(--ease-out);transition-delay:calc(var(--i,0)*140ms + 60ms)}
.js-site .i-cards .i-shell.reveal.in{opacity:1;transform:none}
.i-card{--edge:rgba(23,24,26,.08);position:relative;isolation:isolate;overflow:hidden;height:max(54vh,420px);border-radius:18px;
 display:grid;grid-template-rows:auto 1fr;padding:clamp(26px,3.6vh,40px) clamp(26px,2.4vw,40px) clamp(30px,4.4vh,48px);color:var(--site-ink);
 box-shadow:0 0 0 1px var(--edge),0 1px 0 rgba(255,255,255,.8) inset,0 2px 3px rgba(14,15,17,.07),0 22px 44px -26px rgba(14,15,17,.32),0 60px 90px -60px rgba(14,15,17,.3);
 transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out)}
.i-card::before{content:'';position:absolute;z-index:-1;inset:0;opacity:.05;background-image:var(--grain);pointer-events:none}
/* A faint sheen from the top edge, a touch stronger on hover. */
.i-card::after{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.5;transition:opacity .7s var(--ease-out);
 background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 38%)}
.i-c1{background:linear-gradient(168deg,#FCFCFD 0%,var(--g50) 42%,#EAEAED 100%)}
.i-c2{background:linear-gradient(168deg,#E6E6E9 0%,#DCDCE0 48%,#CFCFD3 100%);--edge:rgba(23,24,26,.09)}
.i-c3{background:linear-gradient(168deg,#303134 0%,var(--g800) 46%,#1B1C1E 100%);color:var(--g50);--edge:rgba(255,255,255,.07);
 box-shadow:0 0 0 1px var(--edge),0 1px 0 rgba(255,255,255,.1) inset,0 2px 3px rgba(14,15,17,.14),0 22px 44px -26px rgba(14,15,17,.5),0 60px 90px -60px rgba(14,15,17,.42)}
.i-c3::after{background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 38%)}
.i-no{position:relative;margin:0;display:flex;align-items:center;gap:14px;font:500 12px/1 var(--sans);letter-spacing:.22em;font-variant-numeric:tabular-nums}
.i-no span:last-child{opacity:.45}
.i-no i{flex:1;height:1px;background:currentColor;opacity:.16}
.i-ghost{position:absolute;z-index:-1;right:-.07em;top:calc(clamp(26px,3.6vh,40px) + 4.2vh);font:700 23vh/.74 var(--display);letter-spacing:-.06em;color:currentColor;opacity:.034;pointer-events:none;user-select:none}
.i-text{align-self:end}
.i-ct{margin:0;font:600 5.4vh/1 var(--display);letter-spacing:-.032em}
.i-ct span{display:block}
.i-rule{display:block;width:30px;height:1px;margin:3.2vh 0 2.6vh;background:currentColor;opacity:.4;transform-origin:left;transition:transform .7s var(--ease-out),opacity .7s}
.i-cb{margin:0;max-width:30ch;text-wrap:pretty;font:400 max(16px,1.9vh)/1.52 var(--sans);letter-spacing:.004em;color:var(--g600)}
.i-c2 .i-cb{color:var(--g700)}
.i-c3 .i-cb{color:#ABACB1}
@media (hover:hover){
 .i-card:hover{--edge:rgba(23,24,26,.14);transform:translate3d(0,-6px,0);
  box-shadow:0 0 0 1px var(--edge),0 1px 0 rgba(255,255,255,.85) inset,0 3px 5px rgba(14,15,17,.07),0 30px 54px -28px rgba(14,15,17,.38),0 78px 110px -64px rgba(14,15,17,.34)}
 .i-c3:hover{--edge:rgba(255,255,255,.13);box-shadow:0 0 0 1px var(--edge),0 1px 0 rgba(255,255,255,.12) inset,0 3px 5px rgba(14,15,17,.16),0 30px 54px -28px rgba(14,15,17,.56),0 78px 110px -64px rgba(14,15,17,.46)}
 .i-card:hover::after{opacity:1}
 .i-card:hover .i-rule{transform:scaleX(2.2);opacity:.6}
}

/* ── 5 · Contatto: the room of the film, in grey; the last word ──────────────────────────── */
/* A defined object in the space, not a full-width banner: centred, at most 1060 px, golden-ish proportion. */
.s-cta{position:relative;padding:14vh var(--gut) 18vh;background:linear-gradient(180deg,var(--g200) 0,#D3D3D7 100%)}
.cta-slab{position:relative;isolation:isolate;overflow:hidden;width:100%;max-width:1060px;margin:0 auto;aspect-ratio:1.62;max-height:80vh;min-height:520px;border-radius:24px;background:#8C8A88;
 box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 2px 4px rgba(14,15,17,.12),0 40px 80px -40px rgba(14,15,17,.55),0 90px 140px -70px rgba(14,15,17,.45)}
.cta-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;transform:scale(var(--zoom,1.1));transform-origin:50% 40%;will-change:transform}
/* A quiet veil that keeps the wall readable without flattening the light. */
.cta-slab::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(245,245,247,.16) 0%,rgba(245,245,247,0) 40%,rgba(24,25,27,0) 62%,rgba(24,25,27,.4) 100%)}
.cta-content{position:absolute;z-index:1;left:30%;top:15%;right:9%}
.cta-title{margin:0;font:600 clamp(40px,3.7vw,54px)/1 var(--display);letter-spacing:-.032em;color:var(--site-ink)}
.cta-actions{display:flex;align-items:center;gap:30px;margin-top:4.6vh}
.btn-primary{--bx:50%;--by:50%;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:18px;height:66px;padding:0 30px 0 34px;border-radius:999px;
 background:var(--g800);color:var(--g50);font:500 16px/1 var(--sans);letter-spacing:.01em;cursor:pointer;
 box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 18px 36px -16px rgba(10,11,12,.7);transform:translate3d(var(--tx,0),var(--ty,0),0);transition:transform .5s var(--ease-out),box-shadow .5s,color .45s}
.btn-primary:hover{color:var(--g800)}
.btn-primary:active{transform:translate3d(var(--tx,0),var(--ty,0),0) scale(.97)}
.btn-fill{position:absolute;z-index:-1;inset:0;background:var(--g50);clip-path:circle(0% at var(--bx) var(--by));transition:clip-path .65s var(--ease-out)}
.btn-primary:hover .btn-fill,.btn-primary:focus-visible .btn-fill{clip-path:circle(150% at var(--bx) var(--by))}
.btn-primary:focus-visible{color:var(--g800);outline:2px solid var(--g800)!important;outline-offset:5px!important;border-radius:999px!important}
.btn-arrow{width:22px;height:12px;transition:transform .6s var(--ease-out)}
.btn-primary:hover .btn-arrow{transform:translateX(5px)}
.btn-ghost{position:relative;font:500 15px/1 var(--sans);text-decoration:none;padding:8px 0;color:var(--site-ink)}
.btn-ghost::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left;transition:transform .5s var(--ease-out)}
.btn-ghost:hover::after{transform:scaleX(.35)}
.cta-status{display:inline-block;margin:3vh 0 0;max-width:52ch;padding:12px 16px;border-radius:12px;background:rgba(245,245,247,.9);box-shadow:0 10px 30px -18px rgba(10,11,12,.6);font:400 15px/1.5 var(--sans);color:var(--site-ink);opacity:0;transform:translateY(6px);transition:opacity .5s,transform .6s var(--ease-out)}
.cta-status.on{opacity:1;transform:none}

/* ── Footer ───────────────────────────────────────────────────────────────────────────────── */
.site-foot{background:var(--g900);color:var(--g50);padding:14vh 0 44px}
.f-mark{margin:0;font:500 clamp(120px,15.4vw,300px)/.8 var(--sans);letter-spacing:-.065em;color:#3F4044;white-space:nowrap;user-select:none}
.f-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start;margin-top:8vh;padding-top:28px;border-top:1px solid rgba(255,255,255,.1)}
.f-claim{grid-column:1/4;margin:0;font:500 11px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#B3B4B9}
.f-links{grid-column:4/9;display:flex;flex-wrap:wrap;gap:12px 28px;list-style:none;margin:0;padding:0}
.f-links a{font:400 15px/1 var(--sans);text-decoration:none;color:#D9D9DD;transition:color .3s}
.f-links a:hover{color:var(--g50)}
.f-legal{grid-column:9/13;margin:0;font:400 13px/1.55 var(--sans);color:#A6A7AC}

/* ── Reduced motion: no spatial movement, opacity and state changes remain ────────────────── */
@media (prefers-reduced-motion:reduce){
 .js-site .reveal .ln>span,.js-site .reveal:not(:has(.ln)),.js-site .card-shell.reveal{transform:none!important;transition:opacity .5s ease-out!important}
 .card,.c-visual,.c-text{transform:none!important}
 .i-card,.i-card:hover,.i-rule{transform:none!important}
 .btn-fill,.btn-primary,.btn-arrow,#sitenav{transition-duration:.01s!important}
 .cta-photo{transform:none}
}

/* ── Narrow screens (desktop is the target; this keeps the site readable, not designed) ──── */
@media (max-width:900px){
 :root{--gut:22px}
 #sitenav{gap:14px;padding-left:16px}.sn-links,.sn-film{display:none}
 .s-head{display:block}.s-title{font-size:44px}.s-lede,.n-note,.l-intro{margin-top:20px}
 .cards{display:flex;flex-direction:column;gap:20px}.card-shell{height:auto}.card{min-height:380px}.c-silenzio .c-title,.c-title{font-size:52px}
 .c-efficienza,.c-controllo{grid-template-columns:1fr}.c-controllo .c-visual{grid-column:1;grid-row:1;width:60%}.c-controllo .c-text{grid-row:2}
 .fig{display:block}.fig-num,.f-flap .fig-num{font-size:120px}.fig-cap{margin-top:20px}.f-zone .fig-ruler{display:none}
 .lab{display:block}.lab-panel{margin-top:30px}
 .m-grid{display:block}.m-visual{position:relative;top:0;height:60vh}.m-step{min-height:auto;padding:8vh 0;opacity:1}
 .cta-content{left:22px;right:22px}.cta-title{font-size:46px}
 .f-row{display:block}.f-row>*{margin-top:20px}.f-mark{font-size:22vw}
}