@charset "UTF-8";

/* =============================================================================
   Excelior — Main Stylesheet
   Mobile-first · CSS custom properties · BEM + Bootstrap
   ============================================================================= */


/* ── Font self-hosted ──────────────────────────────────────────────────────── */

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/geist-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/geist-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ── Custom Properties ───────────────────────────────────────────────────────── */

:root {
    /* ── Color styles ───────────────────────────────────────────────────────── */
    --color-gold:          #946F45;
    --color-gold-rgb:      148, 111, 69;
    --color-blue:          #12172A;   /* fondo dominante del sito */
    --color-blue-deep:     #101425;   /* fasce piene: tabella confronto */
    --color-blue-rgb:      18, 23, 42;
    --color-obsidian:      #080A0E;   /* da confermare */
    --color-graphite:      #1B1D23;   /* da confermare */
    --color-ivory:         #F5F1E9;   /* da confermare */
    --color-swiss-grey:    #717781;   /* da confermare */
    --color-mist:          #ADB5C0;   /* testi introduttivi su fondo blu */
    --color-smoke:         #C2C2C2;   /* testi su fondo immagine */

    /* ── Superfici ─────────────────────────────────────────────────────────── */
    /* Il blu con un velo bianco o nero, non tinte a sé */
    --surface-raised:      color-mix(in srgb, #ffffff 8%, var(--color-blue));
    --surface-subtle:      color-mix(in srgb, #ffffff 5%, var(--color-blue));
    --surface-sunken:      color-mix(in srgb, #000000 11%, var(--color-blue));

    /* ── Alias semantici — tema scuro ────────────────────────────────────── */
    --color-primary:       var(--color-blue);
    --color-primary-rgb:   var(--color-blue-rgb);
    --color-secondary:     var(--color-swiss-grey);
    --color-accent:        var(--color-gold);
    --color-accent-rgb:    var(--color-gold-rgb);
    --color-bg:            var(--color-blue);
    --color-bg-alt:        var(--surface-raised);
    --color-text:          #ffffff;
    --color-text-muted:    var(--color-swiss-grey);
    --color-border:        rgba(255, 255, 255, 0.05);

    /* Bootstrap overrides */
    --bs-primary:          var(--color-accent);
    --bs-primary-rgb:      var(--color-accent-rgb);
    --bs-body-bg:          var(--color-bg);
    --bs-body-color:       var(--color-text);

    /* Typography */
    --font-family-base:    'Geist', system-ui, -apple-system, sans-serif;
    --font-family-heading: var(--font-family-base);
    --font-family-display: 'Poppins', var(--font-family-base);   /* eyebrow e titoli */
    --line-height-base:    1.6;

    /* Il nome è il valore px a 1920. 11/13/15/16/21/28 non scalano */
    --fs-11:  0.6875rem;                                   /* disclaimer footer — fisso */
    --fs-12:  0.75rem;                                     /* ruolo schede team — fisso */
    --fs-13:  0.8125rem;                                 /* eyebrow, barra legale — fisso */
    --fs-14:  0.875rem;
    --fs-15:  0.9375rem;                                   /* voci menu e footer — fisso */
    --fs-16:  1rem;
    --fs-18:  clamp(1rem,     0.1vw + 1rem,    1.125rem);  /* 16→18px testi introduttivi */
    --fs-20:  clamp(1rem,     0.21vw + 1rem,   1.25rem);   /* 16→20px intestazioni tabella */
    --fs-21:  clamp(1.0625rem, 0.26vw + 1rem,  1.3125rem); /* 17→21px payoff footer */
    --fs-22:  clamp(1.125rem, 0.31vw + 1rem,   1.375rem);  /* 18→22px */
    --fs-25:  clamp(1.25rem,  0.47vw + 1rem,   1.5625rem); /* 20→25px titolo card pilastro */
    --fs-28:  clamp(1.25rem,  0.63vw + 1rem,   1.75rem);   /* 20→28px banda CTA */
    --fs-32:  clamp(1.375rem, 0.83vw + 1rem,   2rem);      /* 22→32px titolo card insight */
    --fs-36:  clamp(1.5rem,   1.04vw + 1rem,   2.25rem);   /* 24→36px nome founder */
    --fs-40:  clamp(1.5rem,   1.25vw + 1rem,   2.5rem);    /* 24→40px */
    --fs-50:  clamp(1.75rem,  1.77vw + 1rem,   3.125rem);  /* 28→50px numero step */
    --fs-56:  clamp(2rem,     2.08vw + 1rem,   3.5rem);    /* 32→56px */
    --fs-58:  clamp(2rem,     2.19vw + 1rem,   3.625rem);  /* 32→58px titolo dei tre pilastri */
    --fs-60:  clamp(2rem,     2.29vw + 1rem,   3.75rem);   /* 32→60px titolo step */
    --fs-64:  clamp(2.5rem,   2.5vw + 1rem,    4rem);      /* 40→64px titolo di sezione */
    --fs-72:  clamp(2.25rem,  2.92vw + 1rem,   4.5rem);    /* 36→72px titolo hero home */
    --fs-80:  clamp(2.5rem,   3.33vw + 1rem,   5rem);      /* 40→80px */
    --fs-86:  clamp(2.75rem,  3.65vw + 1rem,   5.375rem);  /* 44→86px titolo pagine con form */
    --fs-110: clamp(3rem,     4.90vw + 1rem,   6.875rem);  /* 48→110px titolo di pagina */

    /* Spacing — il nome riflette il valore px a 1920px */
    --p-30:   clamp(15px, 1.5625vw, 30px);
    --p-60:   clamp(20px, 3.125vw, 60px);
    --p-90:   clamp(30px, 4.69vw,  90px);
    --p-120:  clamp(60px, 6.25vw,  120px);
    --p-160:  clamp(90px, 8.33vw,  160px);
    /* Testata pagina: libera l'header fixed e lascia respiro fino al titolo (~300px @1920) */
    --p-head: clamp(7.5rem, 10vw + 6.75rem, 18.75rem);


    --gutter-off:   max(1.25rem, 6vw);
    --gutter-half:  calc(var(--gutter-off) / 2);
    --gutter-in:    max(0.9375rem, 0.8125vw); /* gap interno colonne row */

    /* Focus */
    --focus-rgba: rgba(var(--color-accent-rgb), 0.35);
    --focus-ring: 0 0 0 3px var(--focus-rgba);

    /* Transitions */
    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:   0.25s var(--transition-timing);

    /* Per le entrate: --transition-timing è una in-out e i primi 100ms
       restano quasi fermi */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

    /* Vetro, per dimensione della superficie. Fuori scala .plan-card (100):
       sta sul fondo dorato e il blur alto serve a schermarlo */
    --glass-sm:   blur(20px);   /* righe, chip, barre */
    --glass-md:   blur(36px);   /* schede in griglia */
    --glass-lg:   blur(50px);   /* pannelli e card grandi */
    --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.07);

    /* La scrive initHeader(); qui solo il fallback pre-JS. Mai come
       min-height su .header: loop ResizeObserver */
    --header-h: 72px;
}

/* Gutter responsive — step mobile-first. Il padding del container è la metà. */
@media (min-width: 768px)  { :root { --gutter-off: 12vw; } }
@media (min-width: 1200px) { :root { --gutter-off: 24vw; } }


/* ── Reset minimale ──────────────────────────────────────────────────────────── */
/* Bootstrap reboot copre il grosso. Qui solo ciò che non gestisce. */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
}

p,
figure {
    margin-block: 0;
}

/* Vale su ogni ancora e su ogni scrollTo programmatico */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    font-family:             var(--font-family-base);
    font-size:               var(--fs-16);
    line-height:             var(--line-height-base);
    color:                   var(--color-text);
    background:              var(--color-bg);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tre layer su un solo pseudo-elemento: niente markup da ripetere nei
   template e nessun nodo in più nell'albero di accessibilità */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
    /* ordine: favicon (sopra), glow DX, glow SX */
    background-image:
        url('../img/bg-favicon.svg'),
        radial-gradient(circle closest-side, rgba(77, 97, 173, 0.4), rgba(var(--color-blue-rgb), 0.4)),
        radial-gradient(circle closest-side, rgba(77, 97, 173, 0.4), rgba(var(--color-blue-rgb), 0.4));
    background-size:
        79.7vw 79.5vw,
        58.39vw 58.39vw,
        55.83vw 55.83vw;

    background-position:
        32.58vw -4.22vw,
        right -20.89vw bottom -24vw,
        -15.73vw -37.55vw;
}

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

/* Nasconde il bordo su img senza src o con src vuoto */
img:not([src]),
img[src=""] {
    visibility: hidden;
}


/* ── Media utilities ─────────────────────────────────────────────────────────── */
/*
 * Pattern: wrapper posizionato + immagine assoluta che riempie il container.
 * Usare un <div class="media"> lascia <figure> libero per la semantica HTML:
 *
 *   Semplice:
 *   <div class="media" style="aspect-ratio: 16/9">
 *       <img class="img-cover" src="..." alt="..." loading="lazy">
 *   </div>
 *
 *   Con caption (semantica corretta):
 *   <figure>
 *       <div class="media" style="aspect-ratio: 16/9">
 *           <img class="img-cover" src="..." alt="..." loading="lazy">
 *       </div>
 *       <figcaption>Didascalia</figcaption>
 *   </figure>
 *
 * .media       — wrapper (position: relative, display: block)
 * .media-bg    — wrapper decorativo: no pointer-events, no select.
 *                Supporta ::after per overlay (solo su <div>, non su <img>)
 * .img-cover   — riempie il wrapper, object-fit: cover   (foto, hero, card)
 * .img-contain — riempie il wrapper, object-fit: contain (loghi, illustrazioni)
 * .img-scale   — riempie il wrapper, object-fit: scale-down (icone, asset misti)
 *
 * NB: Bootstrap ha .object-fit-cover ecc. ma senza il posizionamento assoluto —
 * queste classi coprono il pattern "fill container" completo.
 */

