:root{
  --bg:#F9F8F6;
  --surface:#FFFFFF;
  --ink:#0F1E32;
  --ink-hover:#162B47;
  --sand:#EADDD7;
  --gold:#C5A059;
  --terracotta:#C07558;
  --success:#2C6E49;
  --border:#E8E1D9;
  --text-2:#57534E;
  --font-display:'Cabinet Grotesk','Outfit',sans-serif;
  --font-body:'Outfit',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}
h1,h2,h3,h4{font-family:var(--font-display); letter-spacing:-0.01em; color:var(--ink);}
.eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--terracotta);
}
.eyebrow.on-dark{color:var(--gold);}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(249,248,246,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; max-width:1180px; margin:0 auto;
}
.logo{display:flex; flex-direction:column; line-height:1.1;}
.logo .m{font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:.02em;}
.logo .p{font-family:var(--font-display); font-weight:800; font-size:1.25rem; color:var(--ink);}
.logo .p span{color:var(--terracotta);}
.nav-links{display:flex; gap:2px; align-items:center;}
.nav-links a{
  padding:10px 16px; font-size:.9rem; font-weight:500; color:var(--text-2);
  border-bottom:2px solid transparent; transition:all .2s ease;
}
.nav-links a:hover{color:var(--ink); border-bottom-color:var(--gold);}
.nav-cta{
  background:var(--ink); color:#fff !important; border-radius:8px; padding:10px 20px !important;
  font-weight:600 !important; border-bottom:none !important;
}
.nav-cta:hover{background:var(--ink-hover) !important; border-bottom:none !important;}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; transition:.25s;}

@media (max-width: 860px){
  .nav-links{
    position: absolute; 
    top: 64px; 
    left: 0; 
    width: 100%; 
    height: 100vh;
    background: #F9F8F6;
    flex-direction: column; 
    align-items: flex-start; 
    padding: 24px;
    transform: translateY(-150%); 
    transition: all .3s ease; 
    gap: 4px;
    z-index: 99;
    opacity: 0;
    pointer-events: none;
  }
  .nav-links.open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a{width:100%; padding:14px 8px; font-size:1.05rem;}
  .nav-toggle{display:block;}
  .nav-cta{width:100%; text-align:center; margin-top:8px;}
}

