:root{--ico:var(--sp-in);--inf-g:"40 60 80"}

.hero{position:relative;height:100svh;min-height:calc(var(--s-11) * 2);overflow:hidden;background:var(--ink)}
.hero__media{position:absolute;inset:0}
.hero > .rule{position:absolute;inset:auto 0 0 0}
.hero__media iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100vw,177.78svh);height:max(100svh,56.25vw);border:0;pointer-events:none;
}
.hero__media iframe:fullscreen{
  top:0;left:0;transform:none;width:100%;height:100%;pointer-events:auto;
}
.hero__poster{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;
  object-fit:cover;object-position:center;pointer-events:none;
  transition:opacity 420ms var(--e-band);
}
.hero__poster.is-off{opacity:0}
@media (prefers-reduced-motion:reduce){.hero__poster{transition:none}}
.hero__vuoto{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  max-width:min(80%,32em);text-align:center;
}
.hero__veil{
  position:absolute;inset:auto 0 0 0;height:34%;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--ink) 72%,transparent));
}
.hero__scroll{
  position:absolute;left:50%;z-index:3;
  bottom:calc(var(--s-7) + var(--sp-h) + var(--s-3) + var(--sp-h) + var(--s-7));
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:var(--s-1);
  color:var(--paper);pointer-events:none;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.8));
}
.hero__scroll__t{
  font-family:var(--f-sans);font-variation-settings:"wdth" var(--ui-wdth);font-stretch:125%;
  font-size:var(--t-menu);font-weight:700;letter-spacing:var(--tr-menu);text-transform:uppercase;
  opacity:.72;
}
.hero__scroll svg{width:16px;height:16px;display:block;animation:scroll-bob 1.8s var(--e-osmo) infinite}
@keyframes scroll-bob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(5px);opacity:1}}
@media (prefers-reduced-motion:reduce){.hero__scroll svg{animation:none}}



.hero__x{
  position:absolute;top:var(--s-4);right:var(--s-4);z-index:4;
  width:var(--sp-quad);height:var(--sp-quad);
  display:none;place-items:center;
  margin:0;padding:0;border:0;cursor:pointer;
  background:var(--paper);color:var(--ink);
  transition:background var(--t-band) var(--e-band),color var(--t-band) var(--e-band);
}
.hero__x svg{width:var(--ico);height:var(--ico);display:block}
.hero__x:hover,.hero__x:focus-visible{background:var(--accent);color:var(--paper)}
.hero.is-schermo .hero__x{display:grid}
.hero:fullscreen{width:100vw;height:100vh;background:var(--ink)}
@media (prefers-reduced-motion:reduce){.hero__x{transition:none}}

.inf{overflow:hidden;overflow:clip;padding:var(--s-9) 0 var(--s-10)}
.inf__rail{
  display:flex;align-items:start;
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.inf__rail::-webkit-scrollbar{width:0;height:0}
.inf__lead{flex:0 0 var(--g4-a);max-width:var(--g4-a);padding-left:var(--filo);padding-right:var(--s-4)}
.inf__h span{display:block}
.inf__h #infClient{
  display:block;font-size:var(--t-ui);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--quiet);
}
.inf__p{margin-top:var(--s-3)}
.inf__nav{margin-top:var(--s-8);position:sticky;left:var(--filo);z-index:2;width:max-content}
.frecce{display:inline-flex;flex:0 0 auto;min-width:0;gap:var(--sp-gap)}
.frecce .sp-quad{transition:background var(--t-band) var(--e-band),color var(--t-band) var(--e-band)}
.frecce .sp-quad:enabled:hover,.frecce .sp-quad:focus-visible{background:var(--accent);color:var(--paper)}
.frecce.is-spenta{opacity:.45}
.frecce.is-spenta .sp-quad{cursor:default}

