/* components.css — property_clearance (sgomberi e svuoto locali).
   Impianto della categoria: bande a piena larghezza che si alternano fra carta, tinta calda e CAMPO
   SCURO pieno; angoli arrotondati; display grande in peso leggero; accento vivo che porta testo scuro.
   I colori vengono SOLO dai token: nessun valore letterale qui dentro. */

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--alt  { background: var(--grad-carta); }
.section--tint { background: var(--grad-tint); }
/* Banda scura: ridichiara gli alias di pagina su di sé, così i componenti condivisi che ereditano il
   colore restano leggibili invece di portarsi dietro quello della carta. */
.section--dark { background: var(--grad-brand); --fg: var(--on-dark-muted); color: var(--on-dark-muted); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--on-dark); }
.section--dark .lead { color: var(--on-dark-muted); }
.section--dark .eyebrow { color: var(--sage-light); }
.section--deep { background: var(--grad-deep); --fg: var(--on-dark-muted); color: var(--on-dark-muted); }
.section--deep h2, .section--deep h3 { color: var(--on-dark); }
.section--deep .lead { color: var(--on-dark-muted); }
.section--deep .eyebrow { color: var(--sage-light); }
.section-intro { margin-bottom: var(--space-7); }

/* ============================ bottoni ============================ */
/* ⛔ Sull'arancione pieno il testo è --ink (5.25). Il BIANCO è vietato: 3.29, sotto AA — ed è proprio
   ciò che il sito attuale del cliente fa oggi sul bottone del form (3.46). */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.85rem 1.5rem; border-radius: var(--radius-pill);
  font-weight: 500; font-size: var(--text-base); font-family: inherit;
  border: 0; cursor: pointer; text-align: center;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--grad-accento); color: var(--ink); }
