* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
    scroll-behavior:smooth;
}

:root{
  --bg-light: #d8dde3;
  --text-dark: #111;
  --text-light: #f7f0ff;

  --section-padding: 100px;
  --card-radius: 24px;
}

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

body {
  background: var(--bg-light);
  color: #1f1f1f;
  font-family: 'Montserrat', sans-serif;
}

nav{
    position:absolute;
    top:0;
    left:0;
    width:100%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:25px 45px;

    z-index:10;
}

@media (max-width:480px){

    nav{
        flex-direction:column;
        gap:10px;
    }

}

.logo{
    color:white;
    font-family:'Montserrat', sans-serif;
    font-size:1rem;
}

.nav-button{
    color:white;
    text-decoration:none;

    font-family:'Montserrat', sans-serif;
    font-size:1rem;
}

.hero {
  height: calc(100vh - 0px);

  background-image: url("../images/hero.jpg");
  background-size: cover;
  background-position: center;

  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;
}

.hero::before {
  content: "";

  position: absolute;
  inset: 0;

  background: rgba(0,0,0,0.15);
}

.hero-overlay {
  max-width: 1200px;

  margin: auto;

  position: relative;

  z-index: 2;

  text-align: center;
  
  color: #E7F0FF;
}

.hero-overlay h1{
    font-family:'Sedgwick Ave Display', cursive;

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

    font-weight:600;

    letter-spacing:0.08em;

    line-height:1;

    margin-bottom:20px;

    text-transform:uppercase;
}

.hero-overlay p{
    font-family:'Montserrat', sans-serif;

    font-size:clamp(.85rem,1.5vw,1.1rem);

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:clamp(40px, 8vh, 120px);
}

.hero-button{

    display:inline-block;

    padding:17px 34px;

    background:#e9edf7;

    color:#111;

    text-decoration:none;

    border-radius:30px;

    font-family:'Montserrat', sans-serif;

    font-weight:700;

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

    letter-spacing:clamp(2px, 0.8vw, 12px);

    text-transform:uppercase;

    border:3px solid rgba(0,0,0,.35);

    transition:.3s;

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

.hero-button:hover{
    transform:scale(1.02);

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

    background:#86744D;

    color:#E7F0FF;
}

/* ==========================
   PROOF SECTION
========================== */

.proof{
    background:
    linear-gradient(
        to bottom,
        transparent 10%,
        white 90%
    ),
    url("../images/victory.jpg");

    background-size: cover;

    background-position: center;

    height:50vh;

    padding:150px 40px;

    text-align:center;
}

.proof-content{

    max-width:100%;

    text-align:left;
}

.proof h2{

    font-family:'Montserrat', sans-serif;

    font-size:clamp(5rem, 14vw, 10rem);

    font-weight:900;

    line-height:1;

    color:#305e98;

    margin-bottom:0px;
}

.proof p{

    font-family:'Montserrat', sans-serif;

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

    font-weight:800;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#111;

    margin-bottom:15px;
}

.proof span{

    display:block;

    font-family:'Montserrat', sans-serif;

    font-size:clamp(1rem, 1.5vw, 1.2rem);

    letter-spacing:4px;

    margin-bottom:10px;

    text-transform:uppercase;

    color:#666;
}

/* =========================
   COACHES SECTION
========================= */

.coaches,
.sessions{
    overflow:hidden;
}

.coaches{
    color: #E7F0FF;

    background: 
        linear-gradient(
        to bottom,
        white 0%,
        black 100%
    );

    padding:120px 8%;
}

.coaches-header{
    text-align:center;

    max-width:900px;

    margin:0 auto 100px;
}

.coaches-header h2{
    font-family:'Montserrat', cursive;

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

    color:#111;

    margin-bottom:20px;
}

.coaches-header p{
    font-family:'Montserrat', sans-serif;

    font-size:clamp(1rem, 2.5vw, 1.4rem);

    line-height:1.6;

    max-width:700px;

    margin:0 auto;
   
    color:#444;
}

.coach-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
}

.coach-card{
    position:relative;

    overflow:hidden;

    border-radius:24px;

    aspect-ratio: 4 / 5;
    min-height:500px;
    
    box-shadow:
    0 10px 30px rgba(0,0,0,.12);

    max-height:900px;
}

.coach-card:hover img{
    transform: scale(1.06);
}

.coach-card img{
    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition: transform .6s ease;
}

