/*=====================================================
WAYPOINT HOME
=====================================================*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root{

--navy:#0F2747;
--copper:#B7864C;
--cream:#F5F1EA;
--cream2:#ECE5DB;
--text:#2E3742;
--gray:#6E7681;
--white:#ffffff;

--radius:22px;

--shadow:
0 18px 45px rgba(0,0,0,.08);

}

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

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--cream);

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

.container{

width:min(92%,1280px);

margin:auto;

}

/*=====================================================
TYPOGRAPHY
=====================================================*/

h1,h2,h3{

font-family:'Cormorant Garamond',serif;

font-weight:600;

color:var(--navy);

}

h1{

font-size:78px;

line-height:.95;

}

h2{

font-size:56px;

margin-bottom:20px;

}

h3{

font-size:30px;

}

p{

font-size:18px;

color:var(--gray);

}

section{

padding:110px 0;

}

.section-header{

text-align:center;

max-width:760px;

margin:0 auto 70px;

}

.eyebrow{

display:inline-block;

letter-spacing:3px;

font-size:12px;

font-weight:700;

color:var(--copper);

margin-bottom:18px;

text-transform:uppercase;

}

/*=====================================================
HEADER
=====================================================*/

header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    background: #F5F1EA;

    z-index: 1000;

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

}

header .container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    height: 105px;

}

.logo {

    flex-shrink: 0;

}

.logo img {

    width: 220px;

    display: block;

}

nav {

    margin-left: auto;

}

nav ul {

    display: flex;

    align-items: center;

    gap: 42px;

    list-style: none;

    margin: 0;

    padding: 0;

}

.nav-button {

    margin-left: 35px;

    flex-shrink: 0;

}
/*=====================================================
LOGO
=====================================================*/

.logo{

display:flex;

align-items:center;

flex-shrink:0;

}

.logo img{

width:215px;

height:auto;

display:block;

}

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

nav{

margin-left:auto;

}

nav ul{

display:flex;

gap:40px;

align-items:center;
  
list-style:none;

margin:0;

padding:0;

}

nav a{

font-size:15px;

font-weight:600;

color:var(--navy);

transition:.3s;

position:relative;

}

nav a:hover{

color:var(--copper);

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:var(--copper);

transition:.3s;

}

nav a:hover::after{

width:100%;

}
.nav-button{

margin-left:auto;

}
/*=====================================================
BUTTONS
=====================================================*/

.button-primary,
.nav-button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 30px;

background:var(--navy);

color:white;

border-radius:999px;

font-weight:600;

transition:.35s;

}

.button-primary:hover,
.nav-button:hover{

background:var(--copper);

}

.button-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 30px;

border:2px solid var(--navy);

color:var(--navy);

border-radius:999px;

font-weight:600;

transition:.35s;

}

.button-secondary:hover{

background:var(--navy);

color:white;

}

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

.hero{

position:relative;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

padding:0;

}

.hero-image{

position:absolute;

inset:0;

z-index:0;

}

.hero-image img{

width:100%;

height:100%;

object-fit:cover;

}

.hero-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
90deg,
rgba(15,39,71,.82) 0%,
rgba(15,39,71,.55) 45%,
rgba(15,39,71,.20) 100%
);

z-index:1;

}

.hero-content{

position:relative;

z-index:2;

max-width:700px;

margin-left:0;

padding-top:100px;

}

.hero h1{

color:white;

margin:20px 0;

}

.hero h1 span{

display:block;

color:var(--copper);

}

.hero p{

font-size:22px;

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

margin-bottom:40px;

max-width:620px;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.hero .button-secondary{

border-color:white;

color:white;

}

.hero .button-secondary:hover{

background:white;

color:var(--navy);

}
/*=====================================================
SERVICES
=====================================================*/

.services{

background:var(--cream);

}

.services-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.service-card{

background:#FAF8F4;

padding:45px;

border-radius:var(--radius);

border:1px solid rgba(15,39,71,.08);

box-shadow:var(--shadow);

transition:.35s;

}

.service-card:hover{

transform:translateY(-8px);

box-shadow:0 28px 60px rgba(15,39,71,.12);

}

.service-number{

width:54px;

height:54px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:var(--navy);

color:white;

font-weight:700;

margin-bottom:25px;

}

.service-card h3{

margin-bottom:15px;

}

/*=====================================================
MEMBERSHIP
=====================================================*/

.membership{

background:var(--navy);

color:white;

}

.membership .section-header h2,

.membership .section-header p,

.membership .eyebrow{

color:white;

}

.membership .eyebrow{

opacity:.75;

letter-spacing:3px;

}

.membership-grid{

display:grid;

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

gap:35px;

margin-top:70px;

}

.membership-card{

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.10);

backdrop-filter:blur(10px);

padding:45px;

border-radius:22px;

transition:.35s;

}

