/* ==========================================================================
   Reibanq — Base: reset misurato, tipografia, layout, utility
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* le ancore non finiscono sotto l'header fisso */
  scroll-padding-top: calc(var(--rb-header-h-sticky) + 1.5rem);
}

body {
  margin: 0;
  font-family: var(--rb-font-text);
  font-size: var(--rb-body-size);
  line-height: var(--rb-lh-body);
  color: var(--rb-body);
  background: var(--rb-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-family: var(--rb-font-display);
  color: var(--rb-ink);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--rb-h1); font-weight: 800; line-height: var(--rb-lh-tight); letter-spacing: -0.035em; }
/* §2.3 del 29/08/2026, autorizzato da Zoran, solo sui titoli hero di
   business.html e people.html: peso pieno della scorta variabile Overpass
   (arriva a 900) e tracking piu' stretto. Stesso font, non cambiato. */
.rb-h1--punchy { font-weight: 900; letter-spacing: -0.045em; }
h2 { font-size: var(--rb-h2); font-weight: 700; line-height: var(--rb-lh-head); letter-spacing: -0.03em; }
h3 { font-size: var(--rb-h3); font-weight: 700; line-height: 1.2; }
h4 { font-size: var(--rb-h4); font-weight: 600; line-height: 1.3; }
h5 { font-size: var(--rb-h5); font-weight: 600; line-height: 1.4; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

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

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: 0.45em; }

strong, b { font-weight: 700; color: var(--rb-ink); }
small { font-size: var(--rb-small); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--rb-orange);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--rb-orange); color: #fff; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.rb-container {
  width: min(100% - (var(--rb-gutter) * 2), var(--rb-container));
  margin-inline: auto;
}
.rb-container--wide { width: min(100% - (var(--rb-gutter) * 2), var(--rb-container-wide)); }
.rb-container--narrow { width: min(100% - (var(--rb-gutter) * 2), 760px); }

.rb-section {
  position: relative;
  padding-block: var(--rb-section-y);
}
.rb-section--lg { padding-block: var(--rb-section-y-lg); }
.rb-section--tight { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.rb-section--alt { background: var(--rb-surface-alt); }
.rb-section--warm { background: var(--rb-surface-warm); }
.rb-section--dark { background: var(--rb-navy-deep); }
.rb-section--dark h1, .rb-section--dark h2,
.rb-section--dark h3, .rb-section--dark h4 { color: #fff; }

/* Griglie.
   Ogni modificatore dichiara da se' `display: grid` e il proprio gap: cosi'
   `class="rb-container rb-grid--split"` funziona senza dover ricordare di
   aggiungere anche `rb-grid`. Dimenticarlo lasciava la sezione a `display:
   block`, cioe' le due colonne impilate su desktop senza nessun errore. */
.rb-grid,
[class*="rb-grid--"] { display: grid; gap: var(--rb-gap); }
.rb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Non esiste piu' un `rb-grid--4`: tre card per riga sono il massimo, cosi' ha
   deciso Zoran il 26/08/2026. Le dodici sezioni che lo usavano avevano tutte
   esattamente quattro card, quindi sono passate a `rb-grid--2`, cioe' 2x2,
   senza lasciare card orfane in fondo alla riga. */
.rb-grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--rb-gap-xl); align-items: center; }
.rb-grid--split-wide { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--rb-gap-xl); align-items: center; }
.rb-grid--aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--rb-gap-xl); align-items: center; }
/* Da accompagnare a uno dei tre qui sopra: allinea le colonne in alto invece
   che al centro. Serve quando una colonna porta il titolo e l'altra comincia
   dal corpo del testo, che altrimenti galleggia a mezz'altezza. */
.rb-grid--split-top { align-items: start; }

/* Bento a misure miste, sul modello 21st.dev "Bento Product Features"
   (rifatto il 29/08/2026, autorizzato da Zoran): non piu' una cella grande
   2x2 in alto a sinistra, ma una colonna alta a sinistra che occupa tutte e
   tre le righe, con quattro celle piccole in una griglia 2x2 alla sua destra
   e un'ultima cella larga che chiude in basso, su due colonne. La mappa dei
   sei figli sulle lettere resta la stessa di prima: cambia solo dove ogni
   lettera sta nella griglia. Sotto i 980px la colonna alta diventa una fascia
   larga in cima (non puo' restare stretta e altissima su schermi piu' piccoli
   della sua colonna), sotto i 620px torna una colonna sola. */
