/* ============================================================
   FABBRICA PIXEL v2 — "VELOCITÀ"
   Futurismo italiano × paleta do logo. Fundo claro (bianco carrara),
   tipografia condensada inclinada, velocidade como linguagem.
   Tokens (derivados do logo fb-logo.png):
           carrara #F2F1ED · ink #111114 (preto original)
           corsa → arancio #D76418 (laranja do logo)
           asfalto #4E5A64 · verde #008C45 (tricolore, mínimo)
   Type:   Anton (display) · Inter Tight (body) · Space Mono (data)
   ============================================================ */

:root{
  --carrara:#F2F1ED;
  --carrara-2:#E9E7E0;
  --ink:#111114;
  --corsa:#D76418;
  --corsa-deep:#A84A10;
  --asfalto:#4E5A64;
  --verde:#008C45;
  --line:#D5D2C9;
  --maxw:1320px;
  --gutter:clamp(20px,4vw,60px);
  --font-d:"Anton",sans-serif;
  --font-b:"Inter Tight",sans-serif;
  --font-m:"Space Mono",monospace;
  --ease:cubic-bezier(.76,0,.24,1);
  --skew:-6deg;
}

*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:clip (not hidden) kills any horizontal scroll / zoomed-out
   dead-strip on mobile WITHOUT turning the page into a scroll container —
   position:sticky (story map, funnel, FAQ heads) keeps working. */
html{scroll-behavior:smooth;overflow-x:clip}
body{
  background:var(--carrara);
  color:var(--ink);
  font-family:var(--font-b);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  width:100%;
}
/* last line of defence: a stray transform/marquee never widens the viewport */
main{overflow-x:clip}
/* long unbreakable strings (URLs, long IT/PT words) wrap instead of pushing wide */
h1,h2,h3,h4,p,li,blockquote,figcaption,.display,.lead,.eyebrow,.mono{overflow-wrap:break-word}
/* grid/flex children default to min-width:auto and refuse to shrink below their
   content — that is what blows tracks past the screen edge. Reset it on every
   multi-column block that goes edge-to-edge on a phone. */
.giro,.leak-item,.leak-panel,.sf-row,.sf-foot,.ritmo-row,.svc-detail,.pain-head,
.cta-grid,.about-split,.contact-grid,.booking,.manifesto-split,.story-wrap,
.mt-wrap,.mt-faq-grid,.f1-grid,.hero-sub,.mt-hero-foot,.telemetry,.tappe,
.values,.diffs,.plans,.patto,.works-grid,.footer-main{min-width:0}
.giro>*,.leak-item>*,.leak-panel>*,.sf-row>*,.sf-foot>*,.ritmo-row>*,.svc-detail>*,
.pain-head>*,.cta-grid>*,.about-split>*,.contact-grid>*,.booking>*,
.manifesto-split>*,.story-wrap>*,.mt-wrap>*,.f1-grid>*,.hero-sub>*,
.mt-hero-foot>*,.sf-cell,.sf-phone,.sf-phone>*{min-width:0}
::selection{background:var(--corsa);color:var(--carrara)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:3px solid var(--corsa);outline-offset:3px}

/* ---------- preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:999;background:var(--ink);color:var(--carrara);
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:clamp(24px,4vw,56px);
}
.preloader .pl-count{
  font-family:var(--font-d);font-size:clamp(5rem,18vw,15rem);line-height:.85;
  font-style:italic;letter-spacing:-.02em;
}
.preloader .pl-label{
  font-family:var(--font-m);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  writing-mode:vertical-rl;color:var(--corsa);
}
.preloader.done{pointer-events:none}
.reduced-motion .preloader,.no-js .preloader{display:none}

/* ---------- typographic voice ---------- */
.display{
  font-family:var(--font-d);
  font-weight:400;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.005em;
}
.display i,.display em{font-style:italic;color:var(--corsa)}
h1.display{font-size:clamp(3.2rem,10.5vw,9.5rem)}
h2.display{font-size:clamp(2.2rem,5.6vw,4.6rem)}
.eyebrow{
  font-family:var(--font-m);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--asfalto);display:inline-flex;align-items:center;gap:12px;
}
/* flag chip: follows the page language
   IT tricolore · PT-BR verde/ouro/azul · EN Union Jack blue/white/red */
:root{
  /* bandeira IT mantém o vermelho literal — não segue o accent do tema */
  --flag-a:var(--verde);--flag-b:var(--carrara);--flag-c:#D8000C;
}
html[lang="pt-BR"]{--flag-a:#009C3B;--flag-b:#FFDF00;--flag-c:#009C3B}
html[lang="en"]{--flag-a:#012169;--flag-b:#FFFFFF;--flag-c:#C8102E}
.eyebrow::before{
  content:"";width:34px;height:8px;flex-shrink:0;
  background:linear-gradient(90deg,var(--flag-a) 33%,var(--flag-b) 33% 66%,var(--flag-c) 66%);
  border:1px solid var(--line);
}
.lead{font-size:clamp(1.05rem,1.6vw,1.35rem);color:var(--asfalto);max-width:54ch;font-weight:450}
.mono{font-family:var(--font-m)}

/* skewed reveal lines */
/* The mask hides the letters below the line while they rise. It was also
   slicing the diacritics off capitals — "VOCÊ NÃO VÊ" rendered as "VOCE NAO
   VE" — so the box is opened at the top too, and pulled back by the same
   amount so the vertical rhythm doesn't move. */
.reveal-line{
  display:block;overflow:hidden;
  padding-bottom:.06em;margin-bottom:-.06em;
  padding-top:.2em;margin-top:-.2em;
}
.reveal-line>span{display:inline-block;transform:translateY(115%) rotate(2deg)}
.no-js .reveal-line>span,.reduced-motion .reveal-line>span{transform:none}

/* velocity skew targets */
[data-skew]{will-change:transform}

/* ---------- custom cursor ---------- */
html.has-cursor body{cursor:none}
html.has-cursor a,html.has-cursor button{cursor:none}
html.has-cursor input,html.has-cursor textarea,html.has-cursor select{cursor:auto}
.fp-cursor-dot{
  position:fixed;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%;
  background:var(--corsa);z-index:9999;pointer-events:none;
}
.fp-cursor-ring{
  position:fixed;top:-22px;left:-22px;width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--ink);z-index:9998;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),
             background-color .3s,border-color .3s,opacity .25s;
  margin:0;
}
.fp-cursor-ring span{
  font-family:var(--font-m);font-size:.6rem;letter-spacing:.1em;color:var(--carrara);
  opacity:0;transition:opacity .25s;
}
.fp-cursor-ring.is-link{
  width:64px;height:64px;margin:-10px 0 0 -10px;
  border-color:var(--corsa);background:rgba(215,100,24,.12);
}
.fp-cursor-ring.is-drag{
  width:76px;height:76px;margin:-16px 0 0 -16px;
  background:var(--ink);border-color:var(--ink);
}
.fp-cursor-ring.is-drag span{opacity:1}
.fp-cursor-ring.is-down{transform:scale(.82)}
@media (hover:none){.fp-cursor-dot,.fp-cursor-ring{display:none}}

/* ---------- speed HUD ---------- */
.speed-hud{
  position:fixed;left:var(--gutter);bottom:22px;z-index:90;pointer-events:none;
  display:flex;align-items:baseline;gap:8px;
  font-family:var(--font-m);color:var(--asfalto);
  opacity:.85;
}
.speed-hud .sh-label{font-size:.56rem;letter-spacing:.3em}
.speed-hud .sh-num{
  font-family:var(--font-d);font-size:1.3rem;font-style:italic;color:var(--ink);
  min-width:3ch;font-variant-numeric:tabular-nums;line-height:1;
}
.speed-hud .sh-unit{font-size:.6rem;letter-spacing:.14em}
.speed-hud .sh-bar{
  width:74px;height:3px;background:var(--line);overflow:hidden;align-self:center;
}
.speed-hud .sh-bar b{
  display:block;height:100%;background:var(--corsa);
  transform:scaleX(0);transform-origin:left center;transition:transform .12s linear;
}
.speed-hud.is-fast .sh-num{color:var(--corsa)}
@media (max-width:900px){.speed-hud{display:none}}

/* ---------- char-split titles ---------- */
.ch{display:inline-block;will-change:transform;min-width:.08em}
/* per-letter spans make every letter a break opportunity; the word wrapper
   keeps line breaks at spaces where they belong */
.wd{display:inline-block;white-space:nowrap}

/* ---------- tiltable cards ---------- */
.tiltable{will-change:transform;transform-style:preserve-3d}

/* ---------- hero pixel swarm ---------- */
/* three.js writes an inline pixel width on the canvas from hero.clientWidth at
   init; force it to track the container so a stale value can't crop or widen */
.hero-pixels{overflow:hidden}
.hero-pixels canvas{display:block;width:100%!important;height:100%!important}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid transparent;transition:.4s;
}
.site-header.scrolled{background:rgba(242,241,237,.9);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.header-inner{
  max-width:none;margin:0;padding:0 var(--gutter);
  height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{
  font-family:var(--font-d);text-transform:uppercase;font-size:1.15rem;letter-spacing:.02em;
  display:flex;align-items:center;gap:10px;
}
.logo img{height:26px;width:auto;display:block}
.footer-brand .logo img{height:30px}
.logo .logo-img--white{display:none}
.site-header--dark-hero .logo .logo-img--dark{display:none}
.site-header--dark-hero .logo .logo-img--white{display:block}
.site-header--dark-hero.scrolled .logo .logo-img--dark{display:block}
.site-header--dark-hero.scrolled .logo .logo-img--white{display:none}
.logo .fp-mark{
  display:inline-block;background:var(--corsa);color:var(--carrara);
  font-style:italic;padding:2px 8px 2px 6px;transform:skewX(-12deg);
}
.logo .fp-mark span{display:inline-block;transform:skewX(12deg)}
.main-nav{display:flex;gap:4px}
.main-nav a{
  font-family:var(--font-m);font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;
  padding:8px 16px;color:var(--asfalto);position:relative;overflow:hidden;transition:color .3s;
}
.main-nav a::before{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:100%;
  background:var(--ink);transform:translateY(101%) skewY(-4deg);transition:transform .35s var(--ease);z-index:-1;
}
.main-nav a:hover{color:var(--carrara)}
.main-nav a:hover::before{transform:translateY(0) skewY(0)}
.main-nav a[aria-current="page"]{color:var(--corsa)}
.header-actions{display:flex;align-items:center;gap:14px}
.lang-switch{display:flex;border:1px solid var(--ink)}
.lang-switch a{
  font-family:var(--font-m);font-size:.66rem;letter-spacing:.08em;padding:5px 9px;color:var(--asfalto);transition:.25s;
}
.lang-switch a:hover{color:var(--ink)}
.lang-switch a.active{background:var(--ink);color:var(--carrara)}
.burger{display:none;flex-direction:column;gap:5px;padding:10px;z-index:110}
.burger span{width:26px;height:3px;background:var(--ink);transition:.35s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--font-d);font-size:1rem;letter-spacing:.05em;text-transform:uppercase;
  padding:18px 34px;background:var(--ink);color:var(--carrara);
  transform:skewX(-8deg);transition:background .3s,transform .3s var(--ease);
}
.btn>*{display:inline-block;transform:skewX(8deg)}
.btn:hover{background:var(--corsa)}
.btn .arrow{transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:skewX(8deg) translateX(8px)}
.btn--red{background:var(--corsa)}
.btn--red:hover{background:var(--ink)}
.btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--carrara)}
.btn--sm{padding:10px 20px;font-size:.72rem;letter-spacing:.06em;gap:0}
.main-nav-cta{margin-left:10px}
@media(max-width:860px){.main-nav-cta{margin:18px 0 0}}

