:root{
  --bg0:#071513;
  --bg1:#0B201B;
  --brand:#0E2A23;
  --brand2:#12362D;
  --text:#F7F4EF;
  --muted:rgba(247,244,239,.72);
  --muted2:rgba(247,244,239,.55);
  --line:rgba(239,233,225,.12);
  --glass:rgba(247,244,239,.06);
  --gold:#B9A46D;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow2: 0 0 0 1px rgba(185,164,109,.22), 0 18px 45px rgba(0,0,0,.45);
  --r1: 28px;
  --r2: 36px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(900px 700px at 80% 30%, rgba(185,164,109,.05), transparent 60%),
    radial-gradient(900px 700px at 40% 90%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 40%, var(--bg0) 100%);
}

a{color:inherit}
img{max-width:100%; display:block}
.container{max-width:1120px; margin:0 auto; padding:0 20px}
@media (min-width: 640px){ .container{padding:0 24px} }
@media (min-width: 1024px){ .container{padding:0 32px} }

/* Top bar */

.brand-mark-img{
  width:36px;
  height:36px;
  max-width:36px;
  max-height:36px;
  min-width:36px;
  min-height:36px;

  object-fit: contain;
  display:block;

  border-radius:18px;
  border:1px solid rgba(239,233,225,.12);
  background: rgba(18,54,45,.25);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.topbar{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line);
  background: rgba(7,21,19,.55);
  backdrop-filter: blur(10px);
}
.topbar-inner{
  height:64px; display:flex; align-items:center; justify-content:space-between;
}
.brand{
  display:flex; gap:10px; align-items:center; text-decoration:none;
}
.brand-mark{
  width:36px; height:36px; border-radius:18px;
  border:1px solid var(--line);
  background: rgba(18,54,45,.45);
  box-shadow: var(--shadow);
}
.brand-text{line-height:1.1}
.brand-text strong{font-size:14px; font-weight:650; letter-spacing:-.02em}
.brand-text span{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted2); margin-top:2px}

.nav{display:none; gap:22px; align-items:center}
.nav a{font-size:14px; color:var(--muted); text-decoration:none}
.nav a:hover{color:var(--text)}
@media (min-width: 900px){ .nav{display:flex} }

.iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:18px;
  border:1px solid var(--line);
  background: rgba(247,244,239,.05);
  color: var(--text);
}
.iconbtn:hover{background: rgba(247,244,239,.09)}
@media (min-width: 900px){ .iconbtn{display:none} }

/* Mobile drawer */
.drawer-backdrop{
  position:fixed; inset:0; z-index:60;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  display:none;
}
.drawer{
  position:fixed; right:0; top:0; height:100%; width:min(86vw, 380px);
  z-index:61; border-left:1px solid var(--line);
  background: rgba(7,21,19,.95);
  box-shadow: var(--shadow);
  transform: translateX(110%);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
  padding:18px;
}
.drawer.open{transform:translateX(0)}
.drawer-backdrop.open{display:block}
.drawer-header{display:flex; align-items:center; justify-content:space-between}
.drawer-links{margin-top:16px; display:grid; gap:10px}
.drawer-links a{
  text-decoration:none;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(239,233,225,.10);
  background: rgba(247,244,239,.05);
  color: var(--muted);
}
.drawer-links a:hover{color:var(--text)}
.drawer-cta{margin-top:14px}
.drawer-meta{margin-top:10px; font-size:12px; color:var(--muted2)}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px;
  border-radius:18px;
  border:1px solid var(--line);
  text-decoration:none;
  font-size:14px; font-weight:600;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  will-change:transform;
}
.btn.primary{
  background: rgba(18,54,45,.70);
  box-shadow: var(--shadow);
}
.btn.secondary{
  background: rgba(247,244,239,.05);
}
.btn:hover{transform: translateY(-2px)}
.btn.primary:hover{box-shadow: var(--shadow2); background: rgba(24,68,56,.72)}
.btn.secondary:hover{background: rgba(247,244,239,.09)}
.btn.full{width:100%}

