:root {
  --editorial-paper: #f7f6f2;
  --editorial-ink: #161616;
  --editorial-muted: #77736b;
  --editorial-line: #cfcac0;
  --editorial-dark: #1e1e1d;
  --editorial-ease: cubic-bezier(.22, 1, .36, 1);
}

body.home-page { background: var(--editorial-paper); }

/* A single high-contrast navigation treatment works over paper, photography
   and dark chapters without adding a coloured navigation bar. */
html body.home-page .site-header:not(.menu-open) {
  color: var(--editorial-ink) !important;
  mix-blend-mode: normal;
}

html body.home-page .site-header:not(.menu-open) :is(.brand, .brand-name, .brand-service, .nav-links, .nav-links a, .header-actions, .header-cta, .lang-btn, .nav-toggle) {
  color: inherit !important;
}

html body.home-page .site-header.on-dark:not(.menu-open) {
  color: #f2f0eb !important;
}

html body.home-page .site-header:not(.menu-open) .lang-btn.active,
html body.home-page .site-header.on-light:not(.menu-open) .lang-btn.active,
html body.home-page .site-header.on-dark:not(.menu-open) .lang-btn.active {
  color: inherit !important;
  background: transparent !important;
}

/* Hero inspired by the editorial study: one statement, controlled scale,
   useful information at the lower edge. */
html body.home-page .hero {
  min-height: 100svh;
  padding: clamp(105px, 14vh, 150px) var(--index-edge) clamp(26px, 4vh, 48px);
  overflow: hidden;
  color: var(--editorial-ink);
  background: var(--editorial-paper);
}

html body.home-page .hero-layout,
html body.home-page .hero-copy {
  width: 100%;
  min-height: calc(100svh - clamp(131px, 18vh, 198px));
}

html body.home-page .hero-copy {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: start;
}

html body.home-page .hero-title-block {
  align-self: center;
}

