/* 29 September — a different pace for each chapter, with the original copy. */
:root { --chapter-ease: cubic-bezier(.16,1,.3,1); }

/* Restored service story: original copy and sticky left-hand ecosystem. */
#servizi { background: #080808; color: #fff; scroll-margin-top: 80px; }
#servizi h2 em { color: #a7a7ae; }
#servizi .story-visual { align-self: start; }
#servizi .luminous-rail { display: none !important; }
#servizi .story-step { scroll-margin-top: 96px; }
#servizi .story-step > p:not(.service-name) { font-size: 16px; }
#servizi .story-tabs button { min-height: 44px; }
#servizi .story-step.is-active { animation: service-copy-arrive 650ms var(--chapter-ease) both; }
@keyframes service-copy-arrive {
 from { opacity: .35; transform: translateX(24px); }
 to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 900px) {
 #servizi .story-visual { padding-top: 12px; }
 #servizi .story-tabs { gap: 0; }
 #servizi .story-tabs button { padding-inline: 9px; font-size: 10px; }
 #servizi .story-step { padding: 16px 0 44px; }
 #servizi .story-step h3 { margin-bottom: 22px; }
 #servizi .system-screen { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
 #servizi .story-step { animation: none !important; }
}

/* Diagnosis: default document flow, enhanced to a stage only when it fits. */
.diagnosis-scrolly-track { height: auto; }
.diagnosis-scrolly-stage { position: relative; top: auto; height: auto; padding: 80px 0; }
.diagnosis-scrolly-stage > .wrap { width: min(1100px, calc(100% - 80px)); }
.diagnosis-intro { grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.diagnosis-intro h2 { font-size: clamp(32px,3.5vw,48px); }
.diagnosis-intro h2 em { display: inline-block; color: #ff5b16 !important; }
.diagnosis-intro p { font-size: 16px; max-width: 45ch; }
.diagnosis-stage-layout { grid-template-columns: .85fr 1.25fr; gap: 64px; margin-top: 42px; align-items: start; }
.diagnosis-indicators { gap: 8px; }
.diagnosis-step-btn { padding: 18px 20px; min-height: 64px; opacity: 1 !important; will-change: auto; }
.diag-num { color: #61616b; flex: 0 0 auto; min-width: 2ch; white-space: nowrap; background: transparent; padding: 0; opacity: 1; }
.diag-label { color: #52525b; font-size: 15px; opacity: 1; }
.diagnosis-step-btn.is-active { transform: none; box-shadow: none !important; border-color: #ff5b1640 !important; background: #fff5f0 !important; }
.diag-glow-bar { display: none; }
.diagnosis-path-line { display: none; }
.diagnosis-panels-stack { min-height: 0; display: grid; gap: 48px; position: relative; }
.diagnosis-panel { position: relative; visibility: visible; opacity: 1; pointer-events: auto; transform: none; filter: none; will-change: auto; transition: none; scroll-margin-top: 110px; }
.diagnosis-panel h3 { font-size: clamp(27px,2.65vw,36px); line-height: 1.18; max-width: 24ch; }
.diagnosis-panel > p { font-size: 16px; line-height: 1.7; margin-top: 18px; }
.diagnosis-solution-box { padding: 20px 22px; margin-top: 24px; border: 0 !important; border-radius: 12px !important; background: #fff5ef !important; }
.diagnosis-solution-box p { font-size: 15px; line-height: 1.65; }
[data-diagnosis-layout='pinned'] { height: 270svh; }
[data-diagnosis-layout='pinned'] .diagnosis-scrolly-stage { position: sticky; top: 80px; height: calc(100svh - 80px); padding: 36px 0; }
[data-diagnosis-layout='pinned'] .diagnosis-panels-stack { height: var(--diagnosis-panel-height); display: block; }
[data-diagnosis-layout='pinned'] .diagnosis-panel { position: absolute; inset: 0 0 auto; opacity: 0; visibility: hidden; pointer-events: none; }
[data-diagnosis-layout='pinned'] .diagnosis-panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
[data-diagnosis-layout='pinned'] .diagnosis-stage-layout { align-items: center; }

/* Before / after: two concise, related surfaces. */
#confronto { padding: 88px 0 96px; }
#confronto > .wrap { max-width: 1040px; }
#confronto .section-intro h2 { font-size: clamp(34px,4vw,56px); }
#confronto .comparison-grid { margin-top: 40px; border-radius: 14px; overflow: visible; border: 0; gap: 20px; background: transparent; }
#confronto .comparison-grid article { padding: 32px; border: 0; border-radius: 14px; box-shadow: none; }
#confronto .comparison-grid .after { background: #171719; }
#confronto .comparison-grid h3 { font-size: clamp(24px,2.25vw,30px); margin: 0 0 24px; line-height: 1.2; }
#confronto .comparison-grid li { padding: 14px 0; font-size: 15px; }
#confronto .comparison-grid li:last-child { padding-bottom: 0; }
#confronto .comparison-grid .after li { color: #c3c3ca; }

/* Collaboration models enter from opposite directions; text stays frontal. */
#perche-noi { overflow: clip; }
#perche-noi .editorial-comparison { max-width: 1100px; }
#perche-noi .editorial-row { grid-template-columns: .9fr 1.65fr; gap: 64px; padding-block: 40px; }
#perche-noi .ed-content p { max-width: 67ch; }
#perche-noi .ed-highlight { border-top-color: #ff5b1655; }
#perche-noi .ed-highlight .ed-subject h3 { color: #ff5b16; }
.home-work-card .home-project-visual { overflow: hidden; }

/* A single black surface throughout the works page, including its header. */
html:has(body.works-motion), body.works-motion { background: #000 !important; }
.works-motion main, .works-motion .attention-intro,
.works-motion .attention-summary, .works-motion .portfolio-feed,
.works-motion .feed-showcase-stage, .works-motion .stage-scene,
.works-motion .site-header, .works-motion .site-header.scrolled,
.works-motion footer, .works-motion .footer { background: #000 !important; }
.works-motion .attention-heading h1, .works-motion .attention-heading h2 { background: transparent !important; }
.works-motion .attention-intro { min-height: min(820px, 100svh); display: flex; align-items: center; justify-content: center; }
.works-motion .attention-intro > .wrap { flex: 0 1 auto; }
.works-motion .attention-summary { padding: 64px 0 80px !important; }
.works-motion .summary-stage { gap: 44px; }
.works-motion .summary-stage > p { line-height: 1.4; }
.works-motion .summary-stage > p + p { color: #ceced3; }
.works-motion .summary-stage > a { color: #ff5b16; font-size: 18px; }
.works-motion .attention-summary.is-story-summary { height: 230svh; padding: 0 !important; }
.works-motion .is-story-summary .summary-stage { top: 80px; height: calc(100svh - 80px); gap: 52px; padding-block: 40px; }
.works-motion .is-story-summary .summary-stage > p:first-child {
 opacity: calc(var(--summary-one,1) * (1 - var(--summary-exit,0)));
 transform: translateY(calc((1 - var(--summary-one,1)) * 110px - var(--summary-exit,0) * 140px));
 clip-path: inset(0 0 calc((1 - var(--summary-one,1)) * 100%) 0);
}
.works-motion .is-story-summary .summary-stage > p + p {
 opacity: calc(var(--summary-two,1) * (1 - var(--summary-exit,0)));
 transform: translateY(calc((1 - var(--summary-two,1)) * 110px - var(--summary-exit,0) * 140px));
 clip-path: inset(0 0 calc((1 - var(--summary-two,1)) * 100%) 0);
}
.works-motion .is-story-summary .summary-stage > a {
 opacity: calc(var(--summary-cta,1) * (1 - var(--summary-exit,0)));
 transform: translateY(calc((1 - var(--summary-cta,1)) * 70px - var(--summary-exit,0) * 140px));
 clip-path: inset(0 0 calc((1 - var(--summary-cta,1)) * 100%) 0);
}

/* About: same brand, weight, spacing and contrast as the main experience. */
.about-page { --orange: #ff5b16; font-family: Montserrat, sans-serif; }
.about-page .about-section { padding: 150px 0 100px !important; }
.about-page .about-reading { max-width: 1100px; }
.about-page .about-heading { font-size: clamp(38px,4.6vw,64px) !important; font-weight: 600; letter-spacing: -.035em; max-width: 920px; margin-bottom: 40px !important; line-height: 1.1 !important; }
.about-page .about-heading .text-orange { color: #ff5b16; }
.about-page .about-copy { max-width: 73ch; margin-bottom: 56px !important; }
.about-page .about-copy p { font-size: 17px; line-height: 1.8; color: #52525b; }
.about-page .formula-card { background: #101011 !important; padding: 42px; border: 0 !important; border-radius: 14px; margin-bottom: 64px !important; will-change: auto; }
.about-page .formula-title { display: block; font-family: Montserrat, sans-serif; font-weight: 600; font-size: clamp(27px,3vw,38px); color: #fff; line-height: 1.2; max-width: 26ch; margin: 0 0 24px; }
.about-page .formula-body { color: #ceced3 !important; font-size: 16px !important; line-height: 1.75; max-width: 74ch; }
.about-page .about-competencies { gap: 32px !important; }
.about-page .about-competencies > div { padding: 28px 0 !important; border: 0 !important; border-top: 1px solid #dcdcdf !important; border-radius: 0 !important; background: transparent !important; }
.about-page .about-competencies p { font-size: 16px !important; line-height: 1.75; color: #52525b !important; }
.about-page .about-competencies h4 { font-size: 24px !important; font-weight: 600; margin: 10px 0 16px !important; }
.about-page .about-competencies > div > div { color: #52525b !important; line-height: 1.5; }

@media (max-width: 900px) {
 .diagnosis-scrolly-stage { padding: 60px 0; }
 .diagnosis-scrolly-stage > .wrap { width: calc(100% - 40px); }
 .diagnosis-intro { grid-template-columns: 1fr; gap: 22px; margin: 0; }
 .diagnosis-intro h2 { font-size: clamp(30px,5vw,40px); }
 .diagnosis-intro p { font-size: 16px; }
 .diagnosis-stage-layout { display: flex; flex-direction: column !important; gap: 36px; margin-top: 32px; }
 .diagnosis-indicators { grid-template-columns: 1fr 1fr; gap: 8px; }
 .diagnosis-step-btn { padding: 14px 12px; flex-direction: row; text-align: left; justify-content: start; align-items: start; gap: 10px; }
 .diagnosis-step-btn .diag-label { display: block; font-size: 12px; line-height: 1.5; }
 .diagnosis-panel h3 { font-size: 28px; max-width: 24ch; }
 .diagnosis-panel > p, .diagnosis-solution-box p { font-size: 16px; }
 .diagnosis-panel > p { line-height: 1.7; }
 .diagnosis-panels-stack { gap: 56px; }
 .diagnosis-solution-box { padding: 20px; margin-top: 20px; }
 #perche-noi .editorial-row { grid-template-columns: 1fr; gap: 20px; padding-block: 32px; }
 #confronto { padding-block: 64px 72px; }
 #confronto .comparison-grid { margin-top: 32px; gap: 16px !important; }
 #confronto .comparison-grid article { padding: 26px; }
 .about-page .about-competencies { grid-template-columns: 1fr !important; gap: 16px !important; }
}
@media (max-width: 650px) {
 .works-motion .attention-intro { min-height: 570px; padding: 116px 0 44px !important; }
 .works-motion .attention-intro .attention-heading { height: 380px; }
 .works-motion .attention-summary.is-story-summary { height: 220svh; }
 .works-motion .is-story-summary .summary-stage { top: 72px; height: calc(100svh - 72px); gap: 32px; padding-block: 28px; }
 .works-motion .summary-stage > p { font-size: 25px !important; line-height: 1.4; }
 .works-motion .summary-stage > p + p { font-size: 21px !important; }
 .works-motion .summary-stage > a { font-size: 17px; }
 .about-page .about-section { padding: 120px 0 68px !important; }
 .about-page .about-heading { font-size: clamp(34px,9vw,46px) !important; margin-bottom: 30px !important; }
 .about-page .about-copy p { font-size: 16px; line-height: 1.75; }
 .about-page .formula-card { padding: 28px 24px !important; margin-bottom: 44px !important; }
 .about-page .formula-title { font-size: 28px !important; }
 .about-page .about-cta .btn { white-space: normal; text-align: center; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
 .works-motion .attention-summary { height: auto !important; padding: 48px 0 64px !important; }
 .works-motion .summary-stage { position: static !important; height: auto !important; }
 .works-motion .summary-stage > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}