.serv{display:grid;gap:0;width:100%;margin-top:var(--s-1);padding-left:0}
.serv li{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);
  min-height:48px;width:100%;
  padding:var(--s-2) 0 var(--s-2) var(--filo);
  border-bottom:1px solid var(--linea);
  background:transparent;color:var(--paper);
  font-family:var(--f-sans);font-variation-settings:normal;font-stretch:100%;
  font-size:var(--t-h3);font-weight:500;line-height:var(--lh-h3);
  letter-spacing:var(--tr-h3);text-transform:none;
}
.serv li .sp-txt{
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  font-variation-settings:inherit;font-stretch:inherit;white-space:normal;
}
.card{flex:0 0 calc(var(--g4-b) - var(--g4-a));width:calc(var(--g4-b) - var(--g4-a))}
.card+.card{margin-left:var(--s-4)}
.card__box{
  position:relative;width:100%;aspect-ratio:calc(16 / 9 / 1.3);overflow:hidden;
  background:var(--ink);display:grid;place-items:center;padding:var(--s-4);
  isolation:isolate;
}
.card__v{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;
}
.card__v[hidden]{display:none}
.card__tinta{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:color-mix(in srgb,var(--ink) 72%,transparent);
}
.card__k{margin-top:var(--s-3);padding-left:var(--filo);text-transform:uppercase}
.card__p{margin-top:var(--s-1);padding-left:var(--filo)}
.facts{
  margin:var(--s-4) 0 0;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--s-0) var(--s-3);
}
.facts dt{
  font-family:var(--f-sans);font-variation-settings:"wdth" var(--ui-wdth);font-stretch:125%;
  font-size:var(--t-menu);font-weight:700;line-height:var(--lh-para-md);
  letter-spacing:var(--tr-menu);text-transform:uppercase;
}
.facts dd{margin:0;font-size:var(--t-para-md);line-height:var(--lh-para-md)}

.segna{display:block;border:1px dashed var(--paper);padding:var(--s-2);color:var(--paper)}
.is-seg{font-family:var(--f-sans);font-size:var(--t-para-md);line-height:var(--lh-para-md)}
.segna[hidden],.serv[hidden]{display:none}
.card > .segna{margin-top:var(--s-1);margin-left:var(--filo);width:calc(100% - var(--filo))}
.segna--riga{display:inline-block;padding:0 var(--s-0)}

.inf__col{display:contents}
.inf__k{display:none}

html[data-vista="video"] .inf__rail{
  display:grid;grid-template-columns:40% repeat(3,minmax(0,1fr));align-items:start;
  width:100%;overflow-x:visible;cursor:auto;
}
html[data-vista="video"] .inf__lead{display:contents}
html[data-vista="video"] .inf__col{display:block}
html[data-vista="video"] .inf__h,
html[data-vista="video"] .inf__col,
html[data-vista="video"] .card--serv{padding-left:var(--filo);padding-right:var(--s-4)}
html[data-vista="video"] .inf__h{
  order:1;margin:0;
  font-size:var(--t-h1);line-height:var(--lh-h1);letter-spacing:var(--tr-h1);
}
html[data-vista="video"] .card--serv{order:4;width:auto;margin:0}
html[data-vista="video"] .inf__col--fatti{order:3}
html[data-vista="video"] .inf__col--desc{order:2}
html[data-vista="video"] .card--serv .card__box{display:none}
html[data-vista="video"] .inf__nav,
html[data-vista="video"] #cS1,
html[data-vista="video"] #cS2,
html[data-vista="video"] #cS3{display:none}

html[data-vista="video"] .inf__h #infClient{
  font-size:inherit;line-height:inherit;letter-spacing:inherit;
  text-transform:none;color:var(--paper);
}
html[data-vista="video"] .inf__h #infTitle{color:var(--quiet)}

html[data-vista="video"] .inf__k,
html[data-vista="video"] .card--serv .card__k{
  display:block;margin:0;padding-left:0;
  font-family:var(--f-sans);font-variation-settings:"wdth" var(--ui-wdth);font-stretch:125%;
  font-size:var(--t-menu);font-weight:700;line-height:var(--lh-para-md);
  letter-spacing:var(--tr-menu);text-transform:uppercase;color:var(--paper);
}
html[data-vista="video"] .serv{margin-top:var(--s-1);grid-template-columns:minmax(0,1fr)}
html[data-vista="video"] .serv li{
  display:block;min-height:0;width:auto;padding:0;border:0;
  font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:500;
  color:var(--quiet);
}
html[data-vista="video"] .facts{
  margin:0;grid-template-columns:minmax(0,1fr);gap:var(--s-1) 0;
}
html[data-vista="video"] .facts dd{color:var(--quiet)}
html[data-vista="video"] .facts dd+dt{margin-top:var(--s-3)}
html[data-vista="video"] .inf__col--desc .inf__p{margin-top:var(--s-1);color:var(--quiet)}
html[data-vista="video"] .inf__col--desc .segna{margin-top:var(--s-1)}

@media (max-width:1199px){
  :root{--inf-g:"34 56 78"}
  html[data-vista="video"] .inf__rail{grid-template-columns:34% repeat(3,minmax(0,1fr))}
}
@media (max-width:767px){
  :root{--inf-g:""}
  html[data-vista="video"] .inf__rail{grid-template-columns:minmax(0,1fr);row-gap:var(--s-6)}
  html[data-vista="video"] .inf__h{grid-column:auto;margin-bottom:var(--s-6)}
  html[data-vista="video"] .inf__h,
  html[data-vista="video"] .inf__col,
  html[data-vista="video"] .card--serv{padding-right:0}
}

