/* --- Caratteri ospitati qui, non su Google ------------------------------
   Prima arrivavano da fonts.googleapis.com: due domini esterni in piu', una
   richiesta bloccante e un salto di rete prima che il testo si potesse
   disegnare. Sono gli stessi file che usa studiolegalegloria.it. */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/PlayfairDisplay-latin.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 600; font-display: swap; src: url('fonts/PlayfairDisplay-italic-latin.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('fonts/Montserrat-latin.woff2') format('woff2'); }

/* Font Awesome: solo i due pesi che il sito usa davvero (fas e fab),
   serviti da qui invece che da cdnjs. */
@font-face { font-family: "Font Awesome 6 Free"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/fa-solid-900.woff2?v=5b7dbe56") format("woff2"); }
@font-face { font-family: "Font Awesome 6 Brands"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/fa-brands-400.woff2?v=57af9532") format("woff2"); }
.fa, .fas, .fa-solid { font-family: "Font Awesome 6 Free"; font-weight: 900; }
.fab, .fa-brands { font-family: "Font Awesome 6 Brands"; font-weight: 400; }
.fa, .fas, .fa-solid, .fab, .fa-brands {
    -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block); font-style: normal; font-variant: normal;
    line-height: 1; text-rendering: auto;
}

/* I trentadue glifi che il sito usa davvero. Il CSS completo di Font
   Awesome pesa 100 KB per darne millecinquecento: qui stanno solo questi,
   scritti a mano come su studiolegalegloria.it. */
.fa-arrow-left::before { content: "\f060"; }
.fa-arrow-right::before { content: "\f061"; }
.fa-ban::before { content: "\f05e"; }
.fa-brain::before { content: "\f5dc"; }
.fa-building-columns::before { content: "\f19c"; }
.fa-chart-line::before { content: "\f201"; }
.fa-check::before { content: "\f00c"; }
.fa-clock::before { content: "\f017"; }
.fa-code-branch::before { content: "\f126"; }
.fa-comment-sms::before { content: "\f7cd"; }
.fa-envelope::before { content: "\f0e0"; }
.fa-envelope-open-text::before { content: "\f658"; }
.fa-file-contract::before { content: "\f56c"; }
.fa-file-invoice::before { content: "\f570"; }
.fa-fingerprint::before { content: "\f577"; }
.fa-layer-group::before { content: "\f5fd"; }
.fa-linkedin-in::before { content: "\f0e1"; }
.fa-location-dot::before { content: "\f3c5"; }
.fa-magnifying-glass::before { content: "\f002"; }
.fa-map-location-dot::before { content: "\f5a0"; }
.fa-map-marker-alt::before { content: "\f3c5"; }
.fa-microchip::before { content: "\f2db"; }
.fa-mobile-screen-button::before { content: "\f3cd"; }
.fa-paperclip::before { content: "\f0c6"; }
.fa-phone::before { content: "\f095"; }
.fa-phone-volume::before { content: "\f2a0"; }
.fa-plus::before { content: "\2b"; }
.fa-rotate-left::before { content: "\f2ea"; }
.fa-scale-balanced::before { content: "\f24e"; }
.fa-search-plus::before { content: "\f00e"; }
.fa-shield-halved::before { content: "\f3ed"; }
.fa-triangle-exclamation::before { content: "\f071"; }
.fa-whatsapp::before { content: "\f232"; }

/*
Theme Name: TruffaPhishing
Theme URI: https://truffaphishing.com
Author: Avv. Alessandro Ripoldi & Avv. Edoardo Gloria
Description: Tema premium per truffaphishing.com — navy + avorio + bronzo,
             Playfair Display + Montserrat, vestito con i contenuti e le immagini
             di truffaphishing.com.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: truffaphishing
*/

/* ===================== VARIABILI ===================== */
:root {
    --ink:         #1b2430;   /* Inchiostro / titoli / sezioni scure */
    --ink-2:       #243140;   /* Inchiostro chiaro */
    --logo-blue:   #0f4070;   /* Blu logo BG Lex */
    --text:        #2a2a2a;   /* Corpo testo */
    --muted:       #6b6b6b;   /* Testo attenuato (4,5:1 sui fondi chiari) */
    --accent:      #816742;   /* Bronzo discreto (4,5:1 sui fondi chiari) */
    --accent-2:    #b89968;   /* Bronzo chiaro */
    --bg:          #ffffff;   /* Bianco */
    --bg-soft:     #f6f4ef;   /* Avorio caldo */
    --bg-soft-2:   #efece4;   /* Avorio piu profondo */
    --border:      rgba(27,36,48,0.10);
    --border-2:    rgba(27,36,48,0.16);
    --heading-font:'Playfair Display', Georgia, 'Times New Roman', serif;
    --body-font:   'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --transition:  all 0.35s cubic-bezier(.4,0,.2,1);
    --header-h:    86px;
}

/* ===================== RESET & BASE ===================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--body-font);
    color: var(--text);
    line-height: 1.75;
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    font-weight: 600;
    line-height: 1.18;
    margin-bottom: 16px;
    color: var(--ink);
    letter-spacing: 0.2px;
}

p { margin-bottom: 14px; }
img { max-width: 100%; display: block; }

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

/* Eyebrow / sezione label */
.eyebrow {
    display: inline-block;
    font-family: var(--body-font);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--accent);
    margin-bottom: 14px;
}

/* ===================== HEADER ===================== */
header {
    /* Niente backdrop-filter: quella proprieta' crea un containing block per i
       discendenti in position:fixed, e il menu a scomparsa insieme al suo
       sfondo restavano confinati nella striscia dell'header — tagliati, e con
       il tocco fuori che non chiudeva nulla. Fondo pieno come su SLG. */
    background: #fff;
    padding: 16px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border);
    transition: box-shadow 0.3s ease, padding 0.3s ease;
}
header.scrolled { box-shadow: 0 6px 28px rgba(27,36,48,0.07); padding: 10px 0; }

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo {
    height: 54px;
    width: auto;
    display: block;
    transition: opacity 0.25s ease, height 0.3s ease;
}
header.scrolled .site-logo { height: 46px; }
.site-logo:hover { opacity: 0.82; }

nav ul, #primary-menu {
    display: flex;
    list-style: none;
    align-items: center;
    margin: 0; padding: 0;
}
nav ul li, #primary-menu li { margin-left: 30px; }

nav ul li a,
#primary-menu li a {
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
    transition: var(--transition);
}

nav ul li a:hover,
nav ul li a.active,
#primary-menu li a:hover,
#primary-menu li.current-menu-item a {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.contact-btn,
#primary-menu li.menu-item-contatti a {
    background: var(--logo-blue);
    color: #fff !important;
    padding: 11px 22px;
    border-radius: 1px;
    font-weight: 600;
    border-bottom: none !important;
    letter-spacing: 1.6px;
}
.contact-btn:hover,
#primary-menu li.menu-item-contatti a:hover {
    background: var(--accent);
    transform: translateY(-1px);
}

/* ===================== DROPDOWN NAV ===================== */
#primary-menu li.menu-item-has-children { position: relative; }
#primary-menu li.menu-item-has-children > a::after { content: ' ▾'; font-size: 9px; vertical-align: middle; opacity: 0.6; }
.sub-menu {
    display: block;          /* override nav ul flex-row */
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 16px 44px rgba(27,36,48,0.13);
    min-width: 230px;
    padding: 8px 0;
    border-radius: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 2000;
}
.sub-menu li { margin-left: 0; }  /* reset nav ul li margin */
.sub-menu::before {
    content: '';
    position: absolute;
    top: -6px; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top: none;
    border-bottom-color: var(--border);
}
.sub-menu::after {
    content: '';
    position: absolute;
    top: -5px; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top: none;
    border-bottom-color: #fff;
}
@media (hover: hover) and (min-width: 821px) {
    #primary-menu li.menu-item-has-children:hover .sub-menu {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }
}
.sub-menu li { display: block; }
.sub-menu li a {
    display: block;
    padding: 10px 22px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    transition: color 0.18s ease, padding-left 0.18s ease;
    border-bottom: none;
}
.sub-menu li a:hover { color: var(--accent); padding-left: 28px; }
/* LP section-level CTA (tipografico, su fondo avorio) */
.lp-section-cta {
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: center;
    margin-top: 64px;
    padding: 36px 24px;
}
.lp-section-cta a {
    font-family: var(--heading-font);
    font-style: italic;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 400;
    color: var(--ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    transition: gap 0.25s ease, color 0.2s ease;
}
.lp-section-cta a i {
    font-style: normal;
    font-size: 13px;
    color: var(--accent);
    transition: transform 0.25s ease;
}
.lp-section-cta a:hover { color: var(--accent); }
.lp-section-cta a:hover i { transform: translateX(6px); }

/* Bridge hover gap between nav item and dropdown */
#primary-menu li.menu-item-has-children::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -30px;
    right: -30px;
    height: 14px; /* covers the calc(100% + 12px) gap */
}

/* Area overview cards */
.areas-overview { padding: 60px 0; background: var(--bg); }
.areas-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 52px;
}
.area-card {
    display: block;
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 2px;
    overflow: hidden;
    background: var(--bg);
    box-shadow: 0 6px 24px rgba(27,36,48,0.05);
    transition: transform 0.38s cubic-bezier(0.4,0,0.2,1), box-shadow 0.38s ease, border-color 0.38s ease;
    position: relative;
}
.area-card { position: relative; overflow: hidden; }
.area-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(.4,0,.2,1); }
.area-card:hover::before { transform: scaleX(1); }
.area-card:hover { transform: translateY(-4px); box-shadow: 0 18px 42px rgba(27,36,48,0.10); border-color: rgba(154,123,79,0.35); }
.area-card-img { height: 200px; background-size: cover; background-repeat: no-repeat; background-position: center; }
.area-card-body { padding: 36px 28px 30px; }
.area-card-icon { font-size: 32px; color: var(--accent); margin-bottom: 20px; line-height: 1; }
.area-card-body h4 { font-family: var(--heading-font); font-size: 26px; font-weight: 500; color: var(--ink); margin: 0 0 10px; line-height: 1.15; }
.area-card-body p { color: var(--muted); font-size: 14.5px; line-height: 1.7; margin: 0 0 18px; }
.area-card-more { color: var(--accent); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; display: inline-flex; align-items: center; gap: 6px; }
.area-card-more i { font-size: 10px; transition: transform 0.3s ease; }
.area-card:hover .area-card-more i { transform: translateX(4px); }
@media (max-width: 900px) { .areas-overview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .areas-overview-grid { grid-template-columns: 1fr; } }

/* Singola pagina area */
.area-detail { padding: 64px 0; background: var(--bg); }
.area-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.area-detail-img { border-radius: 2px; overflow: hidden; border: 1px solid var(--border); }
.area-detail-img .area-card-img { height: 420px; }
.area-back { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 12.5px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; text-decoration: none; margin-bottom: 28px; }
.area-back i { font-size: 11px; transition: transform 0.3s ease; }
.area-back:hover i { transform: translateX(-4px); }
.area-detail-text .area-card-icon { font-size: 28px; margin-bottom: 14px; }
.area-detail-text h2 { font-family: var(--heading-font); font-size: 42px; font-weight: 500; color: var(--ink); margin: 0 0 6px; }
.area-detail-line { width: 44px; height: 1px; background: var(--accent); margin: 18px 0 24px; }
.area-detail-text > p { color: var(--muted); font-size: 16.5px; line-height: 1.85; margin: 0 0 32px; text-align: left; }
.area-topics-detail { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.area-topics-detail li { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--ink); display: flex; gap: 12px; }
.area-topics-detail li span { color: var(--accent); font-weight: 600; width: 220px; flex-shrink: 0; }
.area-detail-cta { margin-top: 36px; margin-bottom: 16px; }
.area-lawyer { display: flex; align-items: center; gap: 20px; }
.area-lawyers-duo { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--border); display: flex; gap: 36px; flex-wrap: wrap; }
.area-lawyer-photo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--border); }
.area-lawyer-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.area-lawyer-info .role { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); font-weight: 600; }
.area-lawyer-info .name { font-family: var(--heading-font); font-size: 20px; color: var(--ink); margin: 3px 0 0; }
@media (max-width: 900px) { .area-detail-grid { grid-template-columns: 1fr; } .area-detail-img .area-card-img { height: 260px; } }

/* ===================== HERO ===================== */
.hero {
    height: 88vh;
    min-height: 600px;
    background-image: linear-gradient(105deg, rgba(22,29,39,0.94) 0%, rgba(22,29,39,0.78) 42%, rgba(27,36,48,0.30) 100%), url('hero-prato.jpg');
    background-size: cover; background-repeat: no-repeat;
    background-position: center 42%;
    position: relative;
    display: flex;
    align-items: center;
    margin-top: var(--header-h);
}
.hero .overlay { display: none; }

.hero-content {
    position: relative;
    z-index: 1;
    color: #fff;
    max-width: 720px;
}
.hero-content .eyebrow { color: var(--accent-2); }

.hero-content h1, .hero-content h2 {
    font-size: 72px;
    line-height: 1.04;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
    color: #fff;
    font-weight: 500;
}
.hero-content h1 span, .hero-content h2 span { color: var(--accent-2); font-style: italic; }

.hero-content .hero-line {
    display: block;
    width: 64px;
    height: 1px;
    background: var(--accent-2);
    margin: 22px 0;
}

.hero-content p {
    font-size: 18px;
    margin-bottom: 36px;
    color: rgba(255,255,255,0.85);
    font-weight: 400;
    max-width: 520px;
    line-height: 1.8;
}

/* ===================== BUTTONS ===================== */
.cta-button {
    display: inline-block;
    background: var(--ink);
    color: #fff;
    padding: 15px 36px;
    border-radius: 1px;
    font-family: var(--body-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    transition: var(--transition);
}
.cta-button:hover {
    color: #fff;
    background: var(--accent);
    transform: translateY(-2px);
}

/* Pulsante primario su bande scure: crema su inchiostro */
.hero .cta-button,
.cta .cta-button,
.article-cta .cta-button {
    background: var(--accent);
    color: #fff;
}
.hero .cta-button:hover,
.cta .cta-button:hover,
.article-cta .cta-button:hover {
    background: #fff;
    color: var(--ink);
}

.secondary-button {
    display: inline-block;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--border-2);
    padding: 13px 30px;
    border-radius: 1px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11.5px;
    transition: var(--transition);
}
.secondary-button:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--accent);
    font-family: var(--body-font);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 16px;
    transition: var(--transition);
}
.read-more::after { content: '→'; transition: var(--transition); }
.read-more:hover { color: var(--ink); gap: 11px; }

/* Titolo di sezione + hairline */
.section-title {
    text-align: center;
    font-size: 42px;
    color: var(--ink);
    margin-bottom: 52px;
}
.hairline::after,
.services h3::after, .specialization h3::after,
.testimonials h3::after, .latest-news h3::after, .cta h3::after,
.values-section h3::after, .team-section h3::after,
.service-text h3::after, .specialization-text h3::after,
.contact-info h2::after, .contact-info h3::after, .contact-form-box h2::after, .contact-form-box h3::after,
.intro-content h3::after {
    content: '';
    display: block;
    width: 56px;
    height: 1px;
    background: var(--accent);
    margin: 16px auto 0;
}
.service-text h3::after, .specialization-text h3::after,
.contact-info h2::after, .contact-info h3::after, .contact-form-box h2::after, .contact-form-box h3::after { margin: 16px 0 0; }

