:root {

  --page: #fcfcfc; --surface: #ffffff; --soft: #f5f6f7; --deep: #133153; --deep-2: #0e1c32;

  --ink: #0e2035; --muted: #5e6d7e; --on-dark: #ffffff; --on-dark-muted: #bdb9b3;

  --line: #e4e7e5; --line-soft: rgba(18,22,27,.12); --line-warm: #e2dcd2; --live: #429e5c; --track: #dee3e8;

  --paper: #ffffff; --paper-3: #0e1c32; --ink-2: #e6e6e6; --line-strong: rgba(0,0,0,.28); --azure: #4a7cff; --signal: #fa4055; --on-fill: #0b1a3f;

  --shadow-card: 0 2px 12px rgba(0,0,0,.05); --shadow-pop: 0 8px 24px rgba(0,0,0,.12);

  --sans: "Instrument Sans", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.2, 0, 0, 1);

  color-scheme: light;

}

* { box-sizing: border-box }

[hidden] { display: none !important }

html { scroll-behavior: smooth; background: var(--soft) }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

body { margin: 0; background: var(--soft); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased }

h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 700; text-wrap: balance }

p { margin: 0 }

a { color: inherit }

a:focus-visible, button:focus-visible { outline: 2px solid var(--deep); outline-offset: 3px }

.mono { font: 500 14px/1.3 var(--mono); letter-spacing: .0625rem; text-transform: uppercase }



/* accessibilita' — skip link: fuori schermo, in alto a sinistra con :focus */

.skip { position: absolute; left: -9999px; top: auto; color: #fff; background: var(--deep); padding: 12px 20px; z-index: 1000; font: 500 14px/1 var(--mono); letter-spacing: .0625rem; text-transform: uppercase; text-decoration: none; transition: left 150ms var(--ease) }
.skip:focus { left: 16px; top: 16px; outline: none }
.skip:focus-visible { left: 16px; top: 16px; outline: 2px solid var(--deep); outline-offset: 3px }


/* campo -> card -> pozzo (niente overflow:hidden nella catena: la testata e sticky) */

.campo { padding: 12px 16px 16px }

.card { background: var(--page); border-radius: 32px; box-shadow: var(--shadow-card) }

.pozzo { background: var(--surface); border-radius: 32px 32px 0 0; padding: 16px 16px 0 }

.max { max-width: 1312px; margin: 0 auto }



/* barra di stato */

.stato { display: flex; justify-content: space-between; gap: 16px; padding: 4px 8px 14px; color: var(--muted) }

.stato .vivo::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live); margin-right: 10px; vertical-align: 1px; box-shadow: 0 0 0 4px rgba(66,158,92,.15) }

.stato .dx { display: flex; gap: 22px }



/* testata: targa che resta in alto dentro il pozzo */

header.testata { position: sticky; top: 16px; z-index: 20; margin-bottom: 16px }

.targa { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 10px 0 24px; border-radius: 20px;

  background: rgba(255,255,255,.86); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-card) }

.marchio { font: 700 22px/1 var(--sans); letter-spacing: -.04em; text-decoration: none; color: var(--ink) }

.voci { display: flex; align-items: center; gap: 26px }

.voci a { text-decoration: none; color: var(--muted); transition: color 150ms var(--ease) }

.voci a:hover { color: var(--ink) }

.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 28px; border: 0; cursor: pointer;

  font: 500 14px/1 var(--mono); letter-spacing: .0625rem; text-transform: uppercase; text-decoration: none; transition: background 200ms var(--ease), color 200ms var(--ease) }

