:root{
  --cardSolid1: rgba(0, 163, 226, 0.38);
  --cardSolid2: rgba(0, 135, 200, 0.38);
  --cardOutline1: rgba(0, 178, 240, 0.34);
  --cardOutline2: rgba(0, 146, 214, 0.34);

  --headerH: 78px;
  --footerH: 64px;
  --bg:#009fe3;
  --fg:#ffffff;
  --fg2: rgba(255,255,255,.82);
  --line: rgba(255,255,255,.22);
  --glass: rgba(0,0,0,.16);
  --glass2: rgba(255,255,255,.08);
  --shadow: 0 24px 80px rgba(0,0,0,.35);
  --radius: 18px;
  --radius2: 28px;
  --container: 1140px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-padding-top: calc(var(--headerH) + 5px); scroll-padding-bottom: calc(var(--footerH) + 10px); }

body{
  margin:0;
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--fg);
  background: var(--bg) url('../images/bg.jpg') no-repeat center center;
  background-size:cover;
  overflow-x:hidden;
}

a{ color:inherit; }
img{ max-width:100%; display:block; }

.container{
  width:min(var(--container), 92vw);
  margin:0 auto;
}

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

.skip-link{
  position:absolute;
  left:1rem; top:1rem;
  transform: translateY(-160%);
  background: rgba(0,0,0,.55);
  padding:.6rem .8rem;
  border-radius: 999px;
  text-decoration:none;
  border:1px solid var(--line);
  backdrop-filter: blur(10px);
  z-index:9999;
}
.skip-link:focus{ transform: translateY(0); outline:none; }

.site-header{
  position:fixed;
  left:0;
  right:0;
  top:0;
  z-index:50;
  background: linear-gradient(to bottom, rgba(0,0,0,.42), rgba(0,0,0,.12));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: calc(14px + env(safe-area-inset-top)) 4vw 14px;
  gap: 16px;
  min-height: calc(var(--headerH) + env(safe-area-inset-top));
}


.brand__link{ display:inline-flex; }
.brand__logo{
  width: clamp(170px, 16vw, 360px);
  height:auto;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.35));
}

.nav{ display:flex; align-items:center; gap:12px; position:relative; }

.nav__toggle{
  display:none;
  appearance:none;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.20);
  color:var(--fg);
  border-radius: 12px;
  padding: .65rem .75rem;
  cursor:pointer;
  backdrop-filter: blur(10px);
}
.nav__toggle:focus-visible{ outline:2px solid rgba(255,255,255,.65); outline-offset:2px; }
.nav__toggle-lines{
  width: 22px; height: 12px;
  display:inline-block;
  position:relative;
}
.nav__toggle-lines:before,
.nav__toggle-lines:after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  background: rgba(255,255,255,.9);
  border-radius:999px;
}
.nav__toggle-lines:before{ top:0; }
.nav__toggle-lines:after{ bottom:0; }

.nav__menu{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap:wrap;
}
.nav__menu a{
  text-decoration:none;
  padding: .45rem .55rem;
  border-radius: 12px;
  color: rgba(255,255,255,.92);
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.nav__menu a:hover{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.nav__cta{
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.18) !important;
}

.lang{
  display:flex;
  gap:8px;
  padding-left: 6px;
  border-left:1px solid rgba(255,255,255,.14);
}
.lang__btn{
  appearance:none;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: .35rem .6rem;
  font-weight: 700;
  font-size: .86rem;
  cursor:pointer;
}
.lang__btn[aria-pressed="true"]{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.30);
}

main{ display:block; padding-top: calc(var(--headerH) + env(safe-area-inset-top) + 5px); padding-bottom: calc(var(--footerH) + 10px); }

.hero{
  position:relative;
  padding: clamp(28px, 5.6vw, 86px) 0 clamp(18px, 4vw, 56px);
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items:start;
}

.hero__copy{
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: var(--radius2);
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.kicker{
  margin:0 0 10px;
  color: rgba(255,255,255,.92);
  letter-spacing: .02em;
  font-size: clamp(14px, 1.15vw, 20px);
}

.hero__title{
  margin:0;
  font-weight: 800;
  line-height: 0.95;
  font-size: clamp(46px, 5.2vw, 96px);
}

.hero__lead{
  margin: 16px 0 0;
  color: var(--fg2);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.75;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin-top: 18px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: .85rem 1rem;
  border-radius: 14px;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.30);
  background: rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.95);
  font-weight: 700;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.26);
}
.btn--primary{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.30);
}
.btn--ghost{
  background: transparent;
}

.hero__chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 16px;
}
.chip{
  font-size: .88rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.12);
  color: rgba(255,255,255,.90);
  letter-spacing: .02em;
  font-weight: 700;
}

.hero__visual{
  align-self:stretch;
}