/* ===================== INTRO ===================== */
.intro { padding: 60px 0 48px; background: var(--bg); }
.intro.intro-tight { padding-top: 44px; padding-bottom: 18px; }
.intro-content { max-width: 800px; margin: 0 auto; text-align: center; }
.intro-content .eyebrow { color: var(--accent); }
.intro-content h3 { font-size: 42px; color: var(--ink); margin-bottom: 22px; }
.intro-content p { font-size: 18px; color: var(--muted); line-height: 1.9; text-align: left; }

/* ===================== SERVICES ===================== */
.services { padding: 64px 0; background: var(--bg-soft); }
.services h3 { text-align: center; font-size: 42px; color: var(--ink); margin-bottom: 12px; }
.services > .container > .eyebrow { display: block; text-align: center; }
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 26px;
    margin-top: 52px;
}

.service-card {
    background: var(--bg);
    padding: 42px 34px 34px;
    border: 1px solid var(--border);
    border-radius: 2px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transition: var(--transition);
    transform-origin: left;
}
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 50px rgba(27,36,48,0.1);
    border-color: transparent;
}
.service-card:hover::before { transform: scaleX(1); }

.service-card .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    background: var(--bg-soft);
    border-radius: 50%;
    margin-bottom: 24px;
    transition: var(--transition);
}
.service-card:hover .icon { background: var(--ink); }
.service-card .icon i { font-size: 22px; color: var(--accent); transition: var(--transition); }
.service-card:hover .icon i { color: #fff; }

.service-card h4 { font-size: 24px; margin-bottom: 12px; color: var(--ink); }
.service-card p { color: var(--muted); font-size: 15.5px; text-align: left; }
.service-card .read-more { margin-top: auto; padding-top: 22px; }
.services-cta { text-align: center; margin-top: 48px; }

/* ===================== SPECIALIZZAZIONI (home) ===================== */
.specialization { padding: 64px 0; background: var(--bg); }
.specialization h3 { text-align: center; font-size: 42px; color: var(--ink); margin-bottom: 12px; }
.specialization > .container > .eyebrow { display: block; text-align: center; }
.specialization-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 24px;
    margin-top: 52px;
}
.specialization-card {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 40px 28px 34px;
    border-radius: 2px;
    transition: var(--transition);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.specialization-card:hover {
    background: var(--ink);
    border-color: var(--ink);
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(27,36,48,0.14);
}
.specialization-icon { display: block; margin-bottom: 22px; transition: var(--transition); }
.specialization-card:hover .specialization-icon { transform: translateY(-3px); }
.specialization-icon i { font-size: 34px; color: var(--accent); }
.specialization-card:hover .specialization-icon i { color: var(--accent-2); }
.specialization-card h4 { font-size: 22px; margin-bottom: 10px; color: var(--ink); transition: var(--transition); }
.specialization-card:hover h4 { color: #fff; }
.specialization-card p { color: var(--muted); font-size: 14.5px; transition: var(--transition); }
.specialization-card:hover p { color: rgba(255,255,255,0.7); }
.specialization-card .read-more { margin-top: auto; padding-top: 18px; }
.specialization-card:hover .read-more { color: var(--accent-2); }
.specialization-cta { text-align: center; margin-top: 48px; }

/* ===================== AREE DI ATTIVITA (fasce alternate) ===================== */
.areas { background: var(--bg-soft); padding: 64px 0; }
.areas-head { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.areas-head .eyebrow { display: block; }
.areas-head h3 { font-size: 42px; color: var(--ink); margin-bottom: 14px; line-height: 1.1; }
.areas-head p { color: var(--muted); font-size: 17px; line-height: 1.75; margin: 0; }

.area-band { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.area-band:nth-child(even) { background: var(--bg-soft); }
.area-media { min-height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; }
.area-band.flip .area-media { order: 2; }
.area-text {
    padding: 52px 6%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 660px;
}
.area-band:not(.flip) .area-text { margin-left: auto; }
.area-num { display: none; }
.area-text h4 { font-size: 30px; font-weight: 500; color: var(--ink); margin-bottom: 10px; line-height: 1.12; }
.area-text > p { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin-bottom: 18px; text-align: left; }

/* elenco puntato elegante delle sotto-materie — sempre su due colonne, compatto */
.area-topics { list-style: none; margin: 0; columns: 2; column-gap: 36px; }
.area-topics li {
    position: relative;
    padding: 7px 0 7px 22px;
    font-family: var(--body-font);
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-2);
    break-inside: avoid;
}
.area-topics li::before {
    content: '';
    position: absolute;
    left: 0; top: 12px;
    width: 5px; height: 5px;
    border: 1px solid var(--accent);
    transform: rotate(45deg);
    transition: var(--transition);
}
.area-topics li:hover::before { background: var(--accent); }

/* Link "Scopri di più" nelle area-band della homepage */
.area-band-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    font-family: var(--body-font);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 2px;
    transition: color 0.2s ease, gap 0.2s ease;
}
.area-band-link i { font-size: 11px; transition: transform 0.2s ease; }
.area-band-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.area-band-link:hover i { transform: translateX(3px); }

@media (max-width: 900px) {
    .areas { padding-top: 48px; }
    .areas-head { margin-bottom: 34px; }
    .areas-head h3 { font-size: 32px; }
    .area-band, .area-band.flip { grid-template-columns: 1fr; }
    .area-band.flip .area-media { order: 0; }
    .area-media { min-height: 240px; }
    .area-text { padding: 40px 8% 46px; max-width: none; margin: 0; }
    .area-text h4 { font-size: 26px; }
    .area-topics { column-gap: 24px; }
}

/* ===================== AREAS ICON GRID (HOME) ===================== */
.areas-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 52px;
}
.area-icon-card {
    display: flex;
    flex-direction: column;
    padding: 40px 32px 32px;
    border: 1px solid var(--border-2);
    background: var(--bg);
    text-decoration: none;
    color: var(--ink);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.area-icon-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}
.area-icon-card:hover::before { transform: scaleX(1); }
.area-icon-card:hover { background: #fff; border-color: rgba(154,123,79,0.35); color: var(--ink); }
.aic-icon {
    font-size: 32px;
    color: var(--accent);
    margin-bottom: 22px;
    line-height: 1;
}
.area-icon-card h4 {
    font-family: var(--heading-font);
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--ink);
    line-height: 1.2;
}
.area-icon-card p {
    font-size: 14.5px;
    color: var(--muted);
    line-height: 1.72;
    flex: 1;
    margin: 0 0 26px;
    text-align: left;
}
.aic-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--accent);
    transition: gap 0.25s ease;
}
.area-icon-card:hover .aic-link { gap: 11px; }
.aic-link i { font-size: 10px; }

@media (max-width: 900px) {
    .areas-icon-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .areas-icon-grid { grid-template-columns: 1fr; gap: 12px; }
    .area-icon-card { padding: 32px 24px 26px; }
}

/* ===================== PERCHE SCEGLIERCI ===================== */
.why-us { padding: 64px 0; background: var(--bg-soft); }
.why-us .eyebrow { color: var(--accent); }
.why-us-head { text-align: center; max-width: 600px; margin: 0 auto 52px; }
.why-us-head h3 { font-size: 42px; color: var(--ink); margin-bottom: 16px; line-height: 1.1; }
.why-lead { color: var(--muted); font-size: 16.5px; line-height: 1.7; margin: 0; text-align: left; }

.why-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0 40px;
    max-width: 1080px;
    margin: 0 auto;
}
.why-item {
    border-top: 1.5px solid var(--accent);
    padding: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.why-num { display: none; }
.why-text h4 { font-family: var(--heading-font); font-size: 23px; font-weight: 500; color: var(--ink); margin: 0 0 8px; line-height: 1.2; }
.why-text p { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0; }
.why-cta-wrap { text-align: center; margin-top: 52px; }

@media (max-width: 900px) {
    .why-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 32px; }
}
@media (max-width: 600px) {
    .why-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ===================== TESTIMONIAL ===================== */
.testimonials { padding: 72px 0; background: var(--bg); position: relative; overflow: hidden; }
.testimonials::before {
    content: '\201C';
    position: absolute;
    top: 10px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--heading-font);
    font-size: 240px;
    color: rgba(154,123,79,0.1);
    line-height: 1;
    pointer-events: none;
}
.testimonials h3 { text-align: center; font-size: 36px; color: var(--ink); margin-bottom: 48px; }
.testimonial { max-width: 760px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.quote { font-family: var(--heading-font); font-size: 27px; font-style: italic; margin-bottom: 24px; line-height: 1.55; color: var(--ink); }
.quote::before { display: none; }
.client { font-family: var(--body-font); font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 2px; font-size: 12px; }

/* ===================== STATS STRIP (Opzione A) ===================== */
.stats-strip { padding: 48px 0; background: var(--ink); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stat-item { text-align: center; padding: 24px 20px; border-right: 1px solid rgba(255,255,255,0.1); }
.stat-item:last-child { border-right: none; }
.stat-num { display: block; font-family: var(--heading-font); font-size: 38px; font-weight: 600; color: var(--accent-2); line-height: 1; margin-bottom: 10px; }
.stat-num--sm { font-size: 22px; letter-spacing: 0.5px; }
.stat-label { display: block; font-family: var(--body-font); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.55); }

/* ===================== CREDENTIALS (Opzione B) ===================== */
.credentials { padding: 64px 0; background: var(--bg-soft); }
.credentials-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.credential-item { display: flex; align-items: flex-start; gap: 16px; padding: 24px 20px; background: var(--bg); border: 1px solid var(--border-2); }
.cred-icon { font-size: 22px; color: var(--accent); margin-top: 2px; flex-shrink: 0; }
.cred-text { display: flex; flex-direction: column; gap: 4px; }
.cred-text strong { font-family: var(--body-font); font-size: 14px; font-weight: 600; color: var(--ink); }
.cred-text span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

@media (max-width: 768px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-item:nth-child(2) { border-right: none; }
    .stat-item:nth-child(1), .stat-item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.1); }
    .credentials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .stat-item:last-child { border-bottom: none; }
    .credentials-grid { grid-template-columns: 1fr; }
}

