/* ==========================================================

   YOGA

   Pagina standalone

   Basata sulla pagina originale salvata

   ========================================================== */



:root {

    --yoga-ink: #25263a;

    --yoga-paper: #fbfaf6;

    --yoga-cream: #f0e8d8;

    --yoga-indigo: #212a4b;

    --yoga-terracotta: #b65d42;

    --yoga-gold: #d5aa5e;

    --yoga-line: rgba(37, 38, 58, .16);

}





/* ==========================================================

   BASE

   ========================================================== */



html {

    scroll-behavior: smooth;

}





body {

    margin: 0;

    background: var(--yoga-paper);

    color: var(--yoga-ink);

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

    font-size: 1.06rem;

    font-weight: 400;

    line-height: 1.72;

}





#form1 {

    width: 100%;

    margin: 0;

    padding: 0;

}





* {

    box-sizing: border-box;

}





img {

    display: block;

}





.yoga-wrap {

    width: min(1180px, calc(100% - 40px));

    margin-inline: auto;

}





.yoga-eyebrow {

    font-size: .76rem;

    font-weight: 600;

    letter-spacing: .16em;

    text-transform: uppercase;

}





/* ==========================================================

   HEADER

   ========================================================== */



.yoga-header {

    position: absolute;

    z-index: 20;

    width: 100%;

    padding: 24px 0;

    color: #fff;

}





.yoga-nav {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

}





.yoga-brand {

    flex: 0 0 auto;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 1.5rem;

    line-height: 1;

    text-decoration: none;

}





    .yoga-brand small {

        display: block;

        margin-top: 5px;

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

        font-size: .58rem;

        font-weight: 500;

        line-height: 1.1;

        letter-spacing: .12em;

        text-transform: uppercase;

        opacity: .72;

    }





/* ==========================================================

   MENU SOPRA LA HERO

   ========================================================== */



.yoga-header .main-nav {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: clamp(17px, 1.35vw, 26px);

}





    .yoga-header .main-nav > a,

    .yoga-header .menu-link {

        position: relative;

        color: #fff;

        /*font-size: clamp(12px, 0.75vw, 15px);*/

        font-size: clamp(14px, 0.9vw, 18px);

        text-decoration: none;

        white-space: nowrap;

        opacity: .80;

    }





        .yoga-header .main-nav > a:hover,

        .yoga-header .menu-link:hover,

        .yoga-header .menu-link.active {

            color: #fff;

            opacity: 1;

        }





            .yoga-header .menu-link.active::after {

                content: "";

                position: absolute;

                left: 0;

                right: 0;

                bottom: -7px;

                height: 1px;

                background: rgba(255, 255, 255, .85);

            }





/* DROPDOWN */



.yoga-header .menu-item {

    position: relative;

}





.yoga-header .dropdown {

    position: absolute;

    top: calc(100% + 15px);

    left: 0;

    z-index: 40;

    min-width: 205px;

    padding: 9px 0;

    background: rgba(251, 250, 246, .98);

    box-shadow: 0 14px 35px rgba(0, 0, 0, .14);

    opacity: 0;

    visibility: hidden;

    transform: translateY(7px);

    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;

}





    .yoga-header .dropdown a {

        display: block;

        padding: 9px 17px;

        color: var(--yoga-ink);

        font-size: 13px;

        text-decoration: none;

        white-space: nowrap;

    }





        .yoga-header .dropdown a:hover {

            background: rgba(33, 42, 75, .08);

        }





.yoga-header .menu-item:hover .dropdown,

.yoga-header .menu-item:focus-within .dropdown {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}





/* ==========================================================

   HERO

   ========================================================== */



.yoga-hero {

    position: relative;

    min-height: 88vh;

    display: grid;

    align-items: end;

    overflow: hidden;

    color: #fff;

    background: var(--yoga-indigo);

}





    .yoga-hero > img {

        position: absolute;

        inset: 0;

        width: 100%;

        height: 100%;

        object-fit: cover;

    }





    .yoga-hero::after {

        content: "";

        position: absolute;

        inset: 0;

        background: linear-gradient( 90deg, rgba(20, 25, 49, .92), rgba(20, 25, 49, .45) 48%, rgba(20, 25, 49, .06) 78% ), linear-gradient( 0deg, rgba(15, 17, 31, .52), transparent 52% );

    }





.yoga-hero-copy {

    position: relative;

    z-index: 1;

    max-width: 1180px;

    padding-top: 150px;

    padding-bottom: 82px;

}





    .yoga-hero-copy > * {

        max-width: 680px;

    }





