/* ============================================================
   EPALA skin per il template Redox (digital-agency).
   Rimappa i token Redox sull'identita EPALA: accento sage,
   neutrali caldi (warm white + charcoal), font Montserrat/Inter.
   Caricato DOPO assets/css/style.css cosi vince sugli originali.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Accento brand: da arancione Redox a sage EPALA */
  --theme: #007888;
  --action: #007888;
  --ep-green: #57C9A7;

  /* Neutrali: testo/heading su charcoal caldo */
  --primary: #2A2C28;
  --secondary: #4A4D46;
  --black: #2A2C28;
  --black-2: #74776E;
  --border: rgba(42, 44, 40, 0.12);

  /* Font: display Montserrat, testo Inter (tutte le famiglie Redox rimappate) */
  --font_dmsans: 'Inter', system-ui, sans-serif;
  --font_instrumentsans: 'Inter', system-ui, sans-serif;
  --font_thunder: 'Montserrat', system-ui, sans-serif;
  --font_sequelsansromanbody: 'Inter', system-ui, sans-serif;
  --font_sequelsansmediumbody: 'Inter', system-ui, sans-serif;
  --font_timesnow: 'Montserrat', system-ui, sans-serif;
  --font_bdogrotesk: 'Inter', system-ui, sans-serif;
  --font_tartuffo: 'Montserrat', system-ui, sans-serif;
  --font_tartuffotrial: 'Montserrat', system-ui, sans-serif;
}