.rb-grid--bento {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(180px, auto));
  grid-template-areas:
    "a b c"
    "a d e"
    "a f f";
}
.rb-grid--bento > *:nth-child(1) { grid-area: a; }
.rb-grid--bento > *:nth-child(2) { grid-area: b; }
.rb-grid--bento > *:nth-child(3) { grid-area: c; }
.rb-grid--bento > *:nth-child(4) { grid-area: d; }
.rb-grid--bento > *:nth-child(5) { grid-area: e; }
.rb-grid--bento > *:nth-child(6) { grid-area: f; }
@media (max-width: 980px) {
  .rb-grid--bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas:
      "a a"
      "b c"
      "d e"
      "f f";
  }
}
@media (max-width: 620px) {
  .rb-grid--bento {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "a" "b" "c" "d" "e" "f";
  }
}

.rb-stack { display: flex; flex-direction: column; gap: var(--rb-gap); align-items: flex-start; }
.rb-row { display: flex; flex-wrap: wrap; gap: var(--rb-gap-sm); align-items: center; }

.rb-order-first { order: -1; }

/* La griglia a tre passa a due prima delle altre, a 1100px e non a 980. Fra i
   981 e i 1100 teneva tre colonne su card da 292-313px, e li' dentro il titolo
   di una card scendeva a 19 caratteri per riga: il punto piu' stretto rimasto
   dopo il giro sui testi del 30/08. A due colonne la stessa card vale 514px e
   il titolo ne fa 36. Sopra i 1100 le tre colonne restano, con 20 caratteri per
   riga che salgono a 25 sul desktop pieno. Le altre griglie non c'entrano e
   restano a 980: `split` e `aside` non spezzano un testo in colonne strette,
   accostano un testo a un'immagine. */
@media (max-width: 1100px) {
  .rb-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .rb-grid--split, .rb-grid--split-wide, .rb-grid--aside { grid-template-columns: minmax(0, 1fr); gap: var(--rb-gap-lg); }
  .rb-grid--split > .rb-media, .rb-grid--aside > .rb-media { order: -1; }
}
@media (max-width: 620px) {
  .rb-grid--2, .rb-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Testa di sezione
   -------------------------------------------------------------------------- */
.rb-head { max-width: 62ch; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.5rem); }
.rb-head--center { margin-inline: auto; text-align: center; }
.rb-head > p { font-size: var(--rb-body-lg); color: var(--rb-body); }

.rb-eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1rem;
  font-family: var(--rb-font-display);
  font-size: var(--rb-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Arancio scurito e non l'arancio pieno: e' la regola gia' scritta accanto a
     --rb-orange-deep in tokens.css, arancio come testo piccolo su fondo chiaro.
     A 13px il #e9531d fa 3,67:1 su bianco, 3,45:1 sulla sezione alternata e
     3,44:1 su quella calda, contro il 4,5:1 che serve a questa dimensione. Il
     #c8410f fa rispettivamente 4,98, 4,68 e 4,67. */
  color: var(--rb-orange-deep);
}
.rb-theme-dark .rb-eyebrow { color: var(--rb-orange-light); }

/* --------------------------------------------------------------------------
   Utility misurate (non un framework: solo quelle davvero usate)
   -------------------------------------------------------------------------- */
.rb-lede { font-size: var(--rb-body-lg); line-height: 1.55; color: var(--rb-body); }
.rb-center { text-align: center; }
.rb-mt-0 { margin-top: 0; }
.rb-mb-0 { margin-bottom: 0; }
.rb-mt { margin-top: var(--rb-gap); }
.rb-mt-lg { margin-top: var(--rb-gap-lg); }
.rb-muted { color: var(--rb-muted); }
.rb-small { font-size: var(--rb-small); line-height: 1.5; }
.rb-nowrap { white-space: nowrap; }

.rb-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.rb-skip {
  position: absolute;
  top: -100px;
  left: var(--rb-gutter);
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--rb-navy);
  color: #fff;
  border-radius: 0 0 var(--rb-r-sm) var(--rb-r-sm);
  transition: top var(--rb-t-fast) var(--rb-ease);
}
.rb-skip:focus { top: 0; }