.hero_int {
    margin-top: 80px;
    background: var(--antracite);
    color: white;
    padding: 5rem 5%;    
    min-height:30dvh;  
    display:flex;
    align-items: center;
    position:relative;
}

.hero_int::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--green-l), transparent);  
}

.hero_int-container {
    max-width: 1600px;
    margin: 0 auto;
    text-align:center;
}
.hero_int-container h1 {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    margin-top:0;
}
@media (max-width:1600px) {.hero_int-container h1 { font-size: 3rem;}}
@media (max-width:1100px) {.hero_int-container h1 { font-size: 2.5rem; }}
@media (max-width:890px) {.hero_int {margin-top:0;} .hero_int-container h1 {margin-top:80px; font-size:2rem;}}
.breadcrumbs {background:var(--antracite); width:100%; padding:1rem 0 7rem 0;}
.breadcrumbs ul {list-style:none; margin:0; padding-left:0;}
.breadcrumbs a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.breadcrumbs a:hover {color:var(--green-l);}
.crumb-separator {
    width: 4px;
    height: 4px;
    margin-bottom:0.1rem;
    background: var(--green);
    border-radius: 50%;
    display: inline-block;
}

.crumb-current {color:var(--green-l); font-weight:500;}

@media (max-width: 1200px) {.breadcrumbs {padding:1rem 0 4rem 0;}}

/* servizi aziende */
.serv-section {padding:5rem 5%; background:var(--antracite); color:var(--bianco-sporco);}
.serv-container {
    max-width: 1600px;
    margin: 0 auto;
    display:grid;
    grid-template-columns: 0.5fr 1fr;
    gap:4rem;
}

.section-width {
    max-width: 1600px;
    margin: 0 auto;
}

@media (max-width:1600px) {.serv-container{grid-template-columns: 0.8fr 1fr;}}
@media (max-width:1250px) {.serv-container{grid-template-columns: 1fr;}}
@media (max-width: 737px) {.serv-section {padding:3rem 5%;}}

.section-title {
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 100px;
    line-height: 1.1;
}
.section-subtitle {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1.1;
}

.section-p {
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 1000px;
    text-align: justify;
}

@media (max-width:1100px) {.section-title {font-size:2.8rem;margin-bottom:50px;}.section-subtitle{font-size:2.5rem;}}
@media (max-width:800px) {.section-title {font-size:1.5rem;}.section-subtitle{font-size:1.5rem;}}

/* servizi per aziende */

/* Desktop Grande (1600px+) */

.serv-subgrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 200px;
    gap: 1.5rem;
}
.service-box:nth-child(1) {
    grid-column: 1 / 4;
    grid-row: 1 / 3;
}

.service-box:nth-child(2) {
    grid-column: 1 / 4;
    grid-row: 3 / 5;
}

.service-box:nth-child(3) {
    grid-column: 1 / 4;
    grid-row: 5 / 7;
}

/* Colonna destra: 3 box verticali sfalsati in basso */
.service-box:nth-child(4) {
    grid-column: 4 / 7;
    grid-row: 2 / 4;
}

.service-box:nth-child(5) {
    grid-column: 4 / 7;
    grid-row: 4 / 6;
}

.service-box:nth-child(6) {
    grid-column: 4 / 7;
    grid-row: 6 / 8;
}

/* Service Box Styling */
.service-box {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}
.service-box:hover {
    border-color: rgba(105, 160, 144, 0.8);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4),
                0 0 20px rgba(105, 160, 144, 0.2);
    transform: translateY(-4px);
}

.service-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease;
    
    /* Placeholder gradient */
    background-image: linear-gradient(135deg, #3a3d41 0%, #2a2d30 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 1.1rem;
}

.service-box:hover .service-image {
    transform: scale(1.05);
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;   
}

/* Title sempre visibile */
.service-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.85) 80%, transparent 100%);
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    transition: all 0.4s ease;
    pointer-events: none;
}
.arrow-icon {font-size:20px;}