.pill.piena { background: var(--deep); color: #fff }

.pill.piena:hover { background: var(--deep-2) }

.pill.chiara { background: #fff; color: var(--deep) }

.pill.chiara:hover { background: #e9eef4 }

.pill.vuota { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-soft) }

.pill.vuota:hover { box-shadow: inset 0 0 0 1px var(--ink) }

.pill .fr { transition: transform 250ms var(--ease) } .pill:hover .fr { transform: translateX(3px) }

.voci .pill { color: #fff }

.apri { display: none; height: 44px; padding: 0 18px; border-radius: 28px; border: 1px solid var(--line-soft); background: #fff; color: var(--ink); cursor: pointer; font: 500 14px/1 var(--mono); letter-spacing: .0625rem; text-transform: uppercase; align-items: center; gap: 10px }

.apri i { width: 16px; height: 10px; border-block: 2px solid currentColor; position: relative; display: block }

.menu-mob { margin-top: 10px; border-radius: 20px; background: var(--deep); padding: 10px 22px 22px; display: grid }

.menu-mob a { color: #fff; text-decoration: none; font: 600 24px/1.2 var(--sans); letter-spacing: -.02em; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.14) }

.menu-mob .pill { margin-top: 20px; border-bottom: 0; font: 500 14px/1 var(--mono); padding: 0 22px }



/* 1 apertura: pannello blu notte con la rete di nodi */

.apertura { position: relative; border-radius: 24px; overflow: hidden; background: var(--deep); color: #fff; min-height: min(760px, calc(100svh - 150px)); display: grid; align-content: end }

#ordine { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease }

#ordine.pronto { opacity: 1 }

.velo { position: absolute; inset: 0; pointer-events: none; background:

  linear-gradient(90deg, rgba(19,49,83,.97) 0%, rgba(19,49,83,.9) 38%, rgba(19,49,83,.25) 60%, rgba(19,49,83,0) 75%),

  linear-gradient(0deg, rgba(14,28,50,.6) 0%, rgba(14,28,50,0) 35%) }

.apertura .dentro { position: relative; padding: clamp(28px, 4vw, 56px); display: grid; gap: 26px; max-width: 780px }

.apertura .ciglio { color: rgba(255,255,255,.65) }

.apertura h1 { color: #fff; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.04; letter-spacing: -0.035em }

.apertura h1 .spenta { color: rgba(255,255,255,.6); display: block }

.apertura .frase { font-size: clamp(18px, 1.5vw, 20px); color: rgba(255,255,255,.82); max-width: 48ch }

.azioni { display: flex; flex-wrap: wrap; gap: 12px }

.azioni .pill.vuota { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35) }

.azioni .pill.vuota:hover { box-shadow: inset 0 0 0 1px #fff }

.vetri { display: flex; flex-wrap: wrap; gap: 10px }

.vetro { border-radius: 18px; padding: 9px 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff }

.registro { position: absolute; right: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 40px); display: grid; gap: 10px; width: 270px }

.registro div { border-radius: 16px; padding: 14px 18px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px) }

.registro b { display: block; font: 700 28px/1.1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums }

.registro span { display: block; color: rgba(255,255,255,.7); font-size: 14.5px; line-height: 1.4; margin-top: 2px }



/* arrivi: per riga, scorrendo di lato o dal basso, mai una dissolvenza del blocco */

.sale { animation: sale .7s var(--ease) both }

.lato-in { animation: lato .8s var(--ease) both }

@keyframes sale { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: none } }

@keyframes lato { from { opacity: 0; transform: translateX(-28px) } to { opacity: 1; transform: none } }

.d1 { animation-delay: .1s } .d2 { animation-delay: .25s } .d3 { animation-delay: .38s } .d4 { animation-delay: .5s } .d5 { animation-delay: .62s }

.rivela { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease) }

.rivela.vista { opacity: 1; transform: none }

@media (prefers-reduced-motion: reduce) { .sale, .lato-in { animation: none } .rivela { opacity: 1; transform: none; transition: none } #ordine { transition: none } }



/* sezioni */

.sez { padding: clamp(72px, 9vw, 120px) clamp(8px, 2vw, 32px); scroll-margin-top: 100px }

.testa { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 56px); max-width: 820px }

.testa .ciglio { color: var(--deep) }

.testa h2 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.035em }

.testa h2 .spenta { color: var(--muted) }

.testa p { font-size: 19px; color: var(--muted); max-width: 60ch }



/* 2 problema -> disciplina: pannello grigio con sei card */

.pannello-grigio { background: var(--soft); border-radius: 32px; padding: clamp(20px, 3vw, 40px) }

.servizi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }

.binario { display: none; align-items: center; gap: 12px; padding: 16px 16px 2px 0; color: var(--muted) }

.binario i { flex: 1; height: 2px; background: var(--track); border-radius: 2px; position: relative }

.binario b { position: absolute; left: 0; top: 0; bottom: 0; width: 16.7%; background: var(--deep); border-radius: 2px; transition: left 250ms var(--ease) }

.servizio { background: #fff; border-radius: 20px; padding: 26px; display: grid; gap: 14px; align-content: start; box-shadow: var(--shadow-card); min-width: 0 }

.servizio .prob { color: var(--muted); display: flex; gap: 10px }

.servizio .prob em { font-style: normal; color: var(--deep) }

.servizio h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 600 }

.servizio p { color: var(--muted); font-size: 16.5px }

.servizio ul { margin: 4px 0 0; padding: 14px 0 0; list-style: none; display: grid; gap: 8px; border-top: 1px solid var(--line) }

.servizio li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; font-size: 15.5px; line-height: 1.45 }

.servizio li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--deep); margin-top: 7px }



/* 3 prove: dichiarazione + quattro numeri + certificazioni */