.media {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

.img-cover,
.img-contain,
.img-scale,
.media-bg,
.media-bg::after {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.img-contain { object-fit: contain; }
.img-scale   { object-fit: scale-down; }

::selection {
    background: rgba(var(--color-accent-rgb), 0.35);
    color: #ffffff;
}


/* ── Link base ───────────────────────────────────────────────────────────────── */
/* Neutri di default — colore e stile aggiunto nel contesto (header, footer, .text…) */

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

/* Rimuove l'outline al click/tap ma lo preserva per navigazione da tastiera — EAA */
a:focus:not(:focus-visible) {
    outline: none;
}


/* ── Accessibility ───────────────────────────────────────────────────────────── */

/* Focus ring — EAA / WCAG 2.4.7 */
:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Skip link — usa .visually-hidden-focusable di Bootstrap per show-on-focus */
.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    border-radius: 4px;
}

/* Classe emessa dal core e dai plugin: Bootstrap non la fornisce */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute !important;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    clip: auto !important;
    clip-path: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.5rem 1rem;
    z-index: 9999;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    border-radius: 4px;
}


/* ── Loader ──────────────────────────────────────────────────────────────────── */

.site-loader {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.site-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.site-loader__bars {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 16px;
}

.site-loader__bars span {
    display: inline-block;
    width: 1px;
    height: 100%;
    background: var(--color-primary);
    animation: stretchdelay 1.2s ease-in-out infinite;
}

.site-loader__bars span:nth-child(2) { animation-delay: -1.1s; }
.site-loader__bars span:nth-child(3) { animation-delay: -1.0s; }
.site-loader__bars span:nth-child(4) { animation-delay: -0.9s; }
.site-loader__bars span:nth-child(5) { animation-delay: -0.8s; }

@keyframes stretchdelay {
    0%, 40%, 100% { transform: scaleY(0.4); }
    20%           { transform: scaleY(1); }
}


/* ── Header ────────────────────────────────────────────────────────────────── */
/* fixed e non sticky: l'hero passa sotto la pillola. Il padding base è lo
   stato scrollato, .is-top lo estende */

.header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 100;
    padding-block: 0.75rem;
    transition: padding-block 0.4s var(--transition-timing);
}

.header.is-top {
    padding-block: clamp(0.75rem, 2.8125vw, 54px);
}

/* 42px a 1920 = 2.1875vw. La barra sconfina nel gutter di questo valore,
   così logo, menu e CTA si allineano al contenuto sotto */
.header__bar {
    --glass-pad-x: max(1rem, 2.1875vw);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: var(--glass-sm);
    -webkit-backdrop-filter: var(--glass-sm);
    box-shadow: 4px 4px 100px rgba(0, 0, 0, 0.05);
}

.header__logo        { display: inline-flex; align-items: center; flex: 0 0 auto; }
.header__logo .brand { height: 22px; }

/* Nessun display qui: lo danno le utility Bootstrap sul markup, e una regola
   a due classi vincerebbe su di loro */

.header__menu {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.header__menu a {
    color: #fff;
    font-size: var(--fs-14);
    font-weight: 500;
    transition: color var(--transition-base);
}

.header__menu a:hover,
.header__menu a:focus-visible,
.header__menu .current-menu-item > a,
.header__menu .current_page_item > a {
    color: var(--color-gold);
}

.header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
}

.header .header__cta {
    --bs-btn-font-size:      var(--fs-13);
    --bs-btn-padding-x:      15px;
    --bs-btn-padding-y:      6px;
    --bs-btn-border-radius:  3px;
    --bs-btn-border-color:   rgba(255, 255, 255, 0.2);
    --bs-btn-color:          #fff;
    --bs-btn-hover-bg:       rgba(255, 255, 255, 0.1);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.4);
    --bs-btn-hover-color:    #fff;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    backdrop-filter: var(--glass-lg);
    -webkit-backdrop-filter: var(--glass-lg);
}

/* Hamburger — fino a xxl */
.header__burger {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
}

.header__burger span,
.header__burger span::before,
.header__burger span::after {
    content: '';
    display: block;
    width: 20px;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.header__burger span::before { transform: translateY(-6px); }
.header__burger span::after  { transform: translateY(4.5px); }

/* Lo stato lo porta aria-expanded: nessuna classe da aggiungere via JS */
.header__burger[aria-expanded="true"] span         { background: transparent; }
.header__burger[aria-expanded="true"] span::before { transform: translateY(0) rotate(45deg); }
.header__burger[aria-expanded="true"] span::after  { transform: translateY(-1.5px) rotate(-45deg); }

/* ≥768: la barra sconfina di --glass-pad-x nel gutter del container. Il +1px
   compensa il border, altrimenti il contenuto resta sfasato di 1px. */
@media (min-width: 768px) {
    .header__bar {
        padding-inline: var(--glass-pad-x);
        margin-inline: calc((var(--glass-pad-x) + 1px) * -1);
    }
}

@media (min-width: 992px) {
    .header__logo .brand { height: 26px; }
}


/* ── Language switcher ─────────────────────────────────────────────────────── */

.lang-switcher__toggle {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    padding: 0;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    background: none;
    color: #fff;
}

.lang-switcher__toggle:hover,
.lang-switcher__toggle:focus-visible { background: rgba(255, 255, 255, 0.1); }

.lang-switcher__menu {
    --bs-dropdown-bg:            var(--surface-raised);
    --bs-dropdown-border-color:  var(--color-border);
    --bs-dropdown-link-color:    #fff;
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.08);
    --bs-dropdown-link-hover-color: var(--color-gold);
    --bs-dropdown-min-width:     8rem;
    font-size: var(--fs-14);
}

.lang-switcher__menu .is-active { color: var(--color-gold); }


/* ── Drawer mobile ───────────────────────────────────────────────────────────── */

.nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    /* 0.35s come il pannello: a 0.25s visibility:hidden tronca l'uscita */
    transition: opacity 0.35s var(--transition-timing),
                visibility 0.35s var(--transition-timing);
}

.nav-drawer.is-open { opacity: 1; visibility: visible; }

.nav-drawer__panel {
    position: absolute;
    inset-block: 0;
    right: 0;
    width: min(320px, 85vw);
    padding: 1.25rem;
    background: var(--surface-sunken);
    transform: translateX(100%);
    transition: transform 0.35s var(--transition-timing);
    overflow-y: auto;
}

.nav-drawer.is-open .nav-drawer__panel { transform: translateX(0); }

.nav-drawer__cta {
    margin-top: var(--p-60);
}

.nav-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.nav-drawer__head .brand { height: 22px; }

.nav-drawer__close {
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
}

.nav-drawer__menu {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-drawer__menu a {
    color: #fff;
    font-size: var(--fs-22);
}

.nav-drawer__menu a:hover,
.nav-drawer__menu a:focus-visible,
.nav-drawer__menu .current-menu-item > a { color: var(--color-gold); }


/* ── Fascia CTA oro ──────────────────────────────────────────────────────────── */

.cta-band {
    background: var(--color-gold);
    padding-block: calc(var(--p-60) * 0.5);
}

.cta-band__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Stesso valore del padding della banda: con un gap fisso, in colonna
       diventa più alto dello spazio ai bordi */
    gap: calc(var(--p-60) * 0.5);
}

.cta-band__title {
    color: #fff;
    font-size: var(--fs-28);
    line-height: 1.2;
    letter-spacing: 0.001em;
    text-wrap: balance;
}

@media (min-width: 768px) {
    .cta-band__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }
}


/* ── Footer ──────────────────────────────────────────────────────────────────── */

.site-footer { color: #fff; }

.footer-main {
    background: var(--surface-sunken);
    padding-block: var(--p-60) var(--p-90);
}

.footer-main__logo {
    display: block;
    width: 190px;
    margin-bottom: var(--p-60);
}
.footer-main__logo .brand { width: 100%; height: auto; color: var(--color-gold); }

.footer-main__payoff {
    max-width: 22em;
    font-size: var(--fs-21);
    font-weight: 500;
    line-height: 1.4;
    text-wrap: balance;
}

.footer-main__social {
    display: flex;
    gap: 1rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

.footer-main__social a {
    display: grid;
    place-items: center;
    color: #fff;
    transition: color var(--transition-base);
}

.footer-main__social a:hover,
.footer-main__social a:focus-visible { color: var(--color-gold); }

.footer-main__col-title { margin-bottom: 1.25rem; }

.footer-main__address {
    margin: 0;
    font-size: var(--fs-15);
    font-style: normal;
    line-height: 1.5;
}

.footer-main__address p:not(:last-child) { margin-bottom: 1.5em; }

.footer-main__menu {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-15);
    line-height: 1.5;
}

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

.footer-main__menu a:hover,
.footer-main__menu a:focus-visible { color: var(--color-gold); }


/* ── Barra legale ────────────────────────────────────────────────────────────── */


.footer-legal {
    background: var(--surface-sunken);
    padding-top: 0.75rem;
    font-size: var(--fs-13);
}

.footer-legal__inner { align-items: center; }

.footer-legal__copy { margin: 0; }

.footer-legal__menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-legal__menu a,
.footer-legal__credits { transition: color var(--transition-base); }

.footer-legal__menu a:hover,
.footer-legal__menu a:focus-visible,
.footer-legal__credits:hover,
.footer-legal__credits:focus-visible { color: var(--color-gold); }

.footer-legal__band {
    margin-top: 0.75rem;
    padding-block: 0.625rem;
    background: var(--color-blue);
}

.footer-legal__disclaimer {
    color: #b2b2b2;
    font-size: var(--fs-11);
    line-height: 1.5;
}


/* ── Brand ────────────────────────────────────────────────────────────────── */

.brand { display: block; width: auto; color: var(--color-accent); }

.navbar-brand        { display: inline-flex; align-items: center; }
.navbar-brand .brand { height: 30px; }

.footer__logo        { display: inline-block; }
.footer__logo .brand { height: 36px; color: #fff; }

.footer__tagline {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0;
    margin-top: 0.75rem;
}

.footer__col-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 1rem;
}

.footer__nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer__nav li a {
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.7);
}