/* Overlay con descrizione - SEO friendly (sempre nel DOM) */
.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:linear-gradient(321deg, var(--green) -1.57%, #2d5c4e 100%);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.service-box:hover .service-overlay {
    opacity: 1;
    pointer-events: auto;
}

.service-box:hover .service-title {
    opacity: 0;
}

.service-overlay h3 {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    margin-top:0;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.service-overlay p {
    color: rgba(255,255,255,0.95);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.service-image-left-c img {object-position: 80% center !important;}
.service-image-right-c img {object-position: 20% center !important;}

/* alle persone */
.serv-subgrid-pers {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 200px;
    gap: 1.5rem;
}
 
/* Posizionamento 3 box */
.service-box-pers:nth-child(1) {
    grid-column: 1 / 4; /* Colonna sinistra */
    grid-row: 1 / 3;
}
 
.service-box-pers:nth-child(2) {
    grid-column: 1 / 4; /* Colonna sinistra */
    grid-row: 3 / 5;
}
 
.service-box-pers:nth-child(3) {
    grid-column: 4 / 7; /* Colonna destra - offset */
    grid-row: 2 / 4;    /* Inizia riga 2 (offset verticale) */
}
 
/* Service Box Base */
.service-box-pers {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}
 
.service-box-pers:hover {
    border-color: rgba(105, 160, 144, 0.8);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(105, 160, 144, 0.2);
    transform: translateY(-4px);
}

.service-box-pers:hover .service-image {
    transform: scale(1.05);
}
.service-box-pers:hover .service-overlay {
    opacity: 1;
    pointer-events: auto;
}
 
.service-box-pers:hover .service-title {
    opacity: 0;
}

/* Bottone */
.btn-outline-white {
    background: transparent;
    color: white;
    border: 2px solid white;
    padding: 0.9rem 2rem; /* Ridotto leggermente */
    font-size: 0.95rem; /* Ridotto da 1rem */
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-outline-white::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: white;
    transition: height 0.3s ease;
    z-index: -1;    
}

.btn-outline-white:hover::after {
    height: 100%;
}

.btn-outline-white:hover {
    color: var(--antracite) !important;
}

.long-arrow {
    margin-left: 10px;
}


/* ========================================
   TABLET/MOBILE (1300px)
   1 colonna verticale
   ======================================== */
@media (max-width: 1600px) {

    .service-title {font-size: 1.4rem;}
    .arrow-icon {font-size:17px;}
    .service-overlay h3 {font-size:1.5rem;}
    .service-overlay p {font-size:0.9rem; margin-bottom:2rem;}
    .btn-outline-white { padding: 0.9rem 1.5rem;font-size: 0.9rem;}
}

@media (max-width:850px) {
    .serv-subgrid, .serv-subgrid-pers {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 1.5rem;
    }
    
    .service-box:nth-child(1),
    .service-box:nth-child(2),
    .service-box:nth-child(3),
    .service-box:nth-child(4),
    .service-box:nth-child(5),
    .service-box:nth-child(6),
    .service-box-pers:nth-child(1),
    .service-box-pers:nth-child(2),
    .service-box-pers:nth-child(3) {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .service-box,
    .service-box-pers {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .service-image {
        position: relative;
        height: 350px;
        flex-shrink: 0;
    }

    .service-title {
        display: none;
    }

    .service-overlay {
        position: relative;
        opacity: 1;
        pointer-events: auto;
        flex: 1;
    }
}

@media (max-width:737px) {
    .btn-with-mob {width:100%; }
    .btn-with-mob .btn {width:100%; }
    .service-overlay .btn-outline-white {width:100%; text-align: center;}
    .btn-outline-white { padding: 0.9rem;font-size: 0.7rem;}
    .btn {width:100%;}
}

 /* servizi singoli */
.intro-box {
    background: linear-gradient(135deg, #5a8c7d 0%, var(--green) 50%, #3d6657 100%);
    color: white;
    padding: 5rem;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
}
.intro-content {
    position: relative;
    z-index: 1;   
}

.intro-content p {
    font-size: 1.3rem;
    line-height: 2;
    margin-bottom: 2rem;
}

.intro-content p:last-child {
    font-weight: 700;
    font-size: 1.35rem;
    margin-bottom: 0;
}

.cta-intro { margin-top: 3rem;} 
@media (max-width:737px) {.cta-intro .btn-outline-white {width:100%; text-align: center;}}

@media (max-width:890px) {.intro-box {padding:3rem 2rem;}.intro-content p {font-size:1.1rem;}}

.a-chi {margin:7rem auto;}
.full-section {
    padding: 8rem 5%;
    position: relative;
}
.bullet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width:1600px;   
    gap: 3rem;
    align-items:stretch;
}
.bullet-grid-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 2.5rem;
    align-items: center;    
}

.bullet-number {
    font-size: 4.5rem;
    font-weight: 800;
    color: var(--green-l);
    line-height: 1;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.bullet-grid-item:hover .bullet-number {
    opacity: 1;
}

.bullet-text {
    font-size: 1.3rem;
    line-height: 1.8;
    
}

.bullet-box{
  border:1px solid rgba(78,127,114,.22);;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow:0 14px 32px rgba(0,0,0,.35);
  padding:26px;
  position:relative;
  overflow:hidden;
  border-radius:0; /* no angoli arrotondati */
}

.bullet-box .bullet-box-list{
  display:grid;
  grid-template-columns:1fr;
  gap:25px; 
}

.bullet-box .bullet-box-list__item{
  display:flex;
  align-items:center;
  gap:20px;
  padding:14px;
  border:1px solid var(--green-l);
  border-radius:0; /* no angoli arrotondati */
  background:rgba(0,0,0,.08);
  width:100%;
}

.bullet-box .bullet-triangle{
  width:34px;
  height:34px;
  background:var(--green-l);
  border:1px solid rgba(78,127,114,.45);
  border-radius:2px; /* no angoli arrotondati */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* triangolo */
  flex:0 0 auto;
}

.bullet-box .bullet-box-list__item .bullet-box_txt{font-weight:600; font-size:1.3rem;}



.line{
  display:inline-flex;
  align-items:center;
  gap:20px;  
  font-weight:700;    
  width:100%;
}
.line:before{
  content:"";
  width:50px;
  height:4px;
  background:var(--green-l);
}
.metodo {
    background: white;
    color: var(--antracite);
    padding: 8rem 5%;
    position: relative;
}

@media (max-width:1256px) {.bullet-grid-alt-resp {grid-template-columns: 1fr;}}

@media (max-width:1020px) {
    .bullet-text, .bullet-box .bullet-box-list__item .bullet-box_txt { font-size: 1.1rem;}
}
@media (max-width:890px) {.bullet-grid {grid-template-columns: 1fr;} .bullet-number { font-size: 4rem;} }

/* Striscia verde obliqua SOPRA */
.metodo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--green);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
    z-index: 0;
}

/* Striscia verde obliqua SOTTO */
.metodo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--antracite);
    clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
    z-index: 0;
}