/* ===================== NEWS ===================== */
.latest-news { padding: 64px 0; background: var(--bg-soft); }
.latest-news h3 { text-align: center; font-size: 42px; color: var(--ink); margin-bottom: 12px; }
.latest-news > .container > .eyebrow { display: block; text-align: center; }
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 26px;
    margin-top: 52px;
}
.news-card {
    background: var(--bg);
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
}
.news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(27,36,48,0.1);
    border-color: transparent;
}
/* Rende l'intera card cliccabile tramite il link del titolo */
.news-card h2 a::after, .news-card h3 a::after, .news-card h4 a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.news-card .read-more { position: relative; z-index: 2; }
.news-image {
    height: 220px;
    background-color: var(--bg-soft-2);
    background-size: cover; background-repeat: no-repeat;
    background-position: center;
}
.news-content { padding: 28px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.date {
    display: block;
    font-family: var(--body-font);
    font-size: 12px;
    color: var(--accent);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-weight: 600;
}
.news-content h2, .news-content h3, .news-content h4 { font-size: 22px; margin-bottom: 10px; color: var(--ink); line-height: 1.28; }
.news-content h2 a, .news-content h3 a, .news-content h4 a { color: var(--ink); }
.news-content h2 a:hover, .news-content h3 a:hover, .news-content h4 a:hover { color: var(--accent); }

/* Articolo singolo in evidenza: card orizzontale centrata */
.news-grid:has(.news-card:only-child) { grid-template-columns: 1fr; max-width: 880px; margin-left: auto; margin-right: auto; }
.news-grid:has(.news-card:only-child) .news-card { flex-direction: row; }
.news-grid:has(.news-card:only-child) .news-image { flex: 0 0 44%; height: auto; min-height: 280px; }
.news-grid:has(.news-card:only-child) .news-content { justify-content: center; padding: 36px 40px; }
@media (max-width: 720px) {
    .news-grid:has(.news-card:only-child) .news-card { flex-direction: column; }
    .news-grid:has(.news-card:only-child) .news-image { flex: none; min-height: 0; height: 220px; }
}
.news-content p { color: var(--muted); font-size: 14.5px; }
.news-content .read-more { margin-top: auto; padding-top: 18px; }
.news-alllink { text-align: center; margin-top: 44px; }

/* ===================== CTA BAND ===================== */
.cta { padding: 72px 0; background: var(--ink); position: relative; overflow: hidden; }
.cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(154,123,79,0.22) 0%, transparent 55%);
    pointer-events: none;
}
.cta-content { max-width: 780px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.cta h3 { font-size: 40px; color: #fff; margin-bottom: 18px; }
.cta h3::after { background: var(--accent-2); }
.cta p { font-size: 18px; margin-bottom: 34px; color: rgba(255,255,255,0.75); }

/* ===================== ARTICLE CTA ===================== */
.article-cta { padding: 90px 0; background: var(--ink); text-align: center; }
.article-cta h2, .article-cta h3 { font-family: var(--heading-font); font-size: clamp(24px, 3vw, 34px); font-weight: 400; color: #fff; margin-bottom: 12px; line-height: 1.3; }
.article-cta h2 strong, .article-cta h3 strong { font-weight: 600; color: var(--accent-2); }
.article-cta p { font-family: var(--body-font); font-size: 15px; color: rgba(255,255,255,0.7); margin-bottom: 34px; }

/* ===================== FOOTER ===================== */
footer { background: var(--ink); color: #fff; padding: 70px 0 24px; }
.footer-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin: 0 auto 48px;
    align-items: start;
    max-width: 860px;
}
.footer-col--brand .footer-logo-img { max-width: 160px; width: auto; margin-bottom: 28px; display: block; }
.footer-contact-list { list-style: none; padding: 0; margin: 0; }
.footer-contact-list li { color: rgba(255,255,255,0.65); font-size: 14.5px; line-height: 1.45; margin-bottom: 7px; display: flex; align-items: flex-start; gap: 10px; }
.footer-contact-list li a { color: rgba(255,255,255,0.65); text-decoration: none; }
.footer-contact-list li a:hover { color: var(--accent-2); }
.footer-contact-list li i { color: var(--accent); font-size: 14px; width: 16px; flex-shrink: 0; margin-top: 3px; }
.footer-col h2, .footer-col h3, .footer-col h4 { font-family: var(--body-font); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: var(--accent-2); margin: 0 0 15px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 7px; line-height: 1.45; }
.footer-col ul li a { color: rgba(255,255,255,0.65); font-size: 14.5px; text-decoration: none; transition: color 0.2s; line-height: 1.45; }
.footer-col ul li a:hover { color: var(--accent-2); }
/* legacy — kept for compatibility */
.footer-logo img { height: auto; width: 100%; max-width: 120px; margin-bottom: 18px; display: block; }
.footer-logo-img { background: #fff; padding: 0; border-radius: 2px; max-width: 120px; box-sizing: content-box; }
.footer-logo p { font-size: 15px; color: rgba(255,255,255,0.5); margin: 0; line-height: 1.7; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.link-column h2, .link-column h3, .link-column h4 {
    font-family: var(--body-font);
    font-size: 12px;
    margin-bottom: 20px;
    color: var(--accent-2);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}
.link-column ul { list-style: none; padding: 0; margin: 0; }
.link-column ul li { margin-bottom: 11px; color: rgba(255,255,255,0.6); font-size: 14.5px; }
.link-column ul li a { color: rgba(255,255,255,0.6); font-size: 14.5px; }
.link-column ul li a:hover { color: var(--accent-2); }
.link-column ul li i { margin-right: 9px; color: var(--accent); }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-bottom p { font-size: 13px; color: rgba(255,255,255,0.55); margin: 0; }
.footer-col--brand .social-links { display: flex; justify-content: flex-start; gap: 20px; padding-left: 26px; }
.social-links a { color: rgba(255,255,255,0.55); font-size: 16px; margin-left: 16px; }
.footer-col--brand .social-links a { margin-left: 0; }
.social-links a:hover { color: var(--accent-2); }

/* ===================== PAGE HEADER (interne) ===================== */
.page-header {
    height: 42vh;
    min-height: 320px;
    background-image: linear-gradient(120deg, rgba(27,36,48,0.88) 0%, rgba(27,36,48,0.66) 100%), url('hero-palazzo-bo.jpg');
    background-size: cover; background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: var(--header-h);
}
.page-header .overlay { display: none; }
.page-header .container { position: relative; z-index: 1; color: #fff; }
.page-header h1, .page-header h2 { font-size: 52px; margin-bottom: 12px; color: #fff; font-weight: 500; }
.page-header h1::after, .page-header h2::after { content: ''; display: block; width: 56px; height: 1px; background: var(--accent-2); margin: 16px auto 0; }
.page-header p { font-size: 17px; color: rgba(255,255,255,0.78); margin: 0; }

/* ===================== PAGINE DETTAGLIO (servizi/aree) ===================== */
.service-intro, .specialization-intro { padding: 90px 0 30px; background: var(--bg); }
.service-intro .intro-content, .specialization-intro .intro-content { max-width: 820px; }

.service-detail, .specialization-detail { padding: 80px 0; }
.service-detail:nth-of-type(odd), .specialization-detail:nth-of-type(odd) { background: var(--bg); }
.service-detail:nth-of-type(even), .specialization-detail:nth-of-type(even) { background: var(--bg-soft); }

.service-content, .specialization-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.alternate .service-content, .alternate .specialization-content { direction: rtl; }
.alternate .service-text, .alternate .specialization-text { direction: ltr; }

.service-icon, .specialization-detail .specialization-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    background: var(--bg-soft);
    border-radius: 50%;
    margin-bottom: 22px;
}
.service-detail:nth-of-type(even) .service-icon,
.specialization-detail:nth-of-type(even) .specialization-icon { background: var(--bg); }
.service-icon i, .specialization-detail .specialization-icon i { font-size: 26px; color: var(--accent); }

.service-text h3, .specialization-text h3 { font-size: 38px; color: var(--ink); margin-bottom: 16px; }
.service-text h4, .specialization-text h4 {
    font-family: var(--body-font);
    font-size: 13px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 28px 0 16px;
    font-weight: 600;
}
.service-text p, .specialization-text p { color: var(--muted); font-size: 16px; margin-bottom: 12px; text-align: left; }
.service-text ul, .specialization-text ul { list-style: none; margin-bottom: 30px; }
.service-text ul li, .specialization-text ul li {
    margin-bottom: 13px;
    font-size: 15.5px;
    padding-left: 24px;
    position: relative;
    color: var(--muted);
}
.service-text ul li::before, .specialization-text ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 12px;
    width: 12px; height: 1px;
    background: var(--accent);
}
.service-text ul li span, .specialization-text ul li span { color: var(--ink); font-weight: 600; }

.service-image, .specialization-image {
    min-height: 440px;
    background-color: var(--bg-soft-2);
    background-size: cover; background-repeat: no-repeat;
    background-position: center;
    border-radius: 2px;
    position: relative;
}
.service-image::after, .specialization-image::after {
    content: '';
    position: absolute;
    inset: 12px -12px -12px 12px;
    border: 1px solid var(--border-2);
    z-index: -1;
}
.alternate .service-image::after, .alternate .specialization-image::after { inset: 12px 12px -12px -12px; }
.service-cta, .specialization-cta { margin-top: 30px; }

/* ===================== VALORI ===================== */
.values-section { padding: 64px 0; background: var(--bg); }
.values-section h3 { text-align: center; font-size: 42px; color: var(--ink); margin-bottom: 12px; }
.values-section > .container > .eyebrow { display: block; text-align: center; }
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 24px;
    margin-top: 52px;
}
.value-card {
    text-align: center;
    padding: 40px 24px;
    border-radius: 2px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    transition: var(--transition);
}
.value-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(27,36,48,0.08); border-color: transparent; }
.value-card i { font-size: 30px; color: var(--accent); margin-bottom: 18px; display: block; }
.value-card h4 { font-size: 21px; color: var(--ink); margin-bottom: 8px; }
.value-card p { font-size: 14px; color: var(--muted); margin: 0; }

/* ===================== NUMERI ===================== */
.numbers-section { padding: 90px 0; background: var(--ink); }
.numbers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}
.number-item { display: flex; flex-direction: column; align-items: center; }
.number-item .num { font-family: var(--heading-font); font-size: 70px; font-weight: 600; color: var(--accent-2); line-height: 1; margin-bottom: 12px; }
.number-item h4 { font-family: var(--body-font); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.6px; color: #fff; margin-bottom: 6px; }
.number-item p { font-size: 13px; color: rgba(255,255,255,0.55); margin: 0; max-width: 200px; }
@media (max-width: 640px) { .numbers-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ===================== TEAM ===================== */
.team-section { padding: 8px 0 90px; background: var(--bg); }
.team-section h3 { text-align: center; font-size: 42px; color: var(--ink); margin-bottom: 12px; }
.team-section > .container > .eyebrow { display: block; text-align: center; }
.team-grid-duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 38px;
    max-width: 840px;
    margin: 32px auto 0;
}
.team-member-card {
    display: block;
    text-decoration: none;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(27,36,48,0.06);
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.team-member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 52px rgba(27,36,48,0.14);
    border-color: rgba(154,123,79,0.45);
}
.team-photo-bg {
    aspect-ratio: 3 / 4;
    background-size: cover; background-repeat: no-repeat;
    background-position: center top;
}
.team-name-band {
    padding: 24px 26px 26px;
    text-align: center;
    background: #fff;
    border-top: 1px solid var(--border);
}
.team-name-band h4 { color: var(--ink); font-family: var(--heading-font); font-size: 26px; margin: 0 0 7px; font-weight: 600; }
.team-name-band .team-role-tag { color: var(--accent); font-family: var(--body-font); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }
.team-card-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--accent); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }
.team-card-more i { font-size: 11px; transition: transform 0.35s ease; }
.team-member-card:hover .team-card-more i { transform: translateX(5px); }

/* ===================== PROFILO PROFESSIONISTA ===================== */
.profile { padding: 64px 0; background: var(--bg); }
.profile-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 58px; align-items: start; max-width: 1060px; margin: 0 auto; }
.profile-photo { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; box-shadow: 0 14px 38px rgba(27,36,48,0.09); }
.profile-photo .team-photo-bg { aspect-ratio: 3 / 4; }
.profile-back { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 12.5px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; margin-bottom: 24px; text-decoration: none; }
.profile-back i { font-size: 11px; transition: transform 0.3s ease; }
.profile-back:hover i { transform: translateX(-4px); }
.profile-role { display: block; color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; margin-bottom: 12px; }
.profile-name { font-family: var(--heading-font); font-size: 42px; color: var(--ink); margin: 0 0 18px; line-height: 1.05; }
.profile-line { width: 48px; height: 1px; background: var(--accent); margin-bottom: 28px; }
.profile-body p { color: var(--muted); font-size: 16.5px; line-height: 1.85; margin: 0 0 18px; text-align: left; }
.profile-body p.lead { color: var(--muted); }
.profile-meta { margin-top: 30px; border-top: 1px solid var(--border); padding-top: 26px; display: grid; grid-template-columns: max-content 1fr; gap: 16px 18px; align-items: start; }
.profile-meta div { display: contents; }
.profile-meta div > span:last-child { font-size: 15.5px; color: var(--ink); line-height: 1.6; }
.profile-meta .pm-label { color: var(--accent); font-weight: 600; min-width: 120px; text-transform: uppercase; font-size: 11.5px; letter-spacing: 1px; padding-top: 3px; white-space: nowrap; }
.profile-contact { margin-top: 32px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.profile-linkedin { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; text-decoration: none; border: 1px solid var(--border); border-radius: 2px; padding: 12px 20px; transition: var(--transition); }
.profile-linkedin i { color: #0a66c2; font-size: 15px; }
.profile-linkedin:hover { border-color: #0a66c2; color: #0a66c2; background: rgba(10,102,194,0.04); }
@media (max-width: 860px) {
    .profile-grid { grid-template-columns: 1fr; gap: 34px; max-width: 560px; }
    .profile-name { font-size: 34px; }
}

/* ===================== CONTATTI ===================== */
.contact-section { padding: 64px 0; background: var(--bg); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: start; }
.contact-info h2, .contact-info h3, .contact-form-box h2, .contact-form-box h3 { font-family: var(--heading-font); font-weight: 600; font-size: 36px; color: var(--ink); margin-bottom: 14px; }
.contact-info > p { font-size: 16px; color: var(--muted); margin-bottom: 30px; text-align: left; }
.contact-detail { display: flex; align-items: flex-start; margin-bottom: 22px; font-size: 15.5px; }
.contact-detail i { color: var(--accent); font-size: 18px; margin-right: 16px; margin-top: 3px; min-width: 20px; }
.contact-detail strong { display: block; color: var(--ink); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; font-weight: 600; }
.contact-detail a { color: var(--muted); }
.contact-detail a:hover { color: var(--accent); }

.contact-form-box { background: var(--bg-soft); padding: 44px 42px; border-radius: 2px; border: 1px solid var(--border); }

/* Form generico */
.contact-form label, .cf7-wrapper .wpcf7-form label {
    display: block;
    font-family: var(--body-font);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 7px;
    margin-top: 18px;
    color: var(--ink);
}
.contact-form input, .contact-form select, .contact-form textarea,
.cf7-wrapper .wpcf7-form input[type="text"],
.cf7-wrapper .wpcf7-form input[type="email"],
.cf7-wrapper .wpcf7-form input[type="tel"],
.cf7-wrapper .wpcf7-form select,
.cf7-wrapper .wpcf7-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-2);
    border-radius: 1px;
    font-family: var(--body-font);
    font-size: 14px;
    color: var(--text);
    background: #fff;
    transition: var(--transition);
    box-sizing: border-box;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus,
.cf7-wrapper .wpcf7-form input:focus,
.cf7-wrapper .wpcf7-form select:focus,
.cf7-wrapper .wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(154,123,79,0.12);
}
.contact-form textarea, .cf7-wrapper .wpcf7-form textarea { height: 140px; resize: vertical; }
.contact-form button, .cf7-wrapper .wpcf7-form .wpcf7-submit {
    display: inline-block;
    margin-top: 24px;
    background: var(--ink);
    color: #fff;
    border: none;
    padding: 15px 36px;
    border-radius: 1px;
    font-family: var(--body-font);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: var(--transition);
}
.contact-form button:hover, .cf7-wrapper .wpcf7-form .wpcf7-submit:hover { background: var(--accent); transform: translateY(-2px); }
.cf7-wrapper .wpcf7-not-valid-tip { color: #c0392b; font-size: 12px; margin-top: 4px; }
.cf7-wrapper .wpcf7-response-output { margin-top: 20px; padding: 12px 16px; border-radius: 2px; font-size: 13px; border: none !important; }
.cf7-wrapper .wpcf7-mail-sent-ok { background: rgba(39,174,96,0.12); color: #27ae60; }
.cf7-wrapper .wpcf7-validation-errors, .cf7-wrapper .wpcf7-mail-sent-ng { background: rgba(192,57,43,0.08); color: #c0392b; }

.map-wrap { margin-top: 0; }
.map-wrap iframe { width: 100%; height: 380px; border: 0; display: block; filter: grayscale(0.2) contrast(0.95); }

/* ===================== ARTICOLO ===================== */
.article-page-header {
    position: relative;
    min-height: 440px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 56px;
    overflow: hidden;
    margin-top: var(--header-h);
}
.article-page-header .overlay { display: block; position: absolute; inset: 0; background: linear-gradient(to top, rgba(27,36,48,0.92) 0%, rgba(27,36,48,0.45) 60%, rgba(27,36,48,0.3) 100%); z-index: 1; }
.article-hero-image { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; background-position: center; filter: brightness(0.6); }
.article-page-header .container { text-align: center; width: 100%; position: relative; z-index: 2; }
.article-title { color: #fff; font-family: var(--heading-font); font-size: clamp(28px, 4vw, 50px); font-weight: 500; max-width: 880px; line-height: 1.18; margin: 0 auto; }
.article-back { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.78); font-family: var(--body-font); font-size: 12.5px; text-transform: uppercase; letter-spacing: 1.6px; text-decoration: none; margin-bottom: 22px; transition: var(--transition); }
.article-back:hover { color: var(--accent-2); }
.article-meta-date { display: block; margin-top: 20px; color: var(--accent-2); font-family: var(--body-font); font-size: 13px; text-transform: uppercase; letter-spacing: 2px; }
.article-body-wrapper { padding: 64px 0 64px; background: var(--bg); }
.article-content { font-family: var(--body-font); font-size: 17px; line-height: 1.72; color: var(--text); max-width: 800px; margin: 0 auto; }
.article-content h2 { font-family: var(--heading-font); font-size: 30px; color: var(--ink); margin: 52px 0 18px; font-weight: 600; }
.article-content h2:first-child { margin-top: 0; }
.article-content h2::after { content: ''; display: block; width: 36px; height: 1px; background: var(--accent); margin-top: 12px; }
.article-content h3 { font-family: var(--heading-font); font-size: 25px; color: var(--ink); margin: 46px 0 16px; font-weight: 600; }
.article-content h3:first-child { margin-top: 0; }
.article-content h4 { font-family: var(--heading-font); font-size: 21px; color: var(--ink); margin: 38px 0 14px; font-weight: 600; }
.article-content p { margin-bottom: 20px; text-align: left; }
.article-content p.lead { font-size: inherit; line-height: inherit; color: inherit; font-weight: inherit; margin-bottom: 20px; padding-bottom: 0; }
.article-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-clipping { margin: 40px 0 8px; display: flex; flex-direction: column; gap: 18px; }
.article-clipping img { width: 100%; height: auto; display: block; border: 1px solid var(--border); box-shadow: 0 18px 44px rgba(27,36,48,0.12); }
.article-clipping figcaption { font-family: var(--body-font); font-size: 13px; color: var(--muted); text-align: center; margin-top: 4px; }
.article-content ul { padding-left: 0; list-style: none; margin-bottom: 24px; }
.article-content ul li { padding: 6px 0 6px 24px; position: relative; }
.article-content ul li::before { content: ''; position: absolute; left: 0; top: 16px; width: 12px; height: 1px; background: var(--accent); }
.article-content strong { color: var(--ink); font-weight: 600; }
.article-date-footer { max-width: 800px; margin: 44px auto 0; font-family: var(--body-font); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.6px; padding-top: 32px; border-top: 1px solid var(--border); text-align: right; }

.related-section { padding: 70px 0 90px; background: var(--bg-soft); }
.related-articles > .container > h2, .related-articles > h2 { font-family: var(--heading-font); font-size: 30px; color: var(--ink); margin-bottom: 32px; }
.related-articles > .container > h2::after, .related-articles > h2::after { content: ''; display: block; width: 36px; height: 1px; background: var(--accent); margin-top: 12px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.related-card { background: var(--bg); padding: 26px 24px; border: 1px solid var(--border); border-top: 2px solid var(--accent); text-decoration: none; display: block; transition: var(--transition); }
.related-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(27,36,48,0.1); }
.related-card .rc-cat { font-family: var(--body-font); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); display: block; margin-bottom: 10px; }
.related-card h3, .related-card h4 { font-family: var(--heading-font); font-size: 19px; color: var(--ink); line-height: 1.35; margin: 0 0 10px; font-weight: 600; }
.related-card .rc-date { font-family: var(--body-font); font-size: 13px; color: var(--muted); }

/* archivio news */
.news-archive { padding: 90px 0; background: var(--bg); }
.pagination-wrap { text-align: center; margin-top: 56px; }
.pagination-wrap .page-numbers { padding: 9px 15px; margin: 0 3px; border: 1px solid var(--border-2); color: var(--ink); font-size: 14px; }
.pagination-wrap .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination-wrap .page-numbers:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ===================== FLOATING CONTACT ===================== */
.floating-contact {
    position: fixed; right: 0; z-index: 9999;
    /* La quota di partenza e' 110px, ma finche' il banner dei cookie e'
       aperto i pulsanti salgono sopra di lui. L'altezza del banner la misura
       il JS e la scrive in --tp-cookie-h: cambia con la larghezza dello
       schermo e con la lunghezza del testo, quindi un valore fisso reggerebbe
       su un telefono solo. */
    bottom: calc(110px + var(--tp-cookie-h, 0px));
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.floating-btn {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--ink);
    color: #fff;
    text-decoration: none;
    height: 52px;
    width: 52px;
    border-radius: 3px 0 0 3px;
    overflow: hidden;
    box-shadow: -3px 4px 16px rgba(0,0,0,0.2);
    transition: width 0.38s cubic-bezier(0.4,0,0.2,1), background 0.3s ease;
}
.floating-btn:hover { width: 175px; color: #fff; background: var(--accent); }
.floating-btn i { position: absolute; right: 0; width: 52px; font-size: 18px; text-align: center; pointer-events: none; }
.floating-btn span { font-family: var(--body-font); font-size: 12px; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase; white-space: nowrap; padding-left: 16px; opacity: 0; transition: opacity 0.15s ease; }
.floating-btn:hover span { opacity: 1; transition: opacity 0.22s ease 0.2s; }
@media (max-width: 640px) {
    .floating-contact { bottom: calc(80px + var(--tp-cookie-h, 0px)); }
    .floating-btn { height: 46px; width: 46px; }
    .floating-btn i { width: 46px; font-size: 16px; }
    .floating-btn:hover { width: 158px; }
}

/* ===================== MOBILE NAV TOGGLE ===================== */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; flex-direction: column; align-items: center; justify-content: center; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--ink); margin: 5px 0; transition: var(--transition); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 992px) {
    .why-item { padding-top: 20px; gap: 8px; }
    .footer-content { grid-template-columns: 1fr; gap: 40px; }
    .service-content, .specialization-content { grid-template-columns: 1fr; gap: 40px; }
    .service-image, .specialization-image { min-height: 300px; order: -1; }
    .service-image::after, .specialization-image::after { display: none; }
    .alternate .service-content, .alternate .specialization-content { direction: ltr; }
    .alternate .service-image, .alternate .specialization-image { order: -1; }
    .contact-grid { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 820px) {
    .nav-toggle { display: flex; }
    header nav { position: fixed; top: 0; right: -100%; width: 78%; max-width: 320px; height: 100vh; background: #fff; box-shadow: -10px 0 40px rgba(0,0,0,0.12); padding: 100px 36px 40px; transition: right 0.4s cubic-bezier(0.4,0,0.2,1); z-index: 1001; overflow-y: auto; }
    header nav.open { right: 0; }
    header nav ul, #primary-menu { flex-direction: column; align-items: flex-start; }
    header nav ul li, #primary-menu li { margin: 0 0 22px; }
    header nav ul li a, #primary-menu li a { font-size: 15px; min-height: 44px; display: flex; align-items: center; }
    .nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(27,36,48,0.4); z-index: 1000; }
    .nav-backdrop.open { display: block; }

    /* La paginazione di WordPress e' anch'essa un <nav>: qui si riporta nel
       flusso, con i numeri abbastanza grandi da essere toccati con il dito. */
    .navigation.pagination,
    nav.pagination {
        position: static; right: auto; top: auto; width: auto; max-width: none;
        height: auto; background: none; box-shadow: none; padding: 0;
        transform: none; z-index: auto; overflow: visible;
    }
    .navigation.pagination .nav-links {
        display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    }
    .navigation.pagination .page-numbers {
        min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }

    /* Mobile dropdown: sub-menu inline (not absolute) */
    #primary-menu .sub-menu {
        position: static;
        transform: none;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        box-shadow: none;
        border: none;
        padding: 0;
        pointer-events: none;
        transition: max-height 0.3s ease, opacity 0.3s ease;
        background: var(--bg-soft);
        border-radius: 2px;
        margin-top: 8px;
    }
    #primary-menu .sub-menu::before,
    #primary-menu .sub-menu::after { display: none; }
    #primary-menu li.sub-open > .sub-menu {
        opacity: 1;
        max-height: 300px;
        pointer-events: auto;
        padding: 6px 0;
    }
    /* Nel pannello il sotto-menu non si sposta e non esce dal bordo: senza
       questo il transform della versione desktop lo spingeva mezza larghezza
       a sinistra e le voci finivano tagliate fuori schermo. */
    #primary-menu .sub-menu,
    #primary-menu li.menu-item-has-children:hover .sub-menu,
    #primary-menu li.sub-open > .sub-menu {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        width: auto;
        min-width: 0;
        max-width: 100%;
    }
    #primary-menu li.menu-item-has-children > a::after { content: ' ▾'; }
    #primary-menu li.sub-open > a::after { content: ' ▴'; }
}