.btn--primary:hover { background: var(--sage-light); color: var(--brand); }
.btn--soft { background: var(--sage-light); color: var(--brand); }
.btn--ghost { background: transparent; color: var(--on-dark); border: 1px solid rgba(255, 255, 255, 0.35); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
.btn--outline { background: transparent; color: var(--brand); border: 1px solid var(--line); }
.btn--outline:hover { background: var(--sage-tint); }

/* ============================ topbar + testata ============================ */
.topbar { background: var(--brand-dark); color: var(--on-dark-muted); font-size: var(--text-sm); }
.topbar__row { display: flex; gap: var(--space-5); justify-content: space-between; flex-wrap: wrap; padding-block: var(--space-2); }
.topbar__item { color: var(--on-dark-muted); }
.topbar__item:hover { color: var(--sage-light); }

.site-header { background: var(--brand); position: sticky; top: 0; z-index: 50; }
/* ⚠ Lo sticky è confinato dal wrapper .wp-block-template-part: senza `display: contents` la testata
   resta ferma e nessuna regola su .site-header lo rimedia. */
.wp-block-template-part:has(> .site-header) { display: contents; }
/* ⚠ Testata centrata verticalmente (regola 16): `align-items: center` sulla riga NON basta, perché nav e
   CTA portano un margine di blocco WP che li spinge sotto il centro. Serve anche l'azzeramento. */
.site-header__row { display: flex; align-items: center; gap: var(--space-5); padding-block: var(--space-4); }
.site-header__row > * { align-self: center; margin-block: 0; }
.site-header.is-shrunk .site-header__row { padding-block: var(--space-3); }

.wordmark { display: flex; align-items: center; gap: var(--space-3); color: var(--on-dark); }
/* ⚠ Un marchio SVG si misura sulla LARGHEZZA, mai sull'altezza: con una `height` fissa dentro un flex
   riducibile l'inchiostro si rimpicciolisce senza che nessuna misura del box lo denunci. */
.wordmark__mark { width: 64px; height: auto; flex: 0 0 auto; }
.wordmark__name { display: flex; flex-direction: column; line-height: 1.1; }
.wordmark__txt { font-size: 1.18rem; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.wordmark__tag { font-size: var(--text-sm); color: var(--on-dark-muted); letter-spacing: 0.02em; }

.header-tel { color: var(--on-dark); font-weight: 500; white-space: nowrap; }
.header-tel:hover { color: var(--sage-light); }
.site-header__cta { margin-left: var(--space-4); }

/* --- Nav desktop.
   ⚠ A parità di specificità VINCE WP: il CSS dei blocchi è iniettato DOPO il tema, quindi ogni regola
   sulle voci ha bisogno di un livello in più (.site-header davanti). --- */
/* ⚠⚠ RICOPIARE lo schema di WP dà un PAREGGIO, e il pareggio va a chi è dichiarato DOPO — cioè a WP,
   che inietta il CSS dei blocchi dopo il tema. Misurato: la voce usciva rgb(31,26,22) sul fondo
   rgb(58,30,16), contrasto 1.3, e axe la contava cinque volte azzerando il punteggio. Serve un livello
   IN PIÙ, e il colore va messo anche sullo `__label`, che è l'elemento che porta davvero i glifi. */
.site-header .site-nav .wp-block-navigation-item__content,
.site-header .site-nav .wp-block-navigation-item__label {
  font-weight: 400; font-size: 0.97rem; color: var(--on-dark); padding-block: var(--space-2);
}
/* La nav spinge sé stessa e tutto ciò che la segue a destra: su mobile è ciò che porta l'hamburger
   al bordo (misurato: restava a 44px dal margine). */
.site-header .site-nav { margin-left: auto; }
.site-header .site-nav .wp-block-navigation-item__content:hover { color: var(--sage-light); }
.site-header .site-nav .current-menu-item .wp-block-navigation-item__content {
  color: var(--sage-light); box-shadow: inset 0 -2px 0 var(--accent);
}
/* ⚠ Una ul di wp:navigation nasce flex-wrap:wrap: con una voce in più la quinta va orfana su due righe. */
@media (min-width: 900px) { .site-nav .wp-block-navigation__container { flex-wrap: nowrap; } }
/* In una riga contesa qualcuno deve cedere, e si DICHIARA chi: sotto i 1100px cede il telefono della
   testata (la barra fissa mobile porta già «Chiama»), sotto i 1024 cede la CTA. */
@media (max-width: 1099.98px) { .header-tel { display: none; } }
@media (max-width: 1023.98px) { .site-header__cta { display: none; } }

/* --- Menu mobile: overlay di wp:navigation (regola 15).
   ⚠ WP tiene l'overlay bianco con un selettore a specificità (0,4,0): si vince solo RICOPIANDONE lo
   schema, non aggiungendo una classe.
   ⚠⚠ E non basta allineare le voci: `__responsive-container-content` è largo quanto il viewport e nasce
   `justify-content: flex-end`. Il colpevole è il primo ANTENATO largo quanto lo schermo con
   l'allineamento contrario: si corregge lì, risalendo la catena. --- */
.wp-block-navigation__responsive-container.is-menu-open {
  height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* ⚠ Stesso pareggio, stesso rimedio: misurato, l'overlay aperto usciva BIANCO con le voci bianche —
   un pannello vuoto. Le classi a runtime sono `has-modal-open is-menu-open`, senza `.has-background`. */
.site-header .wp-block-navigation__responsive-container.is-menu-open:not(.has-background):not(.disable-default-overlay),
.site-header .wp-block-navigation__responsive-container.is-menu-open.has-background { background-color: var(--brand); }
/* ⚠ Il padding orizzontale va sul CONTENUTO: sull'overlay WP lo azzera e la regola sparisce senza traccia. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100%; align-items: stretch; justify-content: flex-start;
  padding-inline: var(--gutter); padding-bottom: 96px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
  width: 100%; align-items: stretch; gap: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
  width: 100%; text-align: left; font-weight: 500; font-size: 1.32rem; color: var(--on-dark);
  padding-block: var(--space-4); border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
/* ⚠ Il bottone di chiusura di WP nasce sotto i 44px e appiccicato al bordo: misura, area e posizione
   vanno dichiarate, sennò il bersaglio di tocco non è rispettato. */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close {
  top: var(--space-5); right: var(--gutter);
  width: 48px; height: 48px; padding: 10px;
  color: var(--on-dark); background: var(--brand-mid); border-radius: var(--radius-pill);
}
.wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
.wp-block-navigation__responsive-container-open { width: 48px; height: 48px; padding: 10px; color: var(--on-dark); }
.wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }

/* ============================ testata ============================ */
/* Il segno del verticale: pannello di testo sul campo scuro con la CARD DI PREVENTIVO accanto, e sotto
   una striscia di tre tessere. Nessuna singola fotografia regge la banda — è la scelta che rende il
   verticale usabile da clienti che non hanno (e non avranno) uno scatto di grande formato. */
/* ⚠ Le tessere chiudono la banda: senza il padding sotto restano a filo del bordo e sembrano
   tagliate. Sopra e sotto la stessa misura (regola 21: spaziatura simmetrica attorno alle immagini). */
.hero { background: var(--grad-brand); color: var(--on-dark-muted); padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.hero__row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.hero h1 { color: var(--on-dark); margin-bottom: var(--space-4); }
.hero .eyebrow { color: var(--sage-light); }
.hero__lead { color: var(--on-dark-muted); font-size: var(--text-md); max-width: 52ch; }
.hero__checks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); font-size: var(--text-sm); }
.hero__checks li { padding-left: 1.4rem; position: relative; color: var(--on-dark-muted); }
.hero__checks li::before { content: "\2713"; position: absolute; left: 0; color: var(--sage-light); }
.hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }

/* Tre tessere a rapporto FISSO: è la cornice a decidere la forma, non la sorgente. 3:2 orizzontale,
   perché a 1200 di contenitore ogni tessera rende 374x250 css = 748x500 su schermo 2x, cioè SOTTO gli
   800x534 nativi delle foto di questo mestiere: nessun ingrandimento. */
.hero__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: clamp(2.2rem, 1rem + 3vw, 3.4rem); }
.hero__tiles figure { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: var(--tile-ratio); background: var(--brand-mid); }
.hero__tiles img { width: 100%; height: 100%; object-fit: cover; }
/* Variante DESIGN: senza tre foto idonee le tessere restano campi di colore pieno. Mai una foto finta. */
.hero--design .hero__tiles figure { background: var(--brand-mid); }
.hero--design .hero__tiles figure:nth-child(2) { background: var(--accent-dark); }
.hero--design .hero__tiles figure:nth-child(3) { background: var(--sage); }

/* --- La card di preventivo: l'innesto di conversione della categoria. --- */
.quote { background: var(--paper); color: var(--ink); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-md); }
.quote h2 { font-size: var(--text-lg); margin-bottom: var(--space-1); color: var(--brand); }
.quote__note { font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: var(--space-4); }
.rating { display: flex; align-items: center; gap: var(--space-2); background: var(--sage-tint); border-radius: var(--radius-pill); padding: 0.4rem 0.85rem; font-size: var(--text-sm); color: var(--brand); margin-bottom: var(--space-4); width: fit-content; }
.rating__stars { color: var(--accent-ink); letter-spacing: 0.06em; }

/* ============================ form (placeholder e mu-plugin condividono le classi) ============================ */
.field { display: block; margin-bottom: var(--space-3); }
.field span, .field > label { display: block; font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-1); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.68rem 0.8rem; border: var(--border); border-radius: var(--field-radius);
  font-family: inherit; font-size: var(--text-base); background: var(--paper); color: var(--ink);
}
.field textarea { min-height: 8rem; resize: vertical; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
/* ⚠ `.consent` è un flex: un <a> dentro il testo diventerebbe un flex-item a sé e spezzerebbe la riga.
   Tutto il testo, link incluso, va in UN solo <span>. */
.consent { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--ink-muted); margin: var(--space-2) 0 var(--space-4); }
.consent a { color: var(--accent-ink); text-decoration: underline; }
.contact-form .btn { width: 100%; justify-content: center; }

/* ============================ nastro ============================ */

/* ============================ perché sceglierci ============================ */
.reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.reason { background: var(--paper); border: var(--border); border-radius: var(--radius); padding: var(--space-5); }
.reason h3 { margin-bottom: var(--space-2); color: var(--brand); }
.reason p { font-size: 0.96rem; color: var(--ink-muted); }