.pdf-stack{
  position:sticky;
  top: 92px;
  padding: 14px;
  border-radius: var(--radius2);
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}
.pdf-card{
  width:100%;
  border:0;
  padding:0;
  background: transparent;
  cursor:pointer;
  position:relative;
  border-radius: 20px;
  overflow:hidden;
  outline: 1px solid rgba(255,255,255,.18);
}
.pdf-card img{
  width:100%;
  height: auto;
  transform: translateZ(0);
}
.pdf-card__badge{
  position:absolute;
  left: 12px; top: 12px;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 800;
  letter-spacing: .04em;
  font-size: .82rem;
}
.pdf-thumbs{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.thumb{
  border:0;
  background: transparent;
  padding:0;
  cursor:pointer;
  border-radius: 14px;
  overflow:hidden;
  outline: 1px solid rgba(255,255,255,.16);
}
.thumb img{ width:100%; height: 96px; object-fit: cover; }
.pdf-note{
  margin: 10px 0 0;
  color: rgba(255,255,255,.72);
  font-size: .92rem;
}

.hero__fade{
  position:absolute;
  inset:auto 0 0 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.14));
  pointer-events:none;
}

.section{
  padding: clamp(34px, 5vw, 72px) 0;
}
.section__head{
  margin-bottom: 12px;
}
.section__head h2{
  margin:0;
  font-size: clamp(26px, 2.3vw, 38px);
  letter-spacing: .01em;
}

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

.card{
  border-radius: var(--radius);
    background: linear-gradient(180deg, var(--cardSolid1), var(--cardSolid2));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  padding: 18px;
}
.card--outline{
    background: linear-gradient(180deg, var(--cardOutline1), var(--cardOutline2));
  border-color: rgba(255,255,255,.18);
}

.card p{ margin:0; color: var(--fg2); line-height:1.75; }
.lead{
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.6;
  color: rgba(255,255,255,.92);
}
.lead-strong{
  margin:0 0 10px;
  font-weight: 800;
  color: rgba(255,255,255,.92);
}

.tag{
  margin: 0 0 12px;
  font-size: .95rem;
  font-weight: 900;
  letter-spacing: .04em;
  color: rgba(255,255,255,.92);
}

.bullets{
  margin:0;
  padding-left: 1.15rem;
}
.bullets li{ margin: .6rem 0; line-height: 1.6; color: rgba(255,255,255,.88); }

.section--contact{ padding-bottom: 80px; }
.contact{ padding: 22px; }
.contact__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}
.contact__item{
  text-decoration:none;
  display:grid;
  grid-template-columns: 28px 1fr;
  column-gap: 10px;
  row-gap: 2px;
  align-items:center;
  padding: 14px;
  border-radius: 16px;
    background: rgba(0, 135, 200, 0.38);
border: 1px solid rgba(255,255,255,.22);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.contact__item:hover{
  transform: translateY(-1px);
    background: rgba(0, 163, 226, 0.48);
  border-color: rgba(255,255,255,.20);
}
.contact__item img{
  width: 20px; height: 20px;
  object-fit:contain;
  opacity: .95;
}
.contact__label{
  color: rgba(255,255,255,.78);
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .06em;
}
.contact__value{
  grid-column: 2;
  font-weight: 800;
  color: rgba(255,255,255,.95);
}

.contact__dot{
  width: 18px; height: 18px;
  border-radius: 999px;
  display:inline-block;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  margin-left: 1px;
}

.contact__foot{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.84);
}
.small{ font-size: .95rem; color: rgba(255,255,255,.78); }
.muted{ color: rgba(255,255,255,.72); }

.site-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  color: rgba(255,255,255,.84);
  min-height: calc(var(--footerH) - 20px);
}
.footer__links{
  display:flex;
  gap:10px;
  align-items:center;
}
.footer__links a{
  text-decoration:none;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.10);
}
.footer__links a:hover{ background: rgba(0,0,0,.18); }

.to-top{ text-decoration:none; }

/* Approfondimenti */
.deep-card{ padding: 16px; }
.deep-note{ margin: 0 0 12px 0; }
.deep-links{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}

.lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
}
.lightbox__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(3px);
}
.lightbox__panel{
  position:relative;
  z-index: 1;
  width: min(96vw, 980px);
  margin: 6vh auto;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.40);
  box-shadow: var(--shadow);
}
.lightbox__img{
  width:100%;
  height:auto;
  display:block;
}
.lightbox__close{
  z-index: 6;
  position:absolute;
  top: 10px;
  right: 10px;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.95);
  font-size: 24px;
  cursor:pointer;
}



.lightbox__nav{
  z-index: 5;
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.95);
  font-size: 28px;
  line-height: 1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.lightbox__nav--prev{ left: 10px; }
.lightbox__nav--next{ right: 10px; }
.lightbox__nav[disabled]{
  opacity:.35;
  cursor: not-allowed;
}

.lightbox__caption{
  padding: 10px 16px 0;
  margin-top: 0;
}
.lightbox__counter{
  padding: 6px 16px 14px;
  text-align:center;
  color: rgba(255,255,255,.75);
  font-weight: 600;
  font-size: 14px;
}

@media (max-width: 767px) and (max-height: 1024px){

  /* Smartphone (solo Home): evita sovrapposizione con header fisso */
  #home .home-layout{ margin-top: 0 !important; }
  #home .home-splash{ padding-top: calc(var(--headerH) + env(safe-area-inset-top) + 24px) !important; }

  .lightbox__nav{
    width: 42px; height: 42px;
    font-size: 26px;
  }
  .lightbox__panel{
    margin: 4vh auto;
  }
}