@media (max-width: 1200px){
    .coach-grid{
        grid-template-columns:1fr;
    }
    .coach-card{

        aspect-ratio:16/9;

        min-height:450px;
    }
}


.coach-overlay{
    position:absolute;

    inset:0;

    transition: background .4s ease;

    display:flex;

    flex-direction:column;

    justify-content:left;

    padding:50px;

    color:white;

    background:
    linear-gradient(
        135deg,
        rgba(0,0,0,.75) 0%,
        rgba(0,0,0,.45) 35%,
        rgba(0,0,0,0) 70%
    );
}

@media (max-width:600px){

    .coach-overlay{

        background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.75),
            rgba(0,0,0,.45)
        );
    }

}

.coach-overlay h3{
    font-family:'Sedgwick Ave Display', cursive;

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

    margin-bottom:15px;

    line-height:.95;
}

.coach-line{
    width:100px;

    height:2px;

    background:white;

    margin-bottom:20px;
}

.coach-overlay h4{
    font-family:'Montserrat', sans-serif;

    font-size:1.1rem;

    font-weight:700;

    margin-bottom:20px;
}

.coach-overlay p{
    font-family:'Montserrat', sans-serif;

    font-size:1.05rem;

    line-height:1.8;

    max-width:220px;

    margin-bottom:30px;
}

.coach-button{
    display:inline-block;

    width:max-content;

    padding:14px 28px;

    background:#e9edf7;

    color:#111;

    text-decoration:none;

    border-radius:16px;

    font-weight:700;

    transition:
        transform .3s ease,
        background .3s ease;
}

.coach-button:hover{

    transform:scale(1.02);

    background:#86744D;

    color:#E7F0FF;
}

.coach-card:hover img{
    transform: scale(1.06);
}

/* =========================
   SESSIONS SECTION
========================= */

.sessions {
  min-height:100vh;

  padding:120px 8%;

  background:linear-gradient(
    to bottom,
    transparent 85%,
    black 100%
  ),
  url("../images/night-flatiron.jpg");

  background-size: cover;

  background-position: center;

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;
}

.sessions-content{
    max-width:1400px;

    width:100%;

    margin:0 auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:start;
}

@media (max-width:1200px){

    .sessions-content{
        grid-template-columns:1fr;
    }

    .sessions-right{
        display:none;
    }

}

/* LEFT SIDE */

.sessions-header {

    margin-bottom:60px;
}

.sessions-header h2 {

    font-family:'Montserrat', cursive;

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

    color:#E7F0FF;

    margin-bottom:10px;
}

.sessions-line {

    width:50px;

    height:2px;

    background:#E7F0FF;

    margin-bottom:20px;
}

.sessions-header p {

    font-family:'Montserrat', sans-serif;

    font-size:1.4rem;

    color:#bdbdbd;

    max-width:350px;

    line-height:1.5;
}

/* SESSION CARDS */

.session-card {
    transition: .3s ease;

    position:relative;

    overflow:hidden;

    border-radius:20px;

    min-height:250px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:50px;

    margin-bottom:16px;

    color:white;

    background-size:cover;

    background-position:center;

    align-items: flex-end;

    max-height:350px;
}

.session-card:hover{
    transform:translateX(8px);
}

.session-card::before {

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.65);
}

.session-text,
.session-btn {
    margin-bottom:10px;

    position:relative;

    z-index:2;
}

.session-icon {

    font-size:2rem;

    margin-bottom:10px;
}

.session-card h3 {

    font-family:'Sedgwick Ave Display', cursive;

    font-size:clamp(1.8rem,3vw,2.8rem);

    margin-bottom:10px;
}

.session-card p {

    font-family:'Montserrat', sans-serif;

    max-width:400px;

    line-height:1.5;

    color:#e0e0e0;
}

.session-btn {

    background:#E7F0FF;

    color:#111;

    padding:14px 28px;

    border-radius:30px;

    text-decoration:none;

    font-family:'Montserrat', sans-serif;

    font-weight:700;

    white-space:nowrap;
}

.session-btn:hover{
    transform:scale(1.02);

    background:#86744D;

    color:#E7F0FF;
}

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

.footer{

    background:#000;

    color:#E7F0FF;

    padding:100px 40px 30px;

    text-align:center;
}

.footer-content{

    max-width:900px;

    margin:0 auto;
}