.metodo .section-content {
    position: relative;
    z-index: 1;
    max-width: 1600px;
    margin: 0 auto;
}

.metodo .section-title {
    color: var(--antracite);
}
.metodo-steps {
    margin-top: 3rem;
    position: relative;
    max-width: 1400px;
}

.metodo-steps::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: linear-gradient(to bottom, var(--green), var(--green-l));
}

.step {
    display: flex;    
    gap: 2rem;
    margin-bottom: 2.5rem;
    position: relative;
    transition: all 0.3s ease; 
    align-items:center;     
}

.step:hover {
    transform: translateX(10px);
}

.step-number {
    width: 42px;
    height: 42px;
    background: var(--green);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.step:hover .step-number {
    background: var(--green);
    transform: translateX(-10px) scale(1.15);
}

.step-content h4 {
    margin-top:1rem;
    font-size: 1.3rem;    
    color: var(--antracite);
}
.modalita-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 3rem;
}

@media (max-width:890px) {.modalita-grid {grid-template-columns:1fr;} .step-content h4 {font-size:1.1rem;} }

.modalita-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 3rem;
    border: 1px solid var(--green-l);
    text-align: center;
}

.modalita-card strong {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--green-l);
}


.modalita-card p {  font-size: 1.3rem;}
@media (max-width:737px) {.modalita-card strong{font-size:1.5rem} .modalita-card p {  font-size: 1.1rem;}}