@media (max-width: 1020px){
  .grid--3{ grid-template-columns: 1fr; }
}

@media (max-width: 920px){
  .hero__grid{ grid-template-columns: 1fr; }
  .pdf-stack{ position:static; }
}

@media (max-width: 820px){
  .nav__toggle{ display:inline-flex; }
  .nav__menu{
    position: absolute;
    right: 0;
    top: 56px;
    flex-direction: column;
    align-items: stretch;
    width: min(92vw, 420px);
    background: rgba(0,0,0,.90) !important;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;
    padding: 10px;
    box-shadow: var(--shadow);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1;
    display:none;
  }
  .nav__menu.is-open{ display:flex; }
  .nav__menu a{ padding: .65rem .7rem; }
  .lang{
    border-left:none;
    padding-left:0;
    justify-content:flex-end;
  }
  .brand__logo{ width: clamp(150px, 44vw, 240px); }
  .contact__grid{ grid-template-columns: 1fr; }

  .contact__pair{
  display: block;
}

  .contact__col1, .contact__col2{
    grid-column: auto;
  }
  .contact__grid > *{
    grid-row: auto;
  }

  .thumb img{ height: 84px; }
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; }
}

section[id]{ scroll-margin-top: calc(var(--headerH) + env(safe-area-inset-top) + 5px); }

/* Home: solo sfondo + logo */
.home-splash{
  min-height: calc(100vh - var(--headerH) - var(--footerH));
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 6vh 0 10vh;
}

.home-splash__logo{
  width: clamp(220px, 34vw, 620px);
  height:auto;
  filter: drop-shadow(0 18px 60px rgba(0,0,0,.35));
}

/* Mostra una sezione alla volta */
.panel{ display:none; }
.panel.is-active{
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items: stretch;
  min-height: calc(100vh - var(--headerH) - var(--footerH) - 20px);
}

#home.is-hidden{ display:none; }

.panel.is-active > .container{ width: min(var(--container), 92vw); }

/* Home: scheda sintesi */
.home-splash{
  min-height: calc(100vh - var(--headerH) - var(--footerH));
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10vh 0 12vh;
}
.home-intro{
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(18px, 2.6vw, 28px);
}

/* Home: scheda sinistra più trasparente (solo in Home) */
.home-intro.card{
  background: linear-gradient(180deg, rgba(0, 163, 226, 0.14), rgba(0, 135, 200, 0.12));
  border: 1px solid rgba(255,255,255,.22);
  color: #ffffff;
}
.home-intro__kicker{
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: clamp(14px, 1.2vw, 18px);
  color: #ffffff;

  text-shadow: 0 2px 18px rgba(0,0,0,.42);
}
.home-intro__text{
  margin: 0;
  color: #ffffff;
  line-height: 1.7;
  font-size: clamp(16px, 1.25vw, 18px);

  text-shadow: 0 2px 18px rgba(0,0,0,.34);
}

/* Home: layout a 2 colonne (scheda a sinistra + spazio libero a destra) */
.home-splash{
  min-height: calc(100vh - var(--headerH) - var(--footerH));
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(36px, 6vh, 72px) 0;
}

.home-layout{
  display:grid;
  grid-template-columns: minmax(280px, 520px) 1fr;
  gap: clamp(18px, 3vw, 42px);
  align-items: stretch;

  margin-top: clamp(-80px, -6vh, -24px);
}

.home-left{
  display:flex;
  align-items: flex-start;
}

.home-right{
  border-radius: 26px;
  border: 1px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  min-height: 420px;
}

/* Scheda sintesi: più “quadrata” e titoli più grandi */
.home-intro{
  width: 100%;
  min-height: 420px;
  padding: clamp(22px, 3vw, 34px);
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
}

.home-intro__kicker{
  margin: 0 0 18px;
  font-weight: 900;
  letter-spacing: .01em;
  text-transform: none;
  font-size: clamp(22px, 2.2vw, 34px);
  color: rgba(255,255,255,.96);
  line-height: 1.15;
}

.home-intro__text{
  margin: 0;
  color: rgba(255,255,255,.92);
  line-height: 1.75;
  font-size: clamp(16px, 1.25vw, 18px);
  max-width: 56ch;
}

/* Responsive: su mobile va in colonna e lo spazio foto scende sotto */
@media (max-width: 980px){
  .home-layout{
    grid-template-columns: 1fr;
    margin-top: clamp(-30px, -3.5vh, -12px);
  }

  #chi-sono .chi-left{ margin-top: 28px; }
  #chi-sono .chi-right{ margin-top: -10px; }

  .home-right{
    min-height: 280px;
  }
  .home-intro{
    min-height: auto;
  }
}
/* Allinea dimensione testo "Chi sono" a quella della sintesi in Home */
#chi-sono .card p,
#chi-sono .card li{
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.7;
}




/* "A chi mi rivolgo": titolo sopra e allineato ai contenuti */
#a-chi-mi-rivolgo .section__head{
  margin-bottom: 16px;
  text-align: left;
}

