:root{
  --sand-deep:#120c07;
  --sand-dark:#1d130a;
  --sand-mid:#3a2614;
  --sand:#c9a06c;
  --sand-light:#e8cba0;
  --cream:#f6ead6;
  --ember:#ff7a3d;
  --ember-soft:#ff9d6b;
  --ink:#0d0805;
  --maxw:1060px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Sora',sans-serif;
  background:var(--sand-deep);
  color:var(--cream);
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:var(--ember);color:var(--ink)}

/* ---------- grain ---------- */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- nav (inner pages) ---------- */
.site-nav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  max-width:var(--maxw);margin:0 auto;width:100%;
  padding:20px 24px;
  background:rgba(18,12,7,.82);backdrop-filter:blur(10px);
}
.site-nav.bare{background:transparent;backdrop-filter:none}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-brand .brand-mark{width:30px;height:30px;flex:none}
.nav-brand .brand-name{
  font-family:'Fraunces',serif;font-weight:600;font-size:1.1rem;
  letter-spacing:.04em;color:var(--sand-light);
}
.nav-links{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.nav-links a{
  font-size:.86rem;color:var(--sand-light);text-decoration:none;
  letter-spacing:.02em;transition:color .2s ease;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ember-soft)}

/* ---------- hero ---------- */
.hero{
  min-height:92vh;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;
  padding:0 24px;
  background:
    radial-gradient(ellipse 120% 60% at 70% 110%, rgba(255,122,61,.22), transparent 60%),
    radial-gradient(ellipse 80% 50% at 20% 100%, rgba(201,160,108,.14), transparent 55%),
    var(--sand-deep);
}
.hero-inner{max-width:var(--maxw);margin:0 auto;width:100%}
.brand{
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  position:absolute;top:34px;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--maxw);padding:0 24px;
}
.brand-left{display:flex;align-items:center;gap:14px}
.brand-mark{width:34px;height:34px;flex:none}
.brand-name{
  font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;
  letter-spacing:.04em;color:var(--sand-light);
}
.kicker{
  font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--sand);margin-bottom:26px;
  opacity:0;animation:rise .9s ease .15s forwards;
}
h1{
  font-family:'Fraunces',serif;font-weight:600;
  font-size:clamp(2.6rem,7.2vw,5.4rem);
  line-height:1.04;letter-spacing:-.015em;
  max-width:14ch;
  opacity:0;animation:rise .9s ease .3s forwards;
}
h1 em{
  font-style:italic;color:var(--ember-soft);
}
.hero p.lede{
  margin-top:30px;max-width:46ch;font-weight:300;
  font-size:clamp(1rem,1.6vw,1.2rem);color:var(--sand-light);
  opacity:0;animation:rise .9s ease .45s forwards;
}
.hero-cta{
  margin-top:44px;display:flex;gap:18px;flex-wrap:wrap;
  opacity:0;animation:rise .9s ease .6s forwards;
}
.btn{
  display:inline-block;padding:14px 30px;border-radius:100px;
  font-size:.92rem;font-weight:500;text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-ember{
  background:var(--ember);color:var(--ink);
  box-shadow:0 6px 30px rgba(255,122,61,.35);
}
.btn-ember:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(255,122,61,.5)}
.btn-ghost{
  border:1px solid var(--sand-mid);color:var(--sand-light);
}
.btn-ghost:hover{background:var(--sand-dark);transform:translateY(-3px)}

/* dunes svg at hero base */
.dunes{
  position:absolute;left:0;right:0;bottom:-2px;width:100%;
  height:clamp(120px,22vw,260px);display:block;
}

@keyframes rise{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- sections ---------- */
section{padding:110px 24px;position:relative}
.wrap{max-width:var(--maxw);margin:0 auto}
.sec-label{
  font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ember-soft);margin-bottom:18px;
}
h2{
  font-family:'Fraunces',serif;font-weight:600;
  font-size:clamp(1.9rem,4vw,3rem);line-height:1.1;letter-spacing:-.01em;
  max-width:20ch;
}

/* ---------- inner page head ---------- */
.page-head{
  padding:140px 24px 70px;
  background:
    radial-gradient(ellipse 100% 60% at 50% -10%, rgba(255,122,61,.16), transparent 60%),
    var(--sand-deep);
}
.page-head h1{
  font-size:clamp(2.2rem,5.5vw,4rem);max-width:18ch;
  opacity:1;animation:none;
}
.page-head h1 em{font-style:italic;color:var(--ember-soft)}
.page-head .lede{
  margin-top:26px;max-width:54ch;font-weight:300;
  font-size:clamp(1rem,1.6vw,1.2rem);color:var(--sand-light);
}