html body.home-page .hero-brand-label {
  display: block;
  margin: 0 0 22px;
  color: var(--editorial-muted);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html body.home-page .hero h1 {
  position: static;
  max-width: none;
  color: var(--editorial-ink);
  /* Stessa scala e spaziatura del riferimento editoriale; maiuscola iniziale
     (una vecchia regola in styles.css forzava tutto minuscolo). */
  font-size: clamp(55px, 9vw, 155px);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.065em;
  text-transform: none;
}

/* Seconda riga ("con intenzione.") a capo e rientrata, come nel riferimento.
   Vale sia per il titolo originale sia per quello ricostruito dall'intro. */
html body.home-page .hero h1 > span:not(.index-title-word) {
  display: block;
  margin-left: 12vw;
}

html body.home-page .hero h1 .index-title-word {
  display: inline;
  margin-left: 0;
  color: var(--editorial-ink);
}

html body.home-page .hero h1 .index-title-word:nth-of-type(4) {
  display: inline;
  margin-left: 0;
}

html body.home-page .hero-bottom-row {
  position: static;
  display: grid;
  grid-template-columns: 1.2fr .75fr 1.05fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  width: 100%;
  max-width: none;
  padding-top: 0;
  border-top: 0;
}

.home-page .hero-statement,
.home-page .hero-meta { margin: 0; }

.home-page .hero-statement {
  max-width: 34ch;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.4;
}

.home-page .hero-meta {
  max-width: 25ch;
  color: var(--editorial-muted);
  font-size: 12px;
  line-height: 1.5;
}

html body.home-page .hero-actions {
  justify-self: end;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

html body.home-page .hero :is(.primary-btn, .secondary-btn) {
  justify-content: flex-end;
  color: var(--editorial-ink);
  text-align: right;
}

.editorial-ticker {
  overflow: hidden;
  padding: 13px 0;
  border-top: 1px solid var(--editorial-line);
  border-bottom: 1px solid var(--editorial-line);
  color: #4d4a44;
  background: var(--editorial-paper);
}

.editorial-ticker-track {
  width: max-content;
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  animation: editorial-marquee 30s linear infinite;
}

@keyframes editorial-marquee { to { transform: translateX(-50%); } }

/* Services become a compact editorial table rather than another immersive
   full-screen chapter. */
html body.home-page .services-section {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(520px, 2fr);
  gap: clamp(70px, 10vw, 160px);
  padding: clamp(60px, 7vw, 100px) var(--index-edge) clamp(120px, 14vw, 190px);
  color: var(--editorial-ink);
  background: var(--editorial-paper);
}

html body.home-page .services-section .section-heading {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  background: transparent;
}

html body.home-page .services-section .section-kicker {
  margin: 0 0 clamp(46px, 6vw, 84px);
  color: var(--editorial-muted);
}

html body.home-page .services-section .section-heading h2 {
  max-width: 9ch;
  color: var(--editorial-ink);
  font-size: clamp(38px, 4.4vw, 68px);
  line-height: .98;
  letter-spacing: -.052em;
}

html body.home-page .services-list {
  align-self: start;
  color: var(--editorial-ink);
  background: transparent;
  border-top: 1px solid var(--editorial-line);
}

html body.home-page .service-card,
html body.home-page .service-card.reveal-left,
html body.home-page .service-card.reveal-right,
html body.home-page .service-card.reveal-left.active,
html body.home-page .service-card.reveal-right.active {
  min-height: 0;
  color: var(--editorial-ink);
  background: transparent;
  border-bottom: 1px solid var(--editorial-line);
  opacity: 1;
  transform: none;
}

html body.home-page .service-card::after,
html body.home-page .service-card::before { display: none; }

html body.home-page .service-card-body {
  display: grid;
  grid-template-columns: 42px minmax(150px, .8fr) minmax(230px, 1.2fr);
  grid-template-rows: auto;
  gap: 20px;
  align-items: baseline;
  min-height: 0;
  padding: 19px 0 44px;
  opacity: 1;
  filter: none;
  transform: none;
}

html body.home-page .service-num {
  grid-column: 1;
  grid-row: 1;
  color: var(--editorial-muted);
}

html body.home-page .service-num::after { display: none; }

html body.home-page .service-card h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: var(--editorial-ink);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 400;
  letter-spacing: -.035em;
  transform: none;
}

html body.home-page .service-card p {
  grid-column: 3;
  grid-row: 1;
  max-width: 36ch;
  color: var(--editorial-muted);
  font-size: 13px;
  line-height: 1.5;
  transform: none;
}

html body.home-page .service-card:is(.is-service-active, :hover, :focus-visible) .service-num {
  color: var(--editorial-muted);
}

html body.home-page .service-card:is(.is-service-active, :hover, :focus-visible) h3 {
  color: var(--editorial-ink);
  transform: none;
}

html body.home-page .service-card:is(.is-service-active, :hover, :focus-visible) p {
  color: var(--editorial-muted);
  transform: none;
}

/* The photograph reads as a magazine spread, with its caption underneath. */
html body.home-page .studio-visual {
  padding: 0 var(--index-edge) clamp(120px, 14vw, 190px);
  background: var(--editorial-paper);
}

html body.home-page .studio-visual-figure {
  display: block;
}

html body.home-page .studio-visual-media { height: 76svh; }

html body.home-page .studio-visual-caption {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 30px;
  align-items: start;
  padding-top: 24px;
}

html body.home-page .studio-visual-caption p {
  max-width: 19ch;
  margin: 0;
  font-size: clamp(25px, 3.2vw, 50px);
}

html body.home-page .studio-visual-caption small { text-align: right; }

/* The project archive stays on paper: screenshots provide the contrast while
   captions and metadata retain the quiet tone of a printed portfolio. */
html body.home-page .work-section {
  color: var(--editorial-ink);
  background: var(--editorial-paper);
  padding-bottom: clamp(42px, 5vw, 72px);
}

html body.home-page .work-section::before {
  content: none;
}

html body.home-page .work-section .section-kicker,
html body.home-page .work-section .concept-heading > p:not(.section-kicker),
html body.home-page .demo-screen-num,
html body.home-page .demo-screen-title span,
html body.home-page .demo-screen-try,
html body.home-page .demo-screen-try em,
html body.home-page .demo-note {
  color: var(--editorial-muted);
}

html body.home-page .work-section .concept-heading h2,
html body.home-page .demo-screen-title strong {
  color: var(--editorial-ink);
}

/* Selected work follows the twelve-column composition of the editorial
   reference: each project is one designed spread, not an image followed by a
   generic caption. */
html body.home-page .work-section .concept-heading {
  padding-bottom: 0;
  border-bottom: 0;
}

html body.home-page .demo-screens {
  display: block;
  margin-top: 0;
}

html body.home-page .demo-screen,
html body.home-page .demo-screen:nth-child(1),
html body.home-page .demo-screen:nth-child(2),
html body.home-page .demo-screen:nth-child(3) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 32px 0 clamp(96px, 10vw, 144px);
  border-bottom: 0;
}