@media (max-width: 768px) {
    :root { --header-h: 74px; }
    .hero { height: auto; min-height: 0; padding: 80px 0 60px; }
    .hero-content h1, .hero-content h2 { font-size: 40px; }
    .hero-content p { font-size: 16px; }
    .footer-content { grid-template-columns: 1fr 1fr; }
    .footer-col--brand { grid-column: 1 / -1; }
    .footer-links { grid-template-columns: 1fr 1fr; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .page-header h1, .page-header h2 { font-size: 38px; }
    .intro, .services, .specialization, .why-us, .testimonials, .latest-news, .cta, .values-section, .team-section, .contact-section { padding: 64px 0; }
}

@media (max-width: 576px) {
    .hero-content h1, .hero-content h2 { font-size: 32px; }
    .intro-content h3, .services h3, .specialization h3, .why-us h3,
    .latest-news h3, .values-section h3, .team-section h3 { font-size: 32px; }
    .testimonials h3, .cta h3 { font-size: 28px; }
    .quote { font-size: 22px; }
    .news-grid, .services-grid { grid-template-columns: 1fr; }
    .footer-content { grid-template-columns: 1fr; }
    .footer-col--brand { grid-column: auto; }
    .footer-links { grid-template-columns: 1fr; }
    .contact-form-box { padding: 32px 24px; }
}


/* ============================================================
   DROPDOWN — divider & special item
   ============================================================ */
.sub-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 12px;
    pointer-events: none;
}
.sub-menu li a.sub-special { color: var(--accent); font-weight: 500; }
.sub-menu li a.sub-special i { margin-right: 7px; font-size: 10px; }
.sub-menu li a.sub-special:hover { color: var(--ink); }
.sub-menu li.current-menu-item a { color: var(--accent); font-weight: 500; }


/* ============================================================
   LANDING PAGE — TRUFFE & PHISHING
   ============================================================ */

/* Hero */
.lp-hero {
    position: relative;
    background: var(--ink);
    background-image: url('./hero-phishing.jpg');
    background-size: cover; background-repeat: no-repeat;
    background-position: center 40%;
    min-height: 88vh;
    display: flex;
    align-items: center;
    padding: calc(var(--header-h) + 60px) 0 80px;
}
.lp-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(14,20,30,0.72) 0%, rgba(27,36,48,0.55) 60%, rgba(100,70,30,0.15) 100%);
}
.lp-hero-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
}
.lp-eyebrow {
    display: block;
    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--accent-2);
    margin-bottom: 22px;
}
.lp-hero-title {
    font-family: var(--heading-font);
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
    margin: 0 0 24px;
}
.lp-hero-sub {
    font-size: 17px;
    color: rgba(255,255,255,0.75);
    line-height: 1.7;
    max-width: 580px;
    margin: 0 0 40px;
}
.lp-hero-ctas {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.lp-hero-ctas .cta-button {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.lp-hero-ctas .cta-button:hover {
    background: var(--accent-2);
    border-color: var(--accent-2);
}
.lp-phone-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(255,255,255,0.85);
    font-family: var(--body-font);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
}
.lp-phone-cta i { font-size: 12px; color: var(--accent-2); }
.lp-phone-cta:hover { color: #fff; border-color: rgba(255,255,255,0.7); }

/* Trust strip */
.lp-trust {
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
    padding: 32px 0;
}
.lp-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.lp-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 20px;
    border-right: 1px solid var(--border);
}
.lp-trust-item:last-child { border-right: none; }
.lp-trust-num {
    font-family: var(--heading-font);
    font-size: 36px;
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 8px;
}
.lp-trust-label {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    max-width: 160px;
}

/* Generic LP section */
.lp-section { padding: 64px 0; }
.lp-section-head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 64px;
}
.lp-section-head h2 {
    font-family: var(--heading-font);
    font-size: clamp(30px, 3.5vw, 44px);
    font-weight: 500;
    color: var(--ink);
    margin: 8px 0 16px;
    line-height: 1.15;
}
.lp-section-head p {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.7;
}

/* What is phishing */
.lp-what-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 64px;
    align-items: start;
}
.lp-what-text h2 {
    font-family: var(--heading-font);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 500;
    color: var(--ink);
    margin: 8px 0 24px;
}
.lp-what-text .eyebrow { margin-bottom: 12px; }
.lp-what-text p { font-size: 16px; color: var(--text); line-height: 1.75; margin-bottom: 16px; text-align: left; }
.lp-callout-box {
    background: var(--ink);
    color: #fff;
    padding: 40px 36px;
    border-radius: 2px;
    position: sticky;
    top: calc(var(--header-h) + 24px);
}
.lp-callout-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(154,123,79,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.lp-callout-icon-wrap i { color: var(--accent-2); font-size: 20px; }
.lp-callout-box h3 {
    font-family: var(--heading-font);
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 16px;
}
.lp-callout-box p { font-size: 14.5px; color: rgba(255,255,255,0.75); line-height: 1.7; margin-bottom: 14px; }
.lp-callout-box p:last-child { margin-bottom: 0; }
.lp-callout-box strong { color: var(--accent-2); }

/* Cases */
.lp-cases { background: var(--bg-soft); }
.lp-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.lp-case-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 36px 32px 32px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.lp-case-card:hover {
    box-shadow: 0 12px 40px rgba(27,36,48,0.10);
    transform: translateY(-3px);
}
.lp-case-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(154,123,79,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}
.lp-case-icon i { color: var(--accent); font-size: 22px; }
.lp-case-card h3 {
    font-family: var(--heading-font);
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 12px;
}
.lp-case-card > p { font-size: 14.5px; color: var(--muted); line-height: 1.65; margin-bottom: 20px; text-align: left; }
.lp-case-list {
    list-style: none;
    margin: 0; padding: 0;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}
.lp-case-list li {
    position: relative;
    padding: 6px 0 6px 18px;
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.45;
}
.lp-case-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 11px;
    width: 5px; height: 5px;
    background: var(--accent);
    border-radius: 50%;
}

/* Process steps */
.lp-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.lp-step {
    padding: 0 44px 0 0;
    border-right: 1px solid var(--border);
    margin-right: 44px;
}
.lp-step:last-child { border-right: none; padding-right: 0; margin-right: 0; }
/* Il numerone del passaggio e' una filigrana: bronzo al 18% su avorio,
   1,22:1. Non e' testo da leggere — la sequenza sta gia' nell'ordine dei
   riquadri e nel titolo di ciascuno — ed e' scritto dal foglio, non dal
   markup, perche' li' e' il posto della decorazione. Portarlo a 3:1 avrebbe
   voluto dire bronzo pieno, cioe' un altro disegno. */
.lp-step-num::before { content: attr(data-num); }
.lp-step-num {
    font-family: var(--heading-font);
    font-size: 56px;
    font-weight: 600;
    color: rgba(154,123,79,0.18);
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: -1px;
}
.lp-step-body h3 {
    font-family: var(--heading-font);
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 14px;
    line-height: 1.2;
    border-top: 2px solid var(--accent);
    padding-top: 18px;
}
.lp-step-body p { font-size: 15px; color: var(--text); line-height: 1.72; text-align: left; }

/* Why us */
.lp-why { background: var(--bg-soft); }
.lp-why-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 80px;
    align-items: start;
}
.lp-why-intro h2 {
    font-family: var(--heading-font);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 500;
    color: var(--ink);
    margin: 8px 0 22px;
}
.lp-why-intro p { font-size: 15.5px; color: var(--text); line-height: 1.75; margin-bottom: 14px; text-align: left; }
.lp-why-items { display: flex; flex-direction: column; gap: 28px; }
.lp-why-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}
.lp-why-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(154,123,79,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.lp-why-icon i { color: var(--accent); font-size: 16px; }
.lp-why-text { display: flex; flex-direction: column; gap: 5px; }
.lp-why-text strong { font-size: 15px; color: var(--ink); font-weight: 600; }
.lp-why-text span { font-size: 14px; color: var(--muted); line-height: 1.65; }

/* Press */
.lp-press { background: var(--bg); }
.lp-press-card {
    display: block;
    text-decoration: none;
    max-width: 780px;
    margin: 0 auto;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    padding: 44px 48px;
    border-radius: 2px;
    transition: box-shadow 0.25s ease;
}
.lp-press-card:hover { box-shadow: 0 10px 36px rgba(27,36,48,0.09); }
.lp-press-source {
    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 18px;
}
.lp-press-quote {
    font-family: var(--heading-font);
    font-size: clamp(22px, 2.5vw, 30px);
    font-style: italic;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.35;
    margin: 0 0 16px;
    border: none;
    padding: 0;
}
.lp-press-desc { font-size: 14.5px; color: var(--muted); line-height: 1.65; margin-bottom: 22px; }
.lp-press-inner {
    display: flex;
    gap: 40px;
    align-items: center;
}
.lp-press-text { flex: 1; min-width: 0; }
.lp-press-images {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.lp-press-images img {
    width: 110px;
    height: 155px;
    object-fit: cover;
    object-position: top;
    border-radius: 2px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 14px rgba(27,36,48,0.10);
    opacity: 0.92;
    transition: opacity 0.2s, transform 0.2s;
}
.lp-press-card:hover .lp-press-images img { opacity: 1; transform: scale(1.02); }
@media (max-width: 700px) {
    .lp-press-inner { flex-direction: column; }
    .lp-press-images { justify-content: center; }
}

.lp-press-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--accent);
}
.lp-press-more i { font-size: 11px; transition: transform 0.2s; }
.lp-press-card:hover .lp-press-more i { transform: translateX(4px); }

