/* =========================================================================
   Savorita What savorita is about (principi e team)
   Specifica: docs/home-2027.md §3 · Mockup: mockups/home-principles/

   Regole di scrittura (le stesse degli altri widget):
   - ogni selettore parte da .sv-prn.sv-prn (anche i due pannelli, che vanno
     in fondo al body, portano la radice addosso)
   - responsive a contenitore: la sezione sotto 1000 è un telefono grande
     (finestre una sopra l'altra); i pannelli, fissi a tutto schermo, sono
     contenitori di sé stessi e cambiano sotto 700
   - le variabili che cambiano con il contenitore stanno sui discendenti
   - niente !important su display; chiuso vuol dire spento
   ========================================================================= */

.sv-prn.sv-prn{
  --svp-green:#087F23; --svp-green-d:#054a15; --svp-red:#FF636D; --svp-yellow:#FFCC37;
  --svp-ink:#293241; --svp-paper:#F7F6FE; --svp-muted:#6B8083; --svp-line:rgba(41,50,65,.14);
  --svp-night:#10151d;
  --svp-font:Nunito, "Nunito Sans", system-ui, sans-serif;
  --svp-ease:cubic-bezier(.7,0,.2,1); --svp-out:cubic-bezier(.2,.8,.2,1);
  --svp-pad:clamp(16px,3vw,44px); --svp-r:22px;
  font-family:var(--svp-font); line-height:1.4; /* il kit dà al body un'interlinea fissa (30px) che i testi piccoli erediterebbero */
  -webkit-font-smoothing:antialiased;
  text-align:left;
}
.sv-prn.sv-prn *,
.sv-prn.sv-prn *::before,
.sv-prn.sv-prn *::after{ box-sizing:border-box; }
/* "html" in testa: un gradino sopra il kit di Elementor (.elementor-kit-N button:hover/:focus,
   che a ogni bottone dà sfondo e bordo verdi), sotto le nostre classi (.sv-prn.sv-prn .x),
   così in hover i bottoni tengono solo lo sfondo e il bordo che dichiarano (0.10.1) */
html .sv-prn.sv-prn button{
  font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer;
  box-shadow:none; text-transform:none; letter-spacing:inherit; line-height:inherit; min-height:0;
  -webkit-tap-highlight-color:transparent;
}
.sv-prn.sv-prn :focus-visible{ outline:3px solid var(--svp-yellow); outline-offset:3px; border-radius:6px; }
.sv-prn.sv-prn .svp-brand{ font-weight:900; color:var(--svp-green); text-transform:lowercase; }

/* ---------- la sezione ---------- */
.sv-prn.sv-prn-wrap{ container-type:inline-size; container-name:svprn; width:100%; }

.sv-prn.sv-prn .svp-sec{
  position:relative; overflow:hidden; background:var(--svp-paper); color:var(--svp-ink);
  height:min(820px, calc(100vh - var(--sv-bar-h))); min-height:600px;
}
@supports (height:100svh){
  .sv-prn.sv-prn .svp-sec{ height:min(820px, calc(100svh - var(--sv-bar-h))); }
}
.sv-prn.sv-prn .svp-scene{
  height:100%; max-width:1440px; margin:0 auto; padding:var(--svp-pad);
  display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:clamp(14px,2.4vh,30px);
}