.yoga-hero h1 {

    margin: .18em 0;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(4rem, 10vw, 8rem);

    font-weight: 400;

    line-height: .88;

    letter-spacing: -.025em;

}





.yoga-hero p {

    max-width: 630px;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(1.4rem, 3vw, 2.3rem);

    line-height: 1.15;

}





.yoga-scroll {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 26px;

    color: #fff;

    font-size: .8rem;

    font-weight: 500;

    line-height: 1;

    letter-spacing: .12em;

    text-decoration: none;

    text-transform: uppercase;

}





    .yoga-scroll::after {

        content: "↓";

        font-size: 1.2rem;

    }





/* ==========================================================

   INTRO

   ========================================================== */



.yoga-intro {

    padding: 120px 0;

}





.yoga-intro-grid {

    display: grid;

    grid-template-columns: .75fr 1.25fr;

    gap: 8vw;

    align-items: start;

}





.yoga-lead {

    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(2rem, 4vw, 3.6rem);

    line-height: 1.14;

}





.yoga-intro-copy p:first-child {

    margin-top: 0;

    font-size: 1.28rem;

}





.yoga-dropcap::first-letter {

    float: left;

    padding: .12em .1em 0 0;

    color: var(--yoga-terracotta);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 4.8rem;

    line-height: .8;

}





/* ==========================================================

   TITOLI / DUE COLONNE

   ========================================================== */



.yoga-two {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8vw;

    align-items: center;

}





    .yoga-two h2,

    .yoga-history h2,

    .yoga-asana h2 {

        margin: 0 0 1.2rem;

        font-family: Georgia, "Times New Roman", serif;

        font-size: clamp(2rem, 4vw, 3.3rem);

        font-weight: 400;

        line-height: 1.06;

        letter-spacing: -.025em;

    }





.yoga-number {

    margin-bottom: 50px;

    padding-top: 16px;

    border-top: 1px solid var(--yoga-line);

    color: var(--yoga-terracotta);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 1.2rem;

}





/* ==========================================================

   IMMAGINI

   ========================================================== */



.yoga-photo img {

    width: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover;

}





.yoga-caption {

    margin-top: 12px;

    color: #6d685d;

    font-size: .74rem;

    letter-spacing: .08em;

    text-transform: uppercase;

}





/* ==========================================================

   01 - STORIA

   ========================================================== */



.yoga-history {

    padding: 115px 0;

    background: var(--yoga-cream);

}





/* ==========================================================

   LE OTTO MEMBRA

   ========================================================== */



.yoga-limbs {

    padding: 120px 0;

    background: var(--yoga-indigo);

    color: #fff;

}





.yoga-limbs-head {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8vw;

    margin-bottom: 65px;

}





    .yoga-limbs-head h2 {

        margin: 0;

        color: #fff;

        font-family: Georgia, "Times New Roman", serif;

        font-size: clamp(2.8rem, 6vw, 5.3rem);

        font-weight: 400;

        line-height: 1.06;

        letter-spacing: -.025em;

    }





    .yoga-limbs-head > p {

        margin-top: 0;

    }





.yoga-limbs-grid {

    display: grid;

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

    border-top: 1px solid rgba(255, 255, 255, .28);

}





.yoga-limb {

    min-height: 180px;

    padding: 28px 24px 20px 0;

    border-right: 1px solid rgba(255, 255, 255, .20);

}





    .yoga-limb:nth-child(4n) {

        border-right: 0;

    }





    .yoga-limb:nth-child(n+5) {

        border-top: 1px solid rgba(255, 255, 255, .20);

    }





    .yoga-limb strong {

        font-family: Georgia, "Times New Roman", serif;

        font-size: 1.7rem;

        font-weight: 400;

    }





    .yoga-limb span {

        display: block;

        margin-top: 8px;

        font-size: .92rem;

        opacity: .72;

    }





/* ==========================================================

   02 - ASANA

   ========================================================== */



.yoga-asana {

    padding: 120px 0;

}





.yoga-pull {

    margin: 45px 0 0;

    padding: 25px 0;

    border-top: 1px solid var(--yoga-line);

    color: var(--yoga-terracotta);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 1.5rem;

}





/* ==========================================================

   03 - RESPIRO

   ========================================================== */



.yoga-breath {

    padding: 120px 0;

    background: #d6b06a;

}





    .yoga-breath .yoga-two {

        align-items: start;

    }





    .yoga-breath h2 {

        margin: 0 0 1.2rem;

        font-family: Georgia, "Times New Roman", serif;

        font-size: clamp(2.7rem, 6vw, 5rem);

        font-weight: 400;

        line-height: 1.06;

        letter-spacing: -.025em;

    }





