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

   ANĀHATA — MEDITATION

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



:root {

    --med-green: #087340;

    --med-green-dark: #075335;

    --med-green-soft: #dfeee3;

    --med-paper: #fffef9;

    --med-cream: #f5f3ea;

    --med-pale: #edf5ee;

    --med-ink: #26332c;

    --med-text: #3f443f;

    --med-muted: #777d77;

    --med-line: rgba(18, 78, 50, .20);

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

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

}





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

   RESET

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



* {

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



html,

body,

form {

    margin: 0;

    padding: 0;

    width: 100%;

}



body {

    background: var(--med-paper);

    color: var(--med-text);

    font-family: var(--sans);

    font-size: 16px;

    line-height: 1.65;

}



img {

    display: block;

    max-width: 100%;

}



a {

    color: inherit;

}



.meditation-wrap {

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

    margin-inline: auto;

}





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

   HERO

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



.meditation-header {

    position: relative;

    min-height: 88vh;

    overflow: visible;

    background: #203528;

    color: #fff;

}



.hero-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}



.hero-shade {

    position: absolute;

    inset: 0;

    background: linear-gradient( 90deg, rgba(7, 24, 15, .78) 0%, rgba(7, 24, 15, .54) 32%, rgba(7, 24, 15, .15) 62%, rgba(7, 24, 15, .05) 100% );

}





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

   HEADER / MENU

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



.topbar {

    position: relative;

    z-index: 20;

    width: min(1380px, calc(100% - 60px));

    margin-inline: auto;

    min-height: 100px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

}



.brand {

    display: flex;

    flex-direction: column;

    color: #fff;

    text-decoration: none;

    white-space: nowrap;

}



.brand-name {

    font-family: var(--serif);

    font-size: clamp(23px, 2vw, 31px);

    letter-spacing: .20em;

    line-height: 1.1;

}



.brand-sub {

    margin-top: 7px;

    font-size: 8px;

    letter-spacing: .16em;

    opacity: .85;

}





/* MENU */



.main-nav {

    display: flex;

    align-items: center;

    gap: clamp(15px, 1.8vw, 29px);

}



    .main-nav > a,

    .menu-link {

        position: relative;

        display: inline-flex;

        align-items: center;

        gap: 5px;

        padding: 10px 0;

        color: #fff;

        text-decoration: none;

        font-size: 14px;

        font-weight: 500;

        white-space: nowrap;

        transition: opacity .2s ease, color .2s ease;

    }



        .main-nav > a:hover,

        .menu-link:hover {

            opacity: .75;

        }



        .menu-link.active::after {

            content: "";

            position: absolute;

            left: 0;

            right: 0;

            bottom: 3px;

            height: 2px;

            background: #7bc88e;

        }



.arrow {

    position: relative;

    top: -1px;

    font-size: 15px;

}





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

   DROPDOWN MEDITATION

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



.menu-item {

    position: relative;

}



.dropdown {

    position: absolute;

    top: calc(100% - 1px);

    left: -20px;

    z-index: 50;

    width: 235px;

    padding: 10px 0;

    background: rgba(255, 254, 249, .98);

    box-shadow: 0 16px 40px rgba(0, 0, 0, .18);

    border-radius: 3px;

    opacity: 0;

    visibility: hidden;

    transform: translateY(8px);

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

}



.menu-item:hover .dropdown,

.menu-item:focus-within .dropdown {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.dropdown a {

    display: block;

    padding: 10px 20px;

    color: var(--med-green-dark);

    text-decoration: none;

    font-size: 13px;

    line-height: 1.4;

    transition: background .18s ease, padding-left .18s ease;

}



    .dropdown a:hover {

        padding-left: 24px;

        background: var(--med-pale);

    }





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

   HERO TEXT

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



.hero-content {

    position: relative;

    z-index: 5;

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

    margin-inline: auto;

    padding-top: clamp(110px, 17vh, 190px);

    padding-bottom: 100px;

}



    .hero-content h1 {

        margin: 0;

        font-family: var(--serif);

        font-size: clamp(56px, 6.2vw, 96px);

        font-weight: 400;

        line-height: .95;

        letter-spacing: -.035em;

    }



.hero-subtitle {

    margin: 20px 0 0;

    font-family: var(--serif);

    font-size: clamp(27px, 2.6vw, 42px);

    line-height: 1.15;

    color: #b9d9ad;

}



.hero-line {

    display: block;

    width: 58px;

    height: 3px;

    margin: 27px 0 25px;

    background: #62b875;

}



.hero-text {

    margin: 0;

    font-size: clamp(15px, 1.2vw, 18px);

    line-height: 1.7;

    color: rgba(255, 255, 255, .94);

}





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

   INTRO

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



.intro-section {

    padding: clamp(75px, 8vw, 125px) 0;

}



.intro-grid {

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr);

    gap: 8vw;

    align-items: center;

}