.footer h2{

    font-family:'Sedgwick Ave Display', cursive;

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

    margin-bottom:15px;

    letter-spacing:3px;
}

.footer p{

    font-family:'Montserrat', sans-serif;

    font-size:1.2rem;

    margin-bottom:40px;

    color:rgba(231,240,255,.75);
}

.footer-button{

    display:inline-block;

    padding:16px 34px;

    background:#E7F0FF;

    color:#111;

    text-decoration:none;

    border-radius:30px;

    font-family:'Montserrat', sans-serif;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:.3s;

    margin-bottom:50px;
}

.footer-button:hover{

    background:#86744D;

    color:#E7F0FF;

    transform:scale(1.03);
}

.footer-links{

    display:flex;

    justify-content:center;

    gap:30px;

    margin-bottom:40px;
}

.footer-links a{

    color:#E7F0FF;

    text-decoration:none;

    font-family:'Montserrat', sans-serif;

    transition:.3s;
}

.footer-links a:hover{

    color:#86744D;
}

.footer-top{

    max-width:1400px;

    margin:0 auto;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:80px;
}

.footer-brand{

    text-align:left;
}

.footer-actions{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:30px;
}

.footer-bottom{

    font-family:'Montserrat', sans-serif;

    font-size:.9rem;

    color:rgba(231,240,255,.5);

    border-top:1px solid rgba(231,240,255,.15);

    padding-top:25px;
}

/* =========================
   Send Sesh Page 
========================= */

.send-hero{
    height:100vh;

    background-image:
        linear-gradient(
            rgba(0,0,0,.45),
            rgba(0,0,0,.45)
        ),
        url("../images/send-hero.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;
}

.send-hero-overlay{
    max-width:650px;

    padding-left:8%;
}

.send-hero h1{
    font-family:'Sedgwick Ave Display', cursive;

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

    color:white;

    margin-bottom:20px;
}

.send-hero p{
    color:white;

    font-size:1.3rem;

    line-height:1.6;

    margin-bottom:35px;

    max-width:500px;
}

.how-we-send{
    background:#f4f4f4;

    padding:120px 8%;
}

.process-grid{
    display:grid;

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

    gap:40px;

    margin-top:60px;
}

.process-card{
    background:white;

    padding:40px;

    border-radius:24px;
}

.send-cta{
    background:#111;

    color:white;

    text-align:center;

    padding:140px 8%;
}

.send-cta h2{
    font-family:'Sedgwick Ave Display', cursive;

    font-size:5rem;

    margin-bottom:20px;
}

.scroll-button{

    display:inline-flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    margin-top:40px;

    padding:18px 28px;

    border:2px solid rgba(255,255,255,.7);

    border-radius:20px;

    color:white;

    text-decoration:none;

    backdrop-filter:blur(4px);

    transition:.3s ease;
}

.scroll-button span{

    font-family:'Montserrat', sans-serif;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;
}

.scroll-icon{

    font-size:2rem;
}

.scroll-button:hover{

    transform:translateY(4px);

    background:rgba(255,255,255,.1);
}

.pricing{
    background:white;

    padding:120px 8%;

    text-align:center;
}

.pricing h2{
    font-family:'Sedgwick Ave Display', cursive;

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

    color:#111;

    margin-bottom:60px;
}

.pricing-grid{
    display:grid;

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

    gap:40px;

    max-width:1000px;

    margin:0 auto;
}

.pricing-card{
    background:#f7f7f7;

    padding:60px 40px;

    border-radius:24px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.08);

    transition:.3s ease;
}

.pricing-card:hover{
    transform:translateY(-6px);
}

.pricing-card h3{
    font-family:'Montserrat', sans-serif;

    font-size:1.8rem;

    margin-bottom:20px;

    color:#111;
}

.pricing-card span{
    display:block;

    font-size:3.5rem;

    font-weight:800;

    color:#86744D;

    margin-bottom:20px;
}

.pricing-card p{
    color:#555;

    font-size:1.1rem;
}

.back-home{
    display:block;

    margin: 20px auto 0;

    color:white;

    text-decoration:none;

    font-family:'Montserrat', sans-serif;

    font-size:.95rem;

    font-weight:600;

    letter-spacing:1px;

    opacity:.8;

    transition:.25s ease;
}

.back-home:hover{

    opacity:1;

    transform:translateX(-4px);
}

/* =========================
   Training Regime Page
========================= */

