/* =========================================================
   Studio Legale Avv. Giovanni Palmiero — foglio di stile
   Sito one-page. Nessuna dipendenza da build tool: modificabile a mano.

   FONT
   -------------------------------------------------------------
   "Belgan Aesthetic" (titoli, nomi, sottotitoli) è un font a pagamento
   (INKSUN): i file sono ospitati localmente in fonts/ e caricati con
   @font-face qui sotto. La versione gratuita del font è solo per uso
   personale — verificare di avere la licenza commerciale per l'uso su
   un sito professionale come questo.

   REGOLE DEL SISTEMA VISIVO (da rispettare in ogni modifica futura)
   -------------------------------------------------------------
   COLORE
   - Sfondo scuro (--color-black, #25252c): header, hero, CTA di
     chiusura, footer. Fa anche da colore del testo sulle sezioni
     chiare (--color-ink).
   - Oro: due varianti con ruoli distinti.
       --color-gold (#BB9662) → solo su fondo SCURO (bottone, hover
         nel footer, focus sull'header/hero). Su fondo chiaro non ha
         contrasto sufficiente per il testo.
       --color-gold-text (#87663A) → oro per il TESTO su fondo chiaro
         (titoli delle aree di pratica, nomi delle sedi, link inline).
         Stesso carattere caldo, ma leggibile (AA: 5.2:1 su bianco).
     In ogni caso l'oro va usato con parsimonia: mai come sfondo
     esteso, mai per il testo corrente/paragrafi.
   - Il resto è neutro: bianco (sfondo), grigio (testo secondario).

   TIPOGRAFIA
   - "Belgan Aesthetic" (display) solo per testi brevi: nome in hero,
     titoli di sezione, sottotitoli delle aree di pratica, nomi delle
     sedi, didascalie delle foto.
   - "Inter" per tutto il resto: paragrafi, menu, pulsanti, form,
     indirizzi, footer.
   - Le etichette brevi (regione della sede, "Telefono/E-Mail/PEC",
     titoli di colonna nel footer) usano un unico stile condiviso:
     maiuscoletto Inter, piccolo e spaziato (.eyebrow-like, sezione 3).

   LAYOUT
   - Estremamente essenziale: niente card, niente bordi decorativi,
     niente divisori, niente numerazioni. Solo spazio bianco, tipografia
     e — dove serve — le foto (angoli molto arrotondati, nessun bordo).
   - Pagina unica a sezioni ad ancora (#chi-sono, #aree-di-pratica,
     #sedi, #contatti). Ogni sezione breve: un'informazione va detta
     una sola volta.
   - Misure e spaziature passano dalle variabili in :root (scala
     --space-*, --radius-*): non inserire valori "a occhio".

   ACCESSIBILITÀ
   - Ogni elemento interattivo ha uno stato :focus-visible visibile
     (sezione 6). Non rimuoverlo.
   - I rapporti di contrasto dei colori qui sotto rispettano WCAG AA.
     Cambiando un colore, riverificare.
   ========================================================= */

/* Indice:
   1. Font (@font-face) e variabili
   2. Reset di base
   3. Tipografia
   4. Layout / contenitori
   5. Header e navigazione
   6. Bottoni, link e stati di focus
   7. Hero
   8. Sezioni di contenuto (chi sono, citazione)
   9. Aree di pratica
   10. Sedi
   11. Placeholder immagine
   12. Contatti diretti (telefono, email)
   13. Mappe
   14. Footer
   15. Utility
   16. Responsive
   17. Preferenze utente (motion ridotto) e stampa
*/

/* 1. Font (@font-face) e variabili --------------------------------- */
/* font-display: swap → il testo resta leggibile con il font di sistema
   mentre il .ttf (150 KB) viene scaricato, invece di restare invisibile. */