/* ---------- hero ---------- */
.hero{min-height:100svh;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding-top:120px}
.hero-scene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#5c0e17}
.hero-scene .hero-media{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;
  object-position:8% 18%;transform:scale(1.08);transition:transform .4s cubic-bezier(.2,.7,.2,1);will-change:transform}
.hero-scene::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(95deg,rgba(22,4,8,.90) 0%,rgba(22,4,8,.74) 40%,rgba(22,4,8,.44) 60%,rgba(22,4,8,.06) 73%,rgba(22,4,8,0) 83%),
    linear-gradient(to top,rgba(22,4,8,.90) 0%,rgba(22,4,8,.34) 26%,rgba(22,4,8,0) 54%)}
.hero-inner{position:relative;z-index:2}
#hero-canvas{position:absolute;inset:0;z-index:4;pointer-events:none}

/* dark hero: light copy over the photo */
.hero .eyebrow{color:var(--carrara)}
.hero h1{color:var(--carrara)}
.hero .lead{color:rgba(242,241,237,.88)}
.hero .hero-spec{color:rgba(242,241,237,.66)}
.hero .btn--line{color:var(--carrara);box-shadow:inset 0 0 0 2px rgba(242,241,237,.72)}
.hero .btn--line:hover{background:var(--carrara);color:var(--ink)}
/* keep the spec meta on the dark left band, clear of the subject */
.hero .hero-sub{align-items:flex-end}
.hero .hero-spec{flex-basis:100%;order:3;text-align:left;color:rgba(242,241,237,.7);margin-top:4px}
.hero .hero-spec b{color:var(--carrara)}
@media (max-width:640px){
  .hero-scene .hero-media{object-position:56% 10%}
  .hero-scene::after{background:linear-gradient(to top,rgba(18,3,6,.94) 0%,rgba(18,3,6,.90) 55%,rgba(18,3,6,.86) 100%)}
  .hero h1{max-width:none}
}
.nebbia-hint{
  position:absolute;top:118px;right:var(--gutter);z-index:5;margin:0;
  font-family:var(--font-m);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--asfalto);opacity:1;transition:opacity .9s ease;
}
.nebbia-hint.is-gone{opacity:0}
.hero-inner{width:100%;padding:0 var(--gutter)}
.hero .eyebrow{margin-bottom:20px}
.hero h1{margin-bottom:8px;max-width:11ch}
.hero .lead{max-width:44ch}
.hero h1 .out{
  color:transparent;-webkit-text-stroke:2px var(--carrara);
}
.hero-sub{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px;
  padding:36px 0 44px;
}
.hero-ctas{display:flex;gap:18px;flex-wrap:wrap}
.hero-spec{
  font-family:var(--font-m);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--asfalto);text-align:right;line-height:2.1;
}
.hero-spec b{color:var(--corsa);font-weight:400}

/* speed strip under hero */
.speed-strip{
  background:var(--ink);color:var(--carrara);overflow:hidden;white-space:nowrap;
  padding:16px 0;border-top:4px solid var(--corsa);
}
.speed-strip .track{display:inline-flex;will-change:transform}
.speed-strip span{
  font-family:var(--font-d);font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;
  padding:0 28px;display:inline-flex;align-items:center;gap:28px;font-style:italic;
}
.speed-strip span::after{content:"///";color:var(--corsa);font-style:normal}

/* ---------- sections ---------- */
.section{padding:clamp(84px,10vw,150px) 0;position:relative}
.section-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section-head{margin-bottom:clamp(40px,6vw,80px)}
.section-head .eyebrow{margin-bottom:20px}
.section-head .lead{margin-top:22px}
.section--dark{background:var(--ink);color:var(--carrara)}
.section--dark .lead{color:#A9A9B2}
.section--dark .eyebrow{color:#A9A9B2}

/* ---------- stats: race telemetry ---------- */
.telemetry{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:3px solid var(--ink)}
.tele{padding:32px 26px 40px;border-right:1px dashed var(--line);position:relative}
.tele:last-child{border-right:0}
.tele .num{
  font-family:var(--font-d);font-style:italic;font-size:clamp(2.6rem,4.6vw,4.4rem);line-height:1;
}
.tele .num .unit{color:var(--corsa);font-size:.5em;font-style:normal}
.tele .lbl{font-family:var(--font-m);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--asfalto);margin-top:14px}
.tele .gauge{height:6px;background:var(--carrara-2);margin-top:18px;overflow:hidden}
.tele .gauge i{display:block;height:100%;background:var(--corsa);transform:scaleX(0);transform-origin:left}

/* ---------- horizontal scroll services (home) ---------- */
.hscroll{overflow:hidden}
.hscroll-pin{display:flex;align-items:stretch;will-change:transform}
.hslide{
  flex:0 0 auto;width:min(480px,82vw);margin-right:2px;
  background:var(--carrara);border:2px solid var(--ink);
  padding:44px 36px;display:flex;flex-direction:column;gap:20px;position:relative;
}
.hslide .code{
  font-family:var(--font-d);font-style:italic;font-size:3.2rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--corsa);
}
.hslide h3{font-family:var(--font-d);text-transform:uppercase;font-size:1.6rem;line-height:1}
.hslide p{color:var(--asfalto);flex:1}
.hslide .more{
  font-family:var(--font-m);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--corsa);
  display:inline-flex;gap:10px;align-items:center;
}
.hslide:hover{background:var(--ink);color:var(--carrara)}
.hslide:hover p{color:#A9A9B2}
.hscroll-sequenced .hslide{
  opacity:0;transform:translateY(42px) scale(.975);pointer-events:none;
  transition:opacity .55s var(--ease),transform .7s var(--ease),background-color .3s,color .3s;
}
.hscroll-sequenced .hslide.is-visible{opacity:1;transform:none;pointer-events:auto}
.hscroll-hint{
  font-family:var(--font-m);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--asfalto);
  padding:0 var(--gutter);margin-top:28px;display:flex;gap:14px;align-items:center;
}
.hscroll-hint::after{content:"→→→";color:var(--corsa);letter-spacing:0}

/* fallback: services grid on touch/small */
@media(hover:none),(max-width:900px){
  .hscroll-pin{flex-wrap:wrap;gap:16px}
  .hslide{width:100%;margin-right:0}
  .hscroll-hint{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hscroll-sequenced .hslide{opacity:1;transform:none;pointer-events:auto;transition:none}
}

/* ---------- giri (process laps) ---------- */
.giri{counter-reset:none;display:grid;gap:0}
.giro{
  display:grid;grid-template-columns:minmax(90px,140px) 1fr 1.1fr;gap:36px;align-items:baseline;
  padding:46px 0;border-top:2px solid rgba(242,241,237,.16);
}
.giro:last-child{border-bottom:2px solid rgba(242,241,237,.16)}
.giro .lap{
  font-family:var(--font-d);font-style:italic;font-size:clamp(1.8rem,3.4vw,3rem);line-height:1;color:var(--corsa);
}
.giro h3{font-family:var(--font-d);text-transform:uppercase;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1}
.giro p{color:#A9A9B2}

/* ---------- pricing: griglia di partenza ---------- */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.plan{
  border:2px solid var(--ink);padding:48px 40px;position:relative;background:var(--carrara);
  transition:transform .35s var(--ease),box-shadow .35s;
}
.plan:hover{transform:translate(-6px,-6px);box-shadow:10px 10px 0 var(--corsa)}
.plan--hot{background:var(--ink);color:var(--carrara)}
.plan--hot .plan-for{color:#A9A9B2}
.plan--hot::before{
  content:attr(data-flag);position:absolute;top:-14px;right:20px;background:var(--corsa);color:var(--carrara);
  font-family:var(--font-m);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;padding:7px 14px;
  transform:skewX(-8deg);
}
.plan .plan-name{font-family:var(--font-m);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--corsa)}
.plan .plan-price{font-family:var(--font-d);font-style:italic;font-size:clamp(3rem,5vw,4.6rem);margin:14px 0 6px;line-height:1}
.plan .plan-price small{font-size:.3em;font-style:normal;color:var(--asfalto);font-family:var(--font-m);letter-spacing:.1em}
.plan--hot .plan-price small{color:#A9A9B2}
.plan .plan-for{color:var(--asfalto);margin-bottom:28px}
.plan ul{list-style:none;margin-bottom:38px;display:grid;gap:12px}
.plan li{display:flex;gap:12px}
.plan li::before{content:"»";color:var(--corsa);font-family:var(--font-m);flex-shrink:0}

/* ---------- booking: pit stop calendar ---------- */
.booking{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:stretch}
.booking-cal,.booking-side{
  border:2px solid var(--ink);background:var(--carrara);padding:36px 32px;
  display:flex;flex-direction:column;
}
.booking-step{
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--corsa);
  margin-bottom:22px;
}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.cal-month{
  font-family:var(--font-d);text-transform:uppercase;font-style:italic;
  font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:.02em;
}
.cal-nav{
  font-family:var(--font-m);font-size:1.05rem;width:44px;height:44px;flex-shrink:0;
  border:2px solid var(--ink);display:grid;place-items:center;
  transition:background .25s,color .25s,transform .25s var(--ease);
}
.cal-nav:hover:not(:disabled){background:var(--ink);color:var(--carrara);transform:skewX(-8deg)}
.cal-nav:disabled{opacity:.25;cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-wd{
  font-family:var(--font-m);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--asfalto);text-align:center;padding:6px 0 10px;
}
.cal-cell{
  font-family:var(--font-m);font-size:.85rem;aspect-ratio:1;min-height:40px;
  border:1px solid var(--line);display:grid;place-items:center;position:relative;
  transition:background .2s,color .2s,border-color .2s,transform .25s var(--ease);
}
.cal-cell--pad{border:0;pointer-events:none}
.cal-cell:disabled{color:var(--line);border-color:transparent;cursor:default;text-decoration:line-through;text-decoration-thickness:1px}
.cal-cell:not(:disabled):hover{border-color:var(--ink);transform:skewX(-8deg)}
.cal-cell.is-today:not(:disabled)::after{
  content:"";position:absolute;bottom:5px;width:4px;height:4px;background:var(--corsa);border-radius:50%;
}
.cal-cell.sel{background:var(--corsa);color:var(--carrara);border-color:var(--corsa);transform:skewX(-8deg);font-weight:700}
.cal-cell.sel:hover{transform:skewX(-8deg)}
.slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:26px}
.slot{
  font-family:var(--font-m);font-size:.8rem;letter-spacing:.06em;padding:12px 6px;
  border:2px solid var(--ink);text-align:center;
  transition:background .2s,color .2s,opacity .2s,border-color .2s,transform .25s var(--ease);
}
.slot:disabled{opacity:.22;cursor:default}
.slot:not(:disabled):hover{background:var(--ink);color:var(--carrara);transform:skewX(-8deg)}
.slot.sel{background:var(--corsa);border-color:var(--corsa);color:var(--carrara);transform:skewX(-8deg)}
.booking-summary{
  margin-top:auto;font-family:var(--font-m);font-size:.82rem;letter-spacing:.04em;
  color:var(--asfalto);border-top:2px solid var(--ink);padding:20px 0;
}
.booking-summary b{color:var(--ink);font-weight:700}
.booking-confirm{justify-content:center}
.booking-confirm:disabled{opacity:.35;cursor:default;pointer-events:none}
.booking-side .form-note{padding:14px 0 0}

/* ---------- giant marquee ---------- */
.giant-marquee{overflow:hidden;padding:34px 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--carrara)}
.giant-marquee--flush{border-top:0}
.giant-marquee .track{display:inline-flex;white-space:nowrap;will-change:transform}
.giant-marquee span{
  font-family:var(--font-d);font-style:italic;text-transform:uppercase;font-size:clamp(3.4rem,9vw,8rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--ink);padding-right:.5em;
}
.giant-marquee span.fill{color:var(--corsa);-webkit-text-stroke:0}

