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

/* ===== PALETTE ===== */
:root {
    --colore-sfondo: #ffffff;
    --colore-testo: #000000;
    --colore-accenti: #999999;
    /* allineato all’altezza reale della navbar (se troppo alto resta visibile l’hero sopra #biografia) */
    --navbar-scroll-offset: 4.25rem;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--navbar-scroll-offset);
}

body {
    background-color: var(--colore-sfondo);
    color: var(--colore-testo);
    font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
}

/* ===== NAVBAR ===== */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: #000000;
    box-shadow: 0 5px 5px rgba(50, 50, 50, 0.551);
}

.navbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
}

.navbar-logo {
    color: #808080;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Offerings', serif;
    font-size: 19px;
}

.navbar-logo:hover {
    color: #ffffff;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 1.4rem;
}

.nav-menu a {
    color: #808080;
    text-decoration: none;
    font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
    display: inline-block;
    font-size: 18px;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: color 0.2s ease, transform 0.2s ease, border-bottom-color 0.2s ease;
}

.nav-menu a:hover {
    color: #ffffff;
    border-bottom-color: #808080;
    transform: translateY(2px);
}

.nav-item-dropdown {
    position: relative;
}

.nav-item-dropdown>.dropdown-trigger::after {
    content: " ▾";
    font-size: 0.8em;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    padding: 0.5rem 0;
    min-width: 140px;
    margin-top: 0;
    /* niente gap tra trigger e menu, così non \"salta\" quando scendi col mouse */
    background-color: var(--colore-sfondo);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.nav-item-dropdown:hover .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
}

/* Su mobile/desktop, quando il JS aggiunge .dropdown--open (click su Portfolio) tieni aperto il menu */
.nav-item-dropdown.dropdown--open .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
}

.dropdown-menu li {
    padding: 0;
}

.dropdown-menu a {
    display: block;
    padding: 0.5rem 1rem;
    color: #000000;
    border-bottom: none;
    padding-bottom: 0;
    transition: color 0.2s ease;
}

.dropdown-menu a:hover {
    color: #808080;
}

/* Hamburger: nascosto su desktop */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 101;
}

.hamburger-line {
    width: 24px;
    height: 2px;
    background: #808080;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger--active .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger--active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger--active .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ===== HERO SECTION: immagine fullscreen (foto 12) + titolo ===== */
@font-face {
    font-family: 'Offerings';
    src: url('assets/font/Offerings%20Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arrière Garde';
    src: url('assets/font/arriere_garde.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat Alternates Light';
    src: url('assets/font/MontserratAlternates-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Schlbkb';
    src: url('assets/font/SCHLBKBI.TTF') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Schlbki: variante per label hero iPad Mini landscape */
@font-face {
    font-family: 'Schlbki';
    src: url('assets/font/SCHLBKI.TTF') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Hero slideshow: variabili fluide (tutti i device, stessa logica) */
#hero.hero--slideshow {
    --hero-fade-duration: 0.9s;
    --hero-label-size: 48px;
    --hero-label-left: clamp(1rem, 4.5vmin, 3rem);
    --hero-label-bottom: clamp(3rem, 12vmin, 5rem);
    --hero-dots-bottom: clamp(0.65rem, 2.8vmin, 1.15rem);
    --hero-dot-size: clamp(6px, 1.4vmin, 9px);
}

/* Mobile portrait + landscape (iPhone/Android): scritte hero -8px */
@media (max-width: 768px),
(orientation: landscape) and (max-width: 932px) and (max-height: 520px) {
    #hero.hero--slideshow {
        --hero-label-size: 40px;
    }
}

#hero.hero--slideshow .hero-slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
}

#hero.hero--slideshow .hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--hero-fade-duration) ease-in-out;
    pointer-events: none;
}

#hero.hero--slideshow .hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

#hero.hero--slideshow .hero-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
}

/* Jazz: cover a piena scala, centrata; +3 cm verso il basso senza tagliare la testa */
#hero.hero--slideshow .hero-slide[data-index="0"] .hero-slide-img {
    object-fit: cover;
    object-position: center center;
    left: 0;
    width: 100%;
    height: calc(100% + 6cm);
    top: -3cm;
    bottom: auto;
    right: auto;
}

/* Mobile portrait: jazz — pan ~1cm verso destra (object-position, senza taglio bordo) */
@media (max-width: 768px) and (orientation: portrait) {
    #hero.hero--slideshow .hero-slide[data-index="0"] .hero-slide-img {
        object-position: calc(50% + 2cm) center;
    }
}

#hero.hero--slideshow .hero-slide-label {
    position: absolute;
    left: var(--hero-label-left);
    bottom: var(--hero-label-bottom);
    z-index: 2;
    font-family: 'Schlbkb', Georgia, serif;
    font-size: var(--hero-label-size);
    font-weight: 700;
    font-style: italic;
    color: #ffffff;
    text-transform: lowercase;
    line-height: 1;
    opacity: 0;
    transform: translateX(-0.65rem);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

#hero.hero--slideshow .hero-slide.is-active .hero-slide-label.hero-slide-label--in {
    animation: hero-slide-label-in 1.1s ease-out forwards;
}

@keyframes hero-slide-label-in {
    from {
        opacity: 0;
        transform: translateX(-0.65rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* iPhone: portraits — micro-slide da destra verso sinistra */
@keyframes hero-portrait-label-in-se {
    from {
        opacity: 0;
        transform: translateX(0.65rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide colours: H1 — dissolvenza + bianco → nero; H2 — solo opacity */
@keyframes hero-colours-h1-fade-in {
    from {
        opacity: 0;
        color: #ffffff;
    }

    to {
        opacity: 1;
        color: #000000;
    }
}

@keyframes hero-colours-h2-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Label colours: sale dal basso, centrata (desktop + mobile) */
@keyframes hero-colours-label-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(2cm);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

#hero.hero--slideshow .hero-dots {
    position: absolute;
    left: 50%;
    bottom: var(--hero-dots-bottom);
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: clamp(0.35rem, 1.5vmin, 0.55rem);
}

#hero.hero--slideshow .hero-dot {
    width: var(--hero-dot-size);
    height: var(--hero-dot-size);
    padding: 12px;
    border-radius: 50%;
    border: 1px solid #ffffff;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

#hero.hero--slideshow .hero-dot.is-active {
    background-color: #ffffff;
}

#hero.hero--slideshow .hero-dot:hover {
    transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
    #hero.hero--slideshow {
        --hero-fade-duration: 0.01ms;
    }

    #hero.hero--slideshow .hero-slide.is-active .hero-slide-label.hero-slide-label--in {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

@media (min-width: 769px) {
    #hero.hero--slideshow .hero-slide-img {
        object-position: center bottom;
    }

    #hero.hero--slideshow .hero-slide[data-index="0"] .hero-slide-img {
        object-position: center center;
        top: -3cm;
        height: calc(100% + 6cm);
    }

    /* Portrait: pan 1cm verso il basso */
    #hero.hero--slideshow .hero-slide[data-index="1"] .hero-slide-img {
        object-position: center calc(50% + 1cm);
    }

    /* Colours: pan 2cm verso il basso */
    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center calc(50% + 2cm);
    }
}

/* Desktop: portraits a destra (1 cm), ingresso dal margine destro */
@media (min-width: 1025px) {
    #hero.hero--slideshow .hero-slide[data-index="1"] .hero-slide-label {
        color: #000000;
        left: auto;
        right: 1cm;
        text-align: right;
        transform: translateX(100%);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-slide-label.hero-slide-label--in {
        animation: hero-portrait-label-in 0.4s ease-out forwards;
    }

    @keyframes hero-portrait-label-in {
        from {
            opacity: 0;
            transform: translateX(100%);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Colours: centrata in basso, sale dal margine inf. e si ferma a 2 cm */
    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-label {
        left: 50%;
        right: auto;
        bottom: 2cm;
        text-align: center;
        transform: translateX(-50%) translateY(2cm);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-slide-label.hero-slide-label--in {
        animation: hero-colours-label-in 0.4s ease-out forwards;
    }
}

/* Mobile portrait + landscape: colours — sale verso l'alto, centrata sopra i pallini */
@media (max-width: 767px) and (orientation: portrait),
(orientation: landscape) and (max-width: 932px) and (max-height: 520px) {
    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-label {
        left: 50%;
        right: auto;
        bottom: calc(var(--hero-dots-bottom) + var(--hero-dot-size) + 0.35rem + 5mm);
        text-align: center;
        transform: translateX(-50%) translateY(2cm);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-slide-label.hero-slide-label--in {
        animation: hero-colours-label-in 0.4s ease-out forwards;
    }

    @media (prefers-reduced-motion: reduce) {
        #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-slide-label.hero-slide-label--in {
            animation: none;
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }
}

/* CTA portfolio slide colours: nascosto di default */
#hero.hero--slideshow .hero-colours-cta {
    display: none;
}

/* Mobile portrait + landscape cellulari: CTA slide colours (1 cm sopra la scritta) */
@media (max-width: 767px) and (orientation: portrait),
(orientation: landscape) and (max-width: 932px) and (max-height: 520px) {
    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        display: inline-block;
        position: absolute;
        left: 50%;
        z-index: 3;
        transform: translateX(-50%);
        bottom: calc(var(--hero-dots-bottom) + var(--hero-dot-size) + 0.35rem + 5mm + 1cm + var(--hero-label-size, 2.5rem));
        padding: 0.6rem 0.85rem;
        font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
        font-size: clamp(14px, 3.6vw, 18px);
        font-weight: 700;
        color: #ffffff;
        background-color: transparent;
        border: 2px solid #ffffff;
        border-radius: 0;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        pointer-events: auto;
        box-sizing: border-box;
        max-width: calc(100% - 2rem);
        white-space: nowrap;
    }
}

/* Landscape cellulari: CTA molto più compatto */
@media (orientation: landscape) and (max-width: 932px) and (max-height: 520px) {
    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        padding: 0.25rem 0.4rem;
        font-size: clamp(9px, 1.9vmin, 11px);
        border-width: 1px;
        letter-spacing: 0.04em;
    }
}

/* Hero slideshow: H1 + H2 — solo desktop (misure Photoshop) */
#hero.hero--slideshow .hero-heading {
    display: none;
}

#hero.hero--slideshow .hero-title-line:last-child {
    text-transform: uppercase;
}

@media (min-width: 1024px) {
    #hero.hero--slideshow .hero-heading {
        display: flex;
        flex-direction: column;
        position: absolute;
        z-index: 4;
        margin: 0;
        padding: 0;
        pointer-events: none;
        box-sizing: border-box;
        top: calc(var(--navbar-scroll-offset) + 1cm);
        gap: 0;
        width: auto;
        max-width: none;
        transform: none;
    }

    #hero.hero--slideshow .hero-title,
    #hero.hero--slideshow .hero-subtitle {
        font-family: 'Montserrat Alternates Light', sans-serif;
        font-weight: 300;
        margin: 0;
        line-height: 1;
        letter-spacing: 0.02em;
        text-transform: none;
        text-shadow: none;
        opacity: 0;
        width: max-content;
        max-width: none;
    }

    #hero.hero--slideshow .hero-title {
        font-size: 65pt;
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: 32.5pt;
        text-transform: lowercase;
        letter-spacing: 0.06em;
        line-height: 1.05;
    }

    #hero.hero--slideshow .hero-title-line {
        display: block;
    }

    /* Jazz: 2 cm dal margine destro, bianco */
    #hero.hero--slideshow[data-active-slide="0"] .hero-heading {
        right: 2cm;
        left: auto;
        text-align: right;
        align-items: flex-end;
    }

    /* Jazz: righe H1 + H2 allineate a bandiera sul bordo destro */
    #hero.hero--slideshow[data-active-slide="0"] .hero-title {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    #hero.hero--slideshow[data-active-slide="0"] .hero-title,
    #hero.hero--slideshow[data-active-slide="0"] .hero-subtitle {
        color: #ffffff;
        align-self: flex-end;
        text-align: right;
    }

    #hero.hero--slideshow[data-active-slide="0"] .hero-subtitle {
        letter-spacing: 0.02em;
    }

    /* Portraits: 2 cm dal margine sinistro, bianco */
    #hero.hero--slideshow[data-active-slide="1"] .hero-heading {
        left: 2cm;
        right: auto;
        text-align: left;
        align-items: flex-start;
    }

    /* Portraits: righe H1 + H2 allineate a bandiera sul bordo sinistro */
    #hero.hero--slideshow[data-active-slide="1"] .hero-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #hero.hero--slideshow[data-active-slide="1"] .hero-title,
    #hero.hero--slideshow[data-active-slide="1"] .hero-subtitle {
        color: #ffffff;
        align-self: flex-start;
        text-align: left;
    }

    #hero.hero--slideshow[data-active-slide="1"] .hero-subtitle {
        letter-spacing: 0.02em;
    }

    /* Colours: centrato, nero */
    #hero.hero--slideshow[data-active-slide="2"] .hero-heading {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        text-align: center;
        align-items: center;
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-title,
    #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
        color: #000000;
        align-self: center;
    }

    #hero.hero--slideshow.hero-heading--in .hero-title {
        animation: hero-slideshow-h1-in 0.75s ease-out forwards;
    }

    #hero.hero--slideshow.hero-heading--in .hero-subtitle {
        animation: hero-slideshow-h2-in 0.7s ease-out 0.14s forwards;
    }

    /* Jazz + portraits: H1 da sotto navbar, H2 da margine dx — simultanei, rapidi, dissolvenza */
    #hero.hero--slideshow[data-active-slide="0"].hero-heading--in .hero-title,
    #hero.hero--slideshow[data-active-slide="1"].hero-heading--in .hero-title {
        animation: hero-jazz-h1-in 0.4s ease-out forwards;
    }

    #hero.hero--slideshow[data-active-slide="0"].hero-heading--in .hero-subtitle {
        animation: hero-jazz-h2-in 0.4s ease-out forwards;
    }

    #hero.hero--slideshow[data-active-slide="1"].hero-heading--in .hero-subtitle {
        animation: hero-portrait-h2-in 0.4s ease-out forwards;
    }

    /* Colours: 0,5 s dopo entrata immagine → H1, poi H2 subito dopo */
    #hero.hero--slideshow[data-active-slide="2"].hero-heading--in .hero-title {
        animation: hero-colours-h1-fade-in 0.55s ease-out 0.5s forwards;
    }

    #hero.hero--slideshow[data-active-slide="2"].hero-heading--in .hero-subtitle {
        animation: hero-colours-h2-fade-in 0.5s ease-out 0.72s forwards;
    }

    @keyframes hero-jazz-h1-in {
        from {
            opacity: 0;
            transform: translateY(calc(-1 * (var(--navbar-scroll-offset) + 1cm)));
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes hero-jazz-h2-in {
        from {
            opacity: 0;
            transform: translateX(45vw);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes hero-portrait-h2-in {
        from {
            opacity: 0;
            transform: translateX(-45vw);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes hero-slideshow-h1-in {
        from {
            opacity: 0;
            transform: translateY(-0.35rem);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes hero-slideshow-h2-in {
        from {
            opacity: 0;
            transform: translateY(-0.25rem);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (prefers-reduced-motion: reduce) {

        #hero.hero--slideshow.hero-heading--in .hero-title,
        #hero.hero--slideshow.hero-heading--in .hero-subtitle {
            animation: none;
            opacity: 1;
            transform: none;
        }
    }
}

/* Hero slideshow: H1 + H2 — mobile, tablet portrait, iPad Mini (< desktop 1024px) */
@media (max-width: 1023px) {

    #hero.hero--slideshow .hero-title,
    #hero.hero--slideshow .hero-subtitle {
        font-family: 'Montserrat Alternates Light', sans-serif;
        font-weight: 300;
        margin: 0;
        line-height: 1;
        letter-spacing: 0.02em;
        text-transform: none;
        text-shadow: none;
        opacity: 0;
        width: max-content;
        max-width: none;
    }

    #hero.hero--slideshow .hero-subtitle {
        text-transform: lowercase;
        letter-spacing: 0.06em;
        line-height: 1.05;
    }

    #hero.hero--slideshow .hero-title-line {
        display: block;
    }

    #hero.hero--slideshow .hero-heading {
        flex-direction: column;
        position: absolute;
        z-index: 4;
        margin: 0;
        padding: 0;
        pointer-events: none;
        box-sizing: border-box;
        gap: 0;
        width: auto;
        max-width: none;
    }

    #hero.hero--slideshow.hero-heading--in .hero-title {
        animation: hero-mobile-slideshow-h1-in 0.75s ease-out forwards;
    }

    #hero.hero--slideshow.hero-heading--in .hero-subtitle {
        animation: hero-mobile-slideshow-h2-in 0.7s ease-out 0.14s forwards;
    }

    #hero.hero--slideshow[data-active-slide="2"].hero-heading--in .hero-title {
        animation: hero-colours-h1-fade-in 0.55s ease-out 0.5s forwards;
    }

    #hero.hero--slideshow[data-active-slide="2"].hero-heading--in .hero-subtitle {
        animation: hero-colours-h2-fade-in 0.5s ease-out 0.72s forwards;
    }

    @keyframes hero-mobile-slideshow-h1-in {
        from {
            opacity: 0;
            transform: translateY(-0.35rem);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes hero-mobile-slideshow-h2-in {
        from {
            opacity: 0;
            transform: translateY(-0.25rem);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Mobile portrait: H1/H2 solo su slide colours (cielo) */
    @media (max-width: 767px) and (orientation: portrait) {
        #hero.hero--slideshow .hero-heading {
            display: none;
        }

        #hero.hero--slideshow[data-active-slide="2"] .hero-heading {
            display: flex;
            top: calc(var(--navbar-scroll-offset) + 0.5rem);
            left: 50%;
            right: auto;
            transform: translateX(-50%);
            text-align: center;
            align-items: center;
        }

        #hero.hero--slideshow[data-active-slide="2"] .hero-title,
        #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
            color: #000000;
            align-self: center;
            text-align: center;
        }

        #hero.hero--slideshow[data-active-slide="2"] .hero-title {
            font-size: clamp(46px, calc(9.5vw + 16px), 58px);
        }

        #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
            font-size: clamp(31px, calc(4.8vw + 16px), 37px);
            letter-spacing: 0.02em;
        }
    }

    /* Mobile landscape: tre slide (layout ridotto tipo desktop) */
    @media (orientation: landscape) and (max-height: 520px) {
        #hero.hero--slideshow .hero-heading {
            display: flex;
            top: calc(var(--navbar-scroll-offset) + 0.35rem);
            transform: none;
        }

        #hero.hero--slideshow .hero-title {
            font-size: clamp(36px, calc(5.2vmin + 16px), 50px);
        }

        #hero.hero--slideshow .hero-subtitle {
            font-size: clamp(26px, calc(2.6vmin + 16px), 33px);
            letter-spacing: 0.02em;
        }

        #hero.hero--slideshow[data-active-slide="0"] .hero-heading {
            right: clamp(0.75rem, 3vmin, 1.25rem);
            left: auto;
            text-align: right;
            align-items: flex-end;
        }

        #hero.hero--slideshow[data-active-slide="0"] .hero-title {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        #hero.hero--slideshow[data-active-slide="0"] .hero-title,
        #hero.hero--slideshow[data-active-slide="0"] .hero-subtitle {
            color: #ffffff;
            align-self: flex-end;
            text-align: right;
        }

        #hero.hero--slideshow[data-active-slide="1"] .hero-heading {
            left: clamp(0.75rem, 3vmin, 1.25rem);
            right: auto;
            text-align: left;
            align-items: flex-start;
        }

        #hero.hero--slideshow[data-active-slide="1"] .hero-title {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        #hero.hero--slideshow[data-active-slide="1"] .hero-title,
        #hero.hero--slideshow[data-active-slide="1"] .hero-subtitle {
            color: #ffffff;
            align-self: flex-start;
            text-align: left;
        }

        #hero.hero--slideshow[data-active-slide="2"] .hero-heading {
            left: 50%;
            right: auto;
            transform: translateX(-50%);
            text-align: center;
            align-items: center;
        }

        #hero.hero--slideshow[data-active-slide="2"] .hero-title,
        #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
            color: #000000;
            align-self: center;
            text-align: center;
        }
    }

    /* Tablet portrait: H1/H2 solo su slide colours (slide 0 e 1 nascosti) */
    @media (min-width: 768px) and (orientation: portrait) {
        #hero.hero--slideshow .hero-heading {
            display: none;
        }

        #hero.hero--slideshow[data-active-slide="2"] .hero-heading {
            display: flex;
            top: calc(var(--navbar-scroll-offset) + 0.75rem);
            left: 50%;
            right: auto;
            transform: translateX(-50%);
            text-align: center;
            align-items: center;
        }

        #hero.hero--slideshow[data-active-slide="2"] .hero-title,
        #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
            color: #000000;
            align-self: center;
            text-align: center;
        }

        #hero.hero--slideshow[data-active-slide="2"] .hero-title {
            font-size: clamp(56px, calc(7.5vw + 16px), 72px);
        }

        #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
            font-size: clamp(36px, calc(3.75vw + 16px), 44px);
            letter-spacing: 0.02em;
        }
    }

    /* Tablet landscape (768–1023px): tre slide — famiglia viewport, non singolo modello */
    @media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) and (min-height: 521px) {
        #hero.hero--slideshow .hero-heading {
            display: flex;
            top: calc(var(--navbar-scroll-offset) + 0.5rem);
            transform: none;
        }

        #hero.hero--slideshow .hero-title {
            font-size: clamp(52px, calc(5.5vmin + 16px), 64px);
            white-space: nowrap;
        }

        #hero.hero--slideshow .hero-subtitle {
            font-size: clamp(27px, calc(2.75vmin + 9px), 33px);
            letter-spacing: 0.02em;
        }

        #hero.hero--slideshow[data-active-slide="0"] .hero-heading {
            right: 1.5rem;
            left: auto;
            text-align: right;
            align-items: flex-end;
        }

        #hero.hero--slideshow[data-active-slide="0"] .hero-title {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        #hero.hero--slideshow[data-active-slide="0"] .hero-title,
        #hero.hero--slideshow[data-active-slide="0"] .hero-subtitle {
            color: #ffffff;
            align-self: flex-end;
            text-align: right;
        }

        #hero.hero--slideshow[data-active-slide="1"] .hero-heading {
            left: 1.5rem;
            right: auto;
            text-align: left;
            align-items: flex-start;
        }

        #hero.hero--slideshow[data-active-slide="1"] .hero-title {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        #hero.hero--slideshow[data-active-slide="1"] .hero-title,
        #hero.hero--slideshow[data-active-slide="1"] .hero-subtitle {
            color: #ffffff;
            align-self: flex-start;
            text-align: left;
        }

        #hero.hero--slideshow[data-active-slide="2"] .hero-heading {
            left: 50%;
            right: auto;
            top: calc(var(--navbar-scroll-offset) + 0.5rem + 0.5cm);
            transform: translateX(-50%);
            text-align: center;
            align-items: center;
        }

        #hero.hero--slideshow[data-active-slide="2"] .hero-title,
        #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
            color: #000000;
            align-self: center;
            text-align: center;
        }
    }

    /* iPad Mini portrait 768px: H1 su una riga */
    @media (width: 768px) and (orientation: portrait) {
        #hero.hero--slideshow .hero-title {
            white-space: nowrap;
        }
    }

    @media (prefers-reduced-motion: reduce) {

        #hero.hero--slideshow.hero-heading--in .hero-title,
        #hero.hero--slideshow.hero-heading--in .hero-subtitle {
            animation: none;
            opacity: 1;
            transform: none;
        }
    }
}