/* Form section */
.lp-form-section {
    background: var(--ink);
    padding: 96px 0;
}
.lp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: start;
}
.lp-form-intro h2 {
    font-family: var(--heading-font);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 500;
    color: #fff;
    margin: 10px 0 20px;
    line-height: 1.2;
}
.lp-form-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-2);
    margin-bottom: 14px;
}
.lp-form-intro > p { font-size: 15.5px; color: rgba(255,255,255,0.65); line-height: 1.7; margin-bottom: 30px; }
.lp-form-promises {
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-form-promises li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: rgba(255,255,255,0.75);
}
.lp-form-promises li i { color: var(--accent-2); font-size: 12px; }
.lp-form-contact {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 24px;
}
.lp-form-contact > span { font-size: 13px; color: rgba(255,255,255,0.55); }
.lp-form-contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    transition: color 0.2s;
}
.lp-form-contact a i { color: var(--accent-2); font-size: 12px; }
.lp-form-contact a:hover { color: #fff; }

/* Form box */
.lp-form-box {
    background: #fff;
    padding: 44px 42px;
    border-radius: 2px;
}
.lp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.lp-form-field { display: flex; flex-direction: column; margin-bottom: 18px; }
.lp-form-field label {
    font-family: var(--body-font);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--ink);
    margin-bottom: 7px;
}
.lp-form-field input,
.lp-form-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-2);
    border-radius: 1px;
    font-family: var(--body-font);
    font-size: 14px;
    color: var(--text);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.lp-form-field input:focus,
.lp-form-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(154,123,79,0.12);
}
.lp-form-field textarea { resize: vertical; min-height: 100px; }
.lp-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 28px;
    background: var(--ink);
    color: #fff;
    font-family: var(--body-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border: none;
    border-radius: 1px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    margin-top: 4px;
}
.lp-form-submit:hover { background: var(--accent); transform: translateY(-1px); }
.lp-form-privacy {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.55;
    margin-top: 14px;
    text-align: center;
}
.lp-form-privacy a { color: var(--accent); }

/* ============================================================
   RESPONSIVE — landing page
   ============================================================ */
@media (max-width: 1100px) {
    .lp-what-grid { grid-template-columns: 1fr; gap: 44px; }
    .lp-callout-box { position: static; }
    .lp-why-grid { grid-template-columns: 1fr; gap: 44px; }
    .lp-form-grid { grid-template-columns: 1fr; gap: 48px; }
    .lp-trust-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-trust-item:nth-child(2) { border-right: none; }
    .lp-trust-item:nth-child(3) { border-top: 1px solid var(--border); border-right: 1px solid var(--border); }
    .lp-trust-item:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }
}
@media (max-width: 860px) {
    .lp-cases-grid { grid-template-columns: 1fr; gap: 20px; }
    .lp-steps { grid-template-columns: 1fr; gap: 44px; }
    .lp-step { border-right: none; padding-right: 0; margin-right: 0; border-left: 2px solid var(--accent); padding-left: 24px; }
    .lp-step-num { font-size: 40px; margin-bottom: 8px; }
    .lp-form-row { grid-template-columns: 1fr; gap: 0; }
    .lp-form-box { padding: 32px 24px; }
    .lp-press-card { padding: 32px 28px; }
}
@media (max-width: 576px) {
    .lp-hero { min-height: 70vh; }
    .lp-hero-ctas { flex-direction: column; align-items: flex-start; gap: 18px; }
    .lp-trust-grid { grid-template-columns: 1fr 1fr; }
    .lp-trust-item { border: none; border-bottom: 1px solid var(--border); }
    .lp-section { padding: 64px 0; }
    .lp-form-section { padding: 64px 0; }
}

/* ===================== MOBILE: area topics stack vertically ===================== */
@media (max-width: 640px) {
    .area-topics-detail li { flex-direction: column; gap: 4px; }
    .area-topics-detail li span { width: auto; }
}

/* ===================== MOBILE: disable hyphenation ===================== */
@media (max-width: 640px) {
    .intro-content p,
    .area-detail-text > p,
    .service-card p,
    .area-text > p,
    .article-content p,
    .why-lead,
    .service-text p,
    .specialization-text p,
    .profile-body p,
    .contact-info > p,
    .lp-what-text p,
    .lp-case-card > p,
    .lp-step-body p,
    .lp-why-intro p {
        text-align: left;
        hyphens: none;
    }
}

/* ===================== CONTACT MODAL ===================== */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(27,36,48,0.72);
    z-index: 9000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(3px);
}
.modal-overlay.is-open {
    display: flex;
}
.modal-box {
    background: #fff;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 48px 44px 40px;
    position: relative;
    box-shadow: 0 24px 64px rgba(27,36,48,0.28);
}
.modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    font-size: 22px;
    color: var(--muted);
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    transition: color 0.2s;
}
.modal-close:hover { color: var(--ink); }
.modal-eyebrow {
    font-family: var(--body-font);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--accent);
    margin-bottom: 10px;
    display: block;
}
.modal-box h3 {
    font-family: var(--heading-font);
    font-size: 30px;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 6px;
    line-height: 1.15;
}
.modal-subtitle {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 28px;
}
.modal-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.modal-form .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}
.modal-form .form-group.full { grid-column: 1 / -1; }
.modal-form label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--ink);
    margin-bottom: 6px;
}
.modal-form input:not([type="checkbox"]),
.modal-form textarea,
.modal-form select {
    border: 1px solid var(--border-2);
    padding: 10px 14px;
    font-family: var(--body-font);
    font-size: 14px;
    color: var(--ink);
    background: #fafafa;
    outline: none;
    transition: border-color 0.2s;
    border-radius: 0;
    -webkit-appearance: none;
}
.modal-form input:focus,
.modal-form textarea:focus {
    border-color: var(--accent);
    background: #fff;
}
.modal-form textarea { resize: vertical; min-height: 100px; }
.modal-privacy { margin: 16px 0 24px; }
.modal-privacy-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
    cursor: pointer;
}
.modal-privacy-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--accent);
    cursor: pointer;
}
.modal-privacy-label a { color: var(--accent); text-decoration: underline; }
.modal-submit {
    width: 100%;
    background: var(--ink);
    color: #fff;
    border: none;
    padding: 14px 24px;
    font-family: var(--body-font);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background 0.2s;
}
.modal-submit:hover { background: var(--accent); }
.modal-success { display: none; }
.modal-overlay.show-success .modal-success {
    display: block;
    text-align: center;
    padding: 60px 24px;
    animation: modalFadeIn 0.4s ease;
}
.modal-overlay.show-success .modal-form,
.modal-overlay.show-success .modal-eyebrow,
.modal-overlay.show-success .modal-box > h3,
.modal-overlay.show-success .modal-subtitle { display: none; }
@keyframes modalFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.modal-success-title {
    font-family: var(--heading-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px;
}
.modal-success-sub {
    font-family: var(--body-font);
    font-size: 15px;
    color: var(--muted);
    margin: 0;
    line-height: 1.7;
}
@media (max-width: 560px) {
    .modal-box { padding: 36px 24px 28px; }
    .modal-form .form-row { grid-template-columns: 1fr; }
    .modal-box h3 { font-size: 24px; }
}
.modal-field-error { border-color: #c0392b !important; }
.modal-privacy-label.modal-privacy-shake { animation: privacyShake 0.4s ease; }
@keyframes privacyShake {
    0%,100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}

/* ===================== LP FAQ ===================== */
.lp-faq { background: var(--bg-soft); }
.lp-faq-list { max-width: 780px; margin: 0 auto; }
.lp-faq-item {
    background: #fff;
    border: 1px solid var(--border-2);
    margin-bottom: 12px;
}
.lp-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 52px 20px 24px;
    font-family: var(--body-font);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    position: relative;
    line-height: 1.45;
    transition: color 0.2s;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--heading-font);
    font-size: 26px;
    font-weight: 400;
    color: var(--accent);
    transition: transform 0.25s;
}
.lp-faq-item[open] summary::after { content: '\2013'; }
.lp-faq-item summary:hover { color: var(--accent); }
.lp-faq-answer { padding: 0 24px 22px; }
.lp-faq-answer p { color: var(--muted); font-size: 15px; line-height: 1.75; margin: 0; }
.lp-faq-answer p + p { margin-top: 10px; }
@media (max-width: 560px) {
    .lp-faq-item summary { font-size: 14.5px; padding: 16px 44px 16px 18px; }
    .lp-faq-answer { padding: 0 18px 18px; }
}

/* ===================== SEDE BAND ===================== */
.sede-band { background: var(--bg-soft); padding: 88px 0; }
.sede-band .intro-content { max-width: 760px; margin: 0 auto; }
.sede-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: stretch;
    max-width: 1040px;
    margin: 0 auto;
}
.sede-grid--flip .sede-photo { order: -1; }
.sede-text .eyebrow { color: var(--accent); display: block; margin-bottom: 10px; }
.sede-text h3 { font-size: 42px; color: var(--ink); margin-bottom: 22px; }
.sede-text h3::after {
    content: '';
    display: block;
    width: 56px;
    height: 1px;
    background: var(--accent);
    margin: 16px 0 0;
}
.sede-text p { font-size: 18px; color: var(--muted); line-height: 1.9; text-align: left; margin-bottom: 14px; }
.sede-photo { margin: 0; display: flex; }
.sede-photo img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; box-shadow: 0 14px 36px rgba(27,36,48,0.14); }
@media (max-width: 820px) {
    .sede-grid, .sede-grid--flip { grid-template-columns: 1fr; gap: 32px; }
    .sede-grid--flip .sede-photo { order: 0; }
    .sede-photo img { height: 260px; min-height: 0; }
    .sede-text p { text-align: left; hyphens: none; }
}


/* ===================== PRIVACY PAGE ===================== */
.privacy-page { padding: 64px 0 80px; background: var(--bg); }
.privacy-content { max-width: 800px; margin: 0 auto; }
.privacy-content .privacy-intro { font-size: 17px; color: var(--ink); line-height: 1.7; margin-bottom: 28px; }
.privacy-content h2, .privacy-content h3 {
    font-family: var(--body-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--ink);
    margin: 36px 0 14px;
    text-transform: uppercase;
}
.privacy-content h2::after, .privacy-content h3::after { content: none; }
.privacy-content p { font-size: 15px; color: var(--muted); line-height: 1.8; margin-bottom: 14px; text-align: left; }
.privacy-content a { color: var(--accent); text-decoration: underline; }

/* ===================== COOKIE BANNER ===================== */
/* Rifatto il 21.09.2026. Il riquadro di 300px con testo a 11,5px passava
   inosservato: 6 lead su 8 arrivavano senza alcuna scelta, e Google Ads ne
   contava uno solo. In piu' stava SOTTO la finestra del modulo (8000 contro
   9000), quindi chi compilava non poteva nemmeno vederlo. Ora e' leggibile,
   sta sopra il modulo, e i due pulsanti hanno lo stesso peso: la scelta
   resta libera, deve solo essere visibile. */
