/* =====================================================
   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:
        450px;

    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(5, 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;
  }
}