/* Hero: stesso rapporto della foto 1920×1080 (16:9) — altezza = larghezza×9/16, nessun ritaglio */
#hero {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background: #000000;
}

#hero .hero-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    pointer-events: none;
}

/* Desktop: Home si ferma al bordo inferiore della foto (box viewport utile) */
@media (min-width: 769px) {
    #hero {
        aspect-ratio: auto;
        height: 100dvh;
        min-height: 100dvh;
    }

    #hero .hero-bg-image {
        object-position: center bottom;
    }

    #hero .hero-title {
        position: relative;
        top: -2.5mm;
    }

    #hero .hero-subtitle {
        margin-top: 0.2rem;
    }
}

/* Blocco titoli + CTA: una colonna allineata a destra, proporzioni fluide */
#hero {
    --hero-edge: clamp(1rem, 3vw, 2.25rem);
}

#hero .hero-heading {
    position: absolute;
    z-index: 1;
    top: calc(36% - 2.2cm);
    left: auto;
    right: var(--hero-edge);
    width: auto;
    max-width: min(92vw, 22rem);
    padding: 0;
    transform: translateY(-50%);
    box-sizing: border-box;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(0.25rem, 1.2vh, 0.5rem);
}

#hero .hero-title {
    margin: 0;
    font-family: 'Montserrat Alternates Light', sans-serif;
    font-size: clamp(32px, 11vmin, 140px);
    font-weight: normal;
    color: #ffffff;
    line-height: 0.95;
    text-transform: none;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    word-wrap: break-word;
    overflow-wrap: break-word;
    align-self: flex-end;
    width: max-content;
    max-width: 100%;
}

#hero .hero-subtitle {
    margin: 0;
    font-family: 'Offerings', sans-serif;
    font-size: clamp(18px, 4.5vmin, 46px);
    font-weight: bold;
    color: hsl(0, 0%, 90%);
    letter-spacing: 0.15em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    text-transform: lowercase;
    align-self: flex-end;
    width: max-content;
    max-width: 100%;
}

/* CTA hero: angolo basso destro (non nel blocco titoli, così non scende sul volto) */
#hero>.cta-button {
    position: absolute;
    z-index: 1;
    left: auto;
    right: var(--hero-edge);
    bottom: clamp(1rem, 4vh, 2rem);
    top: auto;
    width: max-content;
    max-width: calc(100vw - var(--hero-edge) * 2);
    text-align: center;
    box-sizing: border-box;
}

/* Desktop / tablet landscape: h2 hero bianco */
@media (min-width: 769px) and (orientation: landscape) {
    #hero .hero-subtitle {
        color: #ffffff;
    }
}

/* Hero: portrait fino a tablet (768px incluso) — fullscreen, titoli in alto a destra */
@media (max-width: 768px) and (orientation: portrait) {
    #hero {
        aspect-ratio: auto;
        height: 100dvh;
        min-height: 100dvh;
    }

    #hero .hero-bg-image {
        object-position: 30% 67%;
    }

    #hero .hero-heading {
        top: clamp(4.5rem, 11vh, 5.5rem);
        transform: none;
        max-width: min(78vw, 11.5rem);
    }

    #hero .hero-title {
        white-space: normal;
        max-width: 8ch;
        font-size: clamp(32px, 11vw, 64px);
        line-height: 0.92;
    }

    #hero .hero-subtitle {
        font-size: clamp(17px, 4.2vw, 30px);
        color: #000000;
    }

    #hero>.cta-button {
        bottom: clamp(1rem, 5vh, 1.75rem);
        font-size: clamp(12px, 3.2vw, 16px);
        padding: 0.5rem 0.65rem;
    }
}

/* Hero: portrait smartphone (escluso iPhone SE 375px e tablet ≥768px) — h1/h2 +4px, h2 nero */
@media (max-width: 374px) and (orientation: portrait),
(min-width: 376px) and (max-width: 767px) and (orientation: portrait) {
    #hero .hero-title {
        font-size: clamp(36px, calc(11vw + 4px), 68px);
    }

    #hero .hero-subtitle {
        font-size: clamp(21px, calc(4.2vw + 4px), 34px);
        color: #000000;
    }
}

/* Hero: landscape — titoli in alto a destra, CTA in basso, nome che non esce dallo schermo */
@media (orientation: landscape) {
    #hero {
        aspect-ratio: auto;
        height: 100dvh;
        min-height: 100dvh;
    }

    #hero .hero-bg-image {
        object-position: 32% 64%;
    }

    #hero .hero-heading {
        top: clamp(3.25rem, 12vh, 4.75rem);
        transform: none;
        max-width: min(52vw, 14rem);
    }

    #hero .hero-title {
        white-space: normal;
        max-width: min(11ch, calc(100vw - var(--hero-edge) * 2 - 1rem));
        font-size: clamp(26px, 7.5vw, 58px);
        line-height: 0.92;
    }

    #hero .hero-subtitle {
        font-size: clamp(15px, 3.5vw, 32px);
        color: #ffffff;
    }

    #hero>.cta-button {
        bottom: clamp(0.5rem, 3vh, 1rem);
        font-size: clamp(11px, 2.2vw, 15px);
        padding: 0.45rem 0.55rem;
    }
}

/* Slideshow: cellulari landscape (SE, X, S8/S9, ecc.) — hero 16:9, più alto del viewport */
@media (orientation: landscape) and (max-width: 932px) and (max-height: 520px) {
    #hero.hero--slideshow {
        aspect-ratio: 16 / 9;
        width: 100%;
        height: auto;
        min-height: 0;
        --hero-label-bottom: clamp(1.25rem, 7vmin, 2.75rem);
        --hero-dots-bottom: clamp(0.5rem, 2.2vmin, 0.9rem);
    }

    #hero.hero--slideshow .hero-slide[data-index="0"] .hero-slide-img {
        object-position: center calc(50% + 1cm);
    }

    /* Colours: annulla pan +2cm desktop (causa striscia nera sotto navbar) */
    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }
}

/* Hero: landscape solo smartphone — h1 su una riga, h2 subito sotto */
@media (orientation: landscape) and (max-height: 500px) {
    #hero .hero-heading {
        top: calc(clamp(3.5rem, 16vh, 4.75rem) + 5mm);
        gap: 0.05rem;
        max-width: calc(100vw - var(--hero-edge) * 2 - 0.5rem);
    }

    #hero .hero-title {
        white-space: nowrap;
        max-width: none;
        width: max-content;
        font-size: clamp(22px, 5.8vw, 46px);
        line-height: 1;
    }

    #hero .hero-subtitle {
        margin: 0;
        font-size: clamp(16px, calc(3vw + 3px), 27px);
        line-height: 1.05;
        width: max-content;
        align-self: flex-end;
    }
}

/* Hero: desktop landscape — blocco titoli centrato verticalmente (layout originale) */
@media (min-width: 1025px) and (orientation: landscape) {
    #hero .hero-heading {
        top: calc(36% - 2.2cm);
        right: clamp(2rem, 4vw, 4rem);
        transform: translateY(-50%);
        width: max-content;
        max-width: calc(100vw - clamp(2rem, 4vw, 4rem) * 2);
        align-items: flex-end;
    }

    #hero .hero-title {
        white-space: nowrap;
        max-width: 100%;
        font-size: clamp(32px, 11vmin, 140px);
    }

    #hero .hero-subtitle {
        font-size: calc(clamp(18px, 4.5vmin, 46px) + 12px);
    }

    #hero>.cta-button {
        right: clamp(2rem, 4vw, 4rem);
        bottom: calc(clamp(1.25rem, 5vh, 2.5rem) + 0.5cm);
    }

    #hero>.cta-button:hover {
        background-color: #2b2b2b;
        color: #ffffff;
        border-color: #ff5500;
    }
}

/* Hero: portrait tablet (come Surface Duo + 15px su h1/h2) — iPad Mini/Air/Pro, Galaxy Tab S4, Surface Pro 7, ecc. */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
    #hero {
        aspect-ratio: auto;
        height: 100dvh;
        min-height: 100dvh;
    }

    #hero .hero-bg-image {
        object-position: 30% 67%;
    }

    #hero .hero-heading {
        top: clamp(4.5rem, 11vh, 5.5rem);
        right: clamp(1.75rem, 5vw, 3.5rem);
        left: auto;
        transform: none;
        width: max-content;
        max-width: calc(100vw - clamp(1.75rem, 5vw, 3.5rem) * 2);
        align-items: flex-end;
        gap: clamp(0.15rem, 0.6vh, 0.35rem);
    }

    #hero .hero-title {
        position: static;
        top: auto;
        white-space: normal;
        max-width: 8ch;
        font-size: clamp(51px, calc(11vw + 19px), 83px);
        line-height: 0.92;
    }

    #hero .hero-subtitle {
        margin: 0;
        font-size: clamp(36px, calc(4.2vw + 19px), 49px);
        letter-spacing: 0.1em;
        max-width: 100%;
        align-self: flex-end;
        color: #000000;
    }

    #hero>.cta-button {
        right: clamp(1.75rem, 5vw, 3.5rem);
        bottom: clamp(1rem, 5vh, 1.75rem);
        font-size: clamp(19px, calc(3.2vw + 7px), 23px);
        padding: calc(0.5rem + 3.5px) calc(0.65rem + 3.5px);
    }
}

/* Hero: portrait iPad Mini (768px) — h1 su una riga, dimensioni invariate */
@media (width: 768px) and (orientation: portrait) {
    #hero .hero-title {
        white-space: nowrap;
        max-width: none;
    }
}

/* Hero: landscape iPad Mini (1024×768) — h1 su una riga, dimensioni invariate */
@media (width: 1024px) and (height: 768px) and (orientation: landscape) {
    #hero .hero-title {
        white-space: nowrap;
        max-width: none;
    }
}

/* Hero: portrait Galaxy Tab S4 (712px) — solo h2, evita taglio a destra */
@media (width: 712px) and (orientation: portrait) {
    #hero .hero-heading {
        right: clamp(2.25rem, 7vw, 4rem);
        max-width: calc(100vw - clamp(2.25rem, 7vw, 4rem) * 2);
    }

    #hero .hero-subtitle {
        letter-spacing: 0.05em;
        max-width: 100%;
    }

    #hero>.cta-button {
        font-size: clamp(19px, calc(3.2vw + 7px), 23px);
        padding: calc(0.5rem + 3.5px) calc(0.65rem + 3.5px);
    }
}

/* Hero: portrait iPad Pro (11" 834px / 12,9" 1024px) — h1+h2 più in basso, h1 +5px */
@media (width: 834px) and (orientation: portrait),
(width: 1024px) and (orientation: portrait) {
    #hero .hero-heading {
        top: calc(clamp(4.5rem, 11vh, 5.5rem) + 2cm);
    }

    #hero .hero-title {
        font-size: calc(clamp(51px, calc(11vw + 19px), 83px) + 12px);
    }
}

/* Hero: landscape iPad Air — SOLO h1 -7px (come desktop landscape) */
@media (orientation: landscape) and (min-width: 1025px) and (max-width: 1210px) and (min-height: 760px) and (max-height: 880px) {
    #hero .hero-title {
        font-size: calc(clamp(32px, 11vmin, 140px) - 7px);
    }
}

/* Hero: landscape iPad Pro — h1 come Air (11vmin su ~820px − 7px ≈ 83px, non 11vmin su 1024) */
@media (orientation: landscape) and (min-width: 1360px) and (max-width: 1390px) and (min-height: 950px) and (max-height: 1100px) {
    #hero .hero-title {
        font-size: clamp(32px, 8.05vmin, 83px);
    }
}

@media (orientation: landscape) and (width: 1366px) and (height: 1024px),
(orientation: landscape) and (width: 1376px) and (height: 1032px) {
    #hero .hero-title {
        font-size: clamp(32px, 8.05vmin, 83px);
    }
}

.cta-button {
    display: inline-block;
    padding: 0.65rem 0.85rem;
    font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
    font-size: clamp(15px, 3vmin, 24px);
    font-weight: 700;
    color: #000000;
    background-color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    text-transform: lowercase;
    letter-spacing: 0.12em;
    border: 3px solid #ff5500;
    border-radius: 10px;
    transition: background 0.25s ease, color 0.25s ease;
}

.cta-button:hover {
    background: #333333;
    color: #000000;
}

/* ============================================
   SEZIONE BIOGRAFIA - Layout Grid Semplificato
   ============================================ */

/* ===== BIOGRAFIA — PROPOSTA MIX ===== */
.biografia-section {
    width: 100%;
    background: #1a1a1a;
    padding: 4rem 2rem;
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Evita scroll orizzontale con la fascia collaborazioni a 100vw */
    overflow-x: hidden;
}

.biografia-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Hero: foto a sinistra, titolo/sottotitolo/lead a destra (desktop) */
.biografia-hero {
    display: grid;
    grid-template-columns: 600px 1fr;
    grid-template-rows: auto auto auto;
    gap: 0 3rem;
    align-items: end;
    margin-bottom: 3.5rem;
}

/* Foto occupa tutte le righe a sinistra */
.biografia-foto {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: end;
}

.biografia-foto img {
    width: 600px;
    height: 400px;
    max-width: 100%;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 1.5rem;
    border: 10px solid #ffffff;
    display: block;
}

/* Titolo, sottotitolo, lead a destra */
.biografia-title {
    grid-column: 2;
    grid-row: 1;
    font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0.5rem;
    align-self: end;
}

.biografia-subtitle {
    grid-column: 2;
    grid-row: 2;
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-weight: 700;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.08em;
    margin-bottom: 1.5rem;
}

.biografia-lead {
    grid-column: 2;
    grid-row: 3;
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    align-self: start;
}

/* Corpo testo a due colonne */
.biografia-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}

.biografia-col p {
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    text-align: justify;
    margin-bottom: 1.2rem;
}

.biografia-col p strong {
    display: block;
    color: #ffffff;
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
    margin-top: 0.5rem;
    letter-spacing: 0.03em;
}

