:root{
    --de-bg:#fcfcfb;
    --de-bg-soft:#f6f6f4;
    --de-text:#1f2937;
    --de-text-soft:#6b7280;
    --de-accent:var(--ded-orange);
    --de-max-width:1400px;
    --de-shadow:0 20px 60px rgba(0,0,0,.08);
}

html{
    scroll-behavior:smooth;
}

body.de-homepage{
    margin:0;
    background:var(--de-bg);
    color:var(--de-text);
    font-family:Inter,system-ui,sans-serif;
    line-height:1.6;
    overflow: hidden; /* Disables both vertical and horizontal scrolling */
    height: 100%;     /* Optional: Ensures the block respects the full layout height */
}

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

section{
    scroll-margin-top:40px;
}

/* ========================================
   NAVIGATION
======================================== */

.de-nav{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    backdrop-filter:blur(12px);
    background:rgba(252,252,251,.85);
    border-bottom:1px solid rgba(0,0,0,.05);
}

.de-nav-inner{
    max-width:var(--de-max-width);
    margin:0 auto;
    padding:1rem 2rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.de-logo{
    color:var(--de-text);
    text-decoration:none;
    font-weight:700;
    font-size:1.1rem;
}

.de-nav nav{
    display:flex;
    gap:2rem;
}

.de-nav nav a{
    color:var(--de-text-soft);
    font-weight: 600;
    text-decoration:none;
    transition:.3s;
}

.de-nav nav a:hover{
    color:var(--de-accent);
}

.de-cta{
    display:inline-block;
    margin-top:0.5rem;
    color:var(--de-accent);
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.de-cta:hover{
    transform:translateX(6px);
}

/* ========================================
   HERO
======================================== */

.de-hero{
    max-width:var(--de-max-width);
    margin:0 auto;
    padding:7.5rem 2rem 1rem;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5rem;
    align-items:center;
}

.de-hero-content h1{
    margin:0;
    color:var(--de-accent);
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size:1rem;
}

.de-hero-content h2{
    margin:1rem 0 2rem;
    font-size:clamp(2.5rem,6vw,5rem);
    line-height:.9;
}

.de-hero-content p{
    max-width:600px;
    font-size:1.2rem;
    color:var(--de-text-soft);
}

.de-hero-collage{
    position:relative;
    min-height:700px;
}

.de-shot{
    position:absolute;
    overflow:hidden;
    border-radius:18px;
    box-shadow:var(--de-shadow);
    background:#fff;
}

.de-hero{
    animation:heroFade 0.8s ease-out;
}

@keyframes heroFade{

    from{
        opacity:0.2;
    }

    to{
        opacity:1;
    }

}

/* ========================================
   SHOWCASE SECTIONS
======================================== */

.de-showcase{
    max-width:var(--de-max-width);
    margin:0 auto;
    padding:7rem 2rem 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6rem;
    align-items:start;
}

.de-showcase-reverse .de-media{
    order:2;
}

.de-showcase-reverse .de-text{
    order:1;
}

.de-showcase,
.de-about,
.de-contact{

    opacity:0;

    transition:
        opacity 1s ease-out;

}

.de-showcase.reveal,
.de-about.reveal,
.de-contact.reveal{

    opacity:1;

}

/* ========================================
   TEXT BLOCKS
======================================== */

.de-text{
    padding-top:5rem;
}

.de-text h2{
    margin:0 0 1.5rem;
    font-size:clamp(2rem,4vw,4rem);
    line-height:1;
}

.de-text p{
    color:var(--de-text-soft);
    font-size:1.1rem;
}

.de-text ul{
    margin:2rem 0 0;
    padding:0;
    list-style:none;
}

.de-text li{
    margin-bottom:.85rem;
    font-size:1.2rem;
    margin-left: 25px;
    color:var(--de-text-soft);
}

.de-text li::before{
    content:"\2726" " ";
    color:var(--ded-blue-dark);
    font-weight:700;
}

/* ========================================
   MEDIA COLLAGE
======================================== */

.de-media{
    position:relative;
    min-height:600px;
  /*  overflow:hidden; */
}

.de-shot{
    position:absolute;
    overflow:hidden;
    border-radius:18px;
    background:#fff;
    box-shadow:0 20px 60px rgba(0,0,0,.15);
}

.de-shot img{
    width:100%;
    display:block;
}

#learning .de-shot-1{
    width:45%;
    top:0;
    left:03%;
    z-index:2;
}

#learning .de-shot-2{
    width:50%;
    top:60px;
    right:05%;
    z-index:3;
}

#learning .de-shot-3{
    width:40%;
    top:240px;
    left:15%;
    z-index:1;
}

#ded .de-shot-1{
    width:50%;
    top:50px;
    left:0%;
    z-index:4;
}

#ded .de-shot-2{
    width:50%;
    top:150px;
    right:02%;
    z-index:3;
}

#ded .de-shot-3{
    width:50%;
    top:250px;
    left:12%;
    z-index:2;
}

#ded .de-shot-4{
    width:42%;
    top:0px;
    left:40%;
    z-index:1;
}

