.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 img{opacity:0.92;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:940px;}.e-con{--container-max-width:940px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;700;900&family=Archivo+Black&display=swap" rel="stylesheet">
<style>
/* HOSTING / MOBILE FIX */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.ost-home, .ost-p2, .ost3, .ost4, .ost5, .ost6, .ost7, .ost-final {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =========================
   LOGHI IN BASSO A DESTRA
   ========================= */

.ost-logos {
    position: absolute;
    right: 5%;
    bottom: 7%;

    display: flex;
    align-items: flex-end;
    gap: 2.4vw;

    z-index: 30;
}

.ost-logo {
    display: block;
    height: auto;
    object-fit: contain;
}

.ost-logo-1 {
    width: 9vw;
}

.ost-logo-2 {
    width: 9vw;
}
/* ELIMINA MARGINI DI WORDPRESS / ELEMENTOR */
html,
body {
    margin: 0 !important;
    padding: 0 !important;
}

body {
    overflow-x: hidden;
}

/* =========================
   TAVOLA PRINCIPALE
   proporzione Illustrator 1440 x 900
   ========================= */

.ost-home {
    position: relative;
    width: 100vw;
    aspect-ratio: 1440 / 900;
    min-height: 100vh;
    overflow: hidden;

    margin-left: calc(50% - 50vw);

    background: #F15108;

    font-family: "Archivo", sans-serif;
}

/* =========================
   PARTE SUPERIORE
   ========================= */

.ost-top {
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 76.56%;
}


/* ARANCIO */
.ost-orange {
    position: absolute;
    left: 0;
    top: 0;

    width: 10.90%;
    height: 100%;

    background: #F15108;
}


/* PANNA */
.ost-cream {
    position: absolute;
    left: 11.04%;
    top: 0;

    width: 19.31%;
    height: 100%;

    background: #F2EEE3;
}


/* MAGENTA */
.ost-magenta {
    position: absolute;
    left: 30.42%;
    top: 0;

    width: 20.83%;
    height: 100%;

    background: #E80070;
}


/* TERRACOTTA */
.ost-terra {
    position: absolute;
    left: 51.25%;
    top: 0;

    width: 6.25%;
    height: 100%;

    background: #B14E43;
}


/* BEIGE */
.ost-beige {
    position: absolute;
    left: 57.50%;
    top: 0;

    width: 42.50%;
    height: 100%;

    background: #C7B299;
}


/* LINEA NERA TRA ARANCIO E PANNA */
.ost-line-1 {
    position: absolute;

    left: 10.90%;
    top: 0;

    width: 2px;
    height: 100%;

    background: #101010;

    z-index: 5;
}


/* LINEA NERA TRA PANNA E MAGENTA */
.ost-line-2 {
    position: absolute;

    left: 30.35%;
    top: 0;

    width: 1px;
    height: 100%;

    background: #101010;

    z-index: 5;
}


/* =========================
   TITOLO
   ========================= */

.ost-title {
    position: absolute;

    left: 60.60%;
    top: 12.7%;

    margin: 0;
    padding: 0;

    color: #101010;

    font-family: "Archivo Black", sans-serif;
    font-weight: 900;

    letter-spacing: -0.045em;

    z-index: 20;
}


.ost-capri {
    display: block;

    font-size: 7.64vw;
    line-height: 1;

    white-space: nowrap;
}


.ost-ostinata {
    display: block;

    margin-top: 1.5vw;

    font-size: 6.39vw;
    line-height: 1;

    white-space: nowrap;
}


/* =========================
   TESTO
   ========================= */

.ost-text {
    position: absolute;

    left: 60.75%;
    top: 50.5%;

    width: 35%;

    margin: 0;

    color: #101010;

    font-size: 1.94vw;
    line-height: 1.2;

    font-weight: 400;

    z-index: 20;
}


/* =========================
   FASCIA BLU
   ========================= */

.ost-blue {
    position: absolute;

    left: 0;
    top: 76.56%;

    width: 28.68%;
    height: 7.78%;

    background: #154FD1;
}


/* =========================
   FASCIA GIALLA
   ========================= */

.ost-yellow {
    position: absolute;

    left: 28.68%;
    top: 76.56%;

    width: 28.82%;
    height: 7.78%;

    background: #E6AD29;

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


.ost-yellow-text {
    color: #101010;

    font-size: 1.25vw;
    font-weight: 700;

    letter-spacing: 0.13em;

    white-space: nowrap;
}


/* =========================
   ARANCIO INFERIORE
   ========================= */

.ost-bottom {
    position: absolute;

    left: 0;
    top: 84.34%;

    width: 100%;
    height: 15.66%;

    background: #F15108;
}


/* AREA ARANCIO SOTTO IL BEIGE */
.ost-bottom-right {
    position: absolute;

    left: 57.50%;
    top: 76.56%;

    width: 42.50%;
    height: 23.44%;

    background: #F15108;
}


/* ==================================================
   SCHERMI PICCOLI
   Per ora preserviamo la composizione originale.
   Il mobile lo sistemiamo successivamente.
   ================================================== */

@media (max-width: 900px) {

    .ost-home {
        min-width: 900px;
    }

}
/* FINESTRA FOTO = ESATTAMENTE IL FONDO BEIGE */

.ost-photo-window {
    position: absolute;

    left: 57.50%;
    top: 0;

    width: 42.50%;
    height: 100%;

    overflow: hidden;

    z-index: 10;
    pointer-events: none;
}


/* FOTO */

.ost-photo-1 {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    mix-blend-mode: multiply;
    opacity: 0.32;

    transform: translateX(105%);

    animation: fotoCapri1 3.5s ease-out forwards;
}


/* ENTRA DA DESTRA E SI FERMA */

@keyframes fotoCapri1 {

    from {
        transform: translateX(105%);
    }

    to {
        transform: translateX(0);
    }

}

/* =========================
   FOTO 2 - FASCIA MAGENTA
   ========================= */

.ost-photo-magenta-window {
    position: absolute;

    left: 30.42%;
    top: 0;

    width: 20.83%;
    height: 100%;

    overflow: hidden;

    z-index: 10;
    pointer-events: none;
}

.ost-photo-magenta {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    mix-blend-mode: multiply;
    opacity: 0.38;

    transform: translateY(-105%);

    animation: fotoMagenta 3.5s ease-out forwards;
}


/* ENTRA DALL'ALTO E RESTA */

@keyframes fotoMagenta {

    from {
        transform: translateY(-105%);
    }

    to {
        transform: translateY(0);
    }

}

/* =========================
   FOTO 2 - FASCIA MAGENTA
   ========================= */

.ost-photo-magenta-window {
    position: absolute;

    left: 30.42%;
    top: 0;

    width: 20.83%;
    height: 100%;

    overflow: hidden;

    z-index: 10;
    pointer-events: none;
}

.ost-photo-magenta {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    mix-blend-mode: multiply;
    opacity: 0.38;

    transform: translateY(-105%);

    animation: fotoMagenta 3.5s ease-out forwards;
}


/* ENTRA DALL'ALTO E RESTA */

@keyframes fotoMagenta {

    from {
        transform: translateY(-105%);
    }

    to {
        transform: translateY(0);
    }

}
/* =========================
   FOTO GENTE
   APPOGGIATA ALLA FASCIA BLU
   SENZA TAGLIO
   ========================= */

.ost-photo-people-window {
    position: absolute;

    left: 0;
    bottom: 0;

    /* da sinistra fino all'inizio del magenta */
    width: 30.42%;
    height: 100%;

    overflow: hidden;

    z-index: 12;
    pointer-events: none;
}


.ost-photo-people {
    position: absolute;

    left: 0;
    bottom: 0;

    /* mantiene le proporzioni originali */
    width: 100%;
    height: auto;

    max-width: none;

    mix-blend-mode: multiply;
    opacity: 0.80;

    /* parte fuori a sinistra */
    transform: translateX(-105%);

    animation: fotoPeople 3.5s ease-out forwards;
}


/* ENTRA DA SINISTRA E RESTA */

@keyframes fotoPeople {

    from {
        transform: translateX(-105%);
    }

    to {
        transform: translateX(0);
    }

}

/* ENTRA DAL BASSO E SI FERMA */

@keyframes fotoPeople {

    from {
        transform: translateY(110%);
    }

    to {
        transform: translateY(0);
    }

}

/* ENTRA DA SINISTRA E SI FERMA */

@keyframes fotoPeople {

    from {
        transform: translateX(-105%);
    }

    to {
        transform: translateX(0);
    }

}
/* =========================
   FOTO MARE
   ENTRA DAVVERO DA FUORI SCHERMO
   ========================= */

.ost-photo-sea-window {
    position: absolute;

    /* POSIZIONE FINALE */
    left: 3%;
    top: 3%;

    width: 32%;
    height: auto;

    z-index: 11;
    pointer-events: none;

    /* parte completamente fuori dallo schermo */
    transform: translateX(-120vw);

    animation: fotoSea 3.5s ease-out forwards;
}


.ost-photo-sea {
    display: block;

    width: 100%;
    height: auto;

    mix-blend-mode: multiply;
    opacity: 0.80;
}


/* DA FUORI SCHERMO ALLA POSIZIONE FINALE */

@keyframes fotoSea {

    from {
        transform: translateX(-120vw);
    }

    to {
        transform: translateX(0);
    }

}

/* MOBILE — lo sistemiamo poi in modo dedicato */

@media (max-width: 767px) {

    .ost-page2 {
        min-width: 900px;
    }
}

/* ==========================================================
   PAGINA 2 — NUOVA VERSIONE PULITA
   ========================================================== */

.ost-p2 {
    position: relative;

    width: 100vw;
    height: 100vh;
    min-height: 700px;

    margin-left: calc(50% - 50vw);

    overflow: hidden;

    font-family: "Archivo", sans-serif;

    background: #F15108
;
}


/* -------------------------
   SFONDI
   ------------------------- */

.ost-p2-orange {
    position: absolute;

    left: 0;
    top: 0;

    width: 53.24%;
    height: 100%;

    background: #F15108;

    z-index: 1;
}


.ost-p2-blue {
    position: absolute;

    left: 53.24%;
    top: 0;

    width: 46.76%;
    height: 100%;

    background: #274EC9;

    z-index: 1;
}


/* -------------------------
   MANIFESTO / CAPRI
   ------------------------- */

.ost-p2-kicker {
    position: absolute !important;

    left: 4.25%;
    top: 7.3%;

    margin: 0 !important;

    color: #ffffff;

    font-size: clamp(12px, 1.15vw, 17px);
    line-height: 1;

    font-weight: 700;
    letter-spacing: 0.16em;

    white-space: nowrap;

    z-index: 30;
}


/* -------------------------
   TITOLO GRANDE
   ------------------------- */

.ost-p2-title {
    position: absolute !important;

    left: 4.25%;
    top: 23.5%;

    width: 43%;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff;

    font-family: "Archivo Black", sans-serif;
    font-weight: 900;

    font-size: clamp(50px, 5.15vw, 76px);
    line-height: 0.94;

    letter-spacing: -0.035em;

    z-index: 30;
}


/* -------------------------
   TESTO INGLESE
   UN SOLO CARTIGLIO
   ------------------------- */

.ost-p2-question {
    position: absolute !important;

    left: 54.55%;
    bottom: 5.4%;

    width: 34%;

    box-sizing: border-box;

    padding: 10px 16px;

    margin: 0 !important;

    background: #F2EEE3;

    color: #101010;

    font-size: clamp(11px, 1.05vw, 15px);
    line-height: 1;

    font-weight: 900;
    letter-spacing: 0.12em;

    text-align: center;
    white-space: nowrap;

    z-index: 30;
}


/* ==========================================================
   FOTO MARE
   ENTRA DA DESTRA
   ========================================================== */

.ost-p2-sea {
    position: absolute;

    /*
       Il blu comincia al 53.24%.
       Sottraendo 4 cm, la foto entra
       di circa 4 cm dentro l'arancione.
    */
    left: calc(53.24% - 4cm);
    top: 0;

    right: 0;
    height: 100%;

    overflow: hidden;

    z-index: 10;

    pointer-events: none;

    /* prima dello scroll è fuori dallo schermo */
    transform: translateX(110vw);
}


/* quando la pagina entra nello schermo */
.ost-p2.is-visible .ost-p2-sea {
    animation: ostP2SeaEnter 3.2s ease-out forwards;
}


.ost-p2-sea img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    mix-blend-mode: multiply;

    opacity: 0.34;
}


@keyframes ostP2SeaEnter {

    from {
        transform: translateX(110vw);
    }

    to {
        transform: translateX(0);
    }

}
/* ==================================================
   PAGINA 3 — TERRA / GESTO / COMUNITÀ
   ================================================== */

.ost3 {
    position: relative;

    width: 100vw;
    height: 100vh;
    min-height: 700px;

    margin-left: calc(50% - 50vw);

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    overflow: hidden;

    font-family: "Archivo", sans-serif;
}


/* LE TRE FASCE */

.ost3-col {
    position: relative;
    height: 100%;
}


/* BLU */

.ost3-terra {
    background: #274EC9;
}


/* MAGENTA */

.ost3-gesto {
    background: #EA33F7;
}


/* ARANCIO */

.ost3-comunita {
    background: #E9983E;
}


/* NUMERO + DESCRIZIONE IN ALTO */

.ost3-label {
    position: absolute;

    left: 7.8%;
    top: 6.2%;

    margin: 0;

    color: #ffffff;

    font-weight: 700;

    font-size: clamp(11px, 1.05vw, 15px);

    letter-spacing: 0.13em;

    white-space: nowrap;
}


/* TITOLI GRANDI */

.ost3-title {
    position: absolute;

    left: 7.8%;
    top: 24%;

    margin: 0;

    color: #080808;

    font-family: "Archivo Black", sans-serif;

    font-weight: 900;

    font-size: clamp(48px, 5vw, 72px);

    line-height: 1;

    letter-spacing: -0.045em;
}


/* TESTI */

.ost3-copy {
    position: absolute;

    left: 7.8%;
    top: 42%;

    width: 82%;

    margin: 0;

    color: #ffffff;

    font-size: clamp(17px, 1.7vw, 24px);

    line-height: 1.12;

    font-weight: 400;
}


/* MOBILE: per ora manteniamo l'impaginazione desktop */

@media (max-width: 767px) {

    .ost3 {
        min-width: 900px;
    }

}

/* ==========================================================
   MOBILE
   per ora conserviamo la composizione desktop
   ========================================================== */

@media (max-width: 767px) {

    .ost-p2 {
        min-width: 900px;
    }

}

/* ==========================================
   PAGINA 3 - FOTO
   ========================================== */

.ost3-col {
    position: relative;
    overflow: hidden;
}

.ost3-photo {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    z-index: 10;
    pointer-events: none;

    /* parte sotto la fascia */
    transform: translateY(110%);
}


/* IMMAGINE */

.ost3-photo img {
    display: block;

    width: 100%;
    height: auto;

    max-width: none;

    mix-blend-mode: multiply;
    opacity: 0.42;
}


/* QUANDO ARRIVI ALLA PAGINA 3 */

.ost3.is-visible .ost3-photo {
    animation: ost3PhotoUp 2.5s ease-out forwards;
}


/* PARTENZE LEGGERMENTE SFALSATE */

.ost3.is-visible .ost3-photo-1 {
    animation-delay: s;
}

.ost3.is-visible .ost3-photo-2 {
    animation-delay: 0.6s;
}

.ost3.is-visible .ost3-photo-3 {
    animation-delay: 0.5s;
}


@keyframes ost3PhotoUp {

    from {
        transform: translateY(110%);
    }

    to {
        transform: translateY(0);
    }
}


/* TESTI SOPRA LE FOTO */

.ost3-label,
.ost3-title,
.ost3-copy {
    position: absolute;
    z-index: 30;

}

/* ==================================================
   PAGINA 4 — CRONACHE OSTINATE
   ================================================== */

.ost4 {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 700px;

    margin-left: calc(50% - 50vw);

    overflow: hidden;

    background: #F2EEE3;
    color: #101010;

    font-family: "Archivo", sans-serif;
}


/* FOTO GRANDE SINISTRA */

.ost4-image {
    position: absolute;

    left: 4.8%;
    top: 7.7%;

    width: 48.6%;
    height: 84.3%;

    overflow: hidden;
}

.ost4-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    /* se la foto è già virata come nel tuo Illustrator
       lascia normal */
    mix-blend-mode: normal;
}


/* =========================
   PARTE DESTRA
   ========================= */

.ost4-content {
    position: absolute;

    left: 57%;
    top: 0;

    width: 38.5%;
    height: 100%;
}


/* ARCHIVIO DELL'ISOLA */

.ost4-kicker {
    position: absolute;

    left: 29%;
    top: 8.6%;

    margin: 0;

    font-size: clamp(10px, 1vw, 14px);
    font-weight: 700;

    letter-spacing: 0.15em;

    white-space: nowrap;
}


/* CRONACHE OSTINATE */

.ost4-title {
    position: absolute;

    left: 0;
    top: 12.8%;

    margin: 0;

    font-family: "Archivo Black", sans-serif;
    font-weight: 900;

    font-size: clamp(54px, 5.6vw, 82px);
    line-height: 1.08;

    letter-spacing: -0.035em;
}


/* =========================
   VOCI ARCHIVIO
   ========================= */

.ost4-items {
    position: absolute;

    left: 2.5%;
    top: 39.8%;

    width: 72%;
}


/* SINGOLA VOCE */

.ost4-item {
    position: relative;

    display: grid;
    grid-template-columns: 82px 1fr;
    column-gap: 18px;

    min-height: 130px;

    padding-top: 16px;
    padding-bottom: 16px;

    border-top: 2px solid #101010;
}


/* QUADRATI */

.ost4-square {
    width: 78px;
    height: 88px;

    border: 2px solid #101010;

    box-sizing: border-box;
}

.ost4-square-magenta {
    background: #FF00FF;
}

.ost4-square-green {
    background: #30AC65;
}

.ost4-square-brown {
    background: #754C24;
}


/* TESTO DELLE VOCI */

.ost4-item-title {
    margin: 0 0 5px 0;

    font-family: "Archivo Black", sans-serif;
    font-size: clamp(18px, 1.75vw, 25px);
    line-height: 1;

    font-weight: 900;
}


.ost4-item-copy {
    margin: 0;

    font-size: clamp(12px, 1.05vw, 15px);
    line-height: 1.13;
}


/* MOBILE: per ora manteniamo il layout desktop */

@media (max-width: 767px) {

    .ost4 {
        min-width: 900px;
    }
}
/* ==================================================
   PAGINA 5 — CHI RESTA
   ================================================== */

.ost5 {
    position: relative;

    width: 100vw;
    height: 100vh;
    min-height: 700px;

    margin-left: calc(50% - 50vw);

    overflow: hidden;

    background: #64315E;

    font-family: "Archivo", sans-serif;
    color: #ffffff;
}


/* -------------------------
   TESTO PICCOLO IN ALTO
   ------------------------- */

.ost5-kicker {
    position: absolute;

    left: 4.1%;
    top: 6.8%;

    margin: 0;

    font-size: clamp(11px, 1.05vw, 15px);
    font-weight: 700;
    letter-spacing: 0.14em;

    color: #ffffff;

    z-index: 30;
}


/* -------------------------
   TITOLO GRANDE
   ------------------------- */

.ost5-title {
    position: absolute;

    left: 4.1%;
    top: 14.5%;

    margin: 0;

    width: 53%;

    font-family: "Archivo Black", sans-serif;
    font-weight: 900;

    font-size: clamp(55px, 5.8vw, 84px);
    line-height: 1.18;
    letter-spacing: -0.035em;

    color: #ffffff;

    z-index: 30;
}


/* -------------------------
   TESTO DESCRITTIVO
   ------------------------- */

.ost5-copy {
    position: absolute;

    left: 4.1%;
    top: 63%;

    width: 44%;

    margin: 0;

    font-size: clamp(18px, 1.75vw, 25px);
    line-height: 1.18;

    color: #ffffff;

    z-index: 30;
}


/* ==================================================
   FOTO
   posizione finale come nel tuo Illustrator
   ================================================== */

.ost5-photo {
    position: absolute;

    left: 60.6%;
    top: 7.7%;

    width: 33.7%;
    height: 83.7%;

    overflow: hidden;

    z-index: 10;
    pointer-events: none;

    /* all'inizio completamente sopra lo schermo */
    transform: translateY(-120vh);
}


/* FOTO INTERNA */

.ost5-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
}


