/* ========================================
   RESET
======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;

    background-color: #f8e12f;
    color: #111111;

    font-family: Arial, Helvetica, sans-serif;
}

body.popup-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

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


/* ========================================
   HEADER
======================================== */

.header {
    width: 100%;
    padding: 34px 4.5%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    background-color: #f8e12f;
}

.logo {
    flex-shrink: 0;
}

.logo img {
    width: 113px;
    height: auto;
}

.menu {
    display: flex;
    align-items: center;
    gap: 34px;
}

.menu > a {
    padding-bottom: 4px;

    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;

    transition: opacity 0.2s ease;
}

.menu > a:hover {
    opacity: 0.45;
}

.menu > a.active {
    border-bottom: 1px solid #111111;
    font-weight: 700;
}


/* ========================================
   ICONE SOCIAL
======================================== */

.social-icons {
    display: flex;
    align-items: center;
    gap: 24px;
}

.social-icon,
.contact-social-icon {
    width: 24px;
    height: 24px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 0;
    outline: none;

    background: transparent;
    color: #111111;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    transition: opacity 0.2s ease;
}

.social-icon:hover,
.contact-social-icon:hover {
    opacity: 0.45;
}

.social-icon:focus-visible,
.contact-social-icon:focus-visible {
    outline: 1px solid #111111;
    outline-offset: 5px;
}

.social-icon img,
.contact-social-icon img {
    width: 22px;
    height: 22px;

    object-fit: contain;
}

.social-icon .material-symbols-outlined,
.contact-social-icon .material-symbols-outlined {
    display: block;

    font-size: 24px;
    font-weight: 400;
    line-height: 1;
}


/* ================================================================
   CONTENUTO NASCOSTO: ICONE/LINK EMAIL
   Questi elementi sono i pulsanti con l'icona della mail presenti
   nell'header e nelle sezioni contatti. Restano conservati nell'HTML
   con l'attributo data-mail-popup per poterli ripristinare in futuro.
   Per mostrarli di nuovo, rimuovere o commentare la regola seguente.
================================================================ */

[data-mail-popup] {
    display: none !important;
}


/* ========================================
   CONTENITORE CENTRALE
======================================== */

.site-card {
    margin: 0 18px 18px;

    overflow: hidden;

    border-radius: 30px;

    background-color: #ffffff;
}


/* ========================================
   INTRO HOMEPAGE
======================================== */

.intro {
    max-width: 1050px;
    margin: 0 auto;
    padding: 90px 30px 130px;

    text-align: center;
}

.intro h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(40px, 4.8vw, 70px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: normal;
}

.hero-title {
    opacity: 0;
}

.hero-title.is-ready {
    opacity: 1;
}

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

.hero-title-line--sans {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    letter-spacing: -0.055em;
}

.hero-mobile-break {
    display: none;
}

.intro h2 {
    max-width: 720px;
    margin: 36px auto 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.01em;
    text-align: justify;
}


/* ========================================
   PORTFOLIO HOMEPAGE
======================================== */

.portfolio {
    width: 100%;
    padding: 0 4.5% 140px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 70px;
    row-gap: 90px;
}

.project-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1.35 / 1;

    overflow: hidden;

    border-radius: 30px;

    background-color: #eeeeee;
}

.project-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.6s ease,
        opacity 0.4s ease;
}

.project-info {
    margin-top: 18px;

    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
}

.project-info h2 {
    font-size: 20px;
    font-weight: 700;
}

.project-info p {
    color: #777777;

    font-size: 18px;
}


/* ========================================
   ANIMAZIONI HOMEPAGE
======================================== */