/* Hero */
.hero{
  position:relative;
  min-height: 92vh;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background-image: url("cedar-mountain.png");
  background-size: cover;
  background-position: center;
  transform: translateY(0);
  filter: contrast(.92) saturate(.92);
  will-change: transform;
}
.hero-overlay{
  position:absolute; inset:0;
  background: rgba(11,32,27,.80);
}
.hero-grad{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(7,21,19,.25), transparent 45%, rgba(7,21,19,.78));
}
.hero-inner{
  position:relative;
  padding: 90px 0 70px;
  display:flex; flex-direction:column; justify-content:center;
}
.pill{
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(239,233,225,.14);
  background: rgba(247,244,239,.05);
  font-size:12px; letter-spacing:.06em;
  color: rgba(247,244,239,.80);
}
.h1{
  margin:16px 0 0;
  font-size: clamp(36px, 5vw, 60px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:650;
}
.lead{
  margin:16px 0 0;
  max-width: 760px;
  font-size: clamp(16px, 2vw, 18px);
  color: var(--muted);
  line-height:1.6;
}
.hero-actions{margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.hero-actions .meta{font-size:14px; color: var(--muted2)}
.hero-cards{
  margin-top:38px;
  display:grid; gap:14px;
}
@media (min-width: 720px){ .hero-cards{grid-template-columns: repeat(3, 1fr)} }
.mini{
  border-radius: var(--r1);
  border:1px solid rgba(239,233,225,.10);
  background: rgba(247,244,239,.05);
  padding:16px;
  backdrop-filter: blur(10px);
}
.mini .k{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color: var(--muted2)}
.mini .v{margin-top:8px; font-size:14px; color: rgba(247,244,239,.80); line-height:1.5}

/* Featured development image */
.feature{
  position: relative;
  min-height: 70vh;
  overflow: hidden;
}

.feature-bg{
  position:absolute;
  inset:0;
  background-image: url("subdivision.jpg");
  background-size: cover;
  background-position: center;
  filter: contrast(.9) saturate(.9);
}

.feature-overlay{
  position:absolute;
  inset:0;
  background: rgba(11,32,27,.82);
}

.feature-inner{
  position:relative;
  display:flex;
  align-items:center;
  min-height:70vh;
}

/* Sections */
.section{padding: 84px 0}
.section.alt{
  position:relative;
  background:
    linear-gradient(180deg, rgba(7,21,19,0) 0%, rgba(11,32,27,.38) 45%, rgba(7,21,19,0) 100%);
}
/* Topographic background texture */
.section.topo{
  position: relative;
  overflow: hidden;
}

.section.topo::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("topo.jpg");
  background-size: cover;
  background-position: center;
  opacity:.18;
  mix-blend-mode: lighten;
  pointer-events:none;
}
.grid-3{display:grid; gap:16px}
@media (min-width: 960px){ .grid-3{grid-template-columns: repeat(3, 1fr)} }
.grid-2{display:grid; gap:16px}
@media (min-width: 960px){ .grid-2{grid-template-columns: repeat(2, 1fr)} }

.kicker{margin-top:14px; max-width: 760px; color: var(--muted); line-height:1.7}
.h2{margin:10px 0 0; font-size: clamp(24px, 3vw, 34px); letter-spacing:-.02em; font-weight:650}
.sub{margin-top:12px; color: var(--muted); line-height:1.7; max-width: 760px}

.card{
  position:relative;
  border-radius: var(--r2);
  border:1px solid rgba(239,233,225,.14);
  background: rgba(247,244,239,.06);
  padding:18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.card:hover{transform: translateY(-4px); background: rgba(247,244,239,.07); box-shadow: var(--shadow2)}
.card .title{display:flex; gap:12px; align-items:flex-start}
.badge{
  width:44px; height:44px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(239,233,225,.14);
  background: rgba(18,54,45,.35);
}
.card h3{margin:0; font-size:16px; letter-spacing:-.01em}
.card p{margin:8px 0 0; font-size:14px; color: var(--muted); line-height:1.6}

/* Criteria list */
.checklist{margin-top:18px; display:grid; gap:12px}
.check{display:flex; gap:12px; align-items:flex-start; color: rgba(247,244,239,.78); line-height:1.6}
.check .ic{
  width:30px; height:30px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(239,233,225,.12);
  background: rgba(18,54,45,.32);
  flex: 0 0 auto;
}

/* Process */
.progress{
  height:2px; width:100%;
  border-radius:999px;
  background: rgba(239,233,225,.10);
  overflow:hidden;
  margin:20px 0 22px;
}
.progress > span{
  display:block; height:100%;
  width: 0%;
  background: rgba(185,164,109,.75);
  transition: width .2s linear;
}

/* Split cards */
.split{
  border-radius: 34px;
  border:1px solid rgba(239,233,225,.12);
  background: rgba(247,244,239,.05);
  padding:24px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.split:before{
  content:"";
  position:absolute; inset:-30% -30%;
  background: radial-gradient(700px 420px at 20% 20%, rgba(185,164,109,.08), transparent 60%);
  opacity:.9;
}
.split > *{position:relative}
.split .tag{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color: var(--muted2)}
.split h3{margin:10px 0 0; font-size:22px; letter-spacing:-.02em}
.split p{margin:10px 0 0; color: var(--muted); line-height:1.7}

/* FAQ */
.faq{display:grid; gap:12px}
@media (min-width: 960px){ .faq{grid-template-columns: repeat(2, 1fr)} }
.faq-item{
  border-radius: 28px;
  border:1px solid rgba(239,233,225,.12);
  background: rgba(247,244,239,.05);
  overflow:hidden;
}
.faq-q{
  width:100%;
  text-align:left;
  padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  border:none;
  background: transparent;
  color: var(--text);
  cursor:pointer;
}
.faq-q strong{font-size:14px}
.faq-a{
  padding:0 18px 16px;
  color: var(--muted);
  font-size:14px;
  line-height:1.7;
  display:none;
}
.faq-item.open .faq-a{display:block}
.chev{transition: transform .2s ease}
.faq-item.open .chev{transform: rotate(90deg)}

/* Contact */
.contact-wrap{
  border-radius: 40px;
  border:1px solid rgba(239,233,225,.12);
  background: rgba(11,32,27,.55);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  padding: 26px;
}
@media (min-width: 720px){ .contact-wrap{padding: 44px} }
.form{
  margin-top:20px;
  display:grid;
  gap:12px;
}
@media (min-width: 960px){ .form{grid-template-columns: repeat(2, 1fr)} }
.field label{
  display:block;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--muted2);
  margin-bottom:8px;
}
.input, textarea{
  width:100%;
  border-radius: 18px;
  border:1px solid rgba(239,233,225,.12);
  background: rgba(247,244,239,.05);
  color: var(--text);
  padding:12px 14px;
  font-size:14px;
}
textarea{min-height:130px; resize:vertical}
.input::placeholder, textarea::placeholder{color: rgba(247,244,239,.35)}
.note{font-size:12px; color: rgba(247,244,239,.48)}
.form-actions{grid-column: 1 / -1; display:flex; flex-direction:column; gap:10px}
@media (min-width: 720px){ .form-actions{flex-direction:row; align-items:center; justify-content:space-between} }

/* Footer */
.footer{
  border-top:1px solid var(--line);
  padding: 34px 0;
}
.footer-grid{display:grid; gap:20px}
@media (min-width: 960px){ .footer-grid{grid-template-columns: 1.2fr 1.8fr} }
.footer small{color: rgba(247,244,239,.55)}
.links{
  display:grid; gap:16px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px){ .links{grid-template-columns: repeat(3, 1fr)} }
.links h4{
  margin:0;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(247,244,239,.55);
}
.links a{display:block; margin-top:10px; font-size:14px; color: rgba(247,244,239,.70); text-decoration:none}
.links a:hover{color: rgba(247,244,239,.92)}

/* Reveal animations */
.reveal{opacity:0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.show{opacity:1; transform: translateY(0)}