.dichiara { font-size: clamp(1.6rem, 3.1vw, 2.5rem); line-height: 1.25; letter-spacing: -0.025em; color: var(--muted); max-width: 30ch; font-weight: 500 }

.dichiara b { color: var(--ink); font-weight: 600 }

.numeri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line) }

.numeri div { padding: 28px 24px 0 0; display: grid; gap: 10px; align-content: start; min-width: 0 }

.numeri div + div { padding-left: 24px; border-left: 1px solid var(--line) }

.numeri b { font: 700 clamp(44px, 5vw, 72px)/1 var(--sans); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--ink) }

.numeri .cifra { display: flex; align-items: baseline; gap: 10px }

.numeri small { font: 500 14px/1 var(--mono); letter-spacing: .0625rem; text-transform: uppercase; color: var(--muted) }

.numeri span { color: var(--muted); font-size: 15.5px; line-height: 1.5 }

.cert { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px }

.chip { display: inline-flex; align-items: center; gap: 10px; border-radius: 18px; padding: 10px 16px; background: var(--soft); border: 1px solid var(--line); color: var(--ink) }

.chip .spunta { width: 18px; height: 18px; border-radius: 50%; background: var(--deep); display: grid; place-items: center }

.chip .spunta::after { content: ""; width: 7px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px) }

.chip span.desc { font: 400 15px/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--muted) }



/* 4 metodo: fisarmonica a cinque passi, la prima aperta */

.fisa { display: grid; gap: 12px }

.passo { border-radius: 20px; background: var(--soft); border: 1px solid var(--line); transition: background 250ms var(--ease) }

.passo[data-aperto="true"] { background: #fff; box-shadow: var(--shadow-card) }

.passo > button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 40px; gap: 16px; align-items: center; padding: 22px 26px }

.passo > button:focus-visible { outline: 2px solid var(--deep); outline-offset: -2px; border-radius: 20px }

.passo .n { color: var(--deep) }

.passo h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -0.02em }

.passo .meta { color: var(--muted) }

.passo .giro { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-soft); display: grid; place-items: center; transition: transform 300ms var(--ease), background 250ms var(--ease), color 250ms var(--ease) }

.passo[data-aperto="true"] .giro { transform: rotate(90deg); background: var(--deep); color: #fff; border-color: var(--deep) }

.passo .corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease) }

.passo[data-aperto="true"] .corpo { grid-template-rows: 1fr }

.passo .corpo > div { overflow: hidden }

.passo .corpo .in { padding: 0 26px 26px 106px; display: grid; gap: 18px; max-width: 900px }

.passo .corpo p { font-size: 18px; color: var(--ink) }

@media (prefers-reduced-motion: reduce) { .passo .corpo, .passo .giro { transition: none } }

.nota-met { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; color: var(--muted) }



/* 5 settori */

.settori { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 28px; align-items: start; padding: 48px clamp(8px, 2vw, 32px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }

.settori h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.03em; margin-top: 12px }

.settori .chips { display: flex; flex-wrap: wrap; gap: 10px }

.settori .chip { font: 400 16px/1.3 var(--sans); background: #fff }

.link { color: var(--deep); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px }

.settori .link { display: inline-block; margin-top: 18px }



/* 6 chiusura */

.chiusura { padding: clamp(72px, 9vw, 120px) clamp(8px, 2vw, 32px) }

.chiusura .riquadro { border-radius: 24px; background: var(--soft); border: 1px solid var(--line); padding: clamp(28px, 4.5vw, 64px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end }

.chiusura h2 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); line-height: 1.05; letter-spacing: -0.035em }

.chiusura h2 .spenta { color: var(--muted) }

.chiusura .lato { display: grid; gap: 20px; justify-items: start }

.chiusura .lato p { color: var(--muted); font-size: 18px }

.garanzie { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px }

.garanzie div { background: #fff; border-radius: 14px; padding: 18px 20px; display: grid; gap: 6px; border: 1px solid var(--line) }

.garanzie b { font-weight: 600; font-size: 17px }

.garanzie span { color: var(--muted); font-size: 15px }



/* piede blu notte, a filo della card */

footer { background: var(--deep); color: rgba(255,255,255,.82); border-radius: 32px 32px 32px 32px; padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 56px) 28px; margin-top: 0; container-type: inline-size }

footer .alto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px }

footer .slogan { font: 700 clamp(1.8rem, 3.4vw, 2.75rem)/1.1 var(--sans); letter-spacing: -0.035em; color: #fff }

footer .slogan span { color: rgba(255,255,255,.55); display: block }

footer .griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-block: 1px solid rgba(255,255,255,.14); padding-block: 24px }

footer .griglia .mono { color: rgba(255,255,255,.75); display: block; margin-bottom: 10px; font-size: 12.5px }

footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15.5px }

footer a { text-decoration: none } footer a:hover { color: #fff }

footer .parola { font: 700 30cqw/0.86 var(--sans); letter-spacing: -0.06em; color: #fff; margin: 32px 0 12px; white-space: nowrap }

footer .legale { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: var(--on-dark-muted); font-size: 12.5px }



/* ---- banner cookie (cookie-banner.js): token Ridgeline, contrasto AA ---- */

.mast-cookie-bar {
  background: var(--deep) !important;
  color: var(--on-dark) !important;
  border-color: rgba(255,255,255,.14) !important;
}
.mast-cookie-text { color: rgba(255,255,255,.85) !important }
.mast-cookie-text a { color: #fff !important }
.mast-cookie-buttons { gap: 12px !important }
.mast-cookie-btn {
  border: 1px solid rgba(255,255,255,.4) !important;
  background: transparent !important;
  color: var(--on-dark) !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
}
.mast-cookie-btn:hover {
  border-color: #fff !important;
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
}
.mast-cookie-btn-primary {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--deep) !important;
  font-weight: 500;
}
.mast-cookie-btn-primary:hover {
  background: #f0f0f0 !important;
  border-color: #f0f0f0 !important;
  color: var(--deep-2) !important;
}
.mast-cookie-launcher {
  background: var(--deep) !important;
  color: var(--on-dark) !important;
  border-color: rgba(255,255,255,.2) !important;
}
.mast-cookie-launcher:hover {
  color: #fff !important;
  border-color: #fff !important;
}
.mast-cookie-btn:focus-visible, .mast-cookie-launcher:focus-visible {
  outline: 2px solid var(--on-dark) !important;
  outline-offset: 2px !important;
}
.mast-cookie-btn-primary:focus-visible {
  outline: 2px solid var(--deep) !important;
  outline-offset: 2px !important;
}



@media (max-width: 1024px) {

  .servizi { grid-template-columns: repeat(2, minmax(0, 1fr)) }

  .registro { display: none }

}

@media (max-width: 860px) {

  .voci, .stato .dx { display: none } .apri { display: inline-flex }

  .apertura { min-height: 0; align-content: start }

  .apertura .dentro { padding: 260px 22px 26px }

  .velo { background: linear-gradient(180deg, rgba(19,49,83,0) 0, rgba(19,49,83,0) 200px, rgba(19,49,83,.92) 290px, rgba(19,49,83,.96) 100%) }

  /* telefono: le sei card diventano un binario che scorre di lato, come il binario dei lavori di Ridgeline */

  .pannello-grigio { padding: 16px 0 16px 16px }

  .servizi { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-right: 16px; scrollbar-width: none }

  .servizi::-webkit-scrollbar { display: none }

  .servizio { flex: 0 0 84%; scroll-snap-align: start }

  .binario { display: flex !important }

  .cert { display: grid }

  .cert .chip { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 4px 10px }

  .cert .chip .desc { grid-column: 2 }

  .numeri { grid-template-columns: repeat(2, minmax(0, 1fr)) }

  .numeri div:nth-child(3) { padding-left: 0; border-left: 0 }

  .numeri div { padding-bottom: 24px }

  .passo > button { grid-template-columns: 44px minmax(0, 1fr) 40px; padding: 18px }

  .passo .meta { display: none }

  .passo .corpo .in { padding: 0 18px 22px 18px }

  .settori, .chiusura .riquadro, footer .alto { grid-template-columns: 1fr }

  .garanzie { grid-template-columns: 1fr }

  footer .griglia { grid-template-columns: 1fr 1fr }

}

@media (max-width: 520px) {

  .campo { padding: 8px }

  .pozzo { padding: 10px 10px 0 }

  .targa { padding: 0 8px 0 18px; height: 60px }

  .numeri { grid-template-columns: 1fr }

  .numeri div, .numeri div + div { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--line) }

  .numeri div:last-child { border-bottom: 0 }

  footer .griglia { grid-template-columns: 1fr }

  .sez, .settori, .chiusura { padding-left: 6px; padding-right: 6px }

}

.mast-cookie-bar, .mast-cookie-launcher { color: #e6e6e6 !important }
.mast-cookie-bar a, .mast-cookie-text a { color: #6b9aff !important }
.mast-cookie-btn, .mast-cookie-btn-secondary { color: #ffffff !important }
.mast-cookie-btn:hover { color: #ffffff !important; border-color: #ffffff }
.mast-cookie-btn-primary { background: #ffffff !important; color: #0e1c32 !important; border-color: #ffffff }
.mast-cookie-btn-primary:hover { background: #fa4055 !important; border-color: #fa4055; color: #0b1a3f !important }