/* QUANDO ARRIVI ALLA PAGINA */

.ost5.is-visible .ost5-photo {
    animation: ost5PhotoDown 3.2s ease-out forwards;
}


/* ENTRA DALL'ALTO E SI FERMA */

@keyframes ost5PhotoDown {

    from {
        transform: translateY(-120vh);
    }

    to {
        transform: translateY(0);
    }
}


/* MOBILE — per ora manteniamo il layout desktop */

@media (max-width: 767px) {

    .ost5 {
        min-width: 900px;
    }

}
/* ==================================================
   PAGINA 6 — PRIMA DEL VINO
   ================================================== */

.ost6 {
    position: relative;

    width: 100vw;
    height: 100vh;
    min-height: 700px;

    margin-left: calc(50% - 50vw);

    overflow: hidden;

    background: #ffffff;

    font-family: "Archivo", sans-serif;
    color: #101010;
}


/* ==================================================
   FONDO ROSA SINISTRO — STATICO
   ================================================== */

.ost6-left {
    position: absolute;

    left: 0;
    top: 0;

    width: 52%;
    height: 100%;

    background: #E574E8;

    z-index: 1;
}


/* ==================================================
   TESTI
   ================================================== */

.ost6-kicker {
    position: absolute;

    left: 4.1%;
    top: 6.8%;

    margin: 0;

    font-size: clamp(11px, 1.05vw, 15px);
    font-weight: 700;
    letter-spacing: 0.14em;

    z-index: 30;
}