.membership-card:hover{

background:rgba(255,255,255,.14);

transform:translateY(-8px);

}

.membership-card h3{

color:white;

margin-bottom:18px;

}

.membership-card p{

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

}

/*=====================================================
CONSULTATION
=====================================================*/

.consultation{

padding:140px 0;

background:var(--cream);

}

.consultation-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:110px;

align-items:center;

}

.consultation-text{

max-width:720px;

}

.consultation-text h2{

font-size:72px;

margin-bottom:35px;

line-height:1.05;

}

.consultation-text p{

font-size:22px;

line-height:1.8;

margin-bottom:40px;

color:var(--gray);

}

.consultation-list{

margin-bottom:45px;

}

.consultation-list li{

font-size:21px;

margin-bottom:16px;

line-height:1.7;

  font-family:inherit;
}

.consultation-text .button-primary{

margin-top:10px;

}

.consultation-photo img{

width:100%;

border-radius:28px;

box-shadow:0 25px 60px rgba(0,0,0,.12);

}
/*=========================================
CONSULTATION FORM
=========================================*/

.consultation-form{

padding:120px 0;

background:#ECE5DB;

}

.form-card{

max-width:900px;

margin:auto;

background:white;

padding:60px;

border-radius:28px;

box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.form-card h2{

margin-bottom:20px;

}

.form-card p{

margin-bottom:40px;

}

.form-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin-bottom:20px;

}

.form-card input,

.form-card select,

.form-card textarea{

width:100%;

padding:18px;

border:1px solid #ddd;

border-radius:12px;

font-size:16px;

font-family:inherit;

background:white;

}

.form-card textarea{

margin-bottom:30px;

resize:vertical;

}

.form-card input:focus,

.form-card select:focus,

.form-card textarea:focus{

outline:none;

border-color:#B7864C;

}

.form-card button{

width:100%;

font-size:18px;

padding:18px;

cursor:pointer;

}

@media(max-width:768px){

.form-grid{

grid-template-columns:1fr;

}

.form-card{

padding:35px;

}

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

.contact{

background:var(--cream);

}

.contact-box{

background:var(--navy);

padding:80px;

border-radius:30px;

text-align:center;

box-shadow:0 30px 70px rgba(15,39,71,.18);

}

.contact-box h2{

color:white;

margin-bottom:20px;

}

.contact-box p{

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

max-width:700px;

margin:0 auto 35px;

}

.contact-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.contact .button-primary{

background:var(--copper);

}

.contact .button-primary:hover{

background:#9d6f3f;

}

.contact .button-secondary{

border-color:white;

color:white;

}

.contact .button-secondary:hover{

background:white;

color:var(--navy);

}

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

footer{

background:#0B1E37;

padding:70px 0 35px;

text-align:center;

}

.footer-container{

display:flex;

flex-direction:column;

align-items:center;

gap:18px;

}

.footer-logo{

width:190px;

height:auto;

}

footer p{

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

font-size:15px;

}
/*=====================================================
TABLETS
=====================================================*/

@media (max-width:1100px){

.container{

width:94%;

}

header .container{

gap:25px;

}

.logo img{

width:180px;

}

nav ul{

gap:22px;

}

.hero{

min-height:900px;

}

.hero-content{

max-width:650px;

padding-top:140px;

}

.hero h1{

font-size:62px;

}

.services-grid{

grid-template-columns:1fr 1fr;

}

.membership-grid{

grid-template-columns:1fr;

}

.assessment-wrapper{

grid-template-columns:1fr;

}

.assessment-photo{

order:-1;

}

.contact-box{

padding:60px 40px;

}

}

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

@media (max-width:768px){

section{

padding:80px 0;

}

header{

padding:14px 0;

}

header .container{

flex-direction:column;

gap:18px;

}

.logo img{

width:165px;

}

nav ul{

flex-wrap:wrap;

justify-content:center;

gap:18px;

}

.hero{

min-height:800px;

}

.hero-content{

padding-top:120px;

text-align:center;

margin:auto;

}

.hero h1{

font-size:46px;

}

.hero p{

font-size:18px;

margin-left:auto;

margin-right:auto;

}

.hero-buttons{

justify-content:center;

flex-direction:column;

align-items:center;

}

.hero-buttons a{

width:100%;

max-width:320px;

}

.services-grid{

grid-template-columns:1fr;

}

.membership-grid{

grid-template-columns:1fr;

}

.contact-buttons{

flex-direction:column;

align-items:center;

}

.contact-buttons a{

width:100%;

max-width:320px;

}

.contact-box{

padding:50px 30px;

}

.footer-logo{

width:170px;

}

}

/*=====================================================
SMALL PHONES
=====================================================*/

@media (max-width:480px){

.hero h1{

font-size:38px;

}

h2{

font-size:36px;

}

.logo img{

width:150px;

}

.button-primary,

.button-secondary,

.nav-button{

width:100%;

}

}
/*=====================================================
FINAL POLISH
=====================================================*/

/* Smooth transitions */

*{

transition:
background-color .3s ease,
color .3s ease,
border-color .3s ease,
box-shadow .3s ease,
transform .3s ease;

}

/* Better image rendering */

img{

image-rendering:auto;

}

/* Softer card shadows */

.service-card,
.membership-card,
.contact-box{

box-shadow:
0 15px 40px rgba(15,39,71,.08);

}

.service-card:hover,
.membership-card:hover{

box-shadow:
0 25px 60px rgba(15,39,71,.15);

}

/* Better spacing */

section{

position:relative;

}

section:not(.hero){

padding-top:120px;

padding-bottom:120px;

}

/* Hero spacing */

.hero-content{

padding-left:30px;

padding-right:30px;

}

/* Hero buttons */

.hero-buttons{

margin-top:45px;

}

/* Rounded images */

.hero-image img,

.assessment-photo img{

border-radius:28px;

}

/* Navigation */

nav a{

padding:6px 0;

}

nav a:hover{

color:var(--copper);

}

/* Button polish */

.button-primary,

.nav-button{

letter-spacing:.3px;

font-size:15px;

}

.button-primary:hover,

.nav-button:hover{

transform:translateY(-2px);

}

.button-secondary:hover{

transform:translateY(-2px);

}

/* Membership cards */

.membership-card{

overflow:hidden;

position:relative;

}

.membership-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:var(--copper);

}

