/* Revisione 4.1: contrasti dell'header, raccordi, percorso dei servizi e firma finale.
   Tutti i colori derivano dalle variabili del marchio in style.css. */
:root {
  --cut-h: 48px;
  --cut-run: 80px;
  --stone-solid: color-mix(in srgb, var(--sand) 20%, var(--white));
  --plane-shadow: rgba(11, 11, 11, .06);
}

/* La fascia intera cambia tono; il blu del marchio resta quello originale. */
.site-header { --header-bg: var(--white); --header-text: var(--ink); --header-accent: var(--blue); --header-line: var(--line); background: var(--header-bg); color: var(--header-text); border-color: var(--header-line); transition: background .24s, color .24s, border-color .24s, box-shadow .24s; }
.site-header[data-tone='dark'] { --header-bg: var(--ink); --header-text: var(--white); --header-accent: var(--sand); --header-line: var(--line-dark); }
.brand { display: grid; }
.brand img { grid-area: 1 / 1; transition: opacity .24s; }
.brand-negative { opacity: 0; }
.site-header[data-tone='dark'] .brand-normal { opacity: 0; }
.site-header[data-tone='dark'] .brand-negative { opacity: 1; }
.site-nav a { color: var(--header-text); }
.site-nav a:hover, .site-nav a.is-active { color: var(--header-accent); }
.site-nav .nav-contact { border-color: var(--header-text); }
.site-nav .nav-contact:hover, .site-nav .nav-contact.is-active { color: var(--header-bg); background: var(--header-text); }
.site-header :focus-visible { outline-color: var(--header-accent); }
.scroll-progress { background: var(--header-accent); }

/* Raccordi a gradino: il disegno è una parte della sezione, non una fascia aggiunta. */
.section-cut { position: relative; }
.section-cut::before { content: ''; position: absolute; z-index: 0; pointer-events: none; inset: calc(-1 * var(--cut-h) + 1px) 0 auto; height: var(--cut-h); background: var(--cut-color); }
.cut-left::before { clip-path: polygon(0 0, 30% 0, calc(30% + var(--cut-run)) 100%, 100% 100%, 0 100%); }
.cut-right::before { clip-path: polygon(0 100%, calc(70% - var(--cut-run)) 100%, 70% 0, 100% 0, 100% 100%); }
.hero { padding-bottom: var(--cut-h); }
.about { --cut-color: var(--ink); padding-bottom: calc(88px + var(--cut-h)); }
.services { --cut-color: var(--white); padding-bottom: calc(88px + var(--cut-h)); }
.contact { --cut-color: var(--stone-solid); background: var(--stone-solid); border-top: 0; padding-bottom: calc(88px + var(--cut-h)); }
.site-footer { --cut-color: var(--footer-black); }

/* Lettura luminosa: bianco dal 70% al 100%, sempre leggibile sul nero. */
.about-copy > .reading-light { color: var(--white); }
.reading-word { display: inline-block; }
.reading-light.is-reading .reading-word { opacity: var(--word-light, .7); transition: opacity .22s linear; }
@media (prefers-reduced-motion: reduce) {
  .reading-light.is-reading .reading-word { opacity: 1; transition: none; }
}