#masterclasses .de-shot-1{
    width:60%;
    top:0px;
    right:0%;
    z-index:3;
}

#masterclasses .de-shot-2{
    width:50%;
    top:80px;
    left:0%;
    z-index:1;
}

#masterclasses .de-shot-3{
    width:50%;
    top:250px;
    right:20%;
    z-index:2;
}

#observatory .de-shot-1{
    width:70%;
    top:50px;
    left:0%;
    z-index:2;
}

#observatory .de-shot-2{
    width:50%;
    top:0;
    right:02%;
    z-index:1;
}

#observatory .de-shot-3{
    width:40%;
    top:220px;
    right:50%;
    z-index:3;
}

#observatory .de-shot-4{
    width:45%;
    top:250px;
    right:12%;
    z-index:4;
}

.de-shot{
    opacity:0;
    transition:
        transform 1s ease,
        opacity 1s ease;
}

.de-shot-1{
    transform:translateY(-120px);
}

.de-shot-2{
    transition-delay:.15s;
    transform:translateY(120px);
}

.de-shot-3{
    transition-delay:.20s;
    transform:translateX(120px);
}

.de-shot-4{
    transition-delay:.20s;
    transform:translateX(-120px);
}

.de-shot.reveal{
    opacity:1;
    transform:translate(0,0);
}

@media(max-width:900px){

    .de-media{
        min-height:auto;
    }

    .de-shot{
        position:relative;
        width:100% !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;

        margin:0 0 1.5rem;
    }

}


/* ========================================
   FEATURE SECTION
======================================== */

.de-showcase-feature{
    padding-top:7.5rem;
    padding-bottom:10rem;
}

.de-showcase-feature h2{
    color:var(--de-accent);
}

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

.de-about{
    max-width:900px;
    margin:0 auto;
    padding:10rem 2rem;
    text-align:center;
}

.de-about h2{
    margin-bottom:2rem;
    font-size:2rem;
}

.de-about p{
    font-size:1.2rem;
    color:var(--de-text-soft);
}

.de-divider{
    text-align:center;
    color:var(--ded-orange);
    font-weight:500;
    font-size:.85rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    margin:0.5rem auto;
}


/* ========================================
   CONTACT
======================================== */

.de-contact{
    max-width:900px;
    margin:0 auto;
    padding:8rem 2rem;
    text-align:center;
}

.de-contact h2{
    margin-bottom:2rem;
}

.de-contact p{
    font-size:1.2rem;
    color:var(--de-text-soft);
    margin:0.5rem;
}

.de-about,
.de-contact{
    min-height:400px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.de-contact-email{
    font-size:1.3rem;
    font-weight:600;
    color:var(--ded-orange) !important;
    margin:0.5rem 0;
    cursor:pointer;
}

.de-contact-email:hover{
    opacity:.8;
}

.de-copy-confirmation{
    opacity:0;
    transition:opacity .3s ease;
    color:var(--ded-blue-dark) !important;
    font-weight:500;
    font-size:.9rem !important;
    margin:0 !important;
}

.de-copy-confirmation.show{
    opacity:1;
}

.de-contact-note{
    max-width:700px;
    margin:0 auto !important;
    color:var(--de-text-soft);
}




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

.de-footer{
    padding:0.5rem 2rem 3rem 2rem;
    margin-top: 3rem;
    border-top:1px solid #ddd;
    font-weight:500;
    text-align:center;
    color:var(--de-text-soft);
}

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

@media(max-width:900px){

    body.de-homepage{
        overflow-y:auto;
        overflow-x:hidden;
    }

    .de-nav-inner{
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:.75rem;
        text-align:center;
        margin-left:-25px;
    }

    .de-logo{
        width:100%;
        text-align:center;
        font-size:clamp(.9rem,3vw,1.1rem);
    }

    .de-nav nav{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:.5rem .75rem;
        margin:0 0 0 -25px;
        padding:0;
    }

    .de-nav nav a{
        font-size:clamp(.65rem,2.2vw,.9rem);
        white-space:nowrap;
    }

    .de-hero{
        min-height:auto;
        display:block;
        padding:10rem 1.5rem 3rem;
    }

    .de-hero-collage{
        min-height:auto;
    }

    .de-showcase{
        display:flex;
        flex-direction:column;
        gap:2rem;
        padding:6rem 1.5rem;
    }

    .de-text{
        order:1;
        padding-top:0 !important;
    }


    .de-media{
        order:2;

        min-height:auto;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:1.5rem;

        margin-top:1rem;
    }

    .de-shot{
        position:relative !important;

        width:80% !important;
        max-width:80% !important;

        top:auto !important;
        left:auto !important;
        right:auto !important;

        margin:0 auto 1.5rem;

        opacity:1 !important;
        transform:none !important;
    }

    .de-shot img{
        width:100%;
        height:auto;
        display:block;
    }

    .de-about,
    .de-contact{
        padding:4rem 1.5rem;
        min-height:auto;
    }

    .de-showcase,
    .de-about,
    .de-contact{
        opacity:1 !important;
        transform:none !important;
    }

}