/* ---------- CTA: finish line ---------- */
.cta-block h2{margin:20px 0 30px}
.cta-block .out{color:transparent;-webkit-text-stroke:2px currentColor}
.section--dark .cta-block .out{-webkit-text-stroke:2px var(--carrara)}
.cta-section{position:relative;overflow:hidden}
.cta-line{position:absolute;top:0;left:0;right:0;height:2px;background:rgba(242,241,237,.1);overflow:hidden}
.cta-line::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:34%;
  background:linear-gradient(90deg,transparent,rgba(215,100,24,.35) 30%,var(--corsa) 62%,var(--carrara) 100%);
  transform:translateX(-110%);
  animation:cta-line-sweep 4.8s cubic-bezier(.65,.05,.35,1) infinite;
}
@keyframes cta-line-sweep{60%,100%{transform:translateX(330%)}}
.cta-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:56px;align-items:center;padding-top:34px}
.cta-copy{container-type:inline-size;min-width:0}
.cta-copy h2{margin:20px 0 30px;white-space:nowrap;font-size:clamp(1.4rem,9cqw,3.8rem)}
.cta-copy .out{color:transparent;-webkit-text-stroke:2px var(--carrara)}
.cta-ring{
  position:relative;width:clamp(200px,22vw,280px);aspect-ratio:1;justify-self:center;
  display:grid;place-items:center;color:var(--carrara);
}
.cta-ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cta-ring text{
  fill:var(--carrara);font-family:var(--font-m);font-size:13.5px;letter-spacing:.14em;font-weight:700;
}
.ring-arrow{
  width:40%;aspect-ratio:1;background:var(--corsa);display:grid;place-items:center;
  font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1;transform:skewX(-8deg);
  transition:background .3s,color .3s,transform .35s var(--ease);
}
.cta-ring:hover .ring-arrow{background:var(--carrara);color:var(--corsa);transform:skewX(-8deg) scale(1.08)}
@media(max-width:860px){
  .cta-grid{grid-template-columns:1fr;gap:44px}
  .cta-ring{justify-self:start}
}

/* ---------- about: workshop rhythm + pact ---------- */
.ritmo{border-top:2px solid var(--ink)}
.ritmo-row{
  display:grid;grid-template-columns:minmax(220px,1fr) 1.5fr;gap:12px 44px;
  padding:36px 0;border-bottom:2px solid var(--ink);align-items:start;
  transition:padding-left .35s var(--ease);
}
.ritmo-row h3{
  font-family:var(--font-d);font-style:italic;text-transform:uppercase;
  font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:.95;transition:color .3s;
}
.ritmo-row p{color:var(--asfalto);max-width:58ch}
.ritmo-row:hover{padding-left:18px}
.ritmo-row:hover h3{color:var(--corsa)}
.patto{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px}
.patto-item{border-left:3px solid var(--corsa);padding:6px 0 6px 26px}
.patto-item h3{font-family:var(--font-d);text-transform:uppercase;font-size:1.3rem;margin-bottom:10px;letter-spacing:.02em}
.patto-item p{color:#A9A9B2}

/* ---------- about: where (world panel — da Brescia al mondo) ---------- */
.where-panel{position:relative;background:var(--ink);border:2px solid var(--ink);box-shadow:14px 14px 0 var(--corsa)}
.where-panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(242,241,237,.03) 0 1px,transparent 1px 4px)}
.wp-top,.wp-foot{
  display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 18px;
  font-family:var(--font-m);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#A9A9B2;
}
.wp-top{border-bottom:1px solid rgba(242,241,237,.12)}
.wp-foot{border-top:1px solid rgba(242,241,237,.12);letter-spacing:.08em;text-transform:none}
.wp-live{display:inline-flex;align-items:center;gap:8px;color:var(--corsa);letter-spacing:.2em;white-space:nowrap}
.wp-live i{width:7px;height:7px;border-radius:50%;background:var(--corsa);animation:wp-blink 1.1s steps(2,end) infinite}
@keyframes wp-blink{50%{opacity:.12}}
.where-panel svg{display:block;width:100%;height:auto}
.wp-grid{fill:none;stroke:rgba(242,241,237,.06)}
.wp-arc{fill:none;stroke:rgba(242,241,237,.18);stroke-width:1.4;stroke-dasharray:3 5;transition:stroke .35s}
.wp-pulse{fill:var(--corsa);offset-rotate:0deg;animation:wp-travel 3s linear infinite}
@keyframes wp-travel{
  0%{offset-distance:0%;opacity:0}
  10%{opacity:1}
  82%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}
.wp-ring{fill:none;stroke:rgba(242,241,237,.3);transition:stroke .35s}
.wp-dot{fill:var(--carrara);transition:fill .35s}
.wp-name{fill:var(--carrara);font-family:var(--font-m);font-size:11.5px;font-weight:700;letter-spacing:.1em}
.wp-time{fill:#8B8B94;font-family:var(--font-m);font-size:10.5px;letter-spacing:.08em}
.wp-dist{fill:var(--corsa);font-family:var(--font-m);font-size:10px;letter-spacing:.08em;opacity:0;transition:opacity .35s}
.wp-route{cursor:pointer;outline:none}
.wp-route:hover .wp-arc,.wp-route.active .wp-arc,.wp-route:focus-visible .wp-arc{stroke:var(--corsa);stroke-dasharray:none}
.wp-route:hover .wp-dot,.wp-route.active .wp-dot,.wp-route:focus-visible .wp-dot{fill:var(--corsa)}
.wp-route:hover .wp-ring,.wp-route.active .wp-ring,.wp-route:focus-visible .wp-ring{stroke:var(--corsa)}
.wp-route:hover .wp-dist,.wp-route.active .wp-dist,.wp-route:focus-visible .wp-dist{opacity:1}
.wp-hub-dot{fill:var(--corsa)}
.wp-hub-ring{fill:none;stroke:rgba(215,100,24,.5)}
.wp-hub-ping{
  fill:none;stroke:var(--corsa);stroke-width:1.5;
  transform-box:fill-box;transform-origin:center;
  animation:wp-ping 2.6s cubic-bezier(.2,.6,.35,1) infinite;
}
@keyframes wp-ping{0%{transform:scale(.35);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.wp-hub-name{fill:var(--carrara);font-family:var(--font-d);font-size:15px;letter-spacing:.06em}
.wp-hub-sub{fill:#8B8B94;font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em}

/* ---------- page hero ---------- */
.page-hero{padding:190px 0 70px;position:relative;overflow:hidden}
.page-hero .eyebrow{margin-bottom:22px}
.page-hero .lead{margin-top:26px}
.page-hero .ghost{
  position:absolute;right:-2%;bottom:-6%;z-index:-1;
  font-family:var(--font-d);font-style:italic;text-transform:uppercase;
  font-size:clamp(8rem,26vw,24rem);line-height:.8;color:transparent;
  -webkit-text-stroke:1px var(--line);pointer-events:none;user-select:none;white-space:nowrap;
}

/* ---------- manifesto ---------- */
.manifesto p{
  font-family:var(--font-d);text-transform:uppercase;line-height:1.08;
  font-size:clamp(1.7rem,4.2vw,3.4rem);max-width:24ch;
}
.manifesto p .dim{color:var(--line);transition:color .3s}

/* ---------- manifesto: text + photo split ---------- */
.manifesto-split{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(40px,6vw,96px);align-items:center;
}
.manifesto-split .manifesto p{max-width:18ch}
.mani-photo{margin:0;position:relative;perspective:1100px}
.mani-photo-frame{
  position:relative;overflow:hidden;aspect-ratio:4/5;
  border:2px solid var(--ink);background:var(--ink);
  box-shadow:16px 16px 0 var(--corsa);
  transform-style:preserve-3d;
  transition:box-shadow .55s var(--ease);
}
.mani-photo img{
  width:100%;height:100%;object-fit:cover;object-position:56% center;transform:scale(1.06);
  filter:grayscale(1) contrast(1.06) brightness(.92);
  transition:filter .7s var(--ease);
  will-change:transform,filter;
}
.mani-photo:hover .mani-photo-frame{box-shadow:26px 26px 0 var(--corsa)}
.mani-photo:hover img{filter:grayscale(0) contrast(1.02) brightness(1)}
/* cursor spotlight */
.mani-photo-glare{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(215,100,24,.42),transparent 60%);
  mix-blend-mode:screen;transition:opacity .45s var(--ease);
}
.mani-photo:hover .mani-photo-glare{opacity:1}
/* scanline grain */
.mani-photo-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.12;mix-blend-mode:multiply;
  background:repeating-linear-gradient(0deg,rgba(17,17,20,.7) 0 1px,transparent 1px 3px);
}
/* spec plate */
.mani-photo-tag{
  position:absolute;left:-2px;bottom:-2px;z-index:2;
  display:inline-flex;align-items:center;gap:12px;
  background:var(--ink);color:var(--carrara);
  font-family:var(--font-m);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  padding:11px 18px;
}
.mani-photo-tag .mono{color:var(--corsa)}

.values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.value{border:2px solid var(--ink);padding:36px 30px;background:var(--carrara);transition:.3s var(--ease)}
.value:hover{background:var(--ink);color:var(--carrara)}
.value:hover p{color:#A9A9B2}
.value .mono{color:var(--corsa);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase}
.value h3{font-family:var(--font-d);text-transform:uppercase;margin:16px 0 10px;font-size:1.3rem}
.value p{color:var(--asfalto);transition:color .3s}

.about-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.coords{
  font-family:var(--font-m);font-size:.76rem;letter-spacing:.06em;line-height:2.3;color:var(--asfalto);
  border:2px solid var(--ink);padding:30px;background:#fff;
  box-shadow:8px 8px 0 var(--corsa);
}
.coords b{color:var(--ink);font-weight:700}

/* ---------- services detail ---------- */
.svc-detail{
  display:grid;grid-template-columns:150px 1fr 1fr;gap:44px;
  padding:58px 0;border-top:2px solid var(--ink);align-items:start;
}
.svc-detail:last-of-type{border-bottom:2px solid var(--ink)}
.svc-detail .code{
  font-family:var(--font-d);font-style:italic;font-size:2.6rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--corsa);
}
.svc-detail h2{font-family:var(--font-d);text-transform:uppercase;font-size:clamp(1.5rem,2.8vw,2.4rem);line-height:1;margin-bottom:16px}
.svc-detail .desc{color:var(--asfalto)}
.svc-detail ul{list-style:none;display:grid;gap:12px}
.svc-detail li{display:flex;gap:12px}
.svc-detail li::before{content:"»";color:var(--corsa);font-family:var(--font-m);flex-shrink:0}
.svc-detail .inc{font-family:var(--font-m);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--asfalto);margin-bottom:16px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:start}
.form{border:2px solid var(--ink);background:#fff}
.field{position:relative;border-bottom:2px solid var(--ink)}
.field label{
  position:absolute;top:12px;left:20px;font-family:var(--font-m);font-size:.6rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--asfalto);pointer-events:none;transition:color .3s;
}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;color:var(--ink);
  font:inherit;padding:36px 20px 14px;resize:vertical;
}
.field select{appearance:none;cursor:pointer}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;background:rgba(215,100,24,.05)}
.field:focus-within label{color:var(--corsa)}
.form .btn{margin:24px 20px 8px}
.form-note{font-family:var(--font-m);font-size:.66rem;color:var(--asfalto);letter-spacing:.04em;padding:8px 20px 24px}
.form-status{font-family:var(--font-m);font-size:.78rem;padding:12px 20px 0;color:var(--verde);display:none}

