:root{
  --sage:#8DB497; --sage-light:#CFE0D4; --sage-deep:#6E9A7A;
  --sand:#EBCDA0; --sand-deep:#E0B878;
  --terra:#CC633E; --terra-dark:#A84E2E;
  --charcoal:#343232; --cream:#FAF8F5; --cream-2:#F4ECDD;
  --line:#E4DCCB; --dim:#8B857B;
  --head:'Poppins', system-ui, sans-serif;
  --body:'Lexend', system-ui, sans-serif;
  --mono:'Space Mono', ui-monospace, monospace;
  --safe-top: env(safe-area-inset-top, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0; background:var(--cream); color:var(--charcoal); font-family:var(--body); font-weight:300; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--head); font-weight:600; line-height:1.14; letter-spacing:-.015em; margin:0}
p{margin:0 0 1em}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 24px}
.eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--terra); display:flex; align-items:center; gap:9px}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--terra); opacity:.6}
.btn{font-family:var(--head); font-weight:500; font-size:14px; border-radius:999px; padding:11px 22px; cursor:pointer; border:1px solid transparent; transition:transform .15s, box-shadow .2s, background .2s; display:inline-flex; align-items:center; gap:8px}
.btn-primary{background:var(--terra); color:#fff; box-shadow:0 8px 22px rgba(204,99,62,.26)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(204,99,62,.34)}
.btn-ghost{background:transparent; color:var(--charcoal); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--charcoal); transform:translateY(-2px)}

/* nav */
header{position:fixed; top:0; left:0; right:0; z-index:50; transition:background .3s, box-shadow .3s, border-color .3s; border-bottom:1px solid transparent; padding-top:var(--safe-top)}
header.solid{background:rgba(250,248,245,.9); backdrop-filter:saturate(140%) blur(14px); border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(52,50,50,.05)}
.nav{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand-logo{height:40px; width:auto; display:block}
.navlinks{display:flex; align-items:center; gap:28px}
.navlinks a{font-size:14px; color:var(--charcoal); opacity:.82; transition:opacity .2s, color .2s}
.navlinks a:hover, .navlinks a.active{opacity:1; color:var(--terra)}
.navtoggle{display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--charcoal)}

/* page hero */
.pagehero{padding:128px 0 50px; position:relative; overflow:hidden}
.pagehero h1{font-size:clamp(34px,5vw,54px); margin:16px 0 0}
.pagehero p{font-size:18px; color:#56514A; max-width:46ch; margin:18px 0 0}

/* footer */
footer{background:#2a2828; color:rgba(250,248,245,.7); padding:54px 0 30px; margin-top:40px}
.f-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; margin-bottom:36px}
footer h5{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sand); margin:0 0 14px}
footer a{display:block; font-size:14px; color:rgba(250,248,245,.7); margin-bottom:9px; transition:color .2s}
footer a:hover{color:#fff}
.f-brand .brand-logo{height:34px; margin-bottom:12px}
.f-brand p{font-size:13.5px; color:rgba(250,248,245,.55); max-width:30ch}
.f-soc{display:flex; gap:12px; margin-top:14px}
.f-soc a{width:36px; height:36px; border:1px solid rgba(250,248,245,.18); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0}
.f-soc a:hover{border-color:var(--sand)}
.f-bot{border-top:1px solid rgba(250,248,245,.12); padding-top:22px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:rgba(250,248,245,.5)}

/* blog */
.bloggrid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.bcard{background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; transition:transform .25s, box-shadow .25s; display:flex; flex-direction:column}
.bcard:hover{transform:translateY(-4px); box-shadow:0 22px 44px -26px rgba(52,50,50,.4)}
.bcard .bimg{aspect-ratio:16/10; overflow:hidden}
.bcard .bimg img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.bcard:hover .bimg img{transform:scale(1.05)}
.bcard .bbody{padding:22px; display:flex; flex-direction:column; flex:1}
.bcard .btag{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--terra)}
.bcard h3{font-size:19px; margin:10px 0 8px; line-height:1.25}
.bcard p{font-size:14px; color:#56514A; margin:0 0 16px; flex:1}
.bcard .bmeta{font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.03em}

/* article */
.article{padding-top:120px}
.article-hero{aspect-ratio:21/9; border-radius:24px; overflow:hidden; margin:22px 0 0; box-shadow:0 28px 60px -36px rgba(52,50,50,.4)}
.article-hero img{width:100%; height:100%; object-fit:cover}
.article-body{font-size:17.5px; color:#3f3b36; line-height:1.78}
.article-body h3{font-family:var(--head); font-size:23px; margin:34px 0 12px; color:var(--charcoal)}
.article-body p{margin:0 0 1.1em}
.article-body ul{margin:0 0 1.2em; padding-left:0; list-style:none}
.article-body li{position:relative; padding-left:24px; margin-bottom:9px}
.article-body li::before{content:"›"; position:absolute; left:4px; color:var(--terra); font-weight:700}
.article-body strong{color:var(--charcoal); font-weight:500}
.article-meta{display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:12px; color:var(--dim); letter-spacing:.04em; margin-top:18px}
.article-cta{background:var(--cream-2); border:1px solid var(--line); border-radius:20px; padding:30px; text-align:center; margin:46px 0 0}
.article-cta h3{font-size:22px; margin-bottom:8px}
.article-cta p{color:#56514A; margin-bottom:18px}

/* simple sections reused */
.sec{padding:78px 0; position:relative}
.sec-head{max-width:620px; margin-bottom:40px}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center}
.sec-head h2{font-size:clamp(28px,4vw,42px); margin-top:14px}
.sec-head p{font-size:17px; color:#56514A; margin-top:14px}
.store{display:inline-flex; align-items:center; gap:10px; background:var(--charcoal); color:#fff; border-radius:13px; padding:10px 16px; transition:transform .15s, box-shadow .2s}
.store:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(52,50,50,.22)}
.store svg{width:22px; height:22px; flex:0 0 auto}
.store .s1{font-size:9.5px; opacity:.8; line-height:1}
.store .s2{font-family:var(--head); font-weight:500; font-size:15px; line-height:1.15}
.rev{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease}
.rev.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important} .rev{opacity:1; transform:none} html{scroll-behavior:auto}}
@media (max-width:900px){
  .bloggrid{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .navlinks{display:none}
  .navtoggle{display:inline-flex}
  header.open .navlinks{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:var(--cream); border-bottom:1px solid var(--line); padding:8px 24px 18px; align-items:stretch}
  header.open .navlinks a{padding:13px 0; border-bottom:1px solid var(--line)}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .bloggrid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .article-hero{aspect-ratio:4/3}
}

/* dropdown nav */
.has-drop{position:relative;display:flex;align-items:center}
.has-drop .drop-t{font-size:14px;cursor:pointer}
.has-drop .drop-m{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:8px;min-width:210px;box-shadow:0 18px 40px -20px rgba(52,50,50,.4);opacity:0;visibility:hidden;transition:.2s;z-index:60}
.has-drop:hover .drop-m{opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px)}
.has-drop .drop-m a{display:block;padding:9px 12px;border-radius:9px;font-size:14px;opacity:.85;margin:0}
.has-drop .drop-m a:hover{background:var(--cream-2);opacity:1;color:var(--terra)}
@media (max-width:900px){.has-drop{display:block}.has-drop .drop-m{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 0 14px;min-width:0}.has-drop .drop-m a{padding:10px 0;border-bottom:1px solid var(--line)}}

/* film grain (ties photography together) */
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}
@media (prefers-reduced-motion: reduce){body::after{display:none}}