:root{

--green:#526B59;
--sage:#A6B5A3;
--sand:#F6F2EB;
--gold:#C8A96B;
--dark:#323232;

--glass:rgba(82,107,89,.18);
--glass-dark:rgba(18,30,24,.92);

}



/* =========================
RESET
========================= */


*{

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

}


html{

scroll-behavior:smooth;

}


body{

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

color:var(--dark);

background:var(--sand);

overflow-x:hidden;

}





.container{

width:90%;

max-width:1200px;

margin:auto;

}





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


.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;


background:var(--glass);

backdrop-filter:blur(16px);

-webkit-backdrop-filter:blur(16px);


border-bottom:1px solid rgba(255,255,255,.18);

}



.nav{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

position:relative;

}





.logo img{

width:150px;

height:auto;

border-radius:20px;

object-fit:contain;

}





#main-nav{

display:flex;

align-items:center;

}



#main-nav a{

color:white;

font-size:15px;

font-weight:400;

text-decoration:none;

margin-left:30px;

transition:.3s ease;

}



#main-nav a:hover{

color:var(--gold);

}





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


.menu-toggle{

display:none;

background:none;

border:0;

cursor:pointer;

z-index:1100;

}



.menu-toggle span{

display:block;

width:28px;

height:2px;

background:white;

margin:6px 0;

transition:.3s ease;

}





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


.hero{

min-height:100vh;

min-height:100svh;

position:relative;

display:flex;

align-items:center;


background:

linear-gradient(
90deg,
rgba(30,45,35,.78),
rgba(30,45,35,.35)
),

url("../assets/images/hero.jpg");


background-size:cover;

background-position:center;

}



.hero-overlay{

position:absolute;

inset:0;


background:

linear-gradient(
to bottom,
transparent,
rgba(0,0,0,.35)
);

}



.hero-content{

position:relative;

z-index:2;

color:white;

max-width:850px;

animation:fadeUp 1.2s ease forwards;

}





.hero-label{

font-size:13px;

letter-spacing:3px;

font-weight:500;

margin-bottom:35px;

opacity:.9;

}



.hero h1{

font-family:'Cormorant Garamond',serif;

font-size:100px;

line-height:.85;

font-weight:500;

letter-spacing:-2px;

}


.hero h1 span{

font-style:italic;

color:var(--gold);

}


.hero-text{

font-size:24px;

line-height:1.6;

font-weight:300;

margin:35px 0 45px;

}





/* BUTTONS */


.buttons{

display:flex;

gap:20px;

}



.btn,
.btn-outline{

padding:16px 34px;

border-radius:50px;

font-size:15px;

text-decoration:none;

transition:.3s ease;

}



.btn{

background:var(--gold);

color:white;

}



.btn:hover{

transform:translateY(-3px);

}



.btn-outline{

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

color:white;

}



.btn-outline:hover{

background:white;

color:var(--green);

}





.scroll{

position:absolute;

bottom:-120px;

left:0;

display:flex;

align-items:center;

gap:15px;

font-size:13px;

letter-spacing:2px;

opacity:.8;

}



.scroll span{

width:40px;

height:1px;

background:white;

}





/* =========================
ANIMATION
========================= */


@keyframes fadeUp{


from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}


}





/* =========================
PHILOSOPHY
========================= */


.philosophy{

background:white;

padding:120px 0;

}



.statement{

max-width:900px;

margin:auto;

text-align:center;

}



.section-label{

font-size:12px;

letter-spacing:3px;

color:var(--green);

font-weight:600;

}



.statement h2{

font-family:'Cormorant Garamond',serif;

font-size:55px;

font-weight:500;

line-height:1.2;

margin:35px 0;

}



.statement p{

font-size:18px;

line-height:1.8;

max-width:750px;

margin:auto;

color:#555;

}





/* =========================
PILLARS
========================= */


.pillars{

display:grid;

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

gap:40px;

margin-top:90px;

}



.pillar{

background:var(--sand);

padding:45px 35px;

border-radius:25px;

transition:.4s ease;

}



.pillar:hover{

transform:translateY(-8px);

}



.icon{

width:55px;

height:55px;

border-radius:50%;

background:var(--green);

color:white;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:30px;

}





.pillar h3{

font-family:'Cormorant Garamond',serif;

font-size:38px;

font-weight:500;

margin-bottom:15px;

}



.pillar p{

line-height:1.7;

color:#555;

}





/* =========================
FRAMEWORK
========================= */


.framework{

background:var(--sand);

padding:120px 0;

}



.framework-header{

max-width:850px;

margin:auto;

text-align:center;

}



.framework-header h2{

font-family:'Cormorant Garamond',serif;

font-size:55px;

font-weight:500;

margin:35px 0;

}



.framework-header p{

font-size:18px;

line-height:1.8;

color:#555;

}





/* TIMELINE */


.timeline{

max-width:800px;

margin:90px auto 0;

position:relative;

}



.timeline::before{

content:"";

position:absolute;

left:22px;

top:0;

bottom:0;

width:1px;

background:var(--sage);

}



.step{

display:flex;

gap:40px;

position:relative;

margin-bottom:60px;

}



.number{

width:45px;

height:45px;

border-radius:50%;

background:var(--green);

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:13px;

flex-shrink:0;

z-index:2;

}



.content{

background:white;

padding:35px;

border-radius:25px;

flex:1;

}



.content h3{

font-family:'Cormorant Garamond',serif;

font-size:38px;

font-weight:500;

margin-bottom:15px;

}



