/*
Theme Name: Dolomitissime Careers
Theme URI: https://dolomitissime.rightbraincommunication.com/
Description: Tema carriere proprietario di Dolomitissime — child theme di GeneratePress. Impianto brand-agnostico governato da design token in :root; identità Dolomitissime (navy + serif Neuton + Lato) applicata via variabili.
Template: generatepress
Author: Right Brain Communication
Version: 1.0.0
Text Domain: dolomitissime-careers
*/

/* ============================================================
   DESIGN TOKEN — tutta l'identità visiva vive qui.
   Ri-brand = cambiare questi valori, nient'altro.
   Valori provvisori derivati dal sito madre dolomitissime.com
   (palette blu/navy, Neuton serif, Lato). Da confermare con
   gli asset ufficiali del cliente.
   ============================================================ */
:root {
  /* --- BRAND: blu Dolomitissime --- */
  --dolo-navy:        #002856; /* primario: titoli, header, footer, testo forte su chiaro */
  --dolo-navy-dark:   #001B3D; /* hover / ombre profonde */
  --dolo-blue:        #5C8CC5; /* accento medio: SOLO su scuro/foto o UI large (contrasto ~3:1 su bianco) */
  --dolo-blue-light:  #8FB3DB;
  /* accento su sfondo CHIARO — passa WCAG AA (≥4.5:1 su bianco): link, CTA testo, bordi */
  --dolo-accent-text:      #2A5DA8; /* ~6.5:1 su bianco */
  --dolo-accent-text-dark: #204A85; /* hover */

  /* --- NEUTRI --- */
  --color-dark:        #14243A; /* sezioni scure (navy quasi nero) */
  --color-text:        #404040; /* corpo (dal sito madre) */
  --color-text-strong: #212121;
  --color-text-light:  #6A727F; /* muted accessibile (~4.6:1), scurito da #8E98A0 */
  --color-bg:          #FFFFFF;
  --color-bg-soft:     #F2F7FC; /* azzurro tenue (dal sito madre) */
  --color-bg-alt:      #F4F4F4;
  --color-border:      #E2E8F0;

  /* --- TIPOGRAFIA --- */
  --font-heading: 'Neuton', Georgia, 'Times New Roman', serif;
  --font-body:    'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, sans-serif;
  /* Didascalie di persone e localita': il sito madre le compone in Montserrat
     300 a 14px (nome in Neuton, ruolo e sede in Montserrat). Sul sito madre il
     file non viene mai caricato e si vede Arial: qui Montserrat e' servito dal
     nostro dominio, quindi il brand si vede davvero come e' stato pensato. */
  --font-caption: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- SPAZIO / FORMA --- */
  --max-width:       1200px;
  --section-padding: 96px 0;
  --radius:          8px;
  --radius-pill:     100px;
  --shadow-soft:     0 10px 30px rgba(0, 40, 86, .08);
  --shadow-card:     0 4px 18px rgba(0, 40, 86, .10);
}

/* ============================================================
   BASE — consuma i token, niente valori hardcoded
   ============================================================ */
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 17px;
  line-height: 1.65;
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--dolo-navy);
  line-height: 1.15;
  font-weight: 700;
}
a { color: var(--dolo-accent-text); }
a:hover { color: var(--dolo-accent-text-dark); }

.dolo-container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.dolo-section { padding: var(--section-padding); }
.dolo-section-soft { background: var(--color-bg-soft); }
.dolo-section-dark { background: var(--color-dark); color: #E8EEF6; }
.dolo-section-dark h1, .dolo-section-dark h2, .dolo-section-dark h3 { color: #FFFFFF; }

/* --- Header di sezione uniforme --- */
.dolo-section-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--dolo-accent-text);
  margin-bottom: 14px;
}
.dolo-section-dark .dolo-section-eyebrow { color: var(--dolo-blue-light); }
/* text-wrap: balance distribuisce le parole sulle righe in modo uniforme, cosi'
   un titolo o un sommario non finisce con una riga da una parola sola ("...di
   costruire qualcosa di / reale."). Il browser lo applica fino a poche righe,
   che e' esattamente il caso di titoli e sommari; dove non e' supportato viene
   ignorato e il testo torna ad andare a capo come prima. */