.ost6-title {
    position: absolute;

    left: 4.1%;
    top: 14.5%;

    width: 42%;

    margin: 0;

    font-family: "Archivo Black", sans-serif;
    font-weight: 900;

    font-size: clamp(54px, 5.5vw, 80px);
    line-height: 0.95;

    letter-spacing: -0.035em;

    z-index: 30;
}


.ost6-copy {
    position: absolute;

    left: 4.1%;
    top: 57%;

    width: 37%;

    margin: 0;

    font-size: clamp(17px, 1.75vw, 25px);
    line-height: 1.17;

    z-index: 30;
}


/* ==================================================
   CARTIGLIO GIALLO
   ================================================== */

.ost6-box {
    position: absolute;

    left: 4.1%;
    bottom: 9.7%;

    width: 44%;
    min-height: 12.5%;

    box-sizing: border-box;

    padding: 17px 18px;

    display: flex;
    align-items: center;

    background: #E6AD29;

    border: 2px solid #101010;

    font-family: "Archivo Black", sans-serif;
    font-weight: 900;

    font-size: clamp(15px, 1.45vw, 21px);
    line-height: 1.05;

    z-index: 30;
}


/* ==================================================
   FOTO A DESTRA
   ================================================== */

.ost6-photo {
    position: absolute;

    /* POSIZIONE FINALE */
    left: 55.7%;
    top: 7.2%;

    width: 39.5%;
    height: 84.5%;

    overflow: hidden;

    z-index: 5;
    pointer-events: none;

    /* parte completamente da destra */
    transform: translateX(110vw);
}


