/* ===========================================================
   MEDIL - Foglio di stile principale
   -----------------------------------------------------------
   I token qui sotto sono estratti dal design Figma.
   Il file Figma non espone "Variables" pubblicate: i valori
   sono letti direttamente dai nodi del design. Ciò che non è
   presente nel design NON è stato inventato.
   Fonte: figma.com/design/2fbr7oT0PzC6qmtJVehVWu
   =========================================================== */

/* ----------------------------------------------------------
   Design tokens
   ---------------------------------------------------------- */
:root {
    /* --- Colori (dai nodi del design) --- */
    --color-brand: #003989;        /* blu marchio (logo)                */
    --color-dark: #22252b;         /* sezioni scure + testo principale  */
    --color-light: #f4f6f8;        /* sfondo chiaro / testo su scuro    */
    --color-accent: #1dd9d2;       /* accento teal (CTA su chiaro)      */
    --color-accent-light: #98f3ff; /* accento ciano (CTA/link su scuro) */
    --color-white: #ffffff;

    /* Alias semantici */
    --color-text: var(--color-dark);
    --color-bg: var(--color-white);

    /* --- Tipografia --- */
    /* Display/heading: Luxerie · Corpo/UI: Geist · Etichette: Inter */
    --font-display: "Luxerie", "Times New Roman", Georgia, serif;
    --font-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-label: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-base: var(--font-body);

    /* Scala tipografica (px del design @1920, espressi in rem) */
    --fs-hero: 5.625rem;   /* 90px - H1 hero        */
    --fs-h2: 5rem;         /* 80px - titoli sezione */
    --fs-h3: 2.1875rem;    /* 35px - titoli card    */
    --fs-body-lg: 2.1875rem; /* 35px - corpo grande */
    --fs-cta: 1.25rem;     /* 20px - bottoni/CTA    */
    --fs-label: 1.125rem;  /* 18px - eyebrow/label  */
    --fs-small: 0.875rem;  /* 14px - testo footer   */

    --lh-base: 1.6;
    --tracking-cta: 2px;     /* lettere distanziate sui CTA   */
    --tracking-label: 0.72px;/* etichette uppercase           */
    --tracking-small: 0.56px;

    /* --- Layout --- */
    --container-wide: 1680px;   /* header e sezioni larghe (1920 - 120×2) */
    --container-max: 1420px;    /* colonna contenuti (1920 - 250×2) */
    --container-narrow: 1000px; /* colonna di testo ristretta       */
    --container-padding: 2rem;
    --container-padding-wide: 2rem;

    /* --- Forme --- */
    --radius-pill: 35px;        /* bottoni a pillola */

    /* --- Bordi --- */
    --border-cta: 2px;
}

/* ----------------------------------------------------------
   Font auto-ospitati
   -----------------------------------------------------------
   Luxerie (display/heading) è commerciale: il file è in
   assets/fonts/luxerie/luxerie.otf. È il taglio usato nel design
   (nodi Figma: "Luxerie:Regular"). Geist/Inter restano da Google
   Fonts (header.php).
   ---------------------------------------------------------- */
@font-face {
    font-family: "Luxerie";
    src: url("../fonts/luxerie/luxerie.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ----------------------------------------------------------
   Reset di base
   ---------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

/* ----------------------------------------------------------
   Tipografia di base
   ---------------------------------------------------------- */
body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-light);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    /* evita lo scroll orizzontale delle sezioni full-bleed; "clip" (non "hidden")
       per non trasformare il body in un contenitore di scroll */
    overflow-x: clip;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-dark);
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-family: var(--font-body); }

a {
    color: var(--color-accent);
    text-decoration: none;
}

/* ----------------------------------------------------------
   Container
   ---------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.container--wide {
    max-width: var(--container-wide);
    padding: 0 var(--container-padding-wide)
}

.margin-top { margin-top: 5rem; }

/* Extra-large: a tutta larghezza, con solo il padding laterale di default
   (--container-padding, ereditato da .container). Usato dalle card servizi,
   che nel design arrivano quasi a filo pagina. */
.container--xl {
    max-width: none;
}

/* ----------------------------------------------------------
   Bottone / CTA a pillola
   ---------------------------------------------------------- */
.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--fs-cta);
    font-weight: 600;
    letter-spacing: var(--tracking-cta);
    padding: 0.85em 1.6em;
    border-radius: var(--radius-pill);
    border: var(--border-cta) solid var(--color-accent);
    background: transparent;
    color: var(--color-accent);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn:hover {
    background: var(--color-accent);
    color: var(--color-dark);
}

/* Variante su sfondo scuro */
.btn--light {
    border-color: var(--color-accent-light);
    color: var(--color-accent-light);
}

.btn--light:hover {
    background: var(--color-accent-light);
    color: var(--color-dark);
}