@font-face {
  font-family: "Belgan Aesthetic";
  src: url("../fonts/BelganAesthetic-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Belgan Aesthetic";
  src: url("../fonts/BelganAesthetic-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --color-black: #25252c;
  --color-ink: var(--color-black);
  --color-ink-soft: #63636a;

  --color-paper: #ffffff;
  --color-placeholder-bg: #dedcd7;
  --color-line: #e7e6e3;
  --color-line-dark: rgba(255, 255, 255, 0.12);

  --color-gold: #bb9662;        /* solo su fondo scuro */
  --color-gold-text: #87663a;   /* oro leggibile su fondo chiaro (AA) */
  --color-section-alt: #f8f3ea; /* tinta pallida derivata dall'oro, per separare le sezioni */

  --font-display: "Belgan Aesthetic", Georgia, serif;
  --font-sans: "Inter", "Segoe UI", Arial, sans-serif;

  --container-width: 1240px;
  --header-height: 80px;

  /* Scala di spaziatura: ogni margine/padding del sito nasce da qui. */
  --space-2xs: 6px;
  --space-xs: 12px;
  --space-sm: 20px;
  --space-md: 32px;
  --space-lg: 56px;
  --space-xl: 88px;
  --space-2xl: 104px;

  --radius: 6px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --shadow-sm: 0 8px 20px rgba(37, 37, 44, 0.12);
  --shadow-cta: 0 10px 24px rgba(37, 37, 44, 0.22);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.22s var(--ease);
}

/* 2. Reset di base ------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background-color: var(--color-paper);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(187, 150, 98, 0.2);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
}

::selection {
  background: rgba(187, 150, 98, 0.28);
  color: var(--color-ink);
}

/* 3. Tipografia ---------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.2;
  margin: 0 0 0.4em;
  text-wrap: balance; /* evita righe orfane nei titoli */
}

h1 {
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
}

h2 {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  letter-spacing: 0.005em;
  margin-bottom: 0.85em;
}

/* "Belgan Aesthetic" è un display sottile: a corpo piccolo ha bisogno
   di un filo di spaziatura in più per restare leggibile. */
h3 {
  font-style: italic;
  font-weight: 500;
  color: var(--color-gold-text);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  margin-bottom: 0.4em;
}

p {
  margin: 0 0 1.2em;
  text-wrap: pretty;
}

.lead {
  font-size: 1.1rem;
  color: var(--color-ink-soft);
}

/* Stile unico per tutte le etichette brevi del sito. */
.office-region,
.contact-method-label,
.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.text-link {
  color: var(--color-gold-text);
  border-bottom: 1px solid rgba(135, 102, 58, 0.4);
  transition: color var(--transition), border-color var(--transition);
}

.text-link:hover {
  color: var(--color-ink);
  border-bottom-color: currentColor;
}

/* 4. Layout / contenitori ------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

main {
  display: block;
}

section {
  padding: var(--space-2xl) 0;
  scroll-margin-top: calc(var(--header-height) + var(--space-2xs));
}

.max-prose {
  max-width: 720px;
}

/* Misura di lettura: ~64 caratteri per riga, l'intervallo in cui
   l'occhio ritrova la riga successiva senza fatica. */
.max-prose > p,
.practice-item p {
  max-width: 64ch;
}

.section-alt {
  background: var(--color-section-alt);
}

/* 5. Header e navigazione -------------------------------------------- */
.site-header {
  background: var(--color-black);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
}

.logo {
  display: inline-block;
  padding: var(--space-2xs) 16px;
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}

.logo:hover {
  border-color: rgba(187, 150, 98, 0.55);
}

.logo-title {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-paper);
}

.main-nav {
  display: flex;
}

.main-nav > ul {
  display: flex;
  gap: 30px;
  align-items: center;
}

.main-nav a {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  padding: 8px 2px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}

.main-nav a:hover,
.main-nav a.active {
  border-bottom-color: var(--color-gold);
  color: var(--color-paper);
}

/* 6. Bottoni, link e stati di focus ---------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  padding: 13px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition),
    box-shadow var(--transition);
}

.btn-primary {
  background: var(--color-gold);
  color: var(--color-black);
  border-radius: 999px;
}

.btn-primary:hover {
  background: #cbab7c;
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta);
}

/* Azione secondaria: contorno, non pieno, così non compete con la
   chiamata all'azione principale in oro. */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  background: transparent;
  color: var(--color-ink);
  border-color: rgba(37, 37, 44, 0.25);
  border-radius: 999px;
}

.btn-outline:hover {
  border-color: var(--color-ink);
  background: rgba(37, 37, 44, 0.05);
}

.btn-arrow {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.btn-outline:hover .btn-arrow {
  transform: translate(2px, -2px);
}

.btn-primary:active {
  transform: translateY(0);
  background: #b3905f;
  box-shadow: inset 0 2px 6px rgba(37, 37, 44, 0.25);
}

/* Focus visibile per chi naviga da tastiera. Due varianti, perché
   l'oro chiaro non ha contrasto sufficiente sul fondo bianco. */
/* Nessun border-radius qui: il contorno segue da solo la forma
   dell'elemento (il pulsante resta una pillola anche col focus). */
:focus-visible {
  outline: 2px solid var(--color-gold-text);
  outline-offset: 3px;
}

.site-header :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-gold);
}

/* Link di salto: invisibile finché non riceve il focus da tastiera. */
.skip-link {
  position: absolute;
  left: 24px;
  top: -100px;
  z-index: 200;
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: top var(--transition);
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
}

/* 7. Hero -------------------------------------------------------------- */
/* Il gradiente parte dallo stesso nero dell'header e scende: header e
   hero si leggono come un unico campo scuro, senza la "banda" chiara
   che prima marcava il punto di giunzione. */
