/* ═══════════════════════════════════════════════════════════════════════════
   Global Srl — Future Planet Ecology
   Design system del template. Standalone: non dipende da Bootstrap né dal
   vecchio stack Baresto. Palette e regole d'uso da ANALISI-COLORI §7.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Marca — valori pixel estratti dal logo */
    --gl-green-900: #1B5E20;   /* primario: masse, header, sezioni forti */
    --gl-green-700: #2E7D32;   /* hover del primario, occhielli su fondo chiaro */
    --gl-green-500: #4CAF50;   /* icone, bordi, badge — mai testo piccolo su bianco */
    --gl-green-200: #A5D6A7;   /* testo di servizio su fondi verdi/scuri */
    --gl-green-050: #E8F5E9;
    --gl-amber-500: #FDC100;   /* accento: solo CTA primarie e microevidenze */
    --gl-amber-700: #C79600;

    /* Supporto tecnico — riservato a Tecnologia e Area Clienti */
    --gl-petrol-900: #003950;
    --gl-petrol-800: #002A3B;
    --gl-petrol-500: #2F7D9E;
    --gl-petrol-200: #7FC4E0;

    /* Neutri */
    --gl-ink-900: #111111;
    --gl-ink-700: #343434;
    --gl-ink-500: #707070;
    --gl-ink-200: #DDDDDD;
    --gl-ink-050: #F8F8F8;
    --gl-white: #FFFFFF;
    --gl-dark-1: #151C22;
    --gl-dark-2: #18212A;

    /* Tipografia */
    --gl-font-title: Archivo, "Helvetica Neue", Arial, sans-serif;
    --gl-font-body: Manrope, "Helvetica Neue", Arial, sans-serif;
    --gl-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Misure ricorrenti */
    --gl-max: 1320px;
    --gl-gut: clamp(18px, 4vw, 56px);
    --gl-ease: cubic-bezier(.16, 1, .3, 1);

    /* Contesto colore: sovrascritto dalle sezioni scure */
    --gl-fg: var(--gl-ink-900);
    --gl-fg-soft: var(--gl-ink-500);
    --gl-fg-body: var(--gl-ink-700);
    --gl-hair: rgba(17, 17, 17, .12);
    --gl-eyebrow-color: var(--gl-green-700);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--gl-ink-050);
    color: var(--gl-ink-900);
    font-family: var(--gl-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }
a { color: var(--gl-green-900); text-decoration: none; }
a:hover { color: var(--gl-green-700); }
button { font: inherit; }

::selection { background: var(--gl-amber-500); color: var(--gl-ink-900); }
:focus-visible { outline: 3px solid var(--gl-amber-500); outline-offset: 2px; }

a, button, [role="button"], input, select, textarea { -webkit-tap-highlight-color: rgba(253, 193, 0, .28); }
button, [role="button"] { touch-action: manipulation; }

/* ── Impalcatura ───────────────────────────────────────────────────────── */

.gl-wrap {
    max-width: var(--gl-max);
    margin: 0 auto;
    padding-left: var(--gl-gut);
    padding-right: var(--gl-gut);
}

.gl-sec { padding: clamp(60px, 9vh, 120px) 0; background: var(--gl-white); }
.gl-sec--tall { padding: clamp(70px, 11vh, 140px) 0; }
.gl-sec--flush { padding: clamp(50px, 8vh, 100px) 0; }
.gl-sec--muted { background: var(--gl-ink-050); }
.gl-sec--hairtop { border-top: 1px solid rgba(17, 17, 17, .10); }
.gl-sec--hairbot { border-bottom: 1px solid rgba(17, 17, 17, .10); }

/* Sezioni scure e verdi: ribaltano il contesto colore, i figli si adeguano */
.gl-sec--dark,
.gl-sec--green,
.gl-sec--green-mid,
.gl-sec--petrol {
    color: var(--gl-white);
    --gl-fg: #ffffff;
    --gl-fg-body: rgba(255, 255, 255, .78);
    --gl-fg-soft: rgba(255, 255, 255, .62);
    --gl-hair: rgba(255, 255, 255, .16);
    --gl-eyebrow-color: var(--gl-green-200);
}

.gl-sec--dark { background: var(--gl-dark-1); }
.gl-sec--green { background: var(--gl-green-900); }
.gl-sec--green-mid { background: var(--gl-green-700); }
.gl-sec--petrol { background: var(--gl-petrol-900); --gl-eyebrow-color: var(--gl-petrol-200); }

.gl-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(30px, 5vw, 70px);
    align-items: start;
}
.gl-split--center { align-items: center; }
.gl-split--wide { gap: clamp(34px, 5vw, 80px); }

.gl-stack { display: grid; gap: clamp(40px, 6vh, 70px); }

/* ── Tipografia ────────────────────────────────────────────────────────── */

.gl-eyebrow {
    font-family: var(--gl-font-mono);
    font-size: 11px;
    letter-spacing: .2em;
    color: var(--gl-eyebrow-color);
    margin-bottom: 18px;
}

.gl-mono {
    font-family: var(--gl-font-mono);
    font-size: 11.5px;
    letter-spacing: .14em;
    color: var(--gl-fg-soft);
}
.gl-mono--accent { color: var(--gl-eyebrow-color); }

.gl-h1 {
    font-family: var(--gl-font-title);
    font-weight: 800;
    font-size: clamp(34px, 6vw, 84px);
    line-height: .96;
    letter-spacing: -.035em;
    color: var(--gl-fg);
    text-wrap: balance;
    max-width: 18ch;
}
.gl-h1--xl { font-size: clamp(40px, 7.4vw, 104px); line-height: .94; max-width: 16ch; }
.gl-h1--sm { font-size: clamp(28px, 4.4vw, 62px); line-height: 1.02; letter-spacing: -.032em; max-width: 26ch; }

.gl-h2 {
    font-family: var(--gl-font-title);
    font-weight: 700;
    font-size: clamp(28px, 3.6vw, 52px);
    line-height: 1.04;
    letter-spacing: -.032em;
    color: var(--gl-fg);
    text-wrap: balance;
    max-width: 22ch;
}
.gl-h2--lg { font-size: clamp(30px, 4.4vw, 64px); line-height: 1; letter-spacing: -.035em; max-width: 20ch; }
.gl-h2--sm { font-size: clamp(26px, 3.2vw, 44px); }

.gl-h3 {
    font-family: var(--gl-font-title);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.18;
    letter-spacing: -.02em;
    color: var(--gl-fg);
}

.gl-lead {
    font-size: clamp(16px, 1.35vw, 19px);
    line-height: 1.62;
    color: var(--gl-fg-body);
    max-width: 56ch;
}

.gl-p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--gl-fg-body);
    max-width: 56ch;
}
.gl-p + .gl-p { margin-top: 18px; }
.gl-p strong { font-weight: 700; }

.gl-small { font-size: 14.5px; line-height: 1.6; color: var(--gl-fg-soft); }

/* Numero grande decorativo delle card numerate */
.gl-num {
    font-family: var(--gl-font-title);
    font-weight: 800;
    font-size: 34px;
    letter-spacing: -.04em;
    color: var(--gl-ink-200);
}
.gl-sec--dark .gl-num,
.gl-sec--green .gl-num,
.gl-sec--green-mid .gl-num { color: rgba(255, 255, 255, .22); }