/* ----------------------------------------------------------
   Header / Navigazione  (design: barra chiara, logo blu, nav MAIUSCOLO)
   ---------------------------------------------------------- */
.site-header {
    position: relative;   /* ancora il mega-menu a comparsa */
    background: var(--color-light);
    color: var(--color-dark);
    z-index: 50;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
}

.site-header__logo img {
    height: 56px;
    width: auto;
    font-size: 0;   /* nasconde il lampo del testo alt durante il caricamento (F5) */
}

.main-nav ul {
    display: flex;
    align-items: center;
    gap: 2.25rem;
    list-style: none;
}

.main-nav__item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.main-nav__link {
    font-family: var(--font-body);
    font-size: 1rem;            /* 16px */
    color: var(--color-dark);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}

.main-nav__link:hover {
    color: var(--color-brand);
}

.main-nav__link.is-active {
    font-weight: 600;
}

/* Voce con sottomenu: pulsante che riusa lo stile del link nav */
.main-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* Caret della voce con sottomenu: ruota verso l'alto a pannello aperto */
.main-nav__caret {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--color-dark);
    border-bottom: 2px solid var(--color-dark);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.3s ease;
}

.main-nav__toggle[aria-expanded="true"] .main-nav__caret {
    transform: translateY(2px) rotate(-135deg);
}

/* ----------------------------------------------------------
   Mega-menu (sottomenu servizi a comparsa sotto l'header)
   ---------------------------------------------------------- */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--color-light);
    box-shadow: 0 24px 40px rgba(34, 37, 43, 0.12);
    /* Animazione di apertura: griglia 0fr -> 1fr (altezza auto animabile) */
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows 0.4s ease, opacity 0.3s ease, visibility 0s linear 0.4s;
}

.mega-menu.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition: grid-template-rows 0.4s ease, opacity 0.3s ease, visibility 0s;
}

.mega-menu__inner {
    overflow: hidden;
    min-height: 0;
}

.mega-menu .container {
    padding-top: 3.25rem;
    padding-bottom: 3.75rem;
}

.mega-menu__eyebrow {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-cta);            /* 20px */
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-cta);
    margin-bottom: 2.25rem;
}

.mega-menu__list {
    list-style: none;
}

.mega-menu__item {
    border-bottom: 1px solid rgba(34, 37, 43, 0.15);
}

.mega-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.35rem 0;
    color: var(--color-dark);
}

.mega-menu__name {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 3.4375rem;                /* 55px del design */
    line-height: 1.15;
    color: var(--color-dark);
    transition: transform 0.3s ease;
}

.mega-menu__more {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    flex: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-cta);            /* 20px */
    color: var(--color-accent);
    letter-spacing: var(--tracking-cta);
    white-space: nowrap;
    transition: transform 0.3s ease;
}

/* Hover (design: variante 2): titolo e "Scopri di più" rientrano verso il
   centro di ~2.98% della riga (≈ il titolo verso destra, il link verso
   sinistra); nessun cambio di colore. */
.mega-menu__link:hover .mega-menu__name,
.mega-menu__link:focus-visible .mega-menu__name {
    transform: translateX(2.75rem);
}

.mega-menu__link:hover .mega-menu__more,
.mega-menu__link:focus-visible .mega-menu__more {
    transform: translateX(-2.75rem);
}

/* Freccia "Scopri di più": linea orizzontale + punta, ricostruita in CSS */
.mega-menu__arrow {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 8px;
    flex: none;
}

.mega-menu__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: translateY(-50%);
}

.mega-menu__arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translate(1px, -50%) rotate(45deg);
}

/* Icona menu mobile: griglia 2x2 di quadrati blu (statica) */
.nav-toggle {
    display: none;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.nav-toggle__grid {
    display: grid;
    grid-template-columns: repeat(2, 10px);
    grid-template-rows: repeat(2, 10px);
    gap: 10px;
}

.nav-toggle__grid span {
    display: block;
    width: 10px;
    height: 10px;
    background: var(--color-brand);
}

/* ----------------------------------------------------------
   Mobile menu (overlay a tutto schermo, componente inedito)
   -----------------------------------------------------------
   Non presente nel design Figma: usa solo i token di :root e i
   pattern già in uso (caret e shape costruite in CSS, animazione
   accordion grid-template-rows del mega-menu). Aperto da
   .nav-toggle via main.js; mostrato solo in contesto mobile,
   dove .main-nav è già nascosta.
   ---------------------------------------------------------- */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    background: var(--color-light);
    color: var(--color-dark);
    /* Nascosto di default: dissolvenza + leggero scorrimento dall'alto */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1rem);
    transition: opacity 0.3s ease,
                transform 0.3s ease,
                visibility 0s linear 0.3s;
}

