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

   RESET

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



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family:

        Inter,

        Arial,

        Helvetica,

        sans-serif;



    background: #f5f2ec;

    color: #171717;



    line-height: 1.6;

}









body.menu-open {

    overflow: hidden;

}



a {

    color: inherit;

    text-decoration: none;

}



button,

input,

textarea {

    font: inherit;

}



img {

    display: block;

    max-width: 100%;

}



.container {

    width: min(1180px, 90%);

    margin-inline: auto;

}



.section {

    padding: 120px 0;

}





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

   VARIABLES

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



:root {



    --black: #171615;



    --black-light: #211f1d;



    --white: #f5f2ec;



    --orange: #d86632;



    --orange-dark: #b94f22;



    --gray: #777;



    --border: #d8d1c7;



    --dark-border: #383532;



}





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

   HEADER

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



.header {



    position: fixed;



    top: 0;

    left: 0;



    width: 100%;



    z-index: 1000;



    background:

        rgba(245, 242, 236, .88);



    backdrop-filter: blur(18px);



    border-bottom:

        1px solid rgba(0,0,0,.06);



    transition: .3s;



}



.header.scrolled {



    box-shadow:

        0 10px 40px rgba(0,0,0,.08);



}





.nav {



    height: 78px;



    display: flex;



    align-items: center;



    justify-content: space-between;



}





.logo {



    font-size: 30px;



    font-weight: 900;



    letter-spacing: -3px;



}



.logo span {



    color: var(--orange);



}





.nav-menu {



    display: flex;



    gap: 30px;



}



.nav-menu a {



    font-size: 12px;



    color: #666;



    transition: .3s;



}



.nav-menu a:hover,

.nav-menu a.active {



    color: var(--orange);



}





.nav-cta {



    padding:

        10px 20px;



    border:

        1px solid #222;



    border-radius:

        30px;



    font-size: 12px;



}





.menu-btn {



    display: none;



    border: 0;



    background: transparent;



    font-size: 25px;



    cursor: pointer;



}





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

   BUTTONS

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



.btn {



    display: inline-flex;



    align-items: center;



    justify-content: center;



    padding:

        14px 25px;



    border-radius:

        40px;



    font-size: 12px;



    font-weight: 800;



    transition: .3s;



}





.btn-primary {



    background:

        var(--black);



    color:

        white;



}





.btn-primary:hover {



    background:

        var(--orange);



    transform:

        translateY(-3px);



}





.btn-secondary {



    border:

        1px solid #222;



}





.btn-secondary:hover {



    background:

        var(--black);



    color:

        white;



}





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

   HERO

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



.hero {



    min-height:

        100vh;



    padding-top:

        150px;



    padding-bottom:

        100px;



    display:

        flex;



    align-items:

        center;



}





.hero-grid {



    display:

        grid;



    grid-template-columns:

        1.1fr .9fr;



    gap:

        90px;



    align-items:

        center;



}





.eyebrow {



    color:

        var(--orange);



    font-size:

        10px;



    font-weight:

        900;



    letter-spacing:

        2.5px;



    margin-bottom:

        20px;



}





.hero h1 {



    font-size:

        clamp(55px, 7vw, 92px);



    line-height:

        .9;



    letter-spacing:

        -6px;



    max-width:

        800px;



}





.hero h1 span {



    color:

        var(--orange);



}





.hero-description {



    max-width:

        620px;



    color:

        #666;



    font-size:

        17px;



    margin:

        30px 0;



}





.hero-buttons {



    display:

        flex;



    gap:

        12px;



    flex-wrap:

        wrap;



}





.hero-stats {



    display:

        flex;



    gap:

        45px;



    margin-top:

        55px;



}





.hero-stats strong {



    display:

        block;



    font-size:

        27px;



}





.hero-stats span {



    display:

        block;



    font-size:

        10px;



    color:

        #777;



}





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

   HERO VISUAL

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



.hero-image {



    display:

        flex;



    justify-content:

        center;



}