.content p{

line-height:1.7;

color:#555;

}


/* =========================
INTRO
========================= */


.intro{

padding:120px 0;

text-align:center;

}



.intro h2{

font-family:'Cormorant Garamond',serif;

font-size:55px;

font-weight:500;

line-height:1.2;

margin-bottom:35px;

}



.intro p{

max-width:800px;

margin:auto;

font-size:18px;

line-height:1.8;

color:#555;

}


/* =========================
CARDS
========================= */


.cards{

display:grid;

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

gap:30px;

padding-bottom:100px;

}



.card{

background:white;

padding:40px;

border-radius:20px;

transition:.4s ease;

}



.card:hover{

transform:translateY(-8px);

}



.card h3{

font-family:'Cormorant Garamond',serif;

font-size:36px;

margin-bottom:15px;

}



.card p{

color:#555;

line-height:1.7;

}





/* =========================
MATERIALS
========================= */


.materials{

background:var(--sand);

padding:120px 0;

}



.materials-header{

max-width:800px;

margin:auto;

text-align:center;

}



.materials-header h2{

font-family:'Cormorant Garamond',serif;

font-size:55px;

margin:35px 0;

}



.materials-header p{

font-size:18px;

line-height:1.8;

color:#555;

}



.material-grid{

display:grid;

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

gap:30px;

margin-top:70px;

}



.material-card{

background:white;

padding:40px;

border-radius:25px;

transition:.4s ease;

}



.material-card:hover{

transform:translateY(-8px);

}



.pdf{

width:55px;

height:55px;

border-radius:50%;

background:var(--green);

color:white;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:30px;

}



.material-card h3{

font-family:'Cormorant Garamond',serif;

font-size:34px;

margin-bottom:15px;

}



.material-card p{

line-height:1.7;

color:#555;

margin-bottom:20px;

}



.material-card span{

display:block;

font-size:13px;

color:#888;

margin-bottom:25px;

}



.material-card a{

display:inline-block;

padding:12px 25px;

background:var(--green);

border-radius:30px;

color:white;

text-decoration:none;

transition:.3s;

}



.material-card a:hover{

background:var(--gold);

}



/* =========================
SIMPLE SECTIONS
========================= */


section{

scroll-margin-top:90px;

}


.simple-section{

padding:120px 0;

background:white;

text-align:center;

}


.simple-section:nth-child(even){

background:var(--sand);

}


.simple-section .container{

max-width:800px;

}


.simple-section h2{

font-family:'Cormorant Garamond',serif;

font-size:55px;

font-weight:500;

margin:35px 0;

}


.simple-section p{

font-size:18px;

line-height:1.8;

color:#555;

}



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


footer{

background:var(--green);

color:white;

padding:50px 0;

}



footer p{

font-family:'Cormorant Garamond',serif;

font-size:32px;

margin-bottom:15px;

}



footer small{

display:block;

margin-top:25px;

opacity:.7;

}





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


@media(max-width:800px){



.menu-toggle{

display:block;

}



#main-nav{

position:absolute;

top:100%;

left:0;

width:100%;


display:flex;

flex-direction:column;

align-items:center;


padding:35px 0;


background:

rgba(18,30,24,.92);


@supports (backdrop-filter:blur(20px)){


background:

linear-gradient(
135deg,
rgba(18,30,24,.75),
rgba(82,107,89,.65)
);


backdrop-filter:blur(25px);

-webkit-backdrop-filter:blur(25px);


}



border-radius:0 0 25px 25px;


border-top:1px solid rgba(255,255,255,.18);


box-shadow:

0 25px 60px rgba(0,0,0,.45);


opacity:0;

visibility:hidden;

transform:translateY(-20px);

transition:.35s ease;

}



#main-nav.active{

opacity:1;

visibility:visible;

transform:translateY(0);

}



#main-nav a{

margin:14px 0;

font-size:18px;

}



.hero{

min-height:90vh;

min-height:90svh;

padding-top:80px;

}



.hero-content{

padding-top:80px;

}



.hero h1{

font-size:clamp(45px,12vw,60px);

}



.hero-text{

font-size:19px;

}



.hero-label{

font-size:11px;

}



.buttons{

flex-direction:column;

}



.scroll{

display:none;

}



.logo img{

width:120px;

}



.statement h2{

font-size:38px;

}



.pillars,
.cards,
.material-grid{

grid-template-columns:1fr;

}



.pillar{

padding:35px 25px;

}



.framework,
.materials{

padding:80px 0;

}



.framework-header h2,
.materials-header h2{

font-size:38px;

}


.intro{

padding:80px 0;

}


.intro h2{

font-size:38px;

}


.intro p{

font-size:16px;

}


.step{

gap:20px;

margin-bottom:40px;

}



.content{

padding:25px;

}



.content h3{

font-size:30px;

}


.timeline::before{

left:22px;

}


.step{

align-items:flex-start;

}


section{

scroll-margin-top:90px;

}


.simple-section{

padding:80px 0;

}


.simple-section h2{

font-size:38px;

}


.simple-section p{

font-size:16px;

}



footer{

text-align:center;

}



}



/* =========================
HAMBURGER ANIMATION
========================= */


.menu-toggle.open span:nth-child(1){

transform:rotate(45deg) translate(5px,5px);

}



.menu-toggle.open span:nth-child(2){

opacity:0;

}



.menu-toggle.open span:nth-child(3){

transform:rotate(-45deg) translate(6px,-6px);

}