.footer__nav li a:hover,
.footer__nav li a:focus-visible {
    color: #fff;
}

/* Footer Legal */

.footer__legal {
    padding-block: 1.25rem;
    background: rgba(0,0,0,0.2);
    font-size: 0.8125rem;
}

.footer__copy {
    color: rgba(255,255,255,0.5);
    margin-bottom: 0;
}

.footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
}

@media (min-width: 768px) {
    .footer__legal-links { justify-content: flex-end; }
}

.footer__legal-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.footer__legal-menu li a { color: rgba(255,255,255,0.5); }
.footer__legal-menu li a:hover,
.footer__legal-menu li a:focus-visible { color: #fff; }

.footer__credits {
    color: rgba(255,255,255,0.4);
    margin-bottom: 0;
    white-space: nowrap;
}

.footer__credits a       { color: rgba(255,255,255,0.6); }
.footer__credits a:hover,
.footer__credits a:focus-visible { color: #fff; }


/* ── Layout — Bootstrap overrides ───────────────────────────────────────────── */

.container-fluid {
    --bs-gutter-x: var(--gutter-off);
}

.row {
    --bs-gutter-x: var(--gutter-in);
}


/* ── Bootstrap .btn — override globali ──────────────────────────────────────── */

.btn {
    --bs-btn-font-family:      var(--font-family-base);
    --bs-btn-font-size:        var(--fs-16);
    --bs-btn-font-weight:      600;
    --bs-btn-padding-x:        1.875rem;
    --bs-btn-padding-y:        0.765rem;
    --bs-btn-border-radius:    100px;
    --bs-btn-focus-box-shadow: var(--focus-ring);
    letter-spacing: -0.01em;
}

/* Regola a parte: dentro .btn cancellerebbe la transition di Bootstrap su
   colore, sfondo, bordo e ombra.
   Solo a e button: la CTA di .insight-row è uno <span> sopra uno
   stretched-link, e non è lì che si preme */
a.btn,
button.btn {
    transition: transform 0.12s var(--transition-timing);
}

a.btn:active,
button.btn:active,
.video-card:active {
    transform: scale(0.97);
}

.btn-white {
    --bs-btn-color:           var(--color-blue);
    --bs-btn-bg:              #fff;
    --bs-btn-border-color:    rgba(255, 255, 255, 0.2);
    --bs-btn-hover-bg:        #fff;
    --bs-btn-hover-color:     var(--color-blue);
    --bs-btn-font-size:       var(--fs-16);
    --bs-btn-padding-x:       20px;
    --bs-btn-padding-y:       13px;
    --bs-btn-border-radius:   5px;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.btn-white__dot {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 100px;
    background: var(--color-blue);
    color: #fff;
}

/* 0.15s = la durata che Bootstrap dà al bottone attorno */
.btn-white__dot {
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.btn-white__dot svg { width: 5px; height: 8px; }

/* Su bottone trasparente il pallino si inverte: pieno bianco, freccia blu */
.btn-white__dot--light {
    background: #fff;
    color: var(--color-blue);
}

.btn-ghost {
    --bs-btn-color:           #fff;
    --bs-btn-bg:              transparent;
    --bs-btn-border-color:    rgba(255, 255, 255, 0.3);
    --bs-btn-hover-color:     var(--color-blue);
    --bs-btn-hover-bg:        #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-font-size:       var(--fs-15);
    --bs-btn-padding-x:       20px;
    --bs-btn-padding-y:       13px;
    --bs-btn-border-radius:   10px;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.btn-ghost:hover .btn-white__dot--light,
.btn-ghost:focus-visible .btn-white__dot--light {
    background: var(--color-blue);
    color: #fff;
}


/* ── .text — Prosa ───────────────────────────────────────────────────────────── */

.text {
    font-weight: 400;
    font-size: var(--fs-16);
    line-height: 1.6;
}

/* em e non rem: scalano col font-size di .text */
.text :is(h1, h2)     { font-size: 1.5em; }
.text :is(h3, h4)     { font-size: 1.25em; }
.text :is(h5, h6)     { font-size: 1.1em; }

.text :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 600;
    line-height: 1.3;
}

.text :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
    padding-top: 2em;
}

.text :is(p, ul, ol):not(:first-child) {
    padding-top: 1.2em;
}

.text :is(ul, ol) {
    padding-left: 1em;
}

.text strong {
    font-weight: 600;
}

.text a:not(.btn) {
    color: var(--color-accent);
    text-decoration: underline;
}

.text a:not(.btn):hover {
    text-decoration: none;
}


/* ── Eyebrow & Title — tipografia modulare ───────────────────────────────────── */
/*
 * Classi standalone riutilizzabili nei moduli flessibili e ovunque serva
 * un blocco titolo strutturato. Non BEM — si usano da sole o in combinazione.
 *
 *   <p class="eyebrow">I nostri servizi</p>
 *   <h2 class="title">Cosa facciamo per te</h2>
 */

.eyebrow {
    display: block;
    font-family: var(--font-family-display);   /* Poppins 500 */
    font-size: var(--fs-13);
    font-weight: 500;
    line-height: 2.154;
    letter-spacing: 0.077em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.75rem;
}

.title {
    font-size: var(--fs-40);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1.5rem;
}


/* ── Page wrap — pagine semplici (legal, 404…) ───────────────────────────────── */
/*
 * .page-wrap    — padding verticale di sezione, max-width leggibile, centrato
 * .page-title   — h1 standalone, usabile in page.php, 404.php e simili
 *
 * page.php:  class="page-wrap"  +  class="page-title"  +  class="text"
 * 404.php:   class="page-wrap"  +  class="page-title"
 */

.page-wrap {
    padding-block: var(--p-head) var(--p-120);
}

.page-title {
    font-family: var(--font-family-display);   /* Poppins, come da grafica */
    font-size: var(--fs-56);
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 1.4em;
}

/* .page-content__body mantiene line-height editoriale per testi lunghi */
.page-content__body {
    font-size: var(--fs-16);
    line-height: 1.8;
}


/* ── Section head — testata di sezione centrata ─────────────────────────────── */

.section-head {
    text-align: center;
}

.section-head__title {
    font-family: var(--font-family-display);
    font-size: var(--fs-64);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin-bottom: 0;
}

/* Testata di apertura pagina: titolo grande e testo stretto e centrato */
.section-head--hero .section-head__title {
    font-size: var(--fs-110);
    line-height: 1;
}

.section-head--hero .section-head__text {
    max-width: 66ch;
    margin-inline: auto;
    margin-top: 1.556em;
}

.section-head__eyebrow {
    font-size: var(--fs-16);
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 0.125em;
    margin-block: 0 1.85em;
}

.section-head__text {
    margin-top: var(--p-60);
    font-size: var(--fs-18);
    letter-spacing: 0.008em;
    color: var(--color-mist);
}

.section-head__cta { margin-top: var(--p-60); }


/* ── About ──────────────────────────────────────────────────────────────────── */

.about-intro {
    padding-block: var(--p-head) var(--p-60);
}

.about-story {
    padding-block: var(--p-60) var(--p-120);
}

.section-head__subtitle {
    font-family: var(--font-family-display);
    font-size: var(--fs-16);
    font-weight: 600;
    line-height: 1.75;
    letter-spacing: 0.125em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--color-accent);
    margin-top: var(--p-60);
}

.about-intro__media  { margin-top: var(--p-60); }

.about-intro__media {
    aspect-ratio: 16 / 9;
    border-radius: 5px;
    overflow: hidden;
}

/* Brands — righe alternate: l'inversione è su .order-lg-last nel template */
.about-brands {
    position: relative;
    isolation: isolate;   /* confina lo z-index negativo del bg dentro la sezione */
    overflow: hidden;
    padding-block: var(--p-120);
}

.about-brands__bg { z-index: -1; }

.about-brands__bg::after {
    content: "";
    background: rgba(var(--color-blue-rgb), 0.65);
}

.about-brands__item {
    margin-top: var(--p-60);
    background: var(--surface-raised);
}

.about-brands__row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

.about-brands__media {
    aspect-ratio: 4 / 3;
    height: 100%;
    overflow: hidden;
}

.about-brands__body {
    height: 100%;
    padding: var(--p-60);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-brands__title {
    font-size: var(--fs-28);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.001em;
    margin-bottom: 0.643em;
}

.about-brands__text {
    font-size: var(--fs-15);
    letter-spacing: 0.008em;
    color: var(--color-mist);
}

/* Founders */
.about-founders { padding-block: var(--p-120); }

.about-founder {
    margin-top: var(--p-60);
    padding: var(--p-30);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: var(--glass-edge);
    backdrop-filter: var(--glass-lg);
    -webkit-backdrop-filter: var(--glass-lg);
}

.about-founder__row {
    --bs-gutter-x: var(--p-60);
}

.about-founder__media {
    aspect-ratio: 7 / 6;
    min-height: 100%;
    border-radius: 5px;
    overflow: hidden;
}

.about-founder__body {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-founder__name {
    font-size: var(--fs-36);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.005em;
    margin-bottom: 0.222em;
}

.about-founder__role {
    font-family: var(--font-family-display);
    font-size: var(--fs-15);
    font-weight: 500;
    line-height: 1.867;
    letter-spacing: 0.133em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 2em;
}

.about-founder__bio {
    max-width: 68ch;
    font-size: var(--fs-18);
    letter-spacing: 0.008em;
    color: var(--color-mist);
}

/* Mission */
.about-mission { padding-block: var(--p-60) var(--p-120); }

/* Values */
.about-values {
    position: relative;
    isolation: isolate;
    padding-block: var(--p-120);
}

.about-values__bg { z-index: -1; }

.about-values__bg::after {
    content: "";
    background: linear-gradient(44deg, rgba(var(--color-blue-rgb), 0) 13%, rgba(var(--color-blue-rgb), 0.4) 53%);
}

.stack__eyebrow {
    font-size: var(--fs-16);
    line-height: 1.75;
    letter-spacing: 0.125em;
    margin-bottom: 1em;
}

.stack__title {
    font-family: var(--font-family-display);
    font-size: var(--fs-64);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.stack__cta { margin-top: var(--p-60); }

.stack__card {
    padding: var(--p-60);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: var(--glass-edge);
    backdrop-filter: var(--glass-lg);
    -webkit-backdrop-filter: var(--glass-lg);
}

.stack__card:not(:first-child) { margin-top: var(--p-30); }

.stack__card-title {
    font-size: var(--fs-28);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.001em;
    margin-bottom: 1.6em;
}

.stack__card-text {
    font-size: var(--fs-18);
    letter-spacing: 0.008em;
    color: var(--color-smoke);
}

/* People — griglia di schede team */
.about-people { padding-block: var(--p-120); }

.about-people__grid {
    --bs-gutter-x: var(--gutter-in);
    --bs-gutter-y: var(--gutter-in);
    margin-top: var(--p-90);
}

.person {
    height: 100%;
    padding: 21px 21px 32px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: var(--glass-edge);
    backdrop-filter: var(--glass-md);
    -webkit-backdrop-filter: var(--glass-md);
}

/* Riquadro fisso 305×207: i ritratti forniti hanno tagli molto diversi */
.person__media {
    aspect-ratio: 305 / 207;
    border-radius: 4px;
    overflow: hidden;
}

.person__name {
    font-family: var(--font-family-display);
    font-size: var(--fs-28);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.005em;
    margin-top: 0.65em;
}

.person__role {
    font-family: var(--font-family-display);
    font-size: var(--fs-12);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.125em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-top: 0.65em;
}

/* Marquee — markup in blocks/image-marquee.php */
.about-locations { padding-block: var(--p-120); }

.marquee { overflow: hidden; }

.about-locations .marquee { margin-top: var(--p-120); }

/* La sezione custodia parte a filo con il proprio sfondo: lo stacco lo dà il marquee */
.marquee:has(+ .why-custody) { padding-bottom: var(--p-120); }

.marquee__track {
    display: flex;
    gap: var(--gutter-in);
    width: max-content;
    animation: marquee-scroll 60s linear infinite;
}

.marquee__item {
    flex-shrink: 0;
    height: clamp(18.75rem, 10.35vw + 16.32rem, 28.75rem);
}

.marquee__item img {
    display: block;
    width: auto;
    height: 100%;
    border-radius: 5px;
    pointer-events: none;
    user-select: none;
}

/* Il track è duplicato: -50% riporta esattamente alla prima copia */
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
}

/* Featured cards — lanci CTA di fine pagina */
.featured-cards {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--p-120) var(--p-160);
}

/* Il fondo navy del sorgente è stato convertito in alpha, o servirebbe un
   gradiente di raccordo perché il glow del body traspaia */
.featured-cards::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: -1;
    aspect-ratio: 1960 / 321;
    background: url('../img/featured-mesh.webp') center bottom / 100% auto no-repeat;
    pointer-events: none;
    user-select: none;
}

/* Lo stacco sta sulla testata: un margin-top sulla row cancellerebbe quello
   negativo di Bootstrap e il gutter-y diventerebbe spazio in più. */
.featured-cards .section-head {
    margin-bottom: var(--p-60);
}

.featured-cards__row {
    --bs-gutter-x: 0;
}

.featured-card__media {
    height: clamp(18.75rem, 35.16vw, 42.1875rem);
    overflow: hidden;
    border-radius: 5px;
}

/* Affiancate condividono il bordo centrale: il radius resta solo agli spigoli
   esterni. Impilate, e quando la card è una sola, restano tutti e quattro. */
@media (min-width: 768px) {
    .featured-card:first-child:not(:last-child) .featured-card__media {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
    }

    .featured-card:last-child:not(:first-child) .featured-card__media {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
    }
}

.featured-card__title {
    font-size: var(--fs-28);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.001em;
    margin-block: 1.143em 0;
}

.featured-card__cta { margin-top: var(--p-30); }

@media (min-width: 992px) {
    .stack { align-items: start; }

    /* top = header fixed + respiro; align-items:start è il prerequisito dello sticky */
    .stack__aside {
        position: sticky;
        top: calc(var(--header-h) + var(--p-60));
    }
}


/* ── Home ──────────────────────────────────────────────────────────────────── */

.home-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: min(100svh, 1080px);
    padding-block: var(--p-head) var(--p-160);
}

.home-hero__bg { z-index: -1; }

/* Il taglio diagonale vale su una hero larga: in verticale lascia
   scoperta la parte alta, dove cade il titolo */
.home-hero__bg::after {
    content: "";
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.75) 45%,
        rgba(0, 0, 0, 0.92) 100%);
    mix-blend-mode: multiply;
    opacity: 0.9;
}