/* Fascia bianca collaborazioni a tutta larghezza (contenuto interno in .biografia-container) */
.biografia-collaborazioni-outer {
    width: 100vw;
    max-width: 100vw;
    flex-shrink: 0;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    background: #ffffff;
    padding-top: 2.75rem;
    padding-bottom: 3rem;
    /* Ombra più leggera: stacca dal fondo scuro senza effetto “pannello” troppo marcato */
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

/* Sfondo jazz sotto la fascia riconoscimenti/collaborazioni (25% opacità) */
.biografia-collaborazioni-outer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('assets/images/photo-jazz/full/01.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.25;
    pointer-events: none;
}

/* Ripristina margini lettura (la fascia esce dal padding della sezione) */
.biografia-collaborazioni-outer>.biografia-container {
    position: relative;
    z-index: 1;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
}

/* Collaborazioni di Rilievo — scheda pulita su fondo bianco */
.biografia-collaborazioni {
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
}

.biografia-collaborazioni-title {
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 600;
    color: #000000;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 1.35rem;
}

.biografia-collaborazioni-list {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0;
}

.biografia-collaborazioni-list li {
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8;
    color: #000000;
    margin-bottom: 0.85rem;
}

.biografia-collaborazioni-list li::marker {
    color: #000000;
}

.biografia-collaborazioni-list li strong {
    font-weight: 600;
    color: #000000;
}

/* Solo il testo descrittivo: più marcato ma non grassetto (le date restano 600) */
.biografia-collaborazioni-testo {
    font-weight: 500;
    letter-spacing: 0.035em;
}

.biografia-links {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.biografia-links a {
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #000000;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}

.biografia-links a:hover {
    color: #000000;
}

/* Citazione nel testo biografico (sotto «La Mia Fotografia Oggi»): corsivo elegante, più piccolo */
.biografia-col .biografia-quote {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: clamp(0.88rem, 1.05vw, 0.95rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    text-align: left;
    margin: 1.2rem 0 1.45rem;
    padding: 0;
    border: none;
    max-width: none;
}

/* ===== BIOGRAFIA — TABLET + MOBILE (≤1024px) ===== */
@media (max-width: 1024px) {
    .biografia-collaborazioni-outer>.biografia-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .biografia-section {
        padding: 3rem 1.5rem;
    }

    .biografia-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    /* Ordine: titolo → foto → sottotitolo → lead */
    .biografia-title {
        order: 1;
        text-align: center;
        margin-bottom: 1.5rem;
        width: 100%;
    }

    .biografia-foto {
        order: 2;
        max-width: 600px;
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .biografia-foto img {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
    }

    .biografia-subtitle {
        order: 3;
        text-align: center;
        margin-bottom: 1rem;
        width: 100%;
    }

    .biografia-lead {
        order: 4;
        text-align: justify;
        margin-bottom: 0;
        width: 100%;
    }
}

/* ===== BIOGRAFIA — MOBILE (≤768px) ===== */
@media (max-width: 768px) {
    .biografia-collaborazioni-outer>.biografia-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .biografia-section {
        padding: 3rem 1.25rem;
    }

    .biografia-body {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .biografia-col .biografia-quote {
        font-size: 0.94rem;
    }

    .biografia-links {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .biografia-foto {
        align-self: center;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 1024px) and (orientation: landscape) {
    .biografia-hero {
        width: 100%;
        align-items: center;
    }

    .biografia-foto {
        width: min(100%, 600px);
        max-width: 600px;
        margin: 0 auto 1.5rem;
    }

    .biografia-foto img {
        width: 100%;
        margin: 0;
    }
}

/* ===== BIOGRAFIA — SMALL MOBILE (≤480px) ===== */
@media (max-width: 480px) {
    .biografia-collaborazioni-outer>.biografia-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .biografia-section {
        padding: 2rem 1.25rem;
    }

}

/* ===== PORTFOLIO ===== */
#portfolio {
    padding: 3.5rem 1.75rem;
    font-size: 1.5rem;
    background: #1a1a1a;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.portfolio-title {
    font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
    text-align: center;
    margin-bottom: 1.5rem;
    color: #ffffff;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    letter-spacing: 0.2em;
    width: 100%;
}

.portfolio-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin-bottom: 1.75rem;
}

.portfolio-tabs [role="tab"] {
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    color: var(--colore-testo);
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.portfolio-tabs [role="tab"]:hover,
.portfolio-tabs [role="tab"][aria-selected="true"] {
    color: var(--colore-accenti);
}

.portfolio-tabs [role="tab"][aria-selected="true"] {
    border-bottom-color: var(--colore-testo);
}

.portfolio-panel[hidden] {
    display: none;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Card portfolio: stesso linguaggio visivo delle card Mostre (.mostre-card) */
#portfolio .portfolio-item {
    width: 100%;
    max-width: none;
    margin: 0;
    background: #999999;
    border: 1px solid #ffffff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#portfolio .portfolio-item-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    background: #999999;
    padding: 10px 14px;
    flex-shrink: 0;
    min-width: 0;
}

#portfolio .portfolio-item-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--colore-accenti);
}

#portfolio .portfolio-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease-out;
}

#portfolio .portfolio-item:hover .portfolio-item-image {
    transform: scale(1.03);
}

/* Customs: centrata orizzontalmente, inquadratura un po’ più verso il basso */
#portfolio .portfolio-item--customs .portfolio-item-image {
    object-position: 50% 28%;
}

/* Windows: ritaglio per centrare meglio la figura in finestra (affina le % se serve) */
#portfolio .portfolio-item--windows .portfolio-item-image {
    object-position: 40% 70%;
}

.portfolio-item-featured {
    position: relative;
    background-color: transparent;
    opacity: 1;
    cursor: pointer;
}

#portfolio .portfolio-item-label {
    color: #000000;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-size: calc(0.95rem + 3px);
    line-height: 1.2;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#portfolio .portfolio-item-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    color: #000000;
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-size: calc(0.75rem + 2px);
    font-weight: 400;
    border: 1px solid #999999;
    border-radius: 12px;
    padding: 2px 8px;
    white-space: nowrap;
    line-height: 1.3;
}

/* Icona fotocamera nel badge: linea sottile come i contatti, più piccola */
#portfolio .portfolio-item-count-icon {
    flex-shrink: 0;
    width: 0.9em;
    height: 0.9em;
    color: currentColor;
}

#portfolio .portfolio-item-count-text {
    display: inline;
}

.portfolio-item-placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--colore-accenti);
    opacity: 0.4;
}

/* ===== PAGINE GALLERY (Portfolio + Mostre) ===== */
.gallery-page {
    padding-top: 80px;
    min-height: 100vh;
    background: #1a1a1a;
}

.gallery-page .gallery-intro .gallery-title {
    color: #ffffff;
}

.gallery-page .gallery-intro .gallery-subtitle {
    color: #b0b0b0;
}

/* Solo portfolio: titolo intro +5px sulle rem base; sottotitolo (h2 visivo) in maiuscolo e −2px rispetto alla base */
.gallery-page:not(.gallery-page--mostra-principale) .gallery-intro .gallery-title {
    font-size: calc(2rem + 5px);
}

.gallery-page:not(.gallery-page--mostra-principale) .gallery-intro .gallery-subtitle {
    font-size: calc(1.25rem - 2px);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.gallery-page .gallery-intro .gallery-desc {
    color: #cccccc;
}

/* Miniature: bordo bianco 1px in tutte le photogallery */
.gallery-page .masonry-item img {
    border: 1px solid #ffffff;
    box-sizing: border-box;
}

/* Pagine mostra (Auschwitz, Jazz): una foto in alto a sx, testo sotto */
.mostra-page-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
    text-align: left;
}

/* Auschwitz / Umbria-jazz: foto a sx, testo a destra, bandiera giustificata */
.mostra-page-content--foto-testo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
}

.mostra-page-content--foto-testo-row .mostra-page-foto-link,
.mostra-page-content--foto-testo-row>.mostra-page-foto-wrap {
    margin: 0;
    flex-shrink: 0;
}

.mostra-page-content--foto-testo-row .mostra-page-testo {
    flex: 1;
    min-width: 280px;
}

.mostra-page-content--foto-testo-row .mostra-page-desc {
    text-align: justify;
}

/* Mostra Jazz: dopo l'elenco rassegne, immagine articolo sotto la hero + testo a fianco e sotto */
.mostra-page-content--foto-testo-row.mostra-page-content--jazz-grid {
    display: grid;
    grid-template-columns: minmax(200px, 320px) 1fr;
    column-gap: 1.5rem;
    row-gap: 3rem;
    align-items: start;
}

.mostra-page-content--jazz-grid .mostra-jazz-foto-hero {
    grid-column: 1;
    grid-row: 1;
}

.mostra-page-content--jazz-grid>.mostra-page-testo {
    grid-column: 2;
    grid-row: 1;
}

.mostra-page-content--jazz-grid .mostra-jazz-articolo-foto {
    grid-column: 1;
    grid-row: 2;
    margin: 3mm 0 0 0;
    max-width: 320px;
}

.mostra-page-content--jazz-grid .mostra-jazz-articolo-img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-sizing: border-box;
}

.mostra-page-content--jazz-grid .mostra-jazz-articolo-testo {
    grid-column: 2;
    grid-row: 2;
}

.mostra-page-content--jazz-grid .mostra-jazz-articolo-sotto {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: -1rem;
}

/* Mostra Jazz: Gazzetta come articolo (320px), testo intorno a destra */
.gallery-page--mostra-jazz .mostra-jazz-articolo-sotto {
    overflow: hidden;
}

.gallery-page--mostra-jazz .mostra-jazz-gazzetta-box {
    float: right;
    width: 100%;
    max-width: 320px;
    margin: 0.25rem 0 1rem 1.5rem;
    border: 1px solid #ffffff;
    box-sizing: border-box;
}

.gallery-page--mostra-jazz .mostra-jazz-gazzetta-box img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    vertical-align: top;
}

@media (max-width: 768px) {
    .mostra-page-content--foto-testo-row.mostra-page-content--jazz-grid {
        display: flex;
        flex-direction: column;
    }

    .mostra-page-content--jazz-grid .mostra-jazz-articolo-foto {
        max-width: none;
    }

    .mostra-page-content--jazz-grid .mostra-jazz-articolo-img {
        max-width: min(280px, 100%);
    }

    .gallery-page--mostra-jazz .mostra-jazz-gazzetta-box {
        float: none;
        max-width: min(280px, 100%);
        margin: 1.25rem auto 1rem;
    }

    .gallery-page--mostra-jazz .mostra-jazz-gazzetta-box img {
        max-width: min(280px, 100%);
    }
}

/* Auschwitz: hover foto 11cop – solo zoom in avanti dell’immagine */
.mostra-page-content--foto-testo-row>.mostra-page-foto-wrap:hover .mostra-page-foto {
    transform: scale(1.15);
}

/* Riga articolo e trafiletto sotto: a tutta larghezza, sotto la prima riga (11cop | testo) */
.mostra-page-content--foto-testo-row>.mostra-articolo-row {
    width: 100%;
    flex-basis: 100%;
    margin-top: 2.5rem;
}

.mostra-page-content--foto-testo-row>.mostra-articolo-sotto {
    width: 100%;
    flex-basis: 100%;
    margin-top: 1.5rem;
}

.mostra-articolo-sotto p {
    margin: 0;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1rem;
    line-height: 1.65;
    color: #cccccc;
    text-align: justify;
}

.mostra-page-foto-link {
    display: block;
    max-width: 320px;
    text-decoration: none;
    color: inherit;
    margin: 0 0 1.5rem 0;
    cursor: pointer;
}

.mostra-page-foto-link .mostra-page-foto-wrap {
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.mostra-page-foto-link:hover .mostra-page-foto-wrap {
    border-color: rgba(255, 255, 255, 0.6);
}

.mostra-page-foto-link:hover .mostra-page-foto-wrap .mostra-page-foto {
    transform: scale(1.15);
}

.mostra-page-foto-wrap {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin: 0;
}

.gallery-page--mostra-principale .mostra-page-foto-link .mostra-page-foto-wrap {
    border-width: 4px;
    border-color: #ffffff;
}

.gallery-page--mostra-storie .mostra-page-foto-wrap {
    border-width: 4px;
    border-color: #ffffff;
}

/* Mostra Jazz: abbassa il crop per mostrare meglio il volto del musicista */
.gallery-page--mostra-jazz .mostra-page-foto-wrap .mostra-page-foto {
    object-position: center 20%;
}

.mostra-page-foto-wrap .mostra-page-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    box-sizing: border-box;
    transition: transform 0.25s ease;
}

.mostra-page-testo {
    color: #cccccc;
}

.mostra-page-desc {
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 1.25rem;
    color: #cccccc;
}

.mostra-page-titolo-lista {
    font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 0.5rem;
}

.mostra-page-lista {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 1rem;
    color: #b0b0b0;
    line-height: 1.8;
}

.mostra-page-lista li {
    margin-bottom: 0.35rem;
}

/* Miniatura articolo Auschwitz: bordo bianco, hover zoom, lightbox al click */
.mostra-articolo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
    margin-top: 0;
}

.mostra-articolo-testo {
    flex: 1;
    min-width: 280px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1rem;
    line-height: 1.65;
    color: #cccccc;
    text-align: justify;
}

.mostra-articolo-testo p {
    margin: 0 0 1rem 0;
}

.mostra-articolo-testo p:last-child {
    margin-bottom: 0;
}

/* Testo articolo sotto la foto (Auschwitz): full width, bandiera giustificata */
.mostra-articolo-testo.sotto-foto {
    width: 100%;
    margin-top: 1rem;
    text-align: justify;
}

/* Pagine Mostre: sottotitoli e testi in Century Gothic (titoli esclusi) */
.gallery-page--mostra-principale h2,
.gallery-page--mostra-principale .gallery-subtitle,
.gallery-page--mostra-principale .mostra-page-desc,
.gallery-page--mostra-principale .mostra-page-lista,
.gallery-page--mostra-principale .mostra-page-lista li,
.gallery-page--mostra-principale .mostra-articolo-testo,
.gallery-page--mostra-principale .mostra-articolo-testo p {
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
}

/* Mostra Jazz: Century Gothic anche per sottotitolo e titoli sezione */
.gallery-page--mostra-jazz .gallery-intro .gallery-subtitle {
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.gallery-page--mostra-jazz .mostra-page-titolo-lista {
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* Mostra Auschwitz: Century Gothic su sottotitolo e titolo sezione richiesti */
.gallery-page--mostra-auschwitz .gallery-intro .gallery-subtitle {
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.gallery-page--mostra-auschwitz .mostra-page-titolo-lista {
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* Mostra Storie: Century Gothic su sottotitolo e titolo sezione richiesti */
.gallery-page--mostra-storie .gallery-intro .gallery-subtitle {
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.gallery-page--mostra-storie .mostra-page-titolo-lista {
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.mostra-articolo-wrap {
    margin-top: 0;
    flex-shrink: 0;
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #ffffff;
    cursor: pointer;
}

.mostra-articolo-wrap:hover .mostra-articolo-thumb {
    transform: scale(1.15);
}

.mostra-articolo-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    box-sizing: border-box;
    transition: transform 0.25s ease;
}

.mostra-articolo-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.9);
}

.mostra-articolo-lightbox.is-open {
    display: flex;
}

.mostra-articolo-lightbox__backdrop {
    position: absolute;
    inset: 0;
    cursor: default;
}

.mostra-articolo-lightbox__close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1002;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.mostra-articolo-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.35);
}

.mostra-articolo-lightbox__img {
    position: relative;
    z-index: 1001;
    max-width: 90vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border: 3px solid #ffffff;
    box-sizing: border-box;
}

.gallery-intro {
    max-width: 800px;
    margin: 0 auto 3rem;
    padding: 3rem 1.5rem 0;
    text-align: center;
}

.gallery-intro .gallery-title {
    font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--colore-testo);
    margin: 0 0 0.5rem;
}

.gallery-intro .gallery-subtitle {
    /* Sottotitolo intro gallery: Century Gothic (il titolo .gallery-title resta con Arrière Garde) */
    font-family: 'Century Gothic', CenturyGothic, 'AppleGothic', sans-serif;
    font-size: 1.25rem;
    color: var(--colore-accenti);
    margin: 0 0 1rem;
}

.gallery-intro .gallery-desc {
    /* Testo descrittivo sotto il sottotitolo: Century Gothic */
    font-family: 'Century Gothic', CenturyGothic, 'AppleGothic', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--colore-testo);
    margin: 0;
}

/* Masonry grid - colonne CSS */
.masonry-gallery {
    column-count: 3;
    column-gap: 1rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 1rem;
    overflow: hidden;
}