.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

/* Barra superiore: logo + pulsante chiudi (allineata all'header) */
.mobile-menu__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.mobile-menu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* Icona di chiusura: due linee incrociate, ricostruite in CSS */
.mobile-menu__close-icon {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
}

.mobile-menu__close-icon::before,
.mobile-menu__close-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-brand);
}

.mobile-menu__close-icon::before { transform: translateY(-50%) rotate(45deg); }
.mobile-menu__close-icon::after  { transform: translateY(-50%) rotate(-45deg); }

/* Lista voci: scorrevole se più alta del viewport */
.mobile-menu__nav {
    flex: 1;
    overflow-y: auto;
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
}

.mobile-menu__list {
    list-style: none;
}

.mobile-menu__item {
    border-bottom: 1px solid rgba(34, 37, 43, 0.12);
}

/* Voce principale: riusa l'aspetto MAIUSCOLO della nav desktop */
.mobile-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.1rem 0;
    font-family: var(--font-body);
    font-size: 1.25rem;
    color: var(--color-dark);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: left;
    transition: color 0.2s ease;
}

/* Le voci con sottomenu sono <button>: azzera lo stile nativo */
.mobile-menu__accordion {
    border: 0;
    background: none;
    cursor: pointer;
}

.mobile-menu__link:hover { color: var(--color-brand); }
.mobile-menu__link.is-active { font-weight: 600; }

/* Caret dell'accordion: ruota verso l'alto a pannello aperto (come la nav) */
.mobile-menu__caret {
    display: inline-block;
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--color-dark);
    border-bottom: 2px solid var(--color-dark);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.3s ease;
}

.mobile-menu__accordion[aria-expanded="true"] .mobile-menu__caret {
    transform: translateY(2px) rotate(-135deg);
}

/* Pannello sottovoci: stessa animazione 0fr -> 1fr del mega-menu desktop */
.mobile-menu__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.mobile-menu__panel.is-open {
    grid-template-rows: 1fr;
}

.mobile-menu__sublist {
    overflow: hidden;
    min-height: 0;
    list-style: none;
}

.mobile-menu__sublink {
    display: block;
    padding: 0.75rem 0 0.75rem 1.25rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-dark);
    transition: color 0.2s ease;
}

.mobile-menu__sublist li:last-child .mobile-menu__sublink { padding-bottom: 1.1rem; }

.mobile-menu__sublink:hover { color: var(--color-brand); }

/* Blocco lo scroll della pagina mentre l'overlay è aperto */
body.is-menu-open { overflow: hidden; }

/* ----------------------------------------------------------
   Contenuto principale
   ---------------------------------------------------------- */
.site-main {
    padding: 2rem 0;
    min-height: 60vh;
}

/* ----------------------------------------------------------
   Footer  (design: sfondo scuro, logo bianco, 3 colonne)
   ---------------------------------------------------------- */
.site-footer {
    background: var(--color-dark);
    color: var(--color-light);
    padding: 4.5rem 0 7.5rem;
}

.site-footer__top {
    display: grid;
    grid-template-columns: auto repeat(3, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.site-footer__logo img {
    height: 64px;
    width: auto;
}

.footer-col__title {
    font-family: var(--font-label);
    font-size: var(--fs-label);            /* 18px */
    font-weight: 400;
    color: var(--color-accent-light);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    margin-bottom: 0.9rem;
}

.footer-col__text {
    font-family: var(--font-body);
    font-size: var(--fs-small);            /* 14px */
    line-height: 1.78;                     /* ~25px */
    letter-spacing: var(--tracking-small);
    color: var(--color-light);
}

/* 4 servizi su 2 colonne, flusso per colonna (sinistra completa, poi destra) */
.footer-services {
    list-style: none;
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    gap: 0.4rem 2rem;
    margin-top: 1.5rem;
}

.footer-services__link {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-small);
    letter-spacing: var(--tracking-small);
    color: var(--color-light);
    transition: color 0.2s ease;
}

.footer-services__link:hover {
    color: var(--color-accent-light);
}

.site-footer__divider {
    border: 0;
    border-top: 1px solid var(--color-light);
    opacity: 0.25;
    margin: 2.5rem 0 1.5rem;
}

.site-footer__copyright {
    text-align: center;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    letter-spacing: var(--tracking-small);
    color: var(--color-light);
    opacity: 0.5;
}

/* ----------------------------------------------------------
   Homepage
   ---------------------------------------------------------- */

/* Sezioni a tutta larghezza: escono dal .container in cui è incluso il view */
.home-hero,
.cta-banner {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* annullano la spaziatura verticale di .site-main ai bordi della pagina */
.home-hero  { margin-top: -2rem; }
.cta-banner { margin-bottom: -2rem; }

/* --- Elementi riutilizzabili --- */

/* Riga divisoria puntinata (linea + puntino ai due capi); colore = currentColor.
   display:block perché su <span> (inline) la larghezza verrebbe ignorata e la
   barra collasserebbe (visibile solo nei contesti flex che la "blockificano"). */
.rule-dotted {
    display: block;
    position: relative;
    width: 351px;
    max-width: 80%;
    height: 4px;
    background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
}

.rule-dotted::before,
.rule-dotted::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    transform: translateY(-50%);
}

.rule-dotted::before { left: 0; }
.rule-dotted::after  { right: 0; }

.rule-dotted--center { margin-left: auto; margin-right: auto; }

/* Link con freccia (testo + linea/punta in CSS) — accent su chiaro */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-cta);
    letter-spacing: var(--tracking-cta);
    color: var(--color-accent);
    white-space: nowrap;
}