/* Poppins Regular, parti in evidenza in Bold */
.home-hero__title {
    font-family: var(--font-family-display);
    font-size: var(--fs-72);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin-bottom: 0;
}

.home-hero__title strong { font-weight: 700; }

/* In home i bottoni hanno il radius largo, non quello della banda CTA */
.home-hero .btn,
.home-plans .btn,
.home-why .btn,
.home-mission .btn,
.home-insights .btn { --bs-btn-border-radius: 10px; }

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6875rem;
    margin-top: var(--p-30);
}

/* ── Entrata della hero ────────────────────────────────────────────────────── */
/* Il titolo trasla soltanto: è l'LCP, e da opacity 0 la metrica slitterebbe
   di tutta la durata dell'animazione */

.js .home-hero[data-reveal] { opacity: 1; }

.js .home-hero[data-reveal] .home-hero__title {
    transform: translateY(20px);
    transition: transform 0.6s var(--ease-out);
}

.js .home-hero[data-reveal] :is(.eyebrow, .home-hero__actions, .home-hero__aside) {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}

.js .home-hero[data-reveal] .home-hero__actions { transition-delay: 0.12s; }
.js .home-hero[data-reveal] .home-hero__aside   { transition-delay: 0.22s; }

.js .home-hero[data-reveal].is-in .home-hero__title { transform: none; }

.js .home-hero[data-reveal].is-in :is(.eyebrow, .home-hero__actions, .home-hero__aside) {
    opacity: 1;
    transform: none;
}

.home-video {
    padding-block: var(--p-90);
}

/* Ring come box-shadow inset e non border: un border sposterebbe il layout */
.video-card {
    display: block;
    position: relative;
    padding: 0.625rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: var(--glass-edge),
                inset 0 0 0 1px rgba(var(--color-gold-rgb), 0.18);
    backdrop-filter: var(--glass-lg);
    -webkit-backdrop-filter: var(--glass-lg);
    transition: background-color var(--transition-base),
                box-shadow var(--transition-base),
                transform 0.12s var(--transition-timing);
}

.video-card:hover,
.video-card:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(var(--color-gold-rgb), 0.55),
                0 0 32px -8px rgba(var(--color-gold-rgb), 0.45);
}

.video-card__media {
    display: block;
    position: relative;
    aspect-ratio: 318 / 187;
    border-radius: 5px;
    overflow: hidden;
}

.video-card__media > * {
    transition: transform 0.5s var(--ease-out);
}

.video-card:hover .video-card__media > * {
    transform: scale(1.04);
}


.video-card__label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 0.375rem 0.375rem;
    font-size: var(--fs-16);
    line-height: 1.4;
    color: #fff;
}

/* L'anello sta su ::after: fuori flusso, la label non si sposta */
.video-card__play {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--color-gold);
    transition: color var(--transition-base);
}

.video-card__play::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid currentColor;
    animation: play-ping 2.8s var(--ease-out) infinite;
    pointer-events: none;
}

.video-card:hover .video-card__play {
    color: #fff;
}

@keyframes play-ping {
    0%       { transform: scale(1);   opacity: 0.7; }
    45%,100% { transform: scale(2.1); opacity: 0; }
}

.video-card__play svg {
    display: block;
    width: 100%;
    height: 100%;
}

@media (min-width: 992px) {
    /* Da qui la hero è larga: torna il taglio diagonale */
    .home-hero__bg::after {
        background: linear-gradient(214.79deg, rgba(0, 0, 0, 0) 33.65%, #000000 69.02%);
    }
}

/* Piani: il fondo dorato esce dal container e corre da bordo a bordo */
.home-plans {
    position: relative;
    isolation: isolate;
    padding-block: var(--p-120);
}

.home-plans__bg { z-index: -1; }

/* Stacco tra la testata e le card: il blocco non porta spaziatura propria */
.home-plans__head { margin-bottom: var(--p-120); }

/* Perché l'oro: testo a sinistra, lingotto a destra */
.home-why {
    padding-block: var(--p-120);
}

.home-why__title {
    font-family: var(--font-family-display);
    font-size: var(--fs-56);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin-bottom: 0;
}

.home-why__text {
    margin-top: var(--p-30);
    font-size: var(--fs-18);
    line-height: 1.6;
    color: var(--color-mist);
}

.home-why__cta { margin-top: var(--p-60); }

.home-why__media {
    margin: 0;
}

.home-why__media img {
    display: block;
    width: 100%;
    height: auto;
}

/* Tre pilastri dentro un pannello unico */
.home-pillars {
    padding-block: var(--p-120);
}

.home-pillars__panel {
    padding: var(--p-90) var(--p-60);
}

.home-pillars .section-head__title {
    font-size: var(--fs-58);
    line-height: 1.6;
}

.home-pillars .section-head {
    margin-bottom: var(--p-60);
}

.home-pillar__media {
    aspect-ratio: 431 / 310;
    margin: 0 0 var(--p-30);
    border-radius: 5px;
    overflow: hidden;
}

.home-pillar__title {
    font-size: var(--fs-25);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.5em;
}

.home-pillar__text {
    max-width: 23rem;
    font-size: var(--fs-15);
    line-height: 1.6;
    letter-spacing: 0.008em;
    color: var(--color-mist);
}

/* Mission: enunciato centrato e immagine a tutta colonna */
.home-mission {
    padding-block: var(--p-120);
}

.home-mission__title {
    line-height: 1.35;
}

.home-mission__media {
    aspect-ratio: 1452 / 722;
    margin-top: var(--p-90);
    border-radius: 5px;
    overflow: hidden;
}

.home-insights {
    padding-block: var(--p-120);
}

.home-insights .section-head {
    margin-bottom: var(--p-90);
}


/* ── Module: Hero ────────────────────────────────────────────────────────────── */

.module-hero {
    position: relative;
    min-height: clamp(60vh, 80vh, 90vh);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--color-primary);
    color: #fff;
}