html body.home-page .demo-screens > .demo-screen:last-child {
  padding-bottom: 0;
}

html body.home-page .demo-screen-link {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1.35;
}

html body.home-page .demo-screen:nth-child(1) .demo-screen-link {
  grid-column: 1 / 9;
}

html body.home-page .demo-screen:nth-child(2) .demo-screen-link {
  grid-column: 5 / 13;
  grid-row: 1;
  aspect-ratio: 1.3;
}

html body.home-page .demo-screen:nth-child(3) .demo-screen-link {
  grid-column: 2 / 8;
  aspect-ratio: .95;
}

html body.home-page .demo-screen-caption {
  display: block;
  align-self: end;
  padding: 0;
}

html body.home-page .demo-screen:nth-child(1) .demo-screen-caption {
  grid-column: 10 / 13;
}

html body.home-page .demo-screen:nth-child(2) .demo-screen-caption {
  grid-column: 1 / 4;
  grid-row: 1;
}

html body.home-page .demo-screen:nth-child(3) .demo-screen-caption {
  grid-column: 9 / 13;
}

html body.home-page .demo-screen-num {
  display: block;
  margin-bottom: clamp(42px, 6vw, 78px);
  font-size: 10px;
  letter-spacing: .1em;
}

html body.home-page .demo-screen-title strong {
  font-size: clamp(30px, 3.4vw, 54px);
  line-height: .98;
}

html body.home-page .demo-screen-title span {
  margin-top: 12px;
}

html body.home-page .demo-screen-try {
  margin-top: 25px;
  font-size: 13px;
  line-height: 1.5;
}

html body.home-page .demo-screen-try em {
  display: block;
  margin: 0 0 7px;
}

html body.home-page .demo-note {
  margin: 26px 0 0;
}

/* A dark manifesto provides the deliberate pause present in the reference. */
.home-page .studio-manifesto {
  display: grid;
  grid-template-columns: 1fr minmax(0, 3fr) 1fr;
  gap: clamp(30px, 5vw, 82px);
  align-items: center;
  min-height: 94svh;
  padding: clamp(110px, 13vw, 180px) var(--index-edge);
  color: #eee;
  background: var(--editorial-dark);
}

.home-page .studio-manifesto-label {
  align-self: start;
  color: #aaa;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.home-page .studio-manifesto h2 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(44px, 6.5vw, 108px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.06em;
}