.link-arrow--light { color: var(--color-accent-light); }

.link-arrow__icon {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 8px;
    flex: none;
    transition: transform 0.2s ease;
}

.link-arrow__icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: translateY(-50%);
}

.link-arrow__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translate(1px, -50%) rotate(45deg);
}

a.link-arrow:hover .link-arrow__icon { transform: translateX(6px); }

/* --- 1. Hero slider --- */
.home-hero {
    /* jumbotron a tutta altezza: riempie il viewport sotto l'header (~96px) */
    min-height: calc(100vh - 96px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    color: var(--color-light);
}

.home-hero__slider {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: block;
}

.home-hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;   /* dissolvenza incrociata */
}

.home-hero__slide.is-active { opacity: 1; }

.home-hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--color-dark);
    opacity: 0.5;
}

.home-hero__content {
    position: relative;
    z-index: 1;
    pointer-events: none;   /* i click attraversano il contenuto e arrivano allo slider */
    width: min(1000px, 90%);
    margin: 0 auto;
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
}

.home-hero__title { color: var(--color-light); }

.home-hero__text {
    font-size: var(--fs-body-lg);
    line-height: 1.4;
}

/* Il contenuto ha pointer-events:none (i click arrivano allo slider): il CTA
   va riattivato così è cliccabile. Stando fuori dal <button> dello slider, non
   ne innesca il cambio slide. */
.home-hero__cta { pointer-events: auto; }

/* --- 2 / 4. Bande intro --- */
.intro-band {
    position: relative;   /* sezione full-width: ancora la decorazione Tracciato 42 */
    padding: 5rem 0;
}

/* La griglia vive sul container interno (la sezione resta a tutta larghezza,
   così la decoro può raggiungere il bordo). z-index sopra la decoro. */
.intro-band > .container {
    position: relative;
    z-index: 1;
    display: grid;
    /* Colonna etichetta ~400px (design) ma FLUIDA: con un 400px fisso, nell'
       intermezzo verso i 900px la colonna di testo si comprimeva troppo
       ("si rompe"). clamp() la fa scendere fino a 16rem mantenendo i 400px sul
       desktop, senza scalini; anche il gap si riduce. Sotto i 900px → 1 colonna
       (media query). NB: 1fr da solo collassava l'etichetta al minimo. */
    grid-template-columns: clamp(16rem, 28vw, 400px) minmax(0, 1fr);
    gap: 2rem clamp(2rem, 5vw, 5rem);
    align-items: start;
}

.intro-band__label {
    font-family: var(--font-display);
    font-size: 1.5625rem;   /* 25px del design */
    line-height: 1.3;
    color: var(--color-dark);
    margin-bottom: 2rem;
}

.intro-band__rule {
    width: 100%;
    max-width: 400px;
    color: var(--color-dark);
}

.intro-band__body {
    /* fluido: 35px sul desktop largo, scende dolcemente fino a 25px (valore
       mobile del design) restringendo la pagina, così non resta sproporzionato
       rispetto a etichetta (25px) e nota (18px) nell'intermezzo. */
    font-size: clamp(1.5625rem, 2.3vw, 2.1875rem);   /* 25 → 35px */
    line-height: 1.35;
    color: var(--color-dark);
}

.intro-band__link { margin-top: 2.5rem; }

/* --- 3. Soluzioni immobiliari --- */
.home-immobiliare {
    position: relative;
    padding: 1rem 0 4rem;
}

/* Decorazione Tracciato 42 (sfondo tenue): freccia/zigzag faint ancorata in basso
   a sinistra, a filo del bordo della sezione full-width. Riutilizzabile (home
   "Chi siamo" e pagina Immobiliare): va dentro una sezione position:relative. */