/* "Come lavoro": card centrata */
#come-lavoro .card{
  width: 100%;
  max-width: min(860px, 92vw);
  margin-left: auto;
  margin-right: auto;
}

/* A chi mi rivolgo: layout testo + foto */
#a-chi-mi-rivolgo .container{
  padding-top: 14px; /* sposta leggermente in basso titolo + contenuti */
}

#a-chi-mi-rivolgo .audience{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(18px, 3vw, 46px);
  align-items: start;
}

#a-chi-mi-rivolgo .audience__text .card{
  width: 100%;
  margin: 0;        /* niente centratura */
  max-width: none;  /* lascia che la griglia gestisca le dimensioni */
}

#a-chi-mi-rivolgo .audience-photo{
  margin: 0;
  width: 100%;
  max-width: 520px;
  border-radius: 26px;
  overflow: hidden; /* evita sbordi/trasparenze */
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 70px rgba(0,0,0,.18);
}

#a-chi-mi-rivolgo .audience-photo img{
  width: 100%;
  height: auto;
  display: block;      /* elimina gap e sbordi */
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

@media (max-width: 900px){
  #a-chi-mi-rivolgo .audience{
    grid-template-columns: 1fr;
  }
  #a-chi-mi-rivolgo .audience-photo{
    max-width: 560px;
  }
}
/* Mantiene righe leggibili */
#a-chi-mi-rivolgo .card p,
#come-lavoro .card p,
#a-chi-mi-rivolgo .card li,
#come-lavoro .card li{
  max-width: 62ch;
}

/* Home: anteprima PDF (colonna destra) */
.home-pdf{
  height: 100%;
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.home-pdf__frame{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  min-height: 420px;
  box-shadow: 0 18px 70px rgba(0,0,0,.18);
}

.home-pdf__iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display:block;
  filter: saturate(1.02) contrast(1.02);
}

.home-pdf__overlay{
  position:absolute;
  inset:0;
  cursor: pointer;
  /* rende cliccabile senza bloccare l'iframe */
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.18));
  opacity: 0;
  transition: opacity .18s ease;
}

.home-pdf__frame:hover .home-pdf__overlay{
  opacity: 1;
}

.home-pdf__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 980px){
  .home-pdf__frame{ min-height: 320px; }
  .home-pdf__actions{ justify-content: flex-start; }
}

/* Override: home-right quando contiene PDF */
.home-right{
  border: none;
  background: transparent;
  min-height: auto;
}

/* Home: anteprima PDF come immagine (niente scrollbar) */
.home-pdf__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
  background: rgba(0,0,0,.10);
}


/* Contrasto testi: bianco più pieno e più leggibile */
.nav__menu a,
.nav__home{
  color:#ffffff;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

.section__head h2,
.section__head p{
  color:#ffffff;
  text-shadow: 0 2px 14px rgba(0,0,0,.30);
}

.card,
.card p,
.card li,
.contact__label,
.contact__value{
  color:#ffffff;
  text-shadow: 0 2px 14px rgba(0,0,0,.24);
}

/* Chi sono: testo a sinistra + foto a destra */
#chi-sono .chi-layout{
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(260px, 440px);
  gap: clamp(16px, 3vw, 36px);
  align-items: center;
}

/* Desktop tweak: alza le schede "Chi sono" di circa 8mm */
@media (min-width: 981px){
  #chi-sono .chi-layout{ margin-top: -28px; }
}


#chi-sono .chi-left .card{
  width: 100%;
  margin: 0;
}

#chi-sono .chi-right{
  display:flex;
  justify-content: center;
}

#chi-sono .chi-photo{
  margin: 0;
  width: 100%;
  max-width: 440px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 70px rgba(0,0,0,.18);
}

#chi-sono .chi-photo img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

/* Responsive: impila in colonna */
@media (max-width: 980px){
  #chi-sono .chi-layout{
    grid-template-columns: 1fr;
  }
  #chi-sono .chi-photo{
    max-width: 520px;
  }
  #chi-sono .chi-photo img{
    aspect-ratio: 16 / 10;
  }
}


  #chi-sono .chi-photo{ max-height: none; }




/* Chi sono: ribilanciamento posizioni
   - Foto a destra più SU
   - Box testo a sinistra leggermente SU
   - Titolo "Chi sono" leggermente GIÙ e più vicino al box */
#chi-sono.panel.is-active{
  justify-content: flex-start;
  padding-top: 74px;
}

#chi-sono .section__head{
  margin-top: 14px;
  margin-bottom: 6px; /* titolo più vicino al box */
}

#chi-sono .chi-layout{
  margin-top: 0;
  align-items: flex-start;
}

/* Offset differenziato */
#chi-sono .chi-left{
  margin-top: 18px; /* box testo un po' su */
}

#chi-sono .chi-right{
  margin-top: -78px; /* foto più su (come richiesto) */
}

@media (max-width: 980px){
  #chi-sono.panel.is-active{ padding-top: 44px; }
  #chi-sono .section__head{ margin-top: 10px; margin-bottom: 8px; }
  #chi-sono .chi-left{ margin-top: 10px; }
  #chi-sono .chi-right{ margin-top: -10px; } /* su mobile non alziamo troppo */
}