.cookie-banner {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 9500;
    max-width: 400px;
    background: #1b2430;
    color: rgba(255,255,255,0.88);
    padding: 18px 20px;
    box-shadow: 0 10px 32px rgba(27,36,48,0.35);
    border-top: 3px solid var(--accent);
    font-size: 14px;
    line-height: 1.55;
    animation: cookieIn 0.4s ease;
}
@keyframes cookieIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cookie-banner p { margin: 0 0 14px; color: inherit; font-size: 14px; }
.cookie-banner .cookie-banner-titolo { margin: 0 0 6px; color: #fff; font-weight: 700; font-size: 15px; }
.cookie-banner a { color: var(--accent-2); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; }
.cookie-banner button {
    flex: 1;
    font-family: var(--body-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 11px 14px;
    min-height: 44px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
}
.cookie-banner .cookie-accept { background: var(--accent); color: #fff; border-color: var(--accent); }
.cookie-banner .cookie-accept:hover { background: var(--accent-2); border-color: var(--accent-2); }
.cookie-banner .cookie-reject { background: transparent; color: #fff; border-color: rgba(255,255,255,0.75); }
.cookie-banner .cookie-reject:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
/* Richiamo discreto quando si comincia a compilare il modulo senza aver scelto. */
.cookie-banner.is-richiamo { animation: cookieRichiamo 0.9s ease 2; }
@keyframes cookieRichiamo {
    0%, 100% { box-shadow: 0 10px 32px rgba(27,36,48,0.35); }
    50% { box-shadow: 0 0 0 4px var(--accent-2), 0 10px 32px rgba(27,36,48,0.35); }
}
@media (max-width: 640px) {
    .cookie-banner { left: 0; right: 0; bottom: 0; max-width: none; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* Team in home: più compatto della pagina Professionisti */
.home-team { padding: 72px 0; }

/* ===================== HOME TEAM STRIP ===================== */
.ht-strip { display: flex; justify-content: center; gap: 80px; flex-wrap: wrap; }
.ht-persona { display: flex; align-items: center; gap: 22px; max-width: 430px; }
.ht-foto {
    width: 108px; height: 108px; border-radius: 50%;
    background-size: cover; background-repeat: no-repeat; flex-shrink: 0;
    border: 1px solid var(--border-2);
    box-shadow: 0 8px 22px rgba(27,36,48,0.12);
}
.ht-info h4 { font-family: var(--heading-font); font-size: 23px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.ht-ruolo { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.ht-info p { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 8px; }
.ht-info a { font-size: 11.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.ht-info a i { color: var(--accent); font-size: 10px; margin-left: 4px; transition: transform 0.2s; }
.ht-info a:hover i { transform: translateX(4px); }
@media (max-width: 640px) {
    .ht-strip { gap: 36px; }
    .ht-persona { flex-direction: column; text-align: center; }
}

/* ===================== AREA CASES ===================== */
.area-cases { background: var(--bg-soft); padding: 72px 0; }
.spec-cases { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border-2); }
.spec-cases h4 { font-family: var(--body-font); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); margin-bottom: 10px; }
.spec-cases ul { list-style: none; padding: 0; margin: 0; }
.spec-cases li { margin-bottom: 8px; }
.spec-cases li a { font-size: 14px; color: var(--muted); text-decoration: none; }
.spec-cases li a:hover { color: var(--accent); }

/* ===================== 404 ===================== */
.error-404 { padding: 110px 0 130px; background: var(--bg-soft); text-align: center; }
.error-code {
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 130px;
    line-height: 1;
    color: var(--accent-2);
    display: block;
    margin-bottom: 8px;
}
.error-404 h1 { font-family: var(--heading-font); font-size: 40px; font-weight: 600; color: var(--ink); margin-bottom: 16px; }
.error-404 p { color: var(--muted); font-size: 16px; line-height: 1.8; margin-bottom: 32px; }
.error-404-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Privacy nel form contatti: stile discorsivo, non da etichetta */
.contact-form .modal-privacy-label {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 12px;
    color: var(--muted);
    margin: 0;
    line-height: 1.6;
}

/* ===================== FIRMA AUTORE ARTICOLO ===================== */
.article-author {
    /* Stessa colonna del testo e della data (800px centrati): senza questo
       vincolo la firma si allargava a tutto il contenitore e il marchio
       finiva molto piu' a sinistra del corpo dell'articolo. */
    max-width: 800px;
    margin: 18px auto 0;
    display: flex; align-items: center; gap: 16px;
    padding-top: 0; border-top: none;
}
.article-author .aa-foto {
    width: 54px; height: 54px; border-radius: 50%;
    background-size: cover; background-repeat: no-repeat; flex-shrink: 0;
    border: 1px solid var(--border-2);
}
.article-author .aa-label {
    display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 1.8px;
    text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.article-author .aa-nome {
    display: block; font-family: var(--heading-font); font-size: 17px;
    font-weight: 500; color: var(--ink); text-decoration: none; margin-bottom: 3px;
}
.article-author .aa-nome:hover { color: var(--accent); }
.article-author .aa-ruolo {
    display: block; font-size: 10px; font-weight: 600; letter-spacing: 1.8px;
    text-transform: uppercase; color: var(--accent);
}
@media (max-width: 600px) {
    .article-author { gap: 13px; }
    .article-author .aa-foto { width: 46px; height: 46px; }
}

/* =====================================================================
   TRUFFAPHISHING — addendum al tema
   Solo gli innesti necessari a vestire i contenuti di truffaphishing.com
   con la casa-stile bg-lex. Nessuna modifica ai token di colore.
   ===================================================================== */

/* --- Hero home: immagine dentro img/ --- */
.lp-hero.tp-hero { background-image: url('./img/hero-amo-carta.webp'); background-position: center center; }

/* --- Testata di pagina: sempre la carta all'amo, come l'hero della home --- */
.page-header {
    background-image: linear-gradient(120deg, rgba(27,36,48,0.90) 0%, rgba(27,36,48,0.72) 100%),
                      url('./img/hero-amo-carta.webp');
    background-position: center 55%;
}

/* --- Logo TruffaPhishing (navy su trasparente) in footer scuro --- */
.footer-logo-img.footer-logo-tp {
    background: transparent;
    max-width: 220px;
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

/* --- CTA secondaria in hero (WhatsApp) --- */
.cta-button--ghost {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.55);
    color: #fff;
}
.cta-button--ghost:hover { background: rgba(255,255,255,0.10); border-color: #fff; }
.cta-button--ghost i { margin-right: 8px; }

/* --- Prosa delle pagine interne --- */
.tp-prose { max-width: 820px; }
.tp-prose .eyebrow { display: block; margin-bottom: 14px; }
.tp-prose h2 { font-size: 38px; margin-bottom: 22px; }
.tp-prose h2::after {
    content: ''; display: block; width: 56px; height: 1px;
    background: var(--accent); margin: 18px 0 0;
}
.tp-prose p { font-size: 17px; line-height: 1.85; color: var(--text); margin-bottom: 18px; }
.tp-prose p + p { margin-top: 0; }
@media (max-width: 768px) { .tp-prose h2 { font-size: 28px; } }

/* --- Sezione esempi (screenshot reali) --- */
.lp-esempi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    margin-top: 48px;
}
.lp-esempio {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(27,36,48,0.07);
    transition: var(--transition);
}
.lp-esempio:hover { transform: translateY(-4px); box-shadow: 0 18px 54px rgba(27,36,48,0.12); }
.lp-esempio img { width: 100%; height: auto; display: block; }
.lp-esempio figcaption {
    padding: 22px 26px 26px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
    border-top: 1px solid var(--border);
}

/* --- Elenco SCA (le tre categorie di autenticazione forte) --- */
.tp-sca-list { list-style: none; margin: 28px 0 26px; padding: 0; }
.tp-sca-list li {
    display: flex; gap: 18px; align-items: flex-start;
    padding: 18px 0; border-bottom: 1px solid var(--border);
}
.tp-sca-list li:first-child { border-top: 1px solid var(--border); }
.tp-sca-list i {
    color: var(--accent); font-size: 19px; width: 26px; flex-shrink: 0;
    margin-top: 3px; text-align: center;
}
.tp-sca-list strong {
    display: block; font-family: var(--heading-font); font-weight: 600;
    font-size: 18px; color: var(--ink); margin-bottom: 3px;
}
.tp-sca-list span { display: block; font-size: 15.5px; color: var(--muted); line-height: 1.7; }

/* --- Card di navigazione (varianti cliccabili di lp-case-card) --- */
.lp-case-card--link { text-decoration: none; display: block; }
.lp-case-card--link:hover { transform: translateY(-5px); }
.lp-case-card--link .aic-link {
    display: inline-flex; align-items: center; gap: 9px;
    margin-top: 18px; font-size: 12px; font-weight: 600;
    letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent);
}
.lp-case-card--link:hover .aic-link i { transform: translateX(4px); }
.lp-case-card--link .aic-link i { transition: transform 0.3s ease; }
.lp-case-list--wide { margin-top: 16px; }

/* --- "Conosciamoci meglio": schede grandi, CV in dissolvenza al passaggio
       del mouse (le flip-box del sito attuale, rifatte in casa-stile) --- */
.tp-persone {
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
    max-width: 720px;
    margin: 0 auto;
}
.tp-persona {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 2px;
    overflow: hidden;
    outline: none;
    box-shadow: 0 14px 46px rgba(27,36,48,0.14);
    cursor: pointer;
}
.tp-persona-fronte {
    position: absolute; inset: 0;
    background-size: cover; background-repeat: no-repeat;
    display: flex; align-items: flex-end;
    transition: opacity 0.45s ease;
}
.tp-persona-vel {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(27,36,48,0.88) 0%, rgba(27,36,48,0.20) 46%, rgba(27,36,48,0) 70%);
}
.tp-persona-testa { position: relative; z-index: 1; padding: 30px 32px; }
.tp-persona-testa h4 {
    font-family: var(--heading-font); font-size: 27px; font-weight: 500;
    color: #fff; margin: 0 0 6px;
}
.tp-persona-ruolo {
    display: block; font-family: var(--body-font); font-size: 10.5px;
    font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    color: var(--accent-2);
}
.tp-persona-invito {
    position: absolute; top: 22px; right: 22px; z-index: 1;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.45);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12px;
    transition: var(--transition);
}
.tp-persona-retro {
    position: absolute; inset: 0;
    background: linear-gradient(150deg, var(--ink) 0%, var(--ink-2) 100%);
    padding: 38px 34px;
    display: flex; flex-direction: column; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}
.tp-persona-retro h4 {
    font-family: var(--heading-font); font-size: 24px; font-weight: 500;
    color: #fff; margin: 0 0 6px;
}
.tp-persona-retro .tp-persona-ruolo { margin-bottom: 18px; }
.tp-persona-retro p {
    font-size: 14.5px; line-height: 1.78;
    color: rgba(255,255,255,0.80);
    margin: 0 0 22px;
}
.tp-persona-retro > a {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 22px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 2px;
    font-size: 11.5px; font-weight: 600; letter-spacing: 1.6px;
    text-transform: uppercase; text-decoration: none;
    color: #fff;
    transition: var(--transition);
}
.tp-persona-retro > a:hover { background: var(--accent); border-color: var(--accent); }

.tp-persona:hover .tp-persona-retro,
.tp-persona:focus .tp-persona-retro,
.tp-persona:focus-within .tp-persona-retro { opacity: 1; visibility: visible; }
.tp-persona:hover .tp-persona-fronte,
.tp-persona:focus .tp-persona-fronte,
.tp-persona:focus-within .tp-persona-fronte { opacity: 0; }

@media (max-width: 700px) {
    .tp-persone { grid-template-columns: 1fr; gap: 26px; max-width: 340px; }
    .tp-persona-retro { padding: 24px 22px; }
    /* La scheda dell'Avv. Gloria ha meta' testo in piu' dell'altra (470 caratteri
       contro 317) ed era l'unica a dover scorrere. Un filo di corpo in meno e
       un'interlinea piu' stretta la fanno stare dentro senza toccare l'altra. */
    .tp-persona-retro p { font-size: 13.5px; line-height: 1.62; margin-bottom: 16px; }
    .tp-persona-retro h4 { font-size: 21px; }
    .tp-persona-retro .tp-persona-ruolo { margin-bottom: 14px; }
    .tp-persona-retro > a { padding: 9px 18px; font-size: 11px; }

    /* Il riquadro aveva proporzioni fisse 3/4 con overflow nascosto: su schermo
       stretto il contenuto del retro non ci stava e finiva tagliato, portandosi
       via il pulsante LinkedIn. Qui l'altezza segue il contenuto, e se il testo
       resta comunque piu' alto il retro scorre invece di essere troncato. */
    .tp-persona { aspect-ratio: auto; min-height: 450px; }
    .tp-persona-retro {
        justify-content: flex-start;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tp-persona-retro > a { margin-top: auto; }
    /* il "+" dell'invito restava sotto il bordo inferiore */
    .tp-persona-testa { padding: 24px 24px 26px; }
}

/* --- Firma articolo: solo il marchio, navy su bianco --- */
.article-author .aa-marchio {
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    background: #fff;
    border: 1px solid var(--border-2);
    border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
    padding: 9px;
}
.article-author .aa-marchio img { height: 100%; width: auto; }
@media (max-width: 600px) {
    .article-author .aa-marchio { width: 52px; height: 52px; padding: 7px; }
}

/* --- Contatti diretti sotto il modulo --- */
.lp-form-direct {
    display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px;
    padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.16);
}
.lp-form-direct a {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 18px; border: 1px solid rgba(255,255,255,0.28);
    border-radius: 2px; color: rgba(255,255,255,0.88);
    font-size: 14px; text-decoration: none; transition: var(--transition);
}
.lp-form-direct a:hover { background: rgba(255,255,255,0.10); border-color: var(--accent-2); color: #fff; }
.lp-form-direct i { color: var(--accent-2); }

/* --- Messaggio di conferma dei moduli di pagina --- */
.contact-form-success { display: none; text-align: center; padding: 24px 0; }
.contact-form-success .modal-success-title {
    font-family: var(--heading-font); font-size: 24px; color: var(--ink); margin-bottom: 8px;
}
.contact-form-success .modal-success-sub { color: var(--muted); font-size: 15px; }

/* --- Riquadro sede in pagina Contatti --- */
.tp-contatti-sede { max-width: 560px; margin: 56px auto 0; }
.tp-contatti-sede .lp-callout-box a { color: var(--accent); text-decoration: none; }
.tp-contatti-sede .lp-callout-box a:hover { text-decoration: underline; }

/* --- Colonnina di contatto: tutte le icone in bianco, WhatsApp compreso --- */
.floating-contact .floating-btn i { color: #fff; }

/* --- Sezione con fondo avorio riusabile --- */
.lp-section--soft { background: var(--bg-soft); }

/* --- Correzioni di specificità / adattamenti ai contenuti truffaphishing --- */
.lp-hero-ctas .cta-button--ghost {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.55);
    color: #fff;
}
.lp-hero-ctas .cta-button--ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

/* I titoli degli articoli truffaphishing sono molto più lunghi di quelli bg-lex:
   serve respiro in alto perché non finiscano sotto l'header fisso. */
.article-page-header { padding-top: 56px; }
.article-page-header .overlay {
    background: linear-gradient(to top, rgba(27,36,48,0.94) 0%, rgba(27,36,48,0.70) 60%, rgba(27,36,48,0.62) 100%);
}
.article-hero-image { filter: brightness(0.55); }
/* .page-header impone height:42vh: con i titoli lunghi il box non cresce e il
   link "torna alle news" finisce sotto l'header fisso. */
.article-page-header { height: auto; }

/* Hero: la carta di credito sull'amo, l'immagine del sito attuale. È già scura,
   ma la carta azzurra cade proprio sotto il testo a sinistra: velo calibrato. */
.tp-hero .lp-hero-overlay {
    background: linear-gradient(100deg, rgba(10,16,26,0.88) 0%, rgba(16,24,36,0.78) 42%,
                                rgba(27,36,48,0.48) 72%, rgba(27,36,48,0.28) 100%);
}

/* "Perché rivolgerti a noi": la colonna di destra partiva alla stessa altezza
   dell'occhiello, quindi più in alto del testo. La faccio scendere all'altezza
   del primo paragrafo, così le due colonne si leggono appaiate. */
@media (min-width: 993px) {
    .lp-why .lp-why-items { padding-top: 117px; }
}

/* Il tema dichiara `img { max-width:100% }` ma non `height:auto`: con gli attributi
   width/height originali nel markup, le immagini dentro gli articoli venivano stirate
   (le scansioni del Messaggero uscivano 800x2560 invece di 800x1154). */
.article-content img,
.article-content figure img,
.lp-press-images img,
.tp-prose img { height: auto; }
.lp-press-images img { height: 155px; }   /* la miniatura resta a formato fisso */

/* Scansioni di giornale dentro l'articolo: piena colonna, cornice discreta */
.article-content p > img,
.article-content figure { margin: 34px 0; }
.article-content img {
    width: 100%;
    border: 1px solid var(--border);
    box-shadow: 0 14px 40px rgba(27,36,48,0.12);
}

/* Rassegna stampa: stessa larghezza delle schede dei professionisti (900px) e
   meno aria fra le due sezioni, che restavano staccate da 136px di vuoto. */
.lp-press { padding-top: 30px; }
.lp-press .lp-section-head { margin-bottom: 36px; }
.lp-press-card {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
/* Quando "Conosciamoci meglio" è seguito dalla rassegna stampa le due sezioni
   sono un blocco solo: niente doppio respiro in mezzo. */
.tp-team--compatta { padding-bottom: 40px; }

/* =====================================================================
   RITMO VERTICALE
   Il tema bg-lex respira su pagine con poco testo per sezione. Qui le
   sezioni sono dense e ravvicinate: 64+64 fra due sezioni adiacenti
   diventavano 128px di vuoto e la lettura si sfilacciava. Stretti tutti
   i passi di circa un terzo, tenendo le proporzioni fra loro.
   ===================================================================== */
@media (min-width: 769px) {
    .lp-section            { padding-top: 44px; padding-bottom: 44px; }
    .lp-form-section       { padding-top: 64px; padding-bottom: 64px; }
    .cta, .article-cta     { padding-top: 52px; padding-bottom: 52px; }
    .team-section          { padding-top: 52px; padding-bottom: 52px; }
    .tp-team--compatta     { padding-bottom: 28px; }
    .lp-press              { padding-top: 22px; }
    .intro                 { padding-top: 52px; padding-bottom: 52px; }
    .areas, .why-us        { padding-top: 52px; padding-bottom: 52px; }
    .latest-news           { padding-top: 48px; padding-bottom: 52px; }
    .news-archive          { padding-top: 52px; padding-bottom: 52px; }
    .article-body-wrapper  { padding-top: 48px; padding-bottom: 44px; }
    .related-section       { padding-top: 44px; padding-bottom: 52px; }
    .stats-strip           { padding-top: 44px; padding-bottom: 44px; }

    /* i cappelli di sezione staccavano il titolo dal contenuto di 64px */
    .lp-section-head       { margin-bottom: 40px; }
    .lp-press .lp-section-head { margin-bottom: 30px; }

    /* le testate di pagina occupavano mezzo schermo. Escluse quelle degli
       articoli: i titoli lunghi hanno bisogno di crescere in altezza. */
    .page-header:not(.article-page-header) { height: 34vh; min-height: 268px; }
    .article-page-header   { height: auto; min-height: 380px; }
}

/* Su mobile i passi erano già più contenuti: li stringo di poco. */
@media (max-width: 768px) {
    .lp-section            { padding-top: 40px; padding-bottom: 40px; }
    .cta, .article-cta     { padding-top: 44px; padding-bottom: 44px; }
    .team-section          { padding-top: 44px; padding-bottom: 44px; }
    .lp-form-section       { padding-top: 52px; padding-bottom: 52px; }
    .lp-section-head       { margin-bottom: 32px; }
}
/* Colonna di lettura centrata: allineata a sinistra ma non appiccicata al bordo,
   con il cappello (occhiello + titolo) dentro la colonna, non centrato sopra. */
.tp-prose { margin-left: auto; margin-right: auto; }

/* Formato allargato riservato all'articolo con le scansioni del Messaggero
   Veneto (classe tp-articolo-largo): due pagine di giornale a 800px sono
   illeggibili. Tutti gli altri articoli restano nella misura del tema. */
@media (min-width: 993px) {
    .tp-articolo-largo .article-content img {
        width: min(1180px, 92vw);
        max-width: none;
        margin-left: 50%;
        transform: translateX(-50%);
    }
    .tp-articolo-largo .article-content figcaption {
        text-align: center;
        font-size: 13.5px;
        color: var(--muted);
        margin-top: 10px;
    }
    /* il titolo di quel pezzo va a filo con le scansioni, per non fare scalino */
    .article-page-header.tp-articolo-largo .container { max-width: 1280px; width: 96%; }
    .article-page-header.tp-articolo-largo .article-title { max-width: min(1180px, 92vw); }
}

/* Sezioni di solo testo su due colonne: cappello a sinistra, testo a destra.
   Riempie la riga senza allungare la misura di lettura oltre i ~700px. */
.tp-dc-grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px 72px;
    align-items: start;
    max-width: 1120px;
    margin: 0 auto;
}
.tp-dc-cappello .eyebrow { display: block; margin-bottom: 14px; }
.tp-dc-cappello h2 {
    font-size: 34px;
    line-height: 1.2;
    margin: 0;
}
.tp-dc-cappello h2::after {
    content: ''; display: block; width: 48px; height: 1px;
    background: var(--accent); margin-top: 18px;
}
.tp-dc-testo p {
    font-size: 17px;
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 18px;
}
.tp-dc-testo p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
    .tp-dc-grid { grid-template-columns: 1fr; gap: 22px; }
    .tp-dc-cappello h2 { font-size: 27px; }
    .tp-dc-cappello h2::after { margin-top: 14px; }
}

/* Schede professionisti e rassegna stampa: da 900 a 1080px, per stare in
   proporzione con il resto della pagina invece di galleggiare al centro. */
@media (min-width: 993px) {
    .tp-persone   { max-width: 860px; }
    .lp-press-card { max-width: 1080px; }
}


/* Contatti: introduzione sopra il modulo nella colonna di destra */
.contact-form-box .tp-form-intro {
    font-size: 15px; line-height: 1.7; color: var(--muted); margin-bottom: 26px;
}
.contact-form-box .contact-form-success { padding: 10px 0 0; }
/* --- Privacy: impaginazione di bg-lex, con le preferenze dell'Avvocato
   (colonna 1000px, testo giustificato, apertura in grassetto maiuscoletto,
   titoli allo stesso corpo del testo, data di revisione in coda a destra). --- */
.privacy-page { padding: calc(var(--header-h) + 44px) 0 80px; background: var(--bg); }
.privacy-content { max-width: 1000px; margin: 0 auto; }
.privacy-titolo {
    max-width: 1000px; margin: 0 auto 22px;
    font-family: var(--body-font); font-size: 15.5px; line-height: 25px;
    font-weight: 600; font-variant-caps: small-caps; letter-spacing: 0.6px;
    color: var(--ink);
    padding-bottom: 14px; border-bottom: 1px solid var(--border-2);
}
.privacy-content .privacy-intro {
    font-size: 15.5px; line-height: 25px; color: var(--ink);
    font-weight: 600; font-variant-caps: small-caps; letter-spacing: 0.3px;
    margin-bottom: 26px; text-align: left;
}
.privacy-content h2, .privacy-content h3 {
    font-family: var(--body-font); font-size: 15.5px; line-height: 25px;
    font-weight: 600; letter-spacing: 0.6px; color: var(--ink);
    margin: 30px 0 10px; padding-top: 14px; border-top: 1px solid var(--border);
}
.privacy-content h2::after, .privacy-content h3::after { content: none; }
.privacy-content p,
.privacy-content li {
    font-size: 15.5px; line-height: 25px; color: var(--text);
    text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
.privacy-content p { margin-bottom: 11px; }
.privacy-content ul { margin: 0 0 13px; padding-left: 0; list-style: none; }
.privacy-content li { position: relative; padding: 3px 0 3px 20px; margin: 0; }
.privacy-content li::before {
    content: ''; position: absolute; left: 0; top: 14px;
    width: 9px; height: 1px; background: var(--accent);
}
.privacy-content a { color: var(--accent); text-decoration: underline; }
.privacy-content .privacy-data {
    margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border);
    text-align: right; hyphens: none; color: var(--ink); font-weight: 500;
}
.privacy-content .privacy-data span {
    display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 1.8px;
    text-transform: uppercase; color: var(--accent); margin-bottom: 3px;
}
@media (max-width: 768px) {
    .privacy-page { padding-top: calc(var(--header-h) + 30px); }
    .privacy-content p, .privacy-content li,
    .privacy-content h2, .privacy-content h3, .privacy-titolo { font-size: 15px; line-height: 24px; }
}

/* --- "Vedi anche": link contestuali in coda all'articolo. Servono al lettore
   e all'indicizzazione, che sui pezzi deboli passa anche dal linking interno. --- */
.tp-vedianche { padding: 8px 0 36px; background: var(--bg); }
.tp-vedianche .container { max-width: 880px; }
.tp-vedianche .eyebrow { display: block; margin-bottom: 14px; }
.tp-vedianche ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px 12px;
}
.tp-vedianche li { margin: 0; }
.tp-vedianche a {
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid var(--border-2);
    border-radius: 2px;
    font-size: 14px;
    color: var(--ink);
    text-decoration: none;
    transition: var(--transition);
}
.tp-vedianche a:hover { border-color: var(--accent); color: var(--accent); }

/* --- "Casi che abbiamo seguito": le decisioni ottenute, portate fuori dalle
   news e messe dove atterra chi arriva dalle campagne. --- */
.tp-casi-lista {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
}
.tp-caso {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 2px;
    padding: 24px 26px 22px;
    transition: var(--transition);
}
.tp-caso:hover { box-shadow: 0 12px 36px rgba(27,36,48,0.09); transform: translateY(-3px); }
.tp-caso-testa {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
    margin-bottom: 12px;
}
.tp-caso-collegio {
    font-size: 11px; font-weight: 600; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--accent);
}
.tp-caso-data { font-size: 12.5px; color: var(--muted); }
.tp-caso h3 {
    font-family: var(--heading-font); font-size: 20px; font-weight: 600;
    line-height: 1.3; color: var(--ink); margin: 0 0 10px;
}
.tp-caso p { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0 0 16px; }
.tp-caso > a {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 600; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--accent); text-decoration: none;
}
.tp-caso > a i { font-size: 10px; transition: transform 0.25s ease; }
.tp-caso:hover > a i { transform: translateX(4px); }
.tp-casi-nota {
    max-width: 780px; margin: 30px auto 0;
    font-size: 13px; line-height: 1.7; color: var(--muted); text-align: center;
}
@media (max-width: 700px) {
    .tp-casi-lista { grid-template-columns: 1fr; }
}

/* Le tipologie sono quattro: su tre colonne la quarta resta sola con due buchi
   accanto. Due colonne piu' larghe reggono meglio anche il testo, che qui e'
   piu' lungo delle schede di rimando. */
.lp-tipologie .lp-cases-grid { grid-template-columns: repeat(2, 1fr); }
.lp-tipologie .lp-section-head p { max-width: 720px; margin-left: auto; margin-right: auto; }
@media (max-width: 900px) {
    .lp-tipologie .lp-cases-grid { grid-template-columns: 1fr; }
}

/* --- Fascia numeri: le etichette dicono una cosa al lettore, non una sigla,
   quindi niente maiuscoletto spaziato che a due righe diventa illeggibile. --- */
.stats-strip .stat-label {
    text-transform: none; letter-spacing: 0.2px; font-size: 13px;
    line-height: 1.5; max-width: 210px; margin: 0 auto;
    color: rgba(255,255,255,0.62);
}
.stat-unit {
    display: block; font-family: var(--body-font); font-size: 13px;
    font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase;
    color: rgba(255,255,255,0.5); margin-top: 8px;
}
.stat-num { display: block; }
/* due voci hanno l'unita' sotto la cifra e due no: senza allineare le etichette
   in basso la fascia esce sfalsata di venti pixel. */
.stats-strip .stat-item { display: flex; flex-direction: column; }
.stats-strip .stat-label { margin-top: auto; }
.stats-nota {
    max-width: 780px; margin: 26px auto 0; text-align: center;
    font-size: 12px; line-height: 1.7; color: rgba(255,255,255,0.55);
}

/* --- Lettura ravvicinata delle due schermate: immagine e analisi affiancate. --- */
.lp-lettura-blocco {
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 40px; align-items: start;
}
.lp-lettura-blocco + .lp-lettura-blocco {
    margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--border);
}
.lp-lettura-blocco .lp-esempio { margin: 0; }
.lp-lettura-blocco .lp-esempio img {
    width: 100%; height: auto; display: block;
    border: 1px solid var(--border); border-radius: 2px; background: #fff;
}
.lp-lettura-testo h3 {
    font-family: var(--heading-font); font-size: 24px; font-weight: 600;
    color: var(--ink); margin: 0 0 18px;
}
.lp-lettura-testo h4 {
    font-family: var(--body-font); font-size: 11px; font-weight: 600;
    letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent);
    margin: 24px 0 12px;
}
.lp-lettura-testo h4:first-of-type { margin-top: 0; }
.lp-case-list--no li::before { content: "\f00d"; color: #a8443c; }

/* --- Tabella comparativa delle tecniche. --- */
.tp-tabella-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tp-tabella {
    width: 100%; min-width: 720px; border-collapse: collapse;
    background: #fff; border: 1px solid var(--border);
}
.tp-tabella th, .tp-tabella td {
    padding: 16px 18px; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--border); font-size: 14.5px; line-height: 1.6;
}
.tp-tabella thead th {
    background: var(--ink); color: #fff; font-family: var(--body-font);
    font-size: 11px; font-weight: 600; letter-spacing: 1.4px;
    text-transform: uppercase; border-bottom: none;
}
.tp-tabella tbody th {
    font-family: var(--heading-font); font-size: 17px; font-weight: 600;
    color: var(--ink); white-space: nowrap;
}
.tp-tabella tbody td { color: var(--muted); }
.tp-tabella tbody tr:last-child th, .tp-tabella tbody tr:last-child td { border-bottom: none; }
.tp-tabella tbody tr:hover { background: var(--bg-soft); }