.hero {
  background: linear-gradient(168deg, #2a2a33 0%, #25252c 42%, #1b1b20 100%);
  padding: var(--space-xl) 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: var(--space-lg);
  align-items: center;
}

.hero h1 {
  color: var(--color-paper);
  margin-bottom: 0.3em;
  font-size: clamp(2rem, 3.3vw, 3.1rem);
  white-space: nowrap;
}

.hero-role {
  display: block;
  font-size: 1rem;
  letter-spacing: 0.015em;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 2em;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* 400px = la larghezza piena della colonna destra dell'hero (0.7fr di
   1192px meno il gap). La foto riempie lo spazio che ha invece di
   restare rimpicciolita al centro. */
.hero-photo .image-placeholder,
.hero-photo .photo {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
}

/* 8. Sezioni di contenuto ------------------------------------------------ */
#chi-sono {
  padding: var(--space-xl) 0;
}

.content-columns {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-areas:
    "heading photo"
    "details photo";
  gap: var(--space-md) var(--space-lg);
  align-items: start;
}

.content-columns .office-heading {
  grid-area: heading;
}

.content-columns .col-media {
  grid-area: photo;
  /* La foto occupa tutta l'altezza della colonna di testo accanto:
     i due blocchi restano allineati anche quando il testo cambia o
     quando il placeholder viene sostituito da una foto reale. */
  align-self: stretch;
}

.content-columns .office-details {
  grid-area: details;
}

/* 9. Aree di pratica ----------------------------------------------------- */
.practice-item + .practice-item {
  margin-top: 2.8em;
}

.practice-item p {
  color: var(--color-ink-soft);
}

/* 9b. Rimando all'avvocato civilista dello studio ---------------------------- */
/* Non è una terza area di pratica, ed è importante che non sembri tale:
   per questo il titolo usa Inter nero invece del corsivo oro dei titoli
   qui sopra, e una linea sottile lo stacca dall'elenco. */
.cross-ref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(37, 37, 44, 0.12);
}

.cross-ref-title {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0;
  color: var(--color-ink);
  margin-bottom: 0.3em;
}

.cross-ref-text {
  margin: 0;
  max-width: 48ch;
  color: var(--color-ink-soft);
}

.cross-ref-text strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* 10. Sedi ------------------------------------------------------------------ */
.office-region {
  display: block;
  color: var(--color-ink-soft);
  margin-bottom: 0.9em;
}

.office-address {
  color: var(--color-ink-soft);
  margin-bottom: 0;
}

.office-meta {
  margin: 0 0 0.5em;
  font-size: 0.96rem;
}

.office-meta strong {
  color: var(--color-ink);
  font-weight: 600;
}

.office-note {
  color: var(--color-ink-soft);
  font-style: italic;
  margin-top: 1em;
}

.office-divider {
  width: 64px;
  height: 1px;
  background: var(--color-gold-text);
  opacity: 0.55;
  margin: var(--space-xl) 0;
}

/* 11. Foto e riquadri segnaposto -------------------------------------------- */
/* .photo (foto reale) e .image-placeholder (riquadro grigio, dove la foto
   manca ancora) hanno sempre la stessa forma: sostituendo l'uno con
   l'altro nulla si sposta. Le regole di geometria valgono per entrambi. */
.image-placeholder,
.photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
}

.photo {
  /* La foto riempie il riquadro senza deformarsi: quel che avanza viene
     ritagliato ai lati, non schiacciato. */
  object-fit: cover;
  object-position: center;
  background: var(--color-placeholder-bg); /* fondo mentre l'immagine carica */
}

/* Per le foto in cui il soggetto sta nella metà bassa dell'inquadratura
   (la sala riunioni di Chieti: sopra il tavolo c'è solo parete e soffitto).
   Senza, il riquadro orizzontale del telefono taglierebbe via le sedie. */
.photo-basso {
  object-position: center 85%;
}

.image-placeholder {
  background: linear-gradient(170deg, #e5e3de 0%, var(--color-placeholder-bg) 100%);
  box-shadow: inset 0 0 0 1px rgba(37, 37, 44, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.image-placeholder span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: rgba(37, 37, 44, 0.68);
  line-height: 1.4;
}

.office-block .image-placeholder,
.office-block .photo {
  height: 100%;
  aspect-ratio: auto;
  min-height: 420px;
}

/* 12. Contatti diretti (telefono, email) ------------------------------------ */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-md);
}

.contact-method-label {
  display: block;
  color: var(--color-ink-soft);
  margin-bottom: 0.5em;
}

/* Il corpo scala con la larghezza e gli indirizzi lunghi possono
   andare a capo: senza questo la PEC sfonda la colonna e fa comparire
   lo scroll orizzontale sui formati intermedi (tablet). */