#chi-sono .chi-left{ margin-top: 42px; }


/* Chi sono: abbassa SOLO il titolo di ~6mm (senza muovere il resto) */
#chi-sono .section__head h2{
  position: relative;
  top: 24px;
}
@media (max-width: 980px){
  #chi-sono .section__head h2{ top: 18px; }
}

/* Il mio ruolo: layout con foto (sx) + riquadro testo (dx) */
#il-mio-ruolo .role-layout{
  display:grid;
  grid-template-columns: minmax(260px, 420px) minmax(320px, 1fr);
  gap: clamp(16px, 3vw, 36px);
  align-items: center;
}

#il-mio-ruolo .role-photo{
  margin: 0;
  width: 100%;
  max-width: 420px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 70px rgba(0,0,0,.18);
}

#il-mio-ruolo .role-photo img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

/* Riquadro testo: non “striscia” piena, ma più compatto */
#il-mio-ruolo .role-right .card{
  width: 100%;
  max-width: 760px; /* evita riga troppo lunga */
  margin: 0;
}
#il-mio-ruolo .role-right .card p,
#il-mio-ruolo .role-right .card li{
  max-width: 62ch;
}

/* Responsive */
@media (max-width: 980px){
  #il-mio-ruolo .role-layout{
    grid-template-columns: 1fr;
  }
  #il-mio-ruolo .role-photo{
    max-width: 520px;
  }
  #il-mio-ruolo .role-photo img{
    aspect-ratio: 16 / 10;
  }
  #il-mio-ruolo .role-right .card{
    max-width: 92vw;
  }
}


/* Il mio ruolo: titolo sopra il riquadro di destra + foto a sinistra più in alto (~7mm) */
#il-mio-ruolo .role-left{
  margin-top: -3px; /* ~7mm */
}
#il-mio-ruolo .role-right .section__head{
  margin: 0 0 10px 0;
  text-align: left;
}
#il-mio-ruolo .role-right .section__head h2{
  margin: 0;
}

@media (max-width: 980px){
  #il-mio-ruolo .role-left{ margin-top: 9px; }
  #il-mio-ruolo .role-right .section__head{ margin-bottom: 8px; }
}


/* Il mio ruolo: rimpicciolisci SOLO la foto a sinistra (mantieni centrata) */
#il-mio-ruolo .role-left{
  display: flex;
  justify-content: center;
}

#il-mio-ruolo .role-photo{
  max-width: 360px; /* più piccola */
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 980px){
  #il-mio-ruolo .role-photo{ max-width: 420px; } /* su mobile non troppo piccola */
}

/* Come lavoro: riquadro testo a sinistra + foto a destra (foto piccola) */
#come-lavoro .work-layout{
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(300px, 480px);
  gap: clamp(16px, 3vw, 34px);
  align-items: center;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

#come-lavoro .work-left{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#come-lavoro .work-left .card{
  width: min(520px, 100%);
  margin: 0;
}

#come-lavoro .section__head--inline{
  margin-bottom: 8px;
  text-align: left;
}

#come-lavoro .work-left .card p,
#come-lavoro .work-left .card li{
  max-width: 62ch;
}

#come-lavoro .work-right{
  display:flex;
  justify-content: center;
}

#come-lavoro .work-photo{
  margin: 0;
  width: 100%;
  max-width: 440px; /* foto leggermente più grande */
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 70px rgba(0,0,0,.18);
}

#come-lavoro .work-photo img{
  width: 100%;
  height: auto;
  display:block;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

/* Responsive */
@media (max-width: 980px){
  #come-lavoro .work-layout{
    grid-template-columns: 1fr;
  }
  #come-lavoro .work-photo{
    max-width: 420px;
  }
  #come-lavoro .work-photo img{
    aspect-ratio: 16 / 10;
  }
}


/* ===== Come lavoro: testo in overlay sulla foto ===== */
#come-lavoro .work-layout--overlay{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

#come-lavoro .work-layout--overlay .work-right{
  grid-column: 1;
  grid-row: 1;
}

/* Contenitore titolo + testo, ancorato in basso a sinistra */
#come-lavoro .work-layout--overlay .work-left{
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  position: absolute;
  left: clamp(18px, 3vw, 44px);
  bottom: clamp(12px, 3.2vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  max-width: min(560px, calc(100% - 36px));
}

#come-lavoro .work-layout--overlay .section__head--inline{
  margin: 0;
  width: auto;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

#come-lavoro .work-layout--overlay .card{
  width: min(480px, 100%);
  margin: 0;
  padding: 18px;
  background: linear-gradient(180deg, rgba(0,163,226,.10), rgba(0,135,200,.08));
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 70px rgba(0,0,0,.22);
}

/* Frame foto */
#come-lavoro .work-layout--overlay .work-photo{
  /* immagine usata sia come sfondo (blur) che come foto principale */
  --work-img: url("../images/come_lavoro.jpg");
  --work-pos: 96% 22%;

  position: relative;
  max-width: none;
  width: 100%;
  border-radius: var(--radius2);
  overflow: hidden;

  background-image: var(--work-img);
  background-size: cover;
  background-position: var(--work-pos);
}

