/* Integrazioni a site.css per le pagine di questo sito */

/* lista SOA */
.soa-list { list-style: none; border-top: 1px solid var(--line); }
.soa-list li { display: grid; grid-template-columns: 120px 140px 1fr auto; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.soa-cat { font-weight: 300; font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--navy); }
.soa-cl { font-size: 15px; font-weight: 500; color: var(--blue); }
.soa-desc { font-size: 18px; font-weight: 400; color: var(--ink); }
.soa-imp { font-size: 15px; font-weight: 300; color: var(--grey); text-align: right; }
@media (max-width: 720px) {
  .soa-list li { grid-template-columns: 1fr auto; gap: 6px 16px; padding: 18px 0; }
  .soa-desc, .soa-imp { grid-column: 1 / -1; text-align: left; }
}

/* certificati ISO come immagini cliccabili */
.cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cert-img { display: block; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; background: var(--white); transition: transform .25s, box-shadow .25s; }
.cert-img:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cert-img img { width: 100%; height: auto; }
@media (max-width: 960px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cert-grid { grid-template-columns: 1fr; } }

/* video a tutta larghezza, angoli tondi */
.vid-wide { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 36px; background: var(--navy-deep); box-shadow: var(--shadow); }

/* griglia servizi (card tonde) */
.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc > div, .svc > a { display: block; padding: 34px; background: var(--mist); border-radius: 32px; transition: transform .25s, box-shadow .25s; }
.svc > a:hover { transform: translateY(-4px); box-shadow: var(--shadow-s); }
.svc b { display: block; font-weight: 300; font-size: 18px; color: var(--blue); margin-bottom: 14px; }
.svc h3 { font-weight: 400; font-size: 24px; margin-bottom: 10px; letter-spacing: -.01em; }
.svc p { color: var(--grey); font-size: 16px; }
@media (max-width: 960px) { .svc { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .svc { grid-template-columns: 1fr; } .svc > div, .svc > a { padding: 28px 24px; border-radius: 28px; } }

/* numeri in evidenza */
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nums > div { padding: 30px; border: 1px solid rgba(255,255,255,.18); border-radius: 32px; }
.nums b { display: block; font-weight: 200; font-size: 56px; line-height: 1; letter-spacing: -.03em; margin-bottom: 12px; color: var(--white); }
.nums span { display: block; font-size: 16px; color: rgba(255,255,255,.8); }
@media (max-width: 520px) { .nums { grid-template-columns: 1fr; } }

/* tag */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 14.5px; color: var(--navy); }

/* offerte lavoro */
.job { display: grid; grid-template-columns: 2fr 1.3fr auto; gap: 24px; align-items: center; padding: 28px 24px; border-top: 1px solid var(--line); border-radius: 0; transition: background .2s, border-radius .2s; }
.jobs .job:last-child { border-bottom: 1px solid var(--line); }
.job:hover { background: var(--mist); border-radius: 28px; }
.job h3 { font-weight: 300; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; margin-bottom: 4px; }
.job p { color: var(--grey); font-size: 15.5px; }
.job-w { color: var(--grey); font-size: 15.5px; }
@media (max-width: 760px) { .job { grid-template-columns: 1fr; gap: 10px; padding: 22px 8px; } }

/* contatti */
.cards { display: grid; gap: 16px; }
.cards > div { padding: 30px 32px; background: var(--mist); border-radius: 32px; }
.cards .k { font-size: 14px; font-weight: 500; color: var(--blue); margin-bottom: 8px; display: block; }
.cards h3 { font-weight: 300; font-size: 26px; letter-spacing: -.02em; margin-bottom: 10px; }
.cards p, .cards li { color: var(--grey); font-size: 16px; line-height: 1.7; }
.cards ul { list-style: none; }
.cards a { color: var(--navy); }
.cards a:hover { text-decoration: underline; }
.cform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .cform-grid { grid-template-columns: 1fr; } }