.sv-prn.sv-prn .svp-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.sv-prn.sv-prn .svp-title{
  margin:0; font-family:var(--svp-font); font-weight:800; font-size:clamp(36px,5.6cqw,88px); line-height:.98;
  letter-spacing:-.03em; text-wrap:balance; color:var(--svp-ink); text-transform:none;
}
.sv-prn.sv-prn .svp-title .w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em; }
.sv-prn.sv-prn .svp-title .w > span{ display:inline-block; }
.sv-prn.sv-prn .svp-title .svp-brand{ font-weight:900; }
.sv-prn.sv-prn .svp-hint{
  margin:0 0 .6em; font-weight:700; font-size:15px; line-height:1.3; color:var(--svp-muted);
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.sv-prn.sv-prn .svp-hint svg{ width:34px; height:26px; stroke:var(--svp-muted); }

/* finestre */
.sv-prn.sv-prn .svp-windows{ display:flex; gap:clamp(10px,1.3cqw,18px); min-height:0; }
.sv-prn.sv-prn .svp-win{
  flex:1 1 0; position:relative; min-width:0; min-height:0; border-radius:var(--svp-r); overflow:hidden;
  background:#d9d6e4; color:#fff; text-align:left; transition:flex-grow .8s var(--svp-out);
}
.sv-prn.sv-prn .svp-win.is-hidden{ visibility:hidden; }
.sv-prn.sv-prn .svp-win img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover;
  transition:transform 1.4s var(--svp-out);
}
.sv-prn.sv-prn .svp-win-shade{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(16,21,29,.78) 0%,rgba(16,21,29,.25) 42%,rgba(16,21,29,0) 65%); }
.sv-prn.sv-prn .svp-win-label{
  position:absolute; left:clamp(16px,1.8cqw,26px); right:clamp(16px,1.8cqw,26px); bottom:clamp(16px,1.8cqw,26px);
  display:grid; gap:10px;
}
.sv-prn.sv-prn .svp-win-title{ display:block; font-weight:800; letter-spacing:-.01em; font-size:clamp(22px,2.3cqw,36px); line-height:1.05; text-wrap:balance; }
.sv-prn.sv-prn .svp-open{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.sv-prn.sv-prn .svp-plus{ width:30px; height:30px; border-radius:50%; background:var(--svp-yellow); color:var(--svp-ink); display:grid; place-items:center; transition:transform .5s var(--svp-out); }
.sv-prn.sv-prn .svp-plus svg{ width:14px; height:14px; }
@container svprn (min-width:1000px){
  @media (hover:hover){
    .sv-prn.sv-prn .svp-windows:hover .svp-win{ flex-grow:.8; }
    .sv-prn.sv-prn .svp-windows .svp-win:hover,
    .sv-prn.sv-prn .svp-windows .svp-win:focus-visible{ flex-grow:1.5; }
    .sv-prn.sv-prn .svp-win:hover img{ transform:scale(1.05); }
    .sv-prn.sv-prn .svp-win:hover .svp-plus{ transform:rotate(90deg); }
  }
}

/* fila del team */
.sv-prn.sv-prn .svp-cta{
  display:flex; align-items:center; gap:clamp(14px,2cqw,28px);
  padding-top:clamp(12px,2vh,20px); border-top:1px solid var(--svp-line);
}
.sv-prn.sv-prn .svp-faces{ display:flex; padding-left:12px; border-radius:999px; }
.sv-prn.sv-prn .svp-face{
  width:50px; height:50px; border-radius:50%; margin-left:-12px; border:3px solid var(--svp-paper);
  overflow:hidden; position:relative; background:#cfd6cf; transition:margin .5s var(--svp-out), transform .5s var(--svp-out);
}
.sv-prn.sv-prn .svp-face img,
.sv-prn.sv-prn .svp-portrait img{
  width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 22%;
  filter:grayscale(1) contrast(1.08); transition:filter .6s ease;
}
/* bicromia verde: si toglie al passaggio */
.sv-prn.sv-prn .svp-face::after,
.sv-prn.sv-prn .svp-portrait::after{
  content:""; position:absolute; inset:0; background:var(--svp-green); mix-blend-mode:color; opacity:.55; transition:opacity .6s ease;
}
.sv-prn.sv-prn .svp-faces:hover .svp-face{ margin-left:-4px; }
.sv-prn.sv-prn .svp-faces:hover .svp-face img{ filter:none; }
.sv-prn.sv-prn .svp-faces:hover .svp-face::after{ opacity:0; }
.sv-prn.sv-prn .svp-cta p{ margin:0; font-weight:700; font-size:clamp(16px,1.4cqw,20px); line-height:1.3; color:var(--svp-ink); }
.sv-prn.sv-prn [data-svp-btn]{
  margin-left:auto; display:inline-flex; align-items:center; gap:12px; text-decoration:none; word-spacing:0; cursor:pointer; -webkit-tap-highlight-color:transparent;
  background:var(--svp-green); color:#fff; border-radius:999px; padding:15px 26px;
  font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase; line-height:1.1;
  transition:background .3s, transform .3s var(--svp-out);
}
.sv-prn.sv-prn [data-svp-btn] svg{ width:16px; height:16px; transition:transform .4s var(--svp-out); }
.sv-prn.sv-prn [data-svp-btn]:hover{ background:var(--svp-green-d); color:#fff; }
.sv-prn.sv-prn [data-svp-btn]:hover svg{ transform:translateX(4px); }

/* segnaposto in editor */
.sv-prn.sv-prn .svp-empty{
  position:absolute; inset:0; display:grid; place-items:center; padding:12px;
  border:2px dashed rgba(41,50,65,.35); border-radius:inherit; color:var(--svp-ink);
  font-weight:800; font-size:13px; text-align:center; background:#e6e3ef;
}

/* ---------- sotto 1000: telefono (e tablet verticale come telefono grande) ---------- */
@container svprn (max-width:999px){
  .sv-prn.sv-prn .svp-sec{ height:min(760px, calc(100vh - var(--sv-bar-h))); min-height:640px; }
  @supports (height:100svh){
    .sv-prn.sv-prn .svp-sec{ height:min(760px, calc(100svh - var(--sv-bar-h))); }
  }
  .sv-prn.sv-prn .svp-head{ flex-direction:column; align-items:flex-start; gap:6px; }
  .sv-prn.sv-prn .svp-hint{ margin:0; }
  .sv-prn.sv-prn .svp-hint svg{ display:none; }
  .sv-prn.sv-prn .svp-windows{ flex-direction:column; }
  .sv-prn.sv-prn .svp-win-label{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
  .sv-prn.sv-prn .svp-open{ font-size:0; gap:0; }
  .sv-prn.sv-prn .svp-cta{ flex-wrap:wrap; gap:12px; }
  .sv-prn.sv-prn .svp-cta p{ order:-1; flex-basis:100%; font-size:17px; }
  .sv-prn.sv-prn .svp-face{ width:42px; height:42px; }
  .sv-prn.sv-prn [data-svp-btn]{ padding:13px 20px; }
}

/* ---------- entrata ---------- */
.sv-prn.sv-prn.is-armed .svp-title .w > span{ animation:svp-rise 1s var(--svp-out) both; animation-play-state:paused; animation-delay:var(--d); }
.sv-prn.sv-prn.is-armed .svp-hint{ animation:svp-fade .8s ease both 1.5s; animation-play-state:paused; }
.sv-prn.sv-prn.is-armed .svp-win{ animation:svp-unveil 1.15s var(--svp-ease) both; animation-play-state:paused; animation-delay:calc(.45s + var(--i) * .13s); }
.sv-prn.sv-prn.is-armed .svp-win img{ animation:svp-settle 1.8s var(--svp-out) both; animation-play-state:paused; animation-delay:calc(.45s + var(--i) * .13s); }
.sv-prn.sv-prn.is-armed .svp-win-label{ animation:svp-lift .9s var(--svp-out) both; animation-play-state:paused; animation-delay:calc(1.1s + var(--i) * .13s); }
.sv-prn.sv-prn.is-armed .svp-cta{ animation:svp-line .9s var(--svp-ease) both 1.3s; animation-play-state:paused; }
.sv-prn.sv-prn.is-armed .svp-face{ animation:svp-pop .7s var(--svp-out) both; animation-play-state:paused; animation-delay:calc(1.55s + var(--i) * .07s); }
.sv-prn.sv-prn.is-armed .svp-cta p,
.sv-prn.sv-prn.is-armed [data-svp-btn]{ animation:svp-lift .8s var(--svp-out) both 1.75s; animation-play-state:paused; }
.sv-prn.sv-prn.is-armed.is-intro .svp-title .w > span,
.sv-prn.sv-prn.is-armed.is-intro .svp-hint,
.sv-prn.sv-prn.is-armed.is-intro .svp-win,
.sv-prn.sv-prn.is-armed.is-intro .svp-win img,
.sv-prn.sv-prn.is-armed.is-intro .svp-win-label,
.sv-prn.sv-prn.is-armed.is-intro .svp-cta,
.sv-prn.sv-prn.is-armed.is-intro .svp-face,
.sv-prn.sv-prn.is-armed.is-intro .svp-cta p,
.sv-prn.sv-prn.is-armed.is-intro [data-svp-btn]{ animation-play-state:running; }
@keyframes svp-rise{ from{ transform:translateY(105%); } to{ transform:none; } }
@keyframes svp-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes svp-unveil{ from{ clip-path:inset(100% 0 0 0 round var(--svp-r)); } to{ clip-path:inset(0 0 0 0 round var(--svp-r)); } }
@keyframes svp-settle{ from{ transform:scale(1.3); } to{ transform:none; } }
@keyframes svp-lift{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes svp-pop{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:none; } }
@keyframes svp-line{ from{ border-top-color:transparent; } to{ border-top-color:var(--svp-line); } }

/* =========================================================================
   Pannello del principio (a tutto schermo)
   ========================================================================= */
html.sv-prn-lock{ overflow:hidden; }

.sv-prn.svp-ov{
  container-type:inline-size; container-name:svprnov;
  position:fixed; inset:0; z-index:var(--sv-z-fs, 2147483000); color:#fff;
}
.sv-prn.sv-prn .svp-ov-media{ position:absolute; inset:0; overflow:hidden; background:var(--svp-night); }
.sv-prn.sv-prn .svp-ov-img{ position:absolute; inset:0; opacity:0; transform:scale(1.06); transition:opacity .9s ease, transform 1.6s var(--svp-out); }
.sv-prn.sv-prn .svp-ov-img.is-on{ opacity:1; transform:none; }
.sv-prn.sv-prn .svp-ov-img img{ width:100%; height:100%; max-width:none; object-fit:cover; transition:filter 1.6s ease; }
/* "What we see" in bianco e nero, "What we do" a colori */
.sv-prn.svp-ov[data-beat="0"] .svp-ov-img img{ filter:grayscale(1) brightness(.5) contrast(1.15); }
.sv-prn.svp-ov[data-beat="1"] .svp-ov-img img{ filter:saturate(1.1) brightness(.88); }
.sv-prn.sv-prn .svp-ov-shade{
  position:absolute; inset:0; opacity:0; transition:opacity .6s ease;
  background:
    linear-gradient(90deg,rgba(16,21,29,.86) 0%,rgba(16,21,29,.66) 34%,rgba(16,21,29,.18) 66%,rgba(16,21,29,0) 100%),
    linear-gradient(0deg,rgba(16,21,29,.5) 0%,rgba(16,21,29,0) 26%,rgba(16,21,29,0) 74%,rgba(16,21,29,.55) 100%);
}
.sv-prn.sv-prn .svp-ov-ui{
  position:absolute; inset:0;
  padding:calc(var(--svp-pad) + env(safe-area-inset-top,0px)) calc(var(--svp-pad) + env(safe-area-inset-right,0px)) calc(var(--svp-pad) + env(safe-area-inset-bottom,0px)) calc(var(--svp-pad) + env(safe-area-inset-left,0px));
  display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:20px;
  opacity:0; transition:opacity .5s ease;
}
.sv-prn.svp-ov.is-open .svp-ov-shade,
.sv-prn.svp-ov.is-open .svp-ov-ui{ opacity:1; }

.sv-prn.sv-prn .svp-ov-top{ display:flex; align-items:flex-start; gap:clamp(12px,2cqw,28px); }
.sv-prn.sv-prn .svp-tabs{ flex:1; display:flex; gap:10px; min-width:0; }
.sv-prn.sv-prn .svp-tab{ flex:1; min-width:0; display:grid; gap:9px; text-align:left; padding-top:6px; }
.sv-prn.sv-prn .svp-tab-name{
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.55;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity .3s;
}
.sv-prn.sv-prn .svp-tab[aria-current="true"] .svp-tab-name,
.sv-prn.sv-prn .svp-tab:hover .svp-tab-name{ opacity:1; }
.sv-prn.sv-prn .svp-bar{ display:block; height:3px; border-radius:3px; background:rgba(255,255,255,.25); overflow:hidden; }
.sv-prn.sv-prn .svp-bar i{ display:block; height:100%; background:#fff; transform-origin:0 50%; transform:scaleX(0); }
.sv-prn.sv-prn .svp-ctrl{ display:flex; gap:10px; }
.sv-prn.sv-prn .svp-round{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .3s;
}
.sv-prn.sv-prn .svp-round:hover{ background:rgba(255,255,255,.24); }
.sv-prn.sv-prn .svp-round svg{ width:18px; height:18px; }

.sv-prn.sv-prn .svp-copy{ align-self:center; display:grid; max-width:680px; padding-top:2vh; }
.sv-prn.sv-prn .svp-art{ grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s .45s; }
.sv-prn.sv-prn .svp-art.is-on{ opacity:1; visibility:visible; transition:opacity .6s ease .2s, visibility 0s; }
.sv-prn.sv-prn .svp-art h3{
  margin:0 0 22px; font-family:var(--svp-font); font-weight:900; font-size:clamp(38px,5.8cqw,92px); line-height:.98;
  letter-spacing:-.03em; text-wrap:balance; color:#fff; text-transform:none;
}
.sv-prn.svp-ov.is-open .svp-art.is-on h3{ animation:svp-lift 1s var(--svp-out) both .25s; }
.sv-prn.sv-prn .svp-beats{ display:grid; }
.sv-prn.sv-prn .svp-beat{ grid-area:1/1; transition:opacity .6s ease, transform .9s var(--svp-out); }
.sv-prn.sv-prn .svp-kicker{ margin:0 0 10px; font-weight:900; font-size:13px; letter-spacing:.16em; text-transform:uppercase; }
.sv-prn.sv-prn .svp-beat.see .svp-kicker{ color:var(--svp-red); }
.sv-prn.sv-prn .svp-beat.do .svp-kicker{ color:var(--svp-yellow); }
.sv-prn.sv-prn .svp-beat p.txt{
  margin:0; font-weight:600; font-size:clamp(17px,1.45cqw,21px); line-height:1.55; color:#fff;
  text-shadow:0 1px 18px rgba(0,0,0,.35); max-width:56ch; text-wrap:pretty;
}
.sv-prn.svp-ov[data-beat="1"] .svp-beat.see{ opacity:0; transform:translateY(-18px); }
.sv-prn.svp-ov:not([data-beat="1"]) .svp-beat.do{ opacity:0; transform:translateY(22px); }
.sv-prn.svp-ov[data-beat="0"] .svp-beat.do,
.sv-prn.svp-ov[data-beat="1"] .svp-beat.see{ pointer-events:none; }

.sv-prn.sv-prn .svp-ov-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.sv-prn.sv-prn .svp-nav{
  display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; padding:12px 4px; opacity:.85; color:#fff;
}
.sv-prn.sv-prn .svp-nav:hover{ opacity:1; }
.sv-prn.sv-prn .svp-nav svg{ width:16px; height:16px; flex:none; }
.sv-prn.sv-prn .svp-nav.is-team{ background:var(--svp-yellow); color:var(--svp-ink); border-radius:999px; padding:14px 22px; opacity:1; }
.sv-prn.sv-prn .svp-nav.is-team.is-end{ animation:svp-nudge 1.6s var(--svp-out) infinite; }
@keyframes svp-nudge{ 0%,100%{ transform:none; } 50%{ transform:translateX(6px); } }
.sv-prn.sv-prn .svp-tap{ font-weight:700; font-size:13px; opacity:.7; }

@container svprnov (max-width:699px){
  .sv-prn.sv-prn .svp-tab-name{ display:none; }
  .sv-prn.sv-prn .svp-tap{ visibility:hidden; }
  .sv-prn.sv-prn .svp-nav:not(.is-team) span{ display:none; }
  .sv-prn.sv-prn .svp-ov-ui{ gap:14px; }
  .sv-prn.sv-prn .svp-ov-shade{ background:linear-gradient(0deg,rgba(16,21,29,.88) 0%,rgba(16,21,29,.62) 45%,rgba(16,21,29,.35) 75%,rgba(16,21,29,.6) 100%); }
  .sv-prn.sv-prn .svp-copy{ align-self:end; padding-top:0; padding-bottom:3vh; }
  .sv-prn.sv-prn .svp-art h3{ font-size:clamp(34px,10cqw,52px); }
}

/* =========================================================================
   Pannello del team (a tutto schermo)
   ========================================================================= */
.sv-prn.svp-tm{
  container-type:inline-size; container-name:svprntm;
  position:fixed; inset:0; z-index:calc(var(--sv-z-fs, 2147483000) + 1); color:#fff;
  background:radial-gradient(120% 90% at 15% 0%, #0b8a27 0%, var(--svp-green) 35%, var(--svp-green-d) 100%);
}
.sv-prn.sv-prn .svp-tm-in{
  height:100%; max-width:1440px; margin:0 auto;
  padding:calc(var(--svp-pad) + env(safe-area-inset-top,0px)) calc(var(--svp-pad) + env(safe-area-inset-right,0px)) calc(var(--svp-pad) + env(safe-area-inset-bottom,0px)) calc(var(--svp-pad) + env(safe-area-inset-left,0px));
  display:grid; grid-template-rows:auto minmax(0,1fr); gap:clamp(18px,3.5vh,44px);
}
.sv-prn.sv-prn .svp-tm-head{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(16px,4cqw,64px); align-items:end; padding-right:60px; }
.sv-prn.sv-prn .svp-tm-kicker{ margin:0 0 10px; font-weight:900; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--svp-yellow); }
.sv-prn.sv-prn .svp-tm-head h3{
  margin:0; font-family:var(--svp-font); font-weight:900; font-size:clamp(36px,5.2cqw,82px); line-height:.98;
  letter-spacing:-.02em; text-wrap:balance; color:#fff; text-transform:none;
}
.sv-prn.sv-prn .svp-mission{ margin:0 0 14px; font-weight:600; font-size:clamp(16px,1.35cqw,20px); line-height:1.45; max-width:46ch; color:#fff; }
.sv-prn.sv-prn .svp-mission .svp-brand{ color:var(--svp-yellow); }
.sv-prn.sv-prn .svp-story{
  color:#fff; font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:underline; text-decoration-color:var(--svp-yellow); text-decoration-thickness:2px; text-underline-offset:5px;
}
.sv-prn.sv-prn .svp-tm-list{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(12px,1.6cqw,24px); align-content:end; min-height:0;
}
.sv-prn.sv-prn .svp-person{ display:grid; gap:12px; align-content:end; margin:0; }
.sv-prn.sv-prn .svp-portrait{ position:relative; height:clamp(150px,34vh,340px); border-radius:999px 999px 20px 20px; overflow:hidden; background:#cfd6cf; margin:0; }
.sv-prn.sv-prn .svp-portrait::after{ opacity:.5; }
.sv-prn.sv-prn .svp-person:hover .svp-portrait img,
.sv-prn.sv-prn .svp-person:focus-within .svp-portrait img{ filter:none; }
.sv-prn.sv-prn .svp-person:hover .svp-portrait::after,
.sv-prn.sv-prn .svp-person:focus-within .svp-portrait::after{ opacity:0; }
.sv-prn.sv-prn .svp-person h4{ margin:0; font-family:var(--svp-font); font-weight:800; font-size:clamp(19px,1.6cqw,24px); line-height:1.15; color:#fff; text-transform:none; }
.sv-prn.sv-prn .svp-role{ margin:4px 0 0; color:var(--svp-yellow); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.sv-prn.sv-prn .svp-facts{ list-style:none; margin:0; padding:0; font-size:14px; line-height:1.45; opacity:.88; }
.sv-prn.sv-prn .svp-facts li{ margin:0; }
.sv-prn.sv-prn .svp-in{
  justify-self:start; display:inline-flex; align-items:center; gap:6px; color:#fff; font-size:13px; font-weight:800;
  text-decoration:none; border-bottom:2px solid rgba(255,255,255,.35); padding-bottom:2px;
}
.sv-prn.sv-prn .svp-in:hover{ border-bottom-color:var(--svp-yellow); color:#fff; }
.sv-prn.sv-prn .svp-tm-close{
  position:absolute; top:calc(var(--svp-pad) + env(safe-area-inset-top,0px)); right:calc(var(--svp-pad) + env(safe-area-inset-right,0px));
}

.sv-prn.svp-tm .svp-tm-head > *,
.sv-prn.svp-tm .svp-person{ opacity:0; transform:translateY(28px); transition:opacity .5s ease, transform .5s var(--svp-out); }
.sv-prn.svp-tm.is-open .svp-tm-head > *,
.sv-prn.svp-tm.is-open .svp-person{
  opacity:1; transform:none; transition:opacity .8s ease, transform 1s var(--svp-out);
  transition-delay:calc(.05s + var(--i, 0) * .08s);
}
.sv-prn.svp-tm .svp-person{ --i:calc(var(--n) + 2); }

@container svprntm (max-width:699px){
  .sv-prn.sv-prn .svp-tm-head{ grid-template-columns:1fr; gap:12px; padding-right:56px; }
  .sv-prn.sv-prn .svp-mission{ font-size:16px; margin-bottom:8px; }
  .sv-prn.sv-prn .svp-tm-list{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:66%; overflow-x:auto;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--svp-pad);
    margin-inline:calc(var(--svp-pad) * -1); padding-inline:var(--svp-pad); padding-bottom:6px; scrollbar-width:none;
  }
  .sv-prn.sv-prn .svp-tm-list::-webkit-scrollbar{ display:none; }
  .sv-prn.sv-prn .svp-person{ scroll-snap-align:start; }
  .sv-prn.sv-prn .svp-portrait{ height:clamp(150px,30vh,300px); }
}
/* schermi bassi su desktop: la missione cede il posto ai ritratti */
@container svprntm (min-width:700px){
  @media (max-height:640px){
    .sv-prn.sv-prn .svp-mission{ display:none; }
  }
}

/* =========================================================================
   Corazza e movimento ridotto
   ========================================================================= */
.sv-prn.sv-prn a,
.sv-prn.sv-prn button{ text-decoration-line:none; }
.sv-prn.sv-prn .svp-story{ text-decoration-line:underline!important; }
.sv-prn.sv-prn .svp-title,
.sv-prn.sv-prn h3,
.sv-prn.sv-prn h4{ font-family:var(--svp-font)!important; }

@media (prefers-reduced-motion:reduce){
  .sv-prn.sv-prn *,
  .sv-prn.sv-prn *::after{
    animation-duration:1ms!important; animation-delay:0ms!important; animation-iteration-count:1!important;
    transition-duration:.25s!important; transition-delay:0ms!important;
  }
}

/* chiuso vuol dire spento (anche i due pannelli stessi, spostati nel body) */
.sv-prn.sv-prn [hidden],
.sv-prn.sv-prn[hidden]{ display:none!important; }