.contatti-card {
    background: linear-gradient(135deg, var(--antracite) 0%, var(--antracite-l) 100%);
    color: white;
    padding: 5rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}        


.contatti-card p {
    font-size: 1.3rem;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: rgba(255, 255, 255, 0.9);
}

#mappa-placeholder {
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2.5rem;
    box-sizing: border-box;
}

#mappa-testo {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.7;
    text-align: center;
    max-width: 420px;
    margin: 0;
}

@media (max-width:890px) {
    .contatti-card {padding:3rem;}
    .contatti-card p {font-size:1.1rem;}
}

/* CONTATTI */
    .contatti-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: stretch;
    }
    
    .contatti-info {
      background: rgba(255,255,255,0.03);
      padding: 3rem;
      border: 1px solid rgba(255,255,255,0.1);
    }
    
    .info-item {
      margin-bottom: 3rem;
    }
    
    .info-item:last-child {
      margin-bottom: 0;
    }
    
    .info-label {
      display: flex;
      align-items: center;
      gap: 1rem;
      font-size: 0.95rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--green-l);
      margin-bottom: 0.8rem;
    }
    
    .info-label i {
      font-size: 1.2rem;
    }
    
    .info-value {
      font-size: 1.5rem;
      font-weight: 400;
      color: white;
      line-height: 1.6;
    }
    
    .info-value a {
      color: white;
      text-decoration: none;
      transition: color 0.3s;
    }
    
    .info-value a:hover {color: var(--green-l); }
    
    .mappa-container {
      width: 100%;
      height: 100%;
      border: 2px solid rgba(255,255,255,0.1);
      overflow: hidden;
      background: rgba(255,255,255,0.03);
    }
    
    .mappa-container iframe {
      width: 100%;
      height: 100%;
      border: none;
      filter: grayscale(0.3) brightness(0.9);
    }
    
    @media (max-width: 1024px) {
      .contatti-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
      }      
      .mappa-container { height: 450px;}
    }
    @media (max-width: 768px) {
       .contatti-info { padding: 2rem; }      
      .info-value { font-size: 1.2rem;}      
      .mappa-container { height: 350px;} 
    }

/* ERROR 404 */
.main-error {width:100%; height:100dvh; padding:2em 3em;}
.wrap-error {background:var(--bianco-sporco); width:auto; display:flex;flex-direction:column; justify-content: center; align-items: center;}
.error-img {width:80%;}
.error-message {font-size:50px; text-align:center;}
@media (max-width:980px) {.error-message {font-size:35px;}}
@media (max-width:980px) and (orientation: landscape) {.error-img {width:40%; }.error-message {font-size:25px;} .wrap-error .mt20 {margin-top:0;}}
@media (max-width:600px) {.error-message {font-size:25px;}.error-img {width:100%;}}

/* policy */
.pol-section {padding:5rem 5%; background:var(--bianco-sporco); color:var(--antracite);}
.cookie-policy p {font-size:18px;}
.cookie-policy h3 {font-size:23px; margin:30px 0;}
.cookie-table-wrapper { width: 100%; overflow-x: auto; margin: 2rem 0;}
.cookie-table {width: 100%;border-collapse: collapse; font-size: 1rem;}
.cookie-table th,
.cookie-table td {
    border: 1px solid var(--bianco-sporco);
    padding: 0.75rem 1rem;
    text-align: left;
}

.cookie-table thead th { font-weight: 700; background: rgba(250, 249, 246, 0.5);}
.cookie-policy ul li {line-height:1.8;}
@media (max-width: 737px) {
    .cookie-table th, .cookie-table td {font-size:14px; }
}