.intro-copy h2,

.active-copy h2,

.osho-copy h2 {

    margin: 0 0 26px;

    color: var(--med-green);

    font-family: var(--serif);

    font-size: clamp(36px, 3.4vw, 54px);

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -.025em;

}



.intro-copy p {

    margin: 0 0 18px;

}





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

   LEAF QUOTE

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



.leaf-card {

    position: relative;

    min-height: 510px;

    overflow: hidden;

    border-radius: 12px;

    background: var(--med-pale);

}



    .leaf-card > img {

        position: absolute;

        inset: 0;

        width: 100%;

        height: 100%;

        object-fit: cover;

    }



.leaf-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient( 90deg, rgba(255,255,255,.04) 0%, rgba(245,248,237,.25) 45%, rgba(245,248,237,.88) 75%, rgba(245,248,237,.96) 100% );

}



.leaf-card blockquote {

    position: absolute;

    z-index: 2;

    top: 50%;

    right: 7%;

    width: 44%;

    margin: 0;

    transform: translateY(-50%);

}



    .leaf-card blockquote p {

        margin: 0 0 24px;

        color: var(--med-green-dark);

        font-family: var(--serif);

        font-size: clamp(24px, 2.2vw, 35px);

        font-style: italic;

        line-height: 1.35;

    }



.leaf-card cite {

    display: block;

    color: var(--med-green-dark);

    font-family: var(--sans);

    font-size: 13px;

    font-style: normal;

    font-weight: 600;

    letter-spacing: .08em;

}



.quote-line {

    display: block;

    width: 55px;

    height: 2px;

    margin-top: 16px;

    background: var(--med-green);

}





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

   ACTIVE MEDITATIONS

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



.active-section {

    padding: clamp(65px, 6vw, 95px) 0;

    background: linear-gradient( 90deg, #eef6ee 0%, #e3f0e5 50%, #edf5ed 100% );

}



.active-grid {

    display: grid;

    grid-template-columns: .72fr 1.65fr;

    gap: 7vw;

    align-items: center;

}



.meditator-logo {

    position: relative;

    color: #161b18;

    font-family: var(--serif);

    text-align: center;

    line-height: .9;

}



.logo-small {

    display: block;

    margin-bottom: 5px;

    font-size: 21px;

    font-weight: 700;

}



.meditator-logo strong {

    display: block;

    font-size: clamp(27px, 2.5vw, 39px);

    line-height: .9;

}



.meditator-word {

    display: inline-block;

    margin-top: 7px;

    color: #1377a7;

    font-family: var(--serif);

    font-size: clamp(30px, 3vw, 48px);

    font-style: italic;

    font-weight: 700;

}



.tm {

    position: relative;

    top: -17px;

    margin-left: 3px;

    font-family: var(--sans);

    font-size: 10px;

}



.active-copy h2 {

    margin-bottom: 15px;

    font-size: clamp(31px, 3vw, 46px);

}



.active-copy p {

    max-width: 760px;

    margin: 0 0 25px;

}





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

   BUTTONS

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



.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 45px;

    padding: 10px 25px;

    border-radius: 999px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: transform .18s ease, background .18s ease, color .18s ease;

}



    .button:hover {

        transform: translateY(-2px);

    }



.button-green {

    color: #fff;

    background: var(--med-green);

}



    .button-green:hover {

        background: var(--med-green-dark);

    }