/* ==========================================================

   YOGA E AYURVEDA

   ========================================================== */



.yoga-ayurveda {

    padding: 120px 0;

}





.yoga-ayurveda-box {

    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 8vw;

    padding: 65px;

    border: 1px solid var(--yoga-line);

    background: #fff;

}





    .yoga-ayurveda-box h2 {

        margin: 0;

        font-family: Georgia, "Times New Roman", serif;

        font-size: clamp(2.5rem, 5vw, 4.5rem);

        font-weight: 400;

        line-height: 1.06;

        letter-spacing: -.025em;

    }





    .yoga-ayurveda-box p:first-child {

        margin-top: 0;

    }





    .yoga-ayurveda-box a {

        color: var(--yoga-terracotta);

        text-decoration-thickness: 1px;

        text-underline-offset: 4px;

    }





/* ==========================================================

   CITAZIONE

   ========================================================== */



.yoga-quote {

    max-width: 1000px;

    margin: 125px auto 25px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(2.4rem, 5vw, 4.8rem);

    font-weight: 400;

    line-height: 1.06;

    letter-spacing: -.025em;

    text-align: center;

}





.yoga-quote-sign {

    color: var(--yoga-terracotta);

    font-size: .8rem;

    letter-spacing: .16em;

    text-align: center;

    text-transform: uppercase;

}





/* ==========================================================

   FOOTER

   ========================================================== */



.yoga-footer {

    padding: 60px 0;

    background: #171b30;

    color: #fff;

}





.yoga-footer-row {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 30px;

}





    .yoga-footer-row p {

        max-width: 520px;

        margin: 0;

        opacity: .70;

    }





.yoga-top {

    color: #fff;

    font-size: .82rem;

    letter-spacing: .12em;

    text-decoration: none;

    text-transform: uppercase;

}





/* ==========================================================

   TABLET

   ========================================================== */



@media (max-width: 1050px) {



    .yoga-header .main-nav {

        gap: 14px;

    }





        .yoga-header .main-nav > a,

        .yoga-header .menu-link {

            font-size: 12px;

        }

}





/* ==========================================================

   MOBILE

   ========================================================== */



@media (max-width: 800px) {



    body {

        font-size: 1rem;

    }





    .yoga-wrap {

        width: min(calc(100% - 28px), 1180px);

    }





    /*

       Come nella versione Ayurveda:

       per ora nascondiamo la navigazione desktop.

       L'hamburger mobile lo gestiamo separatamente.

    */



    .yoga-header .main-nav {

        display: none;

    }





    .yoga-hero {

        min-height: 760px;

    }





    .yoga-hero-copy {

        padding-bottom: 55px;

    }





    .yoga-intro,

    .yoga-history,

    .yoga-limbs,

    .yoga-asana,

    .yoga-breath,

    .yoga-ayurveda {

        padding: 78px 0;

    }





    .yoga-intro-grid,

    .yoga-two,

    .yoga-limbs-head,

    .yoga-ayurveda-box {

        grid-template-columns: 1fr;

        gap: 38px;

    }





    .yoga-number {

        margin-bottom: 28px;

    }





    /* OTTO MEMBRA */



    .yoga-limbs-grid {

        grid-template-columns: 1fr 1fr;

    }





    .yoga-limb:nth-child(4n) {

        border-right: 1px solid rgba(255, 255, 255, .20);

    }





    .yoga-limb:nth-child(2n) {

        border-right: 0;

    }





    .yoga-limb:nth-child(n+3) {

        border-top: 1px solid rgba(255, 255, 255, .20);

    }





    /* YOGA + AYURVEDA */



    .yoga-ayurveda-box {

        padding: 34px 28px;

    }





    /* CITAZIONE */



    .yoga-quote {

        margin-top: 80px;

    }





    /* FOOTER */



    .yoga-footer-row {

        display: block;

    }





    .yoga-top {

        display: inline-block;

        margin-top: 30px;

    }

}





/* ==========================================================

   TELEFONI PICCOLI

   ========================================================== */



@media (max-width: 520px) {



    .yoga-limbs-grid {

        grid-template-columns: 1fr;

    }





    .yoga-limb,

    .yoga-limb:nth-child(2n),

    .yoga-limb:nth-child(4n) {

        min-height: auto;

        padding: 25px 0;

        border-right: 0;

        border-top: 0;

        border-bottom: 1px solid rgba(255, 255, 255, .20);

    }





        .yoga-limb:last-child {

            border-bottom: 0;

        }

}