.portrait-card {



    width:

        650px;



    height:

        520px;

/* 

    padding:

        25px; */



    /* background:

        var(--black); */



    color:

        white;



    border-radius:

        50px;

        



    display:

        flex;



    flex-direction:

        column;



    justify-content:

        space-between;

/* 

    box-shadow:

        25px 25px 0 #ddd6cb; */



}





.portrait-top,

.portrait-bottom {



    display:

        flex;



    justify-content:

        space-between;



    color:

        #777;



    font-size:

        9px;



    letter-spacing:

        2px;



}





.portrait-placeholder {



    width:

        100%;



    height:

        100%;



    display:

        flex;



    align-items:

        center;



    justify-content:

        center;



    font-size:

        250px;



    font-weight:

        900;



    color:

        var(--orange);



    line-height:

        1;



}





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

   SECTION INTRO

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



.section-intro {



    max-width:

        850px;



    margin-bottom:

        65px;



}





.section-intro h2 {



    font-size:

        clamp(42px, 5.5vw, 70px);



    line-height:

        .94;



    letter-spacing:

        -5px;



}





.section-intro h2 span {



    color:

        var(--orange);



}





.section-intro > p:last-child {



    max-width:

        650px;



    color:

        #777;



    margin-top:

        25px;



}





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

   ABOUT

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



.about {



    background:

        #e8e3da;



}





.about-grid {



    display:

        grid;



    grid-template-columns:

        1fr 1fr;



    gap:

        100px;



}





.about-grid p {



    color:

        #666;



    margin-bottom:

        20px;



}





.about-grid .large-text {



    font-size:

        29px;



    line-height:

        1.25;



    color:

        #222;



}





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

   FACTS

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



.facts {



    background:

        var(--orange);



    color:

        white;



    padding:

        65px 0;



}





.facts-grid {



    display:

        grid;



    grid-template-columns:

        repeat(4, 1fr);



}





.fact {



    text-align:

        center;



    border-right:

        1px solid rgba(255,255,255,.3);



}





.fact:last-child {



    border:

        0;



}





.fact strong {



    display:

        block;



    font-size:

        55px;



    line-height:

        1;



}





.fact span {



    display:

        block;



    margin-top:

        8px;



    font-size:

        11px;



    opacity:

        .8;



}





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

   YFP

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



.yfp {



    background:

        var(--black);



    color:

        white;



}





.yfp-grid {



    display:

        grid;



    grid-template-columns:

        .8fr 1.2fr;



    gap:

        80px;



    align-items:

        center;



}





.yfp-visual {



    height:

        500px;



    border-radius:

        18px;



    background:

        radial-gradient(

            circle,

            #d86632 0,

            #753016 28%,

            #171615 70%

        );



    display:

        flex;



    flex-direction:

        column;



    justify-content:

        center;



    align-items:

        center;



}





.yfp-mark {



    font-size:

        120px;



    font-weight:

        900;



    line-height:

        .7;



}





.yfp-visual > span {



    letter-spacing:

        8px;



    font-size:

        14px;



    margin-top:

        20px;



}





.yfp-visual small {



    color:

        #888;



    font-size:

        9px;



    letter-spacing:

        2px;



    margin-top:

        80px;



}





.yfp-content h3 {



    font-size:

        30px;



}





.yfp-content p {



    color:

        #999;



    margin:

        20px 0;



}





.yfp-content .large-text {



    color:

        white;



    font-size:

        28px;



    line-height:

        1.2;



}





.mini-facts {



    display:

        grid;



    grid-template-columns:

        1fr 1fr;



    gap:

        20px;



    margin:

        40px 0;



}





.mini-facts div {



    border-top:

        1px solid var(--dark-border);



    padding-top:

        14px;



}





.mini-facts strong {



    display:

        block;



    color:

        var(--orange);



    font-size:

        25px;



}





.mini-facts span {



    color:

        #777;



    font-size:

        11px;



}





.growth-flow {



    display:

        flex;



    flex-wrap:

        wrap;



    gap:

        8px;



    align-items:

        center;



    font-size:

        11px;



    color:

        #aaa;



}





.growth-flow span {



    color:

        white;



}





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

   SERVICES

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



.services {



    background:

        #f5f2ec;



}