/* Contact section */

.contact-box{

border:1px solid rgba(255,255,255,.08);

}

/* Footer */

footer{

border-top:4px solid var(--copper);

}

/* Scroll offset */

html{

scroll-padding-top:100px;

}

/* Selection color */

::selection{

background:var(--copper);

color:white;

}
/* Scroll Header */

header.scrolled{

background:rgba(245,241,234,.98);

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

}

/* Fade Animation */

.hidden{

opacity:0;

transform:translateY(45px);

transition:all .8s ease;

}

.show{

opacity:1;

transform:translateY(0);

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

.thank-you{

min-height:100vh;

background:var(--cream);

display:flex;

align-items:center;

justify-content:center;

padding:120px 0;

}

.thank-card{

max-width:850px;

margin:auto;

background:white;

padding:70px;

border-radius:30px;

text-align:center;

box-shadow:0 30px 70px rgba(15,39,71,.08);

}

.thank-logo{

width:220px;

margin:0 auto 40px;

}

.thank-check{

width:90px;

height:90px;

border-radius:50%;

background:var(--copper);

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:42px;

font-weight:bold;

margin:0 auto 35px;

}

.thank-card h1{

margin:25px 0;

}

.thank-card p{

max-width:650px;

margin:0 auto 50px;

line-height:1.8;

}

.next-steps{

margin:60px 0;

}

.step{

display:flex;

align-items:center;

gap:20px;

margin-bottom:22px;

text-align:left;

}

.step-number{

width:44px;

height:44px;

background:var(--navy);

color:white;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

flex-shrink:0;

}

.thank-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-top:50px;

flex-wrap:wrap;

}

@media(max-width:768px){

.thank-card{

padding:40px;

}

.step{

align-items:flex-start;

}

}
/* ======================================================
TABLETS
====================================================== */