/* Un percorso continuo: la scena resta visibile mentre cambiano i servizi in lettura. */
.journey-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); align-items: start; column-gap: clamp(32px, 4vw, 64px); row-gap: 32px; margin-top: 0; }
.journey-stories { grid-column: 1; grid-row: 2; min-width: 0; }
.journey-scene { position: sticky; top: calc(var(--header-h) + 24px); grid-column: 2; grid-row: 1 / span 2; min-width: 0; margin: 0; padding: 24px; border: 1px solid var(--line); border-radius: 20px 20px 4px 20px; background: var(--white); box-shadow: 0 24px 64px var(--plane-shadow); }
.journey-caption { min-height: 72px; }
.journey-hint { display: block; margin-bottom: 8px; font-size: .65rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.journey-caption-stack { display: grid; }
.journey-caption-label { grid-area: 1 / 1; font: 600 clamp(1rem, 1.5vw, 1.22rem)/1.35 var(--display); letter-spacing: -.02em; visibility: hidden; opacity: 0; transform: translateY(5px); transition: opacity .25s, transform .25s; }
.journey-caption-label.is-current { visibility: visible; opacity: 1; transform: none; }
/* Macchina dei servizi: pannelli in prospettiva, spessori metallici e cablaggio solidale. */
.journey-stage { position: relative; height: min(49svh, 420px); margin: 0 0 24px; overflow: hidden; border-radius: 14px; background: radial-gradient(ellipse at 32% 12%, color-mix(in srgb, var(--muted) 42%, var(--ink)), var(--ink) 120%); }
.machine-fallback { display: block; width: 100%; height: 100%; }
.machine-fallback img { width: 100%; height: 100%; object-fit: cover; }
.machine-fit { display: none; position: absolute; left: 50%; top: 50%; width: 760px; height: 540px; margin: -270px 0 0 -380px; perspective: 1000px; transform: scale(var(--machine-scale, .7)); transform-origin: center; }
.machine-ready .machine-fit { display: block; }
.machine-ready .machine-fallback { visibility: hidden; }
.machine-world { position: absolute; left: 380px; top: 328px; width: 0; height: 0; transform: rotateX(-24deg); transform-style: preserve-3d; }
.machine-plinth { position: absolute; left: -290px; top: -250px; width: 580px; height: 500px; transform: translateY(26px) rotateX(90deg); border: 1px solid color-mix(in srgb, var(--muted) 65%, var(--ink)); border-radius: 44px; background: linear-gradient(135deg, color-mix(in srgb, var(--muted) 33%, var(--ink)), var(--ink)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--muted) 27%, var(--ink)); }
.machine-plinth.plinth-bottom { transform: translateY(38px) rotateX(90deg); background: var(--ink); border-color: var(--ink); box-shadow: 0 12px 22px rgba(11, 11, 11, .5); }
.machine-bearing { position: absolute; left: -234px; top: -234px; width: 468px; height: 468px; border: 1px solid rgba(201, 184, 158, .25); border-radius: 50%; transform: translateY(24px) rotateX(90deg); background: repeating-conic-gradient(from 0deg, rgba(201, 184, 158, .2) 0deg 1deg, rgba(11, 11, 11, 0) 1deg 8deg); mask-image: radial-gradient(circle, rgba(11, 11, 11, 0) 66%, var(--ink) 66%); }
.machine-rotor { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.machine-cables { position: absolute; left: -260px; top: -260px; overflow: visible; transform: translateY(18px) rotateX(90deg); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cable-shadow { stroke: var(--ink); stroke-width: 9px; }
.cable-blue { stroke: var(--blue); stroke-width: 5px; }
.cable-light { stroke: var(--white); stroke-width: 1px; opacity: .42; }
.machine-hub { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.machine-hub span { position: absolute; left: -27px; top: -27px; width: 54px; height: 54px; border: 2px solid var(--muted); border-radius: 50%; background: linear-gradient(135deg, var(--muted), var(--ink) 68%); transform: translateY(15px) rotateX(90deg); }
.machine-hub span:nth-child(2) { transform: translateY(10px) rotateX(90deg); }
.machine-hub span:nth-child(3) { transform: translateY(5px) rotateX(90deg); }
.machine-hub span:nth-child(4) { transform: rotateX(90deg); }
.machine-hub span:last-child { transform: translateY(-5px) rotateX(90deg); border: 4px solid var(--muted); background: var(--blue); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .38); }
.machine-screen { position: absolute; left: -105px; top: -224px; width: 210px; height: 210px; transform-style: preserve-3d; }
.screen-rim { position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(125deg, var(--muted), var(--white) 32%, var(--muted) 34%, var(--ink) 75%); transform: translateZ(-10px); }
.screen-rim:nth-child(2) { transform: translateZ(-8px); }
.screen-rim:nth-child(3) { transform: translateZ(-6px); }
.screen-rim:nth-child(4) { transform: translateZ(-4px); }
.screen-rim:nth-child(5) { transform: translateZ(-2px); }
.screen-face { position: absolute; inset: 0; overflow: hidden; border: 6px solid color-mix(in srgb, var(--sand) 25%, var(--white)); border-radius: 14px; background: var(--stone-solid); transform: translateZ(0); box-shadow: inset 0 0 0 1px var(--white), 0 0 0 1px rgba(255, 255, 255, .4); filter: brightness(var(--screen-light, 1)); }
.screen-face::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(130deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 52%, rgba(11, 11, 11, .04)); }
.screen-texture { position: absolute; top: 0; left: 0; width: 200%; height: 200%; max-width: none; object-fit: fill; }
.screen-texture.texture-1 { left: -100%; }
.screen-texture.texture-2 { top: -100%; }
.screen-texture.texture-3 { top: -100%; left: -100%; }
.screen-stand { position: absolute; width: 42px; height: 35px; left: 84px; top: 208px; background: linear-gradient(90deg, var(--ink), var(--muted) 42%, var(--ink)); border-radius: 0 0 6px 6px; transform: translateZ(-6px); }
.screen-signal { position: absolute; right: 98px; bottom: -29px; width: 14px; height: 11px; border: 2px solid var(--muted); background: var(--blue); transform: translateZ(2px); }
.machine-screen.is-current .screen-face { border-bottom-color: var(--blue); }
.machine-screen.is-current .screen-signal { border-color: var(--sand); background: var(--white); }
.machine.is-turning .machine-screen, .machine.is-turning .machine-rotor { will-change: transform; }
.journey-jumps { display: flex; justify-content: space-between; gap: 12px; max-width: 280px; margin: 0 auto 20px; }
.journey-jumps a { display: grid; place-items: center; min-width: 48px; min-height: 48px; border: 1px solid var(--line); border-radius: 8px; color: var(--blue); text-decoration: none; transition: color .2s, background .2s, border-color .2s; }
.journey-jumps a:hover { border-color: var(--blue); }
.journey-jumps a[aria-current='location'] { color: var(--white); background: var(--blue); border-color: var(--blue); }
.journey-progress { height: 2px; overflow: hidden; background: var(--line); }
.journey-progress span { display: block; width: 100%; height: 100%; transform-origin: left; transform: scaleX(var(--journey-progress, 0)); background: var(--blue); }
.journey-step { position: relative; display: flex; align-items: center; min-height: clamp(440px, 67svh, 620px); padding: 48px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 32px); }
.journey-step::before { content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .45s ease; }
.journey-step.is-current::before { transform: scaleX(1); }
.journey-step:last-child { border-bottom: 1px solid var(--line); }
.journey-copy { width: 100%; }
.journey-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 22px; border: 1px solid var(--line); border-radius: 12px; color: var(--blue); background: var(--white); transition: background .3s, color .3s, border-color .3s; }
.journey-step.is-current .journey-icon { background: var(--blue); color: var(--white); border-color: var(--blue); }
.journey-step h3 { margin: 0 0 20px; font-size: clamp(1.8rem, 2.8vw, 2.5rem); line-height: 1.13; letter-spacing: -.045em; font-weight: 600; }
.journey-step p { margin-bottom: 24px; max-width: 54ch; color: var(--muted); font-size: 1rem; line-height: 1.7; }
/* Descrizioni complete: apertura in evidenza, seguito leggibile e altezza naturale. */
.journey-description { display: grid; gap: 14px; max-width: 54ch; margin-bottom: 24px; }
.journey-step .journey-description p { margin: 0; max-width: none; }
.journey-step .journey-lead { color: var(--ink); font-weight: 500; }
.journey-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 28px; padding: 0; }
.journey-tags li { border: 1px solid var(--line); border-radius: 24px; padding: 5px 12px; font-size: .7rem; color: var(--muted); }
.journey-contact { display: inline-flex; align-items: center; gap: 28px; min-height: 44px; color: var(--blue); font-size: .88rem; font-weight: 600; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.journey-contact:hover svg { transform: translate(2px, -2px); }
.journey-contact svg { transition: transform .2s; }

/* I tagli cadono nei vuoti trasparenti del PNG: simbolo / LEVEL / UP.
   A 75% (x=1132.5 su 1510) non attraversano più la E, evitando la giunzione visibile. */
.site-footer { overflow: visible; padding-top: 60px; }
.footer-logo-composition { position: relative; display: block; width: 232px; aspect-ratio: 1510 / 373; }
.footer-logo-composition .footer-logo-part { position: absolute; inset: 0; width: 100%; height: 100%; }
.footer-logo-part.part-mark { clip-path: inset(0 80% 0 0); }
.footer-logo-part.part-middle { clip-path: inset(0 25% 0 20%); }
.footer-logo-part.part-end { clip-path: inset(0 0 0 75%); }
/* La finestra sporge solo sopra: la decorazione non crea spazio dopo il footer. */
.footer-mark-window { position: absolute; z-index: 0; inset: -115px 0 0; overflow: hidden; pointer-events: none; }
.footer-monogram { width: clamp(330px, 31vw, 465px); top: 0; right: max(-78px, calc((100vw - 1440px) / 2)); opacity: .82; }
.footer-top { min-height: 72px; }
/* Tre dati essenziali su una riga elastica, senza lo spazio della vecchia anagrafica. */
.footer-top { padding-bottom: 28px; }
.company-data { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; max-width: none; margin: 24px 150px 20px 0; font-size: .84rem; line-height: 1.65; }
.company-data p { margin: 0; }
.company-data p:first-child { color: var(--white); font-weight: 600; }
.company-data p + p { padding-left: 24px; border-left: 1px solid var(--line-dark); }
.footer-bottom .back-top { border: 1px solid var(--line-dark); padding: 6px 14px; border-radius: 4px; }
.footer-motion .footer-logo-part { transition: transform .85s cubic-bezier(.22, 1, .36, 1), opacity .6s; }
.footer-motion .part-middle { transition-delay: .12s; }
.footer-motion .part-end { transition-delay: .22s; }
.footer-motion .footer-monogram { transition: clip-path 1.2s cubic-bezier(.22, 1, .36, 1), transform 1.1s cubic-bezier(.22, 1, .36, 1), opacity .75s; }
.footer-motion:not(.is-assembled) .part-mark { opacity: 0; transform: translate(-12px, 16px); }
.footer-motion:not(.is-assembled) .part-middle { opacity: 0; transform: translateY(14px); }
.footer-motion:not(.is-assembled) .part-end { opacity: 0; transform: translate(18px, -8px); }
.footer-motion:not(.is-assembled) .footer-monogram { clip-path: inset(100% 0 0); transform: translateY(32px); opacity: 0; }
.footer-motion.is-assembled .footer-monogram { clip-path: inset(0); transform: none; }

@media (max-width: 1023px) {
  .journey-layout { gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .journey-scene { padding: 20px; }
  .journey-step h3 { font-size: 2rem; }
  .journey-step p { font-size: 1rem; }
}
@media (max-width: 767px) {
  :root { --cut-h: 28px; --cut-run: 46px; }
  .js-ready .menu-toggle { background: var(--header-bg); color: var(--header-text); border-color: var(--header-line); }
  .js-ready .site-nav { background: var(--header-bg); border-color: var(--header-line); }
  .about, .services, .contact { padding-bottom: calc(72px + var(--cut-h)); }
  .journey-layout { display: block; margin-top: 0; }
  .journey-scene { display: grid; grid-template-columns: minmax(0, 1fr) 160px; align-items: center; gap: 0 8px; position: sticky; z-index: 5; top: var(--header-h); height: 180px; margin: 0 -24px; padding: 12px 24px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  .journey-caption { grid-column: 1; grid-row: 1; min-height: 0; }
  .journey-hint { font-size: .56rem; letter-spacing: .05em; }
  .journey-caption-label { font-size: .96rem; line-height: 1.35; }
  .journey-stage { grid-column: 2; grid-row: 1; margin: 0; }
  .journey-stage { height: 155px; width: 160px; border-radius: 10px; }
  .journey-jumps { display: none; }
  .journey-progress { grid-column: 1 / -1; align-self: end; width: 100%; }
  .journey-step { min-height: max(360px, 55svh); padding-block: 36px; scroll-margin-top: calc(var(--header-h) + 196px); }
  .journey-step:first-child { border-top: 0; }
  .journey-step::before { display: none; }
  .journey-icon { width: 48px; height: 48px; margin-bottom: 20px; border-radius: 9px; }
  .journey-icon svg { width: 27px; height: 27px; }
  .journey-step h3 { margin-bottom: 16px; font-size: clamp(1.75rem, 6.5vw, 2.4rem); }
  .journey-step p { font-size: 1rem; margin-bottom: 20px; }
  .journey-description { gap: 12px; margin-bottom: 20px; }
  .journey-tags { margin-bottom: 16px; }
  .site-footer { padding-top: 60px; }
  .footer-logo-composition { width: 220px; }
  .footer-mark-window { top: -68px; }
  .footer-monogram { width: 225px; top: 0; bottom: auto; right: -80px; opacity: .22; }
  .footer-top { position: relative; }
  .company-data { display: grid; gap: 8px; margin: 24px 0 20px; }
  .company-data p + p { padding-left: 0; border-left: 0; }
}
@media (max-width: 374px) {
  .journey-scene { grid-template-columns: minmax(0, 1fr) 138px; }
  .journey-stage { width: 138px; }
}
@media (max-height: 560px) {
  .journey-scene { position: relative; top: auto; }
  .journey-step { scroll-margin-top: calc(var(--header-h) + 20px); }
}
@media (prefers-reduced-motion: reduce) {
  .machine.is-turning .machine-screen, .machine.is-turning .machine-rotor { will-change: auto; }
  .footer-motion .footer-logo-part, .footer-motion .footer-monogram { transform: none !important; clip-path: none; }
  .footer-motion .footer-logo-part { opacity: 1; }
  .footer-motion .part-mark { clip-path: inset(0 80% 0 0); }
  .footer-motion .part-middle { clip-path: inset(0 25% 0 20%); }
  .footer-motion .part-end { clip-path: inset(0 0 0 75%); }
}

/* Introduzione compatta: titolo a sinistra, scena dinamica nella colonna destra. */
.services .section-intro { display: block; grid-column: 1; grid-row: 1; margin: 0; padding: 0; }
.services .services-intro-copy { display: block; }
.services .section-intro h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.12; margin: 0; }
.journey-step:first-child { min-height: 0; padding-top: 36px; padding-bottom: 52px; }
@media (max-width: 767px) {
  .services .section-intro { margin-bottom: 32px; }
  .services .section-intro h2 { font-size: clamp(1.85rem, 7.8vw, 2.8rem); }
  .journey-step:first-child { padding-block: 36px; }
}