.home-page .studio-manifesto h2 span { color: #777; }

.home-page .studio-manifesto p {
  align-self: end;
  max-width: 28ch;
  margin: 0;
  color: #bcbcbc;
  font-size: 13px;
  line-height: 1.55;
}

html body.home-page .faq-section { background: var(--editorial-paper); }

html body.home-page .contact-section {
  color: var(--editorial-ink);
  background: #dcd8cf;
}

html body.home-page .contact-section :is(.section-kicker, .contact-text p) { color: var(--editorial-muted); }
html body.home-page .contact-section :is(h2, input, textarea) { color: var(--editorial-ink); }
html body.home-page .contact-form :is(input, textarea) { border-color: rgba(22, 22, 22, .28); }
html body.home-page .contact-submit { color: #eee; background: var(--editorial-ink); }

/* Contact is one continuous editorial surface. The form no longer behaves as
   a dark card placed inside a light section. */
html body.home-page .contact-section {
  width: 100%;
  margin: 0;
  padding: clamp(110px, 13vw, 180px) var(--index-edge) clamp(90px, 10vw, 140px);
  border-top: 1px solid rgba(22, 22, 22, .18);
}

html body.home-page .contact-card,
html body.home-page .contact-content-col {
  color: var(--editorial-ink);
  background: transparent;
}

html body.home-page .contact-card {
  overflow: visible;
}

html body.home-page .contact-content-col {
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: clamp(72px, 10vw, 150px);
  align-items: start;
  width: 100%;
  min-height: 0;
  padding: 0;
}

html body.home-page .contact-text .section-kicker {
  margin-bottom: clamp(52px, 7vw, 94px);
}

html body.home-page .contact-text h2 {
  max-width: 11ch;
  margin: 0 0 28px;
  color: var(--editorial-ink);
  font-family: var(--font-sans);
  font-size: clamp(40px, 5vw, 74px);
  font-weight: 400;
  line-height: .97;
  letter-spacing: -.055em;
}

html body.home-page .contact-text > p:not(.section-kicker) {
  max-width: 38ch;
  color: var(--editorial-muted);
  font-size: 15px;
  line-height: 1.55;
}

html body.home-page .contact-form {
  padding: 0;
  border-top: 1px solid rgba(22, 22, 22, .35);
  background: transparent;
}

html body.home-page .contact-form-fields { gap: 0; }

html body.home-page .contact-form :is(input, textarea) {
  width: 100%;
  margin: 0;
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid rgba(22, 22, 22, .24);
  border-radius: 0;
  color: var(--editorial-ink);
  background: transparent;
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.35;
  box-shadow: none;
}

html body.home-page .contact-form textarea {
  min-height: 150px;
}

html body.home-page .contact-form :is(input, textarea)::placeholder {
  color: rgba(22, 22, 22, .42);
  opacity: 1;
}

html body.home-page .contact-form :is(input, textarea):focus {
  border-color: var(--editorial-ink);
  background: transparent;
  box-shadow: none;
}

html body.home-page .contact-submit {
  width: auto;
  min-width: 190px;
  min-height: 50px;
  margin: 28px 0 0 auto;
  padding: 0 24px;
  border: 1px solid var(--editorial-ink);
  border-radius: 0;
  color: #f2f0eb;
  background: var(--editorial-ink);
  justify-content: center;
}

html body.home-page .contact-submit:hover {
  color: var(--editorial-ink);
  border-color: var(--editorial-ink);
  background: transparent;
}

html body.home-page .contact-form-success {
  color: var(--editorial-ink);
  border-color: rgba(22, 22, 22, .3);
}

html body.home-page .contact-form-error {
  color: #8e3126;
  border-color: rgba(142, 49, 38, .4);
}

@media (max-width: 900px) {
  html body.home-page .services-section {
    display: block !important;
  }

  html body.home-page .services-section .section-heading { margin: 0 0 66px; }
  html body.home-page .studio-visual-caption { grid-template-columns: 1fr 2fr; }
  html body.home-page .studio-visual-caption small { grid-column: 2; text-align: left; }
  .home-page .studio-manifesto { grid-template-columns: 1fr; gap: 70px; }
  .home-page .studio-manifesto h2 { max-width: 11ch; }
  .home-page .studio-manifesto p { max-width: 34ch; }
}

@media (max-width: 760px) {
  html body.home-page .hero { padding-top: 112px; }
  html body.home-page .hero-layout,
  html body.home-page .hero-copy { min-height: calc(100svh - 142px); }
  html body.home-page .hero h1 {
    max-width: none;
    font-size: clamp(52px, 16vw, 92px);
    line-height: .86;
  }
  html body.home-page .hero h1 > span:not(.index-title-word) { margin-left: 0; }
  html body.home-page .hero-bottom-row {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .home-page .hero-meta { display: none; }
  html body.home-page .hero-actions { justify-self: stretch; }
  html body.home-page .hero :is(.primary-btn, .secondary-btn) { justify-content: flex-start; text-align: left; }

  html body.home-page .services-section { padding-block: 64px 120px; }
  html body.home-page .service-card-body {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px 14px;
    padding: 20px 0 34px;
  }
  html body.home-page .service-card h3 { grid-column: 2; }
  html body.home-page .service-card p { grid-column: 2; grid-row: 2; font-size: 14px; }

  html body.home-page .studio-visual { padding-bottom: 100px; }
  html body.home-page .studio-visual-media { height: 60svh; }
  html body.home-page .studio-visual-caption { grid-template-columns: 1fr; gap: 18px; }
  html body.home-page .studio-visual-caption :is(p, small) { grid-column: 1; text-align: left; }
  html body.home-page .studio-visual-caption p { margin: 18px 0; }

  .home-page .studio-manifesto { min-height: 86svh; padding-block: 94px; }
  .home-page .studio-manifesto h2 { font-size: clamp(44px, 12.5vw, 66px); }

  html body.home-page .work-section .concept-heading { padding-bottom: 0; }
  html body.home-page .demo-screen,
  html body.home-page .demo-screen:nth-child(1),
  html body.home-page .demo-screen:nth-child(2),
  html body.home-page .demo-screen:nth-child(3) {
    display: block;
    padding: 24px 0 82px;
  }
  html body.home-page .demo-screen-link,
  html body.home-page .demo-screen:nth-child(2) .demo-screen-link,
  html body.home-page .demo-screen:nth-child(3) .demo-screen-link {
    height: auto;
    aspect-ratio: 4 / 5;
  }
  html body.home-page .demo-screen-caption {
    margin-top: 22px;
    padding-left: 10vw;
  }
  html body.home-page .demo-screen-num { margin-bottom: 24px; }
  html body.home-page .demo-screen-title strong { font-size: clamp(30px, 10vw, 42px); }

  html body.home-page .contact-section { padding: 88px var(--index-edge) 76px; }
  html body.home-page .contact-content-col {
    grid-template-columns: 1fr;
    gap: 64px;
  }
  html body.home-page .contact-text .section-kicker { margin-bottom: 42px; }
  html body.home-page .contact-form textarea { min-height: 138px; }
  html body.home-page .contact-submit { width: 100%; margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-ticker-track { animation: none; }
}

/* Rifiniture dopo il confronto con il brief editoriale.
   - Processo: via i filetti verticali rimasti dalle vecchie card; resta la
     scalettatura, ma senza "scatole".
   - FAQ: la lista partiva spostata a destra con larghezza 100% e usciva
     dallo schermo; il "+" diventa un segno tipografico, senza cerchio.
   - Contatti: pulsante senza ombra.
   - Footer: margini allineati al resto della pagina. */
html body.home-page .process-card,
html body.home-page .process-card:not(:first-child),
html body.home-page .process-card:nth-child(n) {
  border-right: 0;
  border-left: 0;
  box-shadow: none;
}

/* Bordo bianco rimasto da quando Processo era su fondo scuro. */
html body.home-page .process-steps { border: 0; }

html body.home-page .faq-list { width: auto; }

html body.home-page .faq-list summary::after {
  top: 50%;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--editorial-muted, #77736b);
  font-size: 20px;
  font-weight: 300;
  transform: translateY(-50%);
}

html body.home-page .faq-list details[open] summary::after {
  color: var(--editorial-ink, #161616);
  background: none;
  transform: translateY(-50%) rotate(45deg);
}

html body.home-page .contact-submit,
html body.home-page .contact-submit:hover { box-shadow: none; }

html body.home-page .site-footer {
  padding-right: var(--index-edge);
  padding-left: var(--index-edge);
}

@media (max-width: 760px) {
  /* Servizi: il titolo teneva un'altezza minima di 702px (vecchio effetto
     sticky) e lasciava un vuoto enorme prima dell'elenco. */
  html body.home-page .services-section .section-heading {
    min-height: 0;
    height: auto;
    margin-bottom: 48px;
  }

  /* Demo: titolo e testo uno sotto l'altro, non in tre colonne strette. */
  html body.home-page #work .concept-heading {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  html body.home-page #work .concept-heading > * { grid-column: 1; }
}

/* Hero: la riga "Web design · Art direction · Sviluppo creativo" resta su
   una sola riga (era limitata a 25 caratteri e andava a capo). */
@media (min-width: 761px) {
  .home-page .hero-meta { max-width: none; white-space: nowrap; }
}

/* Header su telefono: con tre sole voci il menu a tendina non serve.
   Demo, Servizi, Contatti e lingua restano visibili come testo. */
@media (max-width: 760px) {
  html body.home-page .site-header:not(.menu-open) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 14px;
  }

  html body.home-page .site-header .nav-toggle { display: none; }

  html body.home-page .site-header:not(.menu-open) .nav-links {
    position: static;
    grid-column: 2;
    justify-self: end;
    display: flex;
    gap: 14px;
  }

  html body.home-page .site-header:not(.menu-open) .nav-half { display: contents; }

  html body.home-page .site-header:not(.menu-open) :is(.nav-links a, .header-cta) {
    display: inline-block;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 7px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: .02em;
  }

  html body.home-page .site-header:not(.menu-open) .header-actions {
    grid-column: 3;
    gap: 14px;
  }

  /* Stesso ordine del desktop: Contatti prima della lingua. */
  html body.home-page .site-header:not(.menu-open) .header-cta { order: 1; }
  html body.home-page .site-header:not(.menu-open) .lang-switch { order: 2; }
}

@media (max-width: 400px) {
  html body.home-page .site-header:not(.menu-open) .brand-service { display: none; }
}