/* ============================ chi siamo ============================ */
.about__grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(1.6rem, 1rem + 2vw, 3rem); align-items: center; }
.about__text p { color: var(--ink-muted); margin-bottom: var(--space-4); }
.about__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 2; position: relative; }
@media (min-width: 900px) { .about__media { min-height: 420px; } }
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__media img { width: 100%; height: auto; }

/* ============================ i quattro passi ============================ */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.step { background: var(--paper); border: var(--border); border-radius: var(--radius); padding: var(--space-5); }
.step__n { font-size: var(--text-sm); font-weight: 600; color: var(--accent-ink); letter-spacing: 0.1em; margin-bottom: var(--space-3); }
.step h3 { margin-bottom: var(--space-2); color: var(--brand); }
.step p { font-size: 0.96rem; color: var(--ink-muted); }

/* ============================ i servizi (schede che linkano DIRITTO alla pagina) ============================ */
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.svc { background: var(--paper); border: var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.svc:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.svc__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); height: 100%; }
.svc h3 { color: var(--brand); }
.svc p { font-size: 0.96rem; color: var(--ink-muted); margin: 0; }
.svc__more { color: var(--accent-ink); font-weight: 500; font-size: 0.95rem; margin-top: auto; padding-top: var(--space-4); }
.svc:hover .svc__more { text-decoration: underline; }

/* ============================ cosa portiamo via (la banda che la categoria pretende) ============================ */
/* Le voci a spunta raggruppate per ambiente: è la sezione che risponde alla domanda vera del visitatore
   — «prendete anche questo?» — e nessun altro verticale della flotta ce l'ha. */
.haul__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.haul h3 { font-size: var(--text-base); margin-bottom: var(--space-3); color: var(--sage-light); }
.haul ul { font-size: 0.96rem; }
.haul li { padding-left: 1.4rem; position: relative; margin-bottom: var(--space-1); }
.haul li::before { content: "\2713"; position: absolute; left: 0; color: var(--sage-light); }
.haul__note { margin-top: var(--space-6); }
/* Le foto dell'usato entrano nel loro rapporto NATIVO 3:4: sono scatti verticali di magazzino, e in una
   cornice orizzontale un taglio panoramico decapiterebbe il soggetto. */
.haul__photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-6); }
.haul__photos figure { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: var(--usato-ratio); }
.haul__photos img { width: 100%; height: 100%; object-fit: cover; }

/* ============================ recensioni ============================ */
.reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.review { background: var(--paper); border: var(--border); border-radius: var(--radius); padding: var(--space-5); }
.review__name { font-weight: 600; color: var(--brand); display: block; margin-bottom: var(--space-2); font-size: 0.95rem; }
.review p { font-size: 0.96rem; color: var(--ink-muted); }

/* ============================ fascia contatti (AGISCE) ============================ */
/* Un MESTIERE per blocco: questa banda agisce, il piè orienta. Non si ripetono qui indirizzo e orari. */
.contact-band { background: var(--grad-deep); color: var(--on-dark-muted); padding-block: var(--section-y); }
.contact-band h2 { color: var(--on-dark); }
.contact-band .eyebrow { color: var(--sage-light); }
.contact-band .lead { color: var(--on-dark-muted); }
.contact-band__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: var(--space-6); align-items: center; }
.contact-band__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ============================ pagine interne ============================ */
/* ⚠ La page-head NON riusa la size della testata: è un'intestazione di pagina, non un hero — col
   --text-3xl «occupa mezza schermata», ed è condivisa da tutte le pagine interne. */
.page-head { background: var(--grad-brand); color: var(--on-dark-muted); padding-block: clamp(2.5rem, 1.6rem + 2.4vw, 4rem); }
.page-head h1 { font-size: var(--text-2xl); color: var(--on-dark); }
.page-head .eyebrow { color: var(--sage-light); }
.page-head .lead { color: var(--on-dark-muted); margin-top: var(--space-3); }
.section--tight { padding-block: clamp(2.4rem, 1.6rem + 2vw, 3.6rem); }

/* Contatti a 2 colonne (regola 19): a sinistra il form, a destra i recapiti su fondo CHIARO — la
   .contact-band è stilizzata per fondo scuro e riusarla qui invertirebbe i colori. */