.module-hero__media {
    position: absolute;
    inset: 0;
    margin: 0;
}

.module-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.45;
}

.module-hero__overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-block: var(--p-90);
}

.module-hero__title {
    font-size: var(--fs-80);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1rem;
    color: inherit;
}

.module-hero__subtitle {
    font-size: var(--fs-22);
    margin-bottom: 2rem;
    color: rgba(255,255,255,0.85);
}

.module-hero__cta {
    padding: 0.75rem 2rem;
    font-weight: 600;
}


/* ── Card Post ───────────────────────────────────────────────────────────────── */

.card-post {
    margin-bottom: 2rem;
}

.card-post__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.card-post__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.card-post__title a:hover,
.card-post__title a:focus-visible {
    color: var(--color-accent);
}

.card-post__excerpt p {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}


/* ── Archivio Insights ─────────────────────────────────────────────────────── */

.archive-hero {
    padding-block: var(--p-head) var(--p-60);
}

.archive-hero__row {
    align-items: center;
}

.archive-hero__title {
    font-family: var(--font-family-display);
    font-size: var(--fs-86);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    margin-bottom: 0;
}

.archive-hero__intro {
    font-size: var(--fs-18);
    line-height: 1.6;
    letter-spacing: 0.008em;
    color: var(--color-mist);
}


.insight-filters {
    padding-block: var(--p-30);
}

.insight-filters__list {
    display: flex;
    gap: clamp(1rem, 1.5vw, 1.875rem);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.insight-filters__list::-webkit-scrollbar { display: none; }

.insight-filters__link {
    display: block;
    padding-bottom: 0.375rem;
    border-bottom: 2px solid transparent;
    font-size: var(--fs-18);
    font-weight: 500;
    line-height: 1.28;
    white-space: nowrap;
    color: var(--color-mist);
}

.insight-filters__link:hover,
.insight-filters__link:focus-visible {
    color: #fff;
}

.insight-filters__link.is-current {
    border-bottom-color: #fff;
    color: #fff;
}

.archive-list {
    padding-block: var(--p-30) var(--p-120);
}

.insight-list {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}


.insight-row {
    position: relative;
    display: grid;
    gap: 1.5rem;
    padding: clamp(1.25rem, 1.61vw, 1.9375rem);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: var(--glass-edge);
    backdrop-filter: var(--glass-md);
    -webkit-backdrop-filter: var(--glass-md);
    transition: background-color var(--transition-base),
                box-shadow var(--transition-base);
}

/* Fondo e non translateY: su una card con backdrop-filter il sollevamento
   costa il repaint del blur a ogni frame.
   focus-within: il link sta dentro, da tastiera lo stato deve essere lo stesso */
.insight-row:hover,
.insight-row:focus-within {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: var(--glass-edge),
                inset 0 0 0 1px rgba(var(--color-gold-rgb), 0.35);
}

/* Il click parte dallo stretched-link: :active risale alla card, mai al
   fratello <span> della CTA */
.insight-row:active {
    background: rgba(255, 255, 255, 0.18);
}

@media (min-width: 768px) {
    .insight-row {
        grid-template-columns: minmax(0, 15.1%) minmax(0, 1fr) minmax(0, 34%);
        column-gap: 0;
        align-items: start;
    }

    /* 57px @1920 */
    .insight-row__body {
        padding-right: clamp(1.5rem, 2.97vw, 3.5625rem);
    }
}

.insight-row__date {
    font-size: var(--fs-13);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.insight-row__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.25rem;
}

.insight-row__title {
    font-family: var(--font-family-display);
    font-size: var(--fs-28);
    font-weight: 500;
    line-height: 1.5;
    text-wrap: pretty;
    margin-bottom: 0;
}

.insight-row__cta {
    margin-top: auto;
}

/* La CTA è decorativa: il link è lo stretched-link sul titolo */
.insight-row:hover .insight-row__cta {
    background: #fff;
    border-color: #fff;
    color: var(--color-blue);
}

.insight-row:hover .insight-row__cta .btn-white__dot--light {
    background: var(--color-blue);
    color: #fff;
}

/* Il riquadro resta anche senza immagine in evidenza: è il ritmo della card */
.insight-row__media {
    order: -1;
    aspect-ratio: 16 / 9;
    margin: 0;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}

@media (min-width: 768px) {
    .insight-row__media { order: 0; }
}

.archive-list__empty {
    font-size: var(--fs-18);
    color: var(--color-mist);
}

/* Paginazione: numeri sobri, frecce come le CTA */
.pagination {
    margin-top: var(--p-90);
    justify-content: center;
}

.pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    border-radius: 5px;
    font-size: var(--fs-16);
    color: var(--color-mist);
    transition: color var(--transition-base), background-color var(--transition-base);
}

.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.pagination .page-numbers.current {
    color: var(--color-blue);
    background: #fff;
}

.pagination__arrow svg {
    width: 5px;
    height: 8px;
}

.pagination__arrow--prev {
    transform: scaleX(-1);
}


/* ── Single insight ────────────────────────────────────────────────────────── */

.single-insight__header {
    padding-top: clamp(6.5rem, 13.6vw, 16.3125rem);
}

.single-insight__title {
    font-family: var(--font-family-display);
    font-size: var(--fs-64);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.01em;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    /* 1302 su 1452 @1920: due righe */
    .single-insight__title { max-width: 90%; }
}

.single-insight__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 2.25rem;
    margin-top: var(--p-60);
}

.single-insight__date {
    font-size: var(--fs-13);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.single-insight__tag {
    padding: 0.375rem 0.625rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    font-size: 0.75rem;
    line-height: 1.33;
}

.single-insight__tag:hover,
.single-insight__tag:focus-visible {
    border-color: rgba(255, 255, 255, 0.5);
}

.single-insight__body {
    padding-block: var(--p-120);
}

.single-insight__content {
    font-size: var(--fs-18);
    line-height: 1.8;
    color: var(--color-mist);
}

.single-insight__content h2,
.single-insight__content h3 {
    font-family: var(--font-family-display);
    font-size: var(--fs-28);
    font-weight: 500;
    line-height: 1.4;
    color: #fff;
    margin-block: 2em 0.75em;
}

.single-insight__content > *:first-child {
    margin-top: 0;
}

.single-insight__content img {
    height: auto;
    max-width: 100%;
    border-radius: 5px;
}


/* ── Moduli flessibili del corpo insight ───────────────────────────────────── */
/* Colonna testo 962 e immagine 1206 su 1452 @1920 */

.flex-mod + .flex-mod {
    margin-top: var(--p-120);
}

.flex-text__title {
    font-family: var(--font-family-display);
    font-size: var(--fs-28);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.005em;
    margin-bottom: 1em;
}

.flex-text__body {
    font-size: var(--fs-18);
    line-height: 1.6;
    letter-spacing: 0.008em;
    color: var(--color-mist);
}

.flex-text__cta {
    margin-top: var(--p-60);
}

.flex-media__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.flex-media__caption {
    margin-top: 0.6875rem;
    max-width: 32ch;
    font-size: var(--fs-13);
    line-height: 2.15;
}

.flex-embed__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 5px;
    overflow: hidden;
}

.flex-embed__frame :is(iframe, video, embed, object) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}


/* ── 404 ─────────────────────────────────────────────────────────────────────── */
/* Nessuna regola specifica: usa il body text di default + .page-wrap + .page-title */


/* ── Pagina Perché Excelior ──────────────────────────────────────────────────── */

.why-intro {
    padding-block: var(--p-head) var(--p-60);
}

.why-intro__media {
    margin-top: var(--p-60);
    aspect-ratio: 1452 / 800;
    border-radius: 5px;
    overflow: hidden;
}

.why-transfer {
    padding-block: var(--p-120);
}

/* Quattro punti: icona, titolo, testo — tutto in colonna e centrato */
.why-points {
    --bs-gutter-x: var(--p-60);
    margin-top: var(--p-120);
}

.why-point {
    text-align: center;
}

.why-point__icon {
    width: auto;
    height: 98px;
    margin-inline: auto;
    margin-bottom: var(--p-30);
    pointer-events: none;
    user-select: none;
}

.why-point__title {
    font-size: var(--fs-18);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.008em;
    margin-bottom: 0;
}

.why-point__text {
    font-size: var(--fs-18);
    line-height: 1.6;
    letter-spacing: 0.008em;
    color: var(--color-smoke);
}

.why-custody {
    position: relative;
    isolation: isolate;
    padding-block: var(--p-120);
}

.why-custody__bg { z-index: -1; }

.why-custody__bg::after {
    content: "";
    background: rgba(var(--color-blue-rgb), 0.3);
}

.why-compliance {
    padding-block: var(--p-120);
}

/* Pannello unico che contiene testata e accordion */
.panel-raised,
.why-compliance__panel {
    padding: var(--p-90) var(--p-60);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: var(--glass-edge);
    backdrop-filter: var(--glass-lg);
    -webkit-backdrop-filter: var(--glass-lg);
}


/* ── Pagina Come funziona ──────────────────────────────────────────────────── */
/* Da 992px la card resta pinnata e gli step si alternano in crossfade: la
   corsa la dà --steps, una schermata per step */

.how-intro {
    padding-block: var(--p-head) var(--p-60);
}

.how-steps {
    padding-block: var(--p-90) var(--p-60);
}

/* --bs-gutter-x è il gutter intero: il padding del container ne prende metà */
.how-steps .container-fluid {
    --bs-gutter-x: clamp(2.5rem, 4.17vw, 80px);
}