/* ---------- foto grande in alto ---------- */
.bighero { position: relative; margin-top: -82px; height: min(92vh, 880px); min-height: 600px; display: flex; align-items: flex-end; color: var(--white); background: var(--navy-deep); overflow: hidden; border-radius: 0 0 56px 56px; }
.bighero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bighero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,38,65,.35) 0%, rgba(17,38,65,.15) 35%, rgba(17,38,65,.82) 100%); }
.bighero .wrap { position: relative; z-index: 2; width: 100%; padding-bottom: 72px; }
.bighero .kicker { font-size: 16px; font-weight: 500; color: #BFD3F0; margin-bottom: 20px; letter-spacing: .01em; }
.bighero h1 { color: var(--white); font-weight: 300; font-size: clamp(46px, 7.2vw, 108px); line-height: 1.02; max-width: 16ch; }
.bighero h1 em { font-style: normal; color: #BFD3F0; }
.bighero p.sub { margin-top: 24px; max-width: 54ch; font-size: clamp(18px, 1.6vw, 22px); font-weight: 300; color: rgba(255,255,255,.9); }
.bighero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.bighero .btn-line { border-color: rgba(255,255,255,.55); color: var(--white); }
.bighero .btn-line:hover { background: rgba(255,255,255,.14); }
.bighero .btn-y { background: var(--white); color: var(--navy); border-color: var(--white); }
@media (max-width: 720px) { .bighero { margin-top: -72px; min-height: 560px; border-radius: 0 0 36px 36px; } .bighero .wrap { padding-bottom: 44px; } }

/* testo di apertura, stile editoriale */
.statement { max-width: 980px; }
.statement h2 { font-size: clamp(36px, 5vw, 72px); line-height: 1.04; margin-bottom: 28px; }
.statement p { font-size: clamp(18px, 1.6vw, 22px); font-weight: 300; color: var(--grey); max-width: 64ch; margin-bottom: 18px; }
.statement strong { font-weight: 500; color: var(--navy); }

/* due blocchi grandi con foto */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.split > a { position: relative; display: flex; align-items: flex-end; min-height: 520px; border-radius: 40px; overflow: hidden; color: var(--white); background: var(--navy-deep); }
.split > a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.split > a:hover img { transform: scale(1.04); }
.split > a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,38,65,0) 30%, rgba(17,38,65,.88) 100%); }
.split .in { position: relative; z-index: 2; padding: 40px; }
.split h3 { color: var(--white); font-weight: 300; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 12px; }
.split p { font-size: 17px; max-width: 40ch; color: rgba(255,255,255,.88); }
.split .go { display: inline-block; margin-top: 18px; font-weight: 500; border-bottom: 1px solid currentColor; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split > a { min-height: 420px; border-radius: 32px; } .split .in { padding: 28px; } }

/* quattro mestieri con foto */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tiles > a { position: relative; display: flex; align-items: flex-end; aspect-ratio: 3 / 4; border-radius: 32px; overflow: hidden; color: var(--white); background: var(--navy-deep); }
.tiles > a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.tiles > a:hover img { transform: scale(1.05); }
.tiles > a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,38,65,0) 40%, rgba(17,38,65,.9) 100%); }
.tiles .in { position: relative; z-index: 2; padding: 26px; }
.tiles b { display: block; font-weight: 300; font-size: 15px; color: #BFD3F0; margin-bottom: 6px; }
.tiles h3 { color: var(--white); font-weight: 400; font-size: 24px; line-height: 1.15; }
@media (max-width: 960px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } .tiles > a { aspect-ratio: 4 / 3; } }

/* foto larga a metà pagina */
.band { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: 40px; box-shadow: var(--shadow); }
@media (max-width: 720px) { .band { aspect-ratio: 4 / 3; border-radius: 28px; } }

/* sedi */
.sedi { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sedi > div { padding: 38px; background: var(--mist); border-radius: 36px; }
.sedi b { display: block; font-weight: 500; font-size: 14px; color: var(--blue); margin-bottom: 10px; }
.sedi h3 { font-weight: 300; font-size: 30px; letter-spacing: -.02em; margin-bottom: 10px; }
.sedi p { color: var(--grey); }
@media (max-width: 760px) { .sedi { grid-template-columns: 1fr; } .sedi > div { padding: 28px 24px; border-radius: 28px; } }

/* ---------- ciclo: quattro passi in fila ---------- */
.cycle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.cycle > div { padding: 34px 28px 10px 0; position: relative; }
.cycle > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.cycle .n { display: block; font-weight: 200; font-size: 64px; line-height: 1; letter-spacing: -.03em; color: var(--blue); margin-bottom: 18px; }
.cycle h3 { font-weight: 400; font-size: 26px; line-height: 1.12; letter-spacing: -.02em; margin-bottom: 10px; }
.cycle p { color: var(--grey); font-size: 16.5px; }
@media (max-width: 960px) { .cycle { grid-template-columns: 1fr 1fr; } .cycle > div:nth-child(3) { border-left: 0; padding-left: 0; } .cycle > div:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 20px; } }
@media (max-width: 560px) { .cycle { grid-template-columns: 1fr; } .cycle > div, .cycle > div + div { padding: 28px 0 8px; border-left: 0; } .cycle > div + div { border-top: 1px solid var(--line); } }