.gal{padding-bottom:var(--s-10)}
.frames{
  margin-top:var(--s-6);
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--s-4);
}
.frames figure{margin:0;position:relative;z-index:1}
.frames img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.frames img[hidden]{display:none}
@media (min-width:901px){
  .frames > :nth-child(1){grid-column:span 6}
  .frames > :nth-child(2){grid-column:span 2}
  .frames > :nth-child(3){grid-column:span 4}
  .frames > :nth-child(4){grid-column:span 4}
  .frames > :nth-child(5){grid-column:span 2}
  .frames > :nth-child(6){grid-column:span 6}
}
.frame__vuoto[hidden]{display:none}
.frame__vuoto{
  display:grid;place-items:center;aspect-ratio:16/9;
  border:1px dashed var(--paper);padding:var(--s-4);
}

.end{
  padding-top:var(--s-10);padding-bottom:var(--s-6);
  min-height:var(--schermo-80);
  display:flex;flex-direction:column;
}
.end>.wrap{flex:1 1 auto;display:grid;align-content:center}
.end__banda{height:var(--s-9)}
.end__in{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:var(--s-5);padding-inline:var(--clear);
  width:22%;margin-inline:auto;
}
.end__h{line-height:var(--lh-display)}
.end__p{margin-top:var(--s-9);max-width:20em}
.end__cta{margin-top:var(--s-10)}

@media (max-width:900px){
  .inf__rail{flex-direction:column;overflow-x:visible}
  .inf__lead{flex:0 0 auto;max-width:100%;padding-right:0}
  .card{flex:0 0 auto;width:100%;margin-top:var(--s-6)}
  .card+.card{margin-left:0}
  .frames{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
  .frecce{width:auto}
  .inf__nav{display:none}
  .end__in{width:100%}
}
.hero__hud,.hero__back{opacity:.001;animation:hud-in var(--t-stg) var(--e-osmo) var(--s-att,400ms) both}
.hero__back{--s-att:calc(400ms + var(--stg-step))}
@keyframes hud-in{from{opacity:.001;transform:translateY(var(--s-3))}to{opacity:1;transform:none}}
.hero.is-pronta .hero__hud,.hero.is-pronta .hero__back{
  animation:none;opacity:1;transform:none;
  transition:opacity var(--t-band) var(--e-band),transform var(--t-band) var(--e-band);
}
.hero.is-pronta.is-via .hero__hud,.hero.is-pronta.is-via .hero__back{
  opacity:.001;transform:translateY(var(--s-3));pointer-events:none;
}
.hero.is-pronta .hero__scroll{transition:opacity var(--t-band) var(--e-band)}
.hero.is-pronta.is-via .hero__scroll{opacity:.001}
html:has(.hero.is-pronta.is-via) .head,
html:has(.hero.is-pronta.is-via) .velo{opacity:.001;pointer-events:none}
@media (prefers-reduced-motion: reduce){
  .hero.is-pronta .hero__scroll{transition:none}
  html.is-aperto .head,.velo{transition:none}
  .hero__hud,.hero__back{animation:none;opacity:1}
  .hero.is-pronta .hero__hud,.hero.is-pronta .hero__back{transition:none}
  .hero.is-pronta.is-via .hero__hud,.hero.is-pronta.is-via .hero__back{transform:none}
  .sp-quad,.ctl__b,.hero__back{transition:none}
  .inf__rail{flex-direction:column;overflow-x:visible}
  .inf__lead{flex:0 0 auto;max-width:100%;padding-right:0}
  .card{flex:0 0 auto;width:100%;margin-top:var(--s-6)}
  .card+.card{margin-left:0}
}

.inf__rail{cursor:grab}
.inf__rail.is-trascina{cursor:grabbing;user-select:none}
.inf__rail.is-trascina *{pointer-events:none}
.facts dd ul{list-style:none;margin:0;padding:0}

html[data-vista="video"] .inf__col,
html[data-vista="video"] .card--serv,
html[data-vista="video"] .inf__col--desc,
html[data-vista="video"] .inf__col--fatti{min-width:0}
html[data-vista="video"] .serv li .sp-txt,
html[data-vista="video"] .serv li,
html[data-vista="video"] .facts dt,
html[data-vista="video"] .facts dd,
html[data-vista="video"] .inf__col--desc .inf__p,
html[data-vista="video"] .inf__k,
html[data-vista="video"] .card--serv .card__k{
  white-space:normal;overflow-wrap:anywhere;word-break:normal;
}