.decoro-tracciato {
    position: absolute;
    left: -2%;             /* sborda dal bordo sinistro (design: -41px su 1920) */
    bottom: 0;
    width: 38%;            /* 733px su 1920 ≈ 38% */
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.home-immobiliare__title { margin-bottom: 3rem; }

.media-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.media-row--reverse { grid-template-columns: 1fr 1.4fr; }
.media-row--reverse .media-row__media { order: 2; }
.media-row--reverse .media-row__text  { order: 1; }

.media-row__media img {
    width: 100%;
    aspect-ratio: 1013 / 575;
    object-fit: cover;
    border-radius: 5px;
}

.media-row__lead {
    font-size: 1.125rem;     /* 18px del design */
    line-height: 1.66;
    color: var(--color-dark);
    margin-bottom: 2rem;
}

.media-row__lead strong { font-weight: 700; }

.media-row__big {
    font-size: var(--fs-body-lg);
    line-height: 1.35;
    color: var(--color-dark);
}

/* Titolo grande seguito dal testo introduttivo: stacco tra le due righe. */
.media-row__big + .media-row__lead { margin-top: 1.25rem; }

/* --- 5. Card servizi --- */
/* Niente padding-top: lo stacco dal banner intro sopra è dato dal suo
   padding-bottom (evita il doppio spazio tra banner e card). */
.home-servizi { padding: 0 0 5rem; }

.servizi-grid {
    list-style: none;
    display: grid;
    /* minmax(0, 1fr): le tracce possono comprimersi sotto il min-content,
       così le immagini e il link "Scopri di più" (nowrap) non sforano. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem;
}

.service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--color-dark);
}

.service-card__img {
    width: 100%;
    aspect-ratio: 437 / 595;
    object-fit: cover;
    border-radius: 2px;
    margin-bottom: 1.25rem;
    transition: transform 0.3s ease;
}

.service-card:hover .service-card__img { transform: scale(1.02); }

.service-card__title {
    font-family: var(--font-body);
    font-weight: 400;
    margin-bottom: 0.9rem;
}

.service-card .link-arrow { margin-top: auto; }

/* --- 6. Banner CTA (componente riutilizzabile: includes/cta-banner.php) ---
   Nome non legato alla home: usato anche in altre pagine cambiando immagine
   e testi. È full-bleed (vedi gruppo "Sezioni a tutta larghezza" sopra). */
.cta-banner {
    min-height: clamp(620px, 74vh, 920px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    color: var(--color-light);
}

.cta-banner__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-banner__overlay {
    position: absolute;
    inset: 0;
    background: var(--color-dark);
    opacity: 0.6;   /* design: overlay 60% (nodi 1:112 / 1:381) */
}

.cta-banner__content {
    position: relative;
    z-index: 1;
    width: min(1000px, 90%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
    padding: 3rem 0;
}

.cta-banner__text {
    font-size: var(--fs-body-lg);
    line-height: 1.4;
}

/* CTA del banner in maiuscolo (design: "CONTATTACI"); il bottone resta
   generico .btn altrove (es. "Scopri il settore Immobiliare", caso naturale). */
.cta-banner__cta { text-transform: uppercase; }

/* ----------------------------------------------------------
   Pagine interne (es. Immobiliare)
   ---------------------------------------------------------- */

/* Hero a immagine: banda full-bleed con overlay scuro, senza testo (design:
   immagine sotto l'header con overlay 40%). Sta in cima a una pagina "full". */
.page-hero {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-top: -2rem;          /* annulla il padding-top di .site-main */
    height: clamp(260px, 38vw, 400px);
    overflow: hidden;
}

.page-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--color-dark);
    opacity: 0.4;               /* design: overlay 40% */
}

/* Titoli pagina/sezione (Luxerie), fluidi tra mobile e desktop */
.page-title {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-dark);
    font-size: clamp(3.625rem, 5vw, 5rem);      /* 58 → 80px */
    margin-top: 3.25rem;                        /* stacco dall'hero immagine */
}

.section-title {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-dark);
    font-size: clamp(3.4375rem, 4vw, 3.75rem);  /* 55 → 60px */
    margin-bottom: 2.5rem;
}

/* Testo introduttivo "Chi siamo": colonna ristretta (.container--narrow),
   paragrafi di corpo con spaziatura comoda sotto al .page-title. */
.about-intro {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.about-intro p {
    font-size: 1.125rem;        /* 18px — corpo testo pagine interne */
    line-height: 1.66;
    color: var(--color-dark);
}

.about-intro p + p {
    margin-top: 1.5rem;
}

/* Paragrafo "nota" (18px) sotto il testo grande nelle bande intro */
.intro-band__note {
    margin-top: 1.75rem;
    font-size: 1.125rem;  
    max-width: 40ch;
    line-height: 1.66;
    color: var(--color-dark);
}

/* --- Feature: icona line-art centrata su una riga puntinata (3 colonne) --- */
.features {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 3rem;
    margin-bottom: 5rem;        /* stacco prima del banner CTA finale */
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--color-dark);
}

