:root {
    --ink: #102019;
    --forest: #123b28;
    --bws-green: #2e963f;
    --bws-green-dark: #1f7130;
    --bws-ink: #17232d;
    --bws-muted: #59636b;
    --bws-line: #e2e8e4;
    --bws-soft: #f3f8f4;
    --bws-dark: #13241c;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; background: #f7f8f7; color: var(--bws-ink); }
.site-header { height:82px; display:flex; align-items:center; justify-content:space-between; max-width:1440px; padding:0 0 0 38px; margin:auto; }
.brand img { width:142px; height:auto; display:block; }
nav { display:flex; align-items:center; gap:28px; }
nav a { color:var(--ink); font-size:.86rem; font-weight:700; text-decoration:none; }
.nav-cta { padding:12px 18px; color:#fff; background:var(--forest); border-radius:8px; }
.pagina-commerciale { width: 96%; margin: 20px auto; overflow: hidden; background: #fff; border: 1px solid #e6e9e7; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.section { padding: 90px clamp(28px, 6vw, 90px); }
.section-soft { background: var(--bws-soft); }
.eyebrow { display: inline-block; margin-bottom: 16px; color: var(--bws-green); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.section-heading { max-width: 760px; margin-bottom: 50px; }
.section-heading.centered { margin-right: auto; margin-left: auto; text-align: center; }
.section-heading h2, .servizi-intro h2, .bws-difference h2, .final-cta h2 { margin: 0 0 18px; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.12; letter-spacing: -.035em; }
.section-heading p, .servizi-intro p, .bws-difference p { margin: 0; color: var(--bws-muted); font-size: 18px; line-height: 1.75; }

.hero-commerciale { position: relative; min-height: 650px; display: flex; align-items: center; overflow: hidden; background: var(--bws-dark); }
.hero-commerciale__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-commerciale__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,25,17,.96) 0%, rgba(10,25,17,.86) 44%, rgba(10,25,17,.35) 75%, rgba(10,25,17,.18) 100%); }
.hero-commerciale__content { position: relative; z-index: 1; width: min(760px, 70%); padding: 80px clamp(30px, 7vw, 105px); color: #fff; }
.hero-commerciale h1 { margin: 0 0 25px; font-size: clamp(48px, 6vw, 82px); line-height: .98; letter-spacing: -.05em; }
.hero-commerciale p { max-width: 680px; margin: 0 0 34px; color: rgba(255,255,255,.87); font-size: clamp(18px, 1.8vw, 23px); line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.btn { display: inline-flex; justify-content: center; align-items: center; min-height: 52px; padding: 14px 23px; border: 1px solid transparent; border-radius: 7px; font-weight: 750; text-decoration: none; transition: .25s ease; }
.btn-primary { background: var(--bws-green); color: #fff; }
.btn-primary:hover { background: var(--bws-green-dark); transform: translateY(-2px); }
.btn-secondary { border-color: rgba(255,255,255,.7); color: #fff; background: rgba(255,255,255,.06); }
.btn-secondary:hover { background: #fff; color: var(--bws-ink); transform: translateY(-2px); }

.benefici-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.beneficio-card { padding: 32px 25px; border: 1px solid var(--bws-line); border-radius: 12px; background: #fff; transition: .25s ease; }
.beneficio-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(22,44,30,.09); }
.beneficio-card i { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 24px; border-radius: 50%; color: var(--bws-green); background: var(--bws-soft); font-size: 25px; }
.beneficio-card h3 { margin: 0 0 12px; font-size: 20px; }
.beneficio-card p { margin: 0; color: var(--bws-muted); line-height: 1.65; }

.process-accordion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.process-item { overflow: hidden; align-self: start; border: 1px solid var(--bws-line); border-radius: 13px; background: #fff; box-shadow: 0 8px 24px rgba(25,46,32,.055); transition: border-color .2s, box-shadow .2s, transform .2s; }
.process-item:hover { transform: translateY(-2px); border-color: #bfd9c4; box-shadow: 0 12px 28px rgba(25,46,32,.09); }
.process-item[open] { border-color: #afd1b6; box-shadow: 0 14px 32px rgba(25,46,32,.1); }
.process-item summary { display: grid; grid-template-columns: 46px 1fr 32px; gap: 14px; align-items: center; min-height: 82px; padding: 16px 18px; cursor: pointer; list-style: none; font-size: 20px; font-weight: 800; }
.process-item summary::-webkit-details-marker { display: none; }
.process-item summary > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.process-item summary small { color: var(--bws-green); font-size: 10px; letter-spacing: .14em; }
.process-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: var(--bws-green); background: var(--bws-soft); font-size: 19px; }
.process-toggle { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--bws-green-dark); background: var(--bws-soft); font-size: 12px; transition: transform .25s, background .25s; }
.process-item[open] .process-toggle { transform: rotate(45deg); color: #fff; background: var(--bws-green); }
.process-details { padding: 0 22px 22px 78px; border-top: 1px solid #edf1ee; }
.process-details p { margin: 18px 0 10px; color: var(--bws-muted); line-height: 1.55; }
.process-details ul { margin: 0 0 16px; padding-left: 18px; color: #35433c; line-height: 1.65; }
.process-details li::marker { color: var(--bws-green); }
.process-details a, .text-link { color: var(--bws-green-dark); font-weight: 800; text-decoration: none; }
.process-details a i, .text-link i { margin-left: 6px; transition: transform .2s; }
.process-details a:hover i, .text-link:hover i { transform: translateX(4px); }

.timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 65px 0 0; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; top: 25px; left: 10%; right: 10%; height: 2px; background: #cfe1d2; }
.timeline li { position: relative; padding: 0 18px; text-align: center; }
.timeline li > span { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 22px; border-radius: 50%; background: var(--bws-green); color: #fff; font-weight: 900; box-shadow: 0 0 0 8px #fff; }
.timeline h3 { margin: 0 0 9px; font-size: 19px; }
.timeline p { margin: 0; color: var(--bws-muted); line-height: 1.55; }

.section-dark { background: var(--bws-dark); color: #fff; }
.section-dark .section-heading p { color: rgba(255,255,255,.67); }
.documenti-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.documenti-grid article { padding: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.045); }
.documenti-grid i { margin-bottom: 17px; color: #56c56a; font-size: 28px; }
.documenti-grid h3 { margin: 0 0 8px; }
.documenti-grid p { margin: 0; color: rgba(255,255,255,.64); line-height: 1.55; }

.norme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.norme-grid article { min-height: 165px; padding: 28px; border-top: 4px solid var(--bws-green); background: #fff; box-shadow: 0 10px 30px rgba(20,45,29,.08); }
.norme-grid strong { display: block; margin-bottom: 15px; font-size: 20px; }
.norme-grid span { color: var(--bws-muted); line-height: 1.55; }

.settori-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.settori-grid div { display: flex; min-height: 125px; flex-direction: column; justify-content: center; align-items: center; gap: 16px; border: 1px solid var(--bws-line); border-radius: 10px; background: #fff; text-align: center; font-weight: 750; }
.settori-grid i { color: var(--bws-green); font-size: 31px; }

.servizi { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(45px, 8vw, 110px); align-items: start; }
.servizi-intro { position: sticky; top: 30px; }
.servizi-intro .text-link { display: inline-block; margin-top: 28px; }
.servizi-list { display: grid; gap: 13px; }
.servizi-list article { display: grid; grid-template-columns: 58px 1fr; gap: 20px; padding: 27px; border: 1px solid var(--bws-line); border-radius: 12px; }
.servizi-list i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--bws-green); background: var(--bws-soft); font-size: 22px; }
.servizi-list h3 { margin: 0 0 8px; }
.servizi-list p { margin: 0; color: var(--bws-muted); line-height: 1.6; }

.bws-difference { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: center; color: #fff; background: linear-gradient(135deg, #193326, #10261a); }
.bws-difference p { color: rgba(255,255,255,.7); }
.difference-points { display: grid; gap: 12px; margin-top: 28px; }
.difference-points span { color: rgba(255,255,255,.88); }
.difference-points i { margin-right: 10px; color: #56c56a; }
.difference-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.05); }
.difference-visual > i { grid-column: 1 / -1; margin-bottom: 16px; color: #56c56a; font-size: 65px; text-align: center; }
.difference-visual span { padding: 16px 10px; border-radius: 8px; background: rgba(255,255,255,.07); text-align: center; }

.final-cta { padding: 90px clamp(30px, 9vw, 135px); color: #fff; text-align: center; background: linear-gradient(rgba(15,37,23,.89), rgba(15,37,23,.89)), url('../img/index-img/cordoni_di_saldatura.png') center/cover; }
.final-cta h2 { max-width: 900px; margin-right: auto; margin-left: auto; }
.final-cta p { max-width: 700px; margin: 0 auto 30px; color: rgba(255,255,255,.75); font-size: 18px; line-height: 1.65; }
.final-cta .hero-actions { justify-content: center; }

@media (max-width: 1100px) {
    .benefici-grid, .norme-grid { grid-template-columns: repeat(2, 1fr); }
    .settori-grid { grid-template-columns: repeat(3, 1fr); }
    .process-accordion { grid-template-columns: 1fr; }
}

/* Stessa disposizione dell'intestazione della pagina Servizi per aziende. */
@media (min-width: 821px) and (max-width: 900px) {
    .site-header { padding:0 22px; }
    nav a:not(.nav-cta) { display:none; }
}

@media (min-width: 561px) and (max-width: 600px) {
    .site-header { height:68px; }
    .brand img { width:110px; }
    .nav-cta { padding:10px 12px; font-size:.69rem; }
}

@media (max-width: 820px) {
    .site-header { padding:0 22px; }
    nav a:not(.nav-cta) { display: none; }
    .hero-commerciale { min-height: 520px; }
    .hero-commerciale__content { width: 100%; }
    .hero-commerciale__overlay { background: rgba(10,25,17,.82); }
    .timeline { grid-template-columns: 1fr; gap: 26px; }
    .timeline::before { top: 0; bottom: 0; left: 25px; width: 2px; height: auto; }
    .timeline li { display: grid; grid-template-columns: 52px 1fr; column-gap: 22px; text-align: left; }
    .timeline li > span { grid-row: 1 / 3; margin: 0; box-shadow: 0 0 0 7px #fff; }
    .timeline h3, .timeline p { grid-column: 2; }
    .documenti-grid { grid-template-columns: repeat(2, 1fr); }
    .servizi, .bws-difference { grid-template-columns: 1fr; }
    .servizi-intro { position: static; }
}

@media (max-width: 560px) {
    .site-header { height:68px; }
    .brand img { width:110px; }
    .brand img { width:110px; }
    .nav-cta { padding:10px 12px; font-size:.69rem; }
    .pagina-commerciale { width: 100%; margin: 0; border: 0; }
    .section { padding: 44px 18px; }
    .section-heading { margin-bottom: 28px; }
    .section-heading h2, .servizi-intro h2, .bws-difference h2, .final-cta h2 { margin-bottom: 12px; font-size: 28px; }
    .section-heading p, .servizi-intro p, .bws-difference p { font-size: 15px; line-height: 1.55; }
    .eyebrow { margin-bottom: 10px; font-size: 10px; }
    .hero-commerciale { min-height: 470px; }
    .hero-commerciale__content { padding: 58px 20px 42px; }
    .hero-commerciale h1 { margin-bottom: 16px; font-size: 39px; }
    .hero-commerciale p { margin-bottom: 22px; font-size: 16px; line-height: 1.5; }
    .hero-actions { gap: 8px; }
    .btn { min-height: 40px; padding: 9px 14px; border-radius: 6px; font-size: 13px; }
    .benefici-grid, .documenti-grid, .norme-grid, .settori-grid { grid-template-columns: 1fr; }
    .benefici-grid { gap: 10px; }
    .beneficio-card { padding: 20px; }
    .beneficio-card i { width: 42px; height: 42px; margin-bottom: 14px; font-size: 18px; }
    .beneficio-card h3 { margin-bottom: 7px; font-size: 17px; }
    .beneficio-card p { font-size: 14px; line-height: 1.5; }
    .process-accordion { gap: 9px; }
    .process-item summary { grid-template-columns: 38px 1fr 26px; gap: 10px; min-height: 64px; padding: 11px 13px; font-size: 16px; }
    .process-icon { width: 36px; height: 36px; border-radius: 8px; font-size: 15px; }
    .process-toggle { width: 24px; height: 24px; font-size: 10px; }
    .process-details { padding: 0 15px 16px; font-size: 14px; }
    .process-details p { margin-top: 14px; }
    .timeline { margin-top: 34px; gap: 18px; }
    .timeline li { grid-template-columns: 38px 1fr; column-gap: 14px; padding: 0; }
    .timeline li > span { width: 38px; height: 38px; margin: 0; font-size: 13px; }
    .timeline::before { left: 18px; }
    .documenti-grid { gap: 9px; }
    .documenti-grid article, .norme-grid article { min-height: 0; padding: 19px; }
    .documenti-grid i { margin-bottom: 10px; font-size: 22px; }
    .settori-grid div { min-height: 82px; gap: 9px; font-size: 14px; }
    .settori-grid i { font-size: 23px; }
    .servizi-list article { grid-template-columns: 42px 1fr; gap: 13px; padding: 17px; }
    .servizi-list i { width: 40px; height: 40px; font-size: 17px; }
    .servizi-list h3 { font-size: 16px; }
    .servizi-list p { font-size: 14px; line-height: 1.45; }
    .difference-visual { grid-template-columns: 1fr; }
    .difference-visual > i { grid-column: 1; }
    .final-cta { padding: 50px 18px; }
    .final-cta p { margin-bottom: 20px; font-size: 15px; }
}