/* 1946 = larghezza utile del container di sezione a 2560 (76vw): oltre, la card
   crescerebbe solo in larghezza e si schiaccerebbe */
.how-steps__card {
    max-width: 1946px;
    margin-inline: auto;
}

.how-step {
    border-radius: 5px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: var(--glass-edge);
    backdrop-filter: var(--glass-lg);
    -webkit-backdrop-filter: var(--glass-lg);
}

.how-step + .how-step {
    margin-top: var(--p-30);
}

.how-step__media {
    aspect-ratio: 4 / 3;
}

.how-step__body {
    padding: var(--p-60);
}

.how-step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(4rem, 5.31vw, 6.375rem);
    height: clamp(4rem, 5.31vw, 6.375rem);
    margin-bottom: var(--p-30);
    border-radius: 5px;
    background: var(--color-gold);
    font-size: var(--fs-50);
    font-weight: 800;
    line-height: 1;
}

/* Serve solo nello stack: in pin la colonna è già stretta */
.how-step__title {
    max-width: 20ch;
    font-family: var(--font-family-display);
    font-size: var(--fs-60);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.how-step__text {
    max-width: 45ch;
    margin-top: var(--p-30);
    font-size: var(--fs-18);
    line-height: 1.6;
    letter-spacing: 0.008em;
    color: var(--color-mist);
}

.how-steps__counter {
    display: none;
}

@media (min-width: 992px) {
    .js .how-steps__track {
        height: calc(var(--steps) * 100vh);
    }

    /* Misure fisse in vh, non legate a --header-h: quella cambia allo scroll e
       farebbe respirare la card mentre è pinnata. */
    .js .how-steps__card {
        position: sticky;
        --card-h: min(calc(100vh - 7.5rem), 1000px, calc((100vw - 5rem) / 1.84));
        top: max(6rem, calc((100vh - var(--card-h)) / 2));
        /* Il terzo limite è il rapporto 1840/1000: senza, su tablet in verticale
           la card diventa quadrata. height e non aspect-ratio, che stringerebbe
           anche la larghezza. */
        height: var(--card-h);
        border-radius: 5px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.05);
        box-shadow: var(--glass-edge);
        backdrop-filter: var(--glass-lg);
        -webkit-backdrop-filter: var(--glass-lg);
    }

    .js .how-step {
        position: absolute;
        inset: 0;
        margin: 0;
        border-radius: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.6s var(--transition-timing);
    }

    .js .how-step.is-active {
        opacity: 1;
        pointer-events: auto;
    }

    /* width esplicita: .media porta width:100%, che vincerebbe su right:50% */
    .js .how-step__media {
        position: absolute;
        inset: 0 50% 0 0;
        width: 50%;
        aspect-ratio: auto;
    }

    /* 155/1840: le percentuali si misurano sulla card, non sulla colonna.
       A sinistra no, mangerebbe metà colonna sui laptop */
    .js .how-step__body {
        position: absolute;
        inset: 0 0 0 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-block: var(--p-60);
        padding-inline: clamp(3.75rem, 24.4vw - 11.875rem, 17.4375rem) max(1.5rem, 8.4%);
    }

    .js .how-step__num {
        display: none;
    }

    .js .how-steps__counter {
        --counter-size: clamp(4rem, 5.31vw, 6.375rem);
        display: block;
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 50%;
        width: var(--counter-size);
        height: var(--counter-size);
        transform: translate(-50%, -50%);
        border-radius: 5px;
        overflow: hidden;
        background: var(--color-gold);
    }

    .js .how-steps__roll {
        display: flex;
        flex-direction: column;
        transition: transform 0.5s var(--transition-timing);
    }

    .js .how-steps__digit {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        height: var(--counter-size);
        font-size: var(--fs-50);
        font-weight: 800;
        line-height: 1;
    }
}

/* Il pin è movimento imposto: senza di esso la pagina resta lo stack verticale */
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
    .js .how-steps__track { height: auto; }
    .js .how-steps__card  { position: static; height: auto; background: none; backdrop-filter: none; }
    .js .how-step         { position: relative; inset: auto; opacity: 1; pointer-events: auto;
                            border-radius: 5px; background: rgba(255, 255, 255, 0.05); }
    .js .how-step + .how-step { margin-top: var(--p-30); }
    .js .how-step__media  { position: relative; inset: auto; aspect-ratio: 4 / 3; }
    .js .how-step__body   { position: relative; inset: auto; padding: var(--p-60); }
    .js .how-step__num    { display: flex; }
    .js .how-steps__counter { display: none; }
}


/* ── Pagina Piani in oro ───────────────────────────────────────────────────── */

.plans-intro {
    padding-block: var(--p-head) var(--p-60);
}

/* Spaziatura e sfondo li mette la sezione ospite, non il blocco */
.plans-section {
    position: relative;
    isolation: isolate;
    padding-block: var(--p-120);
}

.plans-section__bg { z-index: -1; }


.plans-section__bg::after,
.home-plans__bg::after {
    content: "";
    background: linear-gradient(180deg,
        var(--color-blue) 0%,
        var(--color-blue) 22.09%,
        rgba(var(--color-blue-rgb), 0) 88.35%);
}

.plans-cards__row {
    --bs-gutter-x: var(--p-30);
    --bs-gutter-y: var(--p-30);
}

.plan-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--p-60);
    border-radius: 5px;
    background: rgba(213, 213, 213, 0.05);
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
}

.plan-card__head {
    display: flex;
    align-items: center;
    gap: var(--p-30);
}

.plan-card__icon {
    flex: none;
    width: clamp(4.5rem, 5.89vw, 7.0625rem);
    height: clamp(4.5rem, 5.89vw, 7.0625rem);
    border-radius: 50%;
    object-fit: cover;
}

.plan-card__name {
    font-family: var(--font-family-display);
    font-size: var(--fs-60);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0;
}

.plan-card__text {
    margin-top: var(--p-90);
    font-size: var(--fs-28);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.001em;
}

.plan-card__points {
    margin: var(--p-60) 0 auto;
    padding: 0;
    list-style: none;
    font-size: var(--fs-18);
    letter-spacing: 0.008em;
}

.plan-card__points li {
    display: flex;
    align-items: center;
    gap: 0.85em;
}

.plan-card__points li + li {
    margin-top: 1.5em;
}

.plan-card__check {
    flex: none;
    width: 1.25em;
    height: 1.25em;
    color: #fff;
}

.plan-card__cta {
    width: 100%;
    margin-top: var(--p-90);
    justify-content: center;
    --bs-btn-font-size: var(--fs-16);
    --bs-btn-padding-y: 20px;
    --bs-btn-border-radius: 5px;
}

.plans-compare {
    padding-block: var(--p-90);
    background: var(--color-blue-deep);
}

.plans-table {
    width: 100%;
    min-width: 40rem;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;
}

.plans-table thead th {
    padding-bottom: 1.5rem;
    font-size: var(--fs-20);
    font-weight: 700;
    letter-spacing: 0.008em;
    color: var(--color-accent);
}

.plans-table tbody th,
.plans-table tbody td {
    padding-block: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: var(--fs-18);
    line-height: 1.6;
    letter-spacing: 0.008em;
}

.plans-table tbody tr:last-child th,
.plans-table tbody tr:last-child td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.plans-table tbody th {
    text-align: start;
    font-weight: 500;
}

.plans-table tbody td {
    width: 34.25%;
    font-weight: 400;
}

/* 1px di respiro: senza, l'overflow nasconde il bordo dell'ultima riga */
.plans-table__scroll {
    overflow: auto hidden;
    padding-bottom: 1px;
}

.plans-table__scroll:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

@media (min-width: 768px) {
    /* Sopra il breakpoint la tabella sta nella colonna: niente scroll orizzontale */
    .plans-table { min-width: 0; }
}

.plans-features {
    padding-block: var(--p-120) 0;
}

.plans-features .accordion {
    margin-top: var(--p-120);
}

.plans-features + .marquee {
    margin-top: var(--p-160);
}


/* ── Pagine con form — Contatti e Diventa Gold Advisor ─────────────────────── */
/* Il pannello parte più in alto del titolo (190 contro 308 @1920) */

.contact-hero {
    padding-block: clamp(6rem, 9.9vw, 11.875rem) var(--p-120);
}

.contact-hero__intro {
    padding-top: clamp(0rem, 6.15vw, 7.375rem);
}

.contact-hero__title {
    font-family: var(--font-family-display);
    font-size: var(--fs-86);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    margin-bottom: 0;
}

.contact-hero__text {
    max-width: 32rem;
    margin-top: 3.1em;
    font-size: var(--fs-18);
    letter-spacing: 0.008em;
    color: var(--color-mist);
}

.contact-hero__card {
    margin-top: var(--p-60);
}

.contact-hero__details {
    font-size: var(--fs-18);
    line-height: 1.6;
    letter-spacing: 0.008em;
}

.contact-hero__panel {
    margin-top: var(--p-60);
    padding: clamp(1.5rem, 2.34vw, 2.8125rem) clamp(1.25rem, 2.24vw, 2.6875rem);
}

@media (min-width: 992px) {
    /* Da qui il pannello è affiancato alla testata, non sotto */
    .contact-hero__panel { margin-top: 0; }
}




/* ── Gravity Forms ─────────────────────────────────────────────────────────── */
/* Il CSS del tema "orbital" arriva dopo main.css: si rimappano le sue
   variabili --gf-* invece di combattere a colpi di specificità */