.button-outline {

    color: var(--med-green-dark);

    border: 1px solid var(--med-green-dark);

    background: transparent;

}



    .button-outline:hover {

        color: #fff;

        background: var(--med-green-dark);

    }





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

   OSHO

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



.osho-section {

    padding: clamp(80px, 8vw, 125px) 0 55px;

}



.osho-grid {

    display: grid;

    grid-template-columns: minmax(280px, .68fr) minmax(0, 1.55fr);

    gap: 7vw;

    align-items: center;

}



.osho-photo-wrap {

    overflow: hidden;

    aspect-ratio: 4 / 3;

    border-radius: 9px;

    background: #e8e5db;

}



.osho-photo {

    width: 100%;

    height: 100%;

    object-fit: cover;

    /*

       La foto è verticale:

       questa posizione mantiene il volto ben visibile.

    */

    object-position: center 28%;

}



.osho-copy h2 {

    margin-bottom: 4px;

}



.osho-copy h3 {

    margin: 0 0 24px;

    color: #3ca25c;

    font-family: var(--serif);

    font-size: clamp(23px, 2vw, 31px);

    font-weight: 400;

}



.osho-copy p {

    margin: 0 0 18px;

}





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

   PATH CARDS

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



.paths-section {

    padding: 15px 0 clamp(80px, 8vw, 120px);

}



.paths-grid {

    display: grid;

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

    gap: 18px;

}



.path-card {

    overflow: hidden;

    border-radius: 8px;

    background: var(--med-pale);

    color: var(--med-green-dark);

    text-decoration: none;

    transition: transform .2s ease, box-shadow .2s ease;

}



    .path-card:hover {

        transform: translateY(-5px);

        box-shadow: 0 15px 35px rgba(21, 72, 46, .12);

    }



.path-image {

    aspect-ratio: 16 / 9;

    overflow: hidden;

}



    .path-image img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        transition: transform .45s ease;

    }



.path-card:hover .path-image img {

    transform: scale(1.035);

}



.path-info {

    min-height: 95px;

    padding: 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}



    .path-info > span:first-child {

        font-size: 15px;

        font-weight: 600;

        line-height: 1.35;

    }



.path-arrow {

    flex: 0 0 auto;

    font-size: 25px;

    font-weight: 300;

    transition: transform .2s ease;

}



.path-card:hover .path-arrow {

    transform: translateX(4px);

}





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

   CLOSING QUOTE

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



.closing-section {

    position: relative;

    min-height: 430px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}



.closing-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}



.closing-overlay {

    position: absolute;

    inset: 0;

    background: rgba(239, 246, 237, .60);

}



.closing-content {

    position: relative;

    z-index: 2;

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

    text-align: center;

    color: var(--med-green-dark);

}



    .closing-content blockquote {

        margin: 0;

        font-family: var(--serif);

        font-size: clamp(27px, 3vw, 43px);

        font-style: italic;

        line-height: 1.4;

    }



.closing-author {

    display: block;

    margin-top: 27px;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .08em;

}



.closing-line {

    display: block;

    width: 58px;

    height: 2px;

    margin: 15px auto 0;

    background: var(--med-green);

}





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

   FOOTER

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



.meditation-footer {

    padding: 42px 0;

    color: rgba(255,255,255,.78);

    background: #163b2b;

}



.footer-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}



.footer-brand {

    display: block;

    color: #fff;

    font-family: var(--serif);

    font-size: 22px;

    letter-spacing: .17em;

}



.footer-sub {

    display: block;

    margin-top: 5px;

    font-size: 8px;

    letter-spacing: .13em;

}



.footer-inner p {

    margin: 0;

    font-size: 12px;

    letter-spacing: .05em;

}





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

   TABLET

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



@media (max-width: 1050px) {



    .topbar {

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

        align-items: flex-start;

        padding-top: 25px;

    }



    .main-nav {

        gap: 14px;

    }



        .main-nav > a,

        .menu-link {

            font-size: 13px;

        }



    .intro-grid {

        gap: 5vw;

    }



    .paths-grid {

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

    }

}





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

   SMALL TABLET / MOBILE MENU

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