.masonry-item img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 1024px) {
    .masonry-gallery {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .masonry-gallery {
        column-count: 1;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .gallery-intro {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .gallery-intro .gallery-title {
        font-size: 1.5rem;
    }

    .gallery-page:not(.gallery-page--mostra-principale) .gallery-intro .gallery-title {
        font-size: calc(1.5rem + 5px);
    }
}

/* ===== GALLERY JAZZ: identica a People (grid, stesse miniature, lightbox con bordo 10px) ===== */
.gallery-jazz-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

.gallery-jazz {
    column-count: unset;
    column-gap: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.gallery-jazz .masonry-item {
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease;
    will-change: transform;
    margin: 0;
}

.gallery-jazz .masonry-item:hover {
    opacity: 0.95;
    transform: scale(1.03);
}

.gallery-jazz .masonry-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Miniatura Jazz 01: ritaglio nella cella griglia centrato sul volto del soggetto principale */
.gallery-jazz .masonry-item--jazz-01 img {
    object-position: 50% 100%;
}

/* ===== GALLERY PORTRAITS: stessa struttura della Jazz ===== */
.gallery-portraits-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

.gallery-portraits {
    /* Sovrascrive il masonry a colonne per avere griglia simmetrica */
    column-count: unset;
    column-gap: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    /* spazio bianco uniforme di 10px */
}

.gallery-portraits .masonry-item {
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease;
    will-change: transform;
    margin: 0;
    /* niente margine extra oltre al gap */
}

.gallery-portraits .masonry-item:hover {
    opacity: 0.95;
    transform: scale(1.03);
    /* leggero zoom anche per Portraits */
}

/* Miniature Portraits tutte uguali (stessa dimensione) */
.gallery-portraits .masonry-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    /* tutte le thumb con lo stesso rapporto */
    object-fit: cover;
}

/* ===== GALLERY AUSCHWITZ: stessa struttura Portraits/Jazz ===== */
.gallery-auschwitz-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

.gallery-auschwitz {
    column-count: unset;
    column-gap: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.gallery-auschwitz .masonry-item {
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease;
    will-change: transform;
    margin: 0;
}

.gallery-auschwitz .masonry-item:hover {
    opacity: 0.95;
    transform: scale(1.03);
}

.gallery-auschwitz .masonry-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Lightbox Portraits: identica alla Jazz ma senza bordo bianco */
.lightbox-portraits {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* ===== GALLERY STREET: stessa struttura/effetti di Jazz ===== */
.gallery-street-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

.gallery-street {
    /* Griglia con spazio uniforme di 10px in tutte le direzioni */
    column-count: unset;
    column-gap: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.gallery-street .masonry-item {
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease;
    will-change: transform;
    /* Niente margini extra: tutto lo spazio è gestito da gap: 10px */
    margin: 0;
}

.gallery-street .masonry-item:hover {
    opacity: 0.95;
    transform: scale(1.03);
    /* leggero zoom come Jazz/People */
}

/* Miniature Street: stessa struttura People/Jazz (4/3, cover) */
.gallery-street .masonry-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.lightbox-street {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lightbox-street.is-open {
    display: flex;
}

.lightbox-street__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    cursor: default;
}

.lightbox-street__close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1002;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.lightbox-street__close:hover {
    background: rgba(255, 255, 255, 0.35);
}

.lightbox-street__content {
    position: relative;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 95vw;
    max-height: 90vh;
}

.lightbox-street__img {
    max-width: 85vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.6);
    border: 10px solid #ffffff;
    box-sizing: border-box;
}

.lightbox-street__prev,
.lightbox-street__next {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.lightbox-street__prev:hover,
.lightbox-street__next:hover {
    background: rgba(255, 255, 255, 0.35);
}

@media (max-width: 768px) {
    .lightbox-street__prev {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .lightbox-street__next {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* ===== GALLERY LANDSCAPES / WEDDINGS / CITY / MONUMENTS: stessa struttura People/Jazz ===== */
.gallery-landscapes-wrap,
.gallery-weddings-wrap,
.gallery-city-wrap,
.gallery-monuments-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

.gallery-landscapes,
.gallery-weddings,
.gallery-city,
.gallery-monuments {
    column-count: unset;
    column-gap: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.gallery-landscapes .masonry-item,
.gallery-weddings .masonry-item,
.gallery-city .masonry-item,
.gallery-monuments .masonry-item {
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease;
    will-change: transform;
    margin: 0;
}

.gallery-landscapes .masonry-item:hover,
.gallery-weddings .masonry-item:hover,
.gallery-city .masonry-item:hover,
.gallery-monuments .masonry-item:hover {
    opacity: 0.95;
    transform: scale(1.03);
}

.gallery-landscapes .masonry-item img,
.gallery-weddings .masonry-item img,
.gallery-city .masonry-item img,
.gallery-monuments .masonry-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ===== GALLERY UMBRIA JAZZ: stessa logica Jazz (Masonry + lightbox) ===== */
.gallery-umbria-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

.gallery-umbria .masonry-item {
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease;
    will-change: transform;
}

.gallery-umbria .masonry-item:hover {
    opacity: 0.95;
    transform: scale(1.03);
}

.lightbox-umbria {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lightbox-umbria.is-open {
    display: flex;
}

.lightbox-umbria__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    cursor: default;
}

.lightbox-umbria__close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1002;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.lightbox-umbria__close:hover {
    background: rgba(255, 255, 255, 0.35);
}

.lightbox-umbria__content {
    position: relative;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 95vw;
    max-height: 90vh;
}

.lightbox-umbria__img {
    max-width: 85vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.6);
    border: 10px solid #ffffff;
    box-sizing: border-box;
}

.lightbox-umbria__prev,
.lightbox-umbria__next {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.lightbox-umbria__prev:hover,
.lightbox-umbria__next:hover {
    background: rgba(255, 255, 255, 0.35);
}

@media (max-width: 768px) {
    .lightbox-umbria__prev {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .lightbox-umbria__next {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
}

.lightbox-portraits.is-open {
    display: flex;
}

.lightbox-portraits__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    cursor: default;
}

.lightbox-portraits__close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1002;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.lightbox-portraits__close:hover {
    background: rgba(255, 255, 255, 0.35);
}

.lightbox-portraits__content {
    position: relative;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 95vw;
    max-height: 90vh;
}

.lightbox-portraits__img {
    max-width: 85vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.6);
    border: 10px solid #ffffff;
    box-sizing: border-box;
}

.lightbox-portraits__prev,
.lightbox-portraits__next {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.lightbox-portraits__prev:hover,
.lightbox-portraits__next:hover {
    background: rgba(255, 255, 255, 0.35);
}

@media (max-width: 768px) {
    .lightbox-portraits__prev {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .lightbox-portraits__next {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* Lightbox Auschwitz: intero overlay bianco, foto senza cornice; controlli scuri per contrasto */
.lightbox-auschwitz {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lightbox-auschwitz.is-open {
    display: flex;
}

.lightbox-auschwitz__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    cursor: default;
}

.lightbox-auschwitz__close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1002;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.lightbox-auschwitz__close:hover {
    background: rgba(255, 255, 255, 0.35);
}

.lightbox-auschwitz__content {
    position: relative;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 95vw;
    max-height: 90vh;
}

.lightbox-auschwitz__img {
    max-width: 85vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.6);
    border: 10px solid #ffffff;
    box-sizing: border-box;
}

.lightbox-auschwitz__prev,
.lightbox-auschwitz__next {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.lightbox-auschwitz__prev:hover,
.lightbox-auschwitz__next:hover {
    background: rgba(255, 255, 255, 0.35);
}

@media (max-width: 768px) {

    /* Fixed al viewport: altrimenti absolute rispetto a __content finisce sopra la foto */
    .lightbox-auschwitz__prev {
        position: fixed;
        left: max(6px, env(safe-area-inset-left, 0px));
        top: 50%;
        transform: translateY(-50%);
        z-index: 1003;
    }

    .lightbox-auschwitz__next {
        position: fixed;
        right: max(6px, env(safe-area-inset-right, 0px));
        top: 50%;
        transform: translateY(-50%);
        z-index: 1003;
    }
}

/* Lightbox Jazz: ingrandimento al centro, sfondo scuro */
.lightbox-jazz {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lightbox-jazz.is-open {
    display: flex;
}

.lightbox-jazz__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    cursor: default;
}

.lightbox-jazz__close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1002;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.lightbox-jazz__close:hover {
    background: rgba(255, 255, 255, 0.35);
}

.lightbox-jazz__content {
    position: relative;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 95vw;
    max-height: 90vh;
}

.lightbox-jazz__img {
    max-width: 85vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.6);
    border: 10px solid #ffffff;
    box-sizing: border-box;
}

.lightbox-jazz__prev,
.lightbox-jazz__next {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.lightbox-jazz__prev:hover,
.lightbox-jazz__next:hover {
    background: rgba(255, 255, 255, 0.35);
}

@media (max-width: 768px) {
    .lightbox-jazz__prev {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .lightbox-jazz__next {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* Lightbox Landscapes / Weddings / City / Monuments: stessa struttura People/Jazz (bordo 10px) */
.lightbox-landscapes,
.lightbox-weddings,
.lightbox-city,
.lightbox-monuments {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lightbox-landscapes.is-open,
.lightbox-weddings.is-open,
.lightbox-city.is-open,
.lightbox-monuments.is-open {
    display: flex;
}

.lightbox-landscapes__backdrop,
.lightbox-weddings__backdrop,
.lightbox-city__backdrop,
.lightbox-monuments__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    cursor: default;
}

.lightbox-landscapes__close,
.lightbox-weddings__close,
.lightbox-city__close,
.lightbox-monuments__close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1002;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.lightbox-landscapes__close:hover,
.lightbox-weddings__close:hover,
.lightbox-city__close:hover,
.lightbox-monuments__close:hover {
    background: rgba(255, 255, 255, 0.35);
}

.lightbox-landscapes__content,
.lightbox-weddings__content,
.lightbox-city__content,
.lightbox-monuments__content {
    position: relative;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 95vw;
    max-height: 90vh;
}

.lightbox-landscapes__img,
.lightbox-weddings__img,
.lightbox-city__img,
.lightbox-monuments__img {
    max-width: 85vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.6);
    border: 10px solid #ffffff;
    box-sizing: border-box;
}

.lightbox-landscapes__prev,
.lightbox-landscapes__next,
.lightbox-weddings__prev,
.lightbox-weddings__next,
.lightbox-city__prev,
.lightbox-city__next,
.lightbox-monuments__prev,
.lightbox-monuments__next {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.lightbox-landscapes__prev:hover,
.lightbox-landscapes__next:hover,
.lightbox-weddings__prev:hover,
.lightbox-weddings__next:hover,
.lightbox-city__prev:hover,
.lightbox-city__next:hover,
.lightbox-monuments__prev:hover,
.lightbox-monuments__next:hover {
    background: rgba(255, 255, 255, 0.35);
}

@media (max-width: 768px) {

    .lightbox-landscapes__prev,
    .lightbox-weddings__prev,
    .lightbox-city__prev,
    .lightbox-monuments__prev {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .lightbox-landscapes__next,
    .lightbox-weddings__next,
    .lightbox-city__next,
    .lightbox-monuments__next {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* Lightbox: swipe e pinch su touch (transform applicato da main.js) */
.lightbox-portraits__img,
.lightbox-auschwitz__img,
.lightbox-jazz__img,
.lightbox-street__img,
.lightbox-landscapes__img,
.lightbox-weddings__img,
.lightbox-city__img,
.lightbox-monuments__img,
.mostra-articolo-lightbox__img {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    transform-origin: center center;
}

/* ===== MOSTRE ===== */
#mostre {
    padding: 3.5rem 1.75rem;
    font-size: 1.5rem;
    background: #1a1a1a;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mostre-title {
    font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
    text-align: center;
    margin-bottom: 1.75rem;
    color: #ffffff;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    letter-spacing: 0.2em;
    width: 100%;
}

.mostre-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
}

.mostre-card {
    background: #999999;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.75);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mostre-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.mostre-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: var(--colore-accenti);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mostre-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.mostre-card-titolo {
    padding: 1rem 1rem 0.25rem;
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-size: clamp(1.2rem, 2.5vw, 1.45rem);
    font-weight: 700;
    line-height: 1.25;
    color: #000000;
    text-align: center;
}

.mostre-card-data,
.mostre-card-luogo {
    padding: 0 1rem 1rem;
    font-size: 0.9rem;
    color: #606060;
}

.mostre-card-luogo {
    padding-bottom: 1.25rem;
}

.mostre-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.mostre-card-link:hover .mostre-card-titolo {
    text-decoration: underline;
}

/* Card solo testo (Auschwitz, mostra 3, 4) */
.mostre-card--solo-testo .mostre-card-link {
    padding: 1.25rem 1rem 1.5rem;
    display: block;
}

.mostre-card--solo-testo .mostre-card-titolo {
    padding: 0 0 0.5rem;
}

.mostre-card-desc {
    font-size: 0.9rem;
    line-height: 1.55;
    color: #555;
    margin: 0;
    text-align: left;
}

/* Card Jazz: una foto in alto a sx, testo sotto a sinistra con elenco puntato */
.mostre-card--jazz .mostre-card-link {
    display: block;
    padding: 1rem 1rem 1.25rem;
}

.mostre-card-jazz-foto {
    width: 100%;
    max-width: 180px;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    margin: 0 0 0.75rem 0;
}

.mostre-card-jazz-testo {
    text-align: left;
    padding: 0;
}

.mostre-card--jazz .mostre-card-titolo {
    padding: 0 0 0.5rem;
}

.mostre-card-lista {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
}

.mostre-card-lista li {
    margin-bottom: 0.25rem;
}

/* ===== DICONO DI ME (CAROUSEL) ===== */
#dicono-di-me {
    padding: 3.5rem 1.75rem;
    font-size: 1.5rem;
    background: #1a1a1a;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.testimonial-title {
    font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
    text-align: center;
    margin-bottom: 1.75rem;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    letter-spacing: 0.2em;
    color: #ffffff;
    width: 100%;
}

.carousel {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    color: #ffffff;
}

.carousel-inner {
    position: relative;
    min-height: 280px;
}

.carousel-slide {
    display: none;
    text-align: center;
    padding: 1.15rem 1.4rem 1.65rem;
}

.carousel-slide--active {
    display: block;
}

.testimonial-foto {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: block;
    object-fit: cover;
    object-position: center;
    border: 2px solid rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
    background-color: #3a3a3a;
}

.testimonial-nome {
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-weight: bold;
    color: #ffffff;
    margin-top: 0.5rem;
}

/* Data testimonianza (sotto il nome) */
.testimonial-data {
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.35rem 0 0;
}

.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    background: var(--colore-sfondo);
    color: var(--colore-testo);
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
}

.carousel-prev:hover,
.carousel-next:hover {
    background: var(--colore-accenti);
    color: var(--colore-sfondo);
}

.carousel-prev {
    left: -1rem;
}

.carousel-next {
    right: -1rem;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: var(--colore-accenti);
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.carousel-dot:hover,
.carousel-dot--active {
    opacity: 1;
}

.carousel-dot--active {
    background: var(--colore-testo);
}

/* Quote style testimonial */
.testimonial-testo {
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-weight: 400;
    position: relative;
    padding-left: 2rem;
    border-left: 3px solid var(--colore-accenti);
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}

.testimonial-testo::before {
    content: '"';
    position: absolute;
    left: 0;
    top: -0.2em;
    font-size: 3rem;
    line-height: 1;
    color: var(--colore-accenti);
    opacity: 0.6;
    font-family: Georgia, serif;
}

/* ===== CONTATTI ===== */
#contatti {
    padding: 3.5rem 1.75rem;
    background-color: #1a1a1a;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#contatti .contatti-title {
    font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
    text-align: center;
    margin-bottom: 1.75rem;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    letter-spacing: 0.2em;
    color: #ffffff;
    width: 100%;
}

.contatti-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    max-width: 900px;
    margin: 0 auto;
    align-items: start;
    width: 100%;
}

.contatti-col-info {
    margin-top: 1rem;
}

.contatti-form label {
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-weight: 600;
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
    color: #ffffff;
}

.contatti-form input,
.contatti-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 5px;
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-size: 1rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.contatti-form input::placeholder,
.contatti-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.contatti-form textarea {
    resize: vertical;
    min-height: 120px;
}

.contatti-submit {
    display: block;
    width: 100%;
    padding: 0.85rem 1.5rem;
    background-color: #ffffff;
    color: #1a1a1a;
    border: none;
    border-radius: 5px;
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.contatti-submit:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: #1a1a1a;
}

/* Titolo "Info:" nella sezione Contatti in home */
#contatti .contatti-info-title {
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-weight: 700;
    margin-bottom: 1.25rem;
    font-size: 1.1rem;
    color: #ffffff;
}

.contatti-info-item {
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    margin-bottom: 1rem;
    color: #ffffff;
}

.contatti-info-label {
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-weight: 600;
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.25rem;
}

/* Riga con icona SVG e link affiancati */
.contatti-info-with-icon {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.contatti-info-icon {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    color: rgba(255, 255, 255, 0.92);
    vertical-align: middle;
}

.contatti-info-item a {
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.contatti-info-item a:hover {
    opacity: 0.85;
}

/* ===== FOOTER ===== */
.site-footer {
    padding: 1.25rem 1.5rem;
    background-color: #1a1a1a;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
}

/* Piedipagina con blocco contatti: tre righe centrate (index usa solo copyright) */
.site-footer:not(.site-footer--solo-copyright) {
    align-items: center;
    text-align: center;
}

/* Piedipagina (tutte le pagine tranne index): CONTATTI, Info:, poi una riga tel - email con icone */
.footer-contatti {
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
    width: 100%;
    max-width: 100%;
}

.footer-contatti-heading {
    margin: 0 0 0.35rem;
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.02em;
    text-align: center;
}

.footer-contatti-info-label {
    margin: 0 0 0.6rem;
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    text-align: center;
}

.footer-contatti-line {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.45rem 0.65rem;
    margin: 0;
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-size: clamp(0.72rem, 0.5rem + 1.4vw, 1rem);
    color: rgba(255, 255, 255, 0.95);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    text-align: center;
}

.footer-contatti-inline-group {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.footer-contatti-icon {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    color: rgba(255, 255, 255, 0.92);
}

.footer-contatti-line a {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-contatti-line a:hover {
    opacity: 0.85;
}

.footer-contatti-sep {
    color: rgba(255, 255, 255, 0.45);
    user-select: none;
}

/* Solo smartphone in verticale: telefono e email su due righe (niente trattino tra i due; niente scroll orizzontale che sembra una “linea”) */
@media (max-width: 640px) and (orientation: portrait) {
    .footer-contatti-line {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.65rem;
        overflow-x: visible;
    }

    .footer-contatti-sep {
        display: none;
    }

    .footer-contatti-inline-group {
        justify-content: center;
    }

    .footer-contatti-inline-group:first-child {
        white-space: nowrap;
    }

    .footer-contatti-inline-group:last-child a {
        overflow-wrap: anywhere;
        text-align: center;
    }
}

/* Copyright sempre su una sola riga (mobile, tablet, qualsiasi viewport) */
.footer-copyright {
    margin: 0;
    padding-top: 0.25rem;
    font-family: 'Century Gothic', 'AppleGothic', sans-serif;
    font-size: clamp(0.5rem, 0.32rem + 1.65vw, 0.9rem);
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    width: 100%;
    align-self: center;
    white-space: nowrap;
}

/* Home: footer senza blocco contatti duplicato (già presenti in #contatti) */
.site-footer--solo-copyright {
    text-align: center;
}

/* ===== RESPONSIVE ===== */
/* Tablet e mobile (menu hamburger): barra compatta in verticale e orizzontale */
@media (max-width: 1024px) {

    /* Evita scroll a scatti: 100dvh cambia con la barra indirizzi; smooth nativo spesso è scattoso */
    html {
        scroll-behavior: auto;
    }

    #hero,
    .biografia-section,
    #portfolio,
    #mostre,
    #dicono-di-me,
    #contatti {
        min-height: 100svh;
    }

    #hero {
        height: 100svh;
    }

    /* Slideshow landscape cellulari: override height 100svh (iPhone X, S8/S9, SE, ecc.) */
    @media (orientation: landscape) and (max-width: 932px) and (max-height: 520px) {
        #hero.hero--slideshow {
            aspect-ratio: 16 / 9;
            width: 100%;
            height: auto;
            min-height: 0;
            --hero-label-bottom: clamp(1.25rem, 7vmin, 2.75rem);
            --hero-dots-bottom: clamp(0.5rem, 2.2vmin, 0.9rem);
        }

        #hero.hero--slideshow .hero-slide[data-index="0"] .hero-slide-img {
            object-position: center calc(50% + 1cm);
        }

        #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
            object-position: center center;
        }
    }

    :root {
        --navbar-scroll-offset: 3rem;
    }

    .hamburger {
        display: flex;
        width: 40px;
        height: 40px;
    }

    .navbar-logo {
        font-size: 17px;
        line-height: 1.2;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background: var(--colore-sfondo);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 4.25rem 2rem 2rem;
        gap: 0;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
        z-index: 99;
        overflow-y: auto;
    }

    .nav-menu--open {
        transform: translateX(0);
    }

    .nav-menu li {
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .nav-menu a {
        display: block;
        padding: 1rem 0;
        transform: none;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .nav-menu a:hover {
        transform: none;
    }

    .nav-menu a:active,
    .nav-menu a:focus-visible {
        background-color: var(--colore-accenti);
        color: var(--colore-sfondo);
    }

    .nav-item-dropdown .dropdown-menu {
        position: static;
        opacity: 1;
        pointer-events: auto;
        box-shadow: none;
        margin-top: 0;
        padding-left: 1rem;
        display: none;
    }

    .nav-item-dropdown.dropdown--open .dropdown-menu {
        display: block;
    }

    .navbar-inner {
        padding: 0.45rem 1.25rem;
    }

    body.nav-open {
        overflow: hidden;
    }
}

/* Mobile: <768px */
@media (max-width: 768px) {

    /* Gallerie portfolio: sempre due colonne sui cellulari */
    .gallery-jazz,
    .gallery-portraits,
    .gallery-auschwitz,
    .gallery-street,
    .gallery-landscapes,
    .gallery-weddings,
    .gallery-city,
    .gallery-monuments {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Portfolio: due colonne in verticale (impilate a griglia) */
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .mostre-grid {
        grid-template-columns: 1fr;
    }

    .contatti-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile portrait: header compatto (in landscape non si applica, per non bloccare il contatore) */
@media (max-width: 768px) and (orientation: portrait) {
    #portfolio .portfolio-item-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.25rem;
        padding: 3px 6px;
        min-height: 1.75rem;
        max-height: 1.75rem;
        overflow: hidden;
        box-sizing: border-box;
    }

    #portfolio .portfolio-item-label {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.6rem;
        line-height: 1;
        letter-spacing: 0.08em;
    }

    #portfolio .portfolio-item-count {
        flex-shrink: 0;
        font-size: clamp(0.58rem, 2.4vw, 0.75rem);
        line-height: 1.15;
        padding: 2px 5px;
        gap: 0.2rem;
    }

    #portfolio .portfolio-item-count-icon {
        width: 0.9em;
        height: 0.9em;
    }
}

@media (max-width: 480px) and (orientation: portrait) {
    .portfolio-tabs {
        gap: 0.5rem;
    }

    #portfolio .portfolio-item-header {
        min-height: 1.65rem;
        max-height: 1.65rem;
        padding: 2px 5px;
        gap: 0.2rem;
    }

    #portfolio .portfolio-item-label {
        font-size: 0.55rem;
        letter-spacing: 0.06em;
    }

    #portfolio .portfolio-item-count {
        font-size: clamp(0.55rem, 2.2vw, 0.7rem);
        padding: 2px 4px;
    }
}

/* Portfolio: tablet / 2-in-1 in portrait (iPad Air, iPad Pro, Surface, ecc.) */
@media (min-width: 769px) and (max-width: 1366px) and (orientation: portrait) {
    #portfolio .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

/* Portfolio mobile: sempre 2 colonne; header senza overflow */
@media (max-width: 600px) {
    #portfolio .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    #portfolio .portfolio-item-header {
        overflow: hidden;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Portfolio: mobile orizzontale (aspect-ratio: più affidabile di orientation in DevTools) */
@media (max-width: 1023px) and (min-aspect-ratio: 4/3) {
    #portfolio .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    #portfolio .portfolio-item-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.4rem;
        padding: 6px 10px;
        min-height: 2.5rem;
        max-height: none;
        overflow: hidden;
        max-width: 100%;
        box-sizing: border-box;
    }

    #portfolio .portfolio-item-label {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: clamp(14px, 3.6vw, 18px);
        line-height: 1.15;
        letter-spacing: 0.1em;
    }

    #portfolio .portfolio-item-count {
        flex-shrink: 0;
        font-size: clamp(13px, 3.2vw, 17px);
        line-height: 1.15;
        padding: 3px 7px;
        gap: 0.25rem;
    }

    #portfolio .portfolio-item-count-text {
        font-size: inherit;
    }

    #portfolio .portfolio-item-count-icon {
        width: 1.1em;
        height: 1.1em;
        max-width: none;
        max-height: none;
    }
}

/* Portfolio mobile (≤932px): base header fluido */
@media (max-width: 932px) {
    #portfolio .portfolio-item-header {
        container-type: inline-size;
        gap: 0.2rem;
        padding: clamp(3px, 1.2cqi, 6px) clamp(4px, 1.5cqi, 8px);
        min-height: auto;
        max-height: none;
    }

    #portfolio .portfolio-item-label {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.1;
    }

    #portfolio .portfolio-item-count {
        flex: 0 0 auto;
        line-height: 1.1;
        border-radius: 8px;
    }
}

/* Portfolio mobile portrait: titoli più grandi (2 colonne, più spazio orizzontale) */
@media (max-width: 932px) and (orientation: portrait) {
    #portfolio .portfolio-item-label {
        font-size: clamp(10px, 8.5cqi, 14px);
        letter-spacing: clamp(0.03em, 0.3cqi, 0.1em);
    }

    #portfolio .portfolio-item-count {
        font-size: clamp(6px, 3.6cqi, 8px);
        padding: 1px 4px;
        gap: 0.1rem;
    }

    #portfolio .portfolio-item-count-icon {
        width: 0.75em;
        height: 0.75em;
    }
}

/* Portfolio: cellulari landscape — 3 colonne + titoli dominanti sui contatori */
@media (orientation: landscape) and (max-width: 932px) and (max-height: 520px) {
    #portfolio .portfolio-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #portfolio .portfolio-item-label {
        font-size: clamp(8px, 6.5cqi, 13px);
        letter-spacing: clamp(0.02em, 0.15cqi, 0.06em);
    }

    #portfolio .portfolio-item-count {
        font-size: clamp(5px, 2.2cqi, 6.5px);
        padding: 0 3px;
        gap: 0.06rem;
    }

    #portfolio .portfolio-item-count-icon {
        width: 0.65em;
        height: 0.65em;
    }
}