.contact-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.6rem, 1rem + 2vw, 3rem); align-items: start; }
.contact-info { background: var(--surface); border: var(--border); border-radius: var(--radius); padding: var(--space-5); }
.contact-info dl { margin: 0; }
.contact-info dt { font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-top: var(--space-4); }
.contact-info dt:first-child { margin-top: 0; }
.contact-info dd { margin: var(--space-1) 0 0; color: var(--ink); }
.contact-info a { color: var(--accent-ink); }
.hours { font-size: 0.96rem; }
.hours li { display: flex; justify-content: space-between; gap: var(--space-4); }

.prose h2 { margin-top: var(--space-7); margin-bottom: var(--space-3); color: var(--brand); }
.prose h3 { margin-top: var(--space-6); margin-bottom: var(--space-2); color: var(--brand); }
.prose p { margin-bottom: var(--space-4); color: var(--ink-muted); }
.prose ul { margin-bottom: var(--space-4); }
.prose li { padding-left: 1.4rem; position: relative; margin-bottom: var(--space-2); color: var(--ink-muted); }
.prose li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent-ink); }

/* ============================ piè (ORIENTA: è la mappa del sito) ============================ */
.site-footer { background: linear-gradient(180deg, #2E170C 0%, var(--brand-dark) 100%); color: var(--on-dark-muted); padding-block: var(--space-9) var(--space-5); font-size: 0.96rem; }
.site-footer h3 { font-size: var(--text-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark); margin-bottom: var(--space-4); font-family: var(--font-body); font-weight: 500; }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr; gap: var(--space-7); }
/* La colonna centrale è la MAPPA del sito: centrata regge l'asse del piè invece di galleggiare. */
.site-footer__grid > :nth-child(2) { justify-self: center; text-align: center; }
.site-footer li { margin-bottom: var(--space-1); }
.site-footer a:hover { color: var(--sage-light); }
/* ⚠ Tre elementi in riga: `justify-content: space-between` NON centra il mediano, lo mette dove capita.
   Il marchio Dgitaly va al centro davvero, e per farlo serve una griglia a tre colonne. */
.site-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: var(--space-7); padding-top: var(--space-4);
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3) var(--space-5); align-items: center;
  font-size: var(--text-sm);
}
.site-footer__legal > :last-child { justify-self: end; }
@media (max-width: 699.98px) {
  .site-footer__legal { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .site-footer__legal > :last-child { justify-self: center; }
}
.site-footer__legal a { text-decoration: underline; }
.powered { display: inline-flex; align-items: center; gap: var(--space-1); }
/* ⚠ dgitaly.svg è un marchio QUADRATO senza scritta: il testo «Dgitaly» è nostro e il logo non si deforma. */
.powered img { width: 20px; height: 20px; }

/* ============================ barra CTA mobile ============================ */
.cta-bar { display: none; }
@media (max-width: 767.98px) {
  .cta-bar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-2);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--brand); padding: var(--space-3) var(--gutter);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .cta-bar .btn { justify-content: center; padding-block: 0.7rem; font-size: 0.94rem; }
  /* La barra sta su fondo scuro: il bottone «chiaro» del preventivo deve leggersi lì, non sulla carta. */
  .cta-bar .btn--outline { color: var(--on-dark); border-color: rgba(255,255,255,.4); }
  /* La barra fissa copre il fondo pagina: il piè cede lo spazio che le serve. */
  .site-footer { padding-bottom: calc(var(--space-9) + 3.5rem); }
}

/* ============================ 404 ============================ */
.notfound { padding-block: var(--space-10); text-align: center; }
.notfound h1 { color: var(--brand); }
.notfound p { margin: var(--space-4) auto var(--space-6); color: var(--ink-muted); max-width: 46ch; }