.contact-method-value {
  display: inline-block;
  max-width: 100%;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.45;
  overflow-wrap: anywhere;
  color: var(--color-ink);
  border-bottom: 1px solid rgba(37, 37, 44, 0.3);
  transition: color var(--transition), border-color var(--transition);
}

.contact-method:hover .contact-method-value {
  color: var(--color-gold-text);
  border-color: currentColor;
}

/* 13. Mappe ------------------------------------------------------------------ */
.map-embed {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: var(--space-sm);
  box-shadow: inset 0 0 0 1px var(--color-line);
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* 14. Footer ------------------------------------------------------------------ */
.site-footer {
  background: var(--color-black);
  color: rgba(255, 255, 255, 0.68);
  padding: var(--space-lg) 0 var(--space-sm);
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-md) 40px;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-line-dark);
}

.footer-brand .logo-title {
  color: var(--color-paper);
  line-height: 1.2;
  margin-bottom: 8px;
}

.footer-brand p {
  margin-top: 0;
  color: rgba(255, 255, 255, 0.62);
}

.footer-col h4 {
  color: var(--color-paper);
  margin-bottom: 1.2em;
}

.footer-col address {
  font-style: normal;
  margin-bottom: 0.9em;
  color: rgba(255, 255, 255, 0.64);
}

.footer-col address .office-line {
  display: block;
  color: var(--color-paper);
  font-weight: 600;
  margin-bottom: 0.1em;
}

.footer-col ul li {
  margin-bottom: 0.6em;
}

.footer-col a {
  transition: color var(--transition);
}

.footer-col a:hover {
  color: var(--color-gold);
}

.footer-bottom {
  padding-top: var(--space-sm);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.62);
}

/* 15. Utility ------------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 16. Responsive ------------------------------------------------------------------ */

/* Solo desktop: nome e ruolo più vicini, percepiti come un unico blocco */
@media (min-width: 901px) {
  .hero h1 {
    margin-bottom: 6px;
  }
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  /* Solo su mobile: la foto passa sopra nome/ruolo/pulsante, tutto centrato */
  .hero-main {
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }

  /* Foto, nome, ruolo e pulsante devono leggersi come un blocco unico:
     lo stacco resta solo quello del gap della griglia. */
  .hero-grid {
    gap: var(--space-sm);
  }

  .hero-photo {
    order: -1;
    margin-bottom: 0;
  }

  /* Impilata sopra il nome: senza tetto occuperebbe tutta la larghezza
     del tablet e diventerebbe una foto alta più di mille pixel. */
  .hero-photo .image-placeholder,
  .hero-photo .photo {
    max-width: 360px;
  }

  /* Solo su mobile: regione, città e indirizzo prima della foto */
  .content-columns {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "photo"
      "details";
  }

  /* Solo su mobile: le foto delle sedi occupano tutta la larghezza,
     stessa proporzione della mappa così risultano della stessa misura */
  .office-block .image-placeholder,
  .office-block .photo {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .office-divider {
    margin: var(--space-lg) 0;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  section {
    padding: var(--space-xl) 0;
  }

  #chi-sono {
    padding: var(--space-lg) 0;
  }

  .hero h1 {
    white-space: normal;
  }

  /* Niente menu su mobile: si naviga scorrendo la pagina. Restando il
     logo l'unico elemento dell'header, va centrato: allineato a sinistra
     sembrerebbe spaiato. */
  .main-nav {
    display: none;
  }

  .site-header .container {
    justify-content: center;
  }

  .contact-methods {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

@media (max-width: 480px) {
  section {
    padding: var(--space-lg) 0;
  }

  .hero {
    padding: var(--space-lg) 0;
  }

  .container {
    padding: 0 20px;
  }
}

/* 17. Preferenze utente e stampa ---------------------------------------------- */

/* Chi ha attivato "riduci animazioni" nel sistema operativo non deve
   subire scroll animati né transizioni. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn-primary:hover {
    transform: none;
  }
}

/* Una scheda contatti stampabile: capita spesso che un cliente stampi
   la pagina per avere indirizzo e recapiti. */
@media print {
  .site-header,
  .hero-actions,
  .map-embed,
  .image-placeholder,
  .photo,
  .skip-link {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
    font-size: 11pt;
    line-height: 1.45;
  }

  .hero,
  .site-footer {
    background: none !important;
    color: #000;
  }

  .hero h1,
  .hero-role,
  .footer-brand .logo-title,
  .footer-col h4,
  .footer-col address,
  .footer-brand p,
  .footer-bottom,
  .site-footer a {
    color: #000 !important;
  }

  section,
  .hero {
    padding: 16pt 0;
  }

  .content-columns,
  .contact-methods,
  .footer-grid,
  .hero-grid {
    display: block;
  }

  .office-block {
    break-inside: avoid;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }
}