.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:2px solid var(--ink)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:24px 4px;font-family:var(--font-d);text-transform:uppercase;font-size:1.05rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-m);color:var(--corsa);font-size:1.4rem;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-a{color:var(--asfalto);padding:0 4px 26px;max-width:68ch}

/* ---------- story: le tappe ---------- */
.tappe{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tappa{
  border-top:8px solid;padding:26px 4px 0;
  border-image:linear-gradient(90deg,var(--flag-a) 33%,var(--flag-b) 33% 66%,var(--flag-c) 66%) 1;
  transition:transform .35s var(--ease);
}
.tappa:hover{transform:translateY(-8px)}
.tappa-n{
  font-family:var(--font-d);font-style:italic;font-size:2.6rem;line-height:1;display:block;
  color:transparent;-webkit-text-stroke:1.5px var(--ink);
}
.tappa-y{
  font-family:var(--font-m);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--corsa);
  display:block;margin:14px 0 8px;
}
.tappa h3{font-family:var(--font-d);text-transform:uppercase;font-size:1.25rem;line-height:1.05;margin-bottom:10px}
.tappa p{color:var(--asfalto);font-size:.94rem}
@media(max-width:1024px){.tappe{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.tappe{grid-template-columns:1fr}}

/* ---------- Lake Garda interactive map ---------- */
.story-wrap{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.story-map{position:sticky;top:100px}
.garda-map{width:100%;height:auto;display:block;overflow:visible}
.garda-map .lake{
  fill:rgba(17,17,20,.07);stroke:var(--ink);stroke-width:2.2;
  stroke-dasharray:1;stroke-dashoffset:1;
  filter:drop-shadow(3px 3px 0 rgba(215,100,24,.28));
}
.garda-map .graticule line{stroke:var(--line);stroke-width:1;stroke-dasharray:2 6}
.garda-map .graticule text{
  font-family:var(--font-m);font-size:9px;letter-spacing:.12em;fill:var(--asfalto);opacity:.7;
}
.garda-map .alps path{fill:none;stroke:var(--asfalto);stroke-width:1.2;opacity:.5;stroke-linejoin:round}
.garda-map .compass circle{fill:none;stroke:var(--asfalto);stroke-width:1}
.garda-map .compass .compass-n{fill:var(--corsa)}
.garda-map .compass text{font-family:var(--font-m);font-size:10px;fill:var(--asfalto);letter-spacing:.1em}
.garda-map .scalebar line{stroke:var(--asfalto);stroke-width:1}
.garda-map .scalebar text{font-family:var(--font-m);font-size:9px;fill:var(--asfalto);letter-spacing:.1em}
.garda-map .lake-label{fill:var(--line);letter-spacing:.34em;font-family:var(--font-m);font-size:11px;text-transform:uppercase}
.garda-map .m-label{
  font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;fill:var(--asfalto);
}
.garda-map .m-label--faint{fill:#B9B6AC}
.garda-map .m-label--hq{fill:var(--corsa);font-size:12px;font-weight:700}
.garda-map .m-label--arc{fill:var(--verde)}
.garda-map .m-dot{fill:var(--ink)}
.garda-map .m-dot--faint{fill:#B9B6AC}
.garda-map .m-dot--arc{fill:var(--verde)}
.garda-map .hq-dot{fill:var(--corsa)}
.garda-map .hq-pulse{
  fill:none;stroke:var(--corsa);stroke-width:1.5;transform-origin:83px 463px;
  animation:hq-pulse 2.6s ease-out infinite;
}
.garda-map .hq-pulse--2{animation-delay:1.3s}
@keyframes hq-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(5);opacity:0}}
.garda-map .radar{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:3 5;opacity:.55}
.garda-map .radar-sweep{
  stroke:var(--corsa);stroke-width:1.4;transform-origin:83px 463px;
  animation:radar-sweep 3.2s linear infinite;
}
@keyframes radar-sweep{to{transform:rotate(360deg)}}
.garda-map .route{
  fill:none;stroke:var(--corsa);stroke-width:2;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease);
}
.garda-map .arc{
  fill:none;stroke:var(--verde);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.4s var(--ease) .15s;
}
.map-layer{opacity:0;transition:opacity .6s}
.map-layer.on{opacity:1}
.map-layer.on .route,.map-layer.on .arc{stroke-dashoffset:0}
.tappe--story{grid-template-columns:1fr;gap:0}
.tappe--story .tappa{
  border-image:none;border-top:2px solid var(--line);padding:26px 4px;
  opacity:.45;transition:opacity .4s,transform .35s var(--ease);
}
.tappe--story .tappa:hover{transform:none}
.tappe--story .tappa.active{opacity:1;border-top-color:var(--corsa)}
.tappe--story .tappa.active .tappa-n{-webkit-text-stroke-color:var(--corsa)}

/* ---------- story side: telemetry contact form ---------- */
.story-side{max-width:640px}
.story-form{position:relative}
.sf-step{
  font-family:var(--font-m);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--corsa);
}
.sf-title{
  font-family:var(--font-d);text-transform:uppercase;font-style:italic;
  font-size:clamp(2.1rem,3.8vw,3.2rem);line-height:.95;margin:12px 0 14px;letter-spacing:.01em;
}
.sf-lead{color:var(--asfalto);font-size:.98rem;max-width:46ch;margin-bottom:34px}
.sf-honey{position:absolute;left:-9999px;top:0;height:0;opacity:0;pointer-events:none}
.sf-rows{border-top:2px solid var(--ink)}
.sf-row{
  position:relative;display:grid;grid-template-columns:64px 1fr;align-items:end;
  border-bottom:2px solid var(--line);padding:20px 0 0;
}
.sf-n{
  font-family:var(--font-d);font-style:italic;font-size:1.5rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.2px var(--asfalto);
  padding-bottom:14px;transition:color .35s,-webkit-text-stroke-color .35s;
}
.sf-row.done .sf-n{color:var(--corsa);-webkit-text-stroke-color:var(--corsa)}
.sf-label{
  display:block;font-family:var(--font-m);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--asfalto);transition:color .3s;
}
.sf-label small{font-size:1em;letter-spacing:.24em;color:#B9B6AC}
.sf-row:focus-within .sf-label{color:var(--corsa)}
.sf-cell input,.sf-phone input{
  width:100%;background:transparent;border:0;color:var(--ink);
  font-family:var(--font-b);font-weight:600;font-size:clamp(1.15rem,1.9vw,1.5rem);
  padding:8px 0 14px;
}
.sf-cell input:focus,.sf-phone input:focus,.sf-phone select:focus{outline:none}
.sf-cell input::placeholder{color:var(--line)}
.sf-phone{display:flex;align-items:baseline;gap:16px}
.sf-phone select{
  appearance:none;background:transparent;border:0;cursor:pointer;color:var(--ink);
  font-family:var(--font-m);font-size:.85rem;letter-spacing:.02em;
  padding:8px 18px 14px 0;border-right:2px solid var(--line);
  max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sf-line{
  position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--corsa);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.sf-row:focus-within .sf-line,.sf-row.done .sf-line{transform:scaleX(1)}
.sf-foot{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  margin-top:30px;flex-wrap:wrap;
}
.sf-ready{flex:1;min-width:200px}
.sf-count{
  font-family:var(--font-d);font-style:italic;font-size:2rem;line-height:1;
  display:inline-block;margin-right:12px;transition:color .3s;
}
.story-form.armed .sf-count{color:var(--corsa)}
.sf-ready-lbl{
  font-family:var(--font-m);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--asfalto);
}
.sf-gauge{height:6px;background:var(--carrara-2);margin-top:12px;transform:skewX(-16deg);overflow:hidden}
.sf-gauge i{
  display:block;height:100%;width:0;background:var(--corsa);
  transition:width .6s var(--ease);
}
.sf-send{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.sf-send:hover{background:var(--ink);color:var(--carrara)}
.story-form.armed .sf-send{background:var(--corsa);box-shadow:inset 0 0 0 2px var(--corsa);color:#fff}
.story-form.armed .sf-send:hover{background:var(--corsa-deep);box-shadow:inset 0 0 0 2px var(--corsa-deep)}
.story-form .form-status{padding:16px 0 0}
.sf-note{padding:10px 0 0}
@media(max-width:640px){
  .sf-row{grid-template-columns:44px 1fr}
  .sf-n{font-size:1.15rem}
  .sf-foot{flex-direction:column;align-items:stretch}
  .sf-send{justify-content:center}
}
.reduced-motion .map-layer,.no-js .map-layer{opacity:1}
.reduced-motion .garda-map .lake,.no-js .garda-map .lake,
.reduced-motion .garda-map .route,.reduced-motion .garda-map .arc{stroke-dashoffset:0}
.reduced-motion .tappe--story .tappa{opacity:1}
@media(max-width:900px){
  .story-wrap{grid-template-columns:1fr}
  .story-map{position:static;max-width:380px;margin:0 auto}
}

/* ---------- why accordion tweaks ---------- */
.why-list summary{font-size:1.15rem;line-height:1.2}

/* ---------- testimonials rail ---------- */
.testi-rail{
  display:flex;gap:20px;overflow-x:auto;padding:8px var(--gutter) 20px;
  scroll-snap-type:x mandatory;cursor:grab;scrollbar-width:none;
}
.testi-rail::-webkit-scrollbar{display:none}
.testi-rail.dragging{cursor:grabbing;scroll-snap-type:none}
.testi-rail:focus-visible{outline:3px solid var(--corsa);outline-offset:-3px}
.testi-card{
  flex:0 0 auto;width:min(440px,84vw);scroll-snap-align:start;
  background:var(--carrara);color:var(--ink);border:2px solid var(--ink);padding:38px 32px;
  display:flex;flex-direction:column;gap:22px;transition:transform .35s var(--ease),box-shadow .35s;
}
.testi-card:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--corsa)}
.testi-metric{display:flex;align-items:baseline;gap:14px}
.testi-metric .num{font-family:var(--font-d);font-style:italic;font-size:2.8rem;line-height:1;color:var(--corsa)}
.testi-metric .lbl{font-family:var(--font-m);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--asfalto)}
.testi-card blockquote{flex:1;border:0;font-size:1rem;color:var(--ink)}
.testi-card figcaption{display:grid;gap:2px;border-top:2px solid var(--ink);padding-top:16px}
.testi-card figcaption b{font-family:var(--font-d);text-transform:uppercase;font-weight:400;font-size:.95rem;letter-spacing:.04em}
.testi-card figcaption span{font-family:var(--font-m);font-size:.66rem;letter-spacing:.1em;color:var(--asfalto);text-transform:uppercase}
.testi-section .hscroll-hint{display:flex}