/* ---------- cantieri raccontati: foto grande e testo, alternati ---------- */
.story { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: center; }
.story + .story { margin-top: 96px; }
.story.rev { grid-template-columns: 1fr 1.25fr; }
.story.rev .story-img { order: 2; }
.story-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 40px; box-shadow: var(--shadow); }
.story .tag-s { display: inline-block; font-size: 14px; font-weight: 500; color: var(--blue); margin-bottom: 14px; }
.story h3 { font-weight: 300; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.06; letter-spacing: -.025em; margin-bottom: 18px; }
.story p { color: var(--grey); font-size: 18px; max-width: 46ch; }
@media (max-width: 900px) { .story, .story.rev { grid-template-columns: 1fr; gap: 28px; } .story.rev .story-img { order: 0; } .story + .story { margin-top: 64px; } .story-img img { border-radius: 28px; } }

/* elenco servizi su fondo scuro */
.ledger-dark .row { border-top-color: rgba(255,255,255,.18); }
.ledger-dark.ledger .row:last-child { border-bottom-color: rgba(255,255,255,.18); }
.ledger-dark .row:hover { background: rgba(255,255,255,.07); }
.ledger-dark .row-t { color: var(--white); }
.ledger-dark .row-s { color: rgba(255,255,255,.72); }
.ledger-dark .row-go { border-color: rgba(255,255,255,.5); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ledger-dark .row:hover .row-go { background-color: var(--white); border-color: var(--white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3556' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }

/* ---------- frase gigante ---------- */
.bigline { font-weight: 200; font-size: clamp(38px, 6.4vw, 96px); line-height: 1.04; letter-spacing: -.035em; color: var(--white); }
.bigline span { display: block; }
.bigline em { font-style: normal; color: #9FB8DB; }

/* ---------- chiamata finale con numero ---------- */
.callband { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; padding: 64px; background: var(--sky); border-radius: 48px; }
.callband h2 { margin-bottom: 12px; }
.callband p { color: var(--grey); max-width: 44ch; }
.callband a.num { font-weight: 200; font-size: clamp(40px, 6vw, 80px); line-height: 1; letter-spacing: -.035em; color: var(--navy); }
@media (max-width: 720px) { .callband { padding: 36px 26px; border-radius: 32px; } }

/* ---------- foto affiancate ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.duo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 32px; }
@media (max-width: 640px) { .duo { grid-template-columns: 1fr; } .duo img { border-radius: 24px; } }

/* ---------- capitoli della storia ---------- */
.chap { display: grid; grid-template-columns: 200px 1fr; gap: 40px; padding: 44px 0; border-top: 1px solid var(--line); }
.chap:last-child { border-bottom: 1px solid var(--line); }
.chap .yr { font-weight: 200; font-size: 72px; line-height: .95; letter-spacing: -.04em; color: var(--blue); }
.chap h3 { font-weight: 300; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 12px; }
.chap p { color: var(--grey); font-size: 18px; max-width: 58ch; }
@media (max-width: 760px) { .chap { grid-template-columns: 1fr; gap: 10px; padding: 32px 0; } .chap .yr { font-size: 56px; } }

/* ============================================================
   v6 — struttura ispirata ai siti di impresa: menu a tendina,
   hero con video, fascia scorrevole, blocchi numerati, contatori
   ============================================================ */

/* ---------- menu a tendina ---------- */
.menu .dd > button { background: none; font-weight: 400; }
.menu .dd > button:hover, .menu .dd.open > button { background: var(--mist); }
.menu .dd > button[aria-current="page"] { background: var(--sky); }
.dd-panel-sm { min-width: 280px; }
.dd-panel-sm a { padding: 11px 20px; }
.dd-panel-sm a[aria-current="page"] { background: var(--sky); }
.menu > a, .menu .dd > button { white-space: nowrap; }
.menu .dd { flex: none; }
@media (max-width: 1359px) { .bar-right .tel { display: none; } .menu > a, .menu .dd > button { padding: 10px 13px; } }
@media (max-width: 1180px) { .menu { display: none; } .burger { display: flex; } .bar-right { margin-left: auto; } }
.drawer-h { margin: 26px 0 2px; font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #9FB8DB; }
.drawer-list a.sub { font-size: 18px; padding: 13px 0 13px 14px; }

/* ---------- hero con video ---------- */
.bighero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eyebrow { display: block; margin-bottom: 14px; font-size: 15px; font-weight: 500; letter-spacing: .01em; color: var(--blue); }
.sec-ink .eyebrow, .callband .eyebrow { color: #9FB8DB; }

/* ---------- fascia scorrevole dei servizi ---------- */
.ticker { overflow: hidden; padding: 22px 0; border-bottom: 1px solid var(--line); background: var(--white); }
.ticker-track { display: flex; gap: 48px; width: max-content; animation: tick 46s linear infinite; }
.ticker span { white-space: nowrap; font-weight: 300; font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -.01em; color: var(--navy); }
.ticker span::after { content: '·'; margin-left: 48px; color: var(--blue); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- elenco servizi con freccia ---------- */
.svc-links { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; border-top: 1px solid var(--line); }
.svc-links a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 19px 4px; border-bottom: 1px solid var(--line); font-size: 19px; color: var(--navy); transition: padding .2s, background .2s; }
.svc-links a::after { content: '\2192'; color: var(--blue); }
.svc-links a:hover { padding-left: 14px; background: var(--mist); }
@media (max-width: 640px) { .svc-links { grid-template-columns: 1fr; } }

/* ---------- tre blocchi numerati ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trio > div { padding: 40px 36px; background: var(--white); border-radius: 36px; }
.trio .n { display: block; margin-bottom: 22px; font-weight: 200; font-size: 72px; line-height: 1; letter-spacing: -.04em; color: var(--blue); }
.trio h3 { margin-bottom: 12px; font-weight: 300; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.02em; }
.trio p { color: var(--grey); }
.trio ul { list-style: none; display: grid; gap: 4px; margin-top: 14px; font-size: 14px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
@media (max-width: 900px) { .trio { grid-template-columns: 1fr; } .trio > div { padding: 30px 26px; border-radius: 28px; } .trio .n { font-size: 56px; } }

/* ---------- contatori su fondo scuro ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.2); }
.stats > div { padding: 36px 28px 8px 0; }
.stats > div + div { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.2); }
.stats small { display: block; margin-bottom: 4px; font-size: 15px; color: #9FB8DB; }
.stats b { display: block; font-weight: 200; font-size: clamp(56px, 8vw, 120px); line-height: 1; letter-spacing: -.04em; color: var(--white); }
.stats span { display: block; margin-top: 12px; color: rgba(255,255,255,.8); }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; } .stats > div, .stats > div + div { padding: 28px 0 8px; border-left: 0; } .stats > div + div { border-top: 1px solid rgba(255,255,255,.2); } }

/* ---------- pagine di servizio ---------- */
.pimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 36px; box-shadow: var(--shadow); }
@media (max-width: 720px) { .pimg { border-radius: 28px; } }
.tags a { display: inline-block; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 14.5px; color: var(--navy); transition: background .2s; }
.tags a:hover { background: var(--sky); }
.cert-card { margin: 0; }
.cert-cap { display: block; padding: 14px 6px 0; font-size: 15px; line-height: 1.4; color: var(--grey); }
.cert-cap b { display: block; font-size: 16px; font-weight: 500; color: var(--navy); }
.vcard figcaption { padding: 14px 6px 0; font-size: 15px; color: var(--grey); }
.vcard video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 28px; background: var(--navy-deep); }
.vlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .vlist { grid-template-columns: 1fr; } }

/* ---------- footer a quattro colonne ---------- */
.foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }
.foot-grid p { color: rgba(255,255,255,.8); font-size: 16px; font-weight: 300; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-bottom: 32px; font-size: 15px; color: rgba(255,255,255,.8); }
.foot-nav a:hover { color: #BFD3F0; }
@media (max-width: 960px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px 32px; } }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; gap: 32px; } }