/* Smartphone orizzontale a bassa altezza: Mostre su una sola riga (3 card) */
@media (max-width: 932px) and (max-height: 430px) and (orientation: landscape) {
    #mostre .mostre-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    #mostre .mostre-card {
        min-width: 0;
    }

    #mostre .mostre-card-titolo {
        font-size: clamp(0.9rem, 2.5vw, 1.15rem);
        padding: 0.55rem 0.45rem 0.2rem;
    }

    #mostre .mostre-card-data {
        padding: 0 0.45rem 0.55rem;
        font-size: 0.72rem;
    }
}

/* iPad Air/Pro (portrait+landscape): riduce i vuoti tra sezioni */
@media (min-width: 820px) and (max-width: 1366px) {

    .biografia-section,
    #portfolio,
    #mostre,
    #dicono-di-me,
    #contatti {
        min-height: auto;
        justify-content: flex-start;
    }

    .biografia-section {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    #portfolio,
    #mostre,
    #dicono-di-me,
    #contatti {
        padding-top: 2.75rem;
        padding-bottom: 2.75rem;
    }
}

/* iPad Pro landscape (target dedicato): comprime gli spazi verticali tra sezioni */
@media (min-width: 1360px) and (max-width: 1400px) and (min-height: 1000px) and (orientation: landscape) {

    .biografia-section,
    #portfolio,
    #mostre,
    #dicono-di-me,
    #contatti {
        min-height: auto !important;
        justify-content: flex-start !important;
    }

    .biografia-section {
        padding-top: 1.75rem !important;
        padding-bottom: 1.75rem !important;
    }

    #portfolio,
    #mostre,
    #dicono-di-me,
    #contatti {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* Desktop pieno: uniforma gli stacchi verticali tra Portfolio, Mostre e Contatti */
@media (min-width: 1025px) {

    #portfolio,
    #mostre,
    #contatti {
        min-height: auto;
        justify-content: flex-start;
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    /* Mostre: titolo leggermente più alto per allineamento visivo con le altre sezioni */
    #mostre {
        padding-top: 2.5rem;
    }
}

/*
 * Titoli sezione (Biografia, Portfolio, Mostre, Dicono di me, Contatti):
 * le regole base con font-size (es. .portfolio-title) compaiono nel file DOPO i @media
 * della sezione Biografia, quindi il clamp grande vinceva sempre sulle regole responsive
 * e solo Biografia risultava più piccola. Questi @media stanno in fondo, dopo tutte le basi.
 */
@media (max-width: 1024px) {

    .biografia-title,
    .portfolio-title,
    .mostre-title,
    .testimonial-title,
    #contatti .contatti-title {
        font-size: clamp(2rem, 5vw, 3rem);
    }
}

@media (max-width: 768px) {

    .biografia-title,
    .portfolio-title,
    .mostre-title,
    .testimonial-title,
    #contatti .contatti-title {
        font-size: clamp(2rem, 8vw, 2.8rem);
    }
}

@media (max-width: 480px) {

    .biografia-title,
    .portfolio-title,
    .mostre-title,
    .testimonial-title,
    #contatti .contatti-title {
        font-size: 1.8rem;
        letter-spacing: 0.15em;
    }
}

/* Portfolio mobile orizzontale: in coda al file (priorità cascade) — contatore min 13px */
@media (max-width: 1024px) and (min-aspect-ratio: 4/3) {

    #portfolio .portfolio-item-count,
    #portfolio .portfolio-item-count-text {
        font-size: clamp(13px, 3.2vw, 17px);
    }
}

/* iPhone (tutti i modelli): regole hero — no Android / iPad / tablet */
@supports (-webkit-touch-callout: none) {
    /* Portrait — fino a 14 Pro Max (430px) */
    @media (orientation: portrait) and (max-width: 430px) {
        #hero.hero--slideshow {
            --hero-label-size: calc(2.5rem * 2.36 / 3);
        }

        #hero.hero--slideshow .hero-slide-label {
            font-size: calc(2.5rem * 2.36 / 3);
        }
    }

    /* Landscape — altezza max iPhone 14 Pro Max (430px), larghezza < iPad */
    @media (orientation: landscape) and (max-width: 932px) and (max-height: 430px) {
        #hero.hero--slideshow {
            --hero-label-size: calc(2.5rem * 2.36 / 3);
        }

        #hero.hero--slideshow .hero-slide-label {
            font-size: calc(2.5rem * 2.36 / 3);
        }

        #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-label {
            bottom: calc(1cm - 3mm);
        }

        #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
            bottom: calc(1cm - 3mm + 1cm + var(--hero-label-size));
        }

        /* CTA slide 0 (basso dx) e slide 1 (basso sx) */
        #hero.hero--slideshow .hero-slide.is-active[data-index="0"] .hero-colours-cta,
        #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
            display: inline-block;
            position: absolute;
            z-index: 3;
            bottom: var(--hero-label-bottom);
            padding: 0.25rem 0.4rem;
            font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
            font-size: clamp(9px, 1.9vmin, 11px);
            font-weight: 700;
            color: #ffffff;
            background-color: transparent;
            border: 1px solid #ffffff;
            border-radius: 0;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
            pointer-events: auto;
            box-sizing: border-box;
            max-width: calc(50% - 1rem);
            white-space: nowrap;
            transform: none;
        }

        #hero.hero--slideshow .hero-slide.is-active[data-index="0"] .hero-colours-cta {
            left: auto;
            right: 3mm;
        }

        #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
            left: 3mm;
            right: auto;
        }
    }

    /* Slide 1 portraits — destra, ~3 mm dal bordo, micro-slide verso sinistra */
    @media (orientation: portrait) and (max-width: 430px),
    (orientation: landscape) and (max-width: 932px) and (max-height: 430px) {
        #hero.hero--slideshow .hero-slide[data-index="1"] .hero-slide-label {
            left: auto;
            right: 3mm;
            text-align: right;
            transform: translateX(0.65rem);
        }

        #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-slide-label.hero-slide-label--in {
            animation: hero-portrait-label-in-se 1.1s ease-out forwards;
        }
    }
}

/* Desktop: CTA portfolio — slide 0 dx, slide 1 sx, slide 2 sopra colours */
@media (min-width: 1025px) {

    #hero.hero--slideshow .hero-slide.is-active[data-index="0"] .hero-colours-cta,
    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta,
    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        display: inline-block;
        position: absolute;
        z-index: 3;
        padding: 0.6rem 0.85rem;
        font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
        font-size: clamp(14px, 1.2vw, 18px);
        font-weight: 700;
        color: #ffffff;
        background-color: transparent;
        border: 2px solid #ffffff;
        border-radius: 0;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        pointer-events: auto;
        box-sizing: border-box;
        white-space: nowrap;
    }

    /* Slide 0 jazz: basso dx, stessa riga jazz, margine come H1/H2 */
    #hero.hero--slideshow .hero-slide.is-active[data-index="0"] .hero-colours-cta {
        bottom: var(--hero-label-bottom);
        left: auto;
        right: 2cm;
        transform: none;
    }

    /* Slide 1 portraits: basso sx, stessa riga portraits, margine come H1/H2, nero */
    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        bottom: var(--hero-label-bottom);
        left: 2cm;
        right: auto;
        transform: none;
        color: #000000;
        border-color: #000000;
        text-shadow: none;
    }

    /* Slide 2 colours: centrato, 1 cm sopra la scritta */
    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        left: 50%;
        right: auto;
        bottom: calc(2cm + 1cm + var(--hero-label-size));
        transform: translateX(-50%);
    }
}

/* Mobile landscape iPhone/Android: jazz, portraits, colours — label -10px */
@media (orientation: landscape) and (max-width: 932px) and (max-height: 520px) {

    /* Cellulari landscape: animazioni H1/H2 direzionali come desktop (solo opacity/transform) */
    #hero.hero--slideshow[data-active-slide="0"].hero-heading--in .hero-title,
    #hero.hero--slideshow[data-active-slide="1"].hero-heading--in .hero-title {
        animation: hero-jazz-h1-in 0.4s ease-out forwards;
    }

    #hero.hero--slideshow[data-active-slide="0"].hero-heading--in .hero-subtitle {
        animation: hero-jazz-h2-in 0.4s ease-out forwards;
    }

    #hero.hero--slideshow[data-active-slide="1"].hero-heading--in .hero-subtitle {
        animation: hero-portrait-h2-in 0.4s ease-out forwards;
    }

    @keyframes hero-jazz-h1-in {
        from {
            opacity: 0;
            transform: translateY(calc(-1 * (var(--navbar-scroll-offset) + 1cm)));
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes hero-jazz-h2-in {
        from {
            opacity: 0;
            transform: translateX(45vw);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes hero-portrait-h2-in {
        from {
            opacity: 0;
            transform: translateX(-45vw);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    #hero.hero--slideshow .hero-slide-label {
        font-size: calc(var(--hero-label-size) - 17px);
    }

    /* Slide 2: CTA +5px, 1 cm più in basso */
    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        font-size: clamp(14px, calc(1.9vmin + 5px), 16px);
        transform: translateX(-50%) translateY(1cm);
    }

    /* Slide 0 e 1: CTA come slide 2, allineati a bandiera con H1/H2 */
    #hero.hero--slideshow .hero-slide.is-active[data-index="0"] .hero-colours-cta,
    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        display: inline-block;
        position: absolute;
        z-index: 3;
        bottom: var(--hero-label-bottom);
        padding: 0.25rem 0.4rem;
        font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
        font-size: clamp(14px, calc(1.9vmin + 5px), 16px);
        font-weight: 700;
        color: #ffffff;
        background-color: transparent;
        border: 1px solid #ffffff;
        border-radius: 0;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        pointer-events: auto;
        box-sizing: border-box;
        max-width: calc(50% - 1rem);
        white-space: nowrap;
        transform: none;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="0"] .hero-colours-cta {
        left: auto;
        right: clamp(0.75rem, 3vmin, 1.25rem);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        left: clamp(0.75rem, 3vmin, 1.25rem);
        right: auto;
    }

    /* Slide 1 portraits: allineata a destra, animazione da dx verso sx */
    #hero.hero--slideshow .hero-slide[data-index="1"] .hero-slide-label {
        left: auto;
        right: 3mm;
        text-align: right;
        transform: translateX(0.65rem);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-slide-label.hero-slide-label--in {
        animation: hero-portrait-label-in-se 1.1s ease-out forwards;
    }
}

/* Galaxy Tab S4 landscape: slide portraits — CTA e label bianche */
@media (orientation: landscape) {
    #hero.hero--slideshow.hero--galaxy-tab-s4 .hero-slide[data-index="1"] .hero-slide-label {
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }

    #hero.hero--slideshow.hero--galaxy-tab-s4 .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        color: #ffffff;
        border-color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }

    /* Slide colours: annulla pan +2cm desktop (striscia nera sotto navbar) */
    #hero.hero--slideshow.hero--galaxy-tab-s4 .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }
}

/* Fallback DevTools Tab S4 landscape (viewport ~1138×711–712) */
@media (orientation: landscape) and (min-width: 1100px) and (max-width: 1145px) and (min-height: 680px) and (max-height: 740px) {

    /* H1/H2 desktop −10px (tutte e tre le slide) */
    #hero.hero--slideshow .hero-title {
        font-size: calc(65pt - 10px);
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: calc(32.5pt - 10px);
    }

    /* Scritte jazz / portraits / colours −10px */
    #hero.hero--slideshow .hero-slide-label {
        font-size: calc(var(--hero-label-size) - 10px);
    }

    #hero.hero--slideshow .hero-slide[data-index="1"] .hero-slide-label {
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        color: #ffffff;
        border-color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }

    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }
}

/* Surface Pro portrait (912×1368): slide colours — CTA e label centrate in basso */
@media (width: 912px) and (orientation: portrait) {

    /* Slide colours: annulla pan +2cm (striscia nera sotto navbar) */
    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }

    /* Slide colours: H1/H2 +12px */
    #hero.hero--slideshow[data-active-slide="2"] .hero-title {
        font-size: calc(clamp(56px, calc(7.5vw + 16px), 72px) + 12px);
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
        font-size: calc(clamp(36px, calc(3.75vw + 16px), 44px) + 12px);
    }

    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-label {
        left: 50%;
        right: auto;
        bottom: 2cm;
        text-align: center;
        transform: translateX(-50%) translateY(2cm);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-slide-label.hero-slide-label--in {
        animation: hero-colours-label-in 0.4s ease-out forwards;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        display: inline-block;
        position: absolute;
        z-index: 3;
        left: 50%;
        right: auto;
        bottom: calc(2cm + 1cm + var(--hero-label-size));
        transform: translateX(-50%);
        padding: 0.6rem 0.85rem;
        font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
        font-size: clamp(24px, calc(1.2vw + 10px), 28px);
        font-weight: 700;
        color: #ffffff;
        background-color: transparent;
        border: 2px solid #ffffff;
        border-radius: 0;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        pointer-events: auto;
        box-sizing: border-box;
        white-space: nowrap;
    }
}

/* Surface Pro landscape (1368×912): slide portraits — CTA e label bianche */
@media (width: 1368px) and (height: 912px) and (orientation: landscape) {

    /* Slide colours: annulla pan +2cm (striscia nera sotto navbar) */
    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }

    #hero.hero--slideshow .hero-slide[data-index="1"] .hero-slide-label {
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        color: #ffffff;
        border-color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }

    /* Slide colours: CTA +10px */
    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        font-size: clamp(24px, calc(1.2vw + 10px), 28px);
    }
}

/* Surface Duo portrait (540×720): slide colours — CTA e label centrate in basso */
@media (width: 540px) and (orientation: portrait) {
    #hero.hero--slideshow .hero-slide-label {
        font-size: calc(var(--hero-label-size) - 7px);
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: clamp(21px, calc(4.8vw + 6px), 27px);
    }

    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-label {
        left: 50%;
        right: auto;
        bottom: 2cm;
        text-align: center;
        transform: translateX(-50%) translateY(2cm);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-slide-label.hero-slide-label--in {
        animation: hero-colours-label-in 0.4s ease-out forwards;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        display: inline-block;
        position: absolute;
        z-index: 3;
        left: 50%;
        right: auto;
        bottom: calc(2cm + 1cm + var(--hero-label-size));
        transform: translateX(-50%);
        padding: 0.6rem 0.85rem;
        font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
        font-size: clamp(24px, calc(1.2vw + 10px), 28px);
        font-weight: 700;
        color: #ffffff;
        background-color: transparent;
        border: 2px solid #ffffff;
        border-radius: 0;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        pointer-events: auto;
        box-sizing: border-box;
        white-space: nowrap;
    }
}

/* Surface Duo landscape (720×540): slide portraits bianche, slide colours CTA +10px */
@media (width: 720px) and (height: 540px) and (orientation: landscape) {
    #hero.hero--slideshow .hero-slide-label {
        font-size: calc(var(--hero-label-size) - 7px);
    }

    /* H1/H2 su tutte e tre le slide (come mobile landscape) */
    #hero.hero--slideshow .hero-heading {
        display: flex;
        top: calc(var(--navbar-scroll-offset) + 0.35rem);
        transform: none;
    }

    #hero.hero--slideshow .hero-title {
        font-size: clamp(36px, calc(5.2vmin + 16px), 50px);
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: clamp(16px, calc(2.6vmin + 6px), 23px);
        letter-spacing: 0.02em;
    }

    #hero.hero--slideshow[data-active-slide="0"] .hero-heading {
        right: clamp(0.75rem, 3vmin, 1.25rem);
        left: auto;
        text-align: right;
        align-items: flex-end;
    }

    #hero.hero--slideshow[data-active-slide="0"] .hero-title {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    #hero.hero--slideshow[data-active-slide="0"] .hero-title,
    #hero.hero--slideshow[data-active-slide="0"] .hero-subtitle {
        color: #ffffff;
        align-self: flex-end;
        text-align: right;
    }

    #hero.hero--slideshow[data-active-slide="1"] .hero-heading {
        left: clamp(0.75rem, 3vmin, 1.25rem);
        right: auto;
        text-align: left;
        align-items: flex-start;
    }

    #hero.hero--slideshow[data-active-slide="1"] .hero-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #hero.hero--slideshow[data-active-slide="1"] .hero-title,
    #hero.hero--slideshow[data-active-slide="1"] .hero-subtitle {
        color: #ffffff;
        align-self: flex-start;
        text-align: left;
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-heading {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        text-align: center;
        align-items: center;
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-title,
    #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
        color: #000000;
        align-self: center;
        text-align: center;
    }

    #hero.hero--slideshow .hero-slide[data-index="1"] .hero-slide-label {
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        left: auto;
        right: 1cm;
        text-align: right;
    }

    /* Slide 0 e 1: CTA a bandiera con H1/H2 */
    #hero.hero--slideshow .hero-slide.is-active[data-index="0"] .hero-colours-cta,
    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        display: inline-block;
        position: absolute;
        z-index: 3;
        bottom: var(--hero-label-bottom);
        padding: 0.25rem 0.4rem;
        font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
        font-size: clamp(14px, calc(1.9vmin + 5px), 16px);
        font-weight: 700;
        color: #ffffff;
        background-color: transparent;
        border: 1px solid #ffffff;
        border-radius: 0;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        pointer-events: auto;
        box-sizing: border-box;
        max-width: calc(50% - 1rem);
        white-space: nowrap;
        transform: none;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="0"] .hero-colours-cta {
        left: auto;
        right: clamp(0.75rem, 3vmin, 1.25rem);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        left: clamp(0.75rem, 3vmin, 1.25rem);
        right: auto;
    }

    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-label {
        left: 50%;
        right: auto;
        bottom: 2cm;
        text-align: center;
        transform: translateX(-50%) translateY(2cm);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-slide-label.hero-slide-label--in {
        animation: hero-colours-label-in 0.4s ease-out forwards;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        display: inline-block;
        position: absolute;
        z-index: 3;
        left: 50%;
        right: auto;
        bottom: calc(2cm + 1cm + var(--hero-label-size));
        transform: translateX(-50%);
        padding: 0.6rem 0.85rem;
        font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
        font-size: clamp(14px, 1.2vw, 18px);
        font-weight: 700;
        color: #ffffff;
        background-color: transparent;
        border: 2px solid #ffffff;
        border-radius: 0;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        pointer-events: auto;
        box-sizing: border-box;
        white-space: nowrap;
    }
}