/* ---------- posts wall: tre nastri di produzione ---------- */
.posts-section{overflow:hidden}
.posts-wall{display:grid;gap:22px;padding:10px 0 6px}
.posts-belt{overflow:visible}
.posts-track{
  display:inline-flex;gap:22px;padding-right:22px;
  will-change:transform;
}
.post-card{
  flex:0 0 auto;width:min(240px,54vw);aspect-ratio:4/5;margin:0;
  position:relative;overflow:hidden;
  background:#1B1B20;border:2px solid rgba(242,241,237,.85);
  transition:box-shadow .4s var(--ease),border-color .4s;
}
.post-im{position:absolute;inset:0;display:block}
.post-card img{
  width:100%;height:100%;object-fit:cover;transform:scale(1.02);
  transition:transform .7s var(--ease);
  user-select:none;-webkit-user-drag:none;
}
.post-card:hover{
  box-shadow:10px 10px 0 var(--corsa);border-color:var(--carrara);
}
.post-card:hover img{transform:scale(1.12)}
.post-n{
  position:absolute;top:0;left:0;z-index:2;
  background:var(--ink);color:var(--corsa);
  font-size:.6rem;letter-spacing:.22em;padding:7px 12px;
  border-right:2px solid rgba(242,241,237,.85);border-bottom:2px solid rgba(242,241,237,.85);
}
.post-card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--corsa);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.post-card:hover::after{transform:scaleX(1)}
/* no-js / reduced motion: static belts, clipped to the viewport */
.no-js .posts-belt,.reduced-motion .posts-belt{overflow:hidden}

/* ---------- lavori: la griglia ---------- */
/* One hard-edged box per project. Where a captured scroll of the live site
   exists the plate is a muted <video> that plays only while its own card is on
   screen; otherwise it is the still. The 2px frame and the monitor scanline are
   the v2 signature and stay on every card — what changes on hover is the corsa,
   which is how this system has always said "this one". */
.works-section{overflow:hidden}
.works-grid{
  list-style:none;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.4vw,44px) clamp(18px,2.2vw,28px);
}
.work-item{min-width:0}
.work-card{display:block;color:inherit}
.work-card:focus-visible{outline:3px solid var(--corsa);outline-offset:4px}

.work-frame{
  position:relative;display:block;
  aspect-ratio:16/10;overflow:hidden;
  border:2px solid rgba(242,241,237,.3);background:#1B1B20;
  transition:transform .5s var(--ease),border-color .45s var(--ease);
}
.work-card.is-live .work-frame{border-color:rgba(242,241,237,.85)}
.work-card.is-link:hover .work-frame{transform:scale(1.02);border-color:var(--corsa)}

.work-media{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  user-select:none;-webkit-user-drag:none;
}
/* the frame reads as a monitor in the box */
.work-scan{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(180deg,rgba(17,17,20,.16) 0 1px,transparent 1px 3px);
  opacity:.5;mix-blend-mode:multiply;
}
.work-n{
  position:absolute;left:0;bottom:0;z-index:3;
  background:var(--ink);color:#7C7C86;
  font-size:.64rem;letter-spacing:.22em;padding:8px 14px;
  border-top:2px solid rgba(242,241,237,.85);border-right:2px solid rgba(242,241,237,.85);
  transition:color .4s;
}
.work-card.is-live .work-n{color:var(--corsa)}

.work-meta{display:grid;gap:7px;margin-top:16px;min-width:0}
.work-name{
  font-family:var(--font-d);text-transform:uppercase;line-height:.98;letter-spacing:.01em;
  font-size:clamp(1.25rem,1.8vw,1.75rem);color:var(--carrara);
  transition:color .4s var(--ease);
}
.work-card.is-link:hover .work-name{color:var(--corsa)}
.work-line{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.work-cat{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#7C7C86}
.work-tags{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#7C7C86}
.work-go{
  font-size:1.1rem;line-height:1;color:var(--corsa);flex:none;
  opacity:0;transform:translateX(-10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.work-card.is-link:hover .work-go{opacity:1;transform:none}

@media(max-width:1000px){
  .works-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .works-grid{grid-template-columns:1fr}
}
/* reduced motion: nothing scales, and main.js leaves every capture paused on
   its poster — the section becomes the six stills it is without JS */
.reduced-motion .work-card.is-link:hover .work-frame{transform:none}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--carrara);border-top:6px solid var(--corsa)}
.footer-main{
  max-width:var(--maxw);margin:0 auto;padding:70px var(--gutter);
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;
}
.footer-main h4{font-family:var(--font-m);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:#7C7C86;margin-bottom:18px}
.footer-main ul{list-style:none;display:grid;gap:10px}
.footer-main a{transition:color .25s}
.footer-main a:hover{color:var(--corsa)}
.footer-brand p{color:#A9A9B2;max-width:32ch;margin-top:16px}
.footer-bar{border-top:1px solid #2A2A30}
.footer-bar-inner{
  max-width:var(--maxw);margin:0 auto;padding:20px var(--gutter);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  font-family:var(--font-m);font-size:.66rem;letter-spacing:.1em;color:#7C7C86;text-transform:uppercase;
}

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed;right:24px;bottom:24px;z-index:90;
  width:58px;height:58px;display:flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;transform:skewX(-8deg);
  box-shadow:6px 6px 0 var(--ink);transition:.3s var(--ease);
}
.wa-float svg{transform:skewX(8deg)}
.wa-float:hover{transform:skewX(-8deg) translate(-3px,-3px);box-shadow:9px 9px 0 var(--corsa)}
.wa-tip{
  position:absolute;right:calc(100% + 16px);top:50%;transform:translateY(-50%) skewX(8deg);
  background:var(--ink);color:var(--carrara);
  font-family:var(--font-m);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 14px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s;
}
.wa-float:hover .wa-tip,.wa-float:focus-visible .wa-tip{opacity:1}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--corsa);color:#fff;
  padding:12px 20px;z-index:200;font-family:var(--font-m);font-size:.8rem;
}
.skip-link:focus{left:0}

/* ============================================================
   IL METODO — landing (hero 3D, dolori, funnel scrollytelling,
   differenziali, FAQ)
   ============================================================ */

/* ---------- hero ---------- */
.mt-hero{
  min-height:100svh;position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--ink);color:var(--carrara);padding:120px 0 90px;overflow:hidden;
}
#metodo-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
#metodo-canvas canvas{display:block;width:100%;height:100%}
.mt-hero-inner{position:relative;z-index:2;width:100%;padding:0 var(--gutter)}
.mt-hero .eyebrow{color:var(--carrara);margin-bottom:22px}
.mt-hero h1{max-width:12ch}
.mt-hero h1 em{color:var(--corsa)}
.mt-hero-foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px;
  margin-top:38px;
}
.mt-hero .lead{color:rgba(242,241,237,.85);max-width:46ch}
.mt-hero-sub{
  font-family:var(--font-b);font-weight:600;
  font-size:clamp(1.3rem,2.5vw,2rem);line-height:1.32;
  color:rgba(242,241,237,.92);max-width:34ch;
  border-left:4px solid var(--corsa);padding-left:clamp(18px,2vw,28px);
}
.mt-hero-sub em{font-style:normal;color:var(--corsa)}
.mt-hero-sub b{font-weight:700;color:var(--carrara)}
.mt-hero-spec{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(242,241,237,.62);line-height:2.1;text-align:right;
}
.mt-hero-spec b{color:var(--corsa);font-weight:400}
.mt-scroll{
  position:relative;z-index:2;margin:56px var(--gutter) 0;
  display:flex;align-items:center;gap:14px;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(242,241,237,.55);
}
.mt-scroll-line{width:46px;height:2px;background:var(--corsa);transform-origin:left;animation:mt-pulse 1.6s var(--ease) infinite}
@keyframes mt-pulse{0%{transform:scaleX(0)}55%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}

/* Keep the supporting sentence inside the first viewport on wide, short
   screens such as notebooks and browser windows with reduced height. */
@media(min-width:861px) and (max-height:1000px){
  .mt-hero{padding-top:96px;padding-bottom:42px}
  .mt-hero h1{font-size:clamp(3.2rem,min(8.5vw,12vh),7.5rem)}
  .mt-hero-foot{margin-top:22px}
  .mt-scroll{margin-top:28px}
}

/* ---------- i dolori ---------- */
.pain-list{border-top:2px solid var(--ink)}
.pain{border-bottom:2px solid var(--ink)}
.pain-head{
  width:100%;display:grid;grid-template-columns:96px 1fr 44px;align-items:center;gap:24px;
  padding:30px 0;text-align:left;cursor:pointer;
}
.pain-n{
  font-family:var(--font-d);font-style:italic;font-size:1.6rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.3px var(--asfalto);transition:.35s;
}
.pain-head h3{
  font-family:var(--font-d);text-transform:uppercase;font-size:clamp(1.15rem,2.6vw,2rem);
  line-height:1.02;transition:color .3s,transform .35s var(--ease);
}
.pain-x{
  font-family:var(--font-m);font-size:1.5rem;color:var(--corsa);justify-self:end;
  transition:transform .35s var(--ease);
}
.pain-head:hover h3{color:var(--corsa);transform:translateX(12px)}
.pain-head:hover .pain-n{-webkit-text-stroke-color:var(--corsa)}
.pain.open .pain-n{color:var(--corsa);-webkit-text-stroke-color:var(--corsa)}
.pain.open .pain-x{transform:rotate(45deg)}
.pain-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.pain.open .pain-body{grid-template-rows:1fr}
.pain-body-in{overflow:hidden;padding:0 0 0 120px}
.pain-body-in p{color:var(--asfalto);max-width:68ch;padding-bottom:8px}
.pain-fix{
  display:inline-flex;align-items:center;gap:12px;margin:14px 0 32px;
  font-family:var(--font-m);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--asfalto);transition:color .3s;
}
.pain-fix b{color:var(--corsa);font-weight:700}
.pain-fix .arrow{transition:transform .3s var(--ease)}
.pain-fix:hover{color:var(--ink)}
.pain-fix:hover .arrow{transform:translateX(8px)}
.no-js .pain-body{grid-template-rows:1fr}