@media (max-width: 900px) {
    .lp-lettura-blocco { grid-template-columns: 1fr; gap: 26px; }
}

/* La fascia di truffaphishing ha tre voci, non le quattro di bg-lex: la griglia
   si adatta al numero di figli invece di lasciare una colonna vuota. */
.stats-grid:has(> .stat-item:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.stat-num .stat-pct { font-size: 26px; margin-left: 2px; }
@media (max-width: 860px) {
    .stats-grid:has(> .stat-item:nth-child(3):last-child) { grid-template-columns: 1fr; }
    .stats-grid:has(> .stat-item:nth-child(3):last-child) .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .stats-grid:has(> .stat-item:nth-child(3):last-child) .stat-item:last-child { border-bottom: none; }
}

/* Con width e height scritti nel tag, `max-width: 100%` da solo schiaccerebbe
   l'immagine ristretta a un'altezza fissa. `height: auto` tiene le proporzioni.
   Le regole piu' specifiche che impongono un'altezza (le foto dei profili, le
   testate) restano valide perche' vincono per specificita'. */
img { height: auto; }

/* Avviso mostrato quando il modulo non ha ancora un destinatario. Deliberatamente
   sobrio e non allarmante: e' una nota di anteprima, non un errore del visitatore. */
.tp-form-inattivo {
    grid-column: 1 / -1;
    margin: 18px 0 0;
    padding: 14px 16px;
    border-left: 2px solid var(--accent);
    background: rgba(154, 123, 79, 0.12);
    font-size: 13.5px;
    line-height: 1.6;
    color: #fff;
}
.contact-form .tp-form-inattivo,
.modal-form .tp-form-inattivo { color: var(--ink); background: rgba(154, 123, 79, 0.10); }

/* --- Testate su mobile ---------------------------------------------------
   Sullo schermo del telefono la hero della home arrivava al 92% dell'altezza
   utile e le testate interne al 69%: si apriva il sito e si vedeva solo
   l'immagine, senza alcun indizio che sotto ci fosse dell'altro. A crescere
   non e' l'immagine, che e' uno sfondo, ma quello che le sta dentro — due
   paragrafi da 260px complessivi e margini pensati per il desktop.
   Qui non si toglie nulla: si stringe la tipografia e si recuperano i vuoti. */
@media (max-width: 768px) {
    .lp-hero { min-height: 0; padding-top: 104px; padding-bottom: 44px; }
    .lp-hero .lp-eyebrow { margin-bottom: 14px; }
    .lp-hero-title { font-size: 32px; margin-bottom: 16px; }
    .lp-hero-sub { font-size: 15.5px; line-height: 1.62; margin-bottom: 20px; }
    .lp-hero-sub + .lp-hero-sub { margin-bottom: 28px; }

    .page-header { min-height: 300px; padding-top: 44px; padding-bottom: 44px; }
    .page-header h1, .page-header h2 { font-size: 30px; }
    .page-header p, .page-header .page-header-sub { font-size: 15px; line-height: 1.6; }
    .article-page-header { min-height: 240px; }
    .article-hero-image { min-height: 0; }
}
@media (max-width: 576px) {
    /* la regola base fissa qui 70vh: senza questa riga rientrerebbe dalla finestra */
    .lp-hero { min-height: 0; }
}

/* Telefoni con schermo basso (SE, Android compatti): li' la hero riempiva il
   99% dell'altezza e non restava alcun indizio che la pagina continuasse.
   Si stringe ancora, senza togliere una parola. */
@media (max-width: 768px) and (max-height: 720px) {
    .lp-hero { padding-top: 96px; padding-bottom: 30px; }
    .lp-hero .lp-eyebrow { margin-bottom: 10px; font-size: 10px; }
    .lp-hero-title { font-size: 29px; margin-bottom: 12px; }
    .lp-hero-sub { font-size: 14.5px; line-height: 1.55; margin-bottom: 14px; }
    .lp-hero-sub + .lp-hero-sub { margin-bottom: 20px; }
    .page-header { min-height: 240px; padding-top: 36px; padding-bottom: 36px; }
    .page-header h1, .page-header h2 { font-size: 27px; }
    .article-page-header { min-height: 200px; }
}

/* Banner cookie: sotto i 760px di altezza del viewport il pulsante dell'hero
   finirebbe sotto al banner (schermi 1366x768 e 1280x800). Sopra quella soglia
   resta dov'era. Stessa regola applicata al tema BG Lex. */
@media (min-width: 861px) and (max-height: 760px) {
    .cookie-banner { left: auto; right: 88px; }
}

/* --- Immagini come <img>, non come sfondo -------------------------------
   Lezione del go-live di studiolegalegloria.it (5.08.2026): uno sfondo CSS
   non accetta il testo alternativo e i motori non lo trattano come immagine
   del contenuto, quindi resta fuori da Google Immagini e muto per i lettori
   di schermo. Il difetto e' invisibile guardando la pagina, perche' a vedersi
   l'immagine si vede.

   `object-fit: cover` fa esattamente il ritaglio che faceva `background-size`,
   e `object-position` quello che faceva `background-position`: la resa non
   cambia di un pixel. */
.news-image img,
.article-hero-image img,
.tp-persona-fronte > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* i ritratti sono inquadrati sul volto, non al centro geometrico */
.tp-persona-fronte > img { position: absolute; inset: 0; }
.tp-persona-fronte { overflow: hidden; }
/* Il velo e il testo devono restare sopra la fotografia. Il "+" invece NO:
   e' ancorato in alto a destra con position:absolute, e mettendolo relative
   tornava nel flusso, finiva in fondo alla scheda e restava tagliato a meta'
   dal bordo inferiore. Qui gli si conferma l'ancoraggio. */
.tp-persona-vel, .tp-persona-testa { position: relative; z-index: 1; }
.tp-persona-invito { position: absolute; top: 22px; right: 22px; z-index: 2; }

/* --- Esito dell'invio dei moduli ---------------------------------------
   Il modulo ora recapita davvero (handler nel tema, niente Contact Form 7):
   servono i due messaggi di ritorno. */
.tp-avviso {
    margin: 0 0 22px;
    padding: 14px 18px;
    border-left: 3px solid;
    border-radius: 2px;
    font-size: 14.5px;
    line-height: 1.6;
}
.tp-avviso--ok { border-color: #4a7c59; background: rgba(74, 124, 89, 0.12); color: #2f5138; }
.tp-avviso--ko { border-color: #a8443c; background: rgba(168, 68, 60, 0.10); color: #7d302a; }
.lp-form-section .tp-avviso--ok,
.lp-form-section .tp-avviso--ko { color: #fff; }
/* il campo-trappola per i bot: fuori dallo schermo, mai letto dai lettori */
.tp-esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Le pagine del quotidiano: miniature + visore a schermo intero -------
   Ripreso da studiolegalegloria.it, dove l'articolo del Messaggero e' letto
   cosi'. Nel corpo dell'articolo le due scansioni erano due immagini alte
   2560 px: un muro da scorrere, e per leggere davvero bisognava comunque
   ingrandire. Qui diventano due miniature numerate, e la lettura avviene nel
   visore, con lo zoom a gradi. --- */
.press-pages { margin: 42px 0 14px; padding: 34px 38px 30px; background: var(--bg-soft); border-top: 2px solid var(--accent); text-align: center; }
.press-kicker { display: block; font-family: var(--body-font); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.8px; color: var(--accent); margin-bottom: 26px; }
.press-pages-thumbs { display: flex; gap: 26px; align-items: flex-start; justify-content: center; }
.press-thumb { position: relative; padding: 0; border: 1px solid var(--border); background: #fff; cursor: zoom-in; line-height: 0; flex: 0 1 330px; min-width: 0; transition: var(--transition); }
.press-thumb img { width: 100%; height: auto; display: block; }
.press-thumb:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(27,36,48,0.18); border-color: var(--accent); }
.press-thumb-num { position: absolute; right: -1px; bottom: -1px; background: var(--ink); color: #fff; font-family: var(--body-font); font-size: 12px; line-height: 1; padding: 6px 10px; }
.press-pages figcaption { font-family: var(--body-font); font-size: 12px; color: var(--muted); margin-top: 20px; }
.press-pages figcaption i { color: var(--accent); margin-right: 6px; }

.press-viewer { position: fixed; inset: 0; z-index: 3000; background: rgba(14,19,26,0.975); display: none; }
.press-viewer.is-open { display: block; }
.press-viewer-stage { position: absolute; inset: 62px 0 58px; overflow: auto; text-align: center; padding: 10px 0; -webkit-overflow-scrolling: touch; }
.press-viewer-stage img { display: inline-block; max-width: 94%; max-height: 100%; width: auto; height: auto; cursor: zoom-in; box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.press-viewer.is-zoomed .press-viewer-stage img { max-width: none; max-height: none; cursor: zoom-out; }
.press-viewer-bar { position: absolute; top: 0; left: 0; right: 0; height: 62px; background: rgba(12,17,24,0.96); z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; color: rgba(255,255,255,0.85); font-family: var(--body-font); font-size: 13px; letter-spacing: 0.4px; }
.press-viewer-close { background: none; border: 0; color: rgba(255,255,255,0.75); font-size: 26px; line-height: 1; cursor: pointer; padding: 6px 10px; transition: var(--transition); }
.press-viewer-close:hover { color: #fff; }
.press-viewer-nav { position: absolute; bottom: 0; left: 0; right: 0; height: 58px; background: rgba(12,17,24,0.96); z-index: 2; display: flex; align-items: center; justify-content: center; gap: 22px; }
.press-viewer-nav button { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22); color: #fff; font-family: var(--body-font); font-size: 13px; padding: 9px 18px; cursor: pointer; transition: var(--transition); }
.press-viewer-nav button:hover { background: rgba(255,255,255,0.18); }
.press-viewer-nav button[disabled] { opacity: 0.3; cursor: default; }
body.press-viewer-open { overflow: hidden; }

@media (max-width: 768px) {
    .press-pages { padding: 26px 20px 24px; }
    .press-pages-thumbs { flex-direction: column; align-items: center; gap: 20px; }
    .press-thumb { flex: 0 1 auto; max-width: 300px; }
    .press-viewer-stage { inset: 56px 0 54px; }
    .press-viewer-nav { gap: 10px; }
    .press-viewer-nav button { font-size: 12px; padding: 8px 12px; }
}

/* La miniatura sta dentro il corpo dell'articolo, dove `.article-content img`
   impone gia' `width: 100%` riferito alla colonna di testo: a parita' di
   specificita' l'immagine usciva larga quanto l'articolo e sbordava dal
   pulsante. Qui si alza la specificita' e si chiude il contenitore. */
.press-pages .press-thumb img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}
.press-pages .press-thumb { overflow: hidden; }

/* --- Esempi in home: schermate di telefono, non immagini orizzontali -------
   Le due precedenti erano larghe (997x677) e riempivano la colonna restando
   basse. Queste sono verticali: con `width: 100%` diventavano alte oltre 1200
   px e la sezione occupava tre schermate. Si limita l'altezza e si centra,
   cosi' l'ingombro torna quello di prima. Nella lettura ravvicinata di
   "Le tipologie" restano invece grandi: li' servono per essere lette. --- */
.lp-esempi .lp-esempio img {
    width: auto;
    max-width: 100%;
    max-height: 420px;
    margin: 0 auto;
}
.lp-esempi .lp-esempio { padding-top: 24px; background: var(--bg-soft-2, #fff); }
@media (max-width: 768px) {
    .lp-esempi .lp-esempio img { max-height: 340px; }
}

/* --- Spaziature verticali: allineamento a studiolegalegloria.it -----------
   Misurato sul sito vivo di SLG (1440px): padding di sezione fra 27 e 36 px,
   vuoto fra una sezione e l'altra 70 px di mediana. Qui erano 44 di padding e
   88-116 di vuoto, cioe' circa un terzo in piu': su una home lunga come questa
   diventano schermate intere di niente, e il difetto si nota soprattutto dove
   una sezione a due colonne finisce alta e la successiva riparte da capo.

   Si tocca solo lo spazio verticale FRA i blocchi: le distanze interne
   (titolo-testo, riga-riga) restano quelle approvate. --- */
.lp-section          { padding-top: 32px; padding-bottom: 32px; }
.cta, .article-cta   { padding-top: 36px; padding-bottom: 36px; }
.team-section        { padding-top: 32px; padding-bottom: 32px; }
.latest-news         { padding-top: 34px; padding-bottom: 36px; }
.stats-strip         { padding-top: 34px; padding-bottom: 34px; }
.lp-form-section     { padding-top: 44px; padding-bottom: 44px; }
.lp-press            { padding-top: 18px; padding-bottom: 32px; }

/* le testate figurate restano intatte: la loro altezza e' voluta */

@media (max-width: 768px) {
    .lp-section        { padding-top: 26px; padding-bottom: 26px; }
    .cta, .article-cta { padding-top: 28px; padding-bottom: 28px; }
    .team-section      { padding-top: 26px; padding-bottom: 26px; }
    .latest-news       { padding-top: 26px; padding-bottom: 28px; }
    .lp-form-section   { padding-top: 34px; padding-bottom: 34px; }
}


/* --- Ancoraggi dell'indice ------------------------------------------------
   L'header e' fisso: senza questo margine il titolo raggiunto dall'indice
   finisce sotto la barra e chi legge crede di essere finito nel punto
   sbagliato. */
.article-content [id],
.tp-prose [id] {
    scroll-margin-top: calc(var(--header-h, 84px) + 12px);
}


/* --- Indice degli articoli ------------------------------------------------
   Stesso riquadro editoriale di studiolegalegloria.it: si aggancia al
   titolo con id="indice" seguito dall'elenco, quindi vale per tutti gli
   articoli che gia' ce l'hanno e per quelli che verranno, senza toccare
   il contenuto. Due colonne su schermo largo, una sul telefono. */
/* Indice degli articoli: riquadro editoriale compatto, a due colonne su desktop.
   La colonna a 980px, il ritmo dei paragrafi (18px) e il filetto degli elenchi
   ordinari stanno nel blocco .article-content sopra, riga ~1233: unica versione
   effettiva, senza override in coda. */
.article-content #indice {
    margin: 38px 0 0;
    padding: 24px 30px 0;
    border-top: 1px solid var(--border);
    border-left: 2px solid var(--accent);
    background: var(--bg-soft);
    color: var(--accent);
    font-family: var(--body-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}
.article-content #indice::after {
    width: 100%;
    height: 1px;
    margin-top: 15px;
    background: var(--border);
}
.article-content #indice + ul {
    counter-reset: article-index;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
    margin: 0 0 38px;
    padding: 12px 30px 24px;
    border-left: 2px solid var(--accent);
    border-bottom: 1px solid var(--border);
    background: var(--bg-soft);
}
.article-content #indice + ul li {
    counter-increment: article-index;
    min-width: 0;
    padding: 9px 0 9px 34px;
    border-bottom: 1px solid rgba(27, 36, 48, 0.09);
}
/* Via il filetto alle voci dell'ULTIMA riga della griglia. Con «nth-last-child(-n+2)»
   funzionava solo col numero di voci pari: con 11 voci spariva il bordo della 10 (che
   sta a meta' griglia) e restava quello della 11. La penultima e' in ultima riga solo
   se occupa la prima colonna, cioe' se il suo indice e' dispari. */
.article-content #indice + ul li:last-child,
.article-content #indice + ul li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.article-content #indice + ul li::before {
    content: counter(article-index, decimal-leading-zero);
    top: 9px;
    width: auto;
    height: auto;
    background: none;
    color: var(--accent);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.7px;
}
.article-content #indice + ul a {
    display: block;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.55;
    text-decoration: none;
    transition: color 0.2s ease;
}
.article-content #indice + ul a:hover { color: var(--accent); }

@media (max-width: 700px) {
    .article-content #indice {
        margin-top: 32px;
        padding: 20px 20px 0;
    }
    .article-content #indice + ul {
        grid-template-columns: 1fr;
        column-gap: 0;
        margin-bottom: 32px;
        padding: 10px 20px 18px;
    }
    /* a colonna singola l'ultima riga e' una sola voce: il filetto lo perde solo lei */
    .article-content #indice + ul li:nth-last-child(2):nth-child(odd) {
        border-bottom: 1px solid rgba(27, 36, 48, 0.09);
    }
    .article-content #indice + ul li:last-child { border-bottom: 0; }
}