/* Sfondo “soft” per permettere un leggero zoom-out senza bande visibili */
#come-lavoro .work-layout--overlay .work-photo::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: var(--work-img);
  background-size: cover;
  background-position: var(--work-pos);
  filter: blur(14px);
  transform: translateX(2%) scale(0.92);
  opacity: .55;
}

/* Leggera ombra a sinistra per leggibilità */
#come-lavoro .work-layout--overlay .work-photo::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,0) 72%);
}

/* Inquadratura: soggetto più a destra + meno zoom */
#come-lavoro .work-layout--overlay .work-photo img{
  width: 100%;
  height: clamp(340px, 44vw, 520px);
  object-fit: cover;
  object-position: 96% 22%;
  transform: translateX(2%) scale(0.92);
  display: block;
}

/* Mobile: testo sotto per massima leggibilità */
@media (max-width: 760px){
  #come-lavoro .work-layout--overlay .work-left{
    position: static;
    padding: 14px 0 0 0;
    max-width: none;
  }

  #come-lavoro .work-layout--overlay{
    gap: 14px;
  }

  #come-lavoro .work-layout--overlay .card{
    width: 100%;
  }

  #come-lavoro .work-layout--overlay .work-photo img{
    height: clamp(300px, 60vw, 420px);
    transform: none;
    object-position: 70% 28%;
  }

  #come-lavoro .work-layout--overlay .work-photo::after{
    background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.30));
  }
}


/* === Come lavoro: allineamento box + foto pulita (aggiornamento) === */
#come-lavoro .section__head--above{
  width: min(980px, 92vw);
  margin: 0 auto 10px;
  text-align: left; /* titolo sullo sfondo, sopra la foto */
}

#come-lavoro .work-layout--overlay{
  width: min(980px, 92vw); /* foto leggermente più piccola */
  max-width: none;
  margin: 18px auto 0;     /* posizionata un po' più in basso */
  position: relative;
}

/* Foto: niente “riquadro nel riquadro” */
#come-lavoro .work-layout--overlay .work-photo{
  margin: 0;
  width: 100%;
  border-radius: var(--radius2);
  overflow: hidden;
  background: none; /* rimuove layer duplicati */
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 70px rgba(0,0,0,.18);
  position: relative;
  z-index: 1;
}

#come-lavoro .work-layout--overlay .work-photo::before{
  content: none; /* elimina il blur “interno” */
}

#come-lavoro .work-layout--overlay .work-photo::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.08) 45%, rgba(0,0,0,0) 72%);
  opacity: .55;
}

#come-lavoro .work-layout--overlay .work-photo img{
  width: 100%;
  height: clamp(300px, 40vw, 480px);
  object-fit: cover;
  object-position: 78% 28%;
  transform: none; /* elimina zoom/bordo interno */
  display: block;
}

/* Box vetro: dentro la foto, spigolo alto-sinistra coincidente */
#come-lavoro .work-layout--overlay .work-left{
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;

  /* annulla valori precedenti */
  margin: 0;
  padding: 0;
  max-width: none;
  width: auto;

  z-index: 2;
}

#come-lavoro .work-layout--overlay .work-left .card{
  margin: 0;
  width: min(520px, 78%);
  max-width: 100%;
  border-top-left-radius: var(--radius2);
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  border-bottom-left-radius: 18px;
  backdrop-filter: blur(12px);
}

/* Mobile: box più compatto */
@media (max-width: 720px){
  #come-lavoro .section__head--above{
    width: min(980px, 92vw);
    text-align: center;
    margin-bottom: 12px;
  }
  #come-lavoro .work-layout--overlay{
    margin-top: 14px;
  }
  #come-lavoro .work-layout--overlay .work-left .card{
    width: calc(100% - 0px);
    padding: 16px;
  }
}

/* === Come lavoro: centratura foto + box testo più stretto (gen 2026) === */
#come-lavoro .section__head--above{
  width: min(860px, 92vw);
  margin: 0 auto 10px;
  text-align: left;
}

#come-lavoro .work-layout--overlay{
  width: min(860px, 92vw);   /* più piccola e ben centrata */
  margin-left: auto;
  margin-right: auto;
}

#come-lavoro .work-layout--overlay .work-right{
  display: flex;
  justify-content: center;
}

#come-lavoro .work-layout--overlay .work-photo img{
  height: clamp(280px, 36vw, 440px); /* foto leggermente più piccola */
}

/* Box testo: meno invasivo (non copre il viso) */
#come-lavoro .work-layout--overlay .work-left .card{
  width: min(420px, 64%);
}

/* ===== Come lavoro tweaks v5 ===== */
#come-lavoro .work-layout--overlay{
  max-width: min(960px, 92vw);
}

/* Foto piena nel frame: niente “bordo nel bordo” */
#come-lavoro .work-layout--overlay .work-photo{
  background: transparent;
}

/* Disattiva lo sfondo blur “soft” */
#come-lavoro .work-layout--overlay .work-photo::before{
  content: none !important;
  display: none !important;
}

/* Inquadratura: meno tagli (aspect ratio reale) + niente zoom-out che crea cornice interna */
#come-lavoro .work-layout--overlay .work-photo img{
  height: auto;
  aspect-ratio: 3 / 2;
  object-position: 92% 40%;
  transform: none;
}