/* ============================ spazzata responsive ============================ */
@media (max-width: 1023.98px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .haul__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899.98px) {
  .hero__row { grid-template-columns: 1fr; }
  .about__grid, .contact-cols, .contact-band__grid { grid-template-columns: 1fr; }
  .reasons, .haul__cols { grid-template-columns: 1fr; }
  .svc-grid, .reviews { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .contact-band__cta { justify-content: flex-start; }
}
@media (max-width: 599.98px) {
  .hero__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* La terza tessera esce di scena invece di stringersi sotto la misura utile della sorgente. */
  .hero__tiles figure:nth-child(3) { display: none; }
  .steps { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; }
}

/* Griglia delle foto nelle pagine di progetto (Gallery, schede servizio).
   ⚠ Deve stare in una CLASSE e non in uno `style` inline del post_content: un inline batte ogni media
   query, e a 390px la griglia resterebbe a quattro colonne mandando la pagina in overflow (misurato). */
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-6); }
.photo-grid figure { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: var(--usato-ratio); }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; }
.page-media { border-radius: var(--radius); overflow: hidden; margin-bottom: var(--space-6); }
.page-media img { width: 100%; height: auto; }
@media (max-width: 899.98px) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .photo-grid { grid-template-columns: 1fr; } }

/* ⚠ In una riga contesa QUALCUNO deve cedere, e si dichiara CHI. Il nome di queste ditte è lungo
   («Cristal Art Di Occhiuto Andrea»): con `white-space: nowrap` il marchio non cede nulla e spinge
   l'hamburger FUORI dallo schermo — misurato a 390px, scrollWidth 415 con il bottone a right=415.
   Sotto i 600px cedono il marchio (che va a capo e rimpicciolisce il segno) e la sua didascalia. */
@media (max-width: 599.98px) {
  .site-header__row { gap: var(--space-3); }
  .wordmark { min-width: 0; }
  .wordmark__mark { width: 44px; }
  .wordmark__txt { white-space: normal; font-size: 1rem; line-height: 1.15; }
  .wordmark__tag { display: none; }
  .topbar__row { gap: var(--space-2); font-size: 0.8rem; }
}

/* ============================ testata di pagina con fotografia ============================ */
/* Le pagine locali erano prosa nuda: senza un'immagine grande la pagina non ha un punto d'ingresso per
   l'occhio, e la testata resta la banda più importante solo se ha qualcosa da mostrare. */
.page-head--media { padding-block: clamp(2.5rem, 1.6rem + 2.4vw, 4rem); }
/* ⚠ La colonna della figura pesa PIÙ del testo: misurata a 1.05/0.95 la fotografia usciva 523x392,
   il 15.8% della schermata — sotto la soglia oltre la quale un'immagine fa impatto invece che arredo. */
.page-head__grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(1.6rem, 1rem + 2.4vw, 3.5rem); align-items: center; }
.page-head__fig { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 2; }
.page-head__fig img { width: 100%; height: 100%; object-fit: cover; }
.page-head--media .hero__cta { margin-top: var(--space-5); }

/* Striscia fotografica a piena larghezza fra due bande di testo: spezza il muro di prosa e dà alla
   pagina l'immagine di grande formato che le manca.
   ⚠ L'altezza è contenuta apposta: la sorgente è 800px e una banda alta la ingrandirebbe. */
.band-photo { position: relative; overflow: hidden; }
.band-photo__fig { margin: 0; height: clamp(220px, 26vw, 380px); }
.band-photo__fig img { width: 100%; height: 100%; object-fit: cover; }

/* Rimandi alle altre pagine locali: nessuna pagina dev'essere un vicolo cieco. */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.chip {
  display: inline-flex; align-items: center; padding: 0.6rem 1.1rem;
  border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--paper);
  color: var(--accent-ink); font-size: 0.94rem; font-weight: 500;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}
.chip:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); transform: translateY(-2px); }

@media (max-width: 899.98px) {
  .page-head__grid { grid-template-columns: 1fr; }
  /* ⚠⚠ `min-height` con `aspect-ratio` DETTA LA LARGHEZZA: 400px di altezza a 3:2 fanno 600px di larghezza,
     e su uno schermo da 390 la pagina sbordava di 234px — su diciassette pagine. L'altezza minima serve
     solo dove c'è spazio: sotto i 900px si azzera e comanda il rapporto. */
  .page-head__fig { aspect-ratio: 16 / 9; min-height: 0; }
  .about__media { min-height: 0; aspect-ratio: 16 / 9; }
}