.dolo-section-title { font-size: clamp(30px, 4vw, 46px); margin: 0 0 18px; text-wrap: balance; }
.dolo-section-desc { font-size: 19px; color: var(--color-text-light); max-width: 620px; text-wrap: balance; }
.dolo-section-dark .dolo-section-desc { color: #B9C6D8; }

/* --- Pulsante firma (CTA) --- */
.dolo-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: 16px;
  padding: 15px 30px; border-radius: var(--radius-pill);
  text-decoration: none; cursor: pointer; border: 2px solid var(--dolo-navy);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.dolo-btn-solid { background: var(--dolo-navy); color: #fff; }
.dolo-btn-solid:hover { background: var(--dolo-navy-dark); border-color: var(--dolo-navy-dark); color: #fff; transform: translateY(-2px); }
.dolo-btn-ghost { background: transparent; color: var(--dolo-navy); }
.dolo-btn-ghost:hover { background: var(--dolo-navy); color: #fff; transform: translateY(-2px); }
/* Ghost su QUALSIASI fondo scuro: senza questo il testo resta navy su navy
   (era invisibile nelle fasce CTA di percorsi, il-mestiere, processo, perché, storie). */
.dolo-section-dark .dolo-btn-ghost,
.dolo-cta-band .dolo-btn-ghost,
.dolo-hero .dolo-btn-ghost,
.dolo-stats .dolo-btn-ghost,
.dolo-cta-accent .dolo-btn-ghost,
.dolo-manifesto .dolo-btn-ghost,
.dolo-converge .dolo-btn-ghost { color: #fff; border-color: rgba(255,255,255,.75); }
.dolo-section-dark .dolo-btn-ghost:hover,
.dolo-cta-band .dolo-btn-ghost:hover,
.dolo-hero .dolo-btn-ghost:hover,
.dolo-stats .dolo-btn-ghost:hover,
.dolo-cta-accent .dolo-btn-ghost:hover,
.dolo-manifesto .dolo-btn-ghost:hover,
.dolo-converge .dolo-btn-ghost:hover { background: #fff; color: var(--dolo-navy); border-color: #fff; }

/* ============================================================
   HERO home
   ============================================================ */
.dolo-hero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(0,27,61,.72), rgba(0,40,86,.86)),
    var(--dolo-navy);
  color: #fff;
  padding: clamp(90px, 14vw, 180px) 0;
  text-align: center;
  overflow: hidden;
}
.dolo-hero h1 { color: #fff; font-size: clamp(40px, 6vw, 76px); margin: 0 0 22px; }
.dolo-hero p { font-size: clamp(18px, 2.4vw, 23px); color: #D6E1F0; max-width: 680px; margin: 0 auto 34px; }
.dolo-hero .dolo-btn-solid { background: #fff; color: var(--dolo-navy); border-color: #fff; }
.dolo-hero .dolo-btn-solid:hover { background: #E8EEF6; color: var(--dolo-navy-dark); }

/* HERO con foto di sfondo + overlay navy */
.dolo-hero-photo { position: relative; background: var(--dolo-navy); }
.dolo-hero-photo .dolo-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center center;
}
/* Video di sfondo dell'hero: copre l'area come una background-image */
.dolo-hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (prefers-reduced-motion: reduce) { .dolo-hero-video { display: none; } }
/* Overlay leggero: la foto resta a colori (coerenza con Dolomitissime e Dolomiti
   Rentals, che mostrano le cover a colori), solo un velo minimo per far poggiare
   il testo. La leggibilità la garantisce il text-shadow qui sotto, non il navy. */
.dolo-hero-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,20,45,.22) 0%, rgba(0,20,45,.12) 45%, rgba(0,20,45,.4) 100%);
}
.dolo-hero-photo > .dolo-container { position: relative; z-index: 2; }
.dolo-hero-photo h1,
.dolo-hero-photo p { text-shadow: 0 2px 18px rgba(0,15,35,.65), 0 1px 3px rgba(0,15,35,.55); }

/* ============================================================
   LE NOSTRE PERSONE (griglia foto team, senza didascalie)
   ============================================================ */
.dolo-people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dolo-people-grid img {
  width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block;
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  transition: transform .35s ease;
}
.dolo-people-grid img:hover { transform: scale(1.03); }
/* 8 foto: 4×2 o 2×4 (righe piene). Si salta il passo a 3 colonne, che darebbe 3+3+2. */
@media (max-width: 620px) { .dolo-people-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   MURO DI RITRATTI a scorrimento (home, "Alcune delle nostre persone")
   I volti crescono e svaniscono mentre attraversano lo schermo, dietro un
   titolo sticky in fusione. Le scale le calcola dolo-portraits.js.
   ============================================================ */
.dolo-pwall {
  position: relative;
  background: var(--color-bg-soft);
  /* isolate: la fusione del titolo resta dentro la sezione, non "sfonda" sul resto */
  isolation: isolate;
  overflow: hidden;
}

/* Titolo che resta al centro mentre le foto scorrono dietro. exclusion: su foto
   scure diventa chiaro, sul fondo chiaro diventa scuro — sempre leggibile. */
.dolo-pwall-sticky {
  position: sticky; top: 50%; z-index: 2;
  transform: translateY(-50%);
  pointer-events: none; text-align: center;
  color: #fff; mix-blend-mode: exclusion;
  padding: 0 24px;
}
.dolo-pwall-title {
  font-family: var(--font-heading); font-weight: 800; color: #fff;
  font-size: clamp(30px, 7vw, 88px); line-height: 1.02; letter-spacing: -.02em;
  max-width: 14ch; margin: 0 auto;
}
.dolo-pwall-meta {
  margin: 14px auto 0; font-size: clamp(11px, 1.4vw, 14px);
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
}

/* 18vh (era 50vh): con la griglia fitta bastano per far entrare e uscire i
   volti, senza chiedere schermate di scorrimento quasi vuote. */
.dolo-pwall-grid { position: relative; z-index: 1; margin: 18vh 0; }
.dolo-pwall-row { display: flex; }
.dolo-pwall-cell { flex: 1; aspect-ratio: 1; }
.dolo-pwall-item { position: relative; height: 100%; width: 100%; }
.dolo-pwall-item img {
  display: block; height: 100%; width: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.12);
  transition: filter .45s ease;
}
/* Al passaggio del mouse il volto torna a colori e compare il nome. */
.dolo-pwall-item:hover img,
.dolo-pwall-item:focus-within img { filter: none; }

.dolo-pwall-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; gap: 2px; padding: 26px 14px 12px;
  background: linear-gradient(to top, rgba(0,20,45,.88), rgba(0,20,45,0));
  color: #fff; text-align: left;
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.dolo-pwall-item:hover .dolo-pwall-label,
.dolo-pwall-item:focus-within .dolo-pwall-label { opacity: 1; transform: none; }
.dolo-pwall-label strong { font-family: var(--font-heading); font-size: 17px; line-height: 1.2; }
.dolo-pwall-label span { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: #C6D4E6; }
/* Stato iniziale SOLO con JS attivo: senza JS i volti restano visibili (scale 1). */
.dolo-js .dolo-pwall-item { transform: scale(0); will-change: transform; }

/* Touch: l'hover non esiste, quindi nome e colori restano sempre visibili —
   altrimenti su telefono quell'informazione sarebbe irraggiungibile. */
@media (hover: none) {
  .dolo-pwall-item img { filter: none; }
  .dolo-pwall-label { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  /* 5 colonne su mobile darebbero volti minuscoli: le celle vuote spariscono e
     restano 2 volti per riga (i restanti vanno a capo), quindi grandi e fitti. */
  .dolo-pwall-cell:empty { display: none; }
  .dolo-pwall-row { flex-wrap: wrap; }
  .dolo-pwall-cell { flex: 0 0 50%; }
  .dolo-pwall-grid { margin: 14vh 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* !important: deve battere lo stile inline scritto dal JS */
  .dolo-js .dolo-pwall-item { transform: none !important; }
  .dolo-pwall-grid { margin: 60px 0; }
}

/* ============================================================
   FASCIA NUMERI (stats) — la sezione più riusata
   ============================================================ */
.dolo-stats { background: var(--color-dark); color: #fff; padding: 70px 0; }
.dolo-stats-grid { display: grid; gap: 30px; text-align: center; }
.dolo-stats-4 { grid-template-columns: repeat(4, 1fr); }
.dolo-stats-3 { grid-template-columns: repeat(3, 1fr); }
.dolo-stat-num {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(40px, 5vw, 60px); color: var(--dolo-blue-light); line-height: 1;
}
.dolo-stat-label { margin-top: 10px; font-size: 15px; letter-spacing: .04em; color: #B9C6D8; text-transform: uppercase; }
@media (max-width: 900px) { .dolo-stats-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dolo-stats-4, .dolo-stats-3 { grid-template-columns: 1fr; } }

/* ============================================================
   MOTORE ANIMAZIONI — reveal + counter (reduced-motion safe)
   ============================================================ */
/* Nascosto SOLO se il JS è attivo (classe .dolo-js su <html>): senza JS il contenuto
   resta pienamente visibile — niente rischio di sezioni vuote. */
.dolo-js .dolo-reveal { opacity: 0; transform: translateY(22px);
  transition: opacity .8s ease, transform .8s ease; transition-delay: var(--d, 0s); }
.dolo-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .dolo-js .dolo-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Utility */
.dolo-center { text-align: center; }
.dolo-mt-sm { margin-top: 16px; } .dolo-mt-md { margin-top: 32px; } .dolo-mt-lg { margin-top: 56px; }
.dolo-btn-sm { padding: 11px 22px; font-size: 15px; }

/* ============================================================
   HEADER + NAV
   ============================================================ */
/* Salta al contenuto: invisibile finché non riceve il focus da tastiera,
   poi ben visibile sopra a tutto (z-index più alto dell'header fisso). */
.dolo-skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 200;
  background: #fff; color: var(--dolo-navy); font-weight: 700; font-size: 15px;
  padding: 14px 22px; border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none; box-shadow: var(--shadow-soft);
  transition: top .2s ease;
}
.dolo-skip-link:focus { top: 0; }
/* Header integrato nell'hero: SOLIDO di default (sicuro senza JS), TRASPARENTE in cima
   grazie a .is-top aggiunta dal JS. Tutte le pagine aprono con una sezione scura, quindi
   in cima il testo bianco è sempre leggibile. */
.dolo-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  /* SOLIDO di default: senza JS il menu resta sempre leggibile. */
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border); box-shadow: 0 4px 18px rgba(0,40,86,.06);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* .is-top lo aggiunge il JS quando si è in cima: header integrato nell'hero. */
.dolo-header.is-top {
  background: transparent; border-bottom-color: transparent; box-shadow: none;
}
/* Stato trasparente: testo e logo chiari */
.dolo-header.is-top .dolo-nav a { color: #fff; }
.dolo-header.is-top .dolo-nav a:hover { color: var(--dolo-blue-light); }
.dolo-header.is-top .dolo-nav .dolo-nav-cta { background: #fff; color: var(--dolo-navy); }
.dolo-header.is-top .dolo-nav .dolo-nav-cta:hover { background: #E8EEF6; color: var(--dolo-navy-dark); }
.dolo-header.is-top .dolo-brand-name { color: #fff; }
.dolo-header.is-top .dolo-nav-toggle span { background: #fff; }
.dolo-header.is-top .dolo-lang-link { color: rgba(255,255,255,.7); }
.dolo-header.is-top .dolo-lang-link:hover,
.dolo-header.is-top .dolo-lang-link.is-current { color: #fff; background: rgba(255,255,255,.16); }
.dolo-header.is-top .dolo-brand.dolo-brand-img .dolo-brand-tag {
  background: rgba(255,255,255,.16); color: #fff;
}
/* Swap del logo chiaro/scuro */
.dolo-logo.dolo-logo-light { display: none; }
.dolo-header.is-top .dolo-logo.dolo-logo-light { display: block; }
.dolo-header.is-top .dolo-logo.dolo-logo-dark { display: none; }
/* Il menu mobile aperto è sempre su fondo bianco */
@media (max-width: 1150px) {
  .dolo-header.is-top .dolo-nav.is-open a { color: var(--dolo-navy); }
  .dolo-header.is-top .dolo-nav.is-open .dolo-nav-cta { background: var(--dolo-navy); color: #fff; }
}
.dolo-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; height: 74px; }
.dolo-brand { flex-shrink: 0; }
.dolo-brand { display: flex; flex-direction: column; line-height: 1; text-decoration: none; }
.dolo-brand-name { font-family: var(--font-heading); font-weight: 800; font-size: 26px; color: var(--dolo-navy); letter-spacing: .01em; }
.dolo-brand-tag { font-family: var(--font-body); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--dolo-accent-text); margin-top: 3px; white-space: nowrap; }
/* Logo ufficiale (navy su trasparente) */
.dolo-brand.dolo-brand-img { flex-direction: row; align-items: center; gap: 14px; }
.dolo-logo { height: 46px; width: auto; display: block; }
.dolo-brand.dolo-brand-img .dolo-brand-tag {
  margin-top: 0; padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--color-bg-soft); color: var(--dolo-accent-text); font-size: 10px;
}
@media (max-width: 520px) { .dolo-logo { height: 36px; } .dolo-brand-img .dolo-brand-tag { display: none; } }

.dolo-nav { display: flex; align-items: center; gap: 20px; }
.dolo-nav a { font-family: var(--font-body); font-weight: 700; font-size: 14.5px; color: var(--dolo-navy); text-decoration: none; transition: color .2s; white-space: nowrap; }
.dolo-nav a:hover { color: var(--dolo-accent-text); }
.dolo-nav .dolo-nav-cta {
  background: var(--dolo-navy); color: #fff; padding: 10px 22px; border-radius: var(--radius-pill);
}
.dolo-nav .dolo-nav-cta:hover { background: var(--dolo-navy-dark); color: #fff; }

/* --- Sottomenu di "Chi siamo" --- */
.dolo-nav-has-sub { position: relative; display: inline-flex; align-items: center; }
.dolo-subnav {
  position: absolute; top: 100%; left: 50%; z-index: 60;
  transform: translateX(-50%) translateY(6px);
  display: grid; min-width: 210px; padding: 8px;
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-soft);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
}
/* focus-within: il sottomenu si apre anche navigando da tastiera, non solo col mouse */
.dolo-nav-has-sub:hover .dolo-subnav,
.dolo-nav-has-sub:focus-within .dolo-subnav {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
/* Ponte invisibile sopra il pannello: senza, il mouse "cade" nel vuoto fra
   voce e sottomenu e il dropdown si chiude a metà strada. */
.dolo-subnav::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; }
/* Il pannello è bianco anche con header trasparente: i link restano scuri. */
.dolo-nav .dolo-subnav a,
.dolo-header.is-top .dolo-nav .dolo-subnav a {
  color: var(--dolo-navy); font-size: 14.5px; padding: 10px 13px; border-radius: 6px; white-space: nowrap;
}
.dolo-nav .dolo-subnav a:hover,
.dolo-header.is-top .dolo-nav .dolo-subnav a:hover { background: var(--color-bg-soft); color: var(--dolo-accent-text); }

/* Selettore lingua */
.dolo-lang { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; }
.dolo-lang-link {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 5px 8px;
  border-radius: var(--radius-pill); color: var(--color-text-light); text-decoration: none;
}
.dolo-lang-link:hover { color: var(--dolo-navy); background: var(--color-bg-soft); }
.dolo-lang-link.is-current { color: var(--dolo-navy); background: var(--color-bg-soft); }

.dolo-nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.dolo-nav-toggle span { width: 26px; height: 2px; background: var(--dolo-navy); transition: .3s; }

@media (max-width: 1150px) {
  .dolo-nav-toggle { display: flex; }
  .dolo-nav {
    position: absolute; top: 74px; left: 0; right: 0; flex-direction: column; gap: 0;
    background: #fff; border-bottom: 1px solid var(--color-border);
    max-height: 0; overflow: hidden;
    /* Chiuso: visibility passa a hidden SOLO a fine animazione (delay .35s), così i
       link escono davvero dal tab-order invece di restare a fuoco ma invisibili. */
    visibility: hidden;
    transition: max-height .35s ease, visibility 0s .35s;
  }
  .dolo-nav.is-open {
    /* alzato per far stare anche le sottovoci di "Chi siamo" */
    max-height: 660px; visibility: visible;
    transition: max-height .35s ease, visibility 0s; /* aprendo: visibile subito */
  }
  .dolo-nav a { width: 100%; padding: 16px 24px; border-top: 1px solid var(--color-border); }
  .dolo-nav .dolo-nav-cta { border-radius: 0; text-align: center; }

  /* Nel menu a colonna il dropdown non ha senso: le sottovoci restano in linea,
     rientrate, sempre visibili (niente tap in più per raggiungerle). */
  .dolo-nav-has-sub { display: block; width: 100%; }
  /* La voce che apre il gruppo non e' figlia diretta del menu in colonna:
     va resa blocco a mano, altrimenti resta inline e larga quanto il testo. */
  .dolo-nav-has-sub > a { display: block; width: 100%; }
  .dolo-subnav {
    /* relative (serve alla riga verticale ::after) ma con left/transform azzerati:
       da desktop il dropdown e' centrato con left:50% + translateX(-50%), e senza
       questo reset la sottolista resterebbe spostata a meta' schermo, sforando. */
    position: relative; left: auto; right: auto; top: auto;
    transform: none; opacity: 1; visibility: visible;
    /* colonna esplicita: i link del sottomenu NON sono figli diretti di .dolo-nav,
       quindi il flex del menu non li trasforma in blocchi. Restando inline,
       `width:100%` non li allargava (si affiancavano due per riga) e il
       `border-top` — che su un elemento inline non partecipa al flusso —
       attraversava il testo invece di separarlo. */
    display: flex; flex-direction: column;
    min-width: 0; padding: 0;
    background: transparent; border: 0; box-shadow: none;
  }
  .dolo-subnav::before { display: none; }
  /* Solo geometria: il colore resta quello desktop (navy), così non c'è una
     seconda dichiarazione di `color` in conflitto con la regola principale. */
  .dolo-nav .dolo-subnav a,
  .dolo-header.is-top .dolo-nav .dolo-subnav a {
    display: block; width: 100%;
    padding: 14px 24px 14px 44px; border-radius: 0; font-size: 14.5px;
  }
  /* Il rientro delle sottovoci e' gia' dato dal padding-left: una riga verticale
     lo rende leggibile come "queste dipendono da Chi siamo". */
  .dolo-nav .dolo-subnav::after {
    content: ""; position: absolute; left: 26px; top: 6px; bottom: 6px;
    width: 2px; background: var(--color-border); border-radius: 2px;
  }
  .dolo-nav .dolo-subnav a { border-top: 0; color: var(--color-text-light); }
  /* La voce che apre il gruppo non ha bisogno del separatore sopra le sue figlie */
  .dolo-nav-has-sub > a { border-top: 1px solid var(--color-border); }
}

/* ============================================================
   PAGE HERO (pagine interne)
   ============================================================ */
.dolo-page-hero {
  background: linear-gradient(180deg, var(--dolo-navy), var(--dolo-navy-dark));
  color: #fff;
  /* +74px: l'header è fisso e trasparente, sovrapposto */
  padding: calc(74px + clamp(46px, 7vw, 86px)) 0 clamp(50px, 7vw, 84px);
}
.dolo-page-hero h1 { color: #fff; font-size: clamp(34px, 5vw, 56px); margin: 10px 0 0; }
.dolo-page-hero-desc { color: #D6E1F0; font-size: 19px; max-width: 640px; margin: 18px 0 0; text-wrap: pretty; }
/* block + fit-content: l'occhiello che segue va a capo, senza allargare l'area cliccabile */
/* padding verticale per arrivare a 24px di area toccabile (WCAG 2.5.8):
   il solo testo ne misurava 23, un pelo sotto la soglia. */
.dolo-back { display: block; width: fit-content; color: #B9C6D8; text-decoration: none; font-size: 14px; font-weight: 700; margin-bottom: 10px; padding: 4px 0; min-height: 24px; }
.dolo-back:hover { color: #fff; }

/* Un solo percorso (non due affiancati come nella griglia .dolo-paths) */
.dolo-path-single { max-width: 640px; margin: 0 auto; }

/* Nota onesta "contenuto in arrivo": non finge di essere completa. */
.dolo-soon {
  max-width: 640px; margin: 0 auto; text-align: center;
  border: 1.5px dashed rgba(143,179,219,.5); border-radius: var(--radius);
  padding: 26px 28px;
}
.dolo-soon h3 { color: #fff; font-size: 18px; margin: 0 0 8px; }
.dolo-soon p { color: #B9C6D8; font-size: 15px; line-height: 1.6; margin: 0; }

/* ============================================================
   CHIP + JOB CARD
   ============================================================ */
.dolo-chip {
  display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--dolo-navy); color: #fff;
}
.dolo-chip-ghost { background: transparent; color: var(--dolo-accent-text); border: 1px solid var(--color-border); }
.dolo-job-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.dolo-job-list { display: flex; flex-direction: column; gap: 14px; max-width: 860px; margin: 0 auto; }
.dolo-job-card {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 22px 26px; box-shadow: var(--shadow-card); transition: transform .25s, box-shadow .25s;
}
.dolo-job-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.dolo-job-card-title { font-size: 22px; margin: 0; }
.dolo-job-card-actions { display: flex; gap: 10px; flex-shrink: 0; }
@media (max-width: 640px) {
  .dolo-job-card { flex-direction: column; align-items: flex-start; }
  .dolo-job-card-actions { width: 100%; }
  .dolo-job-card-actions .dolo-btn { flex: 1; justify-content: center; }
}

/* --- Posizioni raggruppate nei due mondi --- */
.dolo-jobs-group-head { max-width: 720px; }
/* L'occhiello + titolo + descrizione formano un blocco unico: staccarlo dalle
   schede piu' di quanto lo separi al suo interno e' quello che dice al lettore
   dove finisce l'introduzione e dove comincia l'elenco. Con .dolo-mt-md (32px)
   la descrizione risultava incollata alla prima scheda. */
.dolo-jobs-group .dolo-job-list { margin-top: clamp(36px, 5vw, 56px); }
.dolo-jobs-group-head .dolo-section-desc { margin-bottom: 0; }
/* Mondo Casa Vacanza: gruppo su fondo scuro (Dolomiti Rentals, colori invertiti) */
.dolo-jobs-group.dolo-section-dark .dolo-job-card {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: none;
}
.dolo-jobs-group.dolo-section-dark .dolo-job-card-title { color: #fff; }
.dolo-jobs-group.dolo-section-dark .dolo-chip-ghost { color: var(--dolo-blue-light); border-color: rgba(255, 255, 255, .28); }
.dolo-jobs-group.dolo-section-dark .dolo-btn-solid { background: #fff; color: var(--dolo-navy); border-color: #fff; }
.dolo-jobs-group.dolo-section-dark .dolo-btn-solid:hover { background: #E8EEF6; color: var(--dolo-navy-dark); }

/* ============================================================
   SINGLE JOB layout + apply box + rich content
   ============================================================ */
.dolo-job-layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.dolo-job-aside { position: sticky; top: 96px; }
.dolo-apply-box {
  background: var(--color-bg-soft); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 28px;
}
.dolo-apply-box h3 { margin: 0 0 8px; font-size: 21px; }
.dolo-apply-box p { color: var(--color-text-light); font-size: 16px; margin: 0 0 18px; }
.dolo-apply-box-note { margin: 14px 0 0 !important; font-size: 15px !important; }
.dolo-apply-box-note a { color: var(--dolo-navy); text-decoration: underline; }
.dolo-rich { font-size: 17px; color: var(--color-text); }
.dolo-rich h3 { font-size: 24px; margin: 30px 0 12px; }
.dolo-rich ul { padding-left: 20px; } .dolo-rich li { margin-bottom: 8px; }
@media (max-width: 820px) { .dolo-job-layout { grid-template-columns: 1fr; } .dolo-job-aside { position: static; } }

/* ============================================================
   OFFICE grid + card + detail
   Tecnica "ultima riga centrata": con conteggi non divisibili (5 sedi, 5 valori,
   7 benefit) l'ultima riga resta CENTRATA invece di lasciare un orfano a sinistra
   — sembra voluta, non un errore. flex-grow:0 tiene le card larghe uguali.
   ============================================================ */
.dolo-office-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.dolo-office-grid > * { flex: 0 1 calc((100% - 2 * 22px) / 3); }
@media (max-width: 900px) { .dolo-office-grid > * { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 560px) { .dolo-office-grid > * { flex-basis: 100%; } }
.dolo-office-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-card); transition: transform .25s, box-shadow .25s;
}
.dolo-office-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.dolo-office-name { font-size: 24px; margin: 0 0 10px; }
.dolo-office-addr { color: var(--color-text-light); font-size: 16px; margin: 0 0 8px; }
.dolo-office-phone { display: inline-block; font-weight: 700; color: var(--dolo-accent-text); text-decoration: none; margin-bottom: 14px; }
.dolo-office-link { display: block; font-weight: 700; color: var(--dolo-navy); text-decoration: none; margin-top: 6px; }
.dolo-office-link:hover { color: var(--dolo-accent-text); }
/* Copertina del paese nelle card dell'elenco sedi */
.dolo-office-card { padding: 0; overflow: hidden; }
.dolo-office-cover { display: block; }
.dolo-office-cover img {
  display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover;
  transition: transform .5s ease;
}
.dolo-office-card:hover .dolo-office-cover img { transform: scale(1.04); }
.dolo-office-card > :not(.dolo-office-cover) { margin-left: 28px; margin-right: 28px; }
.dolo-office-card > .dolo-office-name { margin-top: 22px; }
.dolo-office-card > .dolo-office-link { margin-bottom: 26px; }

/* Foto del paese nella scheda sede, con credito della licenza */
.dolo-office-photo { margin: 0 0 26px; }
.dolo-office-photo img {
  display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.dolo-office-photo figcaption {
  margin-top: 9px; font-size: 12.5px; color: var(--color-text-light);
}

/* Foto dell'ufficio vero e proprio (solo dove la filiale è identificabile) */
.dolo-office-gallery { margin: 30px 0 26px; }
.dolo-office-gallery-title { font-size: 22px; margin: 0 0 14px; }
.dolo-office-gallery-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.dolo-office-gallery-grid figure { margin: 0; }
.dolo-office-gallery-grid img {
  display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}

/* Fascia "Dentro Dolomitissime": scatti d'ambiente non attribuiti a una sede.
   4 colonne fisse (8 foto = 4+4, righe piene). auto-fit dava 5+3. */
.dolo-ambience-grid {
  margin-top: 30px; display: grid; gap: 14px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) { .dolo-ambience-grid { grid-template-columns: repeat(2, 1fr); } }
.dolo-ambience-grid figure { margin: 0; }
.dolo-ambience-grid img {
  display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  transition: transform .4s ease;
}
.dolo-ambience-grid figure:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .dolo-ambience-grid img { transition: none; } }
@media (max-width: 640px) {
  .dolo-ambience-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Mappa: facade cliccabile, poi iframe OpenStreetMap */
.dolo-map { margin-top: 30px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); }
.dolo-map-facade {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  padding: 22px 24px; cursor: pointer; border: 0;
  background: var(--color-bg-soft); transition: background .3s ease;
}
.dolo-map-facade:hover { background: #E7F0FA; }
.dolo-map-pin {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--dolo-navy); color: #fff;
}
.dolo-map-pin svg { width: 22px; height: 22px; }
.dolo-map-label strong { display: block; font-family: var(--font-heading); font-size: 18px; color: var(--dolo-navy); }
.dolo-map-label span { font-size: 14px; color: var(--color-text-light); }
.dolo-map.is-loaded { border-color: var(--color-border); }
.dolo-map iframe { display: block; width: 100%; height: 340px; border: 0; }

.dolo-office-detail { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.dolo-office-info { background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 28px; }
.dolo-office-info h3 { margin: 0 0 12px; }
@media (max-width: 820px) { .dolo-office-detail { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.dolo-footer { background: var(--color-dark); color: #B9C6D8; padding: 64px 0 0; }
.dolo-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.dolo-footer-brand { color: #fff; font-size: 28px; display: block; margin-bottom: 14px; }
.dolo-footer-desc { font-size: 15.5px; max-width: 320px; }
.dolo-footer-title { color: #fff; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 16px; }
.dolo-footer-list { list-style: none; padding: 0; margin: 0; }
.dolo-footer-list li { margin-bottom: 4px; }
/* Area toccabile di almeno 24px in altezza (WCAG 2.5.8): il testo da solo ne
   misurava 18, difficili da centrare con il dito su un telefono. Il padding
   allarga il bersaglio senza spostare il testo — il margine fra le voci
   scende da 10 a 4 per compensare e lasciare il footer come prima. */
.dolo-footer-list a {
  color: #B9C6D8; text-decoration: none; font-size: 15.5px;
  display: inline-block; padding: 5px 0; min-height: 24px;
}
.dolo-footer-list a:hover { color: #fff; }
.dolo-footer-muted { color: #7C8AA0; font-size: 13px; }
.dolo-footer-bottom { margin-top: 48px; border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0; font-size: 13px; color: #7C8AA0; }

/* Riga "Scopri anche": link ai due siti di marca esterni (non loghi — nessun
   asset ufficiale Dolomiti Rentals ancora caricato in libreria media). */
.dolo-footer-brands { margin-top: 48px; border-top: 1px solid rgba(255,255,255,.1); }
/* flex-start, non center: il marchio Rentals e' piu' alto per via della parola
   sotto il logo, e centrandoli i due LOGHI non si allineerebbero fra loro. */
.dolo-footer-brands-inner { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; padding: 22px 0; }
.dolo-footer-brands-label { padding-top: 11px; }
.dolo-footer-brands-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #7C8AA0; }
.dolo-brand-link {
  font-family: var(--font-heading); font-size: 17px; font-weight: 700;
  color: #fff; text-decoration: none; padding-bottom: 2px;
  border-bottom: 2px solid var(--dolo-blue-light);
  transition: opacity .2s;
}
.dolo-brand-link:hover { opacity: .8; }

/* I due marchi come LOGO. Il segno e' lo stesso; a distinguerli e' la parola
   "Rentals" sotto quello degli affitti brevi. Niente bordo inferiore: su un
   logo la sottolineatura da link sporca il segno grafico. */
.dolo-brand-link { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; border-bottom: 0; }
.dolo-brand-link img { display: block; height: 34px; width: auto; }
.dolo-brand-link .dolo-brand-sub {
  font-family: var(--font-caption); font-weight: 500;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: #C6D4E6; padding-left: 2px;
}
.dolo-brand-link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 4px; }
.dolo-footer-brands-inner { gap: 30px; }
@media (max-width: 560px) {
  .dolo-brand-link img { height: 28px; }
  .dolo-footer-brands-inner { gap: 22px; }
}
@media (max-width: 820px) { .dolo-footer-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ============================================================
   CHAPTER editoriale (statement centrato)
   ============================================================ */
.dolo-chapter { max-width: 820px; margin: 0 auto; text-align: center; }
.dolo-chapter-statement {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.28; color: var(--dolo-navy); margin: 0 0 22px;
}
.dolo-chapter-body { font-size: 19px; color: var(--color-text-light); line-height: 1.75; }
.dolo-section-dark .dolo-chapter-statement { color: #fff; }
.dolo-section-dark .dolo-chapter-body { color: #B9C6D8; }

/* ============================================================
   VALUES grid (griglia valori con icona)
   ============================================================ */
/* 5 valori → ultima riga centrata (stessa tecnica di .dolo-office-grid) */
.dolo-values-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.dolo-values-grid > * { flex: 0 1 calc((100% - 2 * 22px) / 3); }
.dolo-value-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 34px 28px; box-shadow: var(--shadow-card); transition: transform .25s, box-shadow .25s;
}
.dolo-value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.dolo-value-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--color-bg-soft); color: var(--dolo-navy); margin-bottom: 18px;
}
.dolo-value-icon svg { width: 26px; height: 26px; stroke: var(--dolo-navy); }
.dolo-value-title { font-size: 22px; margin: 0 0 8px; }
.dolo-value-desc { font-size: 16px; color: var(--color-text-light); margin: 0; line-height: 1.6; }
@media (max-width: 900px) { .dolo-values-grid > * { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 560px) { .dolo-values-grid > * { flex-basis: 100%; } }

/* ============================================================
   BENEFITS grid (cosa offriamo)
   ============================================================ */
/* 7 benefit → 2 per riga, l'ultimo (dispari) centrato invece che orfano a sinistra */
.dolo-benefits-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; max-width: 960px; margin: 0 auto; }
.dolo-benefits-grid > * { flex: 0 1 calc((100% - 18px) / 2); }
.dolo-benefit {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--color-bg-soft); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 22px 24px;
}
.dolo-benefit-mark {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--dolo-navy); color: #fff; display: grid; place-items: center;
}
.dolo-benefit-mark svg { width: 18px; height: 18px; stroke: #fff; }
.dolo-benefit p { margin: 0; font-size: 16.5px; color: var(--color-text); line-height: 1.5; }
.dolo-benefit strong { color: var(--dolo-navy); }
@media (max-width: 640px) { .dolo-benefits-grid > * { flex-basis: 100%; } }

/* ============================================================
   RELEASE TIMELINE — processo di selezione
   Rail verticale + card: quella più vicina al centro dello schermo si apre
   da sola (dolo-timeline.js). Senza JS restano tutte aperte.
   ============================================================ */
.dolo-container-narrow { max-width: 880px; }

.dolo-rtl { list-style: none; margin: 0 auto; padding: 0; position: relative; }
.dolo-rtl::before {
  content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px;
  background: linear-gradient(var(--dolo-blue), var(--color-border));
}
.dolo-rtl-item { position: relative; display: flex; gap: 26px; padding: 0 0 18px; }
.dolo-rtl-item:last-child { padding-bottom: 0; }

.dolo-rtl-node {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; z-index: 1;
  background: var(--color-bg); color: var(--dolo-navy);
  border: 2px solid var(--color-border);
  display: grid; place-items: center;
  box-shadow: 0 0 0 6px var(--color-bg);
  transition: background .32s ease, color .32s ease, border-color .32s ease, transform .32s ease;
}

.dolo-rtl-card {
  flex: 1; min-width: 0;
  background: #fff; border: 1px solid var(--color-border); border-radius: 16px;
  padding: 22px 26px;
  transition: border-color .32s ease, box-shadow .32s ease, transform .32s ease;
}

.dolo-rtl-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.dolo-rtl-step {
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dolo-blue);
}
.dolo-rtl-time {
  font-size: 13.5px; font-weight: 700; color: var(--color-text-light);
  background: var(--color-surface, #f3f5f8); border-radius: 999px; padding: 4px 12px;
}
.dolo-rtl-title { font-size: 24px; margin: 0 0 8px; line-height: 1.25; }
.dolo-rtl-desc { font-size: 16.5px; color: var(--color-text-light); margin: 0; line-height: 1.65; }

/* Dettaglio: chiuso di default SOLO quando il JS è attivo. */
.dolo-rtl-detail { overflow: hidden; }
/* padding e non margin: dentro una griglia 0fr i margini sfuggirebbero al ritaglio */
.dolo-rtl-list { margin: 0; padding: 16px 0 2px; list-style: none; display: grid; gap: 9px; }
.dolo-rtl-list li {
  position: relative; padding-left: 26px; font-size: 16px; line-height: 1.55; color: var(--color-text);
}
.dolo-rtl-list li::before {
  content: ""; position: absolute; left: 4px; top: .55em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--dolo-blue);
}

/* --- Stato potenziato (JS attivo) ---
   grid-template-rows 0fr→1fr: si anima fino all'altezza REALE del contenuto,
   quindi i punti elenco non vengono mai troncati, a qualsiasi larghezza. */
.dolo-rtl.is-enhanced .dolo-rtl-detail {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .42s ease, opacity .3s ease;
}
.dolo-rtl.is-enhanced .dolo-rtl-detail > * { min-height: 0; overflow: hidden; box-sizing: border-box; }
/* In border-box l'altezza non scende mai sotto il padding: da chiuso lo azzeriamo,
   altrimenti ogni card lascerebbe 18px di spazio morto. */
.dolo-rtl.is-enhanced .dolo-rtl-list { padding: 0; transition: padding-top .42s ease; }
.dolo-rtl.is-enhanced .dolo-rtl-item.is-open .dolo-rtl-list { padding-top: 16px; }
.dolo-rtl.is-enhanced .dolo-rtl-item.is-open .dolo-rtl-detail { grid-template-rows: 1fr; opacity: 1; }

.dolo-rtl.is-enhanced .dolo-rtl-item.is-open .dolo-rtl-card {
  border-color: var(--dolo-blue);
  box-shadow: 0 14px 40px rgba(16, 33, 60, .12);
}
.dolo-rtl.is-enhanced .dolo-rtl-item.is-open .dolo-rtl-node {
  background: var(--dolo-navy); color: #fff; border-color: var(--dolo-navy); transform: scale(1.06);
}
.dolo-rtl.is-enhanced .dolo-rtl-item:not(.is-open) .dolo-rtl-card { opacity: .72; }
.dolo-rtl.is-enhanced .dolo-rtl-item:not(.is-open) .dolo-rtl-title { font-size: 22px; }

@media (prefers-reduced-motion: reduce) {
  .dolo-rtl-card, .dolo-rtl-node, .dolo-rtl-detail { transition: none; }
}

@media (max-width: 640px) {
  .dolo-rtl::before { left: 21px; }
  .dolo-rtl-item { gap: 16px; }
  .dolo-rtl-node { width: 44px; height: 44px; box-shadow: 0 0 0 4px var(--color-bg); }
  .dolo-rtl-node svg { width: 17px; height: 17px; }
  .dolo-rtl-card { padding: 18px 18px; border-radius: 14px; }
  .dolo-rtl-title,
  .dolo-rtl.is-enhanced .dolo-rtl-item:not(.is-open) .dolo-rtl-title { font-size: 20px; }
}

/* ============================================================
   IL MESTIERE — concentrazione, competenze, errori, domande
   ============================================================ */
.dolo-concentration {
  display: grid; grid-template-columns: 120px 1fr; gap: 26px; align-items: center;
  background: var(--color-bg-soft); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 28px 32px; max-width: 860px; margin: 0 auto;
}
.dolo-concentration-pct { font-family: var(--font-heading); font-size: 58px; font-weight: 800; color: var(--dolo-accent-text); line-height: 1; }
.dolo-concentration p { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--color-text); }
.dolo-concentration strong { color: var(--dolo-navy); }
@media (max-width: 620px) { .dolo-concentration { grid-template-columns: 1fr; gap: 12px; text-align: center; } }

/* Competenze numerate */
.dolo-skills { max-width: 820px; margin: 0 auto; }
.dolo-skill { display: grid; grid-template-columns: 52px 1fr; gap: 20px; margin-bottom: 26px; }
.dolo-skill:last-child { margin-bottom: 0; }
.dolo-skill-num {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-bg-soft); border: 1px solid var(--color-border);
  font-family: var(--font-heading); font-size: 21px; font-weight: 700; color: var(--dolo-accent-text);
}
.dolo-skill h3 { font-size: 20px; margin: 4px 0 7px; }
.dolo-skill p { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--color-text-light); }
.dolo-skill strong { color: var(--dolo-navy); }

/* --- Competenze e giornata tipo su fondo scuro (traccia Casa Vacanza) ---
   I due componenti nascono per la traccia agente, che sta su fondo chiaro.
   Riusarli sul dark richiede solo di ribaltare i colori: struttura invariata,
   nessun duplicato di markup. */
.dolo-section-dark .dolo-skill-num { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: var(--dolo-blue-light); }
.dolo-section-dark .dolo-skill h3 { color: #fff; }
.dolo-section-dark .dolo-skill p { color: #C6D4E6; }
.dolo-section-dark .dolo-day-row { border-bottom-color: rgba(255,255,255,.14); }
.dolo-section-dark .dolo-day-row.is-highlight { background: rgba(255,255,255,.06); }
.dolo-section-dark .dolo-day-time { color: var(--dolo-blue-light); }
.dolo-section-dark .dolo-day-row h3 { color: #fff; }
.dolo-section-dark .dolo-day-row p { color: #C6D4E6; }

/* --- Retribuzione dichiarata ---
   Una sola cifra, grande e isolata: è l'unica retribuzione che il cliente ha
   deciso di pubblicare, e nasconderla in un paragrafo la renderebbe sospetta
   invece che trasparente. */
.dolo-pay {
  max-width: 520px; margin: 0 auto; text-align: center;
  padding: 30px 26px; border-radius: var(--radius-lg, 16px);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
}
.dolo-pay-label {
  font-family: var(--font-caption); font-weight: 500; font-size: 12.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dolo-blue-light);
}
.dolo-pay-figure {
  font-family: var(--font-heading); font-weight: 700; line-height: 1.05;
  font-size: clamp(34px, 5.4vw, 52px); color: #fff; margin: 10px 0 6px;
}
.dolo-pay-note { font-size: 15px; color: #C6D4E6; }

/* Errori (checklist negativa) */
.dolo-errors { max-width: 820px; margin: 0 auto; }
.dolo-error { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.dolo-error-mark {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; margin-top: 2px;
  background: #FDECEA; border: 1px solid #F2B8B2; color: #8B2016;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.dolo-error p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--color-text); }
.dolo-error strong { color: var(--dolo-navy); }

/* Domande da fare */
.dolo-questions { max-width: 820px; margin: 0 auto; }
.dolo-question { display: grid; grid-template-columns: 50px 1fr; gap: 18px; margin-bottom: 26px; }
.dolo-question:last-child { margin-bottom: 0; }
.dolo-question-num {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: var(--dolo-navy); color: #fff;
  font-family: var(--font-heading); font-size: 20px; font-weight: 700;
}
.dolo-question h3 { font-size: 18.5px; margin: 3px 0 6px; line-height: 1.4; }
.dolo-question p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--color-text-light); }

/* Profili — feature card numerate (griglia 3/2/1, accento per card) */
/* Cinque profili in una griglia da tre lasciavano un buco in fondo: la riga
   incompleta si legge come "manca qualcosa", non come una scelta.
   Qui la griglia e' di SEI colonne: le prime tre schede ne occupano due
   ciascuna, le ultime due tre ciascuna. Nessun vuoto, e nessuna gerarchia
   inventata — i cinque profili sono alternative pari, non una principale e
   quattro secondarie (che e' invece quello che farebbe un bento).
   In piu' i due testi piu' lunghi (176 e 169 caratteri) sono proprio gli ultimi
   due: la riga larga e' dove serviva spazio. */
.dolo-fcards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.dolo-fcard { grid-column: span 2; }
.dolo-fcard:nth-child(4), .dolo-fcard:nth-child(5) { grid-column: span 3; }

/* Le due schede larghe cambiano composizione: numero a lato e contenuto a
   fianco. Serve a due cose insieme — la riga larga sembra voluta invece che
   allungata, e il testo resta su una misura leggibile invece di distendersi
   per tutta la scheda. */
.dolo-fcard.is-wide { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start; }
.dolo-fcard.is-wide .dolo-fcard-index { padding-top: 2px; }
.dolo-fcard.is-wide .dolo-fcard-body { min-width: 0; }
.dolo-fcard.is-wide .dolo-fcard-tag { margin-top: 0; }

/* La misura di lettura non deve sforare a nessuna larghezza: oltre ~75 caratteri
   per riga l'occhio fatica a ritrovare l'inizio della riga successiva. */
.dolo-fcard.is-wide .dolo-fcard-text,
.dolo-fcard.is-wide .dolo-fcard-title { max-width: 62ch; }

@media (max-width: 980px) {
  .dolo-fcards { grid-template-columns: repeat(2, 1fr); }
  .dolo-fcard, .dolo-fcard:nth-child(4), .dolo-fcard:nth-child(5) { grid-column: span 1; }
  /* Con due colonne il numero dispari lascia un buco in fondo: l'ultima scheda
     occupa la riga intera. Vale sia con 3 schede sia con 5, cosi' la regola
     regge se il cliente ne aggiunge o toglie una. */
  .dolo-fcard:nth-child(3):last-child,
  .dolo-fcard:nth-child(5):last-child { grid-column: span 2; }
  /* Occupando due colonne il testo si distenderebbe a ~98 caratteri per riga:
     oltre i ~75 l'occhio fatica a ritrovare l'inizio della riga successiva. */
  .dolo-fcard:nth-child(3):last-child .dolo-fcard-text,
  .dolo-fcard:nth-child(5):last-child .dolo-fcard-text,
  .dolo-fcard:nth-child(3):last-child .dolo-fcard-title,
  .dolo-fcard:nth-child(5):last-child .dolo-fcard-title { max-width: 62ch; }
  /* La quarta qui e' stretta quanto le altre: con il numero a fianco le
     resterebbero 33 caratteri per riga. Torna alla composizione verticale. */
  .dolo-fcard:nth-child(4).is-wide { display: flex; flex-direction: column; gap: 0; }
  .dolo-fcard:nth-child(4).is-wide .dolo-fcard-tag { margin-top: 14px; }
}
@media (max-width: 640px) {
  .dolo-fcards { grid-template-columns: 1fr; }
  .dolo-fcard, .dolo-fcard:nth-child(4), .dolo-fcard:nth-child(5) { grid-column: span 1; }
  /* Su una colonna la composizione affiancata non ha piu' senso. */
  .dolo-fcard.is-wide { display: flex; flex-direction: column; gap: 0; }
  .dolo-fcard.is-wide .dolo-fcard-tag { margin-top: 14px; }
}

.dolo-fcard {
  --c: var(--dolo-navy);
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--color-border); border-radius: 14px;
  padding: 30px 26px 26px; overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
/* filo di accento in alto: si estende all'hover */
.dolo-fcard::before {
  content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 46px;
  background: var(--c); border-radius: 0 3px 3px 0;
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
.dolo-fcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: var(--c); }
.dolo-fcard:hover::before { width: 100%; }

.dolo-fcard:nth-child(2) { --c: var(--dolo-accent-text); }
.dolo-fcard:nth-child(3) { --c: var(--dolo-blue); }
.dolo-fcard:nth-child(4) { --c: #1A7A4A; }
.dolo-fcard:nth-child(5) { --c: #55708C; }

.dolo-fcard-index {
  font-family: var(--font-heading); font-size: 40px; font-weight: 800;
  color: var(--color-border); line-height: 1; letter-spacing: -.02em;
  transition: color .35s ease;
}
.dolo-fcard:hover .dolo-fcard-index { color: var(--c); }
.dolo-fcard-tag {
  display: block; margin: 14px 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c);
}
.dolo-fcard-title { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--dolo-navy); margin: 0 0 10px; line-height: 1.25; text-wrap: balance; }
.dolo-fcard-text { font-size: 16px; line-height: 1.7; color: var(--color-text-light); margin: 0; text-wrap: pretty; }
.dolo-fcard-text strong { color: var(--dolo-navy); font-weight: 700; }

/* Giornata tipo */
.dolo-day { max-width: 820px; margin: 0 auto; }
.dolo-day-row { display: grid; grid-template-columns: 78px 1fr; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--color-border); }
.dolo-day-row:last-child { border-bottom: none; }
.dolo-day-row.is-highlight { background: var(--color-bg-soft); border-radius: var(--radius); border-bottom: none; padding: 15px 14px; margin: 0 -14px; }
.dolo-day-time { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--dolo-accent-text); }
.dolo-day-row h3 { font-size: 17.5px; margin: 0 0 5px; }
.dolo-day-row p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--color-text-light); }

/* ============================================================
   PERCORSI DI CARRIERA (due colonne) + RETRIBUZIONE
   ============================================================ */
.dolo-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.dolo-path { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); }
.dolo-path-head { padding: 24px 26px; background: var(--dolo-navy); color: #fff; }
.dolo-path.is-alt .dolo-path-head { background: var(--dolo-blue); color: var(--dolo-navy); }
.dolo-path-title { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.dolo-path.is-alt .dolo-path-title { color: var(--dolo-navy); }
.dolo-path-sub { font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.7); }
.dolo-path.is-alt .dolo-path-sub { color: rgba(0,40,86,.8); }
.dolo-path-steps { background: var(--color-bg-soft); padding: 20px 22px; }
.dolo-path-step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; margin-bottom: 18px; }
.dolo-path-step:last-child { margin-bottom: 0; }
.dolo-path-num {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--dolo-navy); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 15px;
}
.dolo-path.is-alt .dolo-path-num { background: var(--dolo-blue); color: var(--dolo-navy); }
.dolo-path-phase { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dolo-accent-text); margin-bottom: 3px; }
.dolo-path-text { font-size: 15px; line-height: 1.6; color: var(--color-text-light); }
@media (max-width: 820px) { .dolo-paths { grid-template-columns: 1fr; } }

.dolo-converge { background: var(--color-dark); color: #fff; border-radius: var(--radius); padding: 28px 32px; margin-top: 22px; }
.dolo-converge-label { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--dolo-blue-light); margin-bottom: 8px; }
.dolo-converge h3 { color: #fff; font-size: 24px; margin: 0 0 10px; }
.dolo-converge p { font-size: 16.5px; line-height: 1.7; color: #C7D4E4; margin: 0; }

/* Fasi retributive */
.dolo-econ { max-width: 780px; margin: 0 auto; }
.dolo-econ-phase { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); margin-bottom: 10px; }
.dolo-econ-head { padding: 13px 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--dolo-navy); }
.dolo-econ-phase.is-2 .dolo-econ-head { background: var(--dolo-blue); }
.dolo-econ-phase.is-3 .dolo-econ-head { background: var(--dolo-accent-text); }
.dolo-econ-label { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.dolo-econ-note { font-size: 11.5px; color: rgba(255,255,255,.75); font-style: italic; }
.dolo-econ-body { background: var(--color-bg-soft); padding: 8px 20px; }
.dolo-econ-row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(0,40,86,.07); font-size: 15.5px; }
.dolo-econ-row:last-child { border-bottom: none; }
.dolo-econ-row.is-total { background: rgba(42,93,168,.07); margin: 0 -20px; padding: 10px 20px; border-bottom: none; }
.dolo-econ-key { color: var(--color-text-light); }
.dolo-econ-val { color: var(--dolo-navy); font-weight: 700; text-align: right; }
.dolo-econ-row.is-total .dolo-econ-val { font-size: 16px; }
.dolo-econ-arrow { text-align: center; color: var(--color-border); font-size: 20px; line-height: 1; margin: 2px 0 8px; }

/* Welfare */
.dolo-welfare { border: 1.5px solid var(--dolo-blue); border-radius: var(--radius); overflow: hidden; margin-top: 26px; max-width: 780px; margin-left: auto; margin-right: auto; }
.dolo-welfare-head { background: var(--color-bg-soft); padding: 18px 22px; border-bottom: 1px solid var(--color-border); }
.dolo-welfare-head h3 { margin: 0 0 3px; font-size: 18px; }
.dolo-welfare-head p { margin: 0; font-size: 13px; color: var(--color-text-light); }
.dolo-welfare-body { padding: 18px 22px; }
.dolo-welfare-list { list-style: none; padding: 0; margin: 0 0 16px; }
.dolo-welfare-list li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.6; color: var(--color-text); margin-bottom: 9px; }
.dolo-welfare-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--dolo-blue); }
.dolo-welfare-cats { display: flex; flex-wrap: wrap; gap: 7px; }
.dolo-welfare-cat { padding: 5px 12px; background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: 12px; color: var(--dolo-navy); }

/* ============================================================
   SHOWCASE VIDEO — griglia sfalsata + elenco, hover incrociato
   ============================================================ */
.dolo-showcase {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
  margin-bottom: 60px; /* garantisce distacco da ciò che segue (nota privacy) */
}
@media (max-width: 980px) { .dolo-showcase { grid-template-columns: 1fr; gap: 34px; } }

/* --- griglia sfalsata ---
   Lo sfalsamento usa transform, che NON occupa spazio nel layout: senza il
   padding-bottom di compensazione la colonna spostata sborda e copre il
   contenuto sottostante. Le due misure sono legate alla stessa variabile. */
.dolo-showcase-grid {
  --stagger: 38px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  padding-bottom: var(--stagger);
}
.dolo-showcase-grid > :nth-child(even) { transform: translateY(var(--stagger)); }
@media (max-width: 560px) {
  .dolo-showcase-grid { --stagger: 0px; padding-bottom: 0; }
  .dolo-showcase-grid > :nth-child(even) { transform: none; }
}

.dolo-showcase-thumb {
  position: relative; display: block; padding: 0; border: 0; cursor: pointer;
  background: var(--color-dark); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .4s ease, box-shadow .4s ease;
}
.dolo-showcase-thumb img {
  display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover;
  filter: grayscale(1) contrast(1.02); opacity: .72;
  transition: filter .5s ease, opacity .5s ease, transform .6s ease;
}
/* stato attivo: colore pieno (hover diretto o sincronizzato dall'elenco) */
.dolo-showcase-thumb.is-active img,
.dolo-showcase-thumb:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.04); }
.dolo-showcase-thumb.is-active,
.dolo-showcase-thumb:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.dolo-showcase-grid > :nth-child(even).is-active,
.dolo-showcase-grid > :nth-child(even):hover { transform: translateY(calc(var(--stagger) - 4px)); }

.dolo-showcase-play {
  position: absolute; inset: auto 14px 14px auto;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--dolo-navy);
  opacity: 0; transform: scale(.8); transition: opacity .35s ease, transform .35s ease;
}
.dolo-showcase-thumb.is-active .dolo-showcase-play,
.dolo-showcase-thumb:hover .dolo-showcase-play { opacity: 1; transform: scale(1); }
.dolo-showcase-play svg { width: 19px; height: 19px; margin-left: 2px; }

/* --- elenco --- */
.dolo-showcase-list { list-style: none; margin: 0; padding: 0; }
.dolo-showcase-list li + li { border-top: 1px solid var(--color-border); }
.dolo-showcase-row {
  position: relative; display: grid; grid-template-columns: 1fr 26px; align-items: center;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 20px 6px 20px 0; transition: padding-left .35s ease;
}
.dolo-showcase-row.is-active { padding-left: 16px; }
/* barretta di accento che entra da sinistra */
.dolo-showcase-row::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px;
  background: var(--dolo-accent-text); border-radius: 3px;
  opacity: 0; transform: scaleY(.4); transform-origin: center;
  transition: opacity .35s ease, transform .35s ease;
}
.dolo-showcase-row.is-active::before { opacity: 1; transform: scaleY(1); }

.dolo-showcase-name {
  grid-column: 1; display: block;
  font-family: var(--font-heading); font-size: 26px; font-weight: 700; line-height: 1.15;
  color: var(--color-text-light); transition: color .35s ease;
}
.dolo-showcase-row.is-active .dolo-showcase-name { color: var(--dolo-navy); }
.dolo-showcase-role {
  grid-column: 1; display: block; margin-top: 3px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dolo-accent-text);
}
.dolo-showcase-quote {
  grid-column: 1; display: block; margin-top: 9px;
  font-family: var(--font-heading); font-style: italic;
  font-size: 16.5px; line-height: 1.5; color: var(--color-text-light);
  max-width: 42ch; transition: color .35s ease;
}
.dolo-showcase-row.is-active .dolo-showcase-quote { color: var(--color-text); }
.dolo-showcase-arrow {
  grid-column: 2; grid-row: 1 / span 3; color: var(--dolo-accent-text);
  opacity: 0; transform: translateX(-8px); transition: opacity .35s ease, transform .35s ease;
}
.dolo-showcase-row.is-active .dolo-showcase-arrow { opacity: 1; transform: none; }
.dolo-showcase-arrow svg { width: 22px; height: 22px; display: block; }
.dolo-showcase-row:focus-visible { outline: 3px solid var(--dolo-accent-text); outline-offset: 3px; }

/* ============================================================
   POSIZIONI IN HOME — tessere cliccabili per intero
   (layout esclusivo della home: la pagina archivio usa le righe)
   ============================================================ */
.dolo-jobs-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.dolo-jobs-head .dolo-section-title { margin-bottom: 0; display: flex; align-items: center; gap: 14px; }
.dolo-jobs-count {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
  border-radius: var(--radius-pill); background: var(--color-bg-soft); color: var(--dolo-accent-text);
  font-family: var(--font-body); font-size: 17px; font-weight: 700;
}
.dolo-jobs-head-cta { flex-shrink: 0; }
@media (max-width: 640px) { .dolo-jobs-head-cta { width: 100%; justify-content: center; } }

.dolo-jobtiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 780px) { .dolo-jobtiles { grid-template-columns: 1fr; } }

.dolo-jobtile {
  --c: var(--dolo-navy);
  position: relative; display: grid; grid-template-columns: 56px 1fr 24px;
  align-items: center; gap: 18px; text-decoration: none;
  background: #fff; border: 1px solid var(--color-border); border-radius: 14px;
  padding: 22px 24px; overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* filo di accento a sinistra, si estende in altezza all'hover */
.dolo-jobtile::before {
  content: ""; position: absolute; left: 0; top: 50%; bottom: 50%; width: 3px;
  background: var(--c); transition: top .35s ease, bottom .35s ease;
}
.dolo-jobtile:hover, .dolo-jobtile:focus-visible {
  transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: var(--c);
}
.dolo-jobtile:hover::before, .dolo-jobtile:focus-visible::before { top: 0; bottom: 0; }
.dolo-jobtile:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; }

.dolo-jobtile-icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: var(--color-bg-soft); color: var(--c);
  transition: background .35s ease, color .35s ease;
}
.dolo-jobtile-icon svg { width: 26px; height: 26px; stroke: currentColor; }
.dolo-jobtile:hover .dolo-jobtile-icon { background: var(--c); color: #fff; }

.dolo-jobtile-body { min-width: 0; }
.dolo-jobtile-dept {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c); margin-bottom: 4px;
}
.dolo-jobtile-title {
  display: block; font-family: var(--font-heading); font-size: 21px; font-weight: 700;
  line-height: 1.25; color: var(--dolo-navy);
}
.dolo-jobtile-meta { display: block; margin-top: 4px; font-size: 14.5px; color: var(--color-text-light); }
.dolo-jobtile-arrow {
  color: var(--c); opacity: .35; transform: translateX(-6px);
  transition: opacity .35s ease, transform .35s ease;
}
.dolo-jobtile:hover .dolo-jobtile-arrow { opacity: 1; transform: none; }
.dolo-jobtile-arrow svg { width: 22px; height: 22px; display: block; }

.dolo-jobs-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 34px; padding: 26px 30px;
  background: var(--color-bg-soft); border-radius: 14px;
}
.dolo-jobs-foot p { margin: 0; font-size: 16.5px; color: var(--color-text); max-width: 60ch; }
@media (max-width: 640px) {
  .dolo-jobs-foot { flex-direction: column; align-items: flex-start; }
  .dolo-jobs-foot .dolo-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   BLOCCO FONDATORE (Perché Dolomitissime)
   ============================================================ */
.dolo-founders { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; max-width: 980px; margin: 0 auto; }
@media (max-width: 820px) { .dolo-founders { grid-template-columns: 1fr; gap: 30px; } }
/* Le due schede si pareggiano in altezza (un titolo va su due righe, l'altro no):
   la fascia del titolo si espande e le firme restano allineate. */
.dolo-founder-item { margin: 0; display: flex; flex-direction: column; height: 100%; }
.dolo-founder-item .dolo-video-card { display: flex; flex-direction: column; flex: 1; }
.dolo-founder-item .dolo-video-label { flex: 1; display: flex; align-items: center; }
.dolo-founder-sign { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.dolo-founder-sign strong { display: block; font-family: var(--font-heading); font-size: 20px; color: var(--dolo-navy); }
.dolo-founder-sign span { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--dolo-accent-text); }

/* ============================================================
   PANNELLI ESPANDIBILI (gruppo "La nostra cultura")
   ============================================================ */
.dolo-panels { display: flex; gap: 12px; height: 440px; }
.dolo-panel {
  position: relative; flex: 1; min-width: 0; padding: 0; border: 0; cursor: pointer;
  background: var(--color-dark); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: flex .6s cubic-bezier(.4, 0, .2, 1);
}
.dolo-panel:hover, .dolo-panel:focus-visible { flex: 3.6; }
/* con il puntatore su un pannello, gli altri si restringono */
.dolo-panels:hover .dolo-panel.is-open:not(:hover) { flex: 1; }
.dolo-panel.is-open { flex: 3.6; }
.dolo-panel:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

.dolo-panel > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) brightness(.55); transform: scale(1.04);
  transition: filter .6s ease, transform .8s ease;
}
.dolo-panel:hover > img, .dolo-panel.is-open > img { filter: grayscale(0) brightness(.72); transform: scale(1); }
.dolo-panel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,27,61,.15) 0%, rgba(0,27,61,.30) 45%, rgba(0,27,61,.90) 100%);
}
.dolo-panel > * { position: relative; z-index: 1; }

.dolo-panel-num {
  position: absolute; top: 20px; left: 0; right: 0;
  font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: rgba(255,255,255,.55);
}
/* titolo verticale (pannello stretto) e orizzontale (pannello aperto): dissolvenza incrociata */
.dolo-panel-v {
  position: absolute; left: 0; right: 0; bottom: 26px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  margin: 0 auto; max-height: 62%; overflow: hidden;
  font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: .04em;
  color: rgba(255,255,255,.92); text-align: left;
  opacity: 1; transition: opacity .3s ease;
}
.dolo-panel-h {
  position: absolute; left: 24px; right: 24px; bottom: 24px;
  display: flex; align-items: center; gap: 14px; text-align: left;
  opacity: 0; transform: translateY(10px); transition: opacity .45s ease .12s, transform .45s ease .12s;
}
.dolo-panel:hover .dolo-panel-v, .dolo-panel.is-open .dolo-panel-v { opacity: 0; }
.dolo-panel:hover .dolo-panel-h, .dolo-panel.is-open .dolo-panel-h { opacity: 1; transform: none; }
.dolo-panel-play {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.94); color: var(--dolo-navy);
}
.dolo-panel-play svg { width: 20px; height: 20px; margin-left: 2px; }
.dolo-panel-title {
  font-family: var(--font-heading); font-size: 19px; font-weight: 700; line-height: 1.25; color: #fff;
}

@media (max-width: 900px) {
  /* su schermi stretti torna una colonna di riquadri normali */
  .dolo-panels { flex-direction: column; height: auto; gap: 14px; }
  .dolo-panel, .dolo-panel:hover, .dolo-panel.is-open { flex: none; height: 190px; }
  .dolo-panel > img, .dolo-panel.is-open > img { filter: grayscale(0) brightness(.7); }
  .dolo-panel-v { display: none; }
  .dolo-panel-h { opacity: 1; transform: none; }
  .dolo-panel-num { text-align: left; left: 24px; }
}

/* ============================================================
   ELENCO CON ANTEPRIMA FLUTTUANTE (gruppo "Chi siamo, in breve")
   ============================================================ */
.dolo-revlist { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--color-border); }
.dolo-revrow {
  position: relative; display: grid; grid-template-columns: 56px 1fr 34px;
  align-items: center; gap: 16px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--color-border);
  padding: 26px 4px; cursor: pointer; transition: padding-left .35s ease;
}
.dolo-revrow:hover { padding-left: 18px; }
.dolo-revrow:focus-visible { outline: 3px solid var(--dolo-accent-text); outline-offset: 2px; }
.dolo-revrow-num {
  font-family: var(--font-heading); font-size: 15px; font-weight: 700;
  color: var(--dolo-accent-text); letter-spacing: .04em;
}
.dolo-revrow-title {
  font-family: var(--font-heading); font-size: clamp(19px, 2.2vw, 25px); font-weight: 700;
  line-height: 1.3; color: var(--color-text-light); transition: color .35s ease;
}
.dolo-revrow:hover .dolo-revrow-title { color: var(--dolo-navy); }
/* anteprima che compare accanto alla riga */
.dolo-revrow-thumb {
  position: absolute; right: 62px; top: 50%; z-index: 2;
  width: 210px; border-radius: 10px; overflow: hidden; pointer-events: none;
  box-shadow: 0 14px 40px rgba(0,40,86,.28);
  opacity: 0; transform: translateY(-50%) scale(.92) rotate(-2deg);
  transition: opacity .35s ease, transform .45s cubic-bezier(.4, 0, .2, 1);
}
.dolo-revrow-thumb img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.dolo-revrow:hover .dolo-revrow-thumb { opacity: 1; transform: translateY(-50%) scale(1) rotate(0deg); }
.dolo-revrow-play {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-bg-soft); color: var(--dolo-navy);
  transition: background .35s ease, color .35s ease, transform .35s ease;
}
.dolo-revrow:hover .dolo-revrow-play { background: var(--dolo-navy); color: #fff; transform: scale(1.08); }
.dolo-revrow-play svg { width: 15px; height: 15px; margin-left: 2px; }

@media (max-width: 820px) {
  /* niente anteprima fluttuante: torna in linea e sempre visibile */
  .dolo-revrow { grid-template-columns: 44px 96px 1fr 30px; gap: 12px; }
  .dolo-revrow-thumb {
    position: static; opacity: 1; transform: none; width: 96px;
    box-shadow: none; order: 0;
  }
  .dolo-revrow:hover { padding-left: 4px; }
}

/* ============================================================
   TEAM — griglia delle persone
   ------------------------------------------------------------
   Riscrittura in vanilla del componente "team section" di 21st.dev (React +
   Tailwind, qui non utilizzabili). Si conservano: ritratto verticale che passa
   da bianco e nero a colori, numero progressivo, ruolo che entra dal basso.

   Differenza voluta rispetto all'originale: li' il ruolo appare SOLO al
   passaggio del mouse — su un telefono non appare mai, e l'informazione va
   perduta. Qui l'effetto vive dentro @media (hover: hover); dove il mouse non
   c'e', ruolo e nome sono semplicemente sempre visibili.
   ============================================================ */
.dolo-team-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 2.6vw, 34px) clamp(18px, 2vw, 26px);
}
@media (max-width: 900px) { .dolo-team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dolo-team-grid { grid-template-columns: 1fr; } }