.ost6-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
}


/* ==================================================
   RETTANGOLO ROSA TRASPARENTE
   ================================================== */

.ost6-overlay {
    position: absolute;

    /*
    POSIZIONE FINALE:
    sopra la zona centrale della fotografia
    */

    left: 57.3%;
    top: 26%;

    width: 28.3%;
    height: 62.8%;

    background: rgba(225, 39, 177, 0.48);

    /*
    Se vuoi un effetto più simile
    alla sovrapposizione Illustrator
    */
    mix-blend-mode: multiply;

    z-index: 15;
    pointer-events: none;

    /* parte completamente da sinistra */
    transform: translateX(-120vw);
}


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

/* FOTO: entra per prima da destra */

.ost6.is-visible .ost6-photo {
    animation: ost6PhotoIn 3.2s ease-out forwards;
}


/* ROSA: arriva leggermente dopo da sinistra */

.ost6.is-visible .ost6-overlay {
    animation: ost6OverlayIn 3.4s ease-out 0.6s forwards;
}


@keyframes ost6PhotoIn {

    from {
        transform: translateX(110vw);
    }

    to {
        transform: translateX(0);
    }
}


@keyframes ost6OverlayIn {

    from {
        transform: translateX(-120vw);
    }

    to {
        transform: translateX(0);
    }
}


/* MOBILE — per ora conserva la grafica desktop */

@media (max-width: 767px) {

    .ost6 {
        min-width: 900px;
    }

}
/* ==================================================
   PAGINA 7 — OLTRE LA CARTOLINA
   ================================================== */

.ost7 {
    position: relative;

    width: 100vw;
    height: 100vh;
    min-height: 700px;

    margin-left: calc(50% - 50vw);

    overflow: hidden;

    background: #ffffff;

    font-family: "Archivo", sans-serif;
    color: #101010;
}


/* ==================================================
   GRAFICA / LOGO SINISTRA
   ================================================== */

.ost7-logo {
    position: absolute;

    left: 5.5%;
    top: 7%;

    width: 100%;
    height:75%;

    z-index: 10;
}


.ost7-logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: left center;
}


/* ==================================================
   TITOLO GRANDE
   ================================================== */

.ost7-title {
    position: absolute;

    left: 49.7%;
    top: 12.5%;

    width: 44%;

    margin: 0;

    font-family: "Archivo Black", sans-serif;
    font-weight: 900;

    font-size: clamp(50px, 5.4vw, 78px);
    line-height: 1.02;

    letter-spacing: -0.035em;

    color: #101010;
}


/* ==================================================
   TESTO CENTRALE
   ================================================== */

.ost7-copy {
    position: absolute;

    left: 49.7%;
    top: 49.5%;

    width: 42%;

    margin: 0;

    font-family: "Archivo Black", sans-serif;
    font-weight: 900;

    font-size: clamp(28px, 3vw, 44px);
    line-height: 0.92;

    letter-spacing: -0.025em;

    color: #101010;
}


/* ==================================================
   INSTAGRAM
   ================================================== */

.ost7-social {
    position: absolute;

    left: 49.7%;
    top: 75%;

    margin: 0;

    font-family: "Archivo Black", sans-serif;
    font-weight: 900;

    font-size: clamp(22px, 2.35vw, 34px);

    color: #101010;
}


/* ==================================================
   FASCIA BLU IN BASSO
   ================================================== */

.ost7-bottom {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 11.2%;

    background: #154FD1;
}


/* MOBILE — per ora manteniamo il layout desktop */

@media (max-width: 767px) {

    .ost7 {
        min-width: 900px;
    }

}
/* ==================================================
   PAGINA FINALE
   ================================================== */

.ost-final {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 700px;

    margin-left: calc(50% - 50vw);
    overflow: hidden;

    background: #EB0071;

    font-family: "Archivo", sans-serif;
    color: #101010;
}


/* =========================
   FASCIA NERA IN BASSO
   ========================= */

.ost-final-footer {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 22%;

    background: #101010;

    z-index: 5;
}


/* =========================
   TESTO PICCOLO IN ALTO
   ========================= */

.ost-final-kicker {
    position: absolute;

    left: 4%;
    top: 7%;

    margin: 0;

    font-size: clamp(11px, 1vw, 15px);
    font-weight: 700;
    letter-spacing: 0.15em;

    z-index: 30;
}


/* ==================================================
   TITOLO GRANDE
   ================================================== */

.ost-final-title {
    position: absolute;

    left: 4%;
    top: 19%;

    width: 88%;

    margin: 0;

    font-family: "Archivo Black", sans-serif;
    font-weight: 900;

    font-size: clamp(55px, 5.5vw, 82px);
    line-height: 1.05;
    letter-spacing: -0.035em;

    z-index: 30;
}


/* Ogni riga è indipendente */

.ost-final-line {
    display: block;
    white-space: nowrap;
}


/* PRIMA RIGA: PARTE DA DESTRA */

.ost-final-line-1 {
    transform: translateX(120vw);
}


/* SECONDA RIGA: PARTE DA SINISTRA */

.ost-final-line-2 {
    transform: translateX(-120vw);
    margin-top: 1.2vh;
}


/* TERZA RIGA: PARTE DAL BASSO */

.ost-final-line-3 {
    transform: translateY(80vh);
    margin-top: 1.2vh;
}


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

.ost-final.is-visible .ost-final-line-1 {
    animation: ostFinalRight 2.3s ease-out forwards;
}

.ost-final.is-visible .ost-final-line-2 {
    animation: ostFinalLeft 2.3s ease-out 0.20s forwards;
}

.ost-final.is-visible .ost-final-line-3 {
    animation: ostFinalBottom 2.5s ease-out 0.40s forwards;
}


@keyframes ostFinalRight {

    from {
        transform: translateX(120vw);
    }

    to {
        transform: translateX(0);
    }

}


@keyframes ostFinalLeft {

    from {
        transform: translateX(-120vw);
    }

    to {
        transform: translateX(0);
    }

}


@keyframes ostFinalBottom {

    from {
        transform: translateY(80vh);
    }

    to {
        transform: translateY(0);
    }

}


/* =========================
   FRASE PICCOLA
   ========================= */

.ost-final-note {
    position: absolute;

    left: 4%;
    bottom: 31%;

    margin: 0;

    font-family: "Archivo Black", sans-serif;
    font-weight: 900;

    font-size: clamp(12px, 1.2vw, 18px);
    letter-spacing: 0.12em;

    z-index: 30;
}


/* =========================
   LOGO / NOME BASSO SX
   ========================= */

.ost-final-name {
    position: absolute;

    left: 4%;
    bottom: 7.5%;

    margin: 0;

    color: #ffffff;

    font-family: "Archivo Black", sans-serif;
    font-weight: 900;

    font-size: clamp(28px, 3vw, 44px);
    line-height: 1;

    z-index: 30;
}


/* =========================
   LINK BASSO DX
   ========================= */

.ost-final-links {
    position: absolute;

    right: 17%;
    bottom: 10%;

    margin: 0;

    color: #ffffff;

    font-size: clamp(11px, 1vw, 15px);
    line-height: 1.15;

    font-weight: 700;
    letter-spacing: 0.12em;

    z-index: 30;
}


</style>



<style>
/* ==========================================================
   RESPONSIVE ELEMENTOR — TABLET + MOBILE
   Aggiunto senza modificare la versione desktop
   ========================================================== */