/* Schede-servizio CON fotografia: la pagina Servizi era una griglia di sole parole. */
.svc-grid--media .svc__fig { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.svc-grid--media .svc__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.svc-grid--media .svc:hover .svc__fig img { transform: scale(1.05); }
.page-head--media .hero__checks li { color: var(--on-dark-muted); }
.page-head--media .hero__checks { margin-top: var(--space-5); }

/* Velo in fondo alle fotografie di banda: lega la foto alla banda che la segue invece di tagliarla netto. */
.band-photo::after, .page-head__fig::after, .hero__tiles figure::after {
  content: ""; position: absolute; inset: 0; background: var(--grad-velo); pointer-events: none;
}
.band-photo__fig, .page-head__fig, .hero__tiles figure { position: relative; }

/* ============================ movimento ============================ */

/* Sollevamento alla sorvolata: percepibile, mai teatrale. Le proprietà si ELENCANO — la scorciatoia
   `transition:` sostituirebbe quella che l'elemento ha già e spegnerebbe gli altri effetti. */
.reason, .step, .review, .svc, .haul__photos figure, .usato figure, .hero__tiles figure, .contact-info {
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
.reason:hover, .step:hover, .review:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--sage-light); }
.svc:hover { transform: translateY(-4px); }
.haul__photos figure, .usato figure, .hero__tiles figure, .photo-grid figure { overflow: hidden; }
.haul__photos img, .usato img, .hero__tiles img, .photo-grid img, .about__media img, .band-photo__fig img {
  transition: transform 700ms var(--ease);
}
.haul__photos figure:hover img, .usato figure:hover img, .hero__tiles figure:hover img,
.photo-grid figure:hover img, .about__media:hover img { transform: scale(1.045); }
/* Il numero del passo si accende quando la scheda viene sorvolata: un segno, non un'animazione. */
.step__n { transition: color 260ms var(--ease), letter-spacing 260ms var(--ease); }
.step:hover .step__n { color: var(--accent); letter-spacing: 0.16em; }
.svc__more, .chip { transition: transform 220ms var(--ease), color 220ms var(--ease), background-color 220ms var(--ease), border-color 220ms var(--ease); }
.svc:hover .svc__more { transform: translateX(4px); }
/* Filetto che cresce sotto l'occhiello: dà ritmo alle intestazioni senza toccare i glifi. */
.section-intro .eyebrow::after {
  content: ""; display: block; width: 0; height: 2px; margin-top: .45rem;
  background: var(--accent); transition: width 700ms var(--ease);
}
.section-intro.is-visible .eyebrow::after { width: 56px; }
@media (prefers-reduced-motion: reduce) {
  .section-intro .eyebrow::after { width: 56px; transition: none; }
}

/* Terna fotografica: tre scene affiancate, abbastanza grandi da contare come immagine e non come
   miniatura. ⚠ La sorgente è 800px: a tre colonne su 1200 ogni cella è 384css = 768@2x, ancora sotto. */
.photo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.photo-row figure { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; position: relative; }
.photo-row img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.photo-row figure:hover img { transform: scale(1.045); }
@media (max-width: 899.98px) { .photo-row { grid-template-columns: 1fr 1fr; } .photo-row figure:nth-child(3) { display: none; } }
@media (max-width: 479.98px) { .photo-row { grid-template-columns: 1fr; } .photo-row figure:nth-child(3) { display: block; } }

/* Le immagini di banda diventano grandi davvero: sotto un quinto di schermata una fotografia non fa
   impatto, fa decorazione. */
.band-photo__fig { height: clamp(280px, 34vw, 520px); }
@media (min-width: 900px) { .page-head__fig { aspect-ratio: 3 / 2; min-height: 400px; } }
.hero__tiles figure { aspect-ratio: 4 / 3; }

/* Griglia della Gallery a TRE colonne: a quattro le celle scendevano sotto il quinto di schermata e una
   galleria di miniature non è una galleria. */
@media (min-width: 900px) { .photo-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }

/* Le schede su fondo carta prendono la superficie calda: distingue la tessera dalla banda che la ospita
   invece di lasciarla galleggiare su un bianco identico al suo. */
.reason, .step { background: var(--surface); }
.section--alt .reason, .section--alt .step, .section--alt .svc { background: var(--paper); }
.review { background: var(--paper); }
.section--alt .review { background: var(--surface); }