@media (prefers-reduced-motion: no-preference) {
    .home-page .header .logo,
    .home-page .menu > *,
    .home-page .intro > :not(.hero-title) {
        opacity: 0;
        animation: homepage-text-in 0.7s ease-out forwards;
    }

    .home-page .header .logo {
        animation-delay: 0.08s;
    }

    .home-page .menu > a:nth-child(1) { animation-delay: 0.14s; }
    .home-page .menu > a:nth-child(2) { animation-delay: 0.20s; }
    .home-page .menu > a:nth-child(3) { animation-delay: 0.26s; }
    .home-page .menu .social-icons { animation-delay: 0.32s; }

    .home-page .intro .availability-status { animation-delay: 0.32s; }
    .home-page .intro h2 { animation-delay: 0.56s; }

    .home-page .hero-letter {
        display: inline-block;
        opacity: 0;
        filter: blur(10px);
        transform: translate3d(0, 0.36em, 0);
        animation: hero-letter-in 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        animation-delay: calc(0.36s + (var(--letter-index) * 0.035s));
    }

    .home-page .hero-letter--space {
        width: 0.28em;
    }

    .home-page .project {
        opacity: 0;
        animation: homepage-project-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .home-page .project:nth-child(1) { animation-delay: 0.68s; }
    .home-page .project:nth-child(2) { animation-delay: 0.80s; }
    .home-page .project:nth-child(3) { animation-delay: 0.92s; }
    .home-page .project:nth-child(4) { animation-delay: 1.04s; }
    .home-page .project:nth-child(5) { animation-delay: 1.16s; }
    .home-page .project:nth-child(6) { animation-delay: 1.28s; }
    .home-page .project:nth-child(7) { animation-delay: 1.40s; }
}

/* Hover 3D daisyUI: otto zone invisibili determinano l'inclinazione. */
.project-hover-3d {
    display: grid;
    width: 100%;
    perspective: 75rem;
    --transform: 0, 0;
    --shine: 100% 100%;
    --shadow: 0rem 0rem 0rem;
    --ease: linear(0, 0.931 13.8%, 1.196 21.4%, 1.343 29.8%, 1.378 36%, 1.365 43.2%, 1.059 78%, 1);
    filter: drop-shadow(var(--shadow) 0.1rem #00000003) drop-shadow(var(--shadow) 0.2rem #00000003) drop-shadow(var(--shadow) 0.3rem #00000003);
    transition: filter ease-out 400ms;
}

.project-hover-3d > :first-child {
    position: relative;
    grid-area: 1 / 1 / 4 / 4;
    overflow: hidden;
    transform: rotate3d(var(--transform), 0, 10deg);
    transition: transform var(--ease) 500ms, scale var(--ease) 500ms;
    outline: 0.5px solid transparent;
    outline-offset: -1px;
}

.project-hover-3d > :first-child::before {
    position: absolute;
    z-index: 1;
    width: 33.333%;
    height: 33.333%;
    content: "";
    pointer-events: none;
    scale: 500%;
    opacity: 0;
    filter: blur(0.75rem);
    background-image: radial-gradient(circle at 50%, rgba(255, 255, 255, 0.45) 10%, transparent 50%);
    translate: var(--shine);
    transition: translate ease-out 400ms, opacity ease-out 400ms;
}

.project-hover-3d > :nth-child(n + 2) {
    z-index: 1;
    isolation: isolate;
    scale: 1.2;
}

.project-hover-3d > :nth-child(2) { grid-area: 1 / 1 / 2 / 2; }
.project-hover-3d > :nth-child(3) { grid-area: 1 / 2 / 2 / 3; }
.project-hover-3d > :nth-child(4) { grid-area: 1 / 3 / 2 / 4; }
.project-hover-3d > :nth-child(5) { grid-area: 2 / 1 / 3 / 2; }
.project-hover-3d > :nth-child(6) { grid-area: 2 / 3 / 3 / 4; }
.project-hover-3d > :nth-child(7) { grid-area: 3 / 1 / 4 / 2; }
.project-hover-3d > :nth-child(8) { grid-area: 3 / 2 / 4 / 3; }
.project-hover-3d > :nth-child(9) { grid-area: 3 / 3 / 4 / 4; }

.project-hover-3d:hover {
    --ease: linear(0, 0.708 15.2%, 0.927 23.6%, 1.067 33%, 1.12 41%, 1.13 50.2%, 1.019 83.2%, 1);
}

.project-hover-3d:hover > :first-child {
    scale: 0.98;
    outline-color: #fff1;
}

.project-hover-3d:hover > :first-child::before {
    opacity: 1;
}

.project-hover-3d:has(> :nth-child(2):hover) { --transform: 1, -1; --shine: 0% 0%; --shadow: 0.5rem 0.5rem; }
.project-hover-3d:has(> :nth-child(3):hover) { --transform: 1, 0; --shine: 100% 0%; --shadow: 0rem 0.5rem; }
.project-hover-3d:has(> :nth-child(4):hover) { --transform: 1, 1; --shine: 200% 0%; --shadow: -0.5rem 0.5rem; }
.project-hover-3d:has(> :nth-child(5):hover) { --transform: 0, -1; --shine: 0% 100%; --shadow: 0.5rem 0rem; }
.project-hover-3d:has(> :nth-child(6):hover) { --transform: 0, 1; --shine: 200% 100%; --shadow: -0.5rem 0rem; }
.project-hover-3d:has(> :nth-child(7):hover) { --transform: -1, -1; --shine: 0% 200%; --shadow: 0.5rem -0.5rem; }
.project-hover-3d:has(> :nth-child(8):hover) { --transform: -1, 0; --shine: 100% 200%; --shadow: 0rem -0.5rem; }
.project-hover-3d:has(> :nth-child(9):hover) { --transform: -1, 1; --shine: 200% 200%; --shadow: -0.5rem -0.5rem; }

@keyframes homepage-text-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes hero-letter-in {
    from {
        opacity: 0;
        filter: blur(10px);
        transform: translate3d(0, 0.36em, 0);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes homepage-project-in {
    from {
        opacity: 0;
        transform: translateY(48px);
    }

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


/* ========================================
   PAGINA ABOUT
======================================== */

.about-card {
    padding-top: 1px;
}

.about-hero {
    width: 100%;
    padding: 90px 4.5% 120px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.85fr);

    align-items: start;
    gap: clamp(50px, 8vw, 130px);
}

.about-photo {
    width: 100%;
    overflow: hidden;

    background-color: #eeeeee;
}

.about-photo img {
    width: 100%;
    aspect-ratio: 4 / 5;

    object-fit: cover;
}

.about-text {
    padding-top: 5px;
}

.about-text h1 {
    margin-bottom: 35px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 4.7vw, 62px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: normal;
}

.about-text p {
    max-width: 580px;
    margin-bottom: 20px;

    font-size: 16px;
    line-height: 1.55;
}

.about-details {
    padding: 0 4.5% 130px;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 70px;
}

.about-detail h2 {
    margin-bottom: 24px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: normal;
}

.about-detail p {
    max-width: 360px;

    font-size: 14px;
    line-height: 1.55;
}


/* ========================================
   SEZIONE CONTATTI
======================================== */

.contact-section {
    padding: 110px 4.5% 140px;

    display: grid;
    grid-template-columns:
        minmax(260px, 0.75fr)
        minmax(400px, 1fr);

    align-items: start;
    gap: clamp(70px, 10vw, 150px);

    border-top: 1px solid #dddddd;

    background-color: #ffffff;
}

.contact-intro h2 {
    margin-bottom: 30px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 4vw, 64px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: normal;
}

.contact-intro p {
    max-width: 430px;
    margin-bottom: 20px;

    font-size: 16px;
    line-height: 1.55;
}

.contact-socials {
    margin-top: 38px;

    display: flex;
    align-items: center;
    gap: 18px;
}


/* ========================================
   PAGINA CONTATTI
======================================== */

.contact-page-card {
    padding-top: 1px;
}

.contact-page {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 100px 45px 140px;

    display: grid;
    grid-template-columns:
        minmax(280px, 0.82fr)
        minmax(420px, 1fr);

    align-items: start;
    gap: clamp(60px, 8vw, 110px);
}

.contact-page-intro {
    position: sticky;
    top: 40px;

    min-width: 0;
}

.contact-page-intro h1 {
    max-width: 560px;
    margin-bottom: 36px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 5vw, 72px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: normal;
}

.contact-page-intro > p {
    max-width: 440px;
    margin-bottom: 20px;

    font-size: 16px;
    line-height: 1.55;
}

.contact-page-form {
    width: 100%;
    max-width: 580px;
    min-width: 0;

    justify-self: end;
}


/* ========================================
   MODULO
======================================== */

.contact-form {
    width: 100%;
    min-width: 0;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.form-field {
    min-width: 0;
    margin: 0 0 26px;
    padding: 0;

    border: none;
}

.form-field label,
.form-field legend {
    display: block;
    margin-bottom: 9px;

    font-size: 14px;
    font-weight: 400;
}

.field-description {
    max-width: 620px;
    margin: 0 0 12px;

    color: #666666;

    font-size: 13px;
    line-height: 1.45;
}

.form-field input,
.form-field textarea,
.form-field select {
    display: block;

    width: 100%;
    max-width: 100%;
    padding: 13px 14px;

    border: 1px solid #777777;
    border-radius: 0;

    background-color: #ffffff;
    color: #111111;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;

    border-color: #111111;
    background-color: #fafafa;
}

.form-field textarea {
    min-height: 150px;

    resize: vertical;
}

.form-field select {
    padding-right: 44px;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    background-image:
        linear-gradient(45deg, transparent 50%, #111111 50%),
        linear-gradient(135deg, #111111 50%, transparent 50%);

    background-position:
        calc(100% - 19px) 50%,
        calc(100% - 14px) 50%;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;
}


/* CHECKBOX */

.form-services {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.form-services legend {
    margin-bottom: 15px;
}

.checkbox-label {
    margin-bottom: 11px !important;

    display: flex !important;
    align-items: center;
    gap: 10px;

    cursor: pointer;
}

.checkbox-label input {
    flex: 0 0 auto;

    width: 15px;
    height: 15px;
    margin: 0;
    padding: 0;

    accent-color: #111111;

    appearance: auto;
    -webkit-appearance: checkbox;
}


/* BOTTONE INVIO */

.submit-button {
    padding: 14px 22px;

    border: 1px solid #111111;
    border-radius: 0;

    background-color: #111111;
    color: #ffffff;

    font-size: 14px;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.submit-button:hover {
    background-color: #f8e12f;
    color: #111111;
}

.submit-button:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 4px;
}


/* ========================================
   PAGINA DETTAGLIO PROGETTO
======================================== */

.project-page-card {
    padding-top: 1px;
}


/* INTRO PROGETTO */

.project-hero {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 100px 45px 75px;

    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(280px, 0.8fr);

    align-items: end;
    gap: clamp(55px, 9vw, 130px);
}

.project-eyebrow {
    margin-bottom: 22px;

    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.project-hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(72px, 10vw, 150px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: normal;
}

.project-hero-intro p {
    max-width: 460px;

    font-size: 18px;
    line-height: 1.55;
}


/* COPERTINA */

.project-cover {
    width: min(calc(100% - 9%), 1280px);
    margin: 0 auto;

    overflow: hidden;

    background-color: #eeeeee;
}

.project-cover img {
    width: 100%;
    height: auto;

    object-fit: cover;
}


/* PAGINA CORSA DEL DRAPPO */

.drappo-hero {
    width: min(calc(100% - 90px), 1180px);
    min-height: calc(100vh - 150px);
    margin: 0 auto;
    padding: 48px 0 64px;

    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.8fr);
    align-items: center;
    gap: clamp(48px, 8vw, 120px);
}

.drappo-hero-copy .project-eyebrow {
    margin-bottom: 22px;
}

.drappo-hero-copy h1 {
    margin-bottom: 42px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(68px, 8vw, 128px);
    font-weight: 400;
    line-height: 0.95;
}

.drappo-hero-image {
    height: min(68vh, 720px);
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.drappo-hero-image img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* DESCRIZIONE E DATI */

.project-overview {
    width: min(100%, 1100px);
    margin: 0 auto;
    padding: 110px 45px 130px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(210px, 0.35fr);

    align-items: start;
    gap: clamp(70px, 10vw, 140px);
}

.project-description h2 {
    margin-bottom: 32px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(40px, 4vw, 62px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: normal;
}

.project-description p {
    max-width: 680px;
    margin-bottom: 22px;

    font-size: 17px;
    line-height: 1.65;
}

.project-data {
    display: grid;
    gap: 28px;
}

.project-data-item {
    padding-bottom: 22px;

    border-bottom: 1px solid #dddddd;
}

.project-data-item h3 {
    margin-bottom: 8px;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project-data-item p {
    font-size: 14px;
    line-height: 1.55;
}


/* ========================================
   GALLERIA PROGETTO
======================================== */

.project-gallery-simple {
    width: min(calc(100% - 9%), 1180px);
    margin: 0 auto;
    padding-bottom: 130px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.project-gallery-button {
    width: 100%;
    aspect-ratio: 297 / 210;
    padding: 0;

    overflow: hidden;

    border: none;
    border-radius: 0;

    background-color: #eeeeee;

    cursor: zoom-in;

    appearance: none;
    -webkit-appearance: none;
}

.project-gallery-button:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 5px;
}

.project-gallery-button img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.6s ease,
        opacity 0.25s ease;
}

.project-gallery-button:hover img {
    transform: scale(1.02);
    opacity: 0.92;
}


/* ========================================
   ANGOLI IMMAGINI PAGINE INTERNE
======================================== */

body:not(.home-page):not(.album-page) main img,
body:not(.home-page):not(.album-page) .image-lightbox-content img {
    border-radius: 25px;
}

body:not(.home-page):not(.album-page) .about-photo,
body:not(.home-page):not(.album-page) .project-cover,
body:not(.home-page):not(.album-page) .project-gallery-button {
    border-radius: 25px;
}

body:not(.home-page):not(.album-page) main .contact-social-icon img {
    border-radius: 0;
}

.porto-waves-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.porto-waves-gallery .project-gallery-button {
    aspect-ratio: 4 / 5;
}

.porto-waves-gallery .project-gallery-button img {
    object-fit: contain;
}


/* ========================================
   CAROSELLO VIDEO SAZIO
======================================== */

.sazio-video-carousel {
    width: 100%;
    min-width: 0;
}

.sazio-carousel-viewport {
    position: relative;
    overflow: hidden;
    border-radius: 25px;
    background-color: #eeeeee;
}

.sazio-carousel-loader {
    position: absolute;
    z-index: 3;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;

    border-radius: 25px;
    background-color: rgba(245, 245, 245, 0.88);
    opacity: 1;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

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

.sazio-carousel-loader img {
    width: 86px;
    height: 86px;
    object-fit: contain;
    animation: sazio-loader-blink 1.1s ease-in-out infinite;
}

.sazio-carousel-loader-bar {
    position: relative;
    width: min(42%, 220px);
    height: 4px;
    overflow: hidden;
    background-color: #3b3b3b;
}

.sazio-carousel-loader-bar::after {
    position: absolute;
    inset: 0;
    content: "";
    background-color: #f8e12f;
    transform: translateX(-100%);
    animation: sazio-loader-progress 1.6s ease-in-out infinite;
}

.sazio-carousel-track {
    display: flex;
    transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.sazio-carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
}

.sazio-carousel-slide video {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background-color: #eeeeee;
}

.sazio-carousel-controls {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sazio-carousel-dots {
    display: flex;
    align-items: center;
    gap: 9px;
}

.sazio-carousel-dots button {
    position: relative;
    overflow: hidden;
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #d2d2d2;
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.2s ease;
}

.sazio-carousel-dots button.is-active {
    width: 68px;
    border-radius: 999px;
    background-color: #dedede;
}

.sazio-carousel-dots button.is-active::after {
    position: absolute;
    inset: 0;
    content: "";
    transform: scaleX(0);
    transform-origin: left center;
    background-color: #111111;
    animation: sazio-video-progress var(--progress-duration, 6s) linear forwards;
}

.sazio-carousel-dots button:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 4px;
}

.sazio-tap-zone {
    display: none;
}

.sazio-page .project-hero {
    grid-template-columns: minmax(0, 0.75fr) minmax(340px, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    padding-bottom: 110px;
}

.sazio-page .project-hero h1 {
    font-size: clamp(68px, 9vw, 132px);
}

.sazio-page .project-hero > :first-child {
    grid-column: 1;
    grid-row: 1;
}

.sazio-page .project-hero-intro {
    grid-column: 1;
    grid-row: 2;
    margin-top: 26px;
}

.sazio-page .project-hero-intro p {
    font-size: 18px;
}

.sazio-page .project-hero .sazio-video-carousel {
    grid-column: 2;
    grid-row: 1 / span 2;
}

@keyframes sazio-video-progress {
    to {
        transform: scaleX(1);
    }
}

@keyframes sazio-loader-blink {
    0%,
    100% {
        opacity: 0.35;
    }

    50% {
        opacity: 1;
    }
}

@keyframes sazio-loader-progress {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}


/* ========================================
   LIGHTBOX IMMAGINI
======================================== */

.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;

    padding: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    background-color: rgba(0, 0, 0, 0.88);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.image-lightbox.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.image-lightbox-content {
    width: auto;
    max-width: min(1400px, 92vw);
    max-height: 88vh;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: scale(0.98);

    transition: transform 0.25s ease;
}

.image-lightbox.show .image-lightbox-content {
    transform: scale(1);
}

.image-lightbox-content img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 88vh;

    object-fit: contain;
}

.image-lightbox-close {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 2;

    width: 46px;
    height: 46px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;

    background-color: transparent;
    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 38px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    transition: opacity 0.2s ease;
}

.image-lightbox-close:hover {
    opacity: 0.55;
}

.image-lightbox-close:focus-visible {
    outline: 1px solid #ffffff;
    outline-offset: 4px;
}

.image-lightbox-nav {
    position: fixed;
    top: 50%;
    z-index: 2;

    width: 54px;
    height: 76px;
    padding: 0;

    border: none;

    background-color: transparent;
    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 64px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 0.2s ease;
}

.image-lightbox-nav:hover {
    opacity: 0.55;
}

.image-lightbox-nav:focus-visible {
    outline: 1px solid #ffffff;
    outline-offset: 4px;
}

.image-lightbox-previous {
    left: 24px;
}

.image-lightbox-next {
    right: 24px;
}


/* NAVIGAZIONE PROGETTI */

.project-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid #dddddd;
}

.project-back-link,
.project-next-link {
    min-height: 210px;
    padding: 42px 4.5%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transition: background-color 0.25s ease;
}

.project-back-link {
    border-right: 1px solid #dddddd;
}

.project-back-link:hover,
.project-next-link:hover {
    background-color: #f8e12f;
}

.project-next-link {
    text-align: right;
}

.project-nav-label {
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project-nav-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(32px, 3.6vw, 54px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: normal;
}


/* ========================================
   PAGINA MESSAGGIO INVIATO
======================================== */

.success-card {
    min-height: calc(100vh - 158px);
    margin: 0 18px 18px;
    padding: 80px 4.5%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 30px;

    background-color: #ffffff;
}

.success-content {
    width: min(100%, 900px);
    margin: 0 auto;

    text-align: center;
}

.success-label {
    margin-bottom: 24px;

    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.success-content h1 {
    margin-bottom: 34px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(56px, 7vw, 105px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: normal;
}

.success-content > p {
    max-width: 630px;
    margin: 0 auto 18px;

    font-size: 16px;
    line-height: 1.6;
}

.success-actions {
    margin-top: 42px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.success-actions .primary-link,
.success-actions .secondary-link {
    display: inline-block;
    padding: 13px 21px;

    border: 1px solid #111111;

    font-size: 14px;
    line-height: 1;
}

.success-actions .primary-link {
    background-color: #111111;
    color: #ffffff;
}

.success-actions .primary-link:hover {
    background-color: #f8e12f;
    color: #111111;
}

.success-actions .secondary-link:hover {
    opacity: 0.45;
}


/* ========================================
   STATO DISPONIBILITÀ
======================================== */

.availability-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    color: #111111;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
}

/* PALLINO VERDE */
.availability-dot {
    position: relative;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background-color: #32a852;
}

/* ALONE PULSANTE */
.availability-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: #32a852;
    animation: availability-pulse 2.2s ease-out infinite;
}

/* ANIMAZIONE */
@keyframes availability-pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    65% {
        transform: scale(2.4);
        opacity: 0;
    }

    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

/* HOMEPAGE */
.availability-home {
    margin: 0 auto 28px;
}

/* FOOTER */
.availability-footer {
    flex-shrink: 0;
    font-size: 13px;
}


/* ========================================
   FOOTER
======================================== */

.footer {
    padding: 35px 4.5%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    border-top: 1px solid #dddddd;

    background-color: #ffffff;

    font-size: 13px;
}

.footer a:hover {
    text-decoration: underline;
}


/* ========================================
   POPUP EMAIL
======================================== */

.popup {
    position: fixed;
    inset: 0;
    z-index: 999;

    padding: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    background-color: rgba(0, 0, 0, 0.35);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.popup.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.popup-content {
    position: relative;

    width: 100%;
    max-width: 420px;
    padding: 50px 40px 40px;

    border-radius: 22px;

    background-color: #ffffff;

    text-align: center;

    transform: translateY(10px);

    transition: transform 0.25s ease;
}

.popup.show .popup-content {
    transform: translateY(0);
}

.popup-content h2 {
    margin-bottom: 16px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: normal;
}

.popup-content p {
    margin-bottom: 28px;

    font-size: 17px;
}

#copyEmail {
    padding: 12px 22px;

    border: 1px solid #111111;

    background-color: #111111;
    color: #ffffff;

    font-size: 14px;

    cursor: pointer;
}

#copyEmail:hover {
    background-color: #f8e12f;
    color: #111111;
}

.close {
    position: absolute;
    top: 12px;
    right: 14px;

    width: 32px;
    height: 32px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;

    background: transparent;
    color: #111111;

    font-size: 28px;
    line-height: 1;

    cursor: pointer;
}

.close:hover {
    opacity: 0.45;
}


/* ========================================
   TABLET
======================================== */

@media screen and (max-width: 900px) {

    .header {
        padding: 28px 24px;
        gap: 30px;
    }

    .logo img {
        width: 88px;
    }

    .menu {
        gap: 20px;
    }

    .social-icons {
        gap: 18px;
    }

    .site-card {
        margin: 0 12px 12px;

        border-radius: 24px;
    }

    .intro {
        padding-top: 70px;
        padding-bottom: 100px;
    }

    .portfolio {
        padding-right: 24px;
        padding-left: 24px;

        column-gap: 30px;
        row-gap: 65px;
    }

    .about-hero {
        padding: 70px 24px 100px;

        grid-template-columns: 1fr 1fr;
        gap: 45px;
    }

    .about-text h1 {
        font-size: 48px;
    }

    .about-details {
        padding: 0 24px 100px;

        gap: 35px;
    }

    .contact-section {
        padding: 90px 24px 110px;

        grid-template-columns:
            minmax(230px, 0.75fr)
            minmax(340px, 1fr);

        gap: 50px;
    }

    .contact-page {
        width: 100%;
        padding: 80px 32px 110px;

        grid-template-columns:
            minmax(220px, 0.75fr)
            minmax(340px, 1fr);

        gap: 45px;
    }

    .contact-page-intro h1 {
        font-size: 52px;
    }

    .project-hero {
        padding: 75px 32px 60px;

        gap: 45px;
    }

    .project-cover {
        width: calc(100% - 48px);
    }

    .project-overview {
        padding: 90px 32px 110px;

        gap: 55px;
    }

    .project-gallery-simple {
        width: calc(100% - 48px);
        gap: 22px;
    }

    .success-card {
        margin: 0 12px 12px;
        padding: 70px 32px;

        border-radius: 24px;
    }

}


/* ========================================
   SMARTPHONE
======================================== */

@media screen and (max-width: 650px) {

    .availability-status {
        font-size: 18px;
    }

    .availability-home {
        margin-bottom: 24px;
    }

    .header {
        padding: 18px 18px 20px;

        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 14px;
    }

    .logo img {
        width: 70px;
    }

    .menu {
        width: 100%;

        justify-content: center;
        flex-wrap: nowrap;
        gap: clamp(12px, 4vw, 20px);
    }

    .menu > a {
        min-height: 54px;
        padding: 12px 6px;

        display: inline-flex;
        align-items: center;

        font-size: 16px;
    }

    .menu > a.active {
        position: relative;

        border-bottom: none;
    }

    .menu > a.active::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 8px;
        left: 0;

        height: 1px;

        background-color: #111111;
    }

    .social-icons {
        gap: 8px;
    }

    .social-icon {
        width: 50px;
        height: 50px;
    }

    .social-icon img {
        width: 26px;
        height: 26px;
    }

    .social-icon .material-symbols-outlined {
        font-size: 22px;
    }

    .site-card {
        margin: 0 8px 8px;

        border-radius: 20px;
    }

    .intro {
        padding: 65px 22px 90px;
    }

    .intro h1 {
        font-size: clamp(38px, 11vw, 52px);
    }

    .intro h2 {
        margin-top: 30px;

        font-size: 15px;
        text-align: left;
    }

    .portfolio {
        padding-right: 18px;
        padding-left: 18px;

        grid-template-columns: 1fr;
        row-gap: 65px;
    }

    .about-hero {
        padding: 38px 18px 85px;

        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-text h1 {
        font-size: 44px;
        line-height: 1.05;
    }

    .about-text p {
        font-size: 15px;
    }

    .about-details {
        padding: 0 18px 90px;

        grid-template-columns: 1fr;
        gap: 55px;
    }

    .contact-section {
        padding: 75px 18px 90px;

        grid-template-columns: 1fr;
        gap: 70px;
    }

    .contact-page {
        width: 100%;
        padding: 60px 20px 90px;

        grid-template-columns: 1fr;
        gap: 65px;
    }

    .contact-page-intro {
        position: static;
    }

    .contact-page-form {
        max-width: none;

        justify-self: stretch;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .submit-button {
        width: 100%;
    }


    /* PROGETTO MOBILE */

    .project-hero {
        padding: 60px 20px 50px;

        grid-template-columns: 1fr;
        gap: 35px;
    }

    .project-hero h1 {
        font-size: clamp(66px, 22vw, 105px);
        line-height: 1;
    }

    .project-hero-intro p {
        font-size: 16px;
    }

    .project-cover {
        width: calc(100% - 36px);
    }

    .project-overview {
        padding: 75px 20px 90px;

        grid-template-columns: 1fr;
        gap: 55px;
    }

    .project-description h2 {
        font-size: 42px;
    }

    .project-description p {
        font-size: 15px;
    }

    .project-gallery-simple {
        width: calc(100% - 36px);
        padding-bottom: 90px;

        grid-template-columns: 1fr;
        gap: 18px;
    }

    .sazio-page .project-hero {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-bottom: 75px;
    }

    .sazio-page .project-hero-intro {
        margin-top: 22px;
    }

    .sazio-page .project-hero h1 {
        font-size: clamp(62px, 20vw, 96px);
    }

    .sazio-page .project-hero-intro p {
        font-size: 16px;
    }

    .sazio-page .project-hero .sazio-video-carousel {
        width: 100%;
        margin-top: 38px;
        padding: 0;
    }

    .sazio-carousel-controls {
        display: flex;
        pointer-events: none;
        user-select: none;
    }

    .sazio-tap-zone {
        position: absolute;
        z-index: 2;
        top: 0;
        bottom: 0;
        display: block;
        width: 50%;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .sazio-tap-zone--previous {
        left: 0;
    }

    .sazio-tap-zone--next {
        right: 0;
    }

    .project-gallery-button {
        cursor: zoom-in;
    }

    .image-lightbox {
        padding: 18px;
    }

    .image-lightbox-content {
        max-width: 100%;
        max-height: 86vh;
    }

    .image-lightbox-content img {
        max-height: 86vh;
    }

    .image-lightbox-close {
        top: 8px;
        right: 10px;

        width: 42px;
        height: 42px;

        font-size: 34px;
    }

    .project-navigation {
        grid-template-columns: 1fr;
    }

    .project-back-link,
    .project-next-link {
        min-height: 170px;
        padding: 32px 20px;
    }

    .project-back-link {
        border-right: none;
        border-bottom: 1px solid #dddddd;
    }

    .project-next-link {
        text-align: left;
    }

    .project-nav-title {
        font-size: 36px;
    }


    /* SUCCESSO */

    .success-card {
        margin: 0 8px 8px;
        padding: 60px 22px;

        border-radius: 20px;
    }

    .success-content h1 {
        font-size: clamp(48px, 15vw, 72px);
    }

    .success-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .success-actions a {
        width: 100%;

        text-align: center;
    }

    .footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .popup-content {
        padding: 48px 24px 30px;
    }

}


/* ========================================
   PAGINA PROGETTO LORETO
======================================== */

.project-page.loreto-page {
    padding-top: 1px;
}

.project-page.loreto-page .project-hero {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 100px 45px 75px;

    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: clamp(55px, 9vw, 130px);

    align-items: end;
}

.project-page.loreto-page .project-eyebrow {
    margin-bottom: 22px;

    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.project-page.loreto-page .project-hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(72px, 10vw, 150px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: normal;
}

.project-page.loreto-page .project-hero-intro p {
    max-width: 460px;

    font-size: 18px;
    line-height: 1.55;
}

.project-page.loreto-page .project-cover {
    width: min(calc(100% - 9%), 1280px);
    margin: 0 auto;

    overflow: hidden;

    background: #eeeeee;
}

.project-page.loreto-page .project-cover img {
    display: block;
    width: 100%;
    height: auto;

    object-fit: cover;
}

.project-page.loreto-page .project-overview {
    width: min(100%, 1100px);
    margin: 0 auto;
    padding: 110px 45px 130px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 0.35fr);
    align-items: start;
    gap: clamp(70px, 10vw, 140px);
}

.project-page.loreto-page .project-description h2 {
    margin-bottom: 32px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(40px, 4vw, 62px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: normal;
}

.project-page.loreto-page .project-description p {
    max-width: 680px;
    margin-bottom: 22px;

    font-size: 17px;
    line-height: 1.65;
}

.project-page.loreto-page .project-data {
    display: grid;
    gap: 28px;
}

.project-page.loreto-page .project-data-item {
    padding-bottom: 22px;

    border-bottom: 1px solid #dddddd;
}

.project-page.loreto-page .project-data-item h3 {
    margin-bottom: 8px;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project-page.loreto-page .project-data-item p {
    font-size: 14px;
    line-height: 1.55;
}

.project-page.loreto-page .project-gallery-simple {
    width: min(calc(100% - 9%), 1480px);
    margin: 0 auto;
    padding-bottom: 130px;

    display: grid;
    grid-template-columns: minmax(0, 1080px);
    justify-content: center;
    gap: 30px;
}

.project-page.loreto-page .project-gallery-button {
    width: 100%;
    aspect-ratio: 2220 / 1080;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0;

    overflow: hidden;

    border: none;
    border-radius: 0;
    background-color: #f5f5f5;

    cursor: zoom-in;

    appearance: none;
    -webkit-appearance: none;
}

.project-page.loreto-page .project-gallery-button:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 5px;
}

.project-page.loreto-page .project-gallery-button img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;
    background-color: #f5f5f5;

    transition:
        transform 0.6s ease,
        opacity 0.25s ease;
}

.project-page.loreto-page .project-gallery-button:hover img {
    transform: scale(1.02);
    opacity: 0.92;
}

.project-page.loreto-page .project-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid #dddddd;
}

.project-page.loreto-page .project-back-link,
.project-page.loreto-page .project-next-link {
    min-height: 210px;
    padding: 42px 4.5%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transition: background-color 0.25s ease;
}

.project-page.loreto-page .project-back-link {
    border-right: 1px solid #dddddd;
}

.project-page.loreto-page .project-back-link:hover,
.project-page.loreto-page .project-next-link:hover {
    background-color: #f8e12f;
}

.project-page.loreto-page .project-next-link {
    text-align: right;
}

.project-page.loreto-page .project-nav-label {
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project-page.loreto-page .project-nav-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(32px, 3.6vw, 54px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: normal;
}

.project-page.loreto-page .image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;

    padding: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    background-color: rgba(0, 0, 0, 0.88);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.project-page.loreto-page .image-lightbox.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.project-page.loreto-page .image-lightbox-content {
    width: auto;
    max-width: min(1400px, 92vw);
    max-height: 88vh;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: scale(0.98);

    transition: transform 0.25s ease;
}

.project-page.loreto-page .image-lightbox.show .image-lightbox-content {
    transform: scale(1);
}

.project-page.loreto-page .image-lightbox-content img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 88vh;

    object-fit: contain;
}

.project-page.loreto-page .image-lightbox-close {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 2;

    width: 46px;
    height: 46px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;

    background-color: transparent;
    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 38px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    transition: opacity 0.2s ease;
}

.project-page.loreto-page .image-lightbox-close:hover {
    opacity: 0.55;
}

.project-page.loreto-page .image-lightbox-close:focus-visible {
    outline: 1px solid #ffffff;
    outline-offset: 4px;
}

@media screen and (max-width: 900px) {
    .project-page.loreto-page .project-hero {
        padding: 70px 32px;

        grid-template-columns: 1fr;
        gap: 55px;
    }

    .project-page.loreto-page .project-overview {
        padding: 90px 32px 110px;

        gap: 55px;
    }

    .project-page.loreto-page .project-gallery-simple {
        width: calc(100% - 48px);
        gap: 22px;
    }
}

@media screen and (max-width: 650px) {
    .project-page.loreto-page .project-hero {
        padding: 55px 20px;

        grid-template-columns: 1fr;
        gap: 40px;
    }

    .project-page.loreto-page .project-hero h1 {
        font-size: clamp(48px, 14vw, 64px);
    }

    .project-page.loreto-page .project-hero-intro p {
        font-size: 16px;
    }

    .project-page.loreto-page .project-overview {
        padding: 75px 20px 90px;

        grid-template-columns: 1fr;
        gap: 55px;
    }

    .project-page.loreto-page .project-description h2 {
        font-size: 42px;
    }

    .project-page.loreto-page .project-description p {
        font-size: 15px;
    }

    .project-page.loreto-page .project-gallery-simple {
        width: calc(100% - 36px);
        padding-bottom: 90px;

        grid-template-columns: 1fr;
        gap: 18px;
    }

    .project-page.loreto-page .project-gallery-button {
        aspect-ratio: 16 / 10;
    }

    .project-page.loreto-page .image-lightbox {
        padding: 18px;
    }

    .project-page.loreto-page .image-lightbox-content {
        max-width: 100%;
        max-height: 86vh;
    }

    .project-page.loreto-page .image-lightbox-content img {
        max-height: 86vh;
    }

    .project-page.loreto-page .image-lightbox-close {
        top: 8px;
        right: 10px;

        width: 42px;
        height: 42px;

        font-size: 34px;
    }

    .project-page.loreto-page .project-navigation {
        grid-template-columns: 1fr;
    }

    .project-page.loreto-page .project-back-link,
    .project-page.loreto-page .project-next-link {
        min-height: 170px;
        padding: 32px 20px;
    }

    .project-page.loreto-page .project-back-link {
        border-right: none;
        border-bottom: 1px solid #dddddd;
    }

    .project-page.loreto-page .project-next-link {
        text-align: left;
    }

    .project-page.loreto-page .project-nav-title {
        font-size: 36px;
    }
}


@media screen and (max-width: 650px) {
    .porto-waves-gallery {
        grid-template-columns: 1fr;
    }

    .image-lightbox-nav {
        width: 42px;
        height: 58px;
        font-size: 48px;
    }

    .image-lightbox-previous {
        left: 4px;
    }

    .image-lightbox-next {
        right: 4px;
    }
}


/* ========================================
   RIDUZIONE ANIMAZIONI
======================================== */
/* ========================================
   FORM PRIVACY + PRIVACY PAGE
======================================== */

.form-privacy {
    margin-bottom: 16px;

    color: #666666;

    font-size: 12px;
    line-height: 1.5;
}

.form-privacy a {
    color: #111111;

    text-decoration: underline;
    text-underline-offset: 2px;
}

.form-privacy a:hover {
    opacity: 0.5;
}

/* PRIVACY PAGE */
.privacy-card {
    padding-top: 1px;
}

.privacy-page {
    width: min(100%, 1100px);
    margin: 0 auto;
    padding: 100px 45px 140px;
}

.privacy-header {
    margin-bottom: 100px;

    text-align: center;
}

.privacy-header h1 {
    margin-bottom: 22px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(30px, 3.4vw, 48px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: normal;
    text-transform: uppercase;
}

.privacy-update {
    color: #777777;

    font-size: 13px;
    line-height: 1.5;
}

.privacy-sections {
    display: flex;
    flex-direction: column;
    gap: 85px;
}

.privacy-section {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 45px;
}

.privacy-number {
    padding-top: 4px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 400;
}

.privacy-section-content {
    max-width: 760px;
}

.privacy-section h2 {
    margin-bottom: 28px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: normal;
    text-transform: uppercase;
}

.privacy-section p {
    margin-bottom: 17px;

    font-size: 15px;
    line-height: 1.7;
}

.privacy-section ul {
    margin: 20px 0;
    padding-left: 20px;
}

.privacy-section li {
    margin-bottom: 8px;

    font-size: 15px;
    line-height: 1.6;
}

.privacy-section a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.privacy-section a:hover {
    opacity: 0.5;
}

.privacy-owner {
    margin-top: 25px;
    padding: 25px 0;

    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
}

.privacy-owner p {
    margin: 0;
}

.privacy-note {
    margin-top: 120px;
    padding-top: 40px;

    border-top: 1px solid #dddddd;

    color: #777777;

    font-size: 12px;
    line-height: 1.6;
}

@media screen and (max-width: 900px) {

    .privacy-page {
        padding: 80px 32px 110px;
    }

    .privacy-header {
        margin-bottom: 80px;
    }

    .privacy-sections {
        gap: 70px;
    }

}

@media screen and (max-width: 650px) {

    .privacy-page {
        padding: 60px 20px 90px;
    }

    .privacy-header {
        margin-bottom: 70px;
    }

    .privacy-header h1 {
        font-size: 30px;
    }

    .privacy-section {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .privacy-number {
        font-size: 20px;
    }

    .privacy-section h2 {
        margin-bottom: 20px;

        font-size: 21px;
    }

    .privacy-section p,
    .privacy-section li {
        font-size: 14px;
    }

    .privacy-sections {
        gap: 65px;
    }

    .privacy-note {
        margin-top: 80px;
    }

}

/* ========================================
   ALBUM CROCE ROSSA
======================================== */

.album-page-card {
    padding-top: 1px;
}


/* ========================================
   INTRO
======================================== */

.album-project-intro {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 90px 45px 85px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .7fr);
    align-items: end;
    gap: 70px;
}

.album-kicker {
    margin-bottom: 18px;
    color: #777777;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.album-project-intro h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(56px, 7vw, 100px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: normal;
}

.album-project-description {
    max-width: 470px;
    font-size: 16px;
    line-height: 1.65;
}


/* ========================================
   SEZIONE ALBUM
======================================== */

.album-section {
    position: relative;
    width: min(100%, 1320px);
    min-height: 700px;
    margin: 0 auto;
    padding: 25px 45px 140px;
}


/* ========================================
   LOADER
======================================== */

.album-loader {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    transition: opacity .5s ease, visibility .5s ease;
}

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

.album-loader-inner {
    width: min(320px, 80%);
    text-align: center;
}

.album-loader-inner p {
    margin-bottom: 20px;
    font-size: 14px;
}

.album-loader-track {
    width: 100%;
    height: 2px;
    overflow: hidden;
    background-color: #dddddd;
}

.album-loader-progress {
    width: 0;
    height: 100%;
    background-color: #111111;
    transition: width .2s ease;
}

.album-loader-inner span {
    display: block;
    margin-top: 12px;
    color: #777777;
    font-size: 11px;
}


/* ========================================
   STAGE
======================================== */

.album-stage {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 50px;
    align-items: center;
    gap: 22px;
}


/* ========================================
   LIBRO
======================================== */

.book-shell {
    position: relative;
    width: 100%;
    max-width: 1020px;
    margin: 0 auto;
    perspective: 2400px;
}

.book-floor-shadow {
    display: none;
}

.book {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    isolation: isolate;
    transform-style: preserve-3d;
}

.book::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 2px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22), 0 3px 10px rgba(0, 0, 0, .12);
    pointer-events: none;
    transition: inset .45s cubic-bezier(.22, .75, .25, 1);
}

.book-single-front::before,
.book-single-back::before {
    inset: 0 25%;
}

.book-single-front.book-opening::before {
    inset: 0 0 0 50%;
}

.book-single-back.book-opening-back::before {
    inset: 0 50% 0 0;
}

.book-single-front.book-opening.book-cover-turning::before,
.book-single-back.book-opening-back.book-cover-turning::before {
    transition: none;
}

.book-single-front.book-opening.book-cover-turning::before {
    inset: 0 0 0 50%;
}

.book-single-back.book-opening-back.book-cover-turning::before {
    inset: 0 50% 0 0;
}


/* ========================================
   PAGINE
======================================== */

.book-page {
    position: relative;
    width: 100%;
    aspect-ratio: 20.5 / 21;
    overflow: hidden;
    background-color: #ffffff;
    cursor: zoom-in;
    transition: transform .45s cubic-bezier(.22, .75, .25, 1);
}

.book-page img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #ffffff;
    user-select: none;
    -webkit-user-drag: none;
}

.book-page-hidden {
    visibility: hidden;
    pointer-events: none;
}


/* ========================================
   SINGOLA COPERTINA
======================================== */

.book-single-front {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.book-single-front .book-page-right {
    grid-column: 2;
    transform: translateX(-50%);
}

.book-single-front .book-page-left {
    display: none;
}


/* ========================================
   SINGOLO RETRO
======================================== */

.book-single-back {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.book-single-back .book-page-left {
    grid-column: 1;
    transform: translateX(50%);
}

.book-single-back .book-page-right {
    display: none;
}

.book-single-front.book-opening,
.book-single-back.book-opening-back {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.book-single-front.book-opening .book-page-right {
    grid-column: 2;
    transform: translateX(0);
}

.book-single-back.book-opening-back .book-page-left {
    transform: translateX(0);
}


/* ========================================
   OMBRA INTERNA
======================================== */

.page-inner-shadow {
    display: none;
}

.page-inner-shadow-left {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, .17), rgba(0, 0, 0, .05) 28%, transparent);
}

.page-inner-shadow-right {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, .17), rgba(0, 0, 0, .05) 28%, transparent);
}


/* ========================================
   DORSO
======================================== */

.book-spine {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    z-index: 10;
    width: 2px;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .2);
    pointer-events: none;
}

.book-spine-hidden {
    opacity: 0;
}


/* ========================================
   PAGINA CHE GIRA
======================================== */

.turning-page {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 30;
    width: 50%;
    height: 100%;
    transform-origin: left center;
    transform-style: preserve-3d;
    transform: translateZ(0);
    will-change: transform;
    visibility: hidden;
    pointer-events: none;
}

.turning-page-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: #ffffff;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    will-change: opacity;
}

.turning-page-face img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #ffffff;
}

.turning-page-back {
    transform: rotateY(180deg) translateZ(0);
}


/* ========================================
   PIEGA DELLA PAGINA
======================================== */

.turn-highlight {
    display: none;
}

.turn-shadow {
    display: none;
}


/* ========================================
   ANIMAZIONE AVANTI
======================================== */

.turn-forward {
    visibility: visible;
    animation: turnForward .9s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes turnForward {
    from { transform: translateZ(0) rotateY(0deg); }
    to { transform: translateZ(0) rotateY(-180deg); }
}

/* ========================================
   ANIMAZIONE INDIETRO
======================================== */

.turn-backward {
    left: 0;
    right: auto;
    transform-origin: right center;
    visibility: visible;
    animation: turnBackward .9s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes turnBackward {
    from { transform: translateZ(0) rotateY(0deg); }
    to { transform: translateZ(0) rotateY(180deg); }
}


/* ========================================
   COPERTINA → APERTURA
======================================== */

.turn-from-cover {
    visibility: visible;
    animation: openCover .9s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes openCover {
    from { transform: translateZ(0) rotateY(0deg); }
    to { transform: translateZ(0) rotateY(-180deg); }
}


/* ========================================
   RITORNO ALLA COPERTINA
======================================== */

.turn-to-cover {
    left: 0;
    right: auto;
    transform-origin: right center;
    visibility: visible;
    animation: closeCover .9s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes closeCover {
    from { transform: translateZ(0) rotateY(0deg); }
    to { transform: translateZ(0) rotateY(180deg); }
}


/* ========================================
   FRECCE
======================================== */

.album-arrow {
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    color: #111111;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
}

.album-arrow:hover {
    transform: scale(1.08);
}

.album-arrow:disabled {
    opacity: .18;
    cursor: default;
    transform: none;
}

.album-arrow .material-symbols-outlined {
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
}

.album-arrow-left .material-symbols-outlined {
    transform: translateX(3px);
}


/* ========================================
   CONTATORE
======================================== */

.album-counter {
    margin-top: 38px;
    text-align: center;
}

.album-counter span {
    color: #777777;
    font-size: 12px;
    letter-spacing: .05em;
}


/* ========================================
   LIGHTBOX
======================================== */

.album-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background-color: rgba(0, 0, 0, .92);
    transition: opacity .25s ease, visibility .25s ease;
}

.album-lightbox.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.album-lightbox img {
    display: block;
    width: auto;
    max-width: 92vw;
    height: auto;
    max-height: 92vh;
    object-fit: contain;
}

.album-lightbox-close {
    position: absolute;
    top: 15px;
    right: 22px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 40px;
    font-weight: 300;
    cursor: pointer;
}


/* ========================================
   TABLET
======================================== */

@media screen and (max-width: 900px) {
    .drappo-hero {
        width: calc(100% - 64px);
        min-height: 0;
        padding: 72px 0 90px;

        grid-template-columns: 1fr;
        gap: 48px;
    }

    .drappo-hero-image {
        height: min(82vh, 760px);
    }

    .album-project-intro {
        padding: 75px 32px 70px;
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .album-section {
        min-height: 600px;
        padding: 15px 32px 110px;
    }

    .album-stage {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        gap: 12px;
    }

    .album-arrow {
        width: 40px;
        height: 40px;
    }

    .album-arrow .material-symbols-outlined {
        font-size: 25px;
    }
}


/* ========================================
   MOBILE
======================================== */

@media screen and (max-width: 650px) {
    .hero-mobile-break {
        display: block;
    }

    .drappo-hero {
        width: calc(100% - 40px);
        padding: 55px 0 70px;
        gap: 35px;
    }

    .drappo-hero-copy h1 {
        margin-bottom: 30px;

        font-size: clamp(62px, 20vw, 100px);
        line-height: 1;
    }

    .drappo-hero-image {
        height: auto;
    }

    .drappo-hero-image img {
        height: auto;
    }

    .album-project-intro {
        padding: 55px 20px 55px;
    }

    .album-project-intro h1 {
        font-size: clamp(45px, 14vw, 66px);
    }

    .album-project-description {
        font-size: 15px;
    }

    .album-section {
        min-height: 460px;
        padding: 0 12px 80px;
    }

    .album-stage {
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        gap: 5px;
    }

    .album-arrow {
        width: 34px;
        height: 34px;
    }

    .album-arrow .material-symbols-outlined {
        font-size: 21px;
    }

    .book-shell {
        perspective: 1600px;
    }

    .page-inner-shadow {
        width: 20px;
    }

    .book-spine {
        width: 1px;
    }

    .album-counter {
        margin-top: 24px;
    }

    .album-lightbox {
        padding: 15px;
    }

    .album-lightbox img {
        max-width: 96vw;
        max-height: 90vh;
    }
}


/* ========================================
   RIDUZIONE ANIMAZIONI
======================================== */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .availability-dot::after {
        animation: none;
        opacity: 0;
    }

}