/* Samsung Galaxy mobile: H2 −8px (portrait + landscape) */
@media (max-width: 767px) and (orientation: portrait) {
    #hero.hero--slideshow.hero--samsung-galaxy .hero-subtitle {
        font-size: clamp(23px, calc(4.8vw + 8px), 29px);
    }
}

@media (orientation: landscape) and (max-width: 932px) and (max-height: 520px) {
    #hero.hero--slideshow.hero--samsung-galaxy .hero-subtitle {
        font-size: clamp(18px, calc(2.6vmin + 8px), 25px);
    }
}

/* ===== Apple: iPhone / iPad Mini / iPad Air / iPad Pro (slideshow hero) ===== */

/* iPhone: H2 −8px (portrait + landscape) */
@media (orientation: portrait) and (max-width: 430px) {
    #hero.hero--slideshow.hero--iphone .hero-subtitle {
        font-size: clamp(23px, calc(4.8vw + 8px), 29px);
    }
}

@media (orientation: landscape) and (max-width: 932px) and (max-height: 520px) {
    #hero.hero--slideshow.hero--iphone .hero-subtitle {
        font-size: clamp(18px, calc(2.6vmin + 8px), 25px);
    }
}

/* iPad portrait (Mini/Air/Pro): slide colours — label + CTA centrate in basso */
@media (orientation: portrait) {

    #hero.hero--slideshow.hero--ipad-mini .hero-slide[data-index="2"] .hero-slide-label,
    #hero.hero--slideshow.hero--ipad-air .hero-slide[data-index="2"] .hero-slide-label,
    #hero.hero--slideshow.hero--ipad-pro .hero-slide[data-index="2"] .hero-slide-label {
        left: 50%;
        right: auto;
        bottom: 2cm;
        text-align: center;
        transform: translateX(-50%) translateY(2cm);
    }

    #hero.hero--slideshow.hero--ipad-mini .hero-slide.is-active[data-index="2"] .hero-slide-label.hero-slide-label--in,
    #hero.hero--slideshow.hero--ipad-air .hero-slide.is-active[data-index="2"] .hero-slide-label.hero-slide-label--in,
    #hero.hero--slideshow.hero--ipad-pro .hero-slide.is-active[data-index="2"] .hero-slide-label.hero-slide-label--in {
        animation: hero-colours-label-in 0.4s ease-out forwards;
    }

    #hero.hero--slideshow.hero--ipad-mini .hero-slide.is-active[data-index="2"] .hero-colours-cta,
    #hero.hero--slideshow.hero--ipad-air .hero-slide.is-active[data-index="2"] .hero-colours-cta,
    #hero.hero--slideshow.hero--ipad-pro .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        display: inline-block;
        position: absolute;
        z-index: 3;
        left: 50%;
        right: auto;
        bottom: calc(2cm + 1cm + var(--hero-label-size));
        transform: translateX(-50%);
        padding: 0.6rem 0.85rem;
        font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
        font-size: clamp(18px, calc(1.2vw + 4px), 22px);
        font-weight: 700;
        color: #ffffff;
        background-color: transparent;
        border: 2px solid #ffffff;
        border-radius: 0;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        pointer-events: auto;
        box-sizing: border-box;
        white-space: nowrap;
    }
}

/* iPad Pro portrait (11" 834×1194 / 12,9" 1024×1366): slide colours */
@media (orientation: portrait) {
    #hero.hero--slideshow.hero--ipad-pro .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }

    #hero.hero--slideshow.hero--ipad-pro[data-active-slide="2"] .hero-heading {
        top: calc(var(--navbar-scroll-offset) + 0.75rem + 2cm);
    }

    #hero.hero--slideshow.hero--ipad-pro[data-active-slide="2"] .hero-title {
        font-size: clamp(63px, calc(7.5vw + 23px), 79px);
    }

    #hero.hero--slideshow.hero--ipad-pro[data-active-slide="2"] .hero-subtitle {
        font-size: clamp(43px, calc(3.75vw + 23px), 51px);
    }

    #hero.hero--slideshow.hero--ipad-pro .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        font-size: clamp(25px, calc(1.2vw + 11px), 29px);
    }
}

/* iPad Air portrait (820×1180): slide colours — immagine, H1/H2, CTA */
@media (orientation: portrait) {
    #hero.hero--slideshow.hero--ipad-air .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }

    #hero.hero--slideshow.hero--ipad-air[data-active-slide="2"] .hero-heading {
        top: calc(var(--navbar-scroll-offset) + 0.75rem + 0.5cm);
    }

    #hero.hero--slideshow.hero--ipad-air .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        font-size: clamp(23px, calc(1.2vw + 9px), 27px);
    }
}

/* iPad Mini landscape: CTA, label, H2, slide colours (viewport 1024×768) */
@media (orientation: landscape) {
    #hero.hero--slideshow.hero--ipad-mini .hero-subtitle {
        font-size: clamp(27px, calc(2.75vmin + 9px), 33px);
    }

    #hero.hero--slideshow.hero--ipad-mini .hero-slide-label {
        font-family: 'Schlbki', 'Schlbkb', Georgia, serif;
        font-size: calc(var(--hero-label-size) - 7px);
    }

    /* Slide colours: annulla pan +2cm (striscia nera sotto navbar) */
    #hero.hero--slideshow.hero--ipad-mini .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }

    #hero.hero--slideshow.hero--ipad-mini[data-active-slide="2"] .hero-heading {
        top: calc(var(--navbar-scroll-offset) + 0.5rem + 0.5cm);
    }

    /* Slide 0 e 1: H1/H2 a bandiera con CTA (stesso margine 1.5rem) */
    #hero.hero--slideshow.hero--ipad-mini[data-active-slide="0"] .hero-heading {
        right: 1.5rem;
        left: auto;
    }

    #hero.hero--slideshow.hero--ipad-mini[data-active-slide="1"] .hero-heading {
        left: 1.5rem;
        right: auto;
    }

    #hero.hero--slideshow.hero--ipad-mini .hero-slide.is-active[data-index="0"] .hero-colours-cta,
    #hero.hero--slideshow.hero--ipad-mini .hero-slide.is-active[data-index="1"] .hero-colours-cta,
    #hero.hero--slideshow.hero--ipad-mini .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        display: inline-block;
        position: absolute;
        z-index: 3;
        padding: 0.6rem 0.85rem;
        font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
        font-size: clamp(14px, 1.2vw, 18px);
        font-weight: 700;
        color: #ffffff;
        background-color: transparent;
        border: 2px solid #ffffff;
        border-radius: 0;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        pointer-events: auto;
        box-sizing: border-box;
        white-space: nowrap;
    }

    /* Slide 0 jazz: CTA a bandiera con H1/H2 (destra) */
    #hero.hero--slideshow.hero--ipad-mini .hero-slide.is-active[data-index="0"] .hero-colours-cta {
        bottom: var(--hero-label-bottom);
        left: auto;
        right: 1.5rem;
        transform: none;
    }

    /* Slide 1 portraits: label a destra, CTA bianco a sinistra (a bandiera con H1/H2) */
    #hero.hero--slideshow.hero--ipad-mini .hero-slide[data-index="1"] .hero-slide-label {
        left: auto;
        right: 1.5rem;
        text-align: right;
        transform: translateX(0.65rem);
    }

    #hero.hero--slideshow.hero--ipad-mini .hero-slide.is-active[data-index="1"] .hero-slide-label.hero-slide-label--in {
        animation: hero-portrait-label-in-se 1.1s ease-out forwards;
    }

    #hero.hero--slideshow.hero--ipad-mini .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        bottom: var(--hero-label-bottom);
        left: 1.5rem;
        right: auto;
        transform: none;
        color: #ffffff;
        border-color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }

    #hero.hero--slideshow.hero--ipad-mini .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        left: 50%;
        right: auto;
        bottom: calc(2cm + 1cm + var(--hero-label-size));
        transform: translateX(-50%);
    }

    #hero.hero--slideshow.hero--ipad-mini .hero-slide[data-index="2"] .hero-slide-label {
        left: 50%;
        right: auto;
        bottom: 2cm;
        text-align: center;
        transform: translateX(-50%) translateY(2cm);
    }

    #hero.hero--slideshow.hero--ipad-mini .hero-slide.is-active[data-index="2"] .hero-slide-label.hero-slide-label--in {
        animation: hero-colours-label-in 0.4s ease-out forwards;
    }
}

/* iPad Air landscape (1180×820) */
@media (orientation: landscape) {
    #hero.hero--slideshow.hero--ipad-air .hero-title {
        font-size: calc(65pt - 7px);
    }

    #hero.hero--slideshow.hero--ipad-air .hero-slide-label {
        font-family: 'Schlbki', 'Schlbkb', Georgia, serif;
    }

    #hero.hero--slideshow.hero--ipad-air .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }

    #hero.hero--slideshow.hero--ipad-air .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        font-size: clamp(19px, calc(1.2vw + 5px), 23px);
    }

    /* Slide 1 portraits: label bianca a destra */
    #hero.hero--slideshow.hero--ipad-air .hero-slide[data-index="1"] .hero-slide-label {
        left: auto;
        right: 1cm;
        text-align: right;
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        transform: translateX(0.65rem);
    }

    #hero.hero--slideshow.hero--ipad-air .hero-slide.is-active[data-index="1"] .hero-slide-label.hero-slide-label--in {
        animation: hero-portrait-label-in-se 1.1s ease-out forwards;
    }

    /* Slide 1: CTA bianco a bandiera con H1/H2 (sinistra 2cm) */
    #hero.hero--slideshow.hero--ipad-air .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        left: 2cm;
        right: auto;
        color: #ffffff;
        border-color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }
}

/* iPad Pro landscape (11" 1194×834 / 12,9" 1366×1024) */
@media (orientation: landscape) {
    #hero.hero--slideshow.hero--ipad-pro .hero-title {
        font-size: clamp(52px, 8.05vmin, 83px);
    }

    #hero.hero--slideshow.hero--ipad-pro .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        font-size: clamp(19px, calc(1.2vw + 5px), 23px);
    }

    /* Slide 1 portraits: label bianca a destra */
    #hero.hero--slideshow.hero--ipad-pro .hero-slide[data-index="1"] .hero-slide-label {
        left: auto;
        right: 1cm;
        text-align: right;
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        transform: translateX(0.65rem);
    }

    #hero.hero--slideshow.hero--ipad-pro .hero-slide.is-active[data-index="1"] .hero-slide-label.hero-slide-label--in {
        animation: hero-portrait-label-in-se 1.1s ease-out forwards;
    }

    /* Slide 1: CTA bianco a sinistra (a bandiera con H1/H2) */
    #hero.hero--slideshow.hero--ipad-pro .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        left: 2cm;
        right: auto;
        color: #ffffff;
        border-color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }
}

/* Fallback DevTools iOS — stesse regole senza classe JS */
@supports (-webkit-touch-callout: none) {
    @media (width: 768px) and (orientation: portrait) {
        #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-label {
            left: 50%;
            right: auto;
            bottom: 2cm;
            text-align: center;
            transform: translateX(-50%) translateY(2cm);
        }

        #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
            display: inline-block;
            position: absolute;
            z-index: 3;
            left: 50%;
            right: auto;
            bottom: calc(2cm + 1cm + var(--hero-label-size));
            transform: translateX(-50%);
            padding: 0.6rem 0.85rem;
            font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
            font-size: clamp(18px, calc(1.2vw + 4px), 22px);
            font-weight: 700;
            color: #ffffff;
            background-color: transparent;
            border: 2px solid #ffffff;
            border-radius: 0;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
            pointer-events: auto;
            box-sizing: border-box;
            white-space: nowrap;
        }
    }

    @media (width: 820px) and (orientation: portrait),
    (width: 834px) and (orientation: portrait),
    (width: 1024px) and (orientation: portrait) {
        #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-label {
            left: 50%;
            right: auto;
            bottom: 2cm;
            text-align: center;
            transform: translateX(-50%) translateY(2cm);
        }

        #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
            display: inline-block;
            position: absolute;
            z-index: 3;
            left: 50%;
            right: auto;
            bottom: calc(2cm + 1cm + var(--hero-label-size));
            transform: translateX(-50%);
            padding: 0.6rem 0.85rem;
            font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
            font-size: clamp(18px, calc(1.2vw + 4px), 22px);
            font-weight: 700;
            color: #ffffff;
            background-color: transparent;
            border: 2px solid #ffffff;
            border-radius: 0;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
            pointer-events: auto;
            box-sizing: border-box;
            white-space: nowrap;
        }
    }

    @media (width: 834px) and (orientation: portrait),
    (width: 1024px) and (orientation: portrait) {
        #hero.hero--slideshow[data-active-slide="2"] .hero-heading {
            top: calc(var(--navbar-scroll-offset) + 0.75rem + 2cm);
        }
    }

    @media (width: 1024px) and (height: 768px) and (orientation: landscape) {
        #hero.hero--slideshow .hero-subtitle {
            font-size: clamp(27px, calc(2.75vmin + 9px), 33px);
        }

        #hero.hero--slideshow .hero-slide-label {
            font-family: 'Schlbki', 'Schlbkb', Georgia, serif;
            font-size: calc(var(--hero-label-size) - 7px);
        }

        #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
            object-position: center center;
        }

        #hero.hero--slideshow[data-active-slide="2"] .hero-heading {
            top: calc(var(--navbar-scroll-offset) + 0.5rem + 0.5cm);
        }

        #hero.hero--slideshow .hero-slide.is-active[data-index="0"] .hero-colours-cta,
        #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta,
        #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
            display: inline-block;
            position: absolute;
            z-index: 3;
            padding: 0.6rem 0.85rem;
            font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
            font-size: clamp(14px, 1.2vw, 18px);
            font-weight: 700;
            color: #ffffff;
            background-color: transparent;
            border: 2px solid #ffffff;
            border-radius: 0;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
            pointer-events: auto;
            box-sizing: border-box;
            white-space: nowrap;
        }

        #hero.hero--slideshow .hero-slide.is-active[data-index="0"] .hero-colours-cta {
            bottom: var(--hero-label-bottom);
            left: auto;
            right: 1.5rem;
            transform: none;
        }

        #hero.hero--slideshow .hero-slide[data-index="1"] .hero-slide-label {
            left: auto;
            right: 1.5rem;
            text-align: right;
            transform: translateX(0.65rem);
        }

        #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-slide-label.hero-slide-label--in {
            animation: hero-portrait-label-in-se 1.1s ease-out forwards;
        }

        #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
            bottom: var(--hero-label-bottom);
            left: 1.5rem;
            right: auto;
            transform: none;
            color: #ffffff;
            border-color: #ffffff;
            text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        }

        #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
            left: 50%;
            right: auto;
            bottom: calc(2cm + 1cm + var(--hero-label-size));
            transform: translateX(-50%);
        }

        #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-label {
            left: 50%;
            right: auto;
            bottom: 2cm;
            text-align: center;
            transform: translateX(-50%) translateY(2cm);
        }
    }

    @media (width: 1180px) and (height: 820px) and (orientation: landscape) {
        #hero.hero--slideshow .hero-title {
            font-size: calc(65pt - 7px);
        }

        #hero.hero--slideshow .hero-slide-label {
            font-family: 'Schlbki', 'Schlbkb', Georgia, serif;
        }

        #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
            object-position: center center;
        }

        #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
            font-size: clamp(19px, calc(1.2vw + 5px), 23px);
        }

        #hero.hero--slideshow .hero-slide[data-index="1"] .hero-slide-label {
            left: auto;
            right: 1cm;
            text-align: right;
            color: #ffffff;
            text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
            transform: translateX(0.65rem);
        }

        #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-slide-label.hero-slide-label--in {
            animation: hero-portrait-label-in-se 1.1s ease-out forwards;
        }

        #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
            left: 2cm;
            right: auto;
            color: #ffffff;
            border-color: #ffffff;
            text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        }
    }
}

/* iPad Air landscape 1180×820: fallback senza @supports (DevTools desktop + Safari) */
@media (orientation: landscape) and (min-width: 1165px) and (max-width: 1185px) and (min-height: 810px) and (max-height: 828px) {
    #hero.hero--slideshow .hero-title {
        font-size: calc(65pt - 7px);
    }

    #hero.hero--slideshow .hero-slide-label {
        font-family: 'Schlbki', 'Schlbkb', Georgia, serif;
    }

    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        font-size: clamp(19px, calc(1.2vw + 5px), 23px);
    }

    #hero.hero--slideshow .hero-slide[data-index="1"] .hero-slide-label {
        left: auto;
        right: 1cm;
        text-align: right;
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        transform: translateX(0.65rem);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-slide-label.hero-slide-label--in {
        animation: hero-portrait-label-in-se 1.1s ease-out forwards;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        left: 2cm;
        right: auto;
        color: #ffffff;
        border-color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }
}

/* iPad Air portrait 820×1180: fallback senza @supports (DevTools desktop + Safari) */
@media (orientation: portrait) and (min-width: 815px) and (max-width: 825px) and (min-height: 1170px) and (max-height: 1185px) {
    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-heading {
        top: calc(var(--navbar-scroll-offset) + 0.75rem + 0.5cm);
    }

    /* Slide colours: H1/H2 +10px */
    #hero.hero--slideshow[data-active-slide="2"] .hero-title {
        font-size: calc(clamp(56px, calc(7.5vw + 16px), 72px) + 10px);
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
        font-size: calc(clamp(36px, calc(3.75vw + 16px), 44px) + 10px);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        font-size: clamp(23px, calc(1.2vw + 9px), 27px);
    }
}

/* iPad Pro 11" landscape 1194×834: fallback senza @supports */
@media (orientation: landscape) and (min-width: 1188px) and (max-width: 1200px) and (min-height: 828px) and (max-height: 840px) {
    #hero.hero--slideshow .hero-title {
        font-size: clamp(52px, 8.05vmin, 83px);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        font-size: clamp(19px, calc(1.2vw + 5px), 23px);
    }

    #hero.hero--slideshow .hero-slide[data-index="1"] .hero-slide-label {
        left: auto;
        right: 1cm;
        text-align: right;
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        transform: translateX(0.65rem);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-slide-label.hero-slide-label--in {
        animation: hero-portrait-label-in-se 1.1s ease-out forwards;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        left: 2cm;
        right: auto;
        color: #ffffff;
        border-color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }
}

/* iPad Pro 12,9" landscape 1366×1024: fallback senza @supports */
@media (orientation: landscape) and (min-width: 1360px) and (max-width: 1372px) and (min-height: 1018px) and (max-height: 1030px) {
    #hero.hero--slideshow .hero-title {
        font-size: clamp(52px, 8.05vmin, 83px);
    }

    /* Slide colours: annulla pan +2cm (striscia nera sotto navbar) */
    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        font-size: clamp(19px, calc(1.2vw + 5px), 23px);
    }

    #hero.hero--slideshow .hero-slide[data-index="1"] .hero-slide-label {
        left: auto;
        right: 1cm;
        text-align: right;
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        transform: translateX(0.65rem);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-slide-label.hero-slide-label--in {
        animation: hero-portrait-label-in-se 1.1s ease-out forwards;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        left: 2cm;
        right: auto;
        color: #ffffff;
        border-color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }
}