.contact-hero__panel .gform-theme {
    --gf-radius:                          0 !important;
    --gf-form-gap-y:                      19px !important;
    --gf-field-gap-y:                     19px !important;
    --gf-ctrl-size-md:                    56px !important;
    --gf-ctrl-bg-color:                   transparent !important;
    --gf-ctrl-bg-color-hover:             transparent !important;
    --gf-ctrl-bg-color-focus:             transparent !important;
    --gf-ctrl-border-color:               rgba(234, 234, 234, 0.2) !important;
    --gf-ctrl-border-color-hover:         rgba(234, 234, 234, 0.2) !important;
    --gf-ctrl-border-color-focus:         rgba(255, 255, 255, 0.6) !important;
    --gf-ctrl-color:                      #fff !important;
    --gf-ctrl-label-color-primary:        #fff !important;
    --gf-ctrl-label-color-secondary:      #fff !important;
    --gf-ctrl-label-color-req:            currentColor !important;
    --gf-ctrl-shadow:                     none !important;
    --gf-ctrl-shadow-focus:               none !important;
    --gf-ctrl-choice-check-color:         var(--color-blue) !important;
    --gf-color-in-ctrl:                   #fff !important;
    --gf-color-in-ctrl-contrast:          var(--color-blue) !important;
    --gf-form-footer-margin-y-start:      31px !important;
    --gf-ctrl-btn-size-md:                50px !important;
    --gf-ctrl-btn-font-family:            var(--font-family-base) !important;
    --gf-ctrl-btn-font-size:              1.125rem !important;
    --gf-ctrl-btn-font-weight:            600 !important;
    --gf-ctrl-btn-text-transform:         uppercase !important;
    --gf-ctrl-btn-bg-color-primary:       #fff !important;
    --gf-ctrl-btn-bg-color-hover-primary: var(--color-mist) !important;
    --gf-ctrl-btn-bg-color-focus-primary: #fff !important;
    --gf-ctrl-btn-border-color-primary:   #fff !important;
    --gf-ctrl-btn-border-color-hover-primary: var(--color-mist) !important;
    --gf-ctrl-btn-border-color-focus-primary: #fff !important;
    --gf-ctrl-btn-color-primary:          #000 !important;
    --gf-ctrl-btn-color-hover-primary:    #000 !important;
    --gf-ctrl-btn-color-focus-primary:    #000 !important;
}

/* Le label vivono come placeholder; l'asterisco è già nel placeholder.
   !important perché il CSS di GF arriva dopo e ha la stessa specificità. */
.contact-hero__panel .gform_wrapper .gfield_label,
.contact-hero__panel .gform_wrapper .gfield_required,
.contact-hero__panel .gform_wrapper .gform_required_legend {
    display: none !important;
}

.contact-hero__panel .gform_wrapper ::placeholder {
    color: #fff;
    opacity: 1;
}

/* La freccia nativa non è stilabile: si sostituisce con una custom */
.contact-hero__panel .gform_wrapper select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 13'%3E%3Cpath d='M7.5 13 0 0h15Z' fill='%23fff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.0625rem center;
    background-size: 15px 13px;
    padding-right: 3rem;
}

/* Allegato: il controllo file nativo sta in una riga sola col nome del campo */
/* GF ritaglia le label (hidden_label): qui serve visibile, è il testo del campo */
.contact-hero__panel .gform_wrapper .gfield--type-fileupload .gfield_label {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    margin-bottom: 0.75rem;
    font-size: var(--fs-16);
    font-weight: 400;
    line-height: 1.875;
    color: #fff;
}

.contact-hero__panel .gform_wrapper .gform_drop_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: var(--p-60) 1.4375rem;
    border: 1px dashed rgba(234, 234, 234, 0.3);
    border-radius: 0;
    background: transparent;
    text-align: center;
    transition: border-color var(--transition-base), background-color var(--transition-base);
}

/* Il tema orbital ci mette una nuvola sopra le istruzioni. !important come su
   perspect.it: qui non ci sono --gf-* da rimappare e orbital arriva dopo */
.contact-hero__panel .gform_wrapper .gform_drop_area::before {
    display: none !important;
}

/* .gform_drop_area_hover lo mette GF mentre si trascina sopra */
.contact-hero__panel .gform_wrapper .gform_drop_area:hover,
.contact-hero__panel .gform_wrapper .gform_drop_area_hover {
    border-color: rgba(var(--color-gold-rgb), 0.6);
    background: rgba(255, 255, 255, 0.03);
}

.contact-hero__panel .gform_wrapper .gform_drop_instructions {
    display: block;
    font-size: var(--fs-14);
    line-height: 1.6;
    color: var(--color-mist);
}

.contact-hero__panel .gform_wrapper .gform_drop_area .gform_button_select_files {
    padding: 0.5rem 1.25rem !important;
    border: 1px solid rgba(234, 234, 234, 0.3) !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-family: var(--font-family-base);
    font-size: var(--fs-16) !important;
    color: #fff !important;
    transition: background-color var(--transition-base), border-color var(--transition-base);
}

.contact-hero__panel .gform_wrapper .gform_drop_area .gform_button_select_files:hover,
.contact-hero__panel .gform_wrapper .gform_drop_area .gform_button_select_files:focus-visible {
    border-color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Elenco dei file scelti, sotto la dropzone */
.contact-hero__panel .gform_wrapper .ginput_preview_list {
    margin-top: 0.75rem;
    font-size: var(--fs-14);
    color: var(--color-mist);
}

.contact-hero__panel .gform_wrapper .gfield--type-fileupload .gfield_description {
    padding-top: 0.5rem;
    font-size: var(--fs-13);
    line-height: 1.6;
    color: var(--color-swiss-grey);
}

/* Informativa privacy e consenso */

.contact-hero__panel .gform_wrapper .gfield--type-html,
.contact-hero__panel .gform_wrapper .gfield--type-consent label {
    font-size: var(--fs-11);
    font-weight: 300;
    line-height: 1.611;
    color: #fff;
}

.contact-hero__panel .gform_wrapper .gfield--type-consent .ginput_container_consent {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.contact-hero__panel .gform_wrapper input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
}

.contact-hero__panel .gform_wrapper .gform_footer .gform_button {
    width: 100% !important;
}


/* ── Pagina Gold Advisor ───────────────────────────────────────────────────── */

.ga-intro {
    padding-block: var(--p-head) 0;
}

.ga-intro__media {
    margin-top: var(--p-60);
    aspect-ratio: 1452 / 800;
    border-radius: 5px;
    overflow: hidden;
}

/* ~83px fra immagine e testo, non due spaziature di sezione sommate */
.ga-lead {
    padding-block: var(--p-90) var(--p-120);
}

.ga-lead .section-head__text {
    margin-top: 0;
}

.ga-lead__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: var(--p-60);
}

.ga-panel {
    padding-block: var(--p-120);
}

/* Serve solo con la testata fuori dal pannello: dentro, il box apre la sezione */
.row + .ga-panel__box {
    margin-top: var(--p-90);
}

.ga-stack {
    position: relative;
    isolation: isolate;
    padding-block: var(--p-120);
}

.ga-stack__bg { z-index: -1; }

.ga-stack__bg::after {
    content: "";
    background: rgba(var(--color-blue-rgb), 0.3);
}

.ga-standards {
    padding-block: var(--p-120);
}


/* ── Knowledge Center ──────────────────────────────────────────────────────── */

.kc-intro {
    padding-block: var(--p-head) var(--p-120);
}

.kc-body {
    padding-bottom: var(--p-120);
}

.kc-nav__label {
    margin-bottom: 1.5rem;
}

/* --fade-* le aggiorna il JS a ogni scroll: una mask-image statica sfumerebbe
   anche a fine corsa, dove non c'è più niente da scorrere */
.kc-nav__list {
    --fade-l: 0;
    --fade-r: 0;
    --pad-x:  0.75rem;   /* padding del pill: serve anche al rientro della lista */
    display: flex;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
    mask-image:         linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}

.kc-nav__list::-webkit-scrollbar {
    display: none;
}

.kc-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem var(--pad-x);
    border-radius: 4px;
    font-size: var(--fs-18);
    line-height: 1.6;
    white-space: nowrap;
    color: var(--color-mist);
    transition: color var(--transition-base), background-color var(--transition-base);
}

.kc-nav__link:hover {
    color: #fff;
}

.kc-nav__link.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.kc-nav__mark {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    color: var(--color-blue);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.kc-nav__mark svg {
    width: 10px;
    height: 8px;
}

.kc-nav__link.is-active .kc-nav__mark {
    opacity: 1;
}

.kc-group {
    scroll-margin-top: calc(var(--header-h) + var(--p-60));
}

.kc-group + .kc-group {
    margin-top: var(--gutter-in);
}

.kc-group__title {
    margin: 0;
    font-size: var(--fs-25);
    font-weight: 500;
    color: var(--color-accent);
}

.kc-group__text {
    margin-top: 1rem;
    font-size: var(--fs-18);
    line-height: 1.6;
    color: var(--color-mist);
}


.kc-group .accordion {
    margin-top: var(--p-60);
}

@media (min-width: 992px) {
    .kc-nav {
        position: sticky;
        top: calc(var(--header-h) + var(--p-60));
    }

    /* Rientro pari al padding del pill: il testo torna a filo con la label */
    .kc-nav__list {
        display: block;
        margin-inline: calc(var(--pad-x) * -1);
        overflow-x: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .kc-nav__mark {
        display: flex;
    }
}


/* ── Accordion ─────────────────────────────────────────────────────────────── */

.accordion {
    --bs-accordion-bg:                  transparent;
    --bs-accordion-color:               #fff;
    --bs-accordion-border-color:        rgba(255, 255, 255, 0.15);
    --bs-accordion-border-width:        0;
    --bs-accordion-border-radius:       0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-padding-x:       0;
    --bs-accordion-btn-padding-y:       1.6rem;
    --bs-accordion-btn-color:           #fff;
    --bs-accordion-btn-bg:              transparent;
    --bs-accordion-active-color:        #fff;
    --bs-accordion-active-bg:           transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-body-padding-x:      0;
    --bs-accordion-body-padding-y:      0;
    --bs-accordion-btn-icon-width:      1rem;
    --bs-accordion-btn-icon:            none;
    --bs-accordion-btn-active-icon:     none;

    margin-top: var(--p-90);
}

/* Il :not() pareggia la specificità di Bootstrap, che azzera i border-top */
.accordion-item,
.accordion-item:not(:first-of-type) { border-top: 1px solid var(--bs-accordion-border-color); }

.accordion-item:last-child { border-bottom: 1px solid var(--bs-accordion-border-color); }

.accordion-button {
    position: relative;
    font-size: var(--fs-18);
    line-height: 1.6;
    letter-spacing: 0.008em;
}

/* Due barre al posto delle icone Bootstrap: uno swap di background-image non
   è interpolabile, e la transition che Bootstrap dichiara non anima nulla.
   200ms contro i 350 del pannello: il segno arriva prima */
.accordion-button::after,
.accordion-button::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: var(--bs-accordion-btn-icon-width);
    height: 1px;
    margin-top: -0.5px;
    background: #fff;
    background-image: none;
    transition: transform 0.2s var(--transition-timing);
}

.accordion-button::before { transform: rotate(90deg); }

/* Il meno resta orizzontale: senza questo Bootstrap lo ruota di 180° */
.accordion-button:not(.collapsed)::after  { transform: none; }
.accordion-button:not(.collapsed)::before { transform: rotate(90deg) scaleX(0); }

/* Anello solo da tastiera: col mouse Bootstrap lo lascerebbe acceso dopo il clic */
.accordion-button:focus-visible { box-shadow: var(--focus-ring); }

.accordion-body {
    padding-bottom: 2em;
    font-size: var(--fs-18);
    line-height: 1.6;
    color: var(--color-mist);
}


/* ── Reveal allo scroll ────────────────────────────────────────────────────── */
/* Tempi e cascate qui, il "quando" in initReveal() */

.js [data-reveal] {
    opacity: 0;
    transition: opacity 0.35s var(--ease-out);
}

.js [data-reveal].is-in { opacity: 1; }

/* Testata: i figli entrano in cascata, nell'ordine in cui stanno nel DOM */
.js [data-reveal] .section-head > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.45s var(--ease-out),
                transform 0.45s var(--ease-out);
}