/* Campo di ricerca dell'archivio news, e salto al contenuto per chi naviga
   da tastiera: nessuno dei due c'era. */
.news-tools { display: flex; justify-content: center; margin: 0 0 38px; }
.news-search { position: relative; width: 100%; max-width: 460px; }
.news-search input {
    width: 100%; padding: 13px 44px 13px 18px; font-family: var(--body-font);
    font-size: 15px; color: var(--ink); background: #fff;
    border: 1px solid rgba(27,36,48,.16); border-radius: 3px;
}
.news-search input::placeholder { color: rgba(27,36,48,.45); }
.news-search input:focus { outline: none; border-color: var(--accent); }
.news-search i { position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    color: var(--accent); font-size: 14px; pointer-events: none; }
.news-vuoto { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 30px 0; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10001; background: var(--ink);
    color: #fff; padding: 12px 20px; font-family: var(--body-font); font-size: 14px;
    text-decoration: none; border-radius: 0 0 3px 0; }
.skip-link:focus { left: 0; outline: 2px solid var(--accent); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(1px,1px,1px,1px); white-space: nowrap; }

/* Titolo delle schede su telefono: 22px erano la misura del desktop applicata
   tale e quale a una scheda larga ~310px, e il titolo arrivava a sei righe.
   Allineato a studiolegalegloria.it (26.09.2026). */
@media (max-width: 768px) {
    .news-content h2,
    .news-content h3,
    .news-content h4 { font-size: 20px; line-height: 1.32; }
}