/* iPad Pro 11" portrait 834×1194: fallback senza @supports */
@media (orientation: portrait) and (min-width: 829px) and (max-width: 839px) and (min-height: 1189px) and (max-height: 1199px) {
    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-title {
        font-size: clamp(63px, calc(7.5vw + 23px), 79px);
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
        font-size: clamp(43px, calc(3.75vw + 23px), 51px);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        font-size: clamp(25px, calc(1.2vw + 11px), 29px);
    }
}

/* iPad Pro 12,9" portrait 1024×1366: fallback senza @supports */
@media (orientation: portrait) and (min-width: 1019px) and (max-width: 1029px) and (min-height: 1361px) and (max-height: 1371px) {
    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }

    /* Slide colours: H1/H2 +7px */
    #hero.hero--slideshow[data-active-slide="2"] .hero-title {
        font-size: calc(clamp(56px, calc(7.5vw + 16px), 72px) + 7px);
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
        font-size: calc(clamp(36px, calc(3.75vw + 16px), 44px) + 7px);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        font-size: clamp(25px, calc(1.2vw + 11px), 29px);
    }
}

/* ===== Nest Hub (1024×600) / Nest Hub Max (1280×800) — slideshow hero ===== */

/* Nest Hub landscape: H1/H2 tutte le slide + CTA (viewport sotto desktop, altezza > 520px) */
@media (orientation: landscape) {
    #hero.hero--slideshow.hero--nest-hub .hero-heading {
        display: flex;
        top: calc(var(--navbar-scroll-offset) + 0.35rem);
        transform: none;
    }

    #hero.hero--slideshow.hero--nest-hub .hero-title {
        font-size: clamp(32px, calc(5.2vmin + 12px), 44px);
        white-space: nowrap;
    }

    #hero.hero--slideshow.hero--nest-hub .hero-subtitle {
        font-size: clamp(22px, calc(2.6vmin + 12px), 28px);
        letter-spacing: 0.02em;
    }

    #hero.hero--slideshow.hero--nest-hub[data-active-slide="0"] .hero-heading {
        right: clamp(0.75rem, 3vmin, 1.25rem);
        left: auto;
        text-align: right;
        align-items: flex-end;
    }

    #hero.hero--slideshow.hero--nest-hub[data-active-slide="0"] .hero-title {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    #hero.hero--slideshow.hero--nest-hub[data-active-slide="0"] .hero-title,
    #hero.hero--slideshow.hero--nest-hub[data-active-slide="0"] .hero-subtitle {
        color: #ffffff;
        align-self: flex-end;
        text-align: right;
    }

    #hero.hero--slideshow.hero--nest-hub[data-active-slide="1"] .hero-heading {
        left: clamp(0.75rem, 3vmin, 1.25rem);
        right: auto;
        text-align: left;
        align-items: flex-start;
    }

    #hero.hero--slideshow.hero--nest-hub[data-active-slide="1"] .hero-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #hero.hero--slideshow.hero--nest-hub[data-active-slide="1"] .hero-title,
    #hero.hero--slideshow.hero--nest-hub[data-active-slide="1"] .hero-subtitle {
        color: #ffffff;
        align-self: flex-start;
        text-align: left;
    }

    #hero.hero--slideshow.hero--nest-hub[data-active-slide="2"] .hero-heading {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        text-align: center;
        align-items: center;
    }

    #hero.hero--slideshow.hero--nest-hub[data-active-slide="2"] .hero-title,
    #hero.hero--slideshow.hero--nest-hub[data-active-slide="2"] .hero-subtitle {
        color: #000000;
        align-self: center;
        text-align: center;
    }

    #hero.hero--slideshow.hero--nest-hub .hero-slide-label {
        font-family: 'Schlbki', 'Schlbkb', Georgia, serif;
        font-size: calc(var(--hero-label-size) - 7px);
    }

    #hero.hero--slideshow.hero--nest-hub .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }

    #hero.hero--slideshow.hero--nest-hub .hero-slide.is-active[data-index="0"] .hero-colours-cta,
    #hero.hero--slideshow.hero--nest-hub .hero-slide.is-active[data-index="1"] .hero-colours-cta,
    #hero.hero--slideshow.hero--nest-hub .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        display: inline-block;
        position: absolute;
        z-index: 3;
        padding: 0.4rem 0.65rem;
        font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
        font-size: clamp(12px, 1.2vw, 16px);
        font-weight: 700;
        color: #ffffff;
        background-color: transparent;
        border: 2px solid #ffffff;
        border-radius: 0;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        pointer-events: auto;
        box-sizing: border-box;
        white-space: nowrap;
    }

    #hero.hero--slideshow.hero--nest-hub .hero-slide.is-active[data-index="0"] .hero-colours-cta {
        bottom: var(--hero-label-bottom);
        left: auto;
        right: clamp(0.75rem, 3vmin, 1.25rem);
        transform: none;
    }

    #hero.hero--slideshow.hero--nest-hub .hero-slide[data-index="1"] .hero-slide-label {
        left: auto;
        right: clamp(0.75rem, 3vmin, 1.25rem);
        text-align: right;
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        transform: translateX(0.65rem);
    }

    #hero.hero--slideshow.hero--nest-hub .hero-slide.is-active[data-index="1"] .hero-slide-label.hero-slide-label--in {
        animation: hero-portrait-label-in-se 1.1s ease-out forwards;
    }

    #hero.hero--slideshow.hero--nest-hub .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        bottom: var(--hero-label-bottom);
        left: clamp(0.75rem, 3vmin, 1.25rem);
        right: auto;
        transform: none;
        color: #ffffff;
        border-color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }

    #hero.hero--slideshow.hero--nest-hub .hero-slide[data-index="2"] .hero-slide-label {
        left: 50%;
        right: auto;
        bottom: 2cm;
        text-align: center;
        transform: translateX(-50%) translateY(2cm);
    }

    #hero.hero--slideshow.hero--nest-hub .hero-slide.is-active[data-index="2"] .hero-slide-label.hero-slide-label--in {
        animation: hero-colours-label-in 0.4s ease-out forwards;
    }

    #hero.hero--slideshow.hero--nest-hub .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        left: 50%;
        right: auto;
        bottom: calc(2cm + 1cm + var(--hero-label-size));
        transform: translateX(-50%);
    }
}

/* Nest Hub Max landscape: slide 1 bianca + slide colours fix */
@media (orientation: landscape) {
    #hero.hero--slideshow.hero--nest-hub-max .hero-slide-label {
        font-family: 'Schlbki', 'Schlbkb', Georgia, serif;
    }

    #hero.hero--slideshow.hero--nest-hub-max .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }

    #hero.hero--slideshow.hero--nest-hub-max .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        font-size: clamp(19px, calc(1.2vw + 5px), 23px);
    }

    #hero.hero--slideshow.hero--nest-hub-max .hero-slide[data-index="1"] .hero-slide-label {
        left: auto;
        right: 1cm;
        text-align: right;
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        transform: translateX(0.65rem);
    }

    #hero.hero--slideshow.hero--nest-hub-max .hero-slide.is-active[data-index="1"] .hero-slide-label.hero-slide-label--in {
        animation: hero-portrait-label-in-se 1.1s ease-out forwards;
    }

    #hero.hero--slideshow.hero--nest-hub-max .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        left: 2cm;
        right: auto;
        color: #ffffff;
        border-color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }
}

/* Nest Hub 1024×600: fallback viewport DevTools */
@media (width: 1024px) and (height: 600px) and (orientation: landscape) {
    #hero.hero--slideshow .hero-heading {
        display: flex;
        top: calc(var(--navbar-scroll-offset) + 0.35rem);
        transform: none;
    }

    #hero.hero--slideshow .hero-title {
        font-size: clamp(32px, calc(5.2vmin + 12px), 44px);
        white-space: nowrap;
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: clamp(22px, calc(2.6vmin + 12px), 28px);
        letter-spacing: 0.02em;
    }

    #hero.hero--slideshow[data-active-slide="0"] .hero-heading {
        right: clamp(0.75rem, 3vmin, 1.25rem);
        left: auto;
        text-align: right;
        align-items: flex-end;
    }

    #hero.hero--slideshow[data-active-slide="0"] .hero-title {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    #hero.hero--slideshow[data-active-slide="0"] .hero-title,
    #hero.hero--slideshow[data-active-slide="0"] .hero-subtitle {
        color: #ffffff;
        align-self: flex-end;
        text-align: right;
    }

    #hero.hero--slideshow[data-active-slide="1"] .hero-heading {
        left: clamp(0.75rem, 3vmin, 1.25rem);
        right: auto;
        text-align: left;
        align-items: flex-start;
    }

    #hero.hero--slideshow[data-active-slide="1"] .hero-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #hero.hero--slideshow[data-active-slide="1"] .hero-title,
    #hero.hero--slideshow[data-active-slide="1"] .hero-subtitle {
        color: #ffffff;
        align-self: flex-start;
        text-align: left;
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-heading {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        text-align: center;
        align-items: center;
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-title,
    #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
        color: #000000;
        align-self: center;
        text-align: center;
    }

    #hero.hero--slideshow .hero-slide-label {
        font-family: 'Schlbki', 'Schlbkb', Georgia, serif;
        font-size: calc(var(--hero-label-size) - 7px);
    }

    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="0"] .hero-colours-cta,
    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta,
    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        display: inline-block;
        position: absolute;
        z-index: 3;
        padding: 0.4rem 0.65rem;
        font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
        font-size: clamp(12px, 1.2vw, 16px);
        font-weight: 700;
        color: #ffffff;
        background-color: transparent;
        border: 2px solid #ffffff;
        border-radius: 0;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        pointer-events: auto;
        box-sizing: border-box;
        white-space: nowrap;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="0"] .hero-colours-cta {
        bottom: var(--hero-label-bottom);
        left: auto;
        right: clamp(0.75rem, 3vmin, 1.25rem);
        transform: none;
    }

    #hero.hero--slideshow .hero-slide[data-index="1"] .hero-slide-label {
        left: auto;
        right: clamp(0.75rem, 3vmin, 1.25rem);
        text-align: right;
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        transform: translateX(0.65rem);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-slide-label.hero-slide-label--in {
        animation: hero-portrait-label-in-se 1.1s ease-out forwards;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        bottom: var(--hero-label-bottom);
        left: clamp(0.75rem, 3vmin, 1.25rem);
        right: auto;
        transform: none;
        color: #ffffff;
        border-color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }

    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-label {
        left: 50%;
        right: auto;
        bottom: 2cm;
        text-align: center;
        transform: translateX(-50%) translateY(2cm);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-slide-label.hero-slide-label--in {
        animation: hero-colours-label-in 0.4s ease-out forwards;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        left: 50%;
        right: auto;
        bottom: calc(2cm + 1cm + var(--hero-label-size));
        transform: translateX(-50%);
    }
}

/* Nest Hub Max 1280×800: fallback viewport DevTools */
@media (width: 1280px) and (height: 800px) and (orientation: landscape) {
    #hero.hero--slideshow .hero-slide-label {
        font-family: 'Schlbki', 'Schlbkb', Georgia, serif;
    }

    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        font-size: clamp(19px, calc(1.2vw + 5px), 23px);
    }

    #hero.hero--slideshow .hero-slide[data-index="1"] .hero-slide-label {
        left: auto;
        right: 1cm;
        text-align: right;
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        transform: translateX(0.65rem);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-slide-label.hero-slide-label--in {
        animation: hero-portrait-label-in-se 1.1s ease-out forwards;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        left: 2cm;
        right: auto;
        color: #ffffff;
        border-color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }
}

/* Google Pixel Tablet / Lenovo Tab P12 Pro portrait (800×1280): slide colours — label + CTA centrate */
@media (width: 800px) and (height: 1280px) and (orientation: portrait) {

    /* Slide colours: annulla pan +2cm (striscia nera sotto navbar) */
    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }

    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-label {
        left: 50%;
        right: auto;
        bottom: 2cm;
        text-align: center;
        transform: translateX(-50%) translateY(2cm);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-slide-label.hero-slide-label--in {
        animation: hero-colours-label-in 0.4s ease-out forwards;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        display: inline-block;
        position: absolute;
        z-index: 3;
        left: 50%;
        right: auto;
        bottom: calc(2cm + 1cm + var(--hero-label-size));
        transform: translateX(-50%);
        padding: 0.6rem 0.85rem;
        font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
        font-size: clamp(24px, calc(1.2vw + 10px), 28px);
        font-weight: 700;
        color: #ffffff;
        background-color: transparent;
        border: 2px solid #ffffff;
        border-radius: 0;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        pointer-events: auto;
        box-sizing: border-box;
        white-space: nowrap;
    }
}

/* Lenovo Tab M10 landscape (960×600): H1/H2, label, CTA ed effetti su tutte le slide */
@media (width: 960px) and (height: 600px) and (orientation: landscape) {
    #hero.hero--slideshow .hero-heading {
        display: flex;
        top: calc(var(--navbar-scroll-offset) + 0.35rem);
        transform: none;
    }

    #hero.hero--slideshow .hero-title {
        font-size: clamp(32px, calc(5.2vmin + 12px), 44px);
        white-space: nowrap;
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: clamp(22px, calc(2.6vmin + 12px), 28px);
        letter-spacing: 0.02em;
    }

    #hero.hero--slideshow[data-active-slide="0"] .hero-heading {
        right: clamp(0.75rem, 3vmin, 1.25rem);
        left: auto;
        text-align: right;
        align-items: flex-end;
    }

    #hero.hero--slideshow[data-active-slide="0"] .hero-title {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    #hero.hero--slideshow[data-active-slide="0"] .hero-title,
    #hero.hero--slideshow[data-active-slide="0"] .hero-subtitle {
        color: #ffffff;
        align-self: flex-end;
        text-align: right;
    }

    #hero.hero--slideshow[data-active-slide="1"] .hero-heading {
        left: clamp(0.75rem, 3vmin, 1.25rem);
        right: auto;
        text-align: left;
        align-items: flex-start;
    }

    #hero.hero--slideshow[data-active-slide="1"] .hero-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #hero.hero--slideshow[data-active-slide="1"] .hero-title,
    #hero.hero--slideshow[data-active-slide="1"] .hero-subtitle {
        color: #ffffff;
        align-self: flex-start;
        text-align: left;
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-heading {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        text-align: center;
        align-items: center;
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-title,
    #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
        color: #000000;
        align-self: center;
        text-align: center;
    }

    #hero.hero--slideshow .hero-slide-label {
        font-family: 'Schlbki', 'Schlbkb', Georgia, serif;
        font-size: calc(var(--hero-label-size) - 7px);
    }

    /* Slide colours: annulla pan +2cm (striscia nera sotto navbar) */
    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="0"] .hero-colours-cta,
    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta,
    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        display: inline-block;
        position: absolute;
        z-index: 3;
        padding: 0.4rem 0.65rem;
        font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
        font-size: clamp(12px, 1.2vw, 16px);
        font-weight: 700;
        color: #ffffff;
        background-color: transparent;
        border: 2px solid #ffffff;
        border-radius: 0;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        pointer-events: auto;
        box-sizing: border-box;
        white-space: nowrap;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="0"] .hero-colours-cta {
        bottom: var(--hero-label-bottom);
        left: auto;
        right: clamp(0.75rem, 3vmin, 1.25rem);
        transform: none;
    }

    #hero.hero--slideshow .hero-slide[data-index="1"] .hero-slide-label {
        left: auto;
        right: clamp(0.75rem, 3vmin, 1.25rem);
        text-align: right;
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        transform: translateX(0.65rem);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-slide-label.hero-slide-label--in {
        animation: hero-portrait-label-in-se 1.1s ease-out forwards;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        bottom: var(--hero-label-bottom);
        left: clamp(0.75rem, 3vmin, 1.25rem);
        right: auto;
        transform: none;
        color: #ffffff;
        border-color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }

    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-label {
        left: 50%;
        right: auto;
        bottom: 2cm;
        text-align: center;
        transform: translateX(-50%) translateY(2cm);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-slide-label.hero-slide-label--in {
        animation: hero-colours-label-in 0.4s ease-out forwards;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        left: 50%;
        right: auto;
        bottom: calc(2cm + 1cm + var(--hero-label-size));
        transform: translateX(-50%);
    }
}

/* Samsung Galaxy Tab A7 landscape (1000×600): H1/H2, label, CTA ed effetti su tutte le slide */
@media (min-width: 990px) and (max-width: 1010px) and (min-height: 590px) and (max-height: 610px) {
    #hero.hero--slideshow .hero-heading {
        display: flex;
        top: calc(var(--navbar-scroll-offset) + 0.35rem);
        transform: none;
    }

    #hero.hero--slideshow .hero-title {
        font-size: clamp(32px, calc(5.2vmin + 12px), 44px);
        white-space: nowrap;
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: clamp(22px, calc(2.6vmin + 12px), 28px);
        letter-spacing: 0.02em;
    }

    #hero.hero--slideshow[data-active-slide="0"] .hero-heading {
        right: clamp(0.75rem, 3vmin, 1.25rem);
        left: auto;
        text-align: right;
        align-items: flex-end;
    }

    #hero.hero--slideshow[data-active-slide="0"] .hero-title {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    #hero.hero--slideshow[data-active-slide="0"] .hero-title,
    #hero.hero--slideshow[data-active-slide="0"] .hero-subtitle {
        color: #ffffff;
        align-self: flex-end;
        text-align: right;
    }

    #hero.hero--slideshow[data-active-slide="1"] .hero-heading {
        left: clamp(0.75rem, 3vmin, 1.25rem);
        right: auto;
        text-align: left;
        align-items: flex-start;
    }

    #hero.hero--slideshow[data-active-slide="1"] .hero-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #hero.hero--slideshow[data-active-slide="1"] .hero-title,
    #hero.hero--slideshow[data-active-slide="1"] .hero-subtitle {
        color: #ffffff;
        align-self: flex-start;
        text-align: left;
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-heading {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        text-align: center;
        align-items: center;
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-title,
    #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
        color: #000000;
        align-self: center;
        text-align: center;
    }

    #hero.hero--slideshow .hero-slide-label {
        font-family: 'Schlbki', 'Schlbkb', Georgia, serif;
        font-size: calc(var(--hero-label-size) - 7px);
    }

    /* Slide colours: annulla pan +2cm (striscia nera sotto navbar) */
    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="0"] .hero-colours-cta,
    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta,
    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        display: inline-block;
        position: absolute;
        z-index: 3;
        padding: 0.4rem 0.65rem;
        font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
        font-size: clamp(12px, 1.2vw, 16px);
        font-weight: 700;
        color: #ffffff;
        background-color: transparent;
        border: 2px solid #ffffff;
        border-radius: 0;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        pointer-events: auto;
        box-sizing: border-box;
        white-space: nowrap;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="0"] .hero-colours-cta {
        bottom: var(--hero-label-bottom);
        left: auto;
        right: clamp(0.75rem, 3vmin, 1.25rem);
        transform: none;
    }

    #hero.hero--slideshow .hero-slide[data-index="1"] .hero-slide-label {
        left: auto;
        right: clamp(0.75rem, 3vmin, 1.25rem);
        text-align: right;
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        transform: translateX(0.65rem);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-slide-label.hero-slide-label--in {
        animation: hero-portrait-label-in-se 1.1s ease-out forwards;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        bottom: var(--hero-label-bottom);
        left: clamp(0.75rem, 3vmin, 1.25rem);
        right: auto;
        transform: none;
        color: #ffffff;
        border-color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }

    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-label {
        left: 50%;
        right: auto;
        bottom: 2cm;
        text-align: center;
        transform: translateX(-50%) translateY(2cm);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-slide-label.hero-slide-label--in {
        animation: hero-colours-label-in 0.4s ease-out forwards;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        left: 50%;
        right: auto;
        bottom: calc(2cm + 1cm + var(--hero-label-size));
        transform: translateX(-50%);
    }
}