.services-intro {



    max-width:

        900px;



}





/*

    4 x 4 GRID



    Desktop:

    4 columns



    16 service cards

*/



.services-grid {



    display:

        grid;



    grid-template-columns:

        repeat(4, 1fr);



    gap:

        12px;



}





.service-card {



    /* min-height:

        470px; */



    padding:

        25px;



    border:

        1px solid var(--border);



    border-radius:

        14px;



    display:

        flex;



    flex-direction:

        column;



    background:

        #f5f2ec;



    transition:

        transform .3s,

        background .3s,

        color .3s,

        border .3s;



}





.service-card:hover {



    transform:

        translateY(-8px);



    background:

        var(--black);



    color:

        white;



    border-color:

        var(--black);



}





.service-number {



    color:

        var(--orange);



    font-size:

        11px;



    font-weight:

        900;



}





.service-card h3 {



    font-size:

        23px;



    line-height:

        1.05;



    margin:

        35px 0 12px;



}





.service-card > p {



    color:

        #777;



    font-size:

        12px;



    margin-bottom:

        20px;



}





.service-card:hover > p {



    color:

        #999;



}





.service-card ul {



    list-style:

        none;



    margin-top:

        auto;



}





.service-card li {



    font-size:

        11px;



    color:

        #777;



    padding:

        6px 0;



    border-bottom:

        1px solid #ddd6cc;



}





.service-card:hover li {



    color:

        #aaa;



    border-color:

        #363331;



}





/* Highlight cards */



.service-card-special {



    background:

        #e8e3da;



}





.service-card-special:hover {



    background:

        var(--orange);



}





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

   PROCESS

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



.process {



    background:

        #e8e3da;



}





.process-grid {



    display:

        grid;



    grid-template-columns:

        repeat(3, 1fr);



    border-top:

        1px solid var(--border);



}





.process-item {



    padding:

        35px 25px;



    border-right:

        1px solid var(--border);



}





.process-item:last-child {



    border:

        0;



}





.process-item > span {



    color:

        var(--orange);



    font-size:

        11px;



    font-weight:

        900;



}





.process-item h3 {



    font-size:

        25px;



    margin:

        45px 0 12px;



}





.process-item p {



    color:

        #777;



    font-size:

        13px;



}





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

   EXPERIENCE

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



.experience-list {



    max-width:

        950px;



}





.experience-row {



    display:

        grid;



    grid-template-columns:

        180px 1fr;



    gap:

        50px;



    padding:

        35px 0;



    border-top:

        1px solid var(--border);



}





.experience-row > span {



    color:

        var(--orange);



    font-size:

        10px;



    font-weight:

        900;



    letter-spacing:

        1px;



}





.experience-row h3 {



    font-size:

        25px;



}





.experience-row p {



    color:

        #777;



    margin-top:

        8px;



}





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

   WHY

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



.why {



    background:

        #e8e3da;



}





.growth-system {



    display:

        flex;



    flex-wrap:

        wrap;



    gap:

        10px;



    align-items:

        center;



}





.growth-system div {



    border:

        1px solid #ccc4b9;



    border-radius:

        40px;



    padding:

        17px 20px;



    font-size:

        10px;



    font-weight:

        900;



}





.growth-system span {



    color:

        var(--orange);



}





.why-statement {



    max-width:

        900px;



    margin-top:

        70px;



}





.why-statement h3 {



    font-size:

        clamp(35px, 5vw, 65px);



    line-height:

        .98;



    letter-spacing:

        -4px;



}





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

   COURSE

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



.course {



    background:

        #e8e3da;



}





.course-wrapper {



    background:

        var(--black);



    color:

        white;



    border-radius:

        20px;



    padding:

        70px;



    display:

        grid;



    grid-template-columns:

        1.1fr .9fr;



    gap:

        80px;



    align-items:

        center;



}





.course-content h2 {



    font-size:

        clamp(45px, 5vw, 70px);



    line-height:

        .95;



    letter-spacing:

        -4px;



}





.course-content h2 span {



    color:

        var(--orange);



}





.course-content > p {



    max-width:

        550px;



    color:

        #999;



    margin:

        30px 0;



}