/* ---------- prose ---------- */
.prose p{
  margin-top:26px;font-weight:300;max-width:62ch;
  font-size:clamp(1rem,1.5vw,1.15rem);color:var(--sand-light);
}
.prose h3{
  font-family:'Fraunces',serif;font-weight:600;font-size:1.45rem;
  margin-top:54px;color:var(--cream);
}
.prose strong{color:var(--cream);font-weight:500}
.prose a{color:var(--ember-soft);text-decoration:none;border-bottom:1px solid var(--sand-mid)}
.prose a:hover{border-color:var(--ember)}
.prose ul{margin:22px 0 0 0;padding:0;list-style:none;max-width:62ch}
.prose ul li{
  position:relative;padding-left:26px;margin-top:14px;font-weight:300;
  color:var(--sand-light);
}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.7em;width:10px;height:2px;
  background:var(--ember);border-radius:2px;
}

/* ---------- service cards ---------- */
.svc-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;margin-top:48px;
}
.svc-card{
  border:1px solid var(--sand-mid);border-radius:18px;padding:30px 28px;
  background:linear-gradient(160deg, rgba(58,38,20,.28), rgba(18,12,7,.4));
  transition:transform .25s ease,border-color .25s ease;
}
.svc-card:hover{transform:translateY(-4px);border-color:var(--ember)}
.svc-card h3{
  font-family:'Fraunces',serif;font-weight:600;font-size:1.3rem;color:var(--cream);
}
.svc-card p{margin-top:14px;font-weight:300;color:var(--sand-light);font-size:.98rem}

/* ---------- faq ---------- */
.faq-list{margin-top:48px;max-width:760px}
.faq-item{
  border-top:1px solid var(--sand-mid);padding:30px 0;
}
.faq-item:last-child{border-bottom:1px solid var(--sand-mid)}
.faq-item h3{
  font-family:'Fraunces',serif;font-weight:600;
  font-size:clamp(1.15rem,2.4vw,1.5rem);color:var(--cream);
}
.faq-item p{margin-top:14px;font-weight:300;color:var(--sand-light);max-width:62ch}

/* ---------- contact ---------- */
.contact{
  background:
    radial-gradient(ellipse 100% 80% at 50% 120%, rgba(255,122,61,.16), transparent 60%),
    var(--sand-deep);
  text-align:center;
}
.contact h2{margin:0 auto}
.contact p{margin:26px auto 40px;max-width:44ch;font-weight:300;color:var(--sand-light)}
.contact a.mail{
  font-family:'Fraunces',serif;font-size:clamp(1.3rem,3vw,2rem);
  color:var(--ember-soft);text-decoration:none;border-bottom:1px solid var(--sand-mid);
  padding-bottom:4px;transition:border-color .25s ease,color .25s ease;
}
.contact a.mail:hover{color:var(--cream);border-color:var(--ember)}

/* ---------- about (homepage section) ---------- */
.about p{
  margin-top:34px;font-weight:300;max-width:58ch;
  font-size:clamp(1rem,1.5vw,1.15rem);color:var(--sand-light);
}
.about strong{color:var(--cream);font-weight:500}

/* ---------- footer ---------- */
footer{
  padding:56px 24px 60px;border-top:1px solid var(--sand-mid);
  font-size:.8rem;color:var(--sand);
}
.foot-wrap{
  max-width:var(--maxw);margin:0 auto;
  display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.foot-nav{display:flex;gap:22px;flex-wrap:wrap}
.foot-nav a{color:var(--sand-light);text-decoration:none;transition:color .2s ease}
.foot-nav a:hover{color:var(--ember-soft)}

/* ---------- blog index ---------- */
.post-list{margin-top:48px;display:flex;flex-direction:column;gap:0}
.post-card{
  display:block;text-decoration:none;color:inherit;
  border-top:1px solid var(--sand-mid);padding:34px 0;
  transition:padding-left .25s ease;
}
.post-list .post-card:last-child{border-bottom:1px solid var(--sand-mid)}
.post-card:hover{padding-left:10px}
.post-card .post-meta{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);
}
.post-card h2{
  font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.4rem,3vw,2rem);
  margin-top:12px;color:var(--cream);max-width:24ch;transition:color .2s ease;
}
.post-card:hover h2{color:var(--ember-soft)}
.post-card p{margin-top:14px;font-weight:300;color:var(--sand-light);max-width:60ch}
.post-card .read-more{
  display:inline-block;margin-top:16px;font-size:.86rem;color:var(--ember-soft);
}

/* ---------- article ---------- */
.post-meta{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sand);margin-bottom:20px;
}
.post-meta a{color:var(--ember-soft);text-decoration:none}
.article-body{max-width:680px}
.article-body h2{
  font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.5rem,3vw,2rem);
  margin-top:56px;color:var(--cream);max-width:28ch;
}
.article-foot{
  margin-top:64px;padding-top:30px;border-top:1px solid var(--sand-mid);max-width:680px;
}
.article-foot .byline{font-weight:300;color:var(--sand-light)}
.article-foot .byline strong{color:var(--cream);font-weight:500}
.article-foot .byline a{color:var(--ember-soft);text-decoration:none;border-bottom:1px solid var(--sand-mid)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:translateY(0)}

@media (max-width:640px){
  section{padding:80px 20px}
  .hero{min-height:88vh}
  .brand .nav-links{display:none}
  .page-head{padding:120px 20px 56px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .kicker,h1,.lede,.hero-cta,.reveal{opacity:1!important;transform:none!important}
}