.js [data-reveal] .section-head > :nth-child(2) { transition-delay: 0.05s; }
.js [data-reveal] .section-head > :nth-child(3) { transition-delay: 0.10s; }
.js [data-reveal] .section-head > :nth-child(4) { transition-delay: 0.15s; }

.js [data-reveal].is-in .section-head > * {
    opacity: 1;
    transform: none;
}

/* Item: --delay li fa partire dopo la testata, --step li scala tra loro.
   Discendenti di [data-reveal], mai globali: lo stesso blocco è usato anche in
   archivi che non marcano la sezione, e lì nessuno accenderebbe .is-in */
.js [data-reveal] [data-reveal-item] {
    --delay: 0.2s;
    --step: 0s;

    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.45s var(--ease-out),
                transform 0.45s var(--ease-out);
    transition-delay: calc(var(--delay) + var(--step));
}

/* `of [data-reveal-item]` conta solo gli item, non i fratelli che li precedono
   (la testata di sezione): senza, il primo item partirebbe già in ritardo. */
.js [data-reveal] [data-reveal-item]:nth-child(2 of [data-reveal-item])    { --step: 0.06s; }
.js [data-reveal] [data-reveal-item]:nth-child(3 of [data-reveal-item])    { --step: 0.12s; }
.js [data-reveal] [data-reveal-item]:nth-child(4 of [data-reveal-item])    { --step: 0.18s; }
.js [data-reveal] [data-reveal-item]:nth-child(5 of [data-reveal-item])    { --step: 0.24s; }
.js [data-reveal] [data-reveal-item]:nth-child(n+6 of [data-reveal-item])  { --step: 0.24s; }

.js [data-reveal].is-in:not([data-reveal-items]) [data-reveal-item] {
    opacity: 1;
    transform: none;
}


.js [data-reveal][data-reveal-items] [data-reveal-item] {
    --delay: 0.1s;
}

.js [data-reveal][data-reveal-items] [data-reveal-item].is-in {
    opacity: 1;
    transform: none;
}

/* Ridotto non vuol dire spento: resta la dissolvenza, via gli spostamenti */
@media (prefers-reduced-motion: reduce) {
    .js [data-reveal],
    .js [data-reveal] .section-head > *,
    .js [data-reveal] [data-reveal-item] {
        transform: none;
        transition: opacity 0.2s linear;
        transition-delay: 0s;
    }

    .nav-drawer__panel {
        transform: none;
        transition: none;
    }

    /* Lo stato resta, sparisce solo l'interpolazione */
    .header__burger span,
    .header__burger span::before,
    .header__burger span::after,
    .accordion-button::before,
    .accordion-button::after {
        transition: none;
    }

    a.btn:active,
    button.btn:active,
    .video-card:active {
        transform: none;
    }

    /* Gira da solo, non risponde a un gesto: spento, non ridotto */
    .video-card__play::after {
        animation: none;
    }

    .js .home-hero[data-reveal] .home-hero__title,
    .js .home-hero[data-reveal] .eyebrow,
    .js .home-hero[data-reveal] .home-hero__actions,
    .js .home-hero[data-reveal] .home-hero__aside {
        transform: none;
        transition: opacity 0.2s linear;
        transition-delay: 0s;
    }
}


/* ── Trasparenza e contrasto ridotti ───────────────────────────────────────── */

@media (prefers-reduced-transparency: reduce) {
    :root {
        --glass-sm: none;
        --glass-md: none;
        --glass-lg: none;
    }

    .header__bar,
    .btn-ghost,
    .plan-card,
    .panel-raised,
    .why-compliance__panel,
    .about-founder,
    .stack__card,
    .person,
    .video-card,
    .insight-row,
    .how-step {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--surface-raised);
    }

    .header__bar {
        background: var(--color-blue-deep);
    }
}

@media (prefers-contrast: more) {
    .panel-raised,
    .why-compliance__panel,
    .about-founder,
    .stack__card,
    .person,
    .video-card,
    .insight-row,
    .plan-card,
    .how-step {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
    }
}


/* ── Edit post link (admin, solo loggati) ────────────────────────────────────── */

.post-edit-link {
    position: fixed;
    z-index: 9999;
    bottom: 0;
    right: 0;
    padding: 10px 18px;
    background-color: #3c3c3c;
    color: var(--color-white, #fff);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-top-left-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.post-edit-link:hover,
.post-edit-link:focus-visible {
    color: var(--color-white, #fff);
    background-color: #222;
}




/* ── Complianz — documenti legali ──────────────────────────────────────────── */
/* Complianz non ha un tema scuro: document.min.css hardcoda grigi chiari pensati
   per un fondo bianco. Arriva prima di main.css, quindi bastano gli stessi
   selettori senza alzare la specificità */

.cmplz-document {
    color: var(--color-text);
}

.cmplz-document a,
#cmplz-cookies-overview a {
    color: var(--color-accent);
}

#cmplz-cookies-overview .cmplz-dropdown summary,
#cmplz-document .cmplz-dropdown summary {
    background-color: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 5px;
}

#cmplz-cookies-overview .cmplz-dropdown,
#cmplz-document .cmplz-dropdown {
    background-color: transparent;
}

#cmplz-cookies-overview .cmplz-dropdown[open],
#cmplz-document .cmplz-dropdown[open] {
    background-color: var(--surface-subtle);
    border-radius: 5px;
}

/* La griglia dei cookie dentro l'accordion non è una table ma div in grid, e
   document.css la dà per bianca: fondo #fff sulle celle, #f7f7f7 sulle
   intestazioni, #dadada come colore della griglia (che si vede nel grid-gap) */

#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose,
#cmplz-document .cmplz-dropdown .cookies-per-purpose {
    border-color: var(--color-border);
    background-color: var(--color-border);
}

#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div,
#cmplz-document .cmplz-dropdown .cookies-per-purpose div {
    background-color: var(--surface-sunken);
    color: var(--color-text);
}

@media only screen and (min-width: 600px) {
    #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .name-header,
    #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .retention-header,
    #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .function-header,
    #cmplz-document .cmplz-dropdown .cookies-per-purpose .name-header,
    #cmplz-document .cmplz-dropdown .cookies-per-purpose .retention-header,
    #cmplz-document .cmplz-dropdown .cookies-per-purpose .function-header {
        background-color: var(--surface-raised);
    }
}

/* Sotto i 600px il plugin non colora per ruolo ma a fasce, con sei nth-child
   (12n+2 … 12n+7): vanno ripresi tutti, o metà celle restano chiare */
@media only screen and (max-width: 600px) {
    #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+2),
    #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+3),
    #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+4),
    #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+5),
    #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+6),
    #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+7),
    #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+2),
    #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+3),
    #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+4),
    #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+5),
    #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+6),
    #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+7) {
        background-color: var(--surface-raised);
    }
}

/* Blocco revoca consenso: bottone + stato corrente. Si stila .cmplz-revoke-custom
   e non .cmplz-deny, che il banner usa per il proprio "Rifiuta" */

button.cmplz-revoke-custom {
    display: inline-flex;
    align-items: center;
    margin-block: 1rem 0.75rem;
    padding: 0.765rem 1.875rem;
    border: 1px solid var(--color-accent);
    border-radius: 5px;
    background-color: transparent;
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-size: var(--fs-16);
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: background-color var(--transition-base), color var(--transition-base);
}

button.cmplz-revoke-custom:hover:not([disabled]),
button.cmplz-revoke-custom:focus-visible:not([disabled]) {
    background-color: var(--color-accent);
    color: var(--color-white, #fff);
}

button.cmplz-revoke-custom:focus-visible {
    box-shadow: var(--focus-ring);
}

/* Complianz lo disabilita quando non c'è ancora un consenso da revocare */
button.cmplz-revoke-custom[disabled] {
    border-color: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.cmplz-status-accepted,
.cmplz-status-denied {
    color: var(--color-text-muted);
    font-size: var(--fs-14);
}

/* Pannello categorie dello shortcode manage-consent: oggi resta nascosto perché
   ModSecurity blocca la sua chiamata REST, ma se la regola viene sbloccata
   deve arrivare già scuro */
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category {
    background-color: var(--surface-subtle);
}

#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header {
    background-color: var(--surface-raised);
}