/* ---------- HERO ---------- */
.hero{
  background:var(--ink); color:var(--sand); position:relative; overflow:hidden;
  padding:100px 0 0;
}
.hero-grid{
  max-width:1180px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
}
.hero h1{
  font-size:clamp(2.6rem, 5.6vw, 4.4rem); color:#fff; font-weight:800; line-height:1.02;
  margin:18px 0 22px;
}
.hero h1 em{font-style:normal; color:var(--gold);}
.hero p.lead{
  font-size:1.15rem; color:#D8CFC4; max-width:480px; margin-bottom:32px; font-weight:300;
}
.btn-row{display:flex; gap:14px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:9px;
  font-weight:600; font-size:.95rem; cursor:pointer; transition:all .2s ease; border:1px solid transparent;
}
.btn-primary{background:var(--gold); color:var(--ink);}
.btn-primary:hover{background:#d4af6a; transform:translateY(-2px);}
.btn-outline{border-color:rgba(234,221,215,.35); color:#EADDD7;}
.btn-outline:hover{border-color:#EADDD7; background:rgba(255,255,255,.05);}

/* signature: live goal card */
.goal-card{
  background:var(--surface); border-radius:16px; padding:28px; color:var(--ink);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.5);
  transform:translateY(0) rotate(1.2deg);
  border:1px solid var(--border);
}
.goal-card .gc-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.goal-card .gc-head .tag{
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(44,110,73,.1); color:var(--success); padding:5px 10px; border-radius:20px;
  border:1px solid rgba(44,110,73,.2);
}
.goal-card h4{font-size:1.05rem; margin-bottom:4px;}
.goal-card .sub{font-size:.82rem; color:var(--text-2); margin-bottom:20px;}
.bar-row{margin-bottom:16px;}
.bar-row .labels{display:flex; justify-content:space-between; font-size:.75rem; color:var(--text-2); margin-bottom:6px;}
.bar-track{height:8px; border-radius:99px; background:var(--sand); overflow:hidden;}
.bar-fill{height:100%; border-radius:99px; width:0%; background:linear-gradient(90deg,var(--terracotta),var(--gold)); transition:width 1.4s cubic-bezier(.16,1,.3,1);}
.goal-card .stat-row{display:flex; gap:20px; margin-top:20px; padding-top:18px; border-top:1px solid var(--border);}
.goal-card .stat-row div{flex:1;}
.goal-card .stat-row .num{font-family:var(--font-display); font-weight:800; font-size:1.35rem;}
.goal-card .stat-row .lbl{font-size:.72rem; color:var(--text-2); text-transform:uppercase; letter-spacing:.08em;}

.hero-shade{
  position:absolute; left:0; right:0; bottom:0; height:120px;
  background:linear-gradient(180deg, transparent, var(--bg));
  pointer-events:none;
}
.dune{
  margin-top:70px; width:100%; height:110px; display:block;
}

/* ---------- SECTIONS ---------- */
section{padding:110px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem); margin-top:10px; font-weight:700;}
.section-head p{color:var(--text-2); margin-top:14px; font-size:1.05rem;}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* About */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.about-grid p{color:var(--text-2); font-size:1.05rem; margin-bottom:18px;}
.stat-cards{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.stat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px;
  transition:all .2s ease;
}
.stat-card:hover{transform:translateY(-4px); box-shadow:0 8px 24px rgba(15,30,50,.06); border-color:rgba(197,160,89,.5);}
.stat-card .num{font-family:var(--font-display); font-weight:800; font-size:2rem; color:var(--terracotta);}
.stat-card .lbl{font-size:.85rem; color:var(--text-2); margin-top:4px;}

/* Vision / Mission */
.vm-wrap{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.vm-grid{display:grid; grid-template-columns:1fr 1fr;}
.vm-col{padding:80px 56px; position:relative;}
.vm-col:first-child{border-right:1px solid var(--border);}
.vm-col .eyebrow{margin-bottom:16px; display:block;}
.vm-col h3{font-size:clamp(1.6rem,2.6vw,2.1rem); line-height:1.25; font-weight:700; margin-bottom:18px;}
.vm-col p{color:var(--text-2); font-size:1.02rem;}
@media (max-width: 860px){
  .vm-grid{grid-template-columns:1fr;}
  .vm-col:first-child{border-right:none; border-bottom:1px solid var(--border);}
  .vm-col{padding:56px 28px;}
  .about-grid{grid-template-columns:1fr; gap:40px;}
}

/* Products */
.products{background:var(--bg);}
.product-hero{
  background:var(--ink); border-radius:22px; padding:56px; color:#fff; margin-bottom:56px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; overflow:hidden; position:relative;
}
.product-hero .tag{color:var(--gold); font-weight:700; letter-spacing:.18em; font-size:.72rem; text-transform:uppercase;}
.product-hero h3{color:#fff; font-size:clamp(1.8rem,3vw,2.3rem); margin:14px 0 16px;}
.product-hero p{color:#D8CFC4; font-size:1.02rem; max-width:460px;}
.mini-badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px;}
.mini-badges span{
  font-size:.78rem; padding:7px 13px; border-radius:20px; border:1px solid rgba(234,221,215,.3); color:#EADDD7;
}
.feature-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.feature-card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px;
  transition:all .25s ease;
}
.feature-card:hover{transform:translateY(-6px); box-shadow:0 14px 32px rgba(15,30,50,.08); border-color:rgba(197,160,89,.5);}
.feature-card .icon{
  width:42px; height:42px; border-radius:10px; background:rgba(197,160,89,.12);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--terracotta);
}
.feature-card h4{font-size:1.02rem; margin-bottom:8px;}
.feature-card p{font-size:.88rem; color:var(--text-2);}
@media (max-width:960px){ .feature-grid{grid-template-columns:1fr 1fr;} .product-hero{grid-template-columns:1fr;} }
@media (max-width:560px){ .feature-grid{grid-template-columns:1fr;} }

/* Contact */
.contact{background:var(--ink); color:#fff;}
.contact .section-head p{color:#B9AFA2;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
.contact-info{display:flex; flex-direction:column; gap:22px;}
.ci-item{display:flex; gap:14px; align-items:flex-start;}
.ci-item .icon{
  width:38px; height:38px; border-radius:9px; background:rgba(197,160,89,.15); color:var(--gold);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ci-item .lbl{font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; color:#B9AFA2; margin-bottom:3px;}
.ci-item .val{font-size:1.02rem; color:#fff;}
form{display:flex; flex-direction:column; gap:14px;}
form input, form textarea{
  background:rgba(255,255,255,.06); border:1px solid rgba(234,221,215,.2); border-radius:9px;
  padding:14px 16px; color:#fff; font-family:var(--font-body); font-size:.95rem;
}
form input::placeholder, form textarea::placeholder{color:#8B8177;}
form input:focus, form textarea:focus{outline:2px solid var(--gold); outline-offset:1px;}
form button{
  background:var(--gold); color:var(--ink); border:none; padding:15px; border-radius:9px;
  font-weight:700; font-size:.95rem; cursor:pointer; margin-top:6px; transition:.2s;
}
form button:hover{background:#d4af6a;}

footer{
  background:var(--ink); border-top:1px solid rgba(234,221,215,.12); color:#8B8177;
  padding:26px 0; font-size:.85rem;
}
footer .container{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

@media (max-width:640px){
  .contact-grid{grid-template-columns:1fr;}
  section{padding:72px 0;}
  .hero-grid{grid-template-columns:1fr;}
  .hero{padding-top:24px;}
}