/* Card testo più rettangolare (meno quadrata) */
#come-lavoro .work-layout--overlay .card{
  width: min(460px, 44%);
  padding: 16px 20px;
}

@media (max-width: 760px){
  #come-lavoro .work-layout--overlay .card{
    width: 100%;
  }
}

/* ===== Come lavoro: riduzione dimensioni + nessuno scroll desktop ===== */
#come-lavoro.section{
  padding: clamp(26px, 4vw, 54px) 0;
}

/* Riduce l’impatto del blocco foto su desktop */
#come-lavoro .work-layout--overlay{
  max-width: min(920px, 92vw);
}

/* Foto più piccola e senza tagli (aspect-ratio reale dell’immagine) */
#come-lavoro .work-layout--overlay .work-photo{
  width: min(760px, 92vw);
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 3 / 2;
  background-image: none !important; /* evita “bordo nel bordo” */
}

/* Niente layer blur / contorni extra */
#come-lavoro .work-layout--overlay .work-photo::before{
  content: none !important;
  display: none !important;
}

/* L’immagine riempie il frame senza croppare (ratio combacia) */
#come-lavoro .work-layout--overlay .work-photo img{
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 50%;
  transform: none !important;
}

/* Box testo un filo più piccolo ma ancora “rettangolare” */
#come-lavoro .work-layout--overlay .work-left{
  left: clamp(14px, 2.4vw, 32px);
  bottom: clamp(14px, 2.8vw, 30px);
  max-width: min(520px, calc(100% - 28px));
}

#come-lavoro .work-layout--overlay .card{
  width: min(420px, 48%);
  padding: 14px 18px;
}

#come-lavoro .work-layout--overlay .card .lead{
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.55;
}

/* Desktop: evita che questa sezione diventi scrollabile (background percepito “fisso”) */
@media (min-width: 980px){
  #come-lavoro.panel.is-active{
    overflow: hidden;
  }
}

/* Mobile: mantenere layout fruibile */
@media (max-width: 760px){
  #come-lavoro .work-layout--overlay .work-photo{
    width: 100%;
  }
  #come-lavoro .work-layout--overlay .card{
    width: 100%;
  }
}
/* === Come lavoro: swap testo/foto + foto pulita (v10) === */
#come-lavoro .section__head--above{
  width: min(980px, 92vw);
  margin: 0 auto 12px;
  text-align: left;
}

#come-lavoro .work-layout{
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(340px, 600px);
  gap: clamp(18px, 3vw, 42px);
  align-items: center;
  width: min(980px, 92vw);
  margin-left: auto;
  margin-right: auto;
}

/* Foto a destra, leggermente verso il centro */
#come-lavoro .work-right{
  justify-self: center;
}
@media (min-width: 981px){
  #come-lavoro .work-right{
    transform: translateX(-16px);
  }
}

/* Foto "normale": solo rounded, niente riquadro/trasparenze */
#come-lavoro .work-photo{
  margin: 0;
  width: 100%;
  max-width: 520px;
  border-radius: 26px;
  overflow: hidden;
  border: none;
  background: none;
  box-shadow: none;
}

#come-lavoro .work-photo img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  aspect-ratio: auto;
}

/* Responsive */
@media (max-width: 980px){
  #come-lavoro .work-layout{
    grid-template-columns: 1fr;
  }
  #come-lavoro .work-right{
    transform: none;
  }
  #come-lavoro .work-photo{
    max-width: 520px;
  }
}

/* Come lavoro: riduci gap titolo->card (allineamento in alto) — v12 */
#come-lavoro .work-layout{
  align-items: flex-start;
}

/* ============================================================
   FIX: rimuove il micro-scroll (sfondo che “scorre”)
   solo in HOME e in CHI SONO, senza alterare le altre sezioni.
   ============================================================ */

#home{
  /* Compensa i padding di <main> (header+5px / footer+10px) */
  height: calc(100vh - var(--headerH) - var(--footerH) - 15px);
}

#home .home-splash{
  /* Evita che la min-height precedente crei overflow */
  min-height: 0;
  height: 100%;
}

#chi-sono.panel.is-active{
  /* Forza un'altezza esatta (invece della min-height) per evitare overflow */
  min-height: 0;
  height: calc(100vh - var(--headerH) - var(--footerH) - 20px);
}



/* ------------------------------
   Gallery
---------------------------------*/
.gallery__status{
  margin: 10px 0 18px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.92);
}

.gallery__cats{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 8px;
}

.gallery-card{
  grid-column: span 12;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow:hidden;
  padding: 0;
}

.gallery-card__inner{
  padding: 18px;
  display:flex;
  gap: 16px;
  align-items:center;
}

.gallery-card__thumb{
  width: 88px;
  height: 62px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.22);
  overflow:hidden;
  flex: 0 0 auto;
  background: rgba(255,255,255,.06);
}

.gallery-card__thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.gallery-card__meta{
  min-width: 0;
}

.gallery-card__title{
  margin: 0 0 4px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(255,255,255,.98);
}