/* ── Bottoni e link ────────────────────────────────────────────────────── */

.gl-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    padding: 16px 26px;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    text-align: center;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.gl-btn--amber { background: var(--gl-amber-500); color: var(--gl-ink-900); }
.gl-btn--amber:hover { background: var(--gl-amber-700); color: var(--gl-ink-900); }
.gl-btn--green { background: var(--gl-green-900); color: #fff; }
.gl-btn--green:hover { background: var(--gl-green-700); color: #fff; }
.gl-btn--dark { background: var(--gl-dark-1); color: #fff; }
.gl-btn--dark:hover { background: var(--gl-green-900); color: #fff; }
.gl-btn--ghost { border: 1px solid rgba(255, 255, 255, .32); color: #fff; }
.gl-btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.gl-btn--outline { border: 1px solid rgba(17, 17, 17, .2); color: var(--gl-ink-900); }
.gl-btn--outline:hover { border-color: var(--gl-green-900); color: var(--gl-green-900); }
.gl-btn--sm { font-size: 14px; padding: 13px 20px; }
.gl-btn--block { display: block; width: 100%; }

.gl-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Link con sottolineatura ambra: il pattern "→" ricorrente del design */
.gl-more {
    display: inline-block;
    margin-top: 30px;
    font-weight: 700;
    color: var(--gl-green-900);
    border-bottom: 2px solid var(--gl-amber-500);
    padding: 9px 0 5px;
}
.gl-more:hover { color: var(--gl-green-700); }
.gl-more--flush { margin-top: 0; }
.gl-sec--dark .gl-more,
.gl-sec--green .gl-more,
.gl-sec--green-mid .gl-more { color: var(--gl-green-200); border-bottom-color: rgba(253, 193, 0, .5); }
.gl-sec--dark .gl-more:hover,
.gl-sec--green .gl-more:hover,
.gl-sec--green-mid .gl-more:hover { color: #fff; }

/* ── Griglie a filo (il "1px gap" del design, reso con box-shadow) ─────── */

.gl-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1px;
}
.gl-cards--wide { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.gl-cards--narrow { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.gl-cards--boxed { border: 1px solid var(--gl-hair); }

.gl-card {
    background: var(--gl-white);
    padding: clamp(22px, 2.6vw, 34px);
    box-shadow: 0 0 0 1px var(--gl-hair);
    display: block;
    color: inherit;
}
.gl-sec--dark .gl-card { background: var(--gl-dark-1); }
.gl-sec--green .gl-card { background: var(--gl-green-900); }
.gl-sec--green-mid .gl-card { background: var(--gl-green-700); }
.gl-sec--muted .gl-card { background: var(--gl-ink-050); }
.gl-card--raised { background: var(--gl-dark-2); }
/* Fondo bianco esplicito: come classe e non inline, altrimenti batterebbe
   in specificita l'hover di .gl-card--link e il testo resterebbe invisibile. */
.gl-card.gl-card--white { background: var(--gl-white); }
.gl-card--tight { padding: 20px 22px; }

/* Card cliccabile: passa a verde pieno all'hover, testo e figli si adeguano */
.gl-card--link { transition: background .22s ease, color .22s ease; }
.gl-card--link:hover { background: var(--gl-green-900); color: #fff; }
.gl-card--link:hover .gl-h3,
.gl-card--link:hover .gl-card__title { color: #fff; }
.gl-card--link:hover .gl-card__meta { color: var(--gl-green-200); }
.gl-card--link:hover .gl-card__text { color: rgba(255, 255, 255, .8); }
.gl-card--link-mid:hover { background: var(--gl-green-700); }

.gl-card__meta {
    font-family: var(--gl-font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--gl-green-700);
}
.gl-card__title {
    margin-top: 14px;
    font-family: var(--gl-font-title);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--gl-fg);
}
.gl-card__title--lg { font-size: 21px; line-height: 1.16; }
.gl-card__text { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--gl-fg-soft); }
.gl-card__cta { margin-top: 18px; font-family: var(--gl-font-mono); font-size: 11.5px; letter-spacing: .12em; color: var(--gl-green-700); }

/* ── Chip, tag, elenchi ────────────────────────────────────────────────── */

.gl-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.gl-chip {
    display: inline-block;
    border: 1px solid rgba(17, 17, 17, .14);
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gl-ink-900);
    border-radius: 2px;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.gl-chip:hover { background: var(--gl-green-900); color: #fff; border-color: var(--gl-green-900); }

.gl-tag {
    border: 1px solid rgba(17, 17, 17, .16);
    padding: 8px 13px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gl-ink-700);
}
.gl-sec--dark .gl-tag { border-color: rgba(255, 255, 255, .26); color: rgba(255, 255, 255, .86); }

.gl-tag--mono {
    font-family: var(--gl-font-mono);
    font-size: 11.5px;
    letter-spacing: .08em;
    padding: 6px 9px;
}
.gl-tag--norm { background: var(--gl-green-900); border: 0; color: #fff; font-family: var(--gl-font-mono); font-size: 11px; letter-spacing: .08em; padding: 8px 13px; }

/* Elenco puntato con freccia verde */
.gl-arrows { display: grid; gap: 10px; font-size: 15.5px; color: var(--gl-fg-body); }
.gl-arrows li { display: flex; gap: 12px; }
.gl-arrows li::before { content: "→"; color: var(--gl-green-700); flex: 0 0 auto; }
.gl-sec--dark .gl-arrows li::before,
.gl-sec--petrol .gl-arrows li::before { color: var(--gl-green-200); }
.gl-sec--petrol .gl-arrows li::before { color: var(--gl-petrol-200); }

/* Elenco a righe separate (cosa comprende / rischi) */
.gl-rows {
    display: grid;
    gap: 1px;
    border-top: 1px solid var(--gl-hair);
    border-bottom: 1px solid var(--gl-hair);
}
.gl-rows li {
    background: transparent;
    padding: 16px 0;
    display: flex;
    gap: 14px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--gl-fg);
    box-shadow: 0 0 0 1px var(--gl-hair);
}
.gl-rows li::before { content: "→"; color: var(--gl-green-700); font-weight: 700; flex: 0 0 auto; }
.gl-rows--warn li::before { content: "!"; color: var(--gl-amber-500); }

/* Elenco numerato "come procediamo" */
.gl-steps-list { display: grid; gap: 14px; }
.gl-steps-list li { display: flex; gap: 14px; font-size: 15px; line-height: 1.55; color: var(--gl-fg-body); }
.gl-steps-list li > span:first-child { font-family: var(--gl-font-mono); color: var(--gl-green-200); flex: 0 0 auto; }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.gl-hero { position: relative; overflow: hidden; background: var(--gl-dark-1); color: #fff; }
.gl-hero--full { min-height: min(92dvh, 880px); display: flex; align-items: flex-end; }
.gl-hero--tall { min-height: min(76dvh, 700px); display: flex; align-items: flex-end; }
.gl-hero--green { background: var(--gl-green-900); }
.gl-hero--green-mid { background: var(--gl-green-700); }
.gl-hero--petrol { background: var(--gl-petrol-900); }

.gl-hero__bg { position: absolute; inset: -14% 0; z-index: 0; filter: saturate(.92); }
.gl-hero__bg--dim { filter: brightness(.5) saturate(.9); }
.gl-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gl-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(21, 28, 34, .74) 0%, rgba(21, 28, 34, .55) 34%, rgba(21, 28, 34, .82) 62%, rgba(21, 28, 34, .95) 100%);
}
.gl-hero__scrim--flat { background: linear-gradient(180deg, rgba(21, 28, 34, .6), rgba(21, 28, 34, .93)); }
.gl-hero__scrim--green { background: linear-gradient(180deg, rgba(27, 94, 32, .86), rgba(27, 94, 32, .96)); }
.gl-hero__scrim--greenfade { background: linear-gradient(180deg, rgba(27, 94, 32, .6), rgba(21, 28, 34, .93)); }
.gl-hero__scrim--dark { background: linear-gradient(180deg, rgba(21, 28, 34, .86), rgba(21, 28, 34, .96)); }

.gl-hero__body {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: clamp(70px, 12vh, 140px);
    padding-bottom: clamp(50px, 8vh, 90px);
    color: #fff;
    --gl-fg: #ffffff;
    --gl-fg-body: rgba(255, 255, 255, .78);
    --gl-fg-soft: rgba(255, 255, 255, .6);
    --gl-hair: rgba(255, 255, 255, .16);
    --gl-eyebrow-color: var(--gl-green-200);
}
.gl-hero__body--deep { padding-top: clamp(90px, 14vh, 150px); padding-bottom: clamp(34px, 5vh, 56px); }
.gl-hero--petrol .gl-hero__body { --gl-eyebrow-color: var(--gl-petrol-200); }

/* Barra numeri sotto l'hero */
.gl-stats {
    margin-top: clamp(44px, 7vh, 80px);
    border-top: 1px solid rgba(255, 255, 255, .16);
    padding-top: 26px;
    display: grid;
    /* Quattro colonne dichiarate: con auto-fit, tra i 641 e i 767px ci stavano
       solo tre celle e la quarta finiva da sola sulla riga sotto (i numeri non
       erano piu' sullo stesso livello). Sotto i 1024px si passa a 2x2. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}
.gl-stat__n {
    font-family: var(--gl-font-title);
    font-weight: 700;
    font-size: clamp(28px, 3vw, 42px);
    letter-spacing: -.03em;
    color: #fff;
}
.gl-stat__k {
    font-family: var(--gl-font-mono);
    font-size: 11.5px;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .55);
    margin-top: 6px;
}
/* Placeholder per i dati che il cliente deve ancora fornire */
.gl-stat__todo {
    font-family: var(--gl-font-title);
    font-weight: 700;
    font-size: clamp(20px, 1.8vw, 26px);
    letter-spacing: -.02em;
    color: var(--gl-amber-500);
    border: 1px dashed rgba(253, 193, 0, .7);
    padding: 6px 10px;
    display: inline-block;
}

.gl-cue {
    position: absolute;
    right: var(--gl-gut);
    top: 38%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.gl-cue span:first-child {
    font-family: var(--gl-font-mono);
    font-size: 11px;
    letter-spacing: .2em;
    color: rgba(255, 255, 255, .5);
    writing-mode: vertical-rl;
}
.gl-cue span:last-child {
    width: 1px;
    height: 54px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .5), transparent);
    animation: gl-scrollcue 2.2s ease-in-out infinite;
}

/* Immagine di sezione con parallasse */
.gl-figure { position: relative; overflow: hidden; background: var(--gl-ink-200); }
.gl-figure__inner { position: absolute; inset: -12% 0; }
.gl-figure__inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-figure--tall { height: clamp(340px, 52vh, 540px); }
.gl-figure--mid { height: clamp(300px, 48vh, 480px); }
.gl-figure--wide { height: clamp(260px, 44vh, 460px); }
.gl-figure--ratio { aspect-ratio: 4 / 3; }

/* Segnaposto per le foto che il cliente deve ancora fornire */
.gl-slot {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 18px;
    background: repeating-linear-gradient(135deg, var(--gl-ink-200) 0 12px, #d3d3d3 12px 24px);
    text-align: center;
}
.gl-slot span {
    font-family: var(--gl-font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    line-height: 1.7;
    color: var(--gl-ink-700);
    background: rgba(255, 255, 255, .82);
    padding: 10px 14px;
    max-width: 32ch;
}

/* ── Marquee settori ───────────────────────────────────────────────────── */

.gl-marquee {
    background: var(--gl-green-900);
    overflow: hidden;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.gl-marquee__track {
    display: flex;
    width: max-content;
    animation: gl-marquee 34s linear infinite;
    font-family: var(--gl-font-mono);
    font-size: 12px;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .6);
}
.gl-marquee__group { display: flex; gap: 34px; padding-right: 34px; }
.gl-marquee__group i { color: var(--gl-green-200); font-style: normal; }

/* ── Divisioni: le due card grandi della home ──────────────────────────── */

.gl-division {
    position: relative;
    overflow: hidden;
    background: var(--gl-green-900);
    min-height: clamp(380px, 54vh, 520px);
    display: block;
    transition: transform .3s var(--gl-ease);
}
/* --gl-lift attraversa anche lo stato finale della comparsa, che altrimenti
   vincerebbe per specificita' e bloccherebbe il sollevamento. */
.gl-division:hover { --gl-lift: -6px; transform: translateY(-6px); }
.gl-anim .gl-division.gl-reveal.is-in { transition: opacity .8s var(--gl-ease), transform .3s var(--gl-ease); }
.gl-division--mid { background: var(--gl-green-700); }
.gl-division__bg { position: absolute; inset: 0; opacity: .42; }
.gl-division__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-division__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(27, 94, 32, .55), rgba(21, 28, 34, .94)); }
.gl-division--mid .gl-division__scrim { background: linear-gradient(180deg, rgba(46, 125, 50, .5), rgba(21, 28, 34, .94)); }
.gl-division__body {
    position: relative;
    padding: clamp(26px, 3vw, 42px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
    color: #fff;
}
.gl-division__title {
    margin-top: 14px;
    font-family: var(--gl-font-title);
    font-weight: 700;
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.04;
    letter-spacing: -.03em;
    color: #fff;
}
.gl-division__pills { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.gl-division__pills li {
    font-family: var(--gl-font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .8);
    border: 1px solid rgba(255, 255, 255, .24);
    padding: 6px 10px;
}

/* ── Scrollytelling del metodo ─────────────────────────────────────────── */

.gl-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(30px, 4vw, 70px);
    align-items: start;
}
.gl-steps__sticky { position: static; top: 120px; }
.gl-step { padding: clamp(30px, 5vh, 64px) 0; border-bottom: 1px solid var(--gl-hair); }
.gl-step__n { font-family: var(--gl-font-mono); font-size: 11.5px; letter-spacing: .2em; color: var(--gl-eyebrow-color); }
.gl-step__t {
    margin-top: 12px;
    font-family: var(--gl-font-title);
    font-weight: 700;
    font-size: clamp(24px, 2.6vw, 38px);
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--gl-fg);
}
.gl-step__b { margin-top: 14px; max-width: 48ch; font-size: 16px; line-height: 1.66; color: var(--gl-fg-body); }
.gl-step__out { margin-top: 16px; font-family: var(--gl-font-mono); font-size: 11px; letter-spacing: .1em; color: var(--gl-fg-soft); }

.gl-stepcard { position: relative; aspect-ratio: 4/5; background: var(--gl-dark-2); overflow: hidden; border: 1px solid rgba(255, 255, 255, .10); }
.gl-stepcard__bg { position: absolute; inset: -10% 0; filter: saturate(.92); }
.gl-stepcard__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-stepcard__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(21, 28, 34, .4), rgba(21, 28, 34, .92)); }
.gl-stepcard__body { position: absolute; left: 0; bottom: 0; padding: clamp(22px, 3vw, 38px); pointer-events: none; }
.gl-stepcard__n { font-family: var(--gl-font-title); font-weight: 800; font-size: clamp(64px, 9vw, 128px); line-height: .8; letter-spacing: -.05em; color: var(--gl-green-200); }
.gl-stepcard__t { margin-top: 14px; font-family: var(--gl-font-title); font-weight: 700; font-size: clamp(20px, 2vw, 30px); letter-spacing: -.02em; color: #fff; }
.gl-stepcard__b { margin-top: 10px; max-width: 34ch; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.gl-stepcard__bar { display: none; }

/* Su schermi stretti il pannello delle fasi resta, ma diventa una barra
   compatta agganciata sotto l'header (alto 77px): senza aggancio scorrerebbe
   via e non si vedrebbe mai cambiare fase. */
@media (max-width: 1179px) {
    .gl-steps__sticky--bar {
        position: sticky;
        top: 76px;
        z-index: 3;
        background: var(--gl-ink-050);
        padding: 12px 0 14px;
        box-shadow: 0 12px 16px -14px rgba(17, 17, 17, .55);
    }
    .gl-steps__sticky--bar .gl-eyebrow { margin-bottom: 2px; }
    .gl-steps__sticky--bar .gl-stepside__n { margin-top: 0; font-size: 44px; line-height: 1; }
    .gl-steps__sticky--bar .gl-stepside__t { margin-top: 2px; font-size: 18px; }
    .gl-steps__sticky--bar .gl-stepside__b { display: none; }
    .gl-steps__sticky--bar .gl-stepside__bar { margin-top: 12px; }

    /* Variante scura (home): la card 4:5 diventa una striscia con la foto di
       sfondo, altrimenti da agganciare sarebbe alta mezzo schermo. */
    .gl-sec--dark .gl-steps__sticky--bar { background: var(--gl-dark-1); padding: 0 0 10px; }
    .gl-sec--dark .gl-steps__sticky--bar .gl-stepcard { aspect-ratio: auto; }
    /* relative + z-index: se resta statico viene dipinto sotto a foto e velo,
       che sono posizionati in assoluto, e il testo sparisce. */
    .gl-steps__sticky--bar .gl-stepcard__body { position: relative; z-index: 1; padding: 14px 18px 16px; }
    .gl-steps__sticky--bar .gl-stepcard__scrim {
        background: linear-gradient(180deg, rgba(21, 28, 34, .74), rgba(21, 28, 34, .92));
    }
    .gl-steps__sticky--bar .gl-stepcard__n { font-size: 46px; line-height: 1; }
    .gl-steps__sticky--bar .gl-stepcard__t { margin-top: 4px; font-size: 18px; }
    .gl-steps__sticky--bar .gl-stepcard__b { display: none; }
    .gl-steps__sticky--bar .gl-stepcard__bar {
        display: block;
        margin-top: 14px;
        height: 2px;
        background: rgba(255, 255, 255, .18);
        position: relative;
    }
    .gl-steps__sticky--bar .gl-stepcard__bar > span {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 20%;
        background: var(--gl-amber-500);
        transition: width .35s var(--gl-ease);
    }
    /* La griglia non deve separare la barra dalle fasi con un vuoto enorme */
    .gl-steps { gap: 18px; }
}

/* Pannello chiaro della pagina "Come operiamo" */
.gl-stepside__n { margin-top: 14px; font-family: var(--gl-font-title); font-weight: 800; font-size: clamp(80px, 12vw, 180px); line-height: .8; letter-spacing: -.05em; color: var(--gl-green-900); }
.gl-stepside__t { margin-top: 20px; font-family: var(--gl-font-title); font-weight: 700; font-size: clamp(22px, 2.2vw, 32px); letter-spacing: -.025em; }
.gl-stepside__b { margin-top: 14px; max-width: 36ch; font-size: 15.5px; line-height: 1.65; color: var(--gl-ink-500); }
.gl-stepside__bar { margin-top: 26px; height: 2px; background: rgba(17, 17, 17, .12); position: relative; }
.gl-stepside__bar > span { position: absolute; left: 0; top: 0; height: 100%; background: var(--gl-amber-500); width: 20%; transition: width .35s var(--gl-ease); }

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

.gl-faq { border-top: 1px solid var(--gl-hair); }
.gl-faq__item { border-bottom: 1px solid var(--gl-hair); }
.gl-faq__q {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 22px 0;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    cursor: pointer;
    text-align: left;
    color: var(--gl-fg);
}
.gl-faq__mark { font-family: var(--gl-font-mono); font-size: 12px; color: var(--gl-green-700); padding-top: 4px; width: 14px; flex: 0 0 auto; }
.gl-faq__t { flex: 1; font-family: var(--gl-font-title); font-weight: 600; font-size: 18px; line-height: 1.35; letter-spacing: -.015em; }
.gl-faq__a { padding: 0 0 24px 32px; max-width: 56ch; font-size: 15.5px; line-height: 1.7; color: var(--gl-fg-soft); display: none; }
.gl-faq__item.is-open .gl-faq__a { display: block; }

/* ── Timeline / valori / aree ──────────────────────────────────────────── */

.gl-year { font-family: var(--gl-font-title); font-weight: 800; font-size: clamp(28px, 3vw, 44px); letter-spacing: -.04em; color: var(--gl-green-900); }

.gl-value__t { margin-top: 16px; font-family: var(--gl-font-title); font-weight: 700; font-size: 21px; letter-spacing: -.02em; color: var(--gl-green-200); }

.gl-area__head { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; }
.gl-area__t { font-family: var(--gl-font-title); font-weight: 700; font-size: 20px; letter-spacing: -.02em; }

/* Schema del raggio d'azione */

/* ── Confronti a colonne ───────────────────────────────────────────────── */

.gl-vs { display: grid; gap: 10px; }
.gl-vs__k { font-family: var(--gl-font-mono); font-size: 11px; letter-spacing: .14em; color: var(--gl-fg-soft); }
.gl-vs__old { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.gl-vs__old::before { content: "✕"; color: var(--gl-ink-500); }
.gl-vs__new { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; color: #fff; font-weight: 600; }
.gl-vs__new::before { content: "✓"; color: var(--gl-amber-500); }
.gl-vs__a { font-size: 14.5px; line-height: 1.5; color: #fff; }
.gl-vs__g { font-size: 14.5px; line-height: 1.5; color: var(--gl-green-200); border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 6px; }

/* ── Mockup piattaforma ────────────────────────────────────────────────── */

.gl-mock { background: var(--gl-petrol-900); padding: clamp(20px, 2.4vw, 32px); border-radius: 3px; }
.gl-mock__head { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.gl-mock__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gl-amber-500); animation: gl-pulse 2.4s ease-in-out infinite; }
.gl-mock__label { font-family: var(--gl-font-mono); font-size: 11.5px; letter-spacing: .16em; color: rgba(255, 255, 255, .6); }
.gl-mock__list { display: grid; gap: 1px; }
.gl-mock__row {
    background: var(--gl-petrol-800);
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .10);
    font-size: 14px;
    color: #fff;
}
.gl-mock__badge { font-family: var(--gl-font-mono); font-size: 11.5px; color: var(--gl-petrol-200); border: 1px solid rgba(253, 193, 0, .4); padding: 4px 8px; flex: 0 0 auto; }
.gl-mock__badge--warn { color: var(--gl-amber-500); border-color: rgba(253, 193, 0, .45); }
.gl-mock__badge--mute { color: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .24); }
.gl-mock__note { margin-top: 18px; font-family: var(--gl-font-mono); font-size: 11px; letter-spacing: .14em; color: rgba(255, 255, 255, .4); }
/* Schermate di prodotto a tutta colonna: nessuna cornice, solo l'immagine. */
.gl-shot { margin: 0; }
.gl-shot a { display: block; cursor: zoom-in; }
.gl-shot img { display: block; width: 100%; height: auto; border-radius: 3px; }

/* ── Visore delle schermate ────────────────────────────────────────────────
   Al clic la schermata si apre piu' grande ma contenuta: sta dentro il
   viewport (niente dimensione nativa da trascinare), su un velo scuro. */
.gl-lightbox {
    position: fixed; inset: 0; z-index: 99999999;
    display: none; background: rgba(0, 25, 35, .92);
}
.gl-lightbox.is-open { display: block; }
.gl-lightbox__scroll {
    position: absolute; inset: 0;
    display: flex; padding: clamp(14px, 3vw, 44px);
}
/* Adattata al viewport: piu' grande della colonna, mai fuori schermo. */
.gl-lightbox__scroll img {
    display: block; margin: auto;
    width: auto; height: auto;
    max-width: min(1400px, 100%); max-height: 100%;
    border-radius: 3px;
}
/* Fondo pieno, non un velo trasparente: sotto c'e' una schermata quasi
   bianca e un bianco al 14% spariva. */
.gl-lightbox__close {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 44px; height: 44px; border: 0; border-radius: 2px;
    background: rgba(0, 25, 35, .78); color: #fff;
    font-size: 20px; line-height: 1; cursor: pointer;
}
.gl-lightbox__close:hover { background: rgba(0, 25, 35, .92); }
.gl-lightbox__hint {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    z-index: 2; padding: 7px 12px; border-radius: 2px;
    background: rgba(0, 25, 35, .88);
    font-family: var(--gl-font-mono); font-size: 10.5px; letter-spacing: .12em;
    color: rgba(255, 255, 255, .82); text-align: center; pointer-events: none;
}

/* Telefono con scansione QR */
.gl-phone { width: min(300px, 80vw); border: 10px solid #001C27; border-radius: 34px; background: var(--gl-petrol-800); padding: 16px 14px 22px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.gl-phone__bar { display: flex; justify-content: space-between; align-items: center; font-family: var(--gl-font-mono); font-size: 11px; letter-spacing: .1em; color: rgba(255, 255, 255, .5); margin-bottom: 14px; }
.gl-phone__t { font-family: var(--gl-font-title); font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: #fff; }
.gl-phone__scan { margin-top: 14px; aspect-ratio: 1/1; border: 2px dashed rgba(127, 196, 224, .6); border-radius: 10px; display: grid; place-items: center; position: relative; background: rgba(0, 0, 0, .25); }
.gl-phone__qr { width: 52%; height: 52%; background: #fff; border-radius: 4px; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: 3px; padding: 8px; }
.gl-phone__qr span { background: #001C27; }
.gl-phone__laser { position: absolute; left: 8%; right: 8%; height: 2px; background: var(--gl-amber-500); top: 50%; box-shadow: 0 0 14px var(--gl-amber-500); }
.gl-phone__kv { display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(255, 255, 255, .8); }
.gl-phone__kv b { color: #fff; }

/* ── Form ──────────────────────────────────────────────────────────────── */

.gl-form { display: grid; gap: 16px; margin-top: 24px; }
.gl-field { display: block; }
.gl-field > span {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--gl-ink-500);
    margin-bottom: 7px;
    text-transform: uppercase;
}
.gl-input {
    width: 100%;
    border: 1px solid rgba(17, 17, 17, .18);
    padding: 14px;
    font-family: var(--gl-font-body);
    font-size: 16px;
    color: var(--gl-ink-900);
    background: #fff;
    outline: none;
    border-radius: 0;
}
.gl-input:focus { border-color: var(--gl-green-900); }
.gl-input.is-error { border-color: #D9534F; background: #fff6f6; }
textarea.gl-input { resize: vertical; }
.gl-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.gl-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--gl-ink-500); }
.gl-check input { margin-top: 3px; flex: 0 0 auto; }

.gl-alert { display: none; padding: 14px 16px; font-size: 14.5px; line-height: 1.5; border-radius: 2px; margin-bottom: 16px; }
.gl-alert.ok { display: block; background: var(--gl-green-050); color: var(--gl-green-900); border: 1px solid var(--gl-green-500); }
.gl-alert.ko { display: block; background: #fdecea; color: #a32c26; border: 1px solid #D9534F; }

/* ── Barra di avanzamento lettura ──────────────────────────────────────── */

.gl-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 120; background: transparent; pointer-events: none; }
.gl-progress > span { display: block; height: 100%; width: 0; background: var(--gl-amber-500); }

/* ── Topbar ────────────────────────────────────────────────────────────── */

.gl-topbar {
    background: var(--gl-dark-1);
    color: rgba(255, 255, 255, .72);
    font-family: var(--gl-font-mono);
    font-size: 11.5px;
    letter-spacing: .06em;
    display: none;
}
.gl-topbar__in { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; line-height: 1.9; padding-top: 8px; padding-bottom: 8px; }
.gl-topbar a { color: rgba(255, 255, 255, .72); white-space: nowrap; }
.gl-topbar a:hover { color: #fff; }
.gl-topbar__addr { color: var(--gl-green-200); white-space: nowrap; }
.gl-topbar__spacer { margin-left: auto; }
.gl-topbar__strong { color: #fff !important; }
.gl-topbar__cta { color: var(--gl-ink-900) !important; background: var(--gl-amber-500); padding: 4px 12px; font-weight: 500; }
.gl-topbar__cta:hover { background: var(--gl-amber-700); color: var(--gl-ink-900) !important; }

/* ── Header ────────────────────────────────────────────────────────────── */

.gl-header {
    position: sticky;
    top: 0;
    z-index: 110;
    background: rgba(245, 243, 238, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(17, 17, 17, .10);
}
.gl-header__in { display: flex; align-items: center; gap: clamp(16px, 3vw, 44px); padding-top: 14px; padding-bottom: 14px; }
.gl-logo { display: flex; align-items: center; flex: 0 0 auto; }
.gl-logo img { display: block; height: 34px; width: auto; }

.gl-nav { display: none; flex-wrap: wrap; align-items: center; gap: clamp(12px, 1.6vw, 24px); font-size: 14px; font-weight: 600; flex: 1; }
.gl-nav > a, .gl-nav__has > a { color: var(--gl-ink-900); padding: 6px 0; display: inline-flex; align-items: center; gap: 6px; }
.gl-nav > a:hover, .gl-nav__has > a:hover { color: var(--gl-green-700); }
.gl-nav > a.is-active, .gl-nav__has.is-active > a { color: var(--gl-green-900); box-shadow: inset 0 -2px 0 0 var(--gl-amber-500); }
.gl-nav__caret { width: 5px; height: 5px; border-right: 1.6px solid var(--gl-amber-500); border-bottom: 1.6px solid var(--gl-amber-500); transform: rotate(45deg); margin-top: -3px; }

.gl-nav__has { position: relative; }
.gl-mega {
    position: absolute;
    top: 34px;
    left: -24px;
    width: min(820px, 92vw);
    background: #fff;
    border: 1px solid rgba(17, 17, 17, .10);
    box-shadow: 0 30px 70px -30px rgba(17, 17, 17, .35);
    padding: 22px;
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 22px;
    z-index: 5;
}
.gl-nav__has:hover .gl-mega, .gl-nav__has:focus-within .gl-mega { display: grid; }
.gl-mega__head { display: block; font-family: var(--gl-font-mono); font-size: 11px; letter-spacing: .16em; color: var(--gl-green-700); margin-bottom: 12px; }
.gl-mega a.gl-mega__item { display: block; padding: 5px 0; font-weight: 500; color: var(--gl-ink-900); font-size: 14px; }
.gl-mega a.gl-mega__item:hover { color: var(--gl-green-700); }
.gl-mega__foot { display: flex; flex-wrap: wrap; gap: 8px 22px; grid-column: 1 / -1; border-top: 1px solid rgba(17, 17, 17, .12); padding-top: 16px; font-size: 13.5px; }
.gl-mega__foot a { font-weight: 700; color: var(--gl-green-700); }

.gl-header__cta { display: none; flex: 0 0 auto; }
.gl-burger-wrap { display: flex; margin-left: auto; align-items: center; gap: 10px; }
.gl-iconbtn { width: 48px; height: 48px; border: 1px solid rgba(17, 17, 17, .18); border-radius: 2px; display: grid; place-items: center; }
/* Accesso clienti: comparsa solo in mobile a barra azioni entrata (regole in globalsrl-mobile.css) */
.gl-iconbtn--area { display: none; }
.gl-burger {
    -webkit-appearance: none;
    appearance: none; width: 48px; height: 48px; background: var(--gl-green-900); border: 0; border-radius: 2px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.gl-burger span { display: grid; gap: 5px; width: 20px; }
.gl-burger span span { height: 2px; background: #fff; border-radius: 2px; transition: transform .28s var(--gl-ease), opacity .2s ease; }
.gl-burger.is-open span span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gl-burger.is-open span span:nth-child(2) { opacity: 0; }
.gl-burger.is-open span span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

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

.gl-drawer { position: fixed; inset: 0; z-index: 115; display: none; justify-content: flex-end; }
.gl-drawer.is-open { display: flex; }
.gl-drawer__veil { position: absolute; inset: 0; background: rgba(17, 17, 17, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.gl-drawer__panel {
    position: relative;
    width: min(420px, 88vw);
    height: 100%;
    background: var(--gl-ink-050);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: -24px 0 60px -30px rgba(17, 17, 17, .6);
    animation: gl-drawer .3s var(--gl-ease);
    display: flex;
    flex-direction: column;
}
.gl-drawer__head { position: sticky; top: 0; background: var(--gl-green-900); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; z-index: 2; }
.gl-drawer__head span { font-family: var(--gl-font-mono); font-size: 11.5px; letter-spacing: .16em; color: rgba(255, 255, 255, .8); }
.gl-drawer__close {
    -webkit-appearance: none;
    appearance: none; width: 44px; height: 44px; background: transparent; border: 1px solid rgba(255, 255, 255, .34); border-radius: 2px; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.gl-drawer__body { padding: 8px 20px 20px; display: flex; flex-direction: column; }
.gl-drawer__link {
    padding: 15px 0;
    border-bottom: 1px solid rgba(17, 17, 17, .12);
    font-family: var(--gl-font-title);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -.02em;
    color: var(--gl-ink-900);
}
.gl-drawer__group { border-bottom: 1px solid rgba(17, 17, 17, .12); }
.gl-drawer__toggle {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 15px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    font-family: var(--gl-font-title);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -.02em;
    color: var(--gl-ink-900);
    text-align: left;
}
.gl-drawer__toggle > span { font-family: var(--gl-font-mono); font-size: 17px; color: var(--gl-green-700); width: 24px; text-align: center; }
.gl-drawer__sub { padding: 0 0 14px; display: none; flex-direction: column; gap: 2px; }
.gl-drawer__group.is-open .gl-drawer__sub { display: flex; }
.gl-drawer__hub { padding: 12px 14px; background: var(--gl-green-050); font-weight: 700; font-size: 15px; color: var(--gl-green-900); border-radius: 2px; }
.gl-drawer__item { padding: 13px 14px; font-size: 15.5px; font-weight: 500; color: var(--gl-ink-700); border-radius: 2px; }
.gl-drawer__item:hover { background: #fff; }
.gl-drawer__ctas { margin-top: 24px; display: grid; gap: 10px; }
.gl-drawer__foot { margin-top: 22px; font-family: var(--gl-font-mono); font-size: 11.5px; line-height: 1.9; letter-spacing: .1em; color: var(--gl-ink-500); }

/* ── Banda CTA e footer ────────────────────────────────────────────────── */

.gl-cta-band { background: var(--gl-green-900); color: #fff; }
.gl-cta-band__in { padding: clamp(44px, 7vh, 80px) var(--gl-gut); display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: space-between; max-width: var(--gl-max); margin: 0 auto; }
.gl-cta-band .gl-eyebrow { color: #fff; }
.gl-cta-band .gl-h2 { color: #fff; max-width: 24ch; }

.gl-footer { background: var(--gl-dark-1); color: rgba(255, 255, 255, .7); padding: clamp(56px, 8vh, 96px) 0 0; }
.gl-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: clamp(28px, 4vw, 56px); }
.gl-footer__logo { display: inline-block; }
.gl-footer__logo img { height: 44px; width: auto; display: block; }
.gl-footer__about { margin-top: 20px; font-size: 14px; line-height: 1.65; max-width: 34ch; }
.gl-footer__hours { margin-top: 20px; font-family: var(--gl-font-mono); font-size: 11.5px; letter-spacing: .12em; color: rgba(255, 255, 255, .45); }
.gl-footer__head { font-family: var(--gl-font-mono); font-size: 11.5px; letter-spacing: .16em; color: var(--gl-green-200); margin-bottom: 16px; }
.gl-footer__list { display: grid; gap: 9px; font-size: 14px; }
.gl-footer__list a { color: rgba(255, 255, 255, .7); display: inline-block; padding: 9px 0; }
.gl-footer__list a:hover { color: #fff; }
.gl-footer__list a.is-accent { color: var(--gl-green-200); }
.gl-footer__label { display: block; font-family: var(--gl-font-mono); font-size: 11px; letter-spacing: .12em; color: var(--gl-green-200); margin-bottom: 3px; }
.gl-footer__bottom {
    max-width: var(--gl-max);
    margin: clamp(40px, 6vh, 70px) auto 0;
    padding: 22px var(--gl-gut);
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    font-family: var(--gl-font-mono);
    font-size: 11.5px;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .42);
}
.gl-footer__bottom a { color: rgba(255, 255, 255, .42); display: inline-block; padding: 10px 0; }
.gl-footer__bottom a:hover { color: #fff; }
.gl-footer__spacer { flex: 1; }

/* ── Comparsa allo scroll ──────────────────────────────────────────────── */
/* Tutte le regole che nascondono sono sotto `html.gl-anim`, classe messa da uno
   script inline in cima al body: se il JS non parte, niente resta invisibile. */

.gl-anim .gl-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--gl-ease), transform .8s var(--gl-ease); }
.gl-anim .gl-reveal.is-in { opacity: 1; transform: translateY(var(--gl-lift, 0px)); }
.gl-anim .gl-reveal--d1 { transition-delay: .08s; }
.gl-anim .gl-reveal--d2 { transition-delay: .16s; }

/* Griglia a comparsa scaglionata: si osserva il contenitore, entrano i figli */
.gl-anim .gl-stagger > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--gl-ease), transform .7s var(--gl-ease);
}
.gl-anim .gl-stagger.is-in > * { opacity: 1; transform: translateY(var(--gl-lift, 0px)); }
.gl-anim .gl-stagger.is-in > *:nth-child(1) { transition-delay: 0s; }
.gl-anim .gl-stagger.is-in > *:nth-child(2) { transition-delay: .07s; }
.gl-anim .gl-stagger.is-in > *:nth-child(3) { transition-delay: .14s; }
.gl-anim .gl-stagger.is-in > *:nth-child(4) { transition-delay: .21s; }
.gl-anim .gl-stagger.is-in > *:nth-child(5) { transition-delay: .28s; }
.gl-anim .gl-stagger.is-in > *:nth-child(6) { transition-delay: .35s; }
.gl-anim .gl-stagger.is-in > *:nth-child(7) { transition-delay: .42s; }
.gl-anim .gl-stagger.is-in > *:nth-child(8) { transition-delay: .49s; }
.gl-anim .gl-stagger.is-in > *:nth-child(n+9) { transition-delay: .56s; }

/* ── Utility ───────────────────────────────────────────────────────────── */

/* Contenuto sopra un velo (.gl-hero__scrim ha z-index 1): senza questo il
   velo verde ricopre testo e card e tutto diventa verde su verde. */
.gl-above { position: relative; z-index: 2; }

.gl-headrow { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; }
.gl-headrow--bar { border-bottom: 2px solid var(--gl-green-900); padding-bottom: 18px; }
.gl-mt-xs { margin-top: 12px; }
.gl-mt-s { margin-top: 18px; }
.gl-mt-m { margin-top: clamp(28px, 4vh, 48px); }
.gl-mt-l { margin-top: clamp(34px, 5vh, 56px); }
.gl-mb-m { margin-bottom: clamp(30px, 4vh, 48px); }
.gl-hide { display: none; }

/* ── Breakpoint desktop ────────────────────────────────────────────────── */

@media (min-width: 1180px) {
    .gl-topbar { display: block; }
    .gl-nav { display: flex; }
    .gl-header__cta { display: inline-block; }
    .gl-burger-wrap { display: none; }
    .gl-logo img { height: 40px; }
    .gl-steps__sticky { position: sticky; }
    .gl-showdesk { display: block; }
}

@media (max-width: 1179px) {
    .gl-showdesk { display: none; }
    .gl-cue { display: none; }
}

/* ── Riduzione del movimento ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
    .gl-reveal, .gl-stagger > * { opacity: 1 !important; transform: none !important; }
}

@keyframes gl-drawer { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes gl-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes gl-pulse { 0%, 100% { opacity: .25; transform: scale(1); } 50% { opacity: .9; transform: scale(1.35); } }
@keyframes gl-scrollcue { 0% { transform: translateY(-6px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }

/* ── Filtri client-side (schede, blog, shop) ───────────────────────────── */

.gl-search {
    width: 100%;
    max-width: 520px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .24);
    color: #fff;
    font-family: var(--gl-font-body);
    font-size: 16px;
    padding: 16px 18px;
    border-radius: 2px;
    outline: none;
}
.gl-search::placeholder { color: rgba(255, 255, 255, .5); }
.gl-search:focus { border-color: var(--gl-amber-500); }
.gl-search--inline { flex: 1; min-width: 220px; padding: 11px 14px; max-width: none; }

.gl-pick {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    color: var(--gl-ink-900);
    border: 1px solid rgba(17, 17, 17, .16);
    font-family: var(--gl-font-body);
    font-size: 13.5px;
    font-weight: 600;
    padding: 13px 16px;
    cursor: pointer;
    border-radius: 2px;
    transition: background .18s ease, color .18s ease;
}
.gl-pick:hover { background: var(--gl-green-050); }
.gl-pick.is-active { background: var(--gl-green-900); color: #fff; border-color: var(--gl-green-900); }
.gl-sec--dark .gl-pick,
.gl-hero__body .gl-pick { color: #fff; border-color: rgba(255, 255, 255, .28); }
.gl-sec--dark .gl-pick:hover,
.gl-hero__body .gl-pick:hover { background: rgba(255, 255, 255, .1); }
.gl-sec--dark .gl-pick.is-active,
.gl-hero__body .gl-pick.is-active { background: var(--gl-amber-500); color: var(--gl-ink-900); border-color: var(--gl-amber-500); }

.gl-empty {
    padding: 40px 0;
    font-family: var(--gl-font-mono);
    font-size: 12px;
    letter-spacing: .12em;
    color: var(--gl-ink-500);
}

/* ── Nota segnaposto (dati da fornire) ─────────────────────────────────── */

.gl-note {
    font-family: var(--gl-font-mono);
    font-size: 11.5px;
    line-height: 1.8;
    letter-spacing: .04em;
    color: var(--gl-ink-500);
    border-left: 2px solid var(--gl-amber-500);
    padding-left: 18px;
}
.gl-sec--dark .gl-note { color: rgba(255, 255, 255, .55); }

/* ── Ritaglio del logo dal quadrato del favicon ────────────────────────── */
/* L'unico logo disponibile su fondo chiaro è il quadrato 192×192: la finestra
   qui sotto ne isola il lettering "Global — Future Planet Ecology". */
.gl-logo__win { display: block; position: relative; overflow: hidden; width: 70px; height: 28px; }
.gl-logo__win img { position: absolute; left: -15px; top: -41px; width: 101px; height: 101px; max-width: none; }
@media (min-width: 1180px) {
    .gl-logo__win { width: 90px; height: 36px; }
    .gl-logo__win img { left: -20px; top: -53px; width: 130px; height: 130px; }
}

/* ── Mappa della sede (caricamento su richiesta) ───────────────────────── */

.gl-map {
    position: relative;
    height: clamp(260px, 36vh, 340px);
    background: var(--gl-green-900);
    overflow: hidden;
}
.gl-map__ph {
    height: 100%;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    color: #fff;
}
.gl-map__pin { color: var(--gl-green-200); }
.gl-map__addr { font-family: var(--gl-font-title); font-weight: 700; font-size: 18px; letter-spacing: -.015em; max-width: 22ch; }
.gl-map__link { color: var(--gl-green-200); font-weight: 700; font-size: 14px; padding: 6px 0; }
.gl-map__link:hover { color: #fff; }
.gl-map__note { font-family: var(--gl-font-mono); font-size: 10.5px; letter-spacing: .08em; color: rgba(255, 255, 255, .55); max-width: 30ch; }
.gl-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Pagina servizio: colonna di destra (foto + riquadro "come procediamo").
   Con --fill le due colonne finiscono insieme e l'altezza in piu' la prende
   la foto, che ha object-fit:cover e quindi si limita a inquadrare meno.
   Senza foto la colonna non si allunga: il riquadro scuro resterebbe vuoto. */
.gl-svccol { display: grid; gap: 22px; align-content: start; }
@media (min-width: 901px) {
    .gl-split--fill { align-items: stretch; }
    .gl-svccol--img { grid-template-rows: 1fr auto; align-content: stretch; }
    .gl-svccol--img .gl-figure--ratio { aspect-ratio: auto; min-height: clamp(240px, 30vh, 360px); }
}

/* Scheda infestante collegata, in fondo alla prima colonna di /servizi/<slug>. */
.gl-sheetlink {
    display: block;
    margin-top: clamp(30px, 4vh, 44px);
    padding: 22px;
    background: #fff;
    border: 1px solid rgba(17, 17, 17, .16);
    transition: border-color .25s var(--gl-ease), background .25s var(--gl-ease);
}
.gl-sheetlink:hover { border-color: var(--gl-green-700); background: var(--gl-green-050); }
.gl-sheetlink .gl-card__meta { display: block; }
.gl-sheetlink__t {
    display: block;
    margin-top: 10px;
    font-family: var(--gl-font-title);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -.02em;
    color: var(--gl-green-700);
}
/* "Dove operiamo": griglia a tre righe (intestazione / corpo / nota) con la
   mappa nella riga del corpo, cosi il riquadro comincia ai due bottoni e
   finisce con la griglia delle aree servite. A una colonna (<=900px) le
   righe esplicite spariscono e conta l'ordine del markup. */
.gl-dove { display: grid; gap: clamp(30px, 4vw, 64px); }
.gl-dove__map { min-height: 340px; }
@media (min-width: 901px) {
    /* row-gap 24: e' lo stacco fra i recapiti e i due bottoni, e la riga dei
       bottoni e' anche il bordo superiore della mappa. */
    .gl-dove { grid-template-columns: 1fr 1fr; align-items: start; column-gap: clamp(30px, 4vw, 64px); row-gap: 24px; }
    /* .gl-map ha un'altezza fissa propria: qui deve cederla allo stretch. */
    .gl-dove__map { height: auto; }
    .gl-dove__head { grid-column: 1; grid-row: 1; }
    .gl-dove__body { grid-column: 1; grid-row: 2; }
    .gl-dove__note { grid-column: 1; grid-row: 3; }
    .gl-dove__map  { grid-column: 2; grid-row: 2; align-self: stretch; }
    .gl-dove__cap  { grid-column: 2; grid-row: 3; }
}
@media (max-width: 900px) {
    .gl-dove__note { margin-top: -14px; }
    .gl-dove__cap  { margin-top: -14px; }
    .gl-dove__map  { height: clamp(320px, 56vh, 460px); }
}

/* ── Corpo articolo dal pannello (HTML del WYSIWYG) ────────────────────── */

.gl-article { font-size: 17px; line-height: 1.75; color: var(--gl-ink-700); }
.gl-article > * + * { margin-top: 18px; }

/* Testo incollato da Word/Google Docs: il WYSIWYG conserva span annidati con
   misure in punti (font-size:20.0pt = 26,7px), font Calibri e interlinee
   fisse, e il corpo dell'articolo esce enorme. Qui la formattazione ereditata
   viene neutralizzata sui soli contenitori di testo: le dimensioni volute
   stanno sui tag (h2, h3, blockquote), che restano intatti. */
.gl-article :is(span, p, div, li, td, th, font, em, strong, b, i, a)[style*="font-size"] { font-size: inherit !important; }
.gl-article :is(span, p, div, li, td, th, font, em, strong, b, i, a)[style*="font-family"] { font-family: inherit !important; }
.gl-article :is(span, p, div, li, td, th, font, em, strong, b, i, a)[style*="line-height"] { line-height: inherit !important; }
.gl-article font[size] { font-size: inherit !important; }
.gl-article h1, .gl-article h2, .gl-article h3, .gl-article h4 {
    font-family: var(--gl-font-title);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
    color: var(--gl-green-900);
    margin-top: 34px;
}
.gl-article h1 { font-size: clamp(24px, 2.4vw, 32px); }
.gl-article h2 { font-size: clamp(20px, 2vw, 28px); }
.gl-article h3 { font-size: 20px; }
.gl-article h4 { font-size: 18px; }
.gl-article strong, .gl-article b { font-weight: 700; color: var(--gl-ink-900); }
.gl-article a { color: var(--gl-green-900); border-bottom: 1px solid var(--gl-amber-500); }
.gl-article ul, .gl-article ol { padding-left: 22px; display: grid; gap: 8px; }
.gl-article ul { list-style: disc; }
.gl-article ol { list-style: decimal; }
.gl-article li { display: list-item; }
.gl-article img { height: auto; display: block; margin: 26px 0; }
.gl-article blockquote {
    border-left: 3px solid var(--gl-amber-500);
    padding: 4px 0 4px 20px;
    color: var(--gl-ink-900);
    font-size: 19px;
    line-height: 1.6;
}
.gl-article table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.gl-article th, .gl-article td { border: 1px solid var(--gl-ink-200); padding: 10px 12px; text-align: left; }

/* ── Banner consensi della piattaforma ─────────────────────────────────── */
/* #cp-banner ha fondo nero e nessun colore di testo proprio: ereditava il
   #111111 del body e risultava illeggibile. Qui lo rendiamo leggibile senza
   toccare il CSS condiviso della piattaforma. */
#cp-banner,
#cp-banner p,
#cp-banner div,
#cp-banner span,
#cp-banner li {
    color: rgba(255, 255, 255, .82);
    font-family: var(--gl-font-body);
}
#cp-banner a { color: var(--gl-amber-500); text-decoration: underline; }
#cp-banner a:hover { color: #fff; }
#cp-banner button,
#cp-banner [role="button"] { color: inherit; }