/* Il widget HTML di Elementor deve poter occupare tutta la larghezza */
.elementor-widget-html,
.elementor-widget-html .elementor-widget-container {
    width: 100%;
    max-width: none;
}

.ost-home,
.ost-p2,
.ost3,
.ost4,
.ost5,
.ost6,
.ost7,
.ost-final {
    box-sizing: border-box;
    max-width: 100vw;
}

img {
    max-width: 100%;
}

/* ==========================================================
   TABLET — 768 / 1024 px
   ========================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

    html, body {
        width: 100%;
        overflow-x: hidden !important;
    }

    .ost-home,
    .ost-p2,
    .ost3,
    .ost4,
    .ost5,
    .ost6,
    .ost7,
    .ost-final {
        min-width: 0 !important;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        min-height: 100svh;
    }

    /* HOME */
    .ost-home {
        aspect-ratio: auto;
        height: 100svh;
        min-height: 760px;
    }

    .ost-title {
        left: 58%;
        top: 14%;
    }

    .ost-capri { font-size: 8.2vw; }
    .ost-ostinata { font-size: 6.8vw; }

    .ost-text {
        left: 58.5%;
        top: 48%;
        width: 37%;
        font-size: 2.35vw;
        line-height: 1.22;
    }

    .ost-yellow-text { font-size: 1.45vw; }
    .ost-logos { right: 4%; bottom: 5.5%; gap: 2vw; }
    .ost-logo-1, .ost-logo-2 { width: 11vw; }

    /* PAGINA 2 */
    .ost-p2-title {
        width: 45%;
        font-size: clamp(46px, 6vw, 64px);
    }

    .ost-p2-question {
        width: 39%;
        left: 56%;
        white-space: normal;
        line-height: 1.15;
    }

    /* PAGINA 3 */
    .ost3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ost3-label {
        left: 6%;
        font-size: 1.25vw;
        white-space: normal;
        width: 88%;
    }

    .ost3-title {
        left: 6%;
        font-size: clamp(38px, 5vw, 54px);
    }

    .ost3-copy {
        left: 6%;
        width: 88%;
        font-size: clamp(15px, 1.9vw, 20px);
    }

    /* PAGINA 4 */
    .ost4-image {
        left: 3.5%;
        width: 48%;
    }

    .ost4-content {
        left: 54%;
        width: 43%;
    }

    .ost4-title { font-size: clamp(48px, 6vw, 66px); }
    .ost4-items { width: 90%; top: 38%; }
    .ost4-item { grid-template-columns: 64px 1fr; column-gap: 14px; min-height: 112px; }
    .ost4-square { width: 60px; height: 72px; }

    /* PAGINE 5–6 */
    .ost5-title { width: 55%; font-size: clamp(48px, 6vw, 66px); }
    .ost5-copy { width: 48%; font-size: clamp(17px, 2.1vw, 22px); }
    .ost5-photo { left: 61%; width: 34%; }

    .ost6-title { width: 45%; font-size: clamp(46px, 6vw, 64px); }
    .ost6-copy { width: 42%; font-size: clamp(16px, 2vw, 21px); }
    .ost6-box { width: 46%; font-size: clamp(14px, 1.8vw, 18px); }
    .ost6-photo { left: 55%; width: 41%; }

    /* PAGINA 7 */
    .ost7-logo { left: 2%; top: 10%; width: 52%; height: 68%; }
    .ost7-title { left: 50%; width: 46%; font-size: clamp(46px, 6vw, 64px); }
    .ost7-copy { left: 50%; width: 45%; font-size: clamp(26px, 3.4vw, 36px); }
    .ost7-social { left: 50%; font-size: clamp(20px, 2.6vw, 28px); }

    /* FINALE */
    .ost-final-title { width: 92%; font-size: clamp(48px, 6vw, 66px); }
    .ost-final-links { right: 8%; }
}

/* ==========================================================
   MOBILE — fino a 767 px
   ========================================================== */