.course-card {



    background:

        #f5f2ec;



    color:

        #171717;



    border-radius:

        15px;



    padding:

        35px;



    box-shadow:

        12px 12px 0 var(--orange);



}





.course-card small {



    color:

        var(--orange);



    font-weight:

        900;



    font-size:

        9px;



    letter-spacing:

        2px;



}





.course-card h3 {



    font-size:

        30px;



    line-height:

        1.05;



    margin:

        20px 0;



}





.course-card p {



    color:

        #777;



    font-size:

        13px;



}





.course-price {



    font-size:

        40px;



    font-weight:

        900;



    margin:

        20px 0;



}





.course-card ul {



    list-style:

        none;



}





.course-card li {



    padding:

        6px 0;



    color:

        #666;



    font-size:

        12px;



}





.course-button {



    display:

        block;



    text-align:

        center;



    margin-top:

        20px;



    padding:

        13px;



    border-radius:

        30px;



    background:

        var(--black);



    color:

        white;



    font-size:

        12px;



    font-weight:

        800;



}





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

   CONTACT

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



.contact {



    background:

        var(--black);



    color:

        white;



}





.contact-grid {



    display:

        grid;



    grid-template-columns:

        1fr 1fr;



    gap:

        100px;



}





.contact-info h2 {



    font-size:

        clamp(45px, 5vw, 70px);



    line-height:

        .95;



    letter-spacing:

        -5px;



}





.contact-info h2 span {



    color:

        var(--orange);



}





.contact-info > p:not(.eyebrow) {



    color:

        #888;



    margin:

        30px 0;



    max-width:

        500px;



}





.contact-info > a {



    color:

        var(--orange);



}





.contact-form {



    background:

        #211f1d;



    padding:

        35px;



    border-radius:

        15px;



}





.form-group {



    margin-bottom:

        25px;



}





.form-group label {



    display:

        block;



    color:

        #888;



    font-size:

        10px;



    margin-bottom:

        8px;



}





.form-group input,

.form-group textarea {



    width:

        100%;



    border:

        0;



    border-bottom:

        1px solid #444;



    background:

        transparent;



    color:

        white;



    outline:

        none;



    padding:

        12px 0;



}





.form-group input:focus,

.form-group textarea:focus {



    border-color:

        var(--orange);



}





.form-message {



    font-size:

        12px;



    color:

        var(--orange);



    margin-top:

        15px;



}





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

   FOOTER

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



.site-footer {

    padding: 75px 0 25px;



    background: #111;



    color: #fff;

}



.footer-grid {

    display: grid;



    grid-template-columns: 2fr 1fr 1fr;



    gap: 70px;



    padding-bottom: 55px;



    border-bottom: 1px solid #292929;

}



.footer-logo {

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



    font-size: 22px;



    font-weight: 800;

}



.footer-logo span {

    color: var(--orange);

}



.footer-brand p {

    max-width: 390px;



    margin-top: 18px;



    color: #8f8f8f;



    font-size: 13px;



    line-height: 1.8;

}



.footer-column {

    display: flex;



    flex-direction: column;



    gap: 12px;

}



.footer-column > span {

    color: var(--orange);



    font-size: 10px;



    font-weight: 800;



    letter-spacing: 2px;



    margin-bottom: 8px;

}



.footer-column a {

    color: #a5a5a5;



    font-size: 13px;



    transition: var(--transition);

}



.footer-column a:hover {

    color: #fff;

}



.footer-bottom {

    display: flex;



    justify-content: space-between;



    padding-top: 22px;



    color: #777;



    font-size: 11px;

}



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

   SCROLL REVEAL

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



.reveal {



    opacity:

        0;



    transform:

        translateY(35px);



    transition:

        opacity .7s ease,

        transform .7s ease;



}





.reveal.visible {



    opacity:

        1;



    transform:

        translateY(0);



}





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

   RESPONSIVE

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



