.svs{
  --svs-accent:#1f6fe5;--svs-tint:#e7f0ff;--svs-ink:#0b0b0b;
  --svs-tile-border:transparent;
  --svs-font:"Helvetica Neue",Helvetica,Arial,sans-serif; /* per usare il font del sito: inherit */
  width:100%;max-width:520px;margin:0 auto;box-sizing:border-box
}
.svs-art-wrap{width:100%}
.svs-art{width:100%;height:auto;display:block;overflow:visible}

.svs-t{fill:#fff;stroke:var(--svs-tile-border);stroke-width:2}
.svs-so{fill:none;stroke:var(--svs-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.svs-lbl text{font-family:var(--svs-font);font-size:11px;font-weight:700;fill:var(--svs-ink)}

.svs-h{fill:var(--svs-tint);stroke:none;opacity:0;animation:svs-hl 9s ease-in-out infinite}
.svs-h2{animation-delay:1.5s}.svs-h3{animation-delay:3s}
.svs-h4{animation-delay:4.5s}.svs-h5{animation-delay:6s}.svs-h6{animation-delay:7.5s}
@keyframes svs-hl{0%{opacity:0}4%{opacity:1}16%{opacity:1}22%{opacity:0}100%{opacity:0}}

/* fill-box solo sugli elementi animati: non va applicato ai gruppi con translate/scale */
.svs-i,.svs-fl{transform-box:fill-box;transform-origin:50% 50%}
.svs-i{animation:svs-pulse 9s ease-in-out infinite}
.svs-i2{animation-delay:1.5s}.svs-i3{animation-delay:3s}
.svs-i4{animation-delay:4.5s}.svs-i5{animation-delay:6s}.svs-i6{animation-delay:7.5s}
@keyframes svs-pulse{0%{transform:scale(1)}8%{transform:scale(1.15)}18%{transform:scale(1.15)}24%{transform:scale(1)}100%{transform:scale(1)}}

.svs-fl{transform-origin:50% 100%;animation:svs-flame .8s ease-in-out infinite}
.svs-fl2{animation-duration:.6s;animation-delay:.1s}
@keyframes svs-flame{0%,100%{transform:scale(1,1)}50%{transform:scale(.92,1.1)}}

.svs-air{stroke-dasharray:16 12;animation:svs-aira 1.6s linear infinite}
.svs-air2{animation-delay:-.5s}.svs-air3{animation-delay:-1s}
@keyframes svs-aira{to{stroke-dashoffset:-56}}

.svs-dr{opacity:0;animation:svs-drop 1.8s ease-in infinite}
@keyframes svs-drop{0%{opacity:0;translate:0 -2px}20%{opacity:1}100%{opacity:0;translate:0 5px}}

@media (prefers-reduced-motion:reduce){
  .svs-h,.svs-i,.svs-fl,.svs-air,.svs-dr{animation:none}
  .svs-air{stroke-dasharray:none}
  .svs-dr{opacity:1}
}
.services-opening{height:200svh;position:relative;background:#fafaf8;isolation:isolate}
.services-opening-stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.services-opening-card{position:relative;width:var(--opening-width,90%);height:var(--opening-height,78svh);background:var(--opening-bg,#eeede9);border-radius:var(--opening-radius,24px);overflow:hidden;color:#142e3c}
.services-opening-copy{position:absolute;left:14%;top:22%;width:49%}
.services-opening-copy h2{font-size:var(--opening-title,clamp(36px,3.8vw,72px));font-weight:500;line-height:1.1;letter-spacing:-.045em;transform-origin:left top;margin:0}
.services-opening-copy p{margin:28px 0 0;font-size:clamp(28px,3.3vw,62px);line-height:1.08;letter-spacing:-.045em;font-weight:500;opacity:var(--opening-copy,0);transform:translateY(calc((1 - var(--opening-copy,0))*24px))}
.services-opening-art{position:absolute;right:9%;top:50%;width:30%;max-width:480px;transform:translateY(-50%)}
.services-opening-art .svs{--svs-frame:#006ca6;--svs-accent:#006ca6;--svs-tint:#e5f3fc;--svs-ink:#173b4d;--svs-font:Onest,Arial,sans-serif}
.services-opening-next{position:absolute;left:14%;bottom:13%;display:flex;gap:20px;align-items:center;font-size:14px;color:#006ca6;opacity:var(--opening-copy,0)}
.services-opening-next svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .3s}
.services-opening-next:hover svg{transform:translateY(5px)}
.services-opening:not(.is-opening-visible) .svs-art *{animation-play-state:paused}
@media(max-width:760px){
 .services-opening{height:170svh}
 .services-opening-copy{left:8%;top:14%;width:84%}
 .services-opening-copy p{font-size:clamp(28px,7vw,44px);margin-top:20px}
 .services-opening-art{right:20%;top:65%;width:60%;max-width:310px}
 .services-opening-next{left:8%;bottom:7%;font-size:12px}
}
@media(prefers-reduced-motion:reduce){
 .services-opening{height:auto;padding:40px 0}
 .services-opening-stage{position:relative;height:90svh}
 .services-opening-copy p,.services-opening-next{opacity:1;transform:none}
 .services-opening-copy h2{font-size:20px}
}
.section.services{padding-top:0}

/* Separation from the preceding wave and the supplied six service tiles. */
.services-opening{margin-top:120px}
.services-opening-copy{left:8.2%;width:60%}
.services-opening-art{right:7%;width:32%;max-width:520px}
.services-opening-next{left:10%}
@media(max-width:760px){
 .services-opening{margin-top:65px}
 .services-opening-copy{left:8%;width:84%}
 .services-opening-art{right:20%;width:60%;max-width:310px}
 .services-opening-next{left:8%}
}

/* Start as a continuous warm background, then reveal the inset rectangle. */
.services-opening{margin-top:0;--opening-width:100%;--opening-height:100svh;--opening-radius:0px}
@media(max-width:760px){.services-opening{margin-top:0}}
@media(prefers-reduced-motion:reduce){.services-opening{--opening-width:90%;--opening-height:78svh;--opening-radius:24px}}

/* Reveal the heading and service tiles only once the heading reaches the lower viewport. */
@media(prefers-reduced-motion:no-preference){
 .services-opening-copy h2{opacity:0;filter:blur(8px);translate:0 22px;transition:opacity 1.2s cubic-bezier(.4,0,.2,1),filter 1.2s cubic-bezier(.4,0,.2,1),translate 1.2s cubic-bezier(.4,0,.2,1)}
 .services-opening-art{opacity:0;filter:blur(8px);translate:0 26px;transition:opacity 1.4s .12s cubic-bezier(.4,0,.2,1),filter 1.4s .12s cubic-bezier(.4,0,.2,1),translate 1.4s .12s cubic-bezier(.4,0,.2,1)}
 .services-opening.is-content-revealed .services-opening-copy h2,.services-opening.is-content-revealed .services-opening-art{opacity:1;filter:blur(0);translate:0 0}
}

/* Reversible, staggered entrances for the six complete service tiles. */
@media(prefers-reduced-motion:no-preference){
 .services-opening .services-opening-art{opacity:1;filter:none;translate:none;transition:none}
 .services-opening .svs-tile{opacity:var(--tile-reveal,0);filter:blur(calc((1 - var(--tile-reveal,0)) * 5px));translate:0 calc((1 - var(--tile-reveal,0)) * 12px);transition:none}
}

/* The heading fades out before the remaining tiles when scrolling back up. */
@media(prefers-reduced-motion:no-preference){
 .services-opening #services-opening-title{opacity:var(--heading-reveal,0);filter:blur(calc((1 - var(--heading-reveal,0)) * 8px));translate:0 calc((1 - var(--heading-reveal,0)) * 22px);transition:none}
}

/* Place the service invitation with its headline rather than at the card bottom. */
.services-opening-copy .services-opening-next{position:relative;left:auto;bottom:auto;display:inline-flex;gap:24px;margin-top:34px;padding:0;color:#006ca6;font-size:16px;font-weight:500;line-height:1.2;letter-spacing:-.02em;pointer-events:auto}
.opening-next-icon{display:grid;place-items:center;width:48px;height:48px;flex:none;border:1px solid #006ca640;border-radius:50%;background:transparent;transition:background .3s,color .3s,border-color .3s}
.services-opening-next .opening-next-icon svg{width:21px;height:21px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.services-opening-next:hover .opening-next-icon,.services-opening-next:focus-visible .opening-next-icon{background:#006ca6;border-color:#006ca6;color:#fff}
.services-opening-next:hover .opening-next-icon svg{transform:translateY(3px)}
@media(max-width:760px){.services-opening-copy .services-opening-next{margin-top:24px;gap:18px;font-size:14px}.opening-next-icon{width:40px;height:40px}}

/* Supplied mouse-and-chevron scroll cue, centered below the composition. */
.opening-scroll-hint{display:inline-flex;flex-direction:column;align-items:center;gap:4px;color:#006ca6}
.opening-scroll-hint .mouse{position:relative;width:26px;height:42px;border:2px solid currentColor;border-radius:14px;margin-bottom:4px}
.opening-scroll-hint .wheel{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:currentColor;animation:opening-wheel 1.6s ease-in-out infinite}
.opening-scroll-hint .chev{width:9px;height:9px;margin-top:-3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);animation:opening-chevron 1.6s ease-in-out infinite}
.opening-scroll-hint .chev+.chev{animation-delay:.2s}
@keyframes opening-wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@keyframes opening-chevron{0%{opacity:0;transform:translateY(-4px) rotate(45deg)}50%{opacity:1}100%{opacity:0;transform:translateY(4px) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){.opening-scroll-hint *{animation:none!important;opacity:.9}}

.services-opening .opening-scroll-hint{position:absolute;left:50%;right:auto;bottom:5%;transform:translateX(-50%);display:inline-flex;gap:4px;margin:0;padding:0;width:auto;color:#006ca6;line-height:1;z-index:2}

/* Clear the opening composition as the first service enters, reversible on scroll. */
@media(prefers-reduced-motion:no-preference){
 .services-opening .services-opening-copy,.services-opening .services-opening-art{opacity:var(--opening-exit,1)}
 .services-opening .opening-scroll-hint{opacity:calc(var(--opening-copy,0) * var(--opening-exit,1))}
}