@media screen and (max-width:1024px){

.container{

width:92%;

}

header .container{

flex-wrap:wrap;

justify-content:center;

gap:20px;

}

.logo img{

width:180px;

}

nav ul{

gap:22px;

flex-wrap:wrap;

justify-content:center;

}

.hero{

min-height:850px;

}

.hero-content{

padding-top:140px;

text-align:center;

max-width:700px;

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.services-grid,

.membership-grid{

grid-template-columns:1fr;

}

.consultation-wrapper{

grid-template-columns:1fr;

gap:50px;

}

.consultation-photo{

order:-1;

}

.contact-box{

padding:60px 35px;

}

}

/* ======================================================
PHONE
====================================================== */

@media screen and (max-width:768px){

header{

padding:15px 0;

}

header .container{

flex-direction:column;

gap:18px;

}

.logo img{

width:165px;

}

nav ul{

flex-wrap:wrap;

justify-content:center;

gap:16px;

}

.nav-button{

display:none;

}

/* HERO */

.hero{

height:auto;

min-height:100vh;

}

.hero-content{

padding-top:170px;

padding-left:25px;

padding-right:25px;

}

.hero h1{

font-size:48px;

line-height:1;

}

.hero p{

font-size:18px;

max-width:100%;

}

.hero-buttons{

flex-direction:column;

gap:15px;

}

.hero-buttons a{

width:100%;

}

/* SECTION TITLES */

h2{

font-size:40px;

line-height:1.1;

}

.section-header{

margin-bottom:45px;

}

/* SERVICES */

.service-card{

padding:30px;

}

/* MEMBERSHIP */

.membership-card{

padding:30px;

}

/* CONSULTATION */

.consultation{

padding:90px 0;

}

.consultation-text{

text-align:center;

}

.consultation-text h2{

font-size:44px;

}

.consultation-list{

text-align:left;

}

.consultation-photo img{

margin-top:20px;

}

/* FORM */

.form-card{

padding:35px;

}

.form-grid{

grid-template-columns:1fr;

}

.form-card button{

width:100%;

}

/* CONTACT */

.contact-box{

padding:40px 25px;

}

.contact-buttons{

flex-direction:column;

gap:15px;

}

.contact-buttons a{

width:100%;

}

/* FOOTER */

.footer-container{

text-align:center;

}

.footer-logo{

width:170px;

margin:auto;

}

}

/* ======================================================
SMALL PHONES
====================================================== */

@media screen and (max-width:480px){

.hero h1{

font-size:38px;

}

.hero p{

font-size:17px;

}

h2{

font-size:34px;

}

.logo img{

width:145px;

}

.button-primary,

.button-secondary{

font-size:16px;

padding:15px 20px;

}

}
/* ==========================================
MOBILE MENU
========================================== */

.hamburger{

display:none;

background:none;

border:none;

font-size:34px;

color:var(--navy);

cursor:pointer;

}

/* Mobile */

@media(max-width:768px){

.hamburger{

display:block;

z-index:1002;

}

.nav-button{

display:none;

}

nav{

position:fixed;

top:0;

right:-100%;

width:290px;

height:100vh;

background:var(--cream);

padding-top:120px;

transition:.35s;

box-shadow:-10px 0 40px rgba(0,0,0,.15);

z-index:1001;

}

nav.open{

right:0;

}

nav ul{

display:flex;

flex-direction:column;

gap:35px;

padding-left:40px;

}

nav a{

font-size:20px;

}

}
/* ===========================
CONSULTATION MODAL
=========================== */

.modal{

display:none;

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

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

z-index:9999;

overflow:auto;

padding:40px 20px;

}

.modal-content{

background:#F5F1EA;

max-width:900px;

margin:40px auto;

border-radius:30px;

padding:50px;

position:relative;

animation:fadeUp .35s ease;

}

.close-modal{

position:absolute;

top:20px;

right:30px;

font-size:42px;

cursor:pointer;

color:#102847;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/* ==========================================
CONSULTATION POPUP - MOBILE
========================================== */

@media (max-width:768px){

.consultation-modal{

width:94%;

max-width:420px;

max-height:90vh;

overflow-y:auto;

padding:28px 24px;

border-radius:20px;

}

.consultation-modal h2{

font-size:34px;

line-height:1.1;

margin-bottom:18px;

text-align:center;

}

.consultation-modal p{

font-size:16px;

line-height:1.6;

margin-bottom:28px;

text-align:center;

}

.consultation-modal form{

display:flex;

flex-direction:column;

gap:18px;

}

.consultation-modal input,

.consultation-modal select,

.consultation-modal textarea{

width:100%;

padding:16px;

font-size:16px;

border-radius:12px;

}

.consultation-modal textarea{

min-height:120px;

resize:vertical;

}

.consultation-modal .button-primary{

width:100%;

padding:18px;

font-size:17px;

margin-top:8px;

}

.close-modal{

top:18px;

right:18px;

font-size:28px;

}

}