@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600&family=Manrope:wght@400;500;600;700&display=swap');
@font-face{font-family:'Cabinet Grotesk';src:local('Cabinet Grotesk'),local('General Sans');font-weight:500 700;font-display:swap}
:root{
--river-slate:#4A6470;
--vineyard-olive:#7D8B69;
--meadow-sage:#A6B39A;
--amber-clay:#B46F4E;
--riesling-sand:#C5A56A;
--soft-mist:#F2F4F1;
--limestone:#DDE3DE;
--valley-charcoal:#2F3B3A;
--natural-ink:#2A302E;
--cta-from:#A95F43;
--cta-to:#C07A59;
--cta-hover:#C98667;
--overlay:rgba(47,59,58,0.32);
--overlay-dark:rgba(47,59,58,0.44);
--font-display:'Fraunces',Georgia,serif;
--font-head:'Cabinet Grotesk','Manrope',sans-serif;
--font-body:'Manrope',system-ui,sans-serif;
--font-meta:'IBM Plex Sans',monospace;
--radius:20px;
--radius-lg:24px;
--shadow-soft:0 12px 40px rgba(47,59,58,0.08);
--shadow-lift:0 18px 48px rgba(180,111,78,0.14);
--container:1180px;
--header-h:78px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
overflow-x:hidden!important;
max-width:100vw;
scroll-behavior:smooth;
}
body{
overflow-x:hidden!important;
max-width:100vw;
position:relative;
font-family:var(--font-body);
font-size:16px;
line-height:1.6;
color:var(--natural-ink);
background:var(--soft-mist);
-webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden;touch-action:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,textarea,select{font:inherit;color:inherit;border:none;background:none}
h1,h2,h3,h4{
font-family:var(--font-display);
font-weight:500;
letter-spacing:-0.02em;
line-height:1.15;
color:var(--natural-ink);
}
h1{font-size:clamp(2.4rem,5.5vw,4.6rem)}
h2{font-size:clamp(1.9rem,3.8vw,3.2rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.65rem)}
.eyebrow,.meta,.label{
font-family:var(--font-meta);
font-size:0.78rem;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--river-slate);
}
.lead{
font-size:clamp(1.05rem,1.6vw,1.2rem);
line-height:1.65;
color:rgba(42,48,46,0.82);
max-width:38rem;
}
.container{
width:min(100% - 2.5rem,var(--container));
margin-inline:auto;
}
.container-wide{
width:min(100% - 2rem,1320px);
margin-inline:auto;
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.5rem;
min-height:52px;
padding:0.85rem 1.7rem;
border-radius:999px;
font-family:var(--font-head);
font-weight:600;
font-size:0.95rem;
letter-spacing:0.01em;
cursor:pointer;
transition:background 0.35s ease,color 0.35s ease,transform 0.35s ease,box-shadow 0.35s ease,border-color 0.35s ease;
}
.btn-primary{
background:linear-gradient(135deg,var(--cta-from),var(--cta-to));
color:#F2F4F1;
box-shadow:0 10px 28px rgba(180,111,78,0.22);
}
.btn-primary:hover{
background:var(--cta-hover);
transform:translateY(-2px);
box-shadow:var(--shadow-lift);
}
.btn-secondary{
background:transparent;
border:1.5px solid var(--river-slate);
color:var(--river-slate);
}
.btn-secondary:hover{
background:var(--river-slate);
color:var(--soft-mist);
}
.btn-light{
background:rgba(242,244,241,0.12);
border:1.5px solid rgba(242,244,241,0.45);
color:var(--soft-mist);
}
.btn-light:hover{
background:var(--soft-mist);
color:var(--valley-charcoal);
}
.tag{
display:inline-flex;
align-items:center;
padding:0.35rem 0.75rem;
border-radius:999px;
background:var(--meadow-sage);
color:var(--valley-charcoal);
font-family:var(--font-meta);
font-size:0.72rem;
letter-spacing:0.06em;
text-transform:uppercase;
}
.divider{
height:1px;
width:100%;
background:linear-gradient(90deg,transparent,rgba(74,100,112,0.28),transparent);
border:0;
}
.site-header{
position:fixed;
inset:0 0 auto 0;
z-index:1000;
height:var(--header-h);
display:flex;
align-items:center;
background:rgba(242,244,241,0.86);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(74,100,112,0.08);
transition:background 0.3s ease,box-shadow 0.3s ease;
overflow-x:clip;
max-width:100%;
}
.site-header.is-scrolled{
background:rgba(242,244,241,0.96);
box-shadow:0 8px 30px rgba(47,59,58,0.06);
}
.site-header .container{
display:flex;
align-items:center;
justify-content:space-between;
gap:1.5rem;
width:min(100% - 2rem,var(--container));
}
.logo{
font-family:var(--font-display);
font-size:1.25rem;
font-weight:600;
letter-spacing:-0.02em;
color:var(--valley-charcoal);
}
.logo span{color:var(--amber-clay)}
.nav-desktop{
display:flex;
align-items:center;
gap:2rem;
}
.nav-desktop a{
font-family:var(--font-head);
font-weight:500;
font-size:0.92rem;
color:var(--natural-ink);
position:relative;
padding:0.25rem 0;
}
.nav-desktop a::after{
content:"";
position:absolute;
left:0;bottom:0;
width:0;height:1px;
background:var(--amber-clay);
transition:width 0.35s ease;
}
.nav-desktop a:hover::after,
.nav-desktop a.is-active::after{width:100%}
.burger{
display:none;
width:48px;height:48px;
align-items:center;justify-content:center;
flex-direction:column;gap:6px;
cursor:pointer;z-index:1100;
border-radius:12px;
}
.burger span{
display:block;width:22px;height:2px;
background:var(--valley-charcoal);
transition:transform 0.35s ease,opacity 0.35s ease;
}
.burger.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nav-mobile{
position:fixed;
inset:0;
z-index:1050;
background:rgba(47,59,58,0.96);
display:flex;
flex-direction:column;
justify-content:center;
padding:2rem;
transform:translateX(100%);
transition:transform 0.45s cubic-bezier(0.22,1,0.36,1);
visibility:hidden;
}
.nav-mobile.is-open{
transform:translateX(0);
visibility:visible;
}
.nav-mobile a{
font-family:var(--font-display);
font-size:clamp(1.8rem,6vw,2.6rem);
color:var(--soft-mist);
padding:0.85rem 0;
border-bottom:1px solid rgba(242,244,241,0.12);
min-height:56px;
display:flex;align-items:center;
}
.nav-mobile .nav-cta{
margin-top:2rem;
align-self:flex-start;
}
.site-footer{
background:var(--valley-charcoal);
color:rgba(242,244,241,0.78);
padding:5rem 0 2rem;
overflow-x:clip;
max-width:100%;
}
.footer-grid{
display:grid;
grid-template-columns:1.4fr 1fr 1fr 1fr;
gap:2.5rem;
margin-bottom:3.5rem;
}
.footer-brand .logo{color:var(--soft-mist);margin-bottom:1rem;display:inline-block}
.footer-brand p{max-width:28rem;line-height:1.65;font-size:0.95rem}
.footer-col h4{
font-family:var(--font-head);
font-size:0.85rem;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--riesling-sand);
margin-bottom:1.1rem;
}
.footer-col a,.footer-col p{
display:block;
font-size:0.92rem;
margin-bottom:0.65rem;
color:rgba(242,244,241,0.72);
transition:color 0.25s ease;
}
.footer-col a:hover{color:var(--soft-mist)}
.footer-bottom{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
gap:1rem;
padding-top:1.5rem;
border-top:1px solid rgba(242,244,241,0.12);
font-size:0.82rem;
font-family:var(--font-meta);
}
.footer-legal{display:flex;flex-wrap:wrap;gap:1.25rem}
.reveal{
opacity:0;
transform:translateY(28px);
transition:opacity 0.8s ease,transform 0.8s ease;
}
.reveal.is-in{opacity:1;transform:none}
.reveal-delay-1{transition-delay:0.1s}
.reveal-delay-2{transition-delay:0.2s}
.reveal-delay-3{transition-delay:0.3s}
.stagger > *{
opacity:0;
transform:translateY(18px);
transition:opacity 0.7s ease,transform 0.7s ease;
}
.stagger.is-in > *:nth-child(1){transition-delay:0.05s}
.stagger.is-in > *:nth-child(2){transition-delay:0.12s}
.stagger.is-in > *:nth-child(3){transition-delay:0.19s}
.stagger.is-in > *:nth-child(4){transition-delay:0.26s}
.stagger.is-in > *:nth-child(5){transition-delay:0.33s}
.stagger.is-in > *:nth-child(6){transition-delay:0.4s}
.stagger.is-in > *{opacity:1;transform:none}
@media (max-width:1024px){
.nav-desktop{display:none}
.burger{display:flex}
.footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
}
@media (max-width:720px){
.footer-grid{grid-template-columns:1fr}
.container{width:min(100% - 1.5rem,var(--container))}
.btn{width:100%;max-width:100%}
.hero-actions{flex-direction:column;align-items:stretch}
}