/* ---------- funnel scrollytelling ---------- */
.mt-wrap{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(36px,6vw,96px);align-items:start}
.mt-funnel-box{position:sticky;top:96px}
.mt-funnel{width:100%;height:auto;display:block;overflow:visible}
.mt-seg path{
  fill:rgba(242,241,237,.03);stroke:rgba(242,241,237,.28);stroke-width:2;
  transition:fill .5s,stroke .5s;
}
.mt-seg-n{
  font-family:var(--font-d);font-style:italic;font-size:38px;
  fill:transparent;stroke:rgba(242,241,237,.4);stroke-width:1.2;transition:.5s;
}
.mt-seg-t{
  font-family:var(--font-m);font-size:13px;letter-spacing:.28em;text-transform:uppercase;
  fill:rgba(242,241,237,.55);transition:fill .5s;
}
.mt-seg.on path{fill:rgba(215,100,24,.18);stroke:var(--corsa)}
.mt-seg.on .mt-seg-n{stroke:var(--corsa);fill:var(--corsa)}
.mt-seg.on .mt-seg-t{fill:var(--carrara)}
.mt-flow{
  stroke:var(--corsa);stroke-width:2;stroke-dasharray:4 12;
  animation:mt-flow 1.1s linear infinite;
}
@keyframes mt-flow{to{stroke-dashoffset:-16}}
.mt-io{font-family:var(--font-m);font-size:12px;letter-spacing:.24em;text-transform:uppercase;fill:#A9A9B2}
.mt-io--out{fill:var(--corsa)}
.mt-progress{
  margin-top:22px;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:#7C7C86;
}
.mt-progress b{
  font-family:var(--font-d);font-style:italic;font-weight:400;font-size:2.2rem;
  color:var(--corsa);margin-right:8px;
}
.mt-phase{
  padding:52px 0;border-top:2px solid rgba(242,241,237,.14);
  opacity:.32;transition:opacity .5s;
}
.mt-phase:last-child{border-bottom:2px solid rgba(242,241,237,.14)}
.mt-phase.on{opacity:1}
.mt-phase .code{
  font-family:var(--font-d);font-style:italic;font-size:2.4rem;line-height:1;display:block;
  color:transparent;-webkit-text-stroke:1.5px var(--corsa);margin-bottom:18px;
}
.mt-phase h3{font-family:var(--font-d);text-transform:uppercase;font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1;margin-bottom:16px}
.mt-phase .desc{color:#A9A9B2;max-width:60ch}
.mt-meta{
  display:flex;flex-wrap:wrap;gap:10px 28px;margin:24px 0 30px;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#7C7C86;
}
.mt-meta b{color:var(--carrara);font-weight:700}
.mt-phase .inc{font-family:var(--font-m);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:#7C7C86;margin-bottom:14px}
.mt-phase ul{list-style:none;display:grid;gap:11px}
.mt-phase li{display:flex;gap:12px}
.mt-phase li::before{content:"»";color:var(--corsa);font-family:var(--font-m);flex-shrink:0}
.reduced-motion .mt-phase,.no-js .mt-phase{opacity:1}

/* ---------- differenziali ---------- */
.diffs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.diff{
  position:relative;overflow:hidden;border:2px solid var(--ink);background:var(--carrara);
  padding:36px 30px 42px;transition:background .35s var(--ease),color .35s var(--ease);
}
.diff-c{color:var(--corsa);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase}
.diff h3{font-family:var(--font-d);text-transform:uppercase;margin:16px 0 10px;font-size:1.3rem}
.diff p{color:var(--asfalto);transition:color .3s}
.diff-line{
  position:absolute;left:0;bottom:0;width:100%;height:5px;background:var(--corsa);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.diff:hover{background:var(--ink);color:var(--carrara)}
.diff:hover p{color:#A9A9B2}
.diff:hover .diff-line{transform:scaleX(1)}

/* ---------- FAQ ---------- */
.mt-faq-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(40px,6vw,90px);align-items:start}
.mt-faq-head{position:sticky;top:110px}
.mt-faq-head .eyebrow{margin-bottom:20px}
.mt-faq-head .lead{margin-top:20px}

@media(max-width:1024px){
  .diffs{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .mt-wrap{grid-template-columns:1fr}
  .mt-funnel-box{position:static;max-width:360px;margin:0 auto 20px}
  .mt-faq-grid{grid-template-columns:1fr}
  .mt-faq-head{position:static}
  .pain-head{grid-template-columns:56px 1fr 36px;gap:16px}
  .pain-body-in{padding-left:72px}
}
@media(max-width:640px){
  .diffs{grid-template-columns:1fr}
  .pain-head{grid-template-columns:1fr 36px}
  .pain-n{display:none}
  .pain-body-in{padding-left:0}
  .mt-hero-spec{text-align:left}
}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .telemetry{grid-template-columns:repeat(2,1fr)}
  .tele:nth-child(2){border-right:0}
  .footer-main{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .main-nav{
    position:fixed;inset:0;background:var(--carrara);flex-direction:column;justify-content:center;align-items:center;gap:6px;
    opacity:0;pointer-events:none;transition:opacity .35s;z-index:105;
    padding:96px 24px 120px;overflow-y:auto;
  }
  .main-nav.open{opacity:1;pointer-events:auto}
  .main-nav a{font-size:1.5rem;padding:14px;font-family:var(--font-d)}
  .burger{display:flex}
  /* keep only logo + burger in the bar; the language switch rides the
     open menu so three controls never fight for a 360px-wide header */
  .header-inner{gap:12px}
  .header-actions{gap:0}
  .site-header .logo img{height:22px}
  .lang-switch{
    position:fixed;left:50%;bottom:44px;transform:translateX(-50%);
    z-index:106;opacity:0;pointer-events:none;transition:opacity .3s .05s;
  }
  .main-nav.open ~ .header-actions .lang-switch{opacity:1;pointer-events:auto}
  .plans,.values,.about-split,.contact-grid,.booking,.patto,.ritmo-row,.manifesto-split{grid-template-columns:1fr}
  .mani-photo{max-width:440px;margin-top:12px}
  .mani-photo-frame{box-shadow:12px 12px 0 var(--corsa)}
  .manifesto-split .manifesto p{max-width:24ch}
  .booking-cal,.booking-side{padding:28px 20px}
  .slot-grid{grid-template-columns:repeat(3,1fr)}
  .plans{gap:32px}
  .svc-detail{grid-template-columns:1fr;gap:20px;padding:40px 0}
  .footer-main{grid-template-columns:1fr;gap:36px}
  .hero-spec{text-align:left}
  .giro{grid-template-columns:1fr;gap:10px;padding:32px 0}
}

/* ---------- phones: one column, tighter type, nothing past the edge ---------- */
@media(max-width:600px){
  :root{--gutter:clamp(16px,5vw,60px)}

  /* hero */
  .hero{padding-top:104px}
  .hero-sub{padding:28px 0 36px;gap:20px}
  .hero-ctas{width:100%}
  .hero-ctas .btn{flex:1 1 auto;justify-content:center}
  .nebbia-hint{display:none}

  /* headline scale — keep it loud but inside the frame */
  h1.display{font-size:clamp(2.9rem,12vw,4.4rem)}
  h2.display{font-size:clamp(2rem,8.5vw,3rem)}
  .eyebrow{letter-spacing:.16em}

  /* telemetry / stat grids collapse fully */
  .telemetry{grid-template-columns:1fr}
  .tele{border-right:0;border-bottom:1px dashed var(--line);padding:26px 20px 30px}
  .tele:last-child{border-bottom:0}

  /* card grids that were still 2-up */
  .values,.diffs,.works-grid,.tappe,.footer-main{grid-template-columns:1fr}

  /* process laps / method phases / pain rows */
  .giro{grid-template-columns:1fr;gap:8px}
  .giro .lap{font-size:clamp(1.6rem,7vw,2.2rem)}
  .pain-head{grid-template-columns:1fr 32px;gap:12px}
  .pain-n{display:none}
  .pain-body-in{padding-left:0}
  .mt-hero-spec,.hero-spec{text-align:left}
  .mt-meta{gap:8px 20px}

  /* the "il conto che non vedi" calculator */
  .leak-panel{grid-template-columns:1fr;gap:32px}
  .leak-num{font-size:clamp(2.8rem,14vw,4.6rem)}
  .leak-item{grid-template-columns:40px 1fr;gap:14px}

  /* telemetry contact form */
  .sf-row{grid-template-columns:34px 1fr}
  .sf-n{font-size:1.1rem}
  .sf-phone{flex-wrap:wrap;gap:6px 14px}
  .sf-phone select{max-width:none;flex:1 0 100%;border-right:0;padding-right:0}
  .sf-foot{flex-direction:column;align-items:stretch;gap:18px}
  .sf-send{justify-content:center}

  /* services detail + about rhythm */
  .svc-detail{grid-template-columns:1fr;gap:16px;padding:36px 0}
  .svc-detail .code{font-size:2rem}
  .ritmo-row{grid-template-columns:1fr;gap:6px}
  .ritmo-row:hover{padding-left:0}
  .patto{grid-template-columns:1fr}

  /* CTA / finish line */
  .cta-grid{grid-template-columns:1fr;gap:32px}
  .cta-copy h2{white-space:normal}
  .cta-ring{width:clamp(180px,52vw,220px)}

  /* pricing */
  .plan{padding:36px 24px}
  .plan:hover{transform:none;box-shadow:6px 6px 0 var(--corsa)}
  .plan .plan-price{font-size:clamp(2.6rem,12vw,3.4rem)}

  /* booking — the 7-col month grid has to survive a 320px phone */
  .booking-cal,.booking-side{padding:24px 16px}
  .cal-head{gap:10px;margin-bottom:14px}
  .cal-month{font-size:1.15rem}
  .cal-nav{width:38px;height:38px;font-size:.95rem}
  .cal-grid{gap:3px}
  .cal-cell{font-size:.78rem;min-height:34px}
  .cal-wd{font-size:.54rem;padding:4px 0 8px}
  .slot-grid{grid-template-columns:repeat(2,1fr)}

  /* big decorative panels: trim the hard offset shadow so clip doesn't bite */
  .where-panel{box-shadow:8px 8px 0 var(--corsa)}
  .coords{box-shadow:6px 6px 0 var(--corsa);padding:24px}
  .mani-photo-frame{box-shadow:10px 10px 0 var(--corsa)}

  /* floating widgets pulled in from the edge */
  .wa-float{right:16px;bottom:16px;width:52px;height:52px}
  .fpchat{right:16px}
  .speed-strip span{font-size:.95rem;padding:0 20px;gap:20px}
  .giant-marquee span{font-size:clamp(2.8rem,15vw,6rem)}
  .page-hero{padding:150px 0 56px}
}

@media(max-width:380px){
  .leak-item{grid-template-columns:1fr;gap:2px}
  .leak-item-n{margin-bottom:2px}
  .slot-grid{grid-template-columns:1fr 1fr}
  .lang-switch a{padding:5px 7px}
  .btn{padding:16px 24px;font-size:.92rem}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal-line>span{transform:none!important}
}

/* ============================================================
   LA CENTRALINA — chatbot di qualificazione (assets/js/chat.js)
   ============================================================ */
.fpchat{position:fixed;right:24px;bottom:94px;z-index:95;font-family:var(--font-b)}
/* every piece below is display:flex, which outranks the UA [hidden] rule — without
   this the panel, teaser and badge all render on load regardless of the attribute */
.fpchat [hidden]{display:none!important}

/* ---------- launcher ---------- */
.fpchat-launcher{
  position:relative;width:58px;height:58px;display:flex;align-items:center;justify-content:center;
  background:var(--corsa);color:#fff;border:0;cursor:pointer;
  transform:skewX(-8deg);box-shadow:6px 6px 0 var(--ink);transition:.3s var(--ease);
}
.fpchat-launcher svg{transform:skewX(8deg)}
.fpchat-launcher:hover{transform:skewX(-8deg) translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.fpchat.is-open .fpchat-launcher{background:var(--ink)}
.fpchat-badge{
  position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--carrara);transform:skewX(8deg);
  font-family:var(--font-m);font-size:.62rem;font-weight:700;
}
.fpchat.is-inviting .fpchat-launcher{animation:fpchat-pulse 2.4s var(--ease) 3}
@keyframes fpchat-pulse{
  0%,100%{box-shadow:6px 6px 0 var(--ink)}
  50%{box-shadow:6px 6px 0 var(--ink),0 0 0 14px rgba(215,100,24,.16)}
}

/* ---------- teaser ---------- */
.fpchat-teaser{
  position:absolute;right:calc(100% + 16px);bottom:6px;width:max-content;max-width:250px;
  display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer;
  background:var(--ink);color:var(--carrara);border:0;
  padding:14px 16px;transform:skewX(-8deg);box-shadow:6px 6px 0 var(--corsa);
  font-size:.86rem;line-height:1.35;
  animation:fpchat-in .45s var(--ease) both;
}
.fpchat-teaser>span{transform:skewX(8deg)}
.fpchat-teaser-close{
  flex:0 0 auto;background:none;border:0;color:#8A8A93;cursor:pointer;
  font-size:1rem;line-height:1;padding:0 0 0 4px;
}
.fpchat-teaser-close:hover{color:var(--corsa)}
@keyframes fpchat-in{from{opacity:0;transform:skewX(-8deg) translateY(10px)}to{opacity:1;transform:skewX(-8deg) translateY(0)}}

/* ---------- panel ---------- */
.fpchat-panel{
  position:absolute;right:0;bottom:calc(100% + 16px);width:352px;max-width:calc(100vw - 32px);
  /* launcher + offsets eat ~184px; without this cap the panel grows off the top
     of the viewport on short laptop screens once the log fills up */
  max-height:calc(100svh - 184px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--carrara);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink);
  animation:fpchat-up .35s var(--ease) both;
}
@keyframes fpchat-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.fpchat-head{
  display:flex;align-items:center;gap:12px;
  background:var(--ink);color:var(--carrara);padding:14px 16px;
}
/* skewed frame, counter-skewed photo: the frame leans with the brand, the face
   stays upright. The scale fills the corners the counter-skew opens up. */
.fpchat-av{flex:0 0 auto;display:block;overflow:hidden;transform:skewX(-8deg);background:var(--asfalto)}
.fpchat-av img{display:block;width:100%;height:100%;object-fit:cover;transform:skewX(8deg) scale(1.16)}
.fpchat-av--head{width:46px;height:46px;box-shadow:0 0 0 2px var(--corsa)}
.fpchat-av--teaser{width:38px;height:38px}
.fpchat-head-txt{flex:1;min-width:0}
.fpchat-head strong{
  display:block;font-family:var(--font-d);font-weight:400;
  font-size:1.02rem;letter-spacing:.02em;text-transform:uppercase;
}
.fpchat-head small{
  display:flex;align-items:flex-start;gap:6px;line-height:1.5;
  font-family:var(--font-m);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#9A9AA3;
}
/* the status wraps to two lines at narrow widths — pin the dot to the first */
.fpchat-dot{flex:0 0 auto;width:6px;height:6px;margin-top:.42em;background:var(--verde);border-radius:50%}
.fpchat-close{
  background:none;border:0;color:var(--carrara);cursor:pointer;
  font-size:1.4rem;line-height:1;padding:2px 4px;transition:color .25s;
}
.fpchat-close:hover{color:var(--corsa)}

.fpchat-log{
  display:flex;flex-direction:column;gap:10px;
  padding:18px 16px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
}
.fpchat-msg{
  max-width:84%;padding:11px 14px;font-size:.9rem;line-height:1.45;
  animation:fpchat-in-msg .3s var(--ease) both;
}
@keyframes fpchat-in-msg{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.fpchat-msg--bot{align-self:flex-start;background:#fff;border-left:3px solid var(--corsa);color:var(--ink)}
.fpchat-msg--me{align-self:flex-end;background:var(--ink);color:var(--carrara)}
.fpchat-typing{display:flex;gap:5px;align-items:center;padding:14px}
.fpchat-typing span{width:6px;height:6px;background:var(--asfalto);border-radius:50%;animation:fpchat-blink 1.2s infinite}
.fpchat-typing span:nth-child(2){animation-delay:.18s}
.fpchat-typing span:nth-child(3){animation-delay:.36s}
@keyframes fpchat-blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

.fpchat-pending{
  font-family:var(--font-m);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--asfalto);border-left-color:var(--asfalto);
}
.fpchat-choices{display:flex;flex-wrap:wrap;gap:8px;padding-top:2px}
.fpchat-chip{
  background:none;border:1.5px solid var(--ink);color:var(--ink);cursor:pointer;
  padding:8px 13px;font-family:var(--font-m);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;
  transition:.22s var(--ease);
}
.fpchat-chip:hover{background:var(--corsa);border-color:var(--corsa);color:#fff;transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)}

.fpchat-finish{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.fpchat-cta{
  display:block;text-align:center;background:#25D366;color:#fff;
  padding:14px 18px;font-family:var(--font-m);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:4px 4px 0 var(--ink);transition:.25s var(--ease);
}
.fpchat-cta:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.fpchat-alt{
  text-align:center;font-size:.78rem;color:var(--asfalto);text-decoration:underline;text-underline-offset:3px;
}
.fpchat-alt:hover{color:var(--corsa)}

.fpchat-form{display:flex;border-top:2px solid var(--ink)}
.fpchat-input{
  flex:1;min-width:0;border:0;background:#fff;color:var(--ink);
  padding:14px 16px;font-family:var(--font-b);font-size:.9rem;
}
.fpchat-input:focus{outline:2px solid var(--corsa);outline-offset:-2px}
.fpchat-send{
  border:0;background:var(--ink);color:var(--carrara);cursor:pointer;padding:0 18px;
  font-family:var(--font-m);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;transition:background .25s;
}
.fpchat-send:hover{background:var(--corsa)}

@media(max-width:560px){
  .fpchat{right:16px;bottom:88px}
  .fpchat-panel{
    position:fixed;right:16px;left:16px;bottom:88px;width:auto;max-width:none;
    box-shadow:6px 6px 0 var(--ink);
  }
  .fpchat-panel{max-height:calc(100svh - 168px)}
  .fpchat-teaser{max-width:min(230px,calc(100vw - 110px))}
}

/* ============================================================
   QUERO CONSULTORIA — intake modal (assets/js/consult.js)
   One question at a time; contact fields lead so a lead reaches
   the inbox before the visitor sees a single choice chip.
   ============================================================ */
.fpconsult{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;font-family:var(--font-b)}
.fpconsult[hidden]{display:none!important}
.fpconsult-backdrop{position:absolute;inset:0;background:rgba(20,17,15,.72)}
.fpconsult-dialog{
  position:relative;width:460px;max-width:100%;max-height:calc(100svh - 48px);overflow-y:auto;
  background:var(--carrara);border:2px solid var(--ink);box-shadow:12px 12px 0 var(--corsa);
  padding:34px 30px 26px;animation:fpconsult-in .35s var(--ease) both;
}
.fpconsult-dialog:focus{outline:0}
@keyframes fpconsult-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.fpconsult-close{
  position:absolute;top:12px;right:12px;background:none;border:0;color:var(--asfalto);cursor:pointer;
  font-size:1.6rem;line-height:1;padding:6px 10px;transition:color .25s;
}
.fpconsult-close:hover{color:var(--corsa)}
.fpconsult-head{padding-right:28px}
.fpconsult-head h3{font-family:var(--font-d);font-weight:400;font-size:1.5rem;letter-spacing:.01em;text-transform:uppercase;margin:.3em 0 .4em}
.fpconsult-lead{font-size:.9rem;line-height:1.5;color:var(--asfalto)}
.fpconsult-progress{height:3px;background:rgba(20,17,15,.12);margin:20px 0 6px}
.fpconsult-progress i{display:block;height:100%;width:0;background:var(--corsa);transition:width .35s var(--ease)}
.fpconsult-form{min-height:150px;display:flex;flex-direction:column;justify-content:center}
.fpconsult-step{display:flex;flex-direction:column;gap:14px;animation:fpconsult-step-in .3s var(--ease) both}
@keyframes fpconsult-step-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fpconsult-q{font-family:var(--font-d);font-weight:400;font-size:1.06rem;letter-spacing:.01em;color:var(--ink)}
.fpconsult-input,.fpconsult-step textarea{
  width:100%;border:0;border-bottom:2px solid var(--ink);background:transparent;color:var(--ink);
  padding:10px 2px;font-family:var(--font-b);font-size:1rem;resize:vertical;
}
.fpconsult-input:focus,.fpconsult-step textarea:focus{outline:0;border-color:var(--corsa)}
.fpconsult-chips{display:flex;flex-wrap:wrap;gap:9px}
.fpconsult-chip{
  background:none;border:1.5px solid var(--ink);color:var(--ink);cursor:pointer;
  padding:9px 14px;font-family:var(--font-m);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  transition:.22s var(--ease);
}
.fpconsult-chip:hover,.fpconsult-chip.is-selected{background:var(--corsa);border-color:var(--corsa);color:#fff}
.fpconsult-nav{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.fpconsult-back,.fpconsult-skip{
  background:none;border:0;color:var(--asfalto);cursor:pointer;
  font-family:var(--font-m);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:8px 0;
}
.fpconsult-back:hover,.fpconsult-skip:hover{color:var(--corsa)}
.fpconsult-next{
  margin-left:auto;border:0;background:var(--ink);color:var(--carrara);cursor:pointer;
  padding:12px 24px;font-family:var(--font-m);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  transform:skewX(-8deg);transition:background .25s;
}
.fpconsult-next:hover{background:var(--corsa)}
.fpconsult-sending{text-align:center;font-family:var(--font-m);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--asfalto)}
.fpconsult-finish{display:flex;flex-direction:column;gap:12px;text-align:center}
.fpconsult-finish-title{font-family:var(--font-d);font-weight:400;font-size:1.2rem;text-transform:uppercase}
.fpconsult-finish-msg{font-size:.9rem;line-height:1.5;color:var(--asfalto)}
.fpconsult-links{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.fpconsult-cta{
  display:block;text-align:center;background:#25D366;color:#fff;
  padding:14px 18px;font-family:var(--font-m);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:4px 4px 0 var(--ink);transition:.25s var(--ease);
}
.fpconsult-cta:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.fpconsult-alt{text-align:center;font-size:.82rem;color:var(--asfalto);text-decoration:underline;text-underline-offset:3px}
.fpconsult-alt:hover{color:var(--corsa)}
.fpconsult-note{margin-top:18px;font-family:var(--font-m);font-size:.66rem;letter-spacing:.06em;color:#9A9AA3;text-align:center}

@media(max-width:560px){
  .fpconsult{padding:12px}
  .fpconsult-dialog{padding:28px 20px 20px;box-shadow:6px 6px 0 var(--corsa)}
}

/* ============================================================
   COLOUR FIELDS — two sections break out of the black/white
   alternation, so the page rhythm runs carrara → rosso (il metodo)
   → carrara → verde (le voci): the tricolore, in section order.
   Both keep .section--dark so every descendant rule of that class
   (lead, eyebrow, text stroke) still applies.
   ============================================================ */

/* shared press grain: one texture, both fields */
.section--scia::after,
.section--verde::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.section--scia>*,
.section--verde>*{position:relative;z-index:1}

/* ---------- 01 · LA SCIA (the method) ----------
   Rosso corsa field whose light beams stretch when you scroll fast
   and settle when you stop. Speed is the brand's whole thesis, so
   here you watch it instead of reading it. --scia-v (0→1) is
   written by main.js off the scroll velocity. */
.section--scia{
  --scia-v:0;
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(115% 75% at 82% -8%, rgba(215,100,24,.62) 0%, rgba(215,100,24,0) 58%),
    radial-gradient(80% 60% at 8% 108%, rgba(168,74,16,.55) 0%, rgba(168,74,16,0) 62%),
    linear-gradient(163deg,#24100A 0%,#7A2E06 38%,#A84A10 64%,#3A1607 100%);
}
.section--scia::before{
  content:"";position:absolute;inset:-25% -14%;z-index:0;pointer-events:none;
  /* beams, not a pattern: hairlines with a lot of air between them */
  background:repeating-linear-gradient(97deg,
    rgba(242,241,237,0) 0 78px,
    rgba(242,241,237,.34) 78px 79px,
    rgba(242,241,237,0) 79px 190px);
  transform:skewX(var(--skew))
            translate3d(calc(var(--scia-v) * -12vw),0,0)
            scaleX(calc(1 + var(--scia-v) * .35));
  opacity:calc(.12 + var(--scia-v) * .5);
  filter:blur(calc(var(--scia-v) * 2.4px));
  transition:opacity .55s linear,transform .55s var(--ease),filter .55s linear;
  will-change:transform,opacity;
}
.section--scia .lead{color:rgba(242,241,237,.86)}
.section--scia .eyebrow{color:rgba(242,241,237,.72)}
.section--scia .giro{border-top-color:rgba(242,241,237,.26)}
.section--scia .giro:last-child{border-bottom-color:rgba(242,241,237,.26)}
/* the lap number is --corsa, which would vanish against the red */
.section--scia .giro .lap{color:var(--carrara)}
.section--scia .giro p{color:rgba(242,241,237,.82)}

/* ---------- 02 · IL VERDE (client voices) ----------
   No motion here — the section above already runs. Just a deep
   field that makes the white cards lift off it. */
.section--verde{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(85% 65% at 16% 4%, rgba(0,140,69,.34) 0%, rgba(0,140,69,0) 60%),
    radial-gradient(70% 55% at 92% 96%, rgba(0,140,69,.18) 0%, rgba(0,140,69,0) 58%),
    linear-gradient(180deg,#071A11 0%,#0A2417 52%,#050F0A 100%);
}
.section--verde::after{opacity:.32}
.section--verde .lead,
.section--verde .eyebrow{color:rgba(226,240,231,.76)}
/* the rail sits outside .section-inner — lift it above the grain */
.section--verde .testi-rail,
.section--verde .hscroll-hint{position:relative;z-index:1}

@media(prefers-reduced-motion:reduce){
  .section--scia::before{
    transform:skewX(var(--skew));opacity:.16;filter:none;transition:none;
  }
}

/* ============================================================
   IL CONTO CHE NON VEDI — the pain, priced by the visitor.
   Cold steel: this section is the "before". The red method
   section that follows is the "after", and the temperature
   change between them carries the argument.
   --leak (0→1) is written by main.js from the two dials.
   ============================================================ */
.leak-section{
  --leak:.18;
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(95% 70% at 12% -10%, rgba(78,90,100,calc(.30 + var(--leak) * .22)) 0%, rgba(78,90,100,0) 62%),
    radial-gradient(70% 60% at 95% 105%, rgba(78,90,100,.16) 0%, rgba(78,90,100,0) 60%),
    linear-gradient(180deg,#0E1216 0%,#141A20 48%,#0B0E12 100%);
}
.leak-section>*{position:relative;z-index:1}
/* the drain: hairlines that lean harder as the number grows */
.leak-section::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    rgba(242,241,237,0) 0 46px,
    rgba(242,241,237,.16) 46px 47px,
    rgba(242,241,237,0) 47px 94px);
  opacity:calc(.14 + var(--leak) * .3);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  transition:opacity .5s linear;
}

.leak-panel{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);
  align-items:center;
  border-top:2px solid rgba(242,241,237,.2);border-bottom:2px solid rgba(242,241,237,.2);
  padding:clamp(32px,4vw,52px) 0;
}

/* ---------- dials ---------- */
.leak-dial+.leak-dial{margin-top:34px}
.leak-dial-lbl{
  display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#8D97A1;
}
.leak-dial-val{
  display:block;margin:8px 0 14px;
  font-family:var(--font-d);font-style:italic;font-size:clamp(1.6rem,2.6vw,2.3rem);
  line-height:1;color:var(--carrara);
}
.leak-range{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;background:none;cursor:grab;
}
.leak-range:active{cursor:grabbing}
.leak-range::-webkit-slider-runnable-track{height:3px;background:rgba(242,241,237,.24)}
.leak-range::-moz-range-track{height:3px;background:rgba(242,241,237,.24)}
.leak-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:26px;margin-top:-11px;
  background:var(--carrara);transform:skewX(var(--skew));
  box-shadow:3px 0 0 rgba(17,17,20,.6);transition:background .25s,box-shadow .25s;
}
.leak-range::-moz-range-thumb{
  width:16px;height:26px;border:0;border-radius:0;background:var(--carrara);
  transform:skewX(var(--skew));
}
.leak-range:hover::-webkit-slider-thumb,
.leak-range:focus-visible::-webkit-slider-thumb{background:var(--corsa);box-shadow:3px 0 0 var(--ink)}
.leak-range:hover::-moz-range-thumb,.leak-range:focus-visible::-moz-range-thumb{background:var(--corsa)}
.leak-range:focus-visible{outline:2px solid var(--corsa);outline-offset:6px}
.leak-note{
  margin-top:30px;font-size:.62rem;letter-spacing:.1em;line-height:1.7;
  text-transform:uppercase;color:#95A0AB;max-width:34ch;
}

/* ---------- readout ---------- */
.leak-read-lbl{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#8D97A1}
.leak-num{
  display:flex;align-items:baseline;gap:.12em;margin:10px 0 22px;
  font-family:var(--font-d);font-style:italic;line-height:.86;
  font-size:clamp(3.4rem,10vw,7.4rem);color:var(--carrara);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.leak-cur{font-size:.42em;font-style:normal;color:#8D97A1}
.leak-gauge{height:8px;background:rgba(242,241,237,.14);overflow:hidden}
.leak-gauge i{
  display:block;height:100%;width:100%;transform:scaleX(var(--leak));transform-origin:left;
  /* the one warm note in a cold section: the deeper the loss, the redder */
  background:linear-gradient(90deg,#8D97A1,var(--corsa));
  transition:transform .45s var(--ease);
}
.leak-month{margin-top:16px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#8D97A1}
.leak-month b{color:var(--carrara);font-weight:400}

/* ---------- where it leaks ---------- */
.leak-list-eyebrow{margin:clamp(48px,6vw,76px) 0 26px;color:#8D97A1}
.leak-list{list-style:none;display:grid;gap:0;counter-reset:none}
.leak-item{
  display:grid;grid-template-columns:minmax(56px,84px) 1fr;gap:24px;align-items:baseline;
  padding:24px 0;border-top:1px solid rgba(242,241,237,.16);
}
.leak-item:last-child{border-bottom:1px solid rgba(242,241,237,.16)}
.leak-item-n{font-size:.72rem;letter-spacing:.18em;color:#95A0AB}
.leak-item-t{
  font-family:var(--font-b);font-weight:450;
  font-size:clamp(1.02rem,1.9vw,1.4rem);line-height:1.4;color:rgba(242,241,237,.9);
}
.leak-cta{margin-top:clamp(40px,5vw,60px)}

@media(max-width:900px){
  .leak-panel{grid-template-columns:1fr;gap:44px}
}
@media(prefers-reduced-motion:reduce){
  .leak-gauge i,.leak-section::before{transition:none}
}

/* ============================================================
   LA MONOPOSTO — F1 exploded view. The car is pure SVG in seven
   groups; main.js pins the section and scrubs the parts apart
   while the four phases light up on the right. Without JS the
   car stays assembled and every step reads at full strength.
   ============================================================ */
.f1-section{
  position:relative;overflow:hidden;
  background:
    radial-gradient(80% 60% at 20% 0%, rgba(78,90,100,.22) 0%, rgba(78,90,100,0) 60%),
    var(--ink);
}
/* garage grid: faint engineering paper behind the drawing */
.f1-section::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(242,241,237,.05) 0 1px,transparent 1px 90px),
    repeating-linear-gradient(180deg,rgba(242,241,237,.05) 0 1px,transparent 1px 90px);
  mask-image:radial-gradient(75% 75% at 40% 50%,#000 30%,transparent 100%);
}
.f1-section.section{padding:0}
.f1-stage{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  padding:clamp(40px,4vw,56px) 0;
}
.f1-grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(28px,4.5vw,72px);align-items:center;width:100%;
}
.f1-viz{position:relative}
/* the clip sits in a pit-garage monitor frame */
.f1-frame{
  position:relative;overflow:hidden;background:#0D0D11;
  border:1px solid rgba(242,241,237,.16);
}
.f1-frame::before,.f1-frame::after{
  content:"";position:absolute;width:18px;height:18px;z-index:1;pointer-events:none;
  border:2px solid var(--corsa);
}
.f1-frame::before{top:10px;left:10px;border-right:0;border-bottom:0}
.f1-frame::after{bottom:10px;right:10px;border-left:0;border-top:0}
.f1-video{display:block;width:100%;height:auto;pointer-events:none}
/* one slow scanline keeps the "telemetry feed" feel over the footage */
.f1-scan{
  position:absolute;left:0;right:0;top:-2px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(215,100,24,.55),transparent);
  animation:f1scan 5.5s linear infinite;
}
@keyframes f1scan{from{top:-2px}to{top:100%}}

.f1-hint{
  margin-top:18px;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:#8D97A1;text-align:center;transition:opacity .4s;
}

/* right column: compact so the pinned viewport holds it all */
.f1-copy .display{font-size:clamp(1.9rem,3vw,3rem)}
.f1-copy .lead{font-size:clamp(.98rem,1.3vw,1.12rem);margin-top:14px}
.f1-steps{list-style:none;margin-top:clamp(24px,2.6vw,38px);display:grid;gap:0}
.f1-step{
  position:relative;padding:clamp(12px,1.4vw,18px) 0 clamp(12px,1.4vw,18px) 24px;
  border-top:1px solid rgba(242,241,237,.14);
  transition:opacity .35s;
}
.f1-step::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  background:rgba(242,241,237,.16);transition:background .3s;
}
.f1-step.active::before{background:var(--corsa)}
.f1-code{
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:#8D97A1;
  transition:color .3s;
}
.f1-step.active .f1-code{color:var(--corsa)}
.f1-step h3{
  font-family:var(--font-d);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.2rem,1.7vw,1.55rem);line-height:1;letter-spacing:.01em;
  margin:6px 0 5px;
}
.f1-step p{
  font-size:clamp(.86rem,1.05vw,.95rem);line-height:1.5;
  color:rgba(242,241,237,.62);max-width:48ch;
}
.f1-foot{
  margin-top:clamp(18px,2vw,28px);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:#8D97A1;
}
@media(min-width:901px){
  /* only dim siblings when JS is driving the sequence */
  .f1-lit .f1-step{opacity:.36}
  .f1-lit .f1-step.active{opacity:1}
  /* with the pin running, descriptions live behind the active phase only —
     that's what lets four phases + title share one pinned viewport */
  .f1-js .f1-step{padding-top:clamp(10px,1.2vw,14px);padding-bottom:clamp(10px,1.2vw,14px)}
  .f1-js .f1-step p{
    max-height:0;opacity:0;overflow:hidden;
    transition:max-height .5s var(--ease),opacity .35s;
  }
  .f1-js .f1-step.active p{max-height:150px;opacity:1}
}
@media(max-width:900px){
  .f1-stage{min-height:0;padding:clamp(56px,10vw,80px) 0}
  .f1-grid{grid-template-columns:1fr;gap:40px}
  .f1-copy .display{font-size:clamp(2rem,8vw,2.8rem)}
}
@media(prefers-reduced-motion:reduce){
  .f1-step,.f1-step::before,.f1-code,.f1-hint{transition:none}
  .f1-scan{animation:none;display:none}
}