@media(max-width:1100px) {





    .hero-grid {



        grid-template-columns:

            1fr;



    }





    .hero-image {



        justify-content:

            flex-start;



    }





    .services-grid {



        grid-template-columns:

            repeat(2, 1fr);



    }





    .process-grid {



        grid-template-columns:

            repeat(3, 1fr);



    }





    .process-item:nth-child(3) {



        border-right:

            0;



    }





    .course-wrapper {



        grid-template-columns:

            1fr;



    }



}





@media(max-width:800px) {





    .nav-menu {



        display:

            none;



        position:

            absolute;



        top:

            75px;



        left:

            5%;



        width:

            90%;



        padding:

            25px;



        background:

            var(--black);



        border-radius:

            15px;



        flex-direction:

            column;



        gap:

            20px;



    }





    .nav-menu.open {



        display:

            flex;



    }





    .nav-menu a {



        color:

            white;



    }





    .nav-cta {



        display:

            none;



    }





    .menu-btn {



        display:

            block;



    }





    .about-grid,

    .yfp-grid,

    .contact-grid {



        grid-template-columns:

            1fr;



    }





    .facts-grid {



        grid-template-columns:

            1fr 1fr;



    }





    .fact {



        padding:

            20px;



        border-bottom:

            1px solid rgba(255,255,255,.3);



    }





    .yfp-visual {



        height:

            350px;



    }





    .process-grid {



        grid-template-columns:

            1fr 1fr;



    }





    .process-item:nth-child(2) {



        border-right:

            0;



    }





    .process-item:nth-child(3) {



        border-right:

            1px solid var(--border);



    }





    .experience-row {



        grid-template-columns:

            1fr;



        gap:

            10px;



    }





    .course-wrapper {



        padding:

            40px 25px;



    }





    .footer-top {



        flex-direction:

            column;



    }



}





@media(max-width:600px) {





    .section {



        padding:

            80px 0;



    }





    .hero {



        padding-top:

            120px;



    }





    .hero h1 {



        letter-spacing:

            -4px;



    }





    .portrait-card {



        width:

            100%;



        height:

            420px;



    }





    .portrait-placeholder {



        font-size:

            190px;



    }





    .hero-stats {



        gap:

            20px;



        flex-wrap:

            wrap;



    }





    .facts-grid {



        grid-template-columns:

            1fr 1fr;



    }





    .fact strong {



        font-size:

            38px;



    }





    /*

       Services becomes 1 column

       on mobile

    */



    .services-grid {



        grid-template-columns:

            1fr;



    }





    .service-card {



        min-height:

            auto;



    }





    .process-grid {



        grid-template-columns:

            1fr;



    }





    .process-item,

    .process-item:nth-child(3) {



        border-right:

            0;



    }





    .mini-facts {



        grid-template-columns:

            1fr 1fr;



    }





    .footer-bottom {



        flex-direction:

            column;



        gap:

            10px;



    }



}





.whatsapp-float {

  position: fixed;

  right: 24px;

  bottom: 24px;



  display: flex;

  align-items: center;

  gap: 10px;



  padding: 10px 18px 10px 10px;



  background: #25D366;

  color: #fff;



  border-radius: 50px;



  text-decoration: none;

  font-family: Arial, sans-serif;

  font-size: 14px;

  font-weight: 600;



  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);



  z-index: 9999;



  transition:

    transform 0.25s ease,

    box-shadow 0.25s ease;

}



.whatsapp-float:hover {

  transform: translateY(-4px);

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);

}



.whatsapp-icon {

  width: 38px;

  height: 38px;



  display: flex;

  align-items: center;

  justify-content: center;



  background: #fff;

  border-radius: 50%;

}



.whatsapp-icon svg {

  width: 23px;

  height: 23px;

  fill: #25D366;

}



.whatsapp-text {

  white-space: nowrap;

}





/* Mobile */

@media (max-width: 600px) {



  .whatsapp-float {

    right: 16px;

    bottom: 16px;



    width: 52px;

    height: 52px;



    padding: 0;



    justify-content: center;



    border-radius: 50%;

  }



  .whatsapp-icon {

    width: 42px;

    height: 42px;

  }



  .whatsapp-icon svg {

    width: 25px;

    height: 25px;

  }



  .whatsapp-text {

    display: none;

  }

}