.feature__media {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 96px;
    margin-bottom: 1.5rem;
}

/* la riga attraversa tutta la colonna, centrata in verticale; l'icona sopra
   (con sfondo chiaro) la "interrompe" al centro, come nel design */
.feature__media .rule-dotted {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    max-width: none;
    color: var(--color-dark);
}

.feature__icon {
    position: relative;
    z-index: 1;
    height: 84px;
    width: auto;
    padding: 0 1rem;
    background: var(--color-light);   /* maschera la riga dietro all'icona */
}

.feature__text {
    font-size: 1.125rem;        /* 18px */
    line-height: 1.66;
    color: var(--color-dark);
    max-width: 420px;
}

.feature__text strong { font-weight: 700; }

/* Titolo della feature (sopra al testo) — usato dai "plus" di Chi siamo */
.feature__title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.375rem;        /* 22px */
    line-height: 1.25;
    color: var(--color-dark);
    margin-bottom: 0.6rem;
}

/* Variante a 4 colonne (Chi siamo · "I nostri plus") con stacco dal titolo */
.features--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 2.5rem;
}

/* Blocco servizio (Impiantistica · "I nostri servizi"): titolo + testo + elenco.
   Impilati in colonna di lettura (.container--narrow). */
.svc + .svc { margin-top: 3rem; }

.svc__title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.75rem;         /* 28px — sottotitolo di sezione */
    line-height: 1.2;
    color: var(--color-dark);
    margin-bottom: 1rem;
}

.svc p {
    font-size: 1.125rem;        /* 18px — corpo testo pagine interne */
    line-height: 1.66;
    color: var(--color-dark);
}

.svc p + p,
.svc .check-list + p { margin-top: 1.25rem; }

/* Elenco con spunta teal in badge circolare e righe separate da una sottile
   linea divisoria, per un aspetto ordinato e leggibile (coerente col brand).
   La linea è --color-dark (#22252b → 34,37,43) con alfa: stessa tinta del token,
   resa appena percettibile come filo divisorio. */
.check-list {
    list-style: none;
    margin: 1.5rem 0;
    display: grid;
}

.check-list li {
    position: relative;
    padding: 0.85rem 0 0.85rem 2.75rem;
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--color-dark);
    border-top: 1px solid rgba(34, 37, 43, 0.12);
}

.check-list li:last-child { border-bottom: 1px solid rgba(34, 37, 43, 0.12); }

/* Badge circolare teal */
.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.95rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--color-accent);
}

/* Spunta scura dentro al badge (come il testo dei CTA su teal) */
.check-list li::after {
    content: "";
    position: absolute;
    left: 0.52rem;
    top: 1.4rem;
    width: 0.55rem;
    height: 0.3rem;
    border-left: 2px solid var(--color-dark);
    border-bottom: 2px solid var(--color-dark);
    transform: rotate(-45deg);
}

/* --- Responsive homepage --- */
@media (max-width: 900px) {
    .intro-band { padding: 3rem 0; }

    .intro-band > .container {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .media-row,
    .media-row--reverse {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 2.5rem;
    }

    .media-row--reverse .media-row__media,
    .media-row--reverse .media-row__text { order: initial; }

    /* CTA "Scopri il settore Immobiliare" centrata orizzontalmente su mobile
       (solo il bottone: il paragrafo resta allineato a sinistra) */
    .home-immobiliare .media-row__text .btn {
        display: block;
        width: fit-content;
        margin-inline: auto;
    }

    /* Feature pagine interne: da 3 colonne a 1 (impilate, come nel Figma mobile) */
    .features { grid-template-columns: 1fr; gap: 2rem; }

    /* Hero mobile (design: nodo 1:267) — l'immagine non riempie più tutta
       l'area: è una banda in alto con il titolo sul bordo basso, poi il
       paragrafo e il CTA proseguono su un pannello scuro pieno sotto. */
    .home-hero {
        min-height: 0;
        flex-direction: column;
        justify-content: flex-start;
        background: var(--color-dark);
    }

    .home-hero__slider {
        position: relative;   /* da overlay a banda in flusso */
        height: 56vh;
        min-height: 360px;
    }

    /* Gradiente di raccordo immagine → pannello scuro (design: Rettangolo 28) */
    .home-hero__slider::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 45%;
        background: linear-gradient(to bottom, transparent, var(--color-dark));
        pointer-events: none;
    }

    .home-hero__content {
        width: min(345px, 92%);
        margin-top: -3.5rem;     /* il titolo risale sul bordo basso dell'immagine */
        padding-top: 0;
        padding-bottom: 3.5rem;
        gap: 1.4rem;
    }

    /* Tracciato 42 su mobile (design: nodo 1:320) — non più sovrapposta: esce
       dal posizionamento assoluto e scorre nel flusso SOTTO il contenuto della
       banda. Più larga del viewport con sbordo a sinistra (408px su 375 ≈ 109%,
       -33px ≈ -9%). */
    .decoro-tracciato {
        position: static;
        width: 109%;
        margin-left: -9%;
        margin-top: 2.5rem;
        scale: 1.2;
    }
}