.gallery-card__count{
  margin: 0;
  color: var(--fg2);
  font-weight: 700;
  font-size: 14px;
}

.gallery-card:hover{
  transform: translateY(-2px);
}

.gallery__viewer{
  margin-top: 10px;
}

.gallery__viewer-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.gallery__title{
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 900;
}

.gallery__back{
  padding: .6rem .8rem;
}

.gallery__grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.gallery-item{
  grid-column: span 12;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  cursor: zoom-in;
  position: relative;
}

.gallery-item img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  display:block;
}

.gallery-item__caption{
  padding: 10px 12px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  line-height: 1.35;
}

@media (min-width: 560px){
  .gallery-card{ grid-column: span 6; }
  .gallery-item{ grid-column: span 6; }
  .gallery-item img{ height: 220px; }
}

@media (min-width: 900px){
  .gallery-card{ grid-column: span 4; }
  .gallery-item{ grid-column: span 4; }
  .gallery-item img{ height: 220px; }
}

/* Lightbox */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.78);
  display: grid;
  place-items: center;
  padding: 18px;
}

.lightbox__img{
  max-width: min(980px, 96vw);
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  background: rgba(0,0,0,.20);
}

.lightbox__close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.30);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.95);
  font-size: 28px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor:pointer;
}

.lightbox__caption{
  padding: 10px 16px 0;
  color: rgba(255,255,255,.92);
  font-weight: 700;
  text-align: center;
}

.lightbox[hidden]{
  display:none !important;
}


/* ------------------------------------------------------------
   FIX smartphone HOME: titolo "Dal progetto al processo produttivo"
   non deve finire sotto l'header fixed.
   Applichiamo solo su smartphone e solo in HOME.
   ------------------------------------------------------------ */


#approfondimenti .deep-card{
  max-width: 600px;       /* cambia questo numero come vuoi */
  width: 100%;
  margin-left: 0;         /* resta allineata a sinistra */
}


/* CONTATTI mobile: le pair tornano in colonna */
@media (max-width: 820px){
  .contact__pair,
  .contact__pair--right{
    display: block;
  }
}


@media (max-width: 820px){
  /* distanza tra le due mini-card dentro le pair (mobile) */
  .contact__pair > a,
  .contact__pair--right > a{
    margin-bottom: 14px;
  }

  /* evita margine doppio sull’ultima card della pair */
  .contact__pair > a:last-child,
  .contact__pair--right > a:last-child{
    margin-bottom: 0;
  }
}


/* --- Contatti: desktop 2 colonne, righe allineate (SOLO desktop) --- */
@media (min-width: 821px){

  .contact__col1 { grid-column: 1; }
  .contact__col2 { grid-column: 2; }

  /* Telefono + WhatsApp affiancati dentro colonna 1 */
  .contact__pair:not(.contact__pair--right){
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }


/* Instagram + LinkedIn affiancati in colonna 2 riga 1 */
.contact__pair--right{
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}


  .contact__mini{ width: 100%; }


  /* Email: colonna sinistra, riga 2 */
  .contact__grid > a.contact__col1{
    grid-column: 1;
    grid-row: 2;
  }

  /* Sito: colonna destra, riga 2 */
  .contact__grid > a.contact__col2{
    grid-column: 2;
    grid-row: 2;
  }

} /* <-- chiusura @media */


/* WhatsApp mini-card: centra contenuto + icona visibile e verde */
.contact__mini--wa{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Mantieni altezza uguale alla card Telefono */
.contact__mini--wa .contact__value{
  visibility: hidden;
}

/* Icona WhatsApp: dimensione e colore verde (robusto) */
.contact__mini--wa .wa_icon_img{
  width: 27px;
  height: 27px;
  display: block;
  margin-bottom: 6px;
  filter: invert(49%) sepia(96%) saturate(1200%) hue-rotate(86deg) brightness(98%) contrast(110%);

}


/* un filo più grande: scritta WHATSAPP */
.contact__mini--wa .contact__label{
  font-size: 0.84em;
}

/* FIX iPhone HOME: evita che la HERO vada sotto l'header fixed (solo HOME) */
@media (max-width: 820px){
  #home .home-layout{
    margin-top: calc(350px + env(safe-area-inset-top)) !important;
    padding-top: 0 !important;
  }

  /* se arrivi con #home (ancora) */
  #home{
    scroll-margin-top: calc(350px + env(safe-area-inset-top));
  }
}

/* Telefono: ingrandisci leggermente l'icona SOLO nella mini-card telefono */
.contact__pair a[href^="tel:"] img{
  width: 30px;
  height: 30px;
}

.contact__mini--ig .ig_icon_img{
  width: 32px !important;
  height: 32px !important;
  display: block;
}

/* COME LAVORO: testo leggermente più piccolo */
#come-lavoro .work-left .card .lead{
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.45;
}

/* COME LAVORO: scheda più larga verso sinistra */
@media (min-width: 981px){
  #come-lavoro .work-left .card{
    width: calc(100% + 140px);
    max-width: 560px;
    margin-left: -140px;
  }
}

/* IL MIO RUOLO: stessa dimensione testo di COME LAVORO */
#il-mio-ruolo .role-right .card .lead{
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.45;
}