/* Sfondo pagina caldo EPALA invece del bianco puro */
body.body-wrapper { background-color: #FAF7F1; }

/* I titoli-sezione Redox usano font-instrumentsans: portali a Montserrat
   (display) mantenendo il peso forte del template. */
.section-title,
.font-instrumentsans-medium,
.big-text,
.footer-widget-box .title {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  letter-spacing: -0.01em;
}

/* Interlinea titoli piu ariosa a tutte le larghezze (base template: 0.9,
   troppo stretta: le discendenti toccano la riga sotto). */
.section-title.font-instrumentsans-medium,
.section-title.font-sequelsans-romanbody {
  line-height: 1.12;
}

/* Accento sage anche dove il template usa arancione hardcoded piu comune */
.text-theme, .theme-color { color: #007888 !important; }
.bg-theme { background-color: #007888 !important; }
.about-area-details .info-list li::before { background-color: #007888; }

/* Tint hardcoded arancione del template -> sage tenue */
.hero-area { background-color: rgba(0, 120, 136, 0.13) !important; position: relative; }
.hero-area .container { position: relative; z-index: 1; }
.hero-area .award-wrapper .circle-text-wrapper { background-color: transparent !important; box-shadow: none !important; }
/* Conchiglia del logo al centro del badge, al posto della "W." */
.hero-area .circle-text .icon { width: 60px; height: auto; }
/* Cerchio scuro come "finestra" a piena sezione: parte piccolo (clip-path) e
   cresce con lo scroll (animato in main.js) rivelando la conchiglia FISSA sotto. */
.cta-area .area-bg {
  background-color: #2A2C28 !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 220vmax !important; height: 220vmax !important;
  border-radius: 0 !important;
  clip-path: circle(min(185px, 42vw) at 50% 50%);
}
.cta-area .area-bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url('/epala-icon.png') center / min(1500px, 94vw, 116vh) no-repeat;
  opacity: 0.16;
}
.cta-area .container { position: relative; z-index: 2; }
/* Titolo CTA su due righe: interlinea leggibile (il template usa line-height 20px)
   + font un po' più piccolo. */
/* line-height con !important per le due righe; font-size SENZA !important così
   l'animazione GSAP (font-size -> 18vw allo scroll) può ingrandire il titolo. */
.cta-area .section-title { line-height: 1.04 !important; font-size: clamp(30px, 3.6vw, 50px); }

/* Claim hero in grassetto; la coda resta medium, cosi' la gerarchia
   titolo/coda regge anche dove sono allo stesso corpo (mobile). */
.hero-area .section-title.font-instrumentsans-medium { font-weight: 700; }

/* Sottotitolo hero: la coda del titolo, resa piu piccola e tenue. */
.hero-area .hero-subtitle {
  margin-top: 10px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: rgba(42, 44, 40, 0.62);
}

/* Selezione testo coerente col brand */
::selection { background: #C4E2E6; color: #014E5A; }

/* Wordmark del logo al posto della grande scritta big-text (stessa posizione
   e scale-on-scroll del template). Riempie la larghezza come il testo originale. */
.hero-area { overflow: visible !important; }
.hero-area .big-text.big-wordmark {
  font-size: 0 !important;
  width: 100%;
  height: auto;
  object-fit: contain;
  color: transparent;
  position: relative;
  z-index: 2;
  transform: translateY(15%);
}

/* Sotto i 1200px il template nasconde big-text: il wordmark resta visibile e
   lo rimpicciolisce epala-motion.js allo scroll. Il wrapper lo spinge giu di
   meta' altezza cosi resta a cavallo della linea hero/sezione successiva; la
   scala parte dal centro, quindi ci resta a cavallo a qualsiasi dimensione. */
@media only screen and (max-width: 1199px) {
  .hero-area .big-text-wrapper {
    position: relative;
    z-index: 2;
    transform: translateY(50%);
  }
  .hero-area .big-text.big-wordmark {
    display: block;
    transform: none;
  }
}

/* Spazio sotto il contenuto hero (prima del wordmark) uguale allo spazio sopra
   (tra header e titolo): il section-spacing sopra/sotto e' identico, quindi
   basta compensare l'offset header(72) - margin-top(61) = 11px. */
.hero-area .hero-content { margin-bottom: -11px !important; }

.hero-area .feature-box .number {
  white-space: nowrap;
}
.hero-area .feature-box .number .lockin-tag {
  font-size: 0.24em;
  font-weight: 500;
  line-height: 1;
  vertical-align: middle;
  margin-left: 0.18em;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ============================================================
   Mobile: il template Redox non scala alcuni display-title sotto
   1399/1199px (restano 80-120px) e su schermi stretti tagliano il
   testo. Qui li riportiamo a misure leggibili e togliamo le
   decorazioni hover (solo desktop) che generano overflow fantasma.
   ============================================================ */
@media (max-width: 767px) {
  .section-title { overflow-wrap: break-word; }

  /* "NEGLI ULTIMI 20 ANNI..." — uppercase 80px fisso -> scala */
  .about-area .section-title { font-size: clamp(22px, 6.4vw, 34px) !important; }

  /* "Le aziende non devono..." con parole evidenziate */
  .productivity-area .section-title { font-size: clamp(24px, 6.4vw, 34px) !important; }
  .productivity-area .section-title span { display: inline; }
  .productivity-area .section-title .shape-1::before,
  .productivity-area .section-title .shape-2::before,
  .productivity-area .section-title .shape-3::before { display: none !important; }

  /* Titoli con animazione word/char: leggermente più piccoli per non
     tagliare l'ultima parola su schermi stretti */
  .funfact-area .section-title { font-size: clamp(28px, 8vw, 35px) !important; }
  .cta-area .section-title { font-size: clamp(26px, 3.6vw, 50px); }

  /* Il template nasconde tutti i <br> su mobile (br{display:none}), fondendo
     le parole ai lati. Ripristino l'a-capo dove è parte del disegno. */
  .cta-area .section-title br,
  .approach-area-about-page .approach-box .title br { display: inline; }
}

/* Disattiva le forme-marchio che comparivano all'hover sulle parole
   evidenziate dello statement (gimmick Redox): distraevano dalla lettura. */
.productivity-area .section-title .shape-1::before,
.productivity-area .section-title .shape-2::before,
.productivity-area .section-title .shape-3::before { display: none !important; }

/* Highlighted words in statements: brand accent instead of the
   template grey, matching .text-theme used elsewhere. */
.productivity-area .section-title span,
.dark .productivity-area .section-title span { color: #007888 !important; }

/* ============================================================
   Mobile polish (<=767px): il template spegne moto/decori/hover
   e resta una sequenza di sezioni testo sullo stesso beige, con
   una schermata quasi vuota (about = 100vh) → "scarno + confuso".
   Qui, SOLO layout/ritmo (nessun cambio ai testi): togliamo il
   vuoto, diamo respiro tra i blocchi, gerarchia titolo→testo e
   un divisore-ancora per orientare lo scroll.
   ============================================================ */
@media (max-width: 767px) {
  /* 1. "Negli ultimi 20 anni…": il template la forza a 100vh senza
     override mobile → schermata quasi vuota. Altezza al contenuto. */
  .about-area .about-area-inner {
    height: auto;
    min-height: 0;
    padding-block: 56px;
  }

  /* Corner brackets sit on the section-content edges: pad the box so
     title and button don't touch them. */
  .about-area .section-content { padding-block: 30px; }

  /* 2. Gerarchia titolo→testo: più stacco e interlinea leggibile sui
     paragrafi, così i muri di testo si scansionano meglio. */
  .section-content .text-wrapper { margin-top: 20px; }
  .about-area .section-content .text,
  .client-area .section-content .text { line-height: 1.5; }

  /* 3. Divisore-ancora oro: dà ritmo e segnala "nuova sezione" sulle
     sezioni altrimenti nude (niente testo, pura decorazione). */
  .client-area .section-title-wrapper::before,
  .productivity-area .section-content::before {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: #DAC19B;
    margin: 0 0 22px;
  }
  .productivity-area .section-content::before { margin-inline: auto; }

  /* 4. Marquee claim: sfuma i bordi così la fascia legge come accento
     e non come scritta ripetuta che "grida". */
  .work-area .text-slider {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
}

/* ============================================================
   Hero mobile (<=767px) — tre tempi invece di un blocco unico.
   Il template su mobile appiattisce tutto in una colonna e sposta il
   badge in fondo (order:3), spegnendo la guida verticale che su
   desktop tiene insieme le due prove. Qui la ripristiniamo:
   1) il claim da solo, centrato nella prima schermata piena;
   2) "Zero lock-in" e "100%" scendono lungo la guida, con la
      conchiglia come nodo;
   3) la presentazione chiude con la figura del timone.
   ============================================================ */
.hero-area .hero-hello,
.hero-area .hero-hello-figure { display: none; }
.hero-area .text-wrapper .text + .text { margin-top: 14px; }

@media (max-width: 767px) {
  .hero-area .hero-area-inner { padding-top: 0; }
  .hero-area .hero-content {
    grid-template-columns: 68px 1fr;
    gap: 0;
    margin-top: 0;
  }
  .hero-area .hero-content > .section-content { display: contents; }

  /* 1. Claim: da solo, centrato nel pannello sage (il padding scala il
     centraggio sull'altezza del pannello, non su tutta la schermata). */
  .hero-area .hero-content > .section-header {
    grid-area: 1 / 1 / 2 / -1;
    margin-top: 0;
    min-height: 100vh;
    min-height: 100svh;
    padding-bottom: calc(100vh - var(--ep-panel));
    padding-bottom: calc(100svh - var(--ep-panel));
    display: flex;
    align-items: center;
  }
  /* Claim e coda quasi allo stesso corpo: una frase sola, la coda in
     teal e appena piu' piccola (~4%), quel tanto che basta perche' la
     "e" di "fare" non finisca sotto la torre. */
  .hero-area .section-title,
  .hero-area .hero-subtitle {
    font-size: clamp(34px, 11.5vw, 52px);
    line-height: 1.12;
  }
  .hero-area .hero-subtitle {
    margin-top: 0;
    max-width: none;
    font-size: clamp(33px, 11vw, 50px);
    color: #007888;
  }
  /* "Riprenditi / il marketing": la coppia resta unita accanto al faro. */
  .hero-area .ep-sm-br { display: block; }
  .ep-sm-hide { display: none; }

  /* 2. Wordmark: a piena larghezza sotto il faro, centrato nella fascia tra
     la linea del pannello e la piega — nessuna sovrapposizione col disegno.
     Si rimpicciolisce allo scroll (epala-motion.js); fuori flusso, cosi' la
     griglia delle prove resta intatta. */
  .hero-area .big-text-wrapper {
    position: absolute;
    top: var(--ep-sage);
    left: 0;
    right: 0;
    padding-inline: 15px;
    transform: translateY(-50%);
  }

  /* 3. Guida verticale + prove */
  .hero-area .hero-content > .award-wrapper {
    grid-area: 2 / 1 / 3 / 2;
    order: 0;
    align-self: stretch;
    justify-content: center;
  }
  /* Su schermo stretto la doppia riga grigia del template sparisce:
     stessa guida, tinta sage, perche' regge la lettura delle prove. */
  .hero-area .award-wrapper:before,
  .hero-area .award-wrapper:after {
    display: block;
    background-color: rgba(0, 120, 136, 0.32);
    /* La guida non tocca ne' il fondale video sopra ne' il filetto sotto:
       stacca da entrambi, cosi' le linee non si leggono come un angolo. */
    top: 26px;
    height: calc(100% - 52px);
  }
  .hero-area .award-wrapper .circle-text-wrapper { padding-block: 16px; }
  /* Rotating badge text as on desktop: the circle overflows the 68px guide
     column a little, and the SVG text needs a bigger size inside the viewBox
     or it would be unreadable at this scale. */
  .hero-area .award-wrapper .circle-text { width: 78px; height: 78px; }
  .hero-area .award-wrapper .circle-text .text text { font-size: 26px; }
  .hero-area .circle-text .icon { width: 36px; }

  .hero-area .features-wrapper-box {
    grid-area: 2 / 2 / 3 / -1;
    padding: 34px 0 44px 22px;
    border-bottom: 0;
  }
  .hero-area .features-wrapper { grid-template-columns: 1fr; gap: 56px; }
  .hero-area .feature-box .text br { display: inline; }

  /* 4. Presentazione: la mano che saluta apre il blocco a destra, la
     frase-chiave le scorre accanto, il resto torna a piena larghezza. */
  /* Il paragrafo sul metodo qui e' solo un muro di testo (la sezione lo
     riprende piu' sotto): su mobile resta il saluto con la frase-chiave
     accanto alla mano. Lo spazio che libera non accorcia il blocco,
     torna come aria sopra e sotto e il contenuto si legge centrato. */
  .hero-area .text-wrapper .text + .text { display: none; }
  .hero-area .hero-hello {
    grid-area: 3 / 1 / 4 / -1;
    display: block;
    padding-top: 118px;
    padding-right: 34%;
    border-top: 1px solid var(--border);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 600;
    font-size: 23px;
    letter-spacing: -0.01em;
    color: #2A2C28;
  }
  .hero-area .text-wrapper {
    grid-area: 4 / 1 / 5 / -1;
    display: flow-root;
    margin-top: 14px;
    padding-bottom: 36px;
  }
  /* Float, non absolute: la frase-chiave gira intorno al braccio e il
     paragrafo di coda riprende da solo la larghezza piena sotto la mano,
     a qualsiasi larghezza di schermo. */
  .hero-area .hero-hello-figure {
    display: block;
    float: right;
    width: 33%;
    max-width: 150px;
    height: auto;
    margin: -62px -15px 6px 10px;
    pointer-events: none;
  }
  .hero-area .text-wrapper .hero-hello-lead {
    font-size: 21px;
    line-height: 1.3;
  }
}

/* ============================================================
   Mobile-only claim panel + scroll cue.
   Il pannello sage e' il fondo della hero (gradiente con stop netto)
   e si chiude prima della piega, cosi' il "Scorri" cade sul fondo
   pagina. Il faro sta in un layer SOPRA il claim: la maschera lo
   ritaglia sulla sagoma, quindi le righe del titolo gli passano
   dietro senza essere tagliate da un rettangolo.
   Tutto dentro la media query: su desktop i file non si scaricano.
   ============================================================ */
.hero-area .hero-media,
.hero-area .hero-scroll { display: none; }
.ep-sm-br { display: none; }

@media (max-width: 767px) {
  /* Altezza del pannello: 86svh, ma su schermi corti si alza quanto basta
     perche' sotto la linea ci stia il wordmark. Da qui dipendono faro,
     centraggio del claim e posizione del wordmark: e' l'unico numero da
     toccare per allungare o accorciare il pannello.
     --ep-sage e' invece dove si chiude il colore: a meta' del wordmark, che
     resta cosi' a cavallo del sage senza che il faro lo tocchi. */
  .hero-area {
    --ep-panel: min(86vh, 100vh - 96px);
    --ep-sage: calc((100vh + var(--ep-panel)) / 2);
  }
  @supports (height: 1svh) {
    .hero-area {
      --ep-panel: min(86svh, 100svh - 96px);
      --ep-sage: calc((100svh + var(--ep-panel)) / 2);
    }
  }
  .hero-area {
    background-image: linear-gradient(#C7DDDB 0 var(--ep-sage), transparent var(--ep-sage));
    background-repeat: no-repeat;
  }
  /* Clip del pannello: la parte di faro fuori schermo non deve
     generare scroll orizzontale (la hero e' overflow:visible). */
  .hero-area .hero-media {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--ep-panel);
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
  }
  /* Il disegno scala sull'altezza del pannello, ma l'incrocio con il
     claim dipende dalla LARGHEZZA (il corpo del titolo e' in vw).
     Su iOS svh e' molto piu' corto di vh, quindi un offset legato alla
     larghezza del disegno perderebbe la sovrapposizione: l'offset destro
     compensa l'altezza del pannello (0.87 x 800/1209 x 0.628) e tiene il
     bordo della torre a 73.5vw a ogni altezza. */
  .hero-area .hero-media::after {
    content: "";
    position: absolute;
    right: calc(26.5vw - 0.3615 * var(--ep-panel));
    bottom: 0;
    height: 87%;
    aspect-ratio: 800 / 1209;
    background: #F2F7F6 url('/hero-faro.jpg') center bottom / contain no-repeat;
    background-blend-mode: multiply;
    -webkit-mask: url('/hero-faro-mask.png') center bottom / contain no-repeat;
            mask: url('/hero-faro-mask.png') center bottom / contain no-repeat;
  }

  /* Sotto la linea del pannello ci sta una cosa sola, e' il wordmark: il
     "Scorri" resta spento. Per riaccenderlo va accorciato il pannello
     (--ep-panel) di ~90px, altrimenti i due si sovrappongono. */
  .hero-area .hero-scroll {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: absolute;
    left: 50%;
    top: 100vh;
    top: 100svh;
    transform: translate(-50%, -100%);
    margin-top: -24px;
    z-index: 2;
    pointer-events: none;
  }
  .hero-area .hero-scroll-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: rgba(42, 44, 40, 0.62);
  }
  .hero-area .hero-scroll-line {
    position: relative;
    width: 1px;
    height: 40px;
    overflow: hidden;
    background: rgba(42, 44, 40, 0.22);
  }
  .hero-area .hero-scroll-line::after {
    content: "";
    position: absolute;
    left: 0;
    width: 1px;
    height: 14px;
    background: #2A2C28;
    animation: ep-scroll-cue 2.1s cubic-bezier(0.55, 0, 0.35, 1) infinite;
  }
}

@keyframes ep-scroll-cue {
  0% { top: -14px; opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { top: 40px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-area .hero-scroll-line::after { animation: none; top: 13px; opacity: 1; }
}

/* ============================================================
   Page hero (pagine interne) — componente PageHero.astro.
   Desktop: resta la grande parola del template, gli extra nascosti.
   Mobile: hero centrata con onde sage in filigrana, conchiglia del
   brand, filetto e micro-intro. Testo alto (poco spazio sotto
   l'header), motivo e "scorri" riempiono sotto.
   ============================================================ */
@media (min-width: 768px) {
  .page-hero .page-hero-rule,
  .page-hero .page-hero-intro { display: none; }
}

@media (max-width: 767px) {
  /* Hero compatta "Panel sage": blocco sage tenue con angoli inferiori
     arrotondati, contenuto centrato e alto quanto serve (niente vuoto). */
  .page-hero {
    background: #E4EFEF;
    border-radius: 0 0 26px 26px;
  }
  .page-hero .page-title-area-inner {
    padding-top: 30px;
    padding-bottom: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .page-hero .page-title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .page-hero .page-title {
    text-align: center;
    color: #2A2C28;
    letter-spacing: -0.02em;
  }
  .page-hero .page-hero-rule {
    width: 40px;
    height: 3px;
    border-radius: 3px;
    background: #DAC19B;
    margin: 16px 0 14px;
  }
  .page-hero .page-hero-intro {
    font-size: 14px;
    line-height: 1.5;
    color: #5C6B6B;
    max-width: 30ch;
    margin: 0;
  }
}

/* Footer: il template limita .footer-logo a 147-207px sui breakpoint bassi,
   ma il logo ha height:48px inline -> con img{max-width:100%} la larghezza
   viene tagliata mentre l'altezza resta fissa, schiacciando il logo.
   Rimuovo il cap così l'aspect-ratio (4.83:1) resta corretto. */
.footer-area .footer-logo { max-width: none !important; }
.footer-area .footer-logo img { max-width: none; }

/* ============================================================
   Desktop: i titoli h2 di sezione del template sono molto grandi
   (fino a 80-120px). Li riduciamo di ~13% su ogni gradino di
   breakpoint (mobile <=767 gestito sopra). Niente clamp fluido:
   la scala del template è a step, un clamp finirebbe per ingrandire
   in alcune fasce (es. 1200-1399). Ordine ascendente: vince lo step
   più alto che combacia.
   ============================================================ */
@media (min-width: 768px) {
  .section-title { font-size: 36px; }
  .hero-area .section-title { font-size: 44px; }
  .about-area .section-title { font-size: 70px; }
}
@media (min-width: 992px) {
  .section-title { font-size: 44px; }
}
@media (min-width: 1200px) {
  .section-title { font-size: 52px; }
}
@media (min-width: 1400px) {
  .section-title { font-size: 70px; }
  .hero-area .section-title { font-size: 62px; }
  .about-area .section-title { font-size: 104px; }
}
@media (min-width: 1920px) {
  .section-title { font-size: 86px; }
  .hero-area .section-title { font-size: 86px; }
}

/* ============================================================
   Palette pulsanti + lineette dai colori del logo:
   verde #007888 e oro #DAC19B.
   ============================================================ */

/* Pulsanti: verde pieno di base, riempimento oro (#DAC19B) in hover. */
.rr-btn.hover-bg-theme { background-color: #007888; }
.rr-btn.hover-bg-theme::before { background-color: #DAC19B; }
.rr-btn.hover-bg-theme .btn-wrap .text-one,
.rr-btn.hover-bg-theme .btn-wrap .text-two { color: #FFFFFF; }
.rr-btn.hover-bg-theme:hover .btn-wrap .text-two,
.rr-btn.hover-bg-theme:focus .btn-wrap .text-two { color: #2A2C28; }

/* I tre paragrafi della fascia scura di "Chi siamo" arrivano attaccati:
   il template non stacca i .text tra loro. */
.media-area-page-about .section-content .text + .text { margin-top: 18px; }

/* Pulsante sulla fascia scura di "Chi siamo": sabbia pieno, verde in hover. */
.media-area-page-about .rr-btn.hover-bg-theme { background-color: #DAC19B; }
.media-area-page-about .rr-btn.hover-bg-theme::before { background-color: #007888; }
.media-area-page-about .rr-btn.hover-bg-theme .btn-wrap .text-one { color: #2A2C28; }
.media-area-page-about .rr-btn.hover-bg-theme .btn-wrap .text-two { color: #2A2C28; }
.media-area-page-about .rr-btn.hover-bg-theme:hover .btn-wrap .text-two,
.media-area-page-about .rr-btn.hover-bg-theme:focus .btn-wrap .text-two { color: #FFFFFF; }

/* Marquee del claim: una sola riga di chiusura (il template ne disegna due,
   una sul box e una sullo slider). */
.work-area .text-slider-box { padding-bottom: 0; border-bottom: 0; }

/* Lineette (divisori sottili) in oro #DAC19B. */
.funfact-area .funfact-wrapper-box .line-1,
.funfact-area .funfact-wrapper-box .line-2,
.funfact-area .funfact-wrapper-box .line-3,
.funfact-area .funfact-wrapper-box .line-4 { background-color: rgba(218, 193, 155, 0.18) !important; }

/* Etichette dei principi in sabbia: il verde #007888 della palette su questa
   fascia quasi nera si ferma a 3.6:1 di contrasto (sotto la soglia AA). */
.funfact-area .funfact-item .text strong {
  color: #DAC19B;
  text-transform: uppercase;
}

/* Sottotitolo dentro la fascia scura funfact: oro per restare leggibile. */
.funfact-area .section-subtitle { color: #DAC19B; }
.funfact-area .section-header .text {
  color: rgba(255, 255, 255, 0.7);
  max-width: 440px;
  margin-top: 26px;
}

/* Sottotitoli su pannelli scuri: bianchi per restare leggibili. */
.media-area-page-about .section-subtitle { color: #fff; }

/* Visual nella colonna sinistra di about-area-details (chi siamo, a chi ci rivolgiamo, il metodo).
   Stesso ingombro su tutte e tre le pagine: le immagini piu alte del box rientrano
   invece di allungare la colonna. */
.about-area-details .target-visual {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 843;
  height: auto;
  object-fit: contain;
  margin-top: 40px;
}
@media only screen and (max-width: 991px) {
  .about-area-details .target-col { display: flex; flex-direction: column; }
  .about-area-details .target-col .target-visual { order: 1; margin-top: 0; }
  .about-area-details .target-col .info-list { order: 2; margin-top: 28px; }
  .about-area-details .section-content-wrapper { border-top: 0; padding-top: 0; }
}

/* Divisore oro con pesce che nuota lentamente (home, 2a sezione). */
.epala-fishline {
  position: relative;
  height: 46px;
  width: min(520px, 80%);
  margin: 4px auto 34px;
  overflow: hidden;
}
.epala-fishline::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background-color: #DAC19B;
}
.epala-fishline-fish {
  position: absolute;
  top: 50%;
  left: -8%;
  width: 40px;
  height: auto;
  transform: translateY(-50%);
  animation: epala-swim 18s linear infinite;
}
.epala-fishline-fish svg { display: block; width: 100%; height: auto; }
@keyframes epala-swim {
  0% { left: -8%; }
  100% { left: 104%; }
}
@media (prefers-reduced-motion: reduce) {
  .epala-fishline-fish { animation: none; left: 50%; transform: translate(-50%, -50%); }
}

/* Sotto i titoli delle pagine interne: allineato a sinistra come il titolo. */
.about-area-details .title-wrapper .epala-fishline {
  width: min(520px, 100%);
  margin: 26px 0 0;
}

.container-preloader .animation-preloader .ep-preloader-logo {
  display: block;
  width: auto;
  height: clamp(72px, 12vw, 110px);
  margin: 0 auto;
  animation: ep-preloader-pulse 1.4s ease-in-out infinite;
}
@keyframes ep-preloader-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1); }
}

/* Video di sfondo sezione "Perché siamo la novità": appena percettibile
   sotto un overlay nero, il contenuto resta sopra. */
.funfact-area { overflow: hidden; }
.funfact-area .funfact-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.funfact-area .funfact-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.82);
}
.funfact-area .container { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .funfact-area .funfact-bg-video { display: none; }
}

/* Immagini del "metodo" su mobile: banner 545x265 mostrato per intero
   (niente crop), largo quanto il testo/colonna. La larghezza intrinseca
   dell'immagine (545px) forzava la traccia grid oltre il viewport
   (grid item min-width:auto = min-content): azzeriamo il minimo. */
@media only screen and (max-width: 991px) {
  .services-wrapper-1 .service-box,
  .services-wrapper-1 .service-box > * { min-width: 0; }
  .services-wrapper-1 .service-box .thumb img {
    width: 100%;
    max-width: 100%;
    height: auto !important;
    object-fit: contain !important;
    display: block;
  }
}
/* Su mobile le card metodo in colonna unica: titolo + lista larghi quanto
   la foto sottostante (il template lascia il testo in una colonna da 380px
   accanto al numero tra 576 e 767px). */
@media only screen and (max-width: 767px) {
  .services-wrapper-1 .service-box {
    grid-template-columns: 1fr !important;
  }
  .services-wrapper-1 .service-box .thumb {
    grid-column: auto !important;
  }
  .services-wrapper-1 .service-box .count {
    display: none;
  }
}

/* Intro del "metodo": solo mobile, testo a piena larghezza sotto il
   titolo e il disegno che chiude il blocco. */
.ep-method-intro { display: none; }

@media only screen and (max-width: 767px) {
  .ep-method-intro {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
  }
  .ep-method-intro .text {
    margin: 0;
  }
  .ep-method-intro img {
    align-self: center;
    width: 80%;
    max-width: 290px;
    height: auto;
    margin-top: 18px;
    pointer-events: none;
  }
}

/* Contatti: sotto i 991px le due colonne si impilano e il form scorre
   subito dopo i recapiti, con la stessa grafia (testo scuro allineato a
   sinistra), quindi ne sembra la prosecuzione. Su mobile lo stacchiamo:
   filetto oro, piu aria e un'etichetta in display che apre il blocco. */
.contact-area-contact-page .ep-form-lead { display: none; }

@media only screen and (max-width: 991px) {
  .contact-area-contact-page .contact-wrap {
    margin-top: 20px;
    padding-top: 44px;
    border-top: 1px solid #DAC19B;
  }
  .contact-area-contact-page .ep-form-lead {
    display: block;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--primary);
    margin-bottom: 38px;
  }
}