@media (max-width: 767px) {

    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body {
        margin: 0 !important;
        padding: 0 !important;
    }

    .ost-home,
    .ost-p2,
    .ost3,
    .ost4,
    .ost5,
    .ost6,
    .ost7,
    .ost-final {
        min-width: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        height: auto;
        min-height: 0;
        overflow: hidden;
    }

    /* ---------------- HOME ---------------- */
    .ost-home {
        aspect-ratio: auto;
        height: 100svh;
        min-height: 720px;
        background: #F15108;
    }

    .ost-top {
        height: 72%;
    }

    /* fasce ridisegnate per il formato verticale */
    .ost-orange { left: 0; width: 13%; }
    .ost-cream { left: 13%; width: 24%; }
    .ost-magenta { left: 37%; width: 24%; }
    .ost-terra { left: 61%; width: 8%; }
    .ost-beige { left: 69%; width: 31%; }
    .ost-line-1 { left: 13%; }
    .ost-line-2 { left: 37%; }

    .ost-photo-window {
        left: 69%;
        width: 31%;
    }

    .ost-photo-magenta-window {
        left: 37%;
        width: 24%;
    }

    .ost-photo-people-window {
        width: 37%;
    }

    .ost-photo-sea-window {
        left: 2%;
        top: 5%;
        width: 43%;
    }

    .ost-title {
        left: 8%;
        top: 38%;
        width: 86%;
    }

    .ost-capri,
    .ost-ostinata {
        white-space: normal;
    }

    .ost-capri {
        font-size: clamp(62px, 19vw, 92px);
        line-height: .9;
    }

    .ost-ostinata {
        margin-top: 2vw;
        font-size: clamp(52px, 15.5vw, 78px);
        line-height: .92;
    }

    .ost-text {
        left: 8%;
        top: 61%;
        width: 84%;
        font-size: clamp(19px, 5.4vw, 25px);
        line-height: 1.16;
    }

    .ost-text br { display: none; }

    .ost-blue {
        top: 72%;
        width: 42%;
        height: 8%;
    }

    .ost-yellow {
        left: 42%;
        top: 72%;
        width: 58%;
        height: 8%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .ost-yellow-text {
        font-size: clamp(10px, 2.8vw, 13px);
        letter-spacing: .08em;
    }

    .ost-bottom { top: 80%; height: 20%; }
    .ost-bottom-right { display: none; }

    .ost-logos {
        left: 8%;
        right: auto;
        bottom: 6%;
        gap: 22px;
        align-items: center;
    }

    .ost-logo-1,
    .ost-logo-2 {
        width: clamp(82px, 25vw, 120px);
    }

    /* ---------------- PAGINA 2 ---------------- */
    .ost-p2 {
        min-height: 760px;
        background: #F15108;
    }

    .ost-p2-orange {
        width: 100%;
        height: 58%;
    }

    .ost-p2-blue {
        left: 0;
        top: 58%;
        width: 100%;
        height: 42%;
    }

    .ost-p2-kicker {
        left: 7%;
        top: 6%;
        font-size: 12px;
    }

    .ost-p2-title {
        left: 7%;
        top: 14%;
        width: 86%;
        font-size: clamp(52px, 14vw, 74px);
        line-height: .9;
    }

    .ost-p2-sea {
        left: 18%;
        right: -12%;
        top: 50%;
        height: 50%;
    }

    .ost-p2-question {
        left: 7%;
        bottom: 5%;
        width: 86%;
        padding: 10px 12px;
        font-size: 11px;
        line-height: 1.15;
        white-space: normal;
    }

    /* ---------------- PAGINA 3 ---------------- */
    .ost3 {
        display: block;
        min-height: 0;
    }

    .ost3-col {
        height: 78svh;
        min-height: 560px;
        width: 100%;
    }

    .ost3-label {
        left: 7%;
        top: 7%;
        width: 86%;
        font-size: 12px;
        white-space: normal;
    }

    .ost3-title {
        left: 7%;
        top: 17%;
        font-size: clamp(58px, 17vw, 84px);
    }

    /* COMUNITÀ è più lunga: su mobile la riduciamo per mantenerla tutta nello schermo */
    .ost3-comunita .ost3-title {
        font-size: clamp(42px, 12vw, 58px);
        letter-spacing: -0.055em;
        white-space: nowrap;
    }

    .ost3-copy {
        left: 7%;
        top: 34%;
        width: 82%;
        font-size: clamp(19px, 5vw, 24px);
        line-height: 1.14;
    }

    .ost3-copy br { display: none; }

    .ost3-photo {
        width: 100%;
        bottom: 0;
    }

    .ost3-photo img {
        width: 100%;
        max-height: 48svh;
        object-fit: contain;
        object-position: center bottom;
    }

    /* ---------------- PAGINA 4 ---------------- */
    .ost4 {
        padding: 28px 20px 44px;
        min-height: 0;
    }

    .ost4-image,
    .ost4-content,
    .ost4-kicker,
    .ost4-title,
    .ost4-items {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
    }

    .ost4-image {
        aspect-ratio: 4 / 5;
        margin: 0 0 30px;
    }

    .ost4-content { min-height: 0; }

    .ost4-kicker {
        margin: 0 0 10px;
        font-size: 11px;
    }

    .ost4-title {
        margin: 0 0 26px;
        font-size: clamp(50px, 14vw, 68px);
        line-height: .95;
    }

    .ost4-items { margin: 0; }

    .ost4-item {
        grid-template-columns: 58px 1fr;
        column-gap: 14px;
        min-height: 0;
        padding: 14px 0 18px;
    }

    .ost4-square {
        width: 54px;
        height: 64px;
    }

    .ost4-item-title {
        font-size: 20px;
        line-height: .95;
    }

    .ost4-item-copy {
        font-size: 14px;
        line-height: 1.2;
    }

    .ost4-item-copy br { display: none; }

    /* ---------------- PAGINA 5 ---------------- */
    .ost5 {
        min-height: 850px;
        padding: 34px 24px 40px;
    }

    .ost5-kicker,
    .ost5-title,
    .ost5-copy {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
    }

    .ost5-kicker {
        margin: 0 0 22px;
        font-size: 12px;
    }

    .ost5-title {
        margin: 0 0 24px;
        font-size: clamp(48px, 13vw, 68px);
        line-height: .98;
    }

    .ost5-copy {
        margin: 0;
        font-size: clamp(19px, 5vw, 24px);
        line-height: 1.17;
    }

    .ost5-copy br { display: none; }

    .ost5-photo {
        left: 24px;
        right: 24px;
        top: auto;
        bottom: 34px;
        width: auto;
        height: 42%;
    }

    /* ---------------- PAGINA 6 ---------------- */
    .ost6 {
        min-height: 980px;
        padding: 34px 24px 42px;
        background: #E574E8;
    }

    .ost6-left {
        width: 100%;
        height: 58%;
    }

    .ost6-kicker,
    .ost6-title,
    .ost6-copy,
    .ost6-box {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        width: 100%;
    }

    .ost6-kicker {
        margin: 0 0 22px;
        font-size: 12px;
    }

    .ost6-title {
        margin: 0 0 22px;
        font-size: clamp(50px, 14vw, 70px);
        line-height: .92;
    }

    .ost6-copy {
        margin: 0 0 24px;
        font-size: clamp(19px, 5vw, 24px);
        line-height: 1.15;
    }

    .ost6-copy br { display: none; }

    .ost6-box {
        min-height: 0;
        margin: 0;
        padding: 14px;
        font-size: 16px;
        line-height: 1.06;
    }

    .ost6-photo {
        left: 0;
        top: 58%;
        width: 100%;
        height: 42%;
    }

    .ost6-overlay {
        left: 10%;
        top: 67%;
        width: 66%;
        height: 26%;
    }

    /* ---------------- PAGINA 7 ---------------- */
    .ost7 {
        min-height: 820px;
        padding: 34px 24px 120px;
    }

    .ost7-logo {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: 300px;
        margin: 0 0 10px;
    }

    .ost7-logo img {
        object-position: center;
    }

    .ost7-title,
    .ost7-copy,
    .ost7-social {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
    }

    .ost7-title {
        margin: 0 0 24px;
        font-size: clamp(50px, 14vw, 70px);
        line-height: .95;
    }

    .ost7-copy {
        margin: 0 0 30px;
        font-size: clamp(28px, 8vw, 40px);
        line-height: .95;
    }

    .ost7-social {
        margin: 0;
        font-size: clamp(20px, 5.8vw, 28px);
    }

    .ost7-bottom { height: 72px; }

    /* ---------------- PAGINA FINALE ---------------- */
    .ost-final {
        min-height: 760px;
        padding: 36px 22px 180px;
    }

    .ost-final-footer { height: 150px; }

    .ost-final-kicker,
    .ost-final-title,
    .ost-final-note {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        width: 100%;
    }

    .ost-final-kicker {
        margin: 0 0 42px;
        font-size: 11px;
    }

    .ost-final-title {
        margin: 0 0 32px;
        font-size: clamp(43px, 12vw, 62px);
        line-height: .95;
    }

    .ost-final-line {
        white-space: normal;
    }

    .ost-final-note {
        margin: 0;
        font-size: 13px;
        line-height: 1.2;
    }

    .ost-final-name {
        left: 22px;
        bottom: 40px;
        font-size: 28px;
    }

    .ost-final-links {
        right: 22px;
        bottom: 46px;
        font-size: 10px;
        text-align: right;
    }

    /* Animazioni meno estreme su mobile: evitano scatti e overflow */
    .ost-photo-sea-window,
    .ost-p2-sea,
    .ost5-photo,
    .ost6-photo,
    .ost6-overlay,
    .ost-final-line-1,
    .ost-final-line-2,
    .ost-final-line-3 {
        will-change: transform;
    }
}

/* Accessibilità: se l'utente disattiva le animazioni */
@media (prefers-reduced-motion: reduce) {
    .ost-photo-1,
    .ost-photo-magenta,
    .ost-photo-people,
    .ost-photo-sea-window,
    .ost-p2-sea,
    .ost3-photo,
    .ost5-photo,
    .ost6-photo,
    .ost6-overlay,
    .ost-final-line-1,
    .ost-final-line-2,
    .ost-final-line-3 {
        animation: none !important;
        transform: none !important;
    }
}


/* ==========================================================
   HOME MOBILE — FASCE ORIZZONTALI + FOTO A PIENO COLORE
   Solo smartphone: desktop e tablet invariati
   ========================================================== */
@media (max-width: 767px) {

    .ost-home .ost-top {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 72%;
        overflow: hidden;
    }

    /* Le cinque campiture diventano fasce orizzontali */
    .ost-home .ost-orange,
    .ost-home .ost-cream,
    .ost-home .ost-magenta,
    .ost-home .ost-terra,
    .ost-home .ost-beige {
        left: 0 !important;
        width: 100% !important;
    }

    .ost-home .ost-orange {
        top: 0 !important;
        height: 14% !important;
    }

    .ost-home .ost-cream {
        top: 14% !important;
        height: 20% !important;
    }

    .ost-home .ost-magenta {
        top: 34% !important;
        height: 20% !important;
    }

    .ost-home .ost-terra {
        top: 54% !important;
        height: 8% !important;
    }

    .ost-home .ost-beige {
        top: 62% !important;
        height: 38% !important;
    }

    /* Le linee verticali diventano separatori orizzontali */
    .ost-home .ost-line-1,
    .ost-home .ost-line-2 {
        left: 0 !important;
        width: 100% !important;
        height: 1px !important;
    }

    .ost-home .ost-line-1 {
        top: 14% !important;
    }

    .ost-home .ost-line-2 {
        top: 34% !important;
    }

    /* FOTO MARE = tutta la fascia ARANCIO */
    .ost-home .ost-photo-sea-window {
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 14% !important;
        overflow: hidden !important;
    }

    .ost-home .ost-photo-sea {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    /* FOTO PERSONE = tutta la fascia PANNA */
    .ost-home .ost-photo-people-window {
        left: 0 !important;
        top: 14% !important;
        bottom: auto !important;
        width: 100% !important;
        height: 20% !important;
        overflow: hidden !important;
    }

    .ost-home .ost-photo-people {
        left: 0 !important;
        top: 0 !important;
        bottom: auto !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    /* FOTO MAGENTA = tutta la fascia MAGENTA */
    .ost-home .ost-photo-magenta-window {
        left: 0 !important;
        top: 34% !important;
        width: 100% !important;
        height: 20% !important;
        overflow: hidden !important;
    }

    .ost-home .ost-photo-magenta {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    /* FOTO ISOLA = tutta la fascia BEIGE */
    .ost-home .ost-photo-window {
        left: 0 !important;
        top: 62% !important;
        width: 100% !important;
        height: 38% !important;
        overflow: hidden !important;
    }

    .ost-home .ost-photo-1 {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}



/* ==========================================================
   FONT DEFINITIVI — IDENTICI SU DESKTOP / TABLET / MOBILE
   ========================================================== */
.ost-home,
.ost-p2,
.ost3,
.ost4,
.ost5,
.ost6,
.ost7,
.ost-final {
    font-family: "Archivo", sans-serif !important;
}

.ost-title,
.ost-p2-title,
.ost3-title,
.ost4-title,
.ost4-item-title,
.ost5-title,
.ost6-title,
.ost6-box,
.ost7-title,
.ost7-copy,
.ost7-social,
.ost-final-title,
.ost-final-note,
.ost-final-name {
    font-family: "Archivo Black", sans-serif !important;
    font-weight: 400 !important;
}
</style>

<div class="ost-home">

    <!-- PARTE SUPERIORE -->

    <div class="ost-top">

        <div class="ost-orange"></div>

        <div class="ost-cream"></div>
        <div class="ost-photo-people-window">

    <img
        class="ost-photo-people"
        src="https://isolanoostinato.com/wp-content/uploads/2026/08/foto-gente-home.png"
        alt=""
    >

</div>
<div class="ost-photo-sea-window">

    <img
        class="ost-photo-sea"
        src="https://isolanoostinato.com/wp-content/uploads/2026/08/Senza-titolo-8.png"
        alt=""
    >

</div>

        <div class="ost-magenta"></div>
        <div class="ost-photo-magenta-window">

    <img
        class="ost-photo-magenta"
        src="https://isolanoostinato.com/wp-content/uploads/2026/08/foto-sopra-magenta.png"
        alt=""
    >

</div>
        

        <div class="ost-terra"></div>

        <div class="ost-beige"></div>
        <div class="ost-photo-window">

    <img
        class="ost-photo-1"
        src="https://isolanoostinato.com/wp-content/uploads/2026/08/foto-isolo-sotto-beige.png"
        alt=""
    >

</div>

        <div class="ost-line-1"></div>

        <div class="ost-line-2"></div>

    </div>


    <!-- TITOLO -->

    <h1 class="ost-title">

        <span class="ost-capri">
            CAPRI.
        </span>

        <span class="ost-ostinata">
            OSTINATA.
        </span>

    </h1>


    <!-- TESTO -->

    <p class="ost-text">
        L’identità di un’isola raccontata<br>
        attraverso le persone che continuano<br>
        a custodirla.
    </p>


    <!-- PARTE INFERIORE -->

    <div class="ost-bottom"></div>

    <div class="ost-bottom-right"></div>

    <div class="ost-blue"></div>


    <div class="ost-yellow">

        <span class="ost-yellow-text">
            TERRA · GESTO · COMUNITÀ
        </span>

    </div>
    
<div class="ost-logos">

    <img
        class="ost-logo ost-logo-1"
        src="https://isolanoostinato.com/wp-content/uploads/2026/08/logo-wib.png"
        alt="Walking in Beauty"
    >

    <img
        class="ost-logo ost-logo-2"
        src="https://isolanoostinato.com/wp-content/uploads/2026/08/isolano-ostinato.png"
        alt="Isolano Ostinato"
    >

</div>
</div>
<!-- ========================================================
     PAGINA 2
     ======================================================== -->

<section class="ost-p2" id="ost-page-2">

    <!-- SFONDI -->

    <div class="ost-p2-orange"></div>

    <div class="ost-p2-blue"></div>


    <!-- FOTO MARE -->

    <div class="ost-p2-sea">

        <img
            src="https://isolanoostinato.com/wp-content/uploads/2026/08/Senza-titolo-9.png"
            alt=""
        >

    </div>


    <!-- TESTI -->

    <div class="ost-p2-kicker">
        MANIFESTO / CAPRI
    </div>


    <h2 class="ost-p2-title">
        PER STARE SU<br>
        UN’ISOLA<br>
        BISOGNA<br>
        ESSERE<br>
        OSTINATI.
    </h2>


    <div class="ost-p2-question">
        WHAT TURNS AN ISLAND INTO A LEGACY?
    </div>

</section>
<script>
document.addEventListener("DOMContentLoaded", function () {

    const pagina2 = document.querySelector(".ost-p2");

    if (!pagina2) return;

    const observer = new IntersectionObserver(
        function(entries) {

            entries.forEach(function(entry) {

                if (entry.isIntersecting) {
                    pagina2.classList.add("is-visible");
                    observer.unobserve(pagina2);
                }

            });

        },
        {
            threshold: 0.25
        }
    );

    observer.observe(pagina2);

});
</script>
<!-- ==================================================
     PAGINA 3
     ================================================== -->

<section class="ost3">

    <!-- TERRA -->

<div class="ost3-col ost3-terra">

    <div class="ost3-label">
        01 · CIO CHE RICEVIAMO
    </div>

    <h2 class="ost3-title">
        TERRA
    </h2>

    <p class="ost3-copy">
        Ripida, scarsa, aspra. Insegna il<br>
        limite, la pazienza, il rispetto.
    </p>

    <div class="ost3-photo ost3-photo-1">
        <img
            src="https://isolanoostinato.com/wp-content/uploads/2026/08/foto-pagina-3_Tavola-disegno-1-copia.png"
            alt=""
        >
    </div>

    </div>


    <!-- GESTO -->

    <div class="ost3-col ost3-gesto">

        <div class="ost3-label">
            02 · CIO CHE FACCIAMO
        </div>

        <h2 class="ost3-title">
            GESTO
        </h2>

        <p class="ost3-copy">
            Mani, tempo, fatica. Gesti che<br>
            esistono perché qualcuno sceglie<br>
            ancora di compierli.
        </p>
        <div class="ost3-photo ost3-photo-2">
    <img
        src="https://isolanoostinato.com/wp-content/uploads/2026/08/foto-pagina-3-01.png"
        alt=""
    >
</div>

    </div>


    <!-- COMUNITÀ -->

    <div class="ost3-col ost3-comunita">

        <div class="ost3-label">
            03 · CIO CHE TIENE INSIEME
        </div>

        <h2 class="ost3-title">
            COMUNITÀ
        </h2>

        <p class="ost3-copy">
            Chi resta. Chi torna. Chi coltiva. Chi<br>
            costruisce. Chi racconta. Chi<br>
            tramanda.
        </p>
        <div class="ost3-photo ost3-photo-2">
    <img
        src="https://isolanoostinato.com/wp-content/uploads/2026/08/foto-pagina-3_Tavola-disegno-1-copia-2.png"
        alt=""
    >
</div>

    </div>

</section>

<script>
(function () {

    function startPage3() {

        const page3 = document.querySelector('.ost3');

        if (!page3) return;


        const observer = new IntersectionObserver(function(entries) {

            entries.forEach(function(entry) {

                if (entry.isIntersecting) {

                    entry.target.classList.add('is-visible');

                    observer.unobserve(entry.target);
                }

            });

        }, {
            threshold: 0.20
        });


        observer.observe(page3);
    }


    if (document.readyState === 'loading') {

        document.addEventListener('DOMContentLoaded', startPage3);

    } else {

        startPage3();

    }

})();

</script>
<!-- ==================================================
     PAGINA 4 — CRONACHE OSTINATE
     ================================================== -->

<section class="ost4">

    <!-- FOTO -->

    <div class="ost4-image">
        <img
            src="https://isolanoostinato.com/wp-content/uploads/2026/08/cronache-ostinate.png"
            alt=""
        >
    </div>


    <!-- CONTENUTO DESTRA -->

    <div class="ost4-content">

        <div class="ost4-kicker">
            ARCHIVIO DELL’ISOLA
        </div>


        <h2 class="ost4-title">
            CRONACHE<br>
            OSTINATE
        </h2>


        <div class="ost4-items">


            <!-- 01 -->

            <div class="ost4-item">

                <div class="ost4-square ost4-square-magenta"></div>

                <div>
                    <h3 class="ost4-item-title">
                        LA SETTEMBRATA<br>
                        ANACAPRESE
                    </h3>

                    <p class="ost4-item-copy">
                        Tutto cominciò da un grazie. Arte e<br>
                        terra alla stessa tavola.
                    </p>
                </div>

            </div>


            <!-- 02 -->

            <div class="ost4-item">

                <div class="ost4-square ost4-square-green"></div>

                <div>
                    <h3 class="ost4-item-title">
                        IL LAVORO CHE<br>
                        RESTA
                    </h3>

                    <p class="ost4-item-copy">
                        Gesti quotidiani che raccontano l’isola<br>
                        meglio di qualsiasi cartolina.
                    </p>
                </div>

            </div>


            <!-- 03 -->

            <div class="ost4-item">

                <div class="ost4-square ost4-square-brown"></div>

                <div>
                    <h3 class="ost4-item-title">
                        LE PERSONE
                    </h3>

                    <p class="ost4-item-copy">
                        Volti, mani e storie di chi continua a<br>
                        tenere viva Capri.
                    </p>
                </div>

            </div>


        </div>

    </div>

</section>

<!-- ==================================================
     PAGINA 5 — CHI RESTA
     ================================================== -->

<section class="ost5">

    <div class="ost5-kicker">
        COMUNITÀ / PERSONE
    </div>


    <h2 class="ost5-title">
        CHI RESTA.<br>
        CHI TORNA.<br>
        CHI CONTINUA.
    </h2>


    <p class="ost5-copy">
        Un’isola è fatta delle persone che decidono ogni<br>
        giorno di non lasciarla diventare soltanto<br>
        un’immagine.
    </p>


    <div class="ost5-photo">

        <img
            src="https://isolanoostinato.com/wp-content/uploads/2026/08/foto-franco.png"
            alt=""
        >

    </div>

</section>
<script>
(function () {

    function startPage5() {

        const page5 = document.querySelector('.ost5');

        if (!page5) return;

        const observer5 = new IntersectionObserver(function(entries) {

            entries.forEach(function(entry) {

                if (entry.isIntersecting) {

                    entry.target.classList.add('is-visible');
                    observer5.unobserve(entry.target);

                }

            });

        }, {
            threshold: 0.20
        });

        observer5.observe(page5);
    }


    if (document.readyState === 'loading') {

        document.addEventListener('DOMContentLoaded', startPage5);

    } else {

        startPage5();

    }

})();
</script>
<!-- ==================================================
     PAGINA 6 — PRIMA DEL VINO
     ================================================== -->

<section class="ost6">

    <!-- FONDO ROSA SINISTRO -->

    <div class="ost6-left"></div>


    <!-- FOTO -->

    <div class="ost6-photo">

        <img
            src="https://isolanoostinato.com/wp-content/uploads/2026/08/pag-6-01.jpg"
            alt=""
        >

    </div>


    <!-- RETTANGOLO ROSA TRASPARENTE -->

    <div class="ost6-overlay"></div>


    <!-- TESTI -->

    <div class="ost6-kicker">
        WINE / VINI MIGLIERA
    </div>


    <h2 class="ost6-title">
        PRIMA DEL<br>
        VINO<br>
        C’È TUTTO<br>
        IL RESTO.
    </h2>


    <p class="ost6-copy">
        Prima vengono la terra,<br>
        i terrazzamenti, i muri, le mani,<br>
        il tempo. Il vino arriva dopo.
    </p>


    <div class="ost6-box">
        NON È UNA STORIA DI PRODOTTO.<br>
        È UNA STORIA DI OSTINAZIONE.
    </div>

</section>
<script>
(function () {

    function startPage6() {

        const page6 = document.querySelector('.ost6');

        if (!page6) return;

        const observer6 = new IntersectionObserver(function(entries) {

            entries.forEach(function(entry) {

                if (entry.isIntersecting) {

                    entry.target.classList.add('is-visible');

                    observer6.unobserve(entry.target);

                }

            });

        }, {
            threshold: 0.20
        });

        observer6.observe(page6);
    }


    if (document.readyState === 'loading') {

        document.addEventListener('DOMContentLoaded', startPage6);

    } else {

        startPage6();

    }

})();

</script>
<!-- ==================================================
     PAGINA 7 — OLTRE LA CARTOLINA
     ================================================== -->

<section class="ost7">

    <!-- LOGO / ILLUSTRAZIONE -->

    <div class="ost7-logo">

        <img
            src="https://isolanoostinato.com/wp-content/uploads/2026/08/Senza-titolo-14.jpg"
            alt="Isolano Ostinato"
        >

    </div>


    <!-- TITOLO -->

    <h2 class="ost7-title">
        CAPRI,<br>
        OLTRE LA<br>
        CARTOLINA.
    </h2>


    <!-- TESTO -->

    <div class="ost7-copy">
        Ci sono storie che<br>
        meritano di essere<br>
        custodite.
    </div>


    <!-- SOCIAL -->

    <div class="ost7-social">
        Seguici su @isolanoostinato
    </div>


    <!-- FASCIA BLU -->

    <div class="ost7-bottom"></div>

</section>
<!-- ==================================================
     PAGINA FINALE
     ================================================== -->

<section class="ost-final">

    <div class="ost-final-footer"></div>


    <div class="ost-final-kicker">
        ISOLANO OSTINATO · CAPRI
    </div>


    <h2 class="ost-final-title">

        <span class="ost-final-line ost-final-line-1">
            NON TUTTO QUELLO CHE
        </span>

        <span class="ost-final-line ost-final-line-2">
            VALE LA PENA FARE
        </span>

        <span class="ost-final-line ost-final-line-3">
            CONVIENE.
        </span>

    </h2>


    <div class="ost-final-note">
        FORSE È PROPRIO PER QUESTO CHE CONTINUIAMO.
    </div>


    <div class="ost-final-name">
        ISOLANO<br>
        OSTINATO
    </div>


    <div class="ost-final-links">
        INSTAGRAM<br>
        CONTATTI<br>
        CAPRI
    </div>

</section>
<script>
(function () {

    function startFinalPage() {

        const finalPage = document.querySelector('.ost-final');

        if (!finalPage) return;

        const observerFinal = new IntersectionObserver(function(entries) {

            entries.forEach(function(entry) {

                if (entry.isIntersecting) {

                    entry.target.classList.add('is-visible');

                    observerFinal.unobserve(entry.target);
                }

            });

        }, {
            threshold: 0.25
        });

        observerFinal.observe(finalPage);
    }


    if (document.readyState === 'loading') {

        document.addEventListener('DOMContentLoaded', startFinalPage);

    } else {

        startFinalPage();

    }

})();
</script>/* End custom CSS */