.training-hero{
    height:100vh;

    background-image:
        linear-gradient(
            135deg,
            transparent 40%,
            black 90%
        ),
        url("../images/hangboard.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;
}

.training-hero-overlay{
    max-width:650px;

    padding-left:8%;
}

.training-hero h1{
    font-family:'Sedgwick Ave Display', cursive;

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

    color:white;

    margin-bottom:20px;
}

.training-hero p{
    color:white;

    font-size:1.3rem;

    line-height:1.6;

    margin-bottom:35px;

    max-width:500px;
}

/* =========================
   Video Review Page
========================= */

.video-hero{
    height:100vh;

    background-image:
        linear-gradient(
            135deg,
            transparent 40%,
            black 90%
        ),
        url("../images/video-review.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;
}

.video-hero-overlay{
    max-width:650px;

    padding-left:8%;
}

.video-hero h1{
    font-family:'Sedgwick Ave Display', cursive;

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

    color:white;

    margin-bottom:20px;
}

.video-hero p{
    color:white;

    font-size:1.3rem;

    line-height:1.6;

    margin-bottom:35px;

    max-width:500px;
}

/* =========================
   Booking Form Page
========================= */

.booking-page{

    min-height:100vh;

    background:linear-gradient(
    to bottom,
    #86744D 0%,
    White 50%,
    black 100%
    );

    padding:140px 8%;
}

.booking-container{

    max-width:800px;

    margin:0 auto;
}

.booking-container h1{

    font-family:'Sedgwick Ave Display', cursive;

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

    color:#111;

    margin-bottom:20px;
}

.booking-intro{

    font-family:'Montserrat', sans-serif;

    font-size:1.2rem;

    color:#555;

    line-height:1.7;

    margin-bottom:60px;
}
.booking-form{

    display:flex;

    flex-direction:column;

    gap:30px;
}

.form-group{

    display:flex;

    flex-direction:column;

    gap:10px;
}

.form-group label{

    font-family:'Montserrat', sans-serif;

    font-weight:700;

    color:#111;
}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:18px;

    border:none;

    border-radius:18px;

    background:white;

    font-family:'Montserrat', sans-serif;

    font-size:1rem;

    box-shadow:
        0 4px 15px rgba(0,0,0,.05);
}

.form-group textarea{

    resize:vertical;
}

.submit-button{

    align-self:flex-start;

    padding:20px 40px;

    border:none;

    border-radius:20px;

    background:#111;

    color:white;

    font-family:'Montserrat', sans-serif;

    font-weight:700;

    cursor:pointer;

    transition:.3s ease;
}

.submit-button:hover{

    background:#86744D;

    transform:translateY(-2px);
}

/* =========================
   What's Next Page
========================= */

.next-steps{

    margin-top:100px;
}

.next-steps h2{

    font-family:'Sedgwick Ave Display', cursive;

    font-size:3rem;

    margin-bottom:40px;
}

.steps-grid{

    display:grid;

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

    gap:20px;
}

.step{

    background:white;

    padding:30px;

    border-radius:20px;

    text-align:center;

    box-shadow:
        0 8px 20px rgba(0,0,0,.05);
}

.step span{

    display:block;

    font-size:2rem;

    font-weight:800;

    color:#86744D;

    margin-bottom:15px;
}

#send-session-fields{

    display:none;
}

#notes-field{

    display:none;
}

button:disabled{

    opacity:.5;

    cursor:not-allowed;
}

#notes-field{

    display:none;

    animation:fadeIn .3s ease;
}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(10px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }

}

#send-session-fields,
#training-fields{
    display:none;

    flex-direction:column;

    gap:24px;

    margin-top:24px;
}

#training-fields,
#grade-field,
#video-field,
#notes-field{
    display:none;
}

.availability-section{

    display:flex;

    flex-direction:column;

    gap:20px;
}

.availability-grid{

    display:grid;

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

    gap:20px;
}

.availability-label{

    font-weight:700;

    margin-bottom:5px;
}

@media (max-width:768px){

    .availability-grid{

        grid-template-columns:1fr;
    }

}

/* =========================
   THANK YOU PAGE
========================= */

.thanks-page{

    min-height:100vh;

    background:
    linear-gradient(
        180deg,
        transparent 0%,
        #ffffff 100%
    ),
    url("../images/celebration.jpg");

    display:flex;

    justify-content:center;

    align-items:center;

    padding:60px 8%;
}