/* OnePlus Pad landscape (933×667): H1/H2, label, CTA ed effetti su tutte le slide */
@media (min-width: 931px) and (max-width: 935px) and (min-height: 665px) and (max-height: 669px) {
    #hero.hero--slideshow .hero-heading {
        display: flex;
        top: calc(var(--navbar-scroll-offset) + 0.35rem);
        transform: none;
    }

    #hero.hero--slideshow .hero-title {
        font-size: clamp(32px, calc(5.2vmin + 12px), 44px);
        white-space: nowrap;
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: clamp(22px, calc(2.6vmin + 12px), 28px);
        letter-spacing: 0.02em;
    }

    #hero.hero--slideshow[data-active-slide="0"] .hero-heading {
        right: clamp(0.75rem, 3vmin, 1.25rem);
        left: auto;
        text-align: right;
        align-items: flex-end;
    }

    #hero.hero--slideshow[data-active-slide="0"] .hero-title {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    #hero.hero--slideshow[data-active-slide="0"] .hero-title,
    #hero.hero--slideshow[data-active-slide="0"] .hero-subtitle {
        color: #ffffff;
        align-self: flex-end;
        text-align: right;
    }

    #hero.hero--slideshow[data-active-slide="1"] .hero-heading {
        left: clamp(0.75rem, 3vmin, 1.25rem);
        right: auto;
        text-align: left;
        align-items: flex-start;
    }

    #hero.hero--slideshow[data-active-slide="1"] .hero-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #hero.hero--slideshow[data-active-slide="1"] .hero-title,
    #hero.hero--slideshow[data-active-slide="1"] .hero-subtitle {
        color: #ffffff;
        align-self: flex-start;
        text-align: left;
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-heading {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        text-align: center;
        align-items: center;
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-title,
    #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
        color: #000000;
        align-self: center;
        text-align: center;
    }

    #hero.hero--slideshow .hero-slide-label {
        font-family: 'Schlbki', 'Schlbkb', Georgia, serif;
        font-size: calc(var(--hero-label-size) - 7px);
    }

    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="0"] .hero-colours-cta,
    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta,
    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        display: inline-block;
        position: absolute;
        z-index: 3;
        padding: 0.4rem 0.65rem;
        font-family: 'Arrière Garde', 'Century Gothic', sans-serif;
        font-size: clamp(12px, 1.2vw, 16px);
        font-weight: 700;
        color: #ffffff;
        background-color: transparent;
        border: 2px solid #ffffff;
        border-radius: 0;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        pointer-events: auto;
        box-sizing: border-box;
        white-space: nowrap;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="0"] .hero-colours-cta {
        bottom: var(--hero-label-bottom);
        left: auto;
        right: clamp(0.75rem, 3vmin, 1.25rem);
        transform: none;
    }

    #hero.hero--slideshow .hero-slide[data-index="1"] .hero-slide-label {
        left: auto;
        right: clamp(0.75rem, 3vmin, 1.25rem);
        text-align: right;
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        transform: translateX(0.65rem);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-slide-label.hero-slide-label--in {
        animation: hero-portrait-label-in-se 1.1s ease-out forwards;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        bottom: var(--hero-label-bottom);
        left: clamp(0.75rem, 3vmin, 1.25rem);
        right: auto;
        transform: none;
        color: #ffffff;
        border-color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }

    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-label {
        left: 50%;
        right: auto;
        bottom: 2cm;
        text-align: center;
        transform: translateX(-50%) translateY(2cm);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-slide-label.hero-slide-label--in {
        animation: hero-colours-label-in 0.4s ease-out forwards;
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="2"] .hero-colours-cta {
        left: 50%;
        right: auto;
        bottom: calc(2cm + 1cm + var(--hero-label-size));
        transform: translateX(-50%);
    }
}

/* Samsung Galaxy Tab A9 landscape (1116×670): slide 1 bianca + slide colours senza striscia nera */
@media (min-width: 1113px) and (max-width: 1119px) and (min-height: 667px) and (max-height: 673px) {

    /* H1/H2 desktop −10px (tutte e tre le slide) */
    #hero.hero--slideshow .hero-title {
        font-size: calc(65pt - 10px);
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: calc(32.5pt - 10px);
    }

    /* Scritte jazz / portraits / colours −12px */
    #hero.hero--slideshow .hero-slide-label {
        font-size: calc(var(--hero-label-size) - 12px);
    }

    #hero.hero--slideshow .hero-slide[data-index="1"] .hero-slide-label {
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        color: #ffffff;
        border-color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }

    /* Slide colours: annulla pan +2cm (striscia nera sotto navbar) */
    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }
}

/* Samsung Galaxy Tab S10 FE landscape (1152×720): slide 1 bianca + slide colours senza striscia nera */
@media (min-width: 1149px) and (max-width: 1155px) and (min-height: 717px) and (max-height: 723px) {
    #hero.hero--slideshow .hero-slide[data-index="1"] .hero-slide-label {
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }

    #hero.hero--slideshow .hero-slide.is-active[data-index="1"] .hero-colours-cta {
        color: #ffffff;
        border-color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }

    /* Slide colours: annulla pan +2cm (striscia nera sotto navbar) */
    #hero.hero--slideshow .hero-slide[data-index="2"] .hero-slide-img {
        object-position: center center;
    }
}

/* Samsung Galaxy Tab S4 portrait (712×1138): slide colours — H1/H2 +12px */
@media (min-width: 709px) and (max-width: 715px) and (min-height: 1135px) and (max-height: 1141px) and (orientation: portrait) {
    #hero.hero--slideshow[data-active-slide="2"] .hero-title {
        font-size: calc(clamp(46px, calc(9.5vw + 16px), 58px) + 12px);
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
        font-size: calc(clamp(31px, calc(4.8vw + 16px), 37px) + 12px);
    }
}

/* Google Pixel 7 landscape (915×412): H1 +7px, H2 −5px (tutte e tre le slide) */
@media (orientation: landscape) and (min-width: 912px) and (max-width: 918px) and (min-height: 409px) and (max-height: 415px) {
    #hero.hero--slideshow .hero-title {
        font-size: calc(clamp(36px, calc(5.2vmin + 16px), 50px) + 7px);
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: calc(clamp(26px, calc(2.6vmin + 16px), 33px) - 5px);
    }
}

/* Samsung Galaxy S8+ landscape (740×360): H1 +5px, H2 −3px (tutte e tre le slide) */
@media (orientation: landscape) and (min-width: 737px) and (max-width: 743px) and (min-height: 357px) and (max-height: 363px) {
    #hero.hero--slideshow .hero-title {
        font-size: calc(clamp(36px, calc(5.2vmin + 16px), 50px) + 5px);
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: calc(clamp(26px, calc(2.6vmin + 16px), 33px) - 3px);
    }
}

/* iPad Pro 12,9" portrait (1024×1366): slide colours — H1/H2 +12px */
@media (orientation: portrait) and (min-width: 1015px) and (max-width: 1035px) and (min-height: 1355px) and (max-height: 1375px) {

    #hero.hero--slideshow.hero--ipad-pro[data-active-slide="2"] .hero-title,
    #hero.hero--slideshow[data-active-slide="2"] .hero-title {
        font-size: calc(clamp(56px, calc(7.5vw + 16px), 72px) + 12px);
    }

    #hero.hero--slideshow.hero--ipad-pro[data-active-slide="2"] .hero-subtitle,
    #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
        font-size: calc(clamp(36px, calc(3.75vw + 16px), 44px) + 12px);
    }
}

/* Nest Hub landscape (1024×600): H1 +8px (tutte e tre le slide) */
@media (width: 1024px) and (height: 600px) and (orientation: landscape) {

    #hero.hero--slideshow.hero--nest-hub .hero-title,
    #hero.hero--slideshow .hero-title {
        font-size: calc(clamp(32px, calc(5.2vmin + 12px), 44px) + 8px);
    }
}

/* Apple iPhone 17e landscape (844×390): H1 +8px, H2 −8px (tutte e tre le slide) */
@media (orientation: landscape) and (min-width: 841px) and (max-width: 847px) and (min-height: 387px) and (max-height: 393px) {

    #hero.hero--slideshow.hero--iphone .hero-title,
    #hero.hero--slideshow .hero-title {
        font-size: calc(clamp(36px, calc(5.2vmin + 16px), 50px) + 8px);
    }

    #hero.hero--slideshow.hero--iphone .hero-subtitle,
    #hero.hero--slideshow .hero-subtitle {
        font-size: calc(clamp(26px, calc(2.6vmin + 16px), 33px) - 8px);
    }
}

/* Google Pixel Tablet portrait (800×1280): slide colours — H1/H2 +10px */
@media (width: 800px) and (orientation: portrait) and (min-height: 1190px) and (max-height: 1290px) {

    #hero.hero--slideshow.hero--pixel-tablet[data-active-slide="2"] .hero-title,
    #hero.hero--slideshow[data-active-slide="2"] .hero-title {
        font-size: calc(clamp(56px, calc(7.5vw + 16px), 72px) + 10px);
    }

    #hero.hero--slideshow.hero--pixel-tablet[data-active-slide="2"] .hero-subtitle,
    #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
        font-size: calc(clamp(36px, calc(3.75vw + 16px), 44px) + 10px);
    }
}

/* Huawei P40 landscape (780×360): H1 +8px, H2 −4px (tutte e tre le slide) */
@media (orientation: landscape) and (min-width: 777px) and (max-width: 783px) and (min-height: 357px) and (max-height: 363px) {
    #hero.hero--slideshow .hero-title {
        font-size: calc(clamp(36px, calc(5.2vmin + 16px), 50px) + 8px);
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: calc(clamp(26px, calc(2.6vmin + 16px), 33px) - 4px);
    }
}

/* Huawei P60 Pro landscape (796×360): H1 +8px, H2 −4px (tutte e tre le slide) */
@media (orientation: landscape) and (min-width: 793px) and (max-width: 799px) and (min-height: 357px) and (max-height: 363px) {
    #hero.hero--slideshow .hero-title {
        font-size: calc(clamp(36px, calc(5.2vmin + 16px), 50px) + 8px);
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: calc(clamp(26px, calc(2.6vmin + 16px), 33px) - 4px);
    }
}

/* Huawei Pura 90 Pro landscape (790×360): H1 +8px, H2 −4px (tutte e tre le slide) */
@media (orientation: landscape) and (min-width: 787px) and (max-width: 793px) and (min-height: 357px) and (max-height: 363px) {
    #hero.hero--slideshow .hero-title {
        font-size: calc(clamp(36px, calc(5.2vmin + 16px), 50px) + 8px);
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: calc(clamp(26px, calc(2.6vmin + 16px), 33px) - 4px);
    }
}

/* Lenovo Tab M10 landscape (960×600): H1 +8px, H2 −4px (tutte e tre le slide) */
@media (width: 960px) and (height: 600px) and (orientation: landscape) {
    #hero.hero--slideshow .hero-title {
        font-size: calc(clamp(32px, calc(5.2vmin + 12px), 44px) + 8px);
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: calc(clamp(22px, calc(2.6vmin + 12px), 28px) - 4px);
    }
}

/* OnePlus Pad landscape (933×667): H1 +8px, H2 −4px (tutte e tre le slide) */
@media (min-width: 931px) and (max-width: 935px) and (min-height: 665px) and (max-height: 669px) and (orientation: landscape) {
    #hero.hero--slideshow .hero-title {
        font-size: calc(clamp(32px, calc(5.2vmin + 12px), 44px) + 8px);
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: calc(clamp(22px, calc(2.6vmin + 12px), 28px) - 4px);
    }
}

/* Oppo Find X6 landscape (805×360): H1 +8px, H2 −4px (tutte e tre le slide) */
@media (orientation: landscape) and (min-width: 802px) and (max-width: 808px) and (min-height: 357px) and (max-height: 363px) {
    #hero.hero--slideshow .hero-title {
        font-size: calc(clamp(36px, calc(5.2vmin + 16px), 50px) + 8px);
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: calc(clamp(26px, calc(2.6vmin + 16px), 33px) - 4px);
    }
}

/* Samsung Galaxy Tab A7 landscape (1000×600): H1 +10px, H2 −3px (tutte e tre le slide) */
@media (min-width: 990px) and (max-width: 1010px) and (min-height: 590px) and (max-height: 610px) and (orientation: landscape) {
    #hero.hero--slideshow .hero-title {
        font-size: calc(clamp(32px, calc(5.2vmin + 12px), 44px) + 10px);
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: calc(clamp(22px, calc(2.6vmin + 12px), 28px) - 3px);
    }
}

/* Samsung Galaxy Tab A7 portrait (600×1000): slide colours — H1 +8px, H2 +5px */
@media (width: 600px) and (orientation: portrait) and (min-height: 995px) and (max-height: 1005px) {
    #hero.hero--slideshow[data-active-slide="2"] .hero-title {
        font-size: calc(clamp(46px, calc(9.5vw + 16px), 58px) + 8px);
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
        font-size: calc(clamp(31px, calc(4.8vw + 16px), 37px) + 5px);
    }
}

/* Samsung Galaxy Tab A9 landscape (1116×670): slide colours — H1/H2 −5px */
@media (min-width: 1113px) and (max-width: 1119px) and (min-height: 667px) and (max-height: 673px) and (orientation: landscape) {
    #hero.hero--slideshow[data-active-slide="2"] .hero-title {
        font-size: calc(65pt - 15px);
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
        font-size: calc(32.5pt - 15px);
    }
}

/* Samsung Galaxy Tab A9 portrait (670×1116): slide colours — H1 +18px, H2 +12px */
@media (min-width: 667px) and (max-width: 673px) and (min-height: 1113px) and (max-height: 1119px) and (orientation: portrait) {
    #hero.hero--slideshow[data-active-slide="2"] .hero-title {
        font-size: calc(clamp(46px, calc(9.5vw + 16px), 58px) + 18px);
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
        font-size: calc(clamp(31px, calc(4.8vw + 16px), 37px) + 12px);
    }
}

/* Samsung Galaxy Tab S10 FE portrait (720×1152): slide colours — H1 +18px, H2 +10px */
@media (min-width: 717px) and (max-width: 723px) and (min-height: 1149px) and (max-height: 1155px) and (orientation: portrait) {
    #hero.hero--slideshow[data-active-slide="2"] .hero-title {
        font-size: calc(clamp(46px, calc(9.5vw + 16px), 58px) + 18px);
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
        font-size: calc(clamp(31px, calc(4.8vw + 16px), 37px) + 10px);
    }
}

/* Samsung Galaxy Tab S10 FE landscape (1152×720): slide colours — H1/H2 −8px */
@media (min-width: 1149px) and (max-width: 1155px) and (min-height: 717px) and (max-height: 723px) and (orientation: landscape) {
    #hero.hero--slideshow[data-active-slide="2"] .hero-title {
        font-size: calc(65pt - 8px);
    }

    #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
        font-size: calc(32.5pt - 8px);
    }
}

/* Sony Xperia 1 II landscape (840×360): H1/H2 +10px (tutte e tre le slide) */
@media (orientation: landscape) and (min-width: 837px) and (max-width: 843px) and (min-height: 357px) and (max-height: 363px) {
    #hero.hero--slideshow .hero-title {
        font-size: calc(clamp(36px, calc(5.2vmin + 16px), 50px) + 10px);
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: calc(clamp(26px, calc(2.6vmin + 16px), 33px) + 10px);
    }
}

/* Xiaomi 13 landscape (800×360): H1 +10px, H2 base (tutte e tre le slide) */
@media (orientation: landscape) and (min-width: 797px) and (max-width: 803px) and (min-height: 357px) and (max-height: 363px) {
    #hero.hero--slideshow .hero-title {
        font-size: calc(clamp(36px, calc(5.2vmin + 16px), 50px) + 10px);
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: clamp(26px, calc(2.6vmin + 16px), 33px);
    }
}

/* Xiaomi 17 landscape (784×360): H1 +10px, H2 −3px (tutte e tre le slide) */
@media (orientation: landscape) and (min-width: 781px) and (max-width: 787px) and (min-height: 357px) and (max-height: 363px) {
    #hero.hero--slideshow .hero-title {
        font-size: calc(clamp(36px, calc(5.2vmin + 16px), 50px) + 10px);
    }

    #hero.hero--slideshow .hero-subtitle {
        font-size: calc(clamp(26px, calc(2.6vmin + 16px), 33px) - 3px);
    }
}

/* Xiaomi 17 portrait (360×784): slide colours — H2 −4px */
@media (orientation: portrait) and (min-width: 357px) and (max-width: 363px) and (min-height: 781px) and (max-height: 787px) {
    #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
        font-size: calc(clamp(31px, calc(4.8vw + 16px), 37px) - 4px);
    }
}

/* Xiaomi Pad 5 portrait (800×1280): slide colours — H1 +8px */
@media (width: 800px) and (height: 1280px) and (orientation: portrait) {
    #hero.hero--slideshow[data-active-slide="2"] .hero-title {
        font-size: calc(clamp(56px, calc(7.5vw + 16px), 72px) + 8px);
    }
}

/* ===== FONDAMENTA — famiglie viewport + browser legacy (non sostituisce i fix device già testati) ===== */

/* Tablet landscape (769–1024px): portfolio 3 colonne */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    #portfolio .portfolio-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Altezza hero: fallback se 100dvh non è supportato (iPad/Safari vecchi) */
@supports not (height: 100dvh) {
    @media (min-width: 769px) {
        #hero {
            height: 100vh;
            min-height: 100vh;
        }
    }

    @media (max-width: 768px) and (orientation: portrait) {
        #hero {
            height: 100vh;
            min-height: 100vh;
        }
    }

    @media (orientation: landscape) and (max-width: 932px) and (max-height: 520px) {
        #hero {
            height: 100vh;
            min-height: 100vh;
        }
    }
}

/* Hero slideshow: tipografia e visibilità senza clamp() (Safari iOS < 13.4) */
@supports not (font-size: clamp(1rem, 1vw, 2rem)) {
    @media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px) {
        #hero.hero--slideshow .hero-title {
            font-size: 2.25rem;
        }

        #hero.hero--slideshow .hero-subtitle {
            font-size: 1.625rem;
        }
    }

    @media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) and (min-height: 521px) {
        #hero.hero--slideshow .hero-title {
            font-size: 3.25rem;
        }

        #hero.hero--slideshow .hero-subtitle {
            font-size: 1.75rem;
        }
    }

    @media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
        #hero.hero--slideshow[data-active-slide="2"] .hero-title {
            font-size: 3.5rem;
        }

        #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
            font-size: 2.25rem;
        }
    }

    @media (max-width: 767px) and (orientation: portrait) {
        #hero.hero--slideshow[data-active-slide="2"] .hero-title {
            font-size: 3rem;
        }

        #hero.hero--slideshow[data-active-slide="2"] .hero-subtitle {
            font-size: 2rem;
        }
    }

    @media (min-width: 1024px) {
        #hero.hero--slideshow .hero-title {
            font-size: 52px;
        }

        #hero.hero--slideshow .hero-subtitle {
            font-size: 26px;
        }
    }

    /* Testi visibili anche se le animazioni non partono */
    #hero.hero--slideshow.hero-heading--in .hero-title,
    #hero.hero--slideshow.hero-heading--in .hero-subtitle {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Portfolio e card: rapporto 4:3 senza aspect-ratio (browser legacy) */
@supports not (aspect-ratio: 4 / 3) {

    #portfolio .portfolio-item-img,
    .mostre-card-img {
        position: relative;
        height: 0;
        padding-bottom: 75%;
        overflow: hidden;
    }

    #portfolio .portfolio-item-image,
    .mostre-card-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mostre-card-jazz-foto {
        width: 100%;
        max-width: 180px;
        height: 135px;
        object-fit: cover;
    }
}