/* Panel and curtain have independent lifecycles: the content stays opaque while exiting. */
.modal[data-service-detail] {
  --detail-duration: .8s;
  --detail-easing: cubic-bezier(.65,0,.35,1);
  position:fixed; display:none; opacity:1; visibility:hidden; z-index:11000;
  background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
  overscroll-behavior:contain;
}
.modal[data-service-detail]::before {
  content:""; position:fixed; inset:0; pointer-events:none;
  background:var(--modal-scrim-background,rgba(0,0,0,.48));
  opacity:0; backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0);
  transition:opacity calc(var(--detail-duration)/2) var(--detail-easing), backdrop-filter calc(var(--detail-duration)/2) var(--detail-easing);
}
.modal[data-service-detail].prepare-open,
.modal[data-service-detail].modal-open,
.modal[data-service-detail].modal-closing { display:block; visibility:visible; }
.modal[data-service-detail].modal-open::before { opacity:1; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.modal[data-service-detail].modal-closing { overflow:hidden; }
.modal[data-service-detail] .modal-overlay { transform:translateY(var(--detail-exit-y,100vh)); transition:transform var(--detail-duration) var(--detail-easing); }
.modal[data-service-detail].modal-open .modal-overlay { transform:translateY(0); }
@media(prefers-reduced-motion:reduce){.modal[data-service-detail]::before,.modal[data-service-detail] .modal-overlay{transition:none!important;}}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; } }
.modal { --modal-overlay-padding-top: 0; --modal-overlay-padding-bottom: 0; --modal-overlay-padding-inline: 0; }
.modal-overlay { min-height: min(720px, calc(100svh - 80px)); }
.bento-item[id] { scroll-margin-top: 76px; }
/* Keep the generated IT app tiles square and crop the last row at the card edge. */
body:has(#app-e-licenze) .swatch-aebm-highlight-primary-green { color:#228ac5; }
body:has(#app-e-licenze) .swatch-aebm-highlight-vibrant-green { color:#42b9d0; }
body #app-e-licenze .bento-image { background-size: var(--img-size-lrg); background-position: center top; }
@media (max-width: 1068px) { body #app-e-licenze .bento-image { background-size: var(--img-size-med); } }
@media (max-width: 734px) { body #app-e-licenze .bento-image { background-size: var(--img-size-sm); } }

@media (max-width: 1068px) { body #collaborazione { --collaboration-art-size: auto 65%; } }
@media (max-width: 734px) { body #collaborazione { --collaboration-art-size: auto 61%; } }

@media(max-width:734px){#manutenzione .am-anim{aspect-ratio:1344/1200}}

/* The cream brand artwork uses dark lettering. */
body #brand :is(.bento-full-bleed-header,.badge) { color:#34241f; }

/* Keep the brand copy in the quiet left area, away from the printed mockups. */
body #brand .bento-content-frame { width:36%; max-width:360px; }
body #brand .brand-copy-title { display:block; font-size:36px; line-height:1.12; margin-bottom:16px; }
body #brand .brand-copy-description { display:block; font-size:28px; line-height:1.22; font-weight:500; }
@media(max-width:1068px){
  body #brand .bento-content-frame { width:39%; max-width:310px; }
  body #brand .brand-copy-title { font-size:30px; }
  body #brand .brand-copy-description { font-size:24px; }
}
@media(max-width:734px){
  body #brand .bento-content-frame { width:100%; max-width:100%; }
  body #brand .brand-copy-title { font-size:30px; margin-bottom:12px; }
  body #brand .brand-copy-description { max-width:310px; font-size:22px; }
  body #brand .bento-background-image { background-size:auto 50%!important; background-position:right bottom!important; background-color:#fff8ee; }
}


@media(max-width:734px){#social .em-anim{aspect-ratio:882/918}}

body #ads :is(.tile,.tile-content){background:#fff;}
/* Match the original Social phone's tighter mobile crop. */
@media(max-width:734px){body [data-reference-modal="branded-mail"] .bg-fill-tertiary-light > [role="img"]{background-size:auto 105%!important;background-position:center bottom!important;}}

/* Content artwork keeps the card geometry. */
body #testi-foto-e-video :is(.bento-full-bleed-header,.badge){color:#1d1d1f;}
body #testi-foto-e-video .bento-background-image{background-color:#f5f5f7;background-size:auto 85%!important;background-position:right bottom!important;}
@media(max-width:1068px) and (min-width:735px){body #testi-foto-e-video .bento-background-image{background-size:auto 75%!important;}}
@media(max-width:734px){body #testi-foto-e-video .bento-background-image{background-size:100% auto!important;}}


/* Native fill replaces the former flat background raster without changing its color. */
body .service-gradient-background { background-color:#00884b; background-image:linear-gradient(#00884b,#00884b); }

/* Full-width phone details keep content clear of the home indicator. The panel fills
   the fixed layer through flex growth: viewport units include the area under iOS 26
   Safari's floating toolbar, which made short details scroll past their content. */
@media (max-width: 480px) {
  .modal[data-service-detail] .modal-content-container {
    padding-bottom: max(var(--modal-overlay-padding-bottom), env(safe-area-inset-bottom, 0px));
  }
}

/* iOS 26 Safari draws page flow, not fixed layers, beneath its floating toolbar.
   An in-flow shield in the panel colour, starting where the fixed layer ends, repaints
   that strip; elsewhere it sits below the viewport. */
html::after {
  content:""; position:absolute; left:0; right:0; z-index:10999; pointer-events:none;
  top:var(--detail-shield-top,0px); height:100lvh;
  background:#fff;
  opacity:0; visibility:hidden;
  transition:opacity .3s linear .5s, visibility 0s linear .8s;
}
/* iOS Safari may keep scrolling the page behind an open detail unless the root is locked too. */
html.has-modal { overflow:hidden; }
html.has-modal::after { visibility:visible; transition:opacity .3s linear .5s, visibility 0s; }
html.detail-shield::after { opacity:1; }
@media (prefers-reduced-motion: reduce) { html::after { transition:none!important; } }