/* Card servizi: 4 colonne solo quando le tracce restano abbastanza larghe per
   il link "Scopri di più" (nowrap ~230px); altrimenti 2, poi 1. */
@media (max-width: 1200px) {
        .decoro-tracciato {
                width: 100%;
            }
    .servizi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .servizi-grid { grid-template-columns: minmax(0, 1fr); }
}

/* "I nostri plus" (Chi siamo): 4 colonne → 2 → 1. Regole esplicite perché la
   specificità di .features--four supera la .features a 1 colonna del blocco 900. */
@media (max-width: 1100px) {
    .features--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .features--four { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width: 900px) {
    :root {
        --fs-hero: 3rem;     /* 48px */
        --fs-h2: 2.5rem;     /* 40px */
        --fs-h3: 1.5rem;     /* 24px */
        --fs-body-lg: 1.25rem;
    }

    /* Header: nav nascosta, icona griglia mobile visibile */
    .main-nav {
        display: none;
    }

    .nav-toggle {
        display: block;
    }

    .site-header__logo img {
        height: 48px;
    }

    /* Footer: blocchi impilati e centrati */
    .site-footer__top {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 2rem;
    }

    .footer-services {
        justify-content: center;
        text-align: left;
    }
}

/* ----------------------------------------------------------
   Pagina Chi siamo (restyling 2026-06-04)
   -----------------------------------------------------------
   Composizione identitaria della pagina /azienda, basata SOLO sui token :root.
   Direzione: blu marchio (--color-brand) protagonista; firma = i tre verbi del
   brand in Luxerie. Classi page-scoped: NESSUNA modifica ai componenti condivisi
   (.page-hero, .intro-band, .features, .cta-banner restano intatti).
   Vedi docs/2026-06-04-Restyling-Pagina-Chi-Siamo.md
   ---------------------------------------------------------- */

/* Eyebrow (etichetta Inter uppercase): blu marchio su chiaro, ciano su scuro */
.about-eyebrow {
    display: block;
    font-family: var(--font-label);
    text-transform: uppercase;
    font-weight: 600;
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
    color: var(--color-brand);
    margin-bottom: 1rem;
}

.about-eyebrow--light { color: var(--color-accent-light); }

/* 1. Hero con titolo: immagine full-bleed + overlay blu marchio + titolo sotto */
.about-hero {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: -2rem;                 /* annulla il padding-top di .site-main */
    min-height: clamp(360px, 46vw, 520px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.about-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay = --color-brand (#003989 → 0,57,137) con alfa, per leggibilità del
   titolo: stessa tinta del token, solo resa semitrasparente come un overlay. */
.about-hero__overlay {
    position: absolute;
    inset: 0;
    /* Velo ridotto: l'immagine resta più visibile (hero più simile alle altre
       pagine), con un minimo di gradiente in basso per la leggibilità del titolo. */
    background: linear-gradient(to top, rgba(0, 57, 137, 0.6), rgba(0, 57, 137, 0.22));
}

.about-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: 6rem;
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    color: var(--color-light);
}

.about-hero__title {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.05;
    color: var(--color-light);
    font-size: clamp(3.625rem, 6vw, var(--fs-hero));   /* 58 → 90px */
}

.about-hero .rule-dotted {
    color: var(--color-accent-light);
    margin-top: 1.5rem;
}

/* Sezioni chiare (intro + plus): respiro verticale coerente fra le bande */
.about-section { padding: clamp(3rem, 6vw, 5rem) 0; }

/* Decoro Tracciato 42 di sfondo nella sezione intro: freccia blu tenue, grande,
   ancorata in basso a sinistra (eco di Home/Immobiliare, ma page-scoped). */
.about-section--decoro { position: relative; overflow: hidden; }
.about-section--decoro > .container { position: relative; z-index: 1; }

.about-decoro {
    position: absolute;
    left: -4%;             /* sborda dal bordo sinistro */
    bottom: 0;
    width: 62%;            /* grande: ~2x rispetto al decoro standard (38%) */
    height: auto;
    z-index: 0;
    pointer-events: none;
}

/* 3. Banda firma: full-bleed blu marchio con i tre verbi (Luxerie) */
.brand-statement {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: var(--color-brand);
    color: var(--color-light);
    padding: clamp(2.5rem, 6vw, 5rem) 0;
}

/* Hairline ciano sopra/sotto il contenuto (inset dal bordo della banda): è il
   token --color-accent-light (#98f3ff → 152,243,255) con alfa, per un filo
   sottile ed elegante, non una linea piena. */
.brand-statement__inner {
    border-top: 1px solid rgba(152, 243, 255, 0.4);
    border-bottom: 1px solid rgba(152, 243, 255, 0.4);
    padding-top: clamp(2.5rem, 5vw, 3.75rem);
    padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.brand-statement__verbs {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.05;
    color: var(--color-light);
    font-size: clamp(2.75rem, 6vw, var(--fs-h2));      /* 44 → 80px */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3em 0.7em;
    margin: 1.5rem 0 0;
}

/* Separatore = puntino ciano fra i verbi (eco della .rule-dotted) */
.brand-statement__sep {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-accent-light);
}

/* Riga puntinata ciano sotto i verbi, più lunga dell'accento di default */
.brand-statement__rule {
    color: var(--color-accent-light);
    width: 100%;
    max-width: 560px;
    margin: 2rem 0 2.5rem;
}

.brand-statement__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 4rem;
    max-width: 1100px;
}

.brand-statement__body p {
    font-size: 1.125rem;               /* 18px — corpo testo, come le altre bande */
    line-height: 1.66;
    color: var(--color-light);
}

/* 4. "I nostri plus": indice numerato 01–04 in blu sopra ogni icona */
.feature__index {
    font-family: var(--font-display);
    font-size: var(--fs-h3);           /* 35px */
    line-height: 1;
    color: var(--color-brand);
    margin-bottom: 0.85rem;
}

/* Responsive Chi siamo */
@media (max-width: 768px) {
    .brand-statement__body {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .brand-statement__verbs { gap: 0.25em 0.5em; }

    .about-hero__content { padding-top: 4rem; }

    /* Decoro più largo e ribassato su mobile, senza sovrastare il testo */
    .about-decoro { width: 96%; left: -8%; }
}

/* ----------------------------------------------------------
   Pagina Contatti (form)
   -----------------------------------------------------------
   Modulo statico: al submit mostra solo un alert (initContactForm in main.js),
   l'invio email verrà collegato in seguito. Stili page-scoped sui token :root;
   bottone = .btn condiviso. Nessun componente condiviso modificato.
   ---------------------------------------------------------- */
.contact-intro { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem); }

.contact-lead {
    font-size: 1.125rem;          /* 18px — corpo pagine interne */
    line-height: 1.66;
    color: var(--color-dark);
    max-width: 760px;
}
.contact-lead + .contact-lead { margin-top: 1.25rem; }

.contact-section { padding: 0 0 clamp(3rem, 6vw, 5rem); }

.contact-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.contact-aside__title {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-brand);
    font-size: clamp(2rem, 3vw, 2.75rem);
    margin-bottom: 1rem;
}
.contact-aside__text {
    font-size: 1.125rem;
    line-height: 1.66;
    color: var(--color-dark);
}

/* Card del form: contenitore bianco con bordo tenue */
.contact-form {
    background: var(--color-white);
    border: 1px solid rgba(34, 37, 43, 0.12);
    border-radius: 10px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
}
.form-field { display: flex; flex-direction: column; }
.form-field--full { grid-column: 1 / -1; }

.form-field label {
    font-family: var(--font-label);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 0.5rem;
}

.form-req { color: var(--color-accent); }

.form-field input,
.form-field select,
.form-field textarea {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-dark);
    background: var(--color-light);
    border: 1px solid rgba(34, 37, 43, 0.18);
    border-radius: 6px;
    padding: 0.7rem 0.85rem;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-field textarea { resize: vertical; min-height: 140px; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(29, 217, 210, 0.18);
}

/* Riga consenso privacy: checkbox + testo in linea */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1.5rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-dark);
}
.form-check input {
    margin-top: 0.15rem;
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
    flex: 0 0 auto;
}

.form-actions { margin-top: 1.75rem; }

/* Honeypot anti-bot: fuori schermo, invisibile agli utenti reali */
.form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Errore di singolo campo */
.form-error {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--font-label);
    font-size: 0.85rem;
    color: #c0392b;
}

.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
    border-color: #c0392b;
}

/* Banner di esito (successo / errore generale) */
.form-alert {
    border-radius: 8px;
    padding: 1rem 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}
.form-alert--ok {
    background: rgba(29, 217, 210, 0.12);
    border: 1px solid var(--color-accent);
    color: var(--color-dark);
}
.form-alert--error {
    background: rgba(192, 57, 43, 0.08);
    border: 1px solid #c0392b;
    color: #8e2a20;
}

@media (max-width: 768px) {
    .contact-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
}