/* ==========================================================================
   BioManage — layout refinements
   Rhythm, spacing and small interface corrections on top of the YOOtheme
   output. Fonts and palette are the theme's own.
   Hero composition lives in site-shell.css.
   ========================================================================== */

:root {
  --bm-content: 76rem;
}

html { scroll-behavior: smooth; }
img { height: auto; max-width: 100%; }

:focus-visible { outline: 3px solid var(--bm-accent-deep, #b89b74); outline-offset: 4px; }
.uk-navbar-nav > li > a:focus-visible,
.uk-button:focus-visible { outline-offset: -1px; }

/* --------------------------------------------------------------------------
   Vertical rhythm
   -------------------------------------------------------------------------- */

#tm-main > .uk-section:not(.hero-hp) {
  padding-top: clamp(3.5rem, 7vw, 7rem);
  padding-bottom: clamp(3.5rem, 7vw, 7rem);
}

#tm-main > .uk-section.uk-padding-remove-top { padding-top: 0; }
#tm-main > .uk-section.uk-padding-remove-bottom { padding-bottom: 0; }
#tm-main > .uk-section.uk-padding-remove-vertical { padding-top: 0; padding-bottom: 0; }

/* A page that opens with the shared hero owns its own top spacing. */
#tm-main.uk-section:has(> .bm-hero:first-child) { padding-top: 0; }

#tm-main .uk-grid-large { row-gap: clamp(2rem, 4vw, 4rem); }
#tm-main .uk-accordion-default .el-item { padding: .35rem 0; }
#tm-main .uk-accordion-default .uk-accordion-content { max-width: 42rem; padding-bottom: .75rem; }
#tm-main .uk-accordion-title { line-height: 1.1; }
#tm-main .uk-tile-large,
#tm-main .uk-tile-xlarge { padding-left: clamp(2rem, 6vw, 5.625rem); padding-right: clamp(2rem, 6vw, 5.625rem); }
#tm-main .uk-background-cover.uk-height-viewport { min-height: clamp(36rem, 70vh, 48rem); height: auto; }

/* --------------------------------------------------------------------------
   Contacts: a clear two-column composition and a legible, contained form.
   -------------------------------------------------------------------------- */

.contact-page > .uk-container { max-width: var(--bm-content); }
.contact-page .uk-grid-large { align-items: start; }
.contact-page .uk-form-label { margin-bottom: .5rem; }
.contact-page .uk-input, .contact-page .uk-textarea { min-height: 3rem; }
.contact-page .uk-textarea { min-height: 10rem; }


/* --------------------------------------------------------------------------
   Chi ha chiesto meno animazioni riceve la pagina già composta: niente
   dissolvenze, niente parallasse, nessuno scorrimento animato.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  [uk-scrollspy-class] { opacity: 1 !important; }
  [uk-parallax] { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Mega menu: descriptions run to one or two lines, so the two columns are
   forced onto a shared row rhythm and the entries line up across them.
   -------------------------------------------------------------------------- */

@media (min-width: 960px) {
  .tm-header .bm-mega .uk-child-width-expand > * {
    display: flex;
  }

  .tm-header .bm-mega .uk-nav {
    display: grid;
    grid-auto-rows: 1fr;
    align-content: stretch;
    width: 100%;
  }

  /* The services menu holds an uneven number of entries per column, so its
     rows use a fixed rhythm instead of dividing the available height. */
  .tm-header .bm-mega--services .uk-nav {
    grid-auto-rows: minmax(6.9rem, auto);
    align-content: start;
  }

  .tm-header .bm-mega .uk-nav > li > a {
    display: block;
    height: 100%;
  }
}

/* --------------------------------------------------------------------------
   Manifesto: a long read, set with the same editorial measure as the rest
   of the site rather than the default article column.
   -------------------------------------------------------------------------- */

.bm-manifesto {
  max-width: 46rem;
  /* Aligned with the section statement above it, not centred. */
  margin: 0;
  color: rgba(11, 31, 58, .86);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.bm-manifesto > p {
  margin: 0 0 1.35em;
}

.bm-manifesto strong,
.bm-manifesto-voci .uk-accordion-content strong,
#tm-main .uk-panel strong { font-weight: 600; color: var(--bm-ink, #0b1f3a); }

.bm-manifesto > p:last-child {
  margin-bottom: 0;
}

.bm-manifesto > .uk-text-lead {
  color: var(--bm-ink, #0b1f3a);
  font-family: Genos, sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.2;
}

.bm-manifesto > .uk-text-lead:first-child {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--bm-line, #8a949e);
}

.bm-manifesto > .uk-text-lead:last-child {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--bm-line, #8a949e);
}

/* The article wrapper is a WordPress default; the measure above owns the layout. */
#tm-main .uk-article:has(.bm-manifesto) {
  max-width: none;
}

@media (max-width: 639px) {
  .bm-manifesto { font-size: 1rem; line-height: 1.7; }
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 959px) {
  #tm-main > .uk-section:not(.hero-hp) { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  #tm-main > .uk-section.uk-padding-remove-top { padding-top: 0; }
  #tm-main > .uk-section.uk-padding-remove-bottom { padding-bottom: 0; }
  #tm-main .uk-tile-large,
  #tm-main .uk-tile-xlarge { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .uk-navbar-dropdown { max-width: min(92vw, 24rem); }
}

@media (max-width: 639px) {
  .uk-container, .uk-container-expand { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* --------------------------------------------------------------------------
   Contatti — "Come lavoriamo"
   Tre passaggi, non una classifica: al posto dei numeri un segno grafico, con
   lo stesso tratto sottile del resto del sito.
   -------------------------------------------------------------------------- */

.bm-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La sezione cambia fondo da una pagina all'altra: segno e righe prendono il
   colore del testo circostante, non una tinta fissa che sparirebbe sul tono
   caldo di questa sezione. */
.bm-steps > li {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: 1.25rem 0;
  border-top: 1px solid currentColor;
  border-top-color: color-mix(in srgb, currentColor 22%, transparent);
}

.bm-steps > li:first-child {
  padding-top: 0;
  border-top: 0;
}

.bm-steps > li:last-child { padding-bottom: 0; }

/* Il segno era un'icona dentro un cerchio: tre disegnini diversi che non
   dicevano niente in piu' del testo. Ora e' il numero del passaggio, con lo
   stesso peso e la stessa trasparenza dei numeri del resto del sito. */
.bm-steps__mark {
  flex: 0 0 auto;
  min-width: 2.6ch;
  font-family: Genos, sans-serif;
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  line-height: 1;
  letter-spacing: .02em;
  color: rgba(11, 31, 58, .45);
  color: color-mix(in srgb, currentColor 45%, transparent);
}

.bm-steps__testo {
  align-self: center;
  font-size: 1.0625rem;
  line-height: 1.55;
}

@media (max-width: 639px) {
  .bm-steps__mark { font-size: 1.5rem; }
}

/* --------------------------------------------------------------------------
   Manifesto — il modello, per voci
   Otto paragrafi di fila in una colonna a metà pagina non si leggono. I titoli
   sono estratti dal testo e ogni gruppo sta in una voce apribile; la prima è
   già aperta, così la sezione non si presenta mai vuota.
   -------------------------------------------------------------------------- */

.bm-manifesto-voci { margin-top: 0; }

.bm-manifesto-voci .el-item + .el-item {
  margin-top: 0;
  border-top: 1px solid rgba(11, 31, 58, .12);
}

/* Le voci del modello sono i titoli portanti della sezione, non didascalie:
   vanno lette come tali anche da chiuse. */
.bm-manifesto-voci .uk-accordion-title {
  padding: 1.2rem 0;
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  line-height: 1.25;
}

.bm-manifesto-voci .bm-voce__numero { font-size: clamp(1.6rem, 2vw, 1.9rem); }

/* --------------------------------------------------------------------------
   Voci numerate dentro un accordion
   Gli elenchi apribili del sito — i servizi, i passaggi del metodo, le voci
   del manifesto — sono successioni, non menu: prendono il numero come la
   serie e il mosaico. A voce chiusa il numero tiene la colonna, ed e' lui a
   far leggere l'elenco come una progressione.
   -------------------------------------------------------------------------- */

.bm-voci .uk-accordion-title {
  display: flex;
  align-items: baseline;
  gap: var(--bm-voci-gap, clamp(.9rem, 2vw, 1.5rem));
}

/* Le voci sono righe di un elenco, non voci di un menu: con i 5px di serie
   del tema stanno una addosso all'altra e l'elenco non arriva a occupare la
   propria colonna. Il manifesto ha gia' il suo passo, piu' largo, sul titolo.
   Il selettore riparte da #tm-main perche' la regola del tema che qui si
   scavalca e' scritta sull'id: senza, nessun numero di classi basterebbe. */
#tm-main .bm-voci:not(.bm-manifesto-voci) .el-item { padding: clamp(.7rem, 1vw, 1rem) 0; }

.bm-voce__numero {
  flex: 0 0 auto;
  min-width: 2.4ch;
  font-family: Genos, sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: .02em;
  color: rgba(11, 31, 58, .38);
  color: color-mix(in srgb, currentColor 38%, transparent);
}

.bm-voci .uk-accordion-title > [uk-accordion-icon] { margin-left: auto; }
.bm-voci .uk-accordion-content { padding-left: calc(2.4ch + var(--bm-voci-gap, clamp(.9rem, 2vw, 1.5rem))); }

.bm-manifesto-voci .uk-accordion-content {
  margin-top: 0;
  padding-bottom: 1.25rem;
}

.bm-manifesto-voci .uk-accordion-content p {
  margin: 0 0 1em;
  line-height: 1.65;
}

.bm-manifesto-voci .uk-accordion-content p:last-child { margin-bottom: 0; }

.bm-manifesto-chiusura {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--bm-line, #8a949e);
  color: var(--bm-ink, #0b1f3a);
  font-family: Genos, sans-serif;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.25;
}

/* ==========================================================================
   Art direction senza fotografie
   Due sezioni del sito presentavano i contenuti appoggiandosi a immagini
   (le schermate del gestionale in "Mission & Vision", le fasce fotografiche
   dei profili cliente in "A chi ci rivolgiamo"). Qui le stesse informazioni
   sono composte con quello che il sito ha già: le tinte piene (navy #0b1f3a,
   oro #b89b74, azzurro #dde7f1), i segni d'angolo .bm-sharp-* / .bm-round-*,
   gli archi .bm-arc-* e il Genos in grande. Nessun elemento nuovo di
   linguaggio: solo il vocabolario esistente, usato per fare impaginato.
   ========================================================================== */

/* --------------------------------------------------------------------------
   L'occhiello
   Una sola etichetta per tutto il sito: maiuscoletto spaziato e un filo che
   corre fino al margine. Sostituisce i tre modi diversi che convivevano prima
   (.uk-h6 muted, .uk-h6 primary, .uk-h6.uk-heading-line centrato).
   -------------------------------------------------------------------------- */

.bm-occhiello {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.75rem);
  margin: 0 0 clamp(1.75rem, 3.5vw, 3rem);
  color: var(--bm-accent-deep, #b89b74);
  font: 500 11px/1.5 Sora, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* L'etichetta puo' andare a capo — alcune sono frasi intere — ma il filo non
   deve mai sparire: si tiene un minimo e prende il resto dello spazio. */
.bm-occhiello > span { flex: 0 1 auto; }

.bm-occhiello::before,
.bm-occhiello::after {
  content: '';
  flex: 1 1 auto;
  min-width: 2rem;
  height: 1px;
  background: linear-gradient(to right, currentColor, transparent);
  opacity: .5;
}

/* Di serie il filo sta solo a destra. */
.bm-occhiello::before { display: none; }

/* Variante centrata: due fili, quello di sinistra sfuma verso l'esterno. */
.bm-occhiello--centro { justify-content: center; text-align: center; }
.bm-occhiello--centro::before { display: block; background: linear-gradient(to left, currentColor, transparent); }

/* Occhiello attaccato al titolo che segue, dove prima c'era .uk-margin-small. */
.bm-occhiello--stretto { margin-bottom: clamp(.85rem, 1.6vw, 1.25rem); }

/* Dentro un box stretto il filo ruba spazio all'etichetta: sotto lo si toglie. */
.bm-occhiello--nudo::before,
.bm-occhiello--nudo::after { display: none; }

/* Il colore segue il fondo: oro profondo sulla carta chiara, oro chiaro sul
   navy, navy sull'oro pieno — dove l'oro su oro non si vedrebbe.
   Il !important non e' pigrizia: alcuni occhielli sono <h2>/<h3>/<h4>, e
   YOOtheme colora ogni h1-h6 dentro una sezione scura con un selettore
   generato lungo mezzo file (.uk-section-primary:not(.uk-preserve-color) h4),
   piu' specifico di qualunque cosa si scriva qui con una classe sola.
   Senza questa riga l'occhiello sul navy diventa bianco. */
.bm-occhiello { color: var(--bm-accent-deep, #b89b74) !important; }

.uk-section-primary .bm-occhiello,
.uk-tile-primary .bm-occhiello,
.uk-card-primary .bm-occhiello,
.uk-light .bm-occhiello { color: var(--bm-accent, #cfb180) !important; }

.uk-section-muted .bm-occhiello,
.uk-tile-muted .bm-occhiello,
.uk-card-muted .bm-occhiello { color: var(--bm-ink, #0b1f3a) !important; }

/* --- dichiarazione in grande -------------------------------------------- */

.bm-claim {
  margin: 0;
  color: var(--bm-ink, #0b1f3a);
  font-family: Genos, sans-serif;
  font-weight: 400;
  font-size: clamp(2.35rem, 4.6vw, 4.75rem);
  line-height: .88;
  letter-spacing: -.01em;
}

/* --- numero d'ordine ----------------------------------------------------- */

/* Pieno, non contornato, e trasparente quanto basta: il numero prende il
   colore del testo che gli sta intorno e lo scarica sul fondo, quindi
   funziona sul navy, sull'oro e sulla carta chiara senza eccezioni. E' un
   riferimento di lettura, non un titolo: non deve mai battere il nome. */
.bm-numero {
  display: block;
  margin-bottom: clamp(1.1rem, 2.2vw, 2rem);
  font-family: Genos, sans-serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 3.8vw, 3.75rem);
  line-height: .8;
  letter-spacing: .02em;
  color: rgba(11, 31, 58, .26);
  color: color-mix(in srgb, currentColor 26%, transparent);
}

/* Sul navy il testo e' gia' scarico di suo: il numero ha bisogno di piu' peso
   per non sparire nel fondo scuro. */
.uk-section-primary .bm-numero,
.uk-tile-primary .bm-numero,
.uk-light .bm-numero { color: color-mix(in srgb, currentColor 42%, transparent); }

/* --------------------------------------------------------------------------
   Mission & Vision — il dittico
   Una dichiarazione grande sul chiaro e, sfalsata sotto, la risposta dentro
   un box pieno. La seconda mossa e' speculare alla prima: il testo passa a
   destra e il box a sinistra, cosi' la sezione ha un ritmo e non due righe
   uguali una sopra l'altra.
   -------------------------------------------------------------------------- */

.bm-mossa + .bm-mossa { margin-top: clamp(3rem, 9vw, 9rem); }

.bm-mossa__griglia {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  row-gap: clamp(2.25rem, 4.5vw, 4rem);
  align-items: start;
}

.bm-mossa__claim { grid-column: 1 / span 8; }
.bm-mossa__box { grid-column: 5 / span 8; }

/* Quando la risposta e' breve, alle otto colonne resterebbe una fascia bassa
   e mezza vuota: ne prende sei, spostate piu' in la'. */
.bm-mossa--corto .bm-mossa__box { grid-column: 7 / span 6; }

.bm-mossa--specchio .bm-mossa__claim { grid-column: 5 / span 8; }
.bm-mossa--specchio .bm-mossa__box { grid-column: 1 / span 6; }

/* Il segno d'angolo sta sull'involucro e non sul riquadro: l'arco del box
   ritaglia il proprio contenuto e se lo mangerebbe. Resta appoggiato dentro
   l'angolo, non spinto fuori con .bm-out: fuori dal box, a meta' del bianco,
   diventa un grafismo alla deriva. La misura di serie e' tarata sulle fasce a
   tutta pagina, qui va rimpicciolita. */
.bm-mossa__box { --bm-sharp-size: clamp(28px, 5.4vw, 78px); --bm-round-size: clamp(26px, 5vw, 72px); }

/* Sul box oro il segno d'angolo oro sparirebbe: diventa navy, come il numero. */
.bm-mossa__box--oro { --bm-color: var(--bm-ink, #0b1f3a); }

.bm-mossa__box > .uk-tile {
  padding: clamp(2.25rem, 4.5vw, 4.5rem) clamp(2rem, 4vw, 4rem);
}

.bm-mossa__testo {
  max-width: 44rem;
  margin: 0;
  font-size: 1.09375rem;
  line-height: 1.7;
}

.bm-mossa__testo + .bm-mossa__testo { margin-top: 1.35em; }

/* La chiusura in neretto e' l'unico grassetto della sezione: resta tale. */
.bm-mossa__testo strong { font-weight: 600; }

/* Sotto i 960 ogni pezzo del dittico prende la riga intera. Il selettore
   elenca anche le varianti: la loro grid-column e' piu' specifica di quella
   di base e senza nominarle resterebbero incolonnate a meta' pagina. */
@media (max-width: 959px) {
  .bm-mossa__claim,
  .bm-mossa__box,
  .bm-mossa--corto .bm-mossa__box,
  .bm-mossa--specchio .bm-mossa__claim,
  .bm-mossa--specchio .bm-mossa__box { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   A chi ci rivolgiamo — i cinque profili
   Un mosaico di tinte piene: navy, oro e azzurro si alternano su due righe
   3/5 + 2/5 rovesciate, e il quinto profilo chiude a tutta larghezza con il
   nome e il testo su due colonne. Le fotografie non servono: a distinguere i
   profili bastano il colore del box e il numero.
   -------------------------------------------------------------------------- */

.bm-profili {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: clamp(.75rem, 1.4vw, 1.25rem);
}

/* Come nel dittico, il segno d'angolo va rimpicciolito: dentro un box di
   mezza colonna, alla misura di serie, sarebbe lui il soggetto. */
.bm-profilo {
  display: flex;
  --bm-sharp-size: clamp(26px, 4.4vw, 62px);
  --bm-round-size: clamp(24px, 4vw, 58px);
}

.bm-profilo > .uk-tile {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: clamp(2.25rem, 4.4vw, 4.5rem) clamp(2rem, 3.6vw, 3.75rem);
}

.bm-profilo--a { grid-column: span 6; }
.bm-profilo--b { grid-column: span 4; }
.bm-profilo--c { grid-column: span 4; }
.bm-profilo--d { grid-column: span 6; }
.bm-profilo--e { grid-column: span 10; }

/* L'azzurro del sito non e' una tinta del tema: qui diventa una classe, cosi'
   non finisce scritto a mano in ogni pagina. */
.bm-tile-azzurro { background-color: #dde7f1; color: var(--bm-ink, #0b1f3a); }

/* Il quinto box non e' pieno: e' la stessa carta della sezione, tenuta da un
   filo. Serve un terzo registro dopo il navy e l'oro, altrimenti il mosaico
   e' solo due colori che si alternano. */
.bm-tile-filo {
  background-color: transparent;
  color: var(--bm-ink, #0b1f3a);
  box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .28);
}

/* Sull'oro pieno il testo prende il navy della palette, non un grigio. */
.uk-tile-muted .bm-profilo__nome,
.uk-tile-muted .bm-profilo__testo,
.uk-tile-muted .bm-mossa__testo { color: var(--bm-ink, #0b1f3a); }

.bm-profilo__nome {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  font-family: Genos, sans-serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 3.5vw, 3.6rem);
  line-height: .88;
  letter-spacing: -.01em;
  max-width: 18ch;
}

.bm-profilo__testo {
  margin: 0;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* Il quinto chiude la serie: nome e testo affiancati, non incolonnati. */
@media (min-width: 960px) {
  .bm-profilo--e > .uk-tile {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }

  .bm-profilo--e .bm-profilo__numero { grid-column: 1; }
  .bm-profilo--e .bm-profilo__nome { grid-column: 1; margin-bottom: 0; }
  .bm-profilo--e .bm-profilo__testo { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

@media (max-width: 959px) {
  .bm-profili > * { grid-column: 1 / -1; }
}

/* In home il mosaico e' un assaggio: sotto, il rimando alla pagina intera. */
.bm-profili__coda {
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
  text-align: right;
}


/* ==========================================================================
   Titoli sul telefono
   I .uk-heading-* del tema hanno una sola misura sotto i 960px: 8rem per il
   3xlarge, che su uno schermo da 390px vuol dire una parola larga il doppio
   della colonna, tagliata a meta'. Qui ogni classe prende un tetto in vw
   calcolato sulla parola piu' lunga che compare in quel ruolo nel sito
   ("BioManage", "Rappresentanza", "Approvvigionamenti", "dell'investimento").
   E' un min(): finche' il valore del tema ci sta — sul tablet — non cambia
   niente, e il tetto entra in gioco solo quando la riga non entrerebbe.
   ========================================================================== */

@media (max-width: 959px) {
  #tm-main .uk-heading-3xlarge { font-size: min(8rem, 18.5vw); }
  #tm-main .uk-heading-2xlarge { font-size: min(6rem, 14vw); }
  #tm-main .uk-heading-xlarge { font-size: min(4rem, 12.6vw); }
  #tm-main .uk-heading-large { font-size: min(3.4rem, 10.8vw); }
  #tm-main .uk-heading-medium { font-size: min(2.8875rem, 10.2vw); }
  #tm-main .uk-heading-small { font-size: min(2.4rem, 9.6vw); }

  /* La citazione del tema e' fissa a 40px e sta dentro un riquadro con
     padding largo: sul telefono resta poco piu' di meta' colonna. */
  #tm-main blockquote,
  #tm-main blockquote p { font-size: min(40px, 8.2vw); line-height: 1.25; }
}

/* ==========================================================================
   Telefono: allineamento e spaziature
   Due cose che il tema non gestisce sotto i 960px.

   1. L'allineamento. Diverse sezioni sono centrate perche' su schermo largo
      il testo sta al centro di una pagina vuota. In una colonna da 350px il
      centrato costringe l'occhio a ricercare l'inizio di ogni riga: tutto
      il corpo va a sinistra, bottoni compresi.

   2. Le spaziature. Le utility del tema hanno valori fissi che sotto i
      1200px non scalano piu': .uk-margin-medium e .uk-margin-large valgono
      entrambe 40px (due nomi, lo stesso stacco), .uk-margin-xlarge ne vale
      70 e una sezione xlarge annidata arriva a 140 sopra e sotto. Qui la
      scala torna a essere una scala: 24 / 32 / 40, e le sezioni 56 (72 per
      la xlarge, che deve restare il respiro piu' ampio).
   ========================================================================== */

@media (max-width: 959px) {

  /* --- 1. tutto a sinistra ---------------------------------------------- */

  #tm-main .uk-text-center,
  #tm-main .uk-text-right,
  #tm-main [class*="uk-text-center@"],
  #tm-main [class*="uk-text-right@"],
  #tm-main .bm-profili__coda,
  .tm-page > footer .uk-text-center,
  .tm-page > footer [class*="uk-text-center@"] { text-align: left !important; }

  /* Il piede e' impaginato al centro sotto i 960: quattro elenchi incolonnati
     e centrati sono la stessa fatica di lettura del resto. */
  .tm-page > footer .uk-flex-center { justify-content: flex-start !important; }

  /* L'occhiello centrato perde il filo di sinistra e si allinea al resto. */
  #tm-main .bm-occhiello--centro { justify-content: flex-start; text-align: left; }
  #tm-main .bm-occhiello--centro::before { display: none; }

  /* Le righe di bottoni seguono il testo. */
  #tm-main .uk-flex-center,
  #tm-main .uk-flex-right { justify-content: flex-start !important; }

  /* --- 2. una scala sola ------------------------------------------------ */

  /* Anche le sezioni annidate dentro un blocco con immagine di sfondo:
     la regola del ritmo verticale, piu' su, vede solo i figli di #tm-main. */
  #tm-main [class*="uk-section"]:not(.uk-padding-remove-vertical) {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  /* La xlarge resta il respiro piu' ampio, su qualunque lato sia dichiarata.
     Il :not() della regola qui sopra pesa quanto due classi: senza ripeterlo
     la xlarge non riuscirebbe a scavalcarla e resterebbe a 3.5rem. */
  #tm-main .uk-section-xlarge:not(.uk-padding-remove-vertical),
  #tm-main .uk-section-xlarge-top:not(.uk-padding-remove-vertical) { padding-top: 4.5rem; }
  #tm-main .uk-section-xlarge:not(.uk-padding-remove-vertical),
  #tm-main .uk-section-xlarge-bottom:not(.uk-padding-remove-vertical) { padding-bottom: 4.5rem; }

  #tm-main .uk-padding-remove-top,
  #tm-main .uk-section-xlarge.uk-padding-remove-top { padding-top: 0; }
  #tm-main .uk-padding-remove-bottom,
  #tm-main .uk-section-xlarge.uk-padding-remove-bottom { padding-bottom: 0; }
  #tm-main .uk-padding-remove-vertical { padding-top: 0; padding-bottom: 0; }

  #tm-main .uk-margin-medium,
  #tm-main .uk-margin-medium-top { margin-top: 1.5rem !important; }
  #tm-main .uk-margin-medium,
  #tm-main .uk-margin-medium-bottom { margin-bottom: 1.5rem !important; }

  #tm-main .uk-margin-large,
  #tm-main .uk-margin-large-top { margin-top: 2rem !important; }
  #tm-main .uk-margin-large,
  #tm-main .uk-margin-large-bottom { margin-bottom: 2rem !important; }

  #tm-main .uk-margin-xlarge,
  #tm-main .uk-margin-xlarge-top { margin-top: 2.5rem !important; }
  #tm-main .uk-margin-xlarge,
  #tm-main .uk-margin-xlarge-bottom { margin-bottom: 2.5rem !important; }
}

/* --------------------------------------------------------------------------
   Home, testo dell'hero sopra il video
   Il pannello era alto 110vh da stile in linea: su desktop e' lo spazio che
   serve allo sticky per scorrere, sotto i 960 lo sticky non parte (media: @m)
   e quel 10% in piu' restava come coda vuota sotto il video.
   -------------------------------------------------------------------------- */

.bm-hp-testo { min-height: 110vh; }

@media (max-width: 959px) {
  .bm-hp-testo { min-height: 100vh; min-height: 100svh; }
}

/* --------------------------------------------------------------------------
   Titolo che porta da qualche parte
   Un <a> dentro un titolo prende di suo il colore e il tratto dei link: qui
   eredita tutto dal titolo e resta un titolo. Il segno del passaggio del
   mouse e' la sottolineatura che cresce da sinistra, la stessa dei link di
   testo del sito (motion.css), che si aggancia da sola.
   -------------------------------------------------------------------------- */

#tm-main .bm-titolo-link {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
}


/* ==========================================================================
   Revisione — bottoni che vanno a capo, curve fisse, respiro dei decori,
   piede compatto e spazi tarati anche sugli schermi grandi.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Bottoni
   Il tema costruisce l'altezza del bottone con line-height: 60px. Finche' la
   scritta sta su una riga funziona; appena va a capo — "Aumenta il valore del
   tuo impianto" dentro una colonna stretta — ogni riga vale 60px e il bottone
   diventa un ovale alto 122px con le due righe lontane l'una dall'altra.
   Qui l'altezza la tiene min-height e l'interlinea torna a essere interlinea,
   cosi' il bottone a una riga resta identico e quello a due si limita a
   crescere di quel che serve.
   -------------------------------------------------------------------------- */

.uk-button:not(.uk-button-text):not(.uk-button-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  max-width: 100%;
  min-height: 60px;
  padding-top: .7rem;
  padding-bottom: .7rem;
  line-height: 1.3;
  text-wrap: balance;
}

.uk-button-small:not(.uk-button-text):not(.uk-button-link) {
  min-height: 28px;
  padding-top: .3rem;
  padding-bottom: .3rem;
}

.uk-button-large:not(.uk-button-text):not(.uk-button-link) { min-height: 53px; }

/* --------------------------------------------------------------------------
   2. Le curve
   Gli archi erano tarati in vw con un tetto in percentuale: in percentuale il
   raggio e' ellittico (30% della larghezza e 30% dell'altezza sono due misure
   diverse) e su un monitor largo la stessa classe disegnava curve diverse da
   un riquadro all'altro. Qui il raggio e' un numero fisso e circolare.

   La scala e' anche piu' bassa di prima: a 132px l'arco non era piu' un
   angolo smussato ma il soggetto del riquadro — su un'immagine alta 500px si
   mangiava un terzo del lato e a seconda delle proporzioni dell'elemento
   usciva ogni volta un disegno diverso. Con questi numeri la stessa classe
   legge uguale su un box da 1500px e su uno da 340.
   -------------------------------------------------------------------------- */

.bm-arc { --bm-r: var(--tl, 0px) var(--tr, 0px) var(--br, 0px) var(--bl, 0px); }

:root { --bm-arc: 26px; }
.bm-arc-sm { --bm-arc: 14px; }
.bm-arc-md { --bm-arc: 26px; }
.bm-arc-lg { --bm-arc: 40px; }
.bm-arc-xl { --bm-arc: 64px; }

/* Sotto il tablet i riquadri sono larghi quanto la pagina: la curva scende
   con loro, altrimenti su 340px torna a essere il soggetto. */
@media (max-width: 639px) {
  .bm-arc-sm { --bm-arc: 10px; }
  .bm-arc-md { --bm-arc: 18px; }
  .bm-arc-lg { --bm-arc: 26px; }
  .bm-arc-xl { --bm-arc: 36px; }
}

/* La stessa cosa per le immagini con l'angolo tagliato: 166px su una foto
   panoramica diventava la foglia che hai segnalato. */
.borderad, .borderad img, .borderad div, .borderad video { border-top-left-radius: 64px; border-bottom-right-radius: 64px; }
.borderadT, .borderadT div, .borderadT img { border-top-left-radius: 64px; }
.borderadTd, .borderadTd div, .borderadT img { border-top-right-radius: 64px; }

@media (max-width: 639px) {
  .borderad, .borderad img, .borderad div, .borderad video { border-top-left-radius: 36px; border-bottom-right-radius: 36px; }
  .borderadT, .borderadT div, .borderadT img { border-top-left-radius: 36px; }
  .borderadTd, .borderadTd div, .borderadT img { border-top-right-radius: 36px; }
}

/* --------------------------------------------------------------------------
   3. I segni d'angolo
   Due correzioni. La misura non si calcola piu' in vw — stessa ragione delle
   curve — e lo scarto con cui il segno esce dal riquadro cresce: prima valeva
   14px e il segno finiva appoggiato al bordo della pagina e a un pelo dalla
   prima riga di testo. Lo scarto orizzontale non arriva piu' a consumare
   tutto il margine del contenitore, cosi' il segno non tocca mai il bordo
   dello schermo.
   -------------------------------------------------------------------------- */

:root {
  --bm-sharp-size: 96px;
  --bm-round-size: 88px;
  --bm-arrow-w: 56px;
  --bm-out-gap: 26px;

  /* Il segno tondo era piu' grosso dell'angolo netto (.31 contro .22): fuori
     dal riquadro gli serviva piu' margine di quanto il contenitore ne abbia
     sul portatile, e a destra finiva tagliato dal bordo. Allo stesso spessore
     dell'angolo netto i due segni entrano nello stesso margine e sono anche
     una coppia piu' coerente. */
  --bm-round-thick: calc(var(--bm-round-size) * .24);
  --bm-round-radius: calc(var(--bm-round-thick) * 1.8);
}

@media (max-width: 959px) {
  :root { --bm-sharp-size: 64px; --bm-round-size: 58px; --bm-arrow-w: 44px; --bm-out-gap: 14px; }
}

@media (max-width: 639px) {
  :root { --bm-sharp-size: 40px; --bm-round-size: 38px; --bm-arrow-w: 34px; --bm-out-gap: 10px; }
}

/* --bm-pad-x deve valere quanto il margine vero del contenitore, perche' e'
   il tetto di quanto il segno puo' uscire senza finire tagliato dal bordo
   della pagina. Era dichiarato 15/30/40, mentre il tema usa 20 fino ai 959 e
   40 da li' in su: sul tablet il segno sbordava di sei pixel. */
:root { --bm-pad-x: 20px; }
@media (min-width: 960px) { :root { --bm-pad-x: 40px; } }

/* Lo scarto verticale e' aria pura: il segno sta tutto sopra il primo rigo.
   Quello orizzontale deve tenere insieme due cose — il braccio verticale
   lontano dalla prima lettera (lo spessore piu' 12px) e il segno lontano dal
   bordo della pagina — dentro un margine di contenitore che sul portatile e'
   di soli 40px. Il min() sceglie il possibile: sul desktop restano 12px dal
   testo e 7 dal bordo, sul telefono il segno esce di schermo come un
   grafismo al vivo e tiene comunque 6px dal testo. */
.bm-out {
  --bm-sv: calc(var(--bm-sharp-thick) + var(--bm-out-gap));
  --bm-sh: min(var(--bm-pad-x), calc(var(--bm-sharp-thick) + 12px));
  --bm-rv: calc(var(--bm-round-thick) + var(--bm-out-gap));
  --bm-rh: min(var(--bm-pad-x), calc(var(--bm-round-thick) + 12px));
}

/* Dentro un riquadro il segno non si appoggia piu' all'angolo: rientra.
   Con --bm-inset a zero il quadrato del segno combaciava con lo spigolo del
   box, quindi i due bracci correvano esattamente sul bordo — e dove il box
   ha l'angolo stondato il segno finiva mezzo fuori dalla curva. Rientrando,
   il segno resta un riferimento dentro il riquadro e non un ritaglio del suo
   contorno. Vale per tutti i segni tranne quelli con .bm-out, che per loro
   natura stanno fuori e inquadrano il contenuto da oltre il margine. */
:is(.bm-sharp-tl, .bm-sharp-tr, .bm-sharp-bl, .bm-sharp-br,
    .bm-round-tl, .bm-round-tr, .bm-round-bl, .bm-round-br):not(.bm-out):not(.uk-grid):not([class*="uk-container"]) {
  --bm-inset: clamp(14px, 1.7vw, 28px);
}

/* Su una griglia o su un contenitore il segno non sta dentro un riquadro:
   inquadra la colonna di contenuto dal suo spigolo, e rientrando finirebbe
   sopra il titolo o sopra l'ultima riga dell'elenco. Li' resta dov'e'.
   Sul telefono pero' lo spigolo della griglia e' anche l'inizio del testo —
   il segno cadeva sul numero dell'ultima voce — quindi esce di quel tanto
   che basta, verso il margine della pagina: e' la stessa mossa di .bm-out. */
@media (max-width: 639px) {
  .uk-grid:is(.bm-sharp-tl, .bm-sharp-tr, .bm-sharp-bl, .bm-sharp-br,
      .bm-round-tl, .bm-round-tr, .bm-round-bl, .bm-round-br):not(.bm-out) {
    --bm-inset: -14px;
  }
}

/* Il segno appeso allo spigolo di un contenitore e' l'unico che sotto i 960
   non ha dove stare: la colonna e' larga quanto la pagina, lo spigolo cade
   sul numero dell'ultima voce e i 20px di margine non bastano ne' a farlo
   rientrare ne' a farlo uscire. Sul piccolo non si disegna, come gia'
   fanno i segni dei riquadri con .bm-hide-m. */
@media (max-width: 959px) {
  [class*="uk-container"]:is(.bm-sharp-tl, .bm-sharp-tr, .bm-sharp-bl, .bm-sharp-br,
      .bm-round-tl, .bm-round-tr, .bm-round-bl, .bm-round-br):not(.bm-out)::before,
  [class*="uk-container"]:is(.bm-sharp-tl, .bm-sharp-tr, .bm-sharp-bl, .bm-sharp-br,
      .bm-round-tl, .bm-round-tr, .bm-round-bl, .bm-round-br):not(.bm-out)::after {
    display: none;
  }
}

/* Le due misure ridotte del dittico e del mosaico seguono la stessa regola
   delle altre: numeri fissi, non vw. */
.bm-mossa__box { --bm-sharp-size: 70px; --bm-round-size: 64px; }
.bm-profilo { --bm-sharp-size: 58px; --bm-round-size: 54px; }

@media (max-width: 639px) {
  .bm-mossa__box { --bm-sharp-size: 40px; --bm-round-size: 38px; }
  .bm-profilo { --bm-sharp-size: 36px; --bm-round-size: 34px; }
}

/* Il riquadro che porta un segno d'angolo tiene il testo oltre il rientro
   del segno piu' il suo spessore piu' un margine di respiro. */
:is(.bm-sharp-tl, .bm-sharp-tr, .bm-round-tl, .bm-round-tr) > :is(.uk-tile, .uk-card-body) {
  padding-top: max(var(--bm-tile-pt, 0px), calc(var(--bm-inset) + var(--bm-sharp-thick, 0px) + var(--bm-out-gap)));
}

:is(.bm-sharp-bl, .bm-sharp-br, .bm-round-bl, .bm-round-br) > :is(.uk-tile, .uk-card-body) {
  padding-bottom: max(var(--bm-tile-pb, 0px), calc(var(--bm-inset) + var(--bm-sharp-thick, 0px) + var(--bm-out-gap)));
}

/* --- il padding dei riquadri -------------------------------------------
   Il testo stava troppo vicino al bordo: dentro un box pieno il margine non
   e' decorazione, e' quello che lo fa leggere come un riquadro invece che
   come una tinta stesa dietro le parole. */
/* Il fondo del riquadro deve reggere il segno d'angolo senza schiacciarlo
   contro l'ultima riga: il segno rientra di piu' dal bordo e sotto il testo
   resta lo spazio per lui piu' due volte quell'aria. Il selettore ripete i
   :not() della regola generale piu' su, altrimenti quella — che pesa quattro
   classi — continuerebbe a vincere su questa. */
.bm-mossa__box:not(.bm-out):not(.uk-grid):not([class*="uk-container"]) {
  --bm-inset: clamp(22px, 2.6vw, 42px);
}

.bm-mossa__box > .uk-tile {
  padding: clamp(2.75rem, 5.2vw, 5.5rem) clamp(2.5rem, 4.8vw, 5rem) clamp(3.75rem, 6.6vw, 7rem);
  --bm-tile-pt: clamp(2.75rem, 5.2vw, 5.5rem);
  --bm-tile-pb: clamp(3.75rem, 6.6vw, 7rem);
}

.bm-profilo > .uk-tile {
  padding: clamp(2.5rem, 5vw, 5rem) clamp(2.25rem, 4.4vw, 4.5rem) clamp(3.25rem, 6.4vw, 6.5rem);
  --bm-tile-pt: clamp(2.5rem, 5vw, 5rem);
  --bm-tile-pb: clamp(3.25rem, 6.4vw, 6.5rem);
}

/* Gli altri riquadri pieni del sito stavano ai 40/70px del tema: qui salgono
   con la pagina invece di restare fermi. Il dittico e il mosaico hanno gia'
   il loro, piu' largo, e restano fuori dalla regola; la specificita' e' tenuta
   bassa apposta, cosi' i padding dichiarati pagina per pagina (#page#N, che
   valgono piu' di qualunque classe) continuano a vincere. */
:not(.bm-mossa__box):not(.bm-profilo) > .uk-tile:not(.uk-tile-large):not(.uk-tile-xlarge):not(.uk-tile-small) {
  padding: clamp(2.5rem, 5vw, 5rem);
}

/* --------------------------------------------------------------------------
   4. Mission & Vision — le due dichiarazioni lunghe
   Il .bm-claim e' tarato su frasi di poche parole; qui sono due periodi
   interi e alla misura di serie riempirebbero mezza schermata. Stessa
   famiglia e stessa interlinea, un corpo piu' contenuto.
   -------------------------------------------------------------------------- */

.bm-claim--lungo {
  font-size: clamp(1.75rem, 2.9vw, 3rem);
  line-height: 1.02;
}

@media (min-width: 960px) {
  .bm-mossa--ampio .bm-mossa__box { grid-column: 4 / span 9; }
  .bm-mossa--specchio.bm-mossa--ampio .bm-mossa__box { grid-column: 1 / span 9; }
}

/* --------------------------------------------------------------------------
   5. Menu a tendina
   Tre cose. Il titolo della voce stava a 12px, meno della sua stessa
   descrizione (14px): nella tendina si leggeva prima il sottotitolo del nome
   della pagina. Il suo stile e' ora quello delle voci della barra — stesso
   Sora, stesso peso, stesso maiuscoletto e la stessa spaziatura in em
   (11px con 2px di tracking fanno .18em): la tendina e' la barra che si apre,
   non un secondo carattere.
   E la tendina dei servizi e' piu' alta di una schermata bassa: senza
   scorrimento le ultime voci non si raggiungevano.
   -------------------------------------------------------------------------- */

.tm-header .bm-mega .uk-nav > li > a > div {
  font-family: Sora, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* La descrizione scende sotto il nome anche di corpo: a 13,5px contro gli
   11px del titolo si leggeva prima lei. Il nome resta davanti per peso,
   maiuscoletto e colore, non per dimensione. */
.tm-header .bm-mega .uk-nav-subtitle {
  margin-top: .35rem;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}

@media (min-width: 960px) {
  .tm-header .uk-navbar-dropdown {
    box-sizing: border-box;
    max-height: calc(100svh - var(--bm-header-h, 80px) - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .tm-header .uk-navbar-dropdown::-webkit-scrollbar { width: 6px; }
  .tm-header .uk-navbar-dropdown::-webkit-scrollbar-track { background: transparent; }
  .tm-header .uk-navbar-dropdown::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(11, 31, 58, .22);
  }

  /* Il passo delle righe era tarato su descrizioni di due righe: con il
     titolo piu' grande la tendina superava la schermata prima ancora di
     avere qualcosa da scorrere. */
  .tm-header .bm-mega--services .uk-nav { grid-auto-rows: minmax(5.5rem, auto); }

  /* La fotografia della tendina non deve dettare l'altezza del pannello: a
     questo pensa gia' il posizionamento assoluto dentro .bm-mega-media. Un
     tetto in altezza, invece, la lasciava corta rispetto alle voci accanto. */
  .tm-header .bm-mega .bm-mega-media img { height: 100%; object-fit: cover; }
}

/* --------------------------------------------------------------------------
   6. Il piede
   Quattro elenchi con 8px di padding per voce, 20px sopra e sotto ogni filo e
   140px di sezione: il piede era alto quanto mezza schermata. Qui le voci
   stanno su un passo stretto, i fili si avvicinano ai titoli e la sezione
   perde le due bande vuote. Il trattino che compariva al passaggio del mouse
   se ne va con loro: a interlinea stretta finiva sulla riga sotto.
   -------------------------------------------------------------------------- */

.tm-page > footer > .uk-section:not(.uk-section-small) {
  padding-top: clamp(2.5rem, 4vw, 4.25rem);
  padding-bottom: clamp(2rem, 3vw, 3rem);
}

.tm-page > footer > .uk-section-small {
  padding-top: clamp(1rem, 1.6vw, 1.5rem);
  padding-bottom: clamp(1rem, 1.6vw, 1.5rem);
}

.tm-page > footer .uk-grid-margin-large { row-gap: clamp(2rem, 3vw, 2.75rem); }
.tm-page > footer .uk-grid-margin-large > * { margin-top: 0; }

.tm-page > footer .uk-nav > li > a {
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 1.35;
}

.tm-page > footer hr { margin-top: 10px; margin-bottom: 10px; }
.tm-page > footer .uk-h3 { margin-bottom: 0; }
.tm-page > footer p { margin-bottom: 0; }
.tm-page > footer p + p { margin-top: .35rem; }

/* Niente trattino: resta il colore che si accende. */
.tm-page > footer .uk-nav > li > a::after { content: none; }
.tm-page > footer .uk-nav > li > a:hover { color: var(--bm-accent, #cfb180); }

/* --------------------------------------------------------------------------
   7. Schermi grandi
   Quello che cresce con lo schermo non e' il testo: sono gli spazi dichiarati
   in vh. Su un monitor alto 1440px una fascia da 100vh e' una schermata piena
   quasi vuota e un margine da 15vh vale 216px. Qui ogni misura legata
   all'altezza ha un tetto, e sopra i 1800px il contenuto puo' allargarsi
   quel tanto che basta a non restare un nastro in mezzo al vuoto.
   -------------------------------------------------------------------------- */

@media (min-width: 1800px) {
  #tm-main .uk-container-large { max-width: 1560px; }
  #tm-main .uk-container-xlarge { max-width: 1780px; }
  #tm-main .uk-container-expand > .uk-container-xlarge { max-width: 1780px; }

  /* Le sezioni annidate non passano dal ritmo verticale (la regola vede solo
     i figli di #tm-main) e si tengono i 210px del tema: su uno schermo grande
     sono due bande vuote sopra e sotto un blocco di poche righe. */
  #tm-main [class*="uk-section-xlarge"]:not(.uk-padding-remove-vertical) {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }

  #tm-main .uk-tile-large,
  #tm-main .uk-tile-xlarge { padding-top: 5.5rem; padding-bottom: 5.5rem; }
}

/* --------------------------------------------------------------------------
   8. Contatti
   Il modulo scende sotto il riquadro dei recapiti, nella colonna stretta; al
   suo posto, su tutta la colonna larga, la mappa. Resta agganciata mentre si
   compila il modulo, cosi' l'indirizzo e' sempre in vista.
   -------------------------------------------------------------------------- */

.contact-page .uk-grid-large.bm-contatti { align-items: stretch; }

/* La colonna prende l'altezza della riga: e' quello spazio che la mappa
   percorre restando agganciata mentre si scorre il modulo. */
.contact-page .bm-contatti__mappa { align-self: stretch; }

.contact-page .bm-contact-aside {
  padding: clamp(2rem, 4vw, 3.5rem);
  background: var(--bm-muted, #dde7f1);
}

.contact-page [data-modulo] {
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem) !important;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--bm-line, #8a949e);
}

.bm-mappa {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bm-muted, #dde7f1);
}

.bm-mappa iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 24rem;
  border: 0;
  filter: grayscale(1) contrast(.95);
  transition: filter .4s var(--bm-ease, cubic-bezier(.16, 1, .3, 1));
}

.bm-mappa:hover iframe { filter: grayscale(0) contrast(1); }

.bm-mappa__link {
  position: absolute;
  left: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(1rem, 2vw, 1.5rem);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: .85rem 1.25rem;
  background: var(--bm-ink, #0b1f3a);
  color: var(--bm-surface, #eaf0f6);
  font: 500 11px/1 Sora, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s ease-in-out;
}

.bm-mappa__link::after {
  content: '';
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.bm-mappa__link:hover { background: var(--bm-accent-deep, #b89b74); color: var(--bm-surface, #eaf0f6); }

@media (min-width: 960px) {
  .contact-page .bm-mappa {
    position: sticky;
    top: calc(var(--bm-header-h, 80px) + 1.5rem);
    height: min(calc(100svh - var(--bm-header-h, 80px) - 3rem), 42rem);
  }
}

@media (max-width: 959px) {
  /* Sul telefono prima i recapiti e il modulo, la mappa in chiusura. */
  .contact-page .bm-contatti__mappa { order: 2; }
  .contact-page .bm-contatti__colonna { order: 1; margin-top: 0 !important; }
  .contact-page .bm-contatti__mappa { margin-top: clamp(1.5rem, 4vw, 2.5rem) !important; }
  .bm-mappa iframe { min-height: 18rem; }
}


/* --------------------------------------------------------------------------
   Manifesto — "Il contesto" e "Il nostro modello"
   Le due sezioni erano una fotografia e una colonna di testo alta il doppio:
   la pagina ci passava sopra due schermate. Ora seguono l'impaginato del
   resto del sito — occhiello e titolo nella colonna stretta a sinistra, il
   testo nella colonna larga — e i quattro capoversi del contesto corrono su
   due colonne, cosi' la sezione sta in una schermata.
   -------------------------------------------------------------------------- */

.bm-due-colonne {
  column-count: 2;
  column-gap: clamp(1.75rem, 3vw, 3.25rem);
}

.bm-due-colonne > p {
  margin-top: 0;
  margin-bottom: 1.35em;
  break-inside: avoid-column;
}

.bm-due-colonne > p:last-child { margin-bottom: 0; }

/* Sotto i 960 la colonna e' una sola: due colonne da 160px non si leggono. */
@media (max-width: 959px) {
  .bm-due-colonne { column-count: 1; }
}

/* Il titolo delle due sezioni resta appeso in alto accanto al testo, non
   centrato sulla colonna: e' lo stesso rapporto della home. */
@media (min-width: 960px) {
  #tm-main .bm-manifesto-voci { margin-top: 0; }
}


/* Sotto i 960 i segni d'angolo dei riquadri non si disegnano (.bm-hide-m):
   il fondo extra che serviva a ospitarli diventerebbe una fascia vuota. */
@media (max-width: 959px) {
  .bm-mossa__box > .uk-tile {
    padding-bottom: clamp(2.75rem, 6vw, 3.5rem);
    --bm-tile-pb: clamp(2.75rem, 6vw, 3.5rem);
  }

  .bm-profilo > .uk-tile {
    padding-bottom: clamp(2.5rem, 5.5vw, 3.25rem);
    --bm-tile-pb: clamp(2.5rem, 5.5vw, 3.25rem);
  }
}

/* --------------------------------------------------------------------------
   Il corpo del testo, una misura sola
   Il testo corrente arrivava in tre tarature diverse: 16px con interlinea
   1.3 (il valore del tema, quello dei capoversi sul chiaro), 17px con 1.7
   nei box del mosaico e 17,5px con 1.7 in quelli del dittico. Sul fondo
   colorato sembrava un altro carattere perche' lo era davvero, di mezzo
   punto. Qui il testo che si legge di seguito ha una misura sola, ovunque:
   17px con interlinea 1.7. Restano fuori le classi che dichiarano da se' di
   essere altro — il sommario, l'occhiello, le diciture minute.
   -------------------------------------------------------------------------- */

#tm-main .uk-panel p:not(.uk-text-lead):not(.uk-text-large):not(.uk-text-small):not(.uk-text-meta):not(.bm-manifesto-chiusura):not(.bm-occhiello):not(blockquote p),
#tm-main .uk-panel li:not([class]),
#tm-main p.p1,
.bm-profilo__testo,
.bm-mossa__testo,
.bm-steps__testo,
.contact-page .bm-contact-aside p,
.contact-page [data-modulo] > p {
  font-size: 1.0625rem;
  line-height: 1.7;
}

@media (max-width: 639px) {
  #tm-main .uk-panel p:not(.uk-text-lead):not(.uk-text-large):not(.uk-text-small):not(.uk-text-meta):not(.bm-manifesto-chiusura):not(.bm-occhiello):not(blockquote p),
  #tm-main .uk-panel li:not([class]),
  #tm-main p.p1,
  .bm-profilo__testo,
  .bm-mossa__testo,
  .bm-steps__testo,
  .contact-page .bm-contact-aside p,
  .contact-page [data-modulo] > p { font-size: 1rem; line-height: 1.65; }
}

/* --------------------------------------------------------------------------
   Contatti — i recapiti
   L'occhiello resta oro, com'e' in tutto il sito; indirizzo, telefono e
   posta passano all'inchiostro: sono l'informazione della pagina, non una
   didascalia, e sull'azzurro chiaro l'oro su oro si leggeva a fatica.
   -------------------------------------------------------------------------- */

/* Il !important non e' pigrizia: il tema scrive .uk-text-muted{color:#b89b74
   !important} e su quello non vince nessun numero di classi. */
#tm-main.contact-page .bm-contact-aside p,
#tm-main.contact-page .bm-contact-aside p.uk-text-muted,
#tm-main.contact-page .bm-contact-aside a,
#tm-main.contact-page .bm-contact-aside a.uk-link-muted {
  color: var(--bm-ink, #0b1f3a) !important;
}

#tm-main.contact-page .bm-contact-aside a:hover,
#tm-main.contact-page .bm-contact-aside a.uk-link-muted:hover {
  color: var(--bm-accent-deep, #b89b74) !important;
}

/* --------------------------------------------------------------------------
   Manifesto — la chiusura
   Il titolo di chiusura e' l'unico .uk-heading-xlarge del sito che sia una
   frase intera invece di due parole: a 128px, dentro mezza colonna, faceva
   sette righe alte in tutto 717px e arrivava a toccare il bordo della fascia.
   Qui prende una misura tarata sulla colonna che lo ospita.
   -------------------------------------------------------------------------- */

@media (min-width: 960px) {
  .bm-chiusura__titolo { font-size: clamp(2.75rem, 4.6vw, 4.5rem); }
}


/* --------------------------------------------------------------------------
   La citazione sulla fotografia (home)
   E' il testo piu' grande della sezione, non un capoverso: la regola sul
   corpo del testo la stava riportando a 17px insieme a tutti gli altri <p>
   dentro un .uk-panel. Qui torna a essere una citazione e cresce con la
   pagina, perche' il riquadro navy che la ospita cresce con lei.
   -------------------------------------------------------------------------- */

/* Da 960 in su cresce con la pagina fino a 56px. Il minimo e' 34 e non 40
   perche' fra i 960 e i 1200 la colonna che ospita la citazione e' stretta e
   il riquadro tiene 90px di margine per lato: a 40px la frase andava su otto
   righe e riempiva il riquadro fino all'orlo. Dai 1380 in su comanda il 2.9vw.
   Sotto i 960 resta la regola del telefono piu' in alto in questo file. */
@media (min-width: 960px) {
  #tm-main blockquote,
  #tm-main blockquote p {
    font-size: clamp(2.125rem, 2.9vw, 3.5rem);
    line-height: 1.22;
  }
}

/* --------------------------------------------------------------------------
   Mission & Vision — occhiello e titolo dentro i due riquadri
   I due blocchi erano quattro capoversi di fila sotto un numero: adesso hanno
   la stessa gerarchia del resto del sito — etichetta, titolo, testo — e il
   riquadro si riempie invece di lasciare una fascia vuota in fondo.
   -------------------------------------------------------------------------- */

.bm-mossa__box .bm-numero { margin-bottom: clamp(1.5rem, 2.6vw, 2.5rem); }

.bm-mossa__titolo {
  max-width: 24ch;
  margin: 0 0 clamp(1.5rem, 2.4vw, 2.25rem);
  font-family: Genos, sans-serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.25vw, 2.6rem);
  line-height: 1.04;
  letter-spacing: -.005em;
}

/* Sull'oro pieno il titolo prende il navy, come gli altri testi del riquadro. */
.uk-tile-muted .bm-mossa__titolo { color: var(--bm-ink, #0b1f3a); }

/* Il riquadro su due colonne: numero, etichetta e titolo a sinistra, il testo
   a destra. Prima erano quattro capoversi incolonnati a meta' riquadro, con
   una fascia vuota a destra larga quanto il testo e una in fondo: e' lo stesso
   rapporto 2/5-3/5 del resto del sito, e il riquadro si dimezza in altezza. */
@media (min-width: 960px) {
  .bm-mossa__box > .uk-tile {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: clamp(2rem, 3.6vw, 4.5rem);
    align-content: start;
  }

  .bm-mossa__intro { grid-column: 1; align-self: start; }
  .bm-mossa__corpo { grid-column: 2; }
  .bm-mossa__titolo { margin-bottom: 0; }
}

@media (max-width: 959px) {
  .bm-mossa__corpo { margin-top: clamp(1.5rem, 4vw, 2rem); }
}