.thanks-container{

    max-width:700px;

    text-align:center;
}

.thanks-check{

    width:100px;

    height:100px;

    margin:0 auto 40px;

    border-radius:50%;

    background:#86744D;

    color:white;

    font-size:3rem;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;
}

.thanks-container h1{

    font-family:'Sedgwick Ave Display', cursive;

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

    color:#111;

    margin-bottom:30px;
}

.thanks-container p{

    font-family:'Montserrat', sans-serif;

    font-size:1.2rem;

    line-height:1.8;

    color:#555;

    max-width:550px;

    margin:0 auto 50px;
}

.thanks-button{

    display:inline-block;

    padding:20px 40px;

    background: black;

    color:white;

    text-decoration:none;

    border-radius:20px;

    font-family:'Montserrat', sans-serif;

    font-weight:700;

    transition:.3s ease;
}

.thanks-button:hover{

    background:#86744D;

    transform:translateY(-2px);
}




/* CARD IMAGES */

.video-review {

    background-image:url("../images/video-review.jpg");
}

.day-wall {

    background-image:url("../images/send-sesh.jpg");
}

.training {

    background-image:url("../images/training.jpg");
}




/* =========================
   LAPTOPS
========================= */
@media (max-width:1400px){

    .coach-grid{
        gap:50px;
    }

    .sessions-content{
        gap:40px;
    }

}





/* =========================
   TABLET
========================= */

@media (max-width:1000px){

    nav{
        padding:20px 25px;
    }

    .hero-overlay h1{
        transform:none;
    }

    .coach-grid{
        grid-template-columns:1fr;
    }

    .sessions-content{
        grid-template-columns:1fr;
    }

    .sessions-right{
        min-height:500px;
    }

    .session-card{

        flex-direction:column;

        align-items:flex-start;

        justify-content:flex-end;

        gap:20px;
    }

    .process-grid{
        grid-template-columns:1fr;
    }
}





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

@media (max-width:768px){

    .hero-overlay h1{
        font-size:3.5rem;
        letter-spacing:2px;
    }

    .hero-overlay p{
        font-size:.9rem;
    }

    .hero-button{
        letter-spacing:4px;
        padding:14px 22px;
    }

    .coaches-header h2{
        font-size:3.5rem;
        transform:none;
    }

    .coach-overlay{
        padding:30px;
    }

    .coach-overlay h3{
        font-size:2.5rem;
    }

    .sessions-header h2{
        font-size:3.5rem;
    }

    .session-card{
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
        padding:30px;
    }

    .session-btn{
        align-self:flex-start;

        padding:12px 20px;

        font-size:.9rem;
    }

    .footer-top{

        flex-direction:column;

        align-items:center;

        text-align:center;

        gap:40px;
    }

    .footer-brand{

        text-align:center;
    }

    .footer-actions{

        align-items:center;
    }

    .pricing-grid{
        grid-template-columns:1fr;
    }

}
@media (max-width:600px){

    nav{
        padding:15px 20px;
    }

    .logo,
    .nav-button{
        font-size:.85rem;
    }

    .hero{
        padding:0 20px;
    }

    .hero-overlay h1{
        font-size:3rem;
    }

    .hero-overlay p{
        letter-spacing:1px;
    }

    .coaches{
        padding:80px 20px;
    }

    .sessions{
        padding:80px 20px;
    }

    .coach-overlay{
        padding:20px;
    }

    .coach-overlay h4{
        font-size:.95rem;
    }

    .coach-overlay p{
        max-width:none;
        font-size:.95rem;
    }

    .session-card{
        min-height:220px;
        padding:20px;
    }

    .session-card p{
        font-size:.9rem;
    }
}
@media (max-width: 480px){
    .proof{

        padding:100px 25px;
    }

    .proof p{

        letter-spacing:2px;
    }

    .proof span{

        letter-spacing:2px;
    }

    .coach-card{
        width:100%;
        min-height:700px;
    }

    .coach-content{
        padding:40px;
    }

    .coach-content p{

        font-size:1rem;
    }

    .coach-content h3{
        font-size:3.5rem;
        line-height:.9;
    }
    .coaches-header p{

        max-width:320px;

        font-size:1rem;

        line-height:1.5;
    }
    .coaches-header h2{

        font-size:4rem;

        line-height:.9;
    }

}