@media (max-width: 850px) {



    .meditation-header {

        min-height: auto;

    }



    .topbar {

        position: relative;

        width: calc(100% - 34px);

        padding: 22px 0 0;

        display: block;

    }



    .brand {

        width: fit-content;

    }



    .main-nav {

        margin-top: 22px;

        display: flex;

        flex-wrap: wrap;

        gap: 2px 18px;

    }



        .main-nav > a,

        .menu-link {

            font-size: 13px;

        }



    .dropdown {

        left: 0;

    }



    .hero-content {

        padding-top: 110px;

        padding-bottom: 100px;

    }



    .hero-image {

        object-position: 62% center;

    }



    .intro-grid,

    .active-grid,

    .osho-grid {

        grid-template-columns: 1fr;

    }



    .intro-grid,

    .osho-grid {

        gap: 55px;

    }



    .leaf-card {

        min-height: 470px;

    }



    .active-grid {

        gap: 45px;

    }



    .meditator-logo {

        max-width: 420px;

        margin-inline: auto;

    }



    .osho-photo-wrap {

        width: min(100%, 520px);

    }

}





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

   SMARTPHONE

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



@media (max-width: 600px) {



    body {

        font-size: 15px;

    }



    .meditation-wrap {

        width: calc(100% - 34px);

    }





    /* HERO */



    .meditation-header {

        min-height: 720px;

    }



    .hero-shade {

        background: linear-gradient( 180deg, rgba(7, 24, 15, .72) 0%, rgba(7, 24, 15, .36) 35%, rgba(7, 24, 15, .70) 100% );

    }



    .hero-image {

        object-position: 68% center;

    }



    .brand-name {

        font-size: 22px;

    }





    /* mobile navigation */



    .main-nav {

        gap: 0 15px;

        line-height: 1.25;

    }



        .main-nav > a,

        .menu-link {

            padding: 7px 0;

            font-size: 12px;

        }



    .dropdown {

        width: 215px;

    }



    .hero-content {

        position: absolute;

        left: 17px;

        right: 17px;

        bottom: 65px;

        width: auto;

        padding: 0;

    }



        .hero-content h1 {

            font-size: clamp(48px, 14vw, 67px);

        }



    .hero-subtitle {

        font-size: 28px;

    }





    /* INTRO */



    .intro-section {

        padding: 70px 0;

    }



    .intro-copy h2,

    .active-copy h2,

    .osho-copy h2 {

        font-size: 37px;

    }





    /* LEAF */



    .leaf-card {

        min-height: 500px;

    }



    .leaf-overlay {

        background: linear-gradient( 180deg, rgba(255,255,255,.05) 0%, rgba(244,248,239,.25) 42%, rgba(244,248,239,.93) 75%, rgba(244,248,239,.98) 100% );

    }



    .leaf-card blockquote {

        top: auto;

        right: 28px;

        bottom: 35px;

        left: 28px;

        width: auto;

        transform: none;

    }



        .leaf-card blockquote p {

            font-size: 27px;

        }





    /* ACTIVE */



    .active-section {

        padding: 65px 0;

    }





    /* OSHO */



    .osho-section {

        padding-top: 75px;

    }



    .osho-photo-wrap {

        aspect-ratio: 1 / 1;

    }





    /* CARDS */



    .paths-grid {

        grid-template-columns: 1fr;

    }



    .path-image {

        aspect-ratio: 16 / 8;

    }



    .path-info {

        min-height: 80px;

    }





    /* CLOSING */



    .closing-section {

        min-height: 390px;

    }



    .closing-content blockquote {

        font-size: 27px;

    }





    /* FOOTER */



    .footer-inner {

        display: block;

    }



        .footer-inner p {

            margin-top: 22px;

        }

}





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

   VERY SMALL PHONE

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



@media (max-width: 390px) {



    .main-nav {

        gap: 0 12px;

    }



        .main-nav > a,

        .menu-link {

            font-size: 11px;

        }



    .hero-content h1 {

        font-size: 47px;

    }



    .hero-subtitle {

        font-size: 25px;

    }

}





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

   LOGO - ROOT DEFAULT ONLY

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



.root-logo {

    display: block;

    width: auto;

    height: 48px;

    object-fit: contain;

}