.dolo-tmember { overflow: hidden; }
.dolo-tmember-photo {
  position: relative; overflow: hidden;
  border-radius: var(--radius, 10px);
  background: var(--color-bg-soft);
  aspect-ratio: 3 / 4;
}
.dolo-tmember-photo img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: top center;
  filter: grayscale(1); transform: scale(1.01);
  transition: filter .5s ease, transform .6s cubic-bezier(.4,0,.2,1), border-radius .5s ease;
}

.dolo-tmember-info { padding: 12px 2px 0; }
.dolo-tmember-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dolo-tmember-name {
  font-family: var(--font-heading); font-size: clamp(17px, 1.5vw, 19.5px); font-weight: 700;
  color: var(--dolo-navy); margin: 0; line-height: 1.25;
  transition: letter-spacing .5s ease;
}
.dolo-tmember-num {
  font-size: 12.5px; font-weight: 700; color: var(--color-text-light);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.dolo-tmember-role {
  margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--color-text-light);
  font-family: var(--font-caption); font-weight: 300; letter-spacing: .005em;
}

/* L'effetto al passaggio del mouse solo dove un mouse esiste. */
@media (hover: hover) {
  .dolo-tmember-role {
    opacity: 0; transform: translateY(8px);
    transition: opacity .4s ease, transform .4s ease;
  }
  .dolo-tmember:hover .dolo-tmember-role,
  .dolo-tmember:focus-within .dolo-tmember-role { opacity: 1; transform: none; }
  .dolo-tmember:hover .dolo-tmember-photo img,
  .dolo-tmember:focus-within .dolo-tmember-photo img {
    filter: grayscale(0); transform: scale(1.04);
  }
  .dolo-tmember:hover .dolo-tmember-name { letter-spacing: .012em; }
}

/* Senza mouse (telefoni, tablet) niente stati nascosti: le foto restano a
   colori, perche' il bianco e nero qui serviva solo a preparare la transizione. */
@media (hover: none) {
  .dolo-tmember-photo img { filter: grayscale(0); }
}

@media (prefers-reduced-motion: reduce) {
  .dolo-tmember-photo img, .dolo-tmember-role, .dolo-tmember-name { transition: none; }
  .dolo-tmember-role { opacity: 1; transform: none; }
}

/* Gruppo per sede: una riga di intestazione sopra ciascuna griglia. */
.dolo-team-group + .dolo-team-group { margin-top: clamp(38px, 5vw, 64px); }
.dolo-team-group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 12px; margin-bottom: clamp(18px, 2vw, 26px);
  border-bottom: 1px solid var(--color-border);
}
.dolo-team-group-name {
  font-family: var(--font-heading); font-size: clamp(20px, 2.2vw, 26px); font-weight: 700;
  color: var(--dolo-navy); margin: 0;
}
.dolo-team-group-count { font-family: var(--font-caption); font-weight: 300; font-size: 14px; color: var(--color-text-light); flex-shrink: 0; }
.dolo-team-group-name a { color: inherit; text-decoration: none; }
.dolo-team-group-name a:hover { color: var(--dolo-accent-text); }

/* ============================================================
   PERCORSI — due carriere, due entita' distinte
   ------------------------------------------------------------
   Il problema non era estetico ma di orientamento: i due mondi si
   distinguevano solo per il colore delle sezioni, e su una pagina di ~40.000 px
   nove sezioni su undici appartengono al primo percorso senza dirlo.
   Tre elementi lo risolvono: le PORTE (la scelta iniziale), il FRONTESPIZIO
   (il confine fra i due mondi) e la BARRA (l'orientamento durante la lettura).
   Codice cromatico costante: chiaro = compravendita, scuro = casa vacanza.
   ============================================================ */

/* ---------- LE PORTE ---------- */
.dolo-gates { padding: 0 0 clamp(40px, 6vw, 72px); margin-top: clamp(-28px, -3vw, -18px); position: relative; z-index: 3; }
.dolo-gate-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 26px); }
@media (max-width: 860px) { .dolo-gate-grid { grid-template-columns: 1fr; } }

.dolo-gate {
  display: flex; flex-direction: column; align-items: flex-start;
  position: relative; overflow: hidden;
  padding: clamp(26px, 3vw, 38px);
  border-radius: var(--radius-lg, 16px);
  text-decoration: none; border: 1px solid var(--color-border);
  background: var(--color-bg); color: var(--color-text);
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(0,40,86,.08));
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.dolo-gate:hover, .dolo-gate:focus-visible { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(0,40,86,.16); border-color: var(--dolo-accent-text); }
.dolo-gate:focus-visible { outline: 3px solid var(--dolo-accent-text); outline-offset: 3px; }

/* La porta scura anticipa il trattamento del secondo mondo: la differenza si
   vede prima di leggere le parole. */
.dolo-gate.is-dark { background: var(--color-dark); border-color: transparent; color: #C6D4E6; }
.dolo-gate.is-dark:hover, .dolo-gate.is-dark:focus-visible { border-color: var(--dolo-blue-light); }

/* Il numero identifica il percorso: e' informazione, non ornamento, quindi deve
   essere leggibile (>=3:1, e' testo grande). Su chiaro si usa --dolo-blue, che
   i token ammettono proprio per la UI di grandi dimensioni. */
.dolo-gate-num {
  font-family: var(--font-heading); font-size: clamp(40px, 5vw, 56px); font-weight: 700;
  line-height: 1; color: var(--dolo-blue); margin-bottom: 14px;
}
.dolo-gate.is-dark .dolo-gate-num { color: rgba(255,255,255,.55); }

.dolo-gate-brand {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dolo-accent-text);
}
.dolo-gate.is-dark .dolo-gate-brand { color: var(--dolo-blue-light); }

.dolo-gate-name {
  font-family: var(--font-heading); font-weight: 700; line-height: 1.1;
  font-size: clamp(28px, 3.4vw, 40px); color: var(--dolo-navy); margin-top: 6px;
}
.dolo-gate.is-dark .dolo-gate-name { color: #fff; }

.dolo-gate-world {
  margin-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  padding: 5px 12px; border-radius: var(--radius-pill, 999px);
  background: var(--color-bg-soft); color: var(--dolo-navy);
}
.dolo-gate.is-dark .dolo-gate-world { background: rgba(255,255,255,.12); color: #fff; }

.dolo-gate-claim { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--color-text); }
.dolo-gate.is-dark .dolo-gate-claim { color: #C6D4E6; }

.dolo-gate-roles { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.dolo-gate-role {
  font-size: 12.5px; font-weight: 700; padding: 5px 11px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--color-border); color: var(--color-text-light);
}
.dolo-gate.is-dark .dolo-gate-role { border-color: rgba(255,255,255,.22); color: #B9C6D8; }

.dolo-gate-go {
  display: inline-flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 22px;
  font-weight: 700; font-size: 15px; color: var(--dolo-accent-text);
}
.dolo-gate.is-dark .dolo-gate-go { color: #fff; }
.dolo-gate-go svg { width: 19px; height: 19px; transition: transform .35s ease; }
.dolo-gate:hover .dolo-gate-go svg { transform: translateX(5px); }

/* ---------- IL FRONTESPIZIO ---------- */
.dolo-trackhead {
  padding: clamp(54px, 7vw, 96px) 0 clamp(34px, 4vw, 52px);
  background: var(--color-bg); border-top: 1px solid var(--color-border);
}
.dolo-trackhead.is-dark { background: var(--color-dark); border-top-color: transparent; }

.dolo-trackhead-inner {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 4vw, 60px); align-items: start;
}
@media (max-width: 860px) { .dolo-trackhead-inner { grid-template-columns: 1fr; } }

.dolo-trackhead-top { display: flex; align-items: center; gap: 16px; }
.dolo-trackhead-num {
  font-family: var(--font-heading); font-size: clamp(34px, 4vw, 46px); font-weight: 700;
  line-height: 1; color: var(--dolo-accent-text);
}
.dolo-trackhead.is-dark .dolo-trackhead-num { color: var(--dolo-blue-light); }
.dolo-trackhead-meta { display: flex; flex-direction: column; gap: 3px; }
.dolo-trackhead-brand {
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dolo-accent-text);
}
.dolo-trackhead.is-dark .dolo-trackhead-brand { color: var(--dolo-blue-light); }
.dolo-trackhead-world { font-size: 14px; color: var(--color-text-light); }
.dolo-trackhead.is-dark .dolo-trackhead-world { color: #B9C6D8; }

.dolo-trackhead-name {
  font-family: var(--font-heading); font-weight: 700; line-height: 1.05;
  font-size: clamp(38px, 6vw, 68px); color: var(--dolo-navy); margin: 16px 0 0;
}
.dolo-trackhead.is-dark .dolo-trackhead-name { color: #fff; }
.dolo-trackhead-claim {
  margin-top: 14px; max-width: 46ch; font-size: 17.5px; line-height: 1.65; color: var(--color-text);
}
.dolo-trackhead.is-dark .dolo-trackhead-claim { color: #C6D4E6; }

.dolo-trackhead-roles {
  min-width: 240px; padding: 20px 22px; border-radius: var(--radius-lg, 16px);
  background: var(--color-bg-soft);
}
.dolo-trackhead.is-dark .dolo-trackhead-roles { background: rgba(255,255,255,.06); }
.dolo-trackhead-roles-label {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-text-light); margin-bottom: 12px;
}
.dolo-trackhead.is-dark .dolo-trackhead-roles-label { color: #8FB3DB; }
.dolo-trackhead-roles ul { list-style: none; margin: 0; padding: 0; }
.dolo-trackhead-roles li {
  font-family: var(--font-heading); font-size: 17px; font-weight: 700;
  color: var(--dolo-navy); padding: 7px 0; border-bottom: 1px solid var(--color-border);
}
.dolo-trackhead-roles li:last-child { border-bottom: 0; }
.dolo-trackhead.is-dark .dolo-trackhead-roles li { color: #fff; border-bottom-color: rgba(255,255,255,.14); }

.dolo-trackhead-other { margin: clamp(22px, 3vw, 34px) 0 0; font-size: 15px; color: var(--color-text-light); }
.dolo-trackhead.is-dark .dolo-trackhead-other { color: #B9C6D8; }
.dolo-trackhead-other a { color: var(--dolo-accent-text); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.dolo-trackhead.is-dark .dolo-trackhead-other a { color: #fff; }

/* ---------- LA BARRA DI ORIENTAMENTO ---------- */
.dolo-trackbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  opacity: 0; transform: translateY(-100%);
  transition: opacity .3s ease, transform .3s ease;
}
.dolo-trackbar.is-visible { opacity: 1; transform: none; }
.dolo-trackbar.is-dark { background: rgba(20,36,58,.94); border-bottom-color: rgba(255,255,255,.14); }

.dolo-trackbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; }
.dolo-trackbar-here { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dolo-trackbar-num {
  font-family: var(--font-heading); font-size: 20px; font-weight: 700; line-height: 1;
  color: var(--dolo-accent-text); flex-shrink: 0;
}
.dolo-trackbar.is-dark .dolo-trackbar-num { color: var(--dolo-blue-light); }
.dolo-trackbar-label { display: flex; flex-direction: column; min-width: 0; }
.dolo-trackbar-brand {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text-light);
}
.dolo-trackbar.is-dark .dolo-trackbar-brand { color: #8FB3DB; }
.dolo-trackbar-name {
  font-family: var(--font-heading); font-size: 17px; font-weight: 700; line-height: 1.2;
  color: var(--dolo-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dolo-trackbar.is-dark .dolo-trackbar-name { color: #fff; }

.dolo-trackbar-switch {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 8px 16px; border-radius: var(--radius-pill, 999px);
  border: 1.5px solid var(--color-border); color: var(--dolo-accent-text);
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.dolo-trackbar-switch:hover { background: var(--color-bg-soft); border-color: var(--dolo-accent-text); }
.dolo-trackbar-switch svg { width: 16px; height: 16px; }
.dolo-trackbar.is-dark .dolo-trackbar-switch { color: #fff; border-color: rgba(255,255,255,.34); }
.dolo-trackbar.is-dark .dolo-trackbar-switch:hover { background: rgba(255,255,255,.12); border-color: #fff; }

@media (max-width: 600px) {
  .dolo-trackbar-switch-text { display: none; }
  .dolo-trackbar-switch { padding: 8px 11px; }
}

/* Atterraggio delle ancore.
   L'header e' fisso e alto 75px: senza questo, il salto a #sedi o #storie porta
   la cima della sezione a filo schermo, cioe' dietro l'header. Oggi il titolo si
   salva per via del padding interno della sezione, ma e' un equilibrio fragile —
   basta ridurre quel padding e finisce coperto. Meglio dichiararlo. */
section[id], .dolo-track { scroll-margin-top: 86px; }

@media (prefers-reduced-motion: reduce) {
  .dolo-trackbar { transition: none; }
  .dolo-gate { transition: none; }
}

/* ============================================================
   RESET STILE BOTTONE DEL TEMA PADRE (GeneratePress)
   ------------------------------------------------------------
   GeneratePress stila OGNI <button> come bottone pieno: fondo #55555e, e
   #3f4047 in hover/focus. Lo fa con `button:hover` — specificita' (0,1,1), che
   batte le nostre classi (0,1,0).

   Conseguenza concreta: i componenti che usano <button> per motivi di
   accessibilita' ma bottoni NON sono (righe di elenco, schede, anteprime) si
   coprivano di grigio scuro al passaggio del mouse, con il testo navy sopra:
   contrasto misurato 1.42:1 sul nome e 1.01:1 sulla citazione, cioe' illeggibile
   (WCAG AA richiede 4.5:1).

   Qui si ripristina il fondo trasparente. Serve anche :focus, altrimenti lo
   stesso difetto colpisce chi naviga da tastiera — dove e' pure peggio, perche'
   l'elemento e' proprio quello che la persona sta leggendo.

   NON tocca .dolo-btn/.dolo-btn-solid/.dolo-btn-ghost: quelli sono bottoni veri
   e hanno gia' un fondo proprio in ogni stato.
   ============================================================ */
.dolo-showcase-row, .dolo-showcase-row:hover, .dolo-showcase-row:focus,
.dolo-showcase-thumb, .dolo-showcase-thumb:hover, .dolo-showcase-thumb:focus,
.dolo-revrow, .dolo-revrow:hover, .dolo-revrow:focus,
.dolo-video-card, .dolo-video-card:hover, .dolo-video-card:focus,
.dolo-panel, .dolo-panel:hover, .dolo-panel:focus,
.dolo-nav-toggle, .dolo-nav-toggle:hover, .dolo-nav-toggle:focus {
  background: none;
}

/* ============================================================
   VIDEO — facade (anteprima locale) + lightbox
   ============================================================ */
.dolo-video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .dolo-video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .dolo-video-grid { grid-template-columns: 1fr; } }

.dolo-video-card {
  position: relative; display: block; width: 100%; padding: 0; cursor: pointer;
  background: var(--color-dark); border: 0; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-card); text-align: left; transition: transform .3s, box-shadow .3s;
}
.dolo-video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.dolo-video-card:focus-visible { outline: 3px solid var(--dolo-accent-text); outline-offset: 3px; }
.dolo-video-thumb { display: block; }
.dolo-video-thumb img {
  display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover;
  transition: transform .5s, opacity .3s; opacity: .88;
}
.dolo-video-card:hover .dolo-video-thumb img { transform: scale(1.04); opacity: 1; }

.dolo-video-play {
  position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .94); color: var(--dolo-navy);
  box-shadow: 0 6px 20px rgba(0, 27, 61, .35); transition: transform .3s, background .3s;
}
.dolo-video-card:hover .dolo-video-play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.dolo-video-play svg { width: 26px; height: 26px; margin-left: 3px; }

.dolo-video-label {
  display: block; padding: 16px 20px 20px; font-family: var(--font-body);
  font-size: 16px; font-weight: 700; line-height: 1.4; color: #fff;
  background: var(--color-dark);
}
.dolo-video-featured .dolo-video-label { font-size: 19px; padding: 20px 26px 24px; }
.dolo-video-featured .dolo-video-play { width: 76px; height: 76px; }
.dolo-video-featured .dolo-video-play svg { width: 34px; height: 34px; }

/* Lightbox */
.dolo-video-modal[hidden] { display: none !important; }
.dolo-video-modal {
  position: fixed; inset: 0; z-index: 10000; background: rgba(0, 20, 45, .92);
  display: grid; place-items: center; padding: 24px;
}
.dolo-video-modal-inner { position: relative; width: min(1100px, 100%); }
.dolo-video-frame { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; background: #000; }
.dolo-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dolo-video-close {
  position: absolute; top: -46px; right: 0; background: none; border: 0; color: #fff;
  cursor: pointer; padding: 8px; line-height: 0; border-radius: 50%;
}
.dolo-video-close:hover { background: rgba(255, 255, 255, .15); }

.dolo-video-note { font-size: 14px; color: var(--color-text-light); margin-top: 18px; }
.dolo-story-block-title { font-size: clamp(22px, 3vw, 28px); margin: 0; }

/* ============================================================
   BANNER COOKIE
   ============================================================ */
.dolo-cookie-banner[hidden] { display: none !important; }
.dolo-cookie-banner {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 9999;
  max-width: 940px; margin: 0 auto; padding: 26px 30px 22px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0, 40, 86, .22);
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
.dolo-cookie-text { flex: 1 1 380px; }
.dolo-cookie-text strong { display: block; font-family: var(--font-heading); font-size: 19px; color: var(--dolo-navy); margin-bottom: 5px; }
.dolo-cookie-text p { margin: 0; font-size: 14px; color: var(--color-text-light); line-height: 1.55; }
.dolo-cookie-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.dolo-cookie-close {
  position: absolute; top: 10px; right: 12px; background: none; border: 0; cursor: pointer;
  color: var(--color-text-light); padding: 6px; line-height: 0; border-radius: 50%;
}
.dolo-cookie-close:hover { color: var(--dolo-navy); background: var(--color-bg-soft); }
.dolo-cookie-prefs[hidden] { display: none !important; }
.dolo-cookie-prefs {
  flex: 1 1 100%; border-top: 1px solid var(--color-border); padding-top: 16px;
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
}
.dolo-cookie-prefs label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-text); }
.dolo-cookie-prefs input { width: 17px; height: 17px; accent-color: var(--dolo-navy); }

.dolo-cookie-fab[hidden] { display: none !important; }
.dolo-cookie-fab {
  position: fixed; left: 20px; bottom: 20px; z-index: 9998;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: #fff; color: var(--dolo-navy); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card); display: grid; place-items: center;
}
.dolo-cookie-fab:hover { background: var(--color-bg-soft); }

/* ============================================================
   BARRA CTA FISSA (solo mobile)
   ============================================================ */
.dolo-sticky-cta { display: none; }
@media (max-width: 860px) {
  .dolo-sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9997;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
    background: rgba(20, 36, 58, .97); backdrop-filter: blur(8px);
    box-shadow: 0 -4px 20px rgba(0, 40, 86, .18);
    transform: translateY(105%); transition: transform .3s ease;
  }
  .dolo-sticky-cta.is-visible { transform: translateY(0); }
  .dolo-sticky-cta-text {
    color: #fff; font-family: var(--font-heading); font-size: 16px; line-height: 1.25;
  }
  .dolo-sticky-cta-actions { display: flex; gap: 8px; flex-shrink: 0; }
  .dolo-sticky-cta .dolo-btn-sm { padding: 9px 15px; font-size: 14.5px; }
  .dolo-sticky-cta .dolo-btn-ghost { color: #fff; border-color: rgba(255,255,255,.6); }
  .dolo-sticky-cta .dolo-btn-solid { background: #fff; color: var(--dolo-navy); border-color: #fff; }
  /* Spazio in fondo, altrimenti la barra coprirebbe l'ultima riga del footer */
  body.dolo-has-sticky-cta { padding-bottom: 68px; }
  /* Il pulsante cookie sale, per non finire sotto la barra */
  body.dolo-has-sticky-cta .dolo-cookie-fab { bottom: 80px; }
  /* Sotto i 380px il testo ruberebbe spazio ai pulsanti */
  @media (max-width: 380px) { .dolo-sticky-cta-text { display: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .dolo-sticky-cta { transition: none; }
}

.dolo-footer-bottom-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dolo-footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.dolo-footer-legal a {
  color: #7C8AA0; text-decoration: none;
  display: inline-block; padding: 4px 0; min-height: 24px;
}
.dolo-footer-legal a:hover { color: #fff; }

@media (max-width: 860px) {
  .dolo-cookie-banner { padding: 30px 22px 20px; }
  .dolo-cookie-actions { width: 100%; }
  .dolo-cookie-actions .dolo-btn { flex: 1; justify-content: center; }
}

/* ============================================================
   FORM CANDIDATURA
   ============================================================ */
.dolo-apply-layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.dolo-apply-side {
  background: var(--color-bg-soft); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 28px; position: sticky; top: 96px;
}
.dolo-apply-side h3 { margin: 0 0 14px; font-size: 21px; }
.dolo-apply-steps { margin: 0; padding-left: 20px; color: var(--color-text); font-size: 16px; }
.dolo-apply-steps li { margin-bottom: 10px; }
.dolo-apply-note { margin: 18px 0 0; font-size: 14px; color: var(--color-text-light); line-height: 1.5; }

.dolo-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dolo-field { margin-bottom: 18px; }
.dolo-field label { display: block; font-weight: 700; font-size: 14px; color: var(--dolo-navy); margin-bottom: 7px; }
.dolo-field input[type="text"],
.dolo-field input[type="email"],
.dolo-field input[type="tel"],
.dolo-field input[type="file"],
.dolo-field select,
.dolo-field textarea {
  width: 100%; padding: 13px 15px; font-family: var(--font-body); font-size: 16px;
  color: var(--color-text); background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  transition: border-color .2s, box-shadow .2s;
}
.dolo-field input:focus, .dolo-field select:focus, .dolo-field textarea:focus {
  outline: none; border-color: var(--dolo-accent-text);
  box-shadow: 0 0 0 3px rgba(42, 93, 168, .15);
}
.dolo-field textarea { resize: vertical; }
.dolo-field-check label { display: flex; gap: 11px; align-items: flex-start; font-weight: 400; font-size: 15px; color: var(--color-text); }
.dolo-field-check input { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--dolo-navy); }
.dolo-form-note { font-size: 14px; color: var(--color-text-light); margin: 0 0 18px; }

/* Legenda per gruppi (non è un <label for>, quindi stile a parte) */
.dolo-field-legend { display: block; font-weight: 700; font-size: 14px; color: var(--dolo-navy); margin-bottom: 9px; }
/* Gruppo lingue: pill selezionabili, wrap su più righe */
.dolo-checkgroup { display: flex; flex-wrap: wrap; gap: 10px; }
.dolo-check-pill {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 15px; border: 1px solid var(--color-border); border-radius: 999px;
  background: #fff; font-size: 15px; color: var(--color-text);
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.dolo-check-pill input { width: 17px; height: 17px; margin: 0; flex-shrink: 0; accent-color: var(--dolo-navy); }
.dolo-check-pill:hover { border-color: var(--dolo-blue); }
/* Stato selezionato: .is-checked (JS, sempre) + :has() (progressive enhancement) */
.dolo-check-pill.is-checked,
.dolo-check-pill:has(input:checked) {
  border-color: var(--dolo-navy); background: var(--color-bg-soft);
  box-shadow: inset 0 0 0 1px var(--dolo-navy);
}
.dolo-check-pill:focus-within { box-shadow: 0 0 0 3px rgba(42, 93, 168, .15); }

.dolo-alert { padding: 15px 18px; border-radius: var(--radius); margin-bottom: 22px; font-size: 15px; }
.dolo-alert-ok  { background: #E8F5EC; border: 1px solid #A8D5B8; color: #1B5E32; }
.dolo-alert-err { background: #FDECEA; border: 1px solid #F2B8B2; color: #8B2016; }

@media (max-width: 820px) {
  .dolo-apply-layout { grid-template-columns: 1fr; }
  .dolo-apply-side { position: static; }
}
@media (max-width: 560px) { .dolo-form-row { grid-template-columns: 1fr; gap: 0; } }

/* ============================================================
   CTA band (chiusura pagina)
   ============================================================ */
.dolo-cta-band { background: linear-gradient(135deg, var(--dolo-navy), var(--dolo-navy-dark)); color: #fff; text-align: center; }
.dolo-cta-band h2 { color: #fff; font-size: clamp(28px, 4vw, 42px); margin: 0 0 14px; }
.dolo-cta-band p { color: #D6E1F0; font-size: 19px; max-width: 560px; margin: 0 auto 30px; }
.dolo-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.dolo-cta-band .dolo-btn-solid { background: #fff; color: var(--dolo-navy); border-color: #fff; }
.dolo-cta-band .dolo-btn-solid:hover { background: #E8EEF6; color: var(--dolo-navy-dark); }

/* --- CTA contestuale fra le sezioni --- */
.dolo-cta-inline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 28px; flex-wrap: wrap;
  margin: 44px auto 0; padding: 24px 28px;
  border-radius: var(--radius);
}
.dolo-cta-inline-text { display: grid; gap: 4px; min-width: 260px; flex: 1; }
.dolo-cta-inline-text strong { font-family: var(--font-heading); font-size: 22px; line-height: 1.3; }
.dolo-cta-inline-text span { font-size: 16px; line-height: 1.55; }
.dolo-cta-inline-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Tono tenue: card chiara con filetto brand a sinistra */
.dolo-cta-soft {
  background: var(--color-bg-soft); border-left: 4px solid var(--dolo-blue);
}
.dolo-cta-soft .dolo-cta-inline-text strong { color: var(--dolo-navy); }
.dolo-cta-soft .dolo-cta-inline-text span { color: var(--color-text-light); }
/* Su fondo già tenue la card sparirebbe: la rendiamo bianca */
.dolo-section-soft .dolo-cta-soft { background: #fff; box-shadow: var(--shadow-card); }

/* Tono pieno: navy, per i momenti di maggiore intenzione */
.dolo-cta-accent {
  background: linear-gradient(135deg, var(--dolo-navy), var(--dolo-navy-dark)); color: #fff;
}
.dolo-cta-accent .dolo-cta-inline-text strong { color: #fff; }
.dolo-cta-accent .dolo-cta-inline-text span { color: #D6E1F0; }
.dolo-cta-accent .dolo-btn-solid { background: #fff; color: var(--dolo-navy); border-color: #fff; }
.dolo-cta-accent .dolo-btn-solid:hover { background: #E8EEF6; color: var(--dolo-navy-dark); }

@media (max-width: 700px) {
  .dolo-cta-inline { padding: 20px; margin-top: 34px; }
  .dolo-cta-inline-text strong { font-size: 20px; }
  .dolo-cta-inline-actions { width: 100%; }
  .dolo-cta-inline-actions .dolo-btn { flex: 1; text-align: center; justify-content: center; }
}

/* ============================================================
   FAQ — accordion accessibile (details/summary, zero JS)
   ============================================================ */
.dolo-faq { display: grid; gap: 12px; max-width: 780px; margin: 0 auto; }
.dolo-faq-item {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: 12px; overflow: hidden;
}
.dolo-faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 22px;
  font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--dolo-navy);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.dolo-faq-item summary::-webkit-details-marker { display: none; }
.dolo-faq-item summary:focus-visible { outline: 2px solid var(--dolo-blue); outline-offset: 2px; }
.dolo-faq-ico { position: relative; flex-shrink: 0; width: 18px; height: 18px; }
.dolo-faq-ico::before, .dolo-faq-ico::after {
  content: ""; position: absolute; background: var(--dolo-blue); border-radius: 2px; transition: transform .25s ease;
}
.dolo-faq-ico::before { top: 8px; left: 0; width: 18px; height: 2px; }
.dolo-faq-ico::after  { top: 0; left: 8px; width: 2px; height: 18px; }
.dolo-faq-item[open] .dolo-faq-ico::after { transform: scaleY(0); }
.dolo-faq-a { padding: 0 22px 20px; }
.dolo-faq-a p { margin: 0; color: var(--color-text-light); font-size: 16.5px; line-height: 1.62; }
@media (prefers-reduced-motion: reduce) { .dolo-faq-ico::before, .dolo-faq-ico::after { transition: none; } }

/* ============================================================
   MANIFESTO "AIUTARE" — le parole del titolare
   ============================================================ */
.dolo-manifesto {
  background: linear-gradient(160deg, var(--dolo-navy), var(--dolo-navy-dark));
  color: #fff; text-align: center;
}
.dolo-manifesto .dolo-section-eyebrow { color: var(--dolo-blue-light); }
.dolo-manifesto-word {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(46px, 8vw, 92px); line-height: 1; letter-spacing: -.02em;
  color: #fff; margin: .12em 0 .3em;
}
.dolo-manifesto-intro {
  font-size: 19px; line-height: 1.62; color: #D6E1F0;
  max-width: 640px; margin: 0 auto 34px;
}
.dolo-manifesto-list {
  list-style: none; margin: 0 auto; padding: 0; max-width: 700px;
  display: grid; gap: 12px; text-align: left;
}
.dolo-manifesto-list li {
  position: relative; padding: 15px 20px 15px 46px; border-radius: 13px;
}
.dolo-manifesto-line { font-size: 19px; line-height: 1.5; color: #EAF1FA; }
.dolo-manifesto-list li::before {
  content: ""; position: absolute; left: 20px; top: 1.35em;
  width: 11px; height: 11px; border-radius: 3px; background: var(--dolo-blue-light);
}
/* La riga che parla al candidato: evidenziata */
.dolo-manifesto-list li.is-you {
  background: rgba(92, 140, 197, .16); border: 1px solid rgba(92, 140, 197, .42);
  padding-top: 17px; padding-bottom: 17px;
}
.dolo-manifesto-list li.is-you .dolo-manifesto-line { font-size: 21px; font-weight: 700; color: #fff; }
.dolo-manifesto-list li.is-you::before { background: #fff; top: 1.45em; }
.dolo-manifesto-you {
  display: block; margin-top: 7px; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--dolo-blue-light);
}
.dolo-manifesto-sign {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin: 34px 0 0;
}
.dolo-manifesto-avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.dolo-manifesto-sign figcaption { text-align: left; }
.dolo-manifesto-sign strong { display: block; font-family: var(--font-heading); font-size: 18px; color: #fff; }
.dolo-manifesto-sign span { font-size: 14px; color: #B9C6D8; }
.dolo-manifesto .dolo-cta-actions { margin-top: 28px; }
.dolo-manifesto .dolo-btn-solid { background: #fff; color: var(--dolo-navy); border-color: #fff; }
.dolo-manifesto .dolo-btn-solid:hover { background: #E8EEF6; color: var(--dolo-navy-dark); }
.dolo-manifesto-compact .dolo-manifesto-word { font-size: clamp(40px, 6vw, 66px); }

@media (max-width: 600px) {
  .dolo-manifesto-list li { padding-left: 40px; }
  .dolo-manifesto-list li::before { left: 16px; }
  .dolo-manifesto-line { font-size: 17.5px; }
  .dolo-manifesto-list li.is-you .dolo-manifesto-line { font-size: 18.5px; }
  .dolo-manifesto-sign { flex-direction: column; gap: 10px; text-align: center; }
  .dolo-manifesto-sign figcaption { text-align: center; }
}