:root{
  --paper:#ffffff;--ink:#1f1d1a;--graphite:#706b63;--hair:#e6e1d8;--oak:#a08a6c;--oak-deep:#765c3d;--wash:#f8f6f2;
  --btn-bg:#1f1d1a;--btn-fg:#ffffff;--btn-hover:#765c3d;--fg2:#3b3833;--line2:#d6d0c5;--logo-soft:#efe8dc;
  --f-display:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--oak);outline-offset:3px}
h1,h2,h3,.h2{font-family:var(--f-display);font-weight:300;text-wrap:balance;margin:0;letter-spacing:-.01em}
p{margin:0}

/* nav */
.nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:calc(env(safe-area-inset-top,0px) + 14px) clamp(16px,4vw,44px) 14px;background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--hair)}
.brand{color:var(--ink);display:flex;align-items:center;text-decoration:none;min-width:0}
.brand svg{height:26px;width:auto;flex:none;overflow:visible}
@media (min-width:900px){.brand svg{height:32px}}
.links{display:flex;align-items:center;gap:clamp(14px,2.6vw,30px);font-size:14px}
.links a:not(.btn){text-decoration:none;color:var(--graphite)}
.links a:not(.btn):hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--btn-bg);color:var(--btn-fg);padding:12px 18px;border-radius:2px;
  text-decoration:none;font:500 14px/1 var(--f-body);letter-spacing:.02em;border:0;cursor:pointer;transition:background .25s}
.btn:hover{background:var(--btn-hover)}
.btn svg{width:14px;height:14px}
@media (max-width:620px){.links .btn{display:none}.links a:not(.btn){color:var(--ink);font-size:15px}}

/* page */
.wrap{max-width:820px;margin:0 auto;padding-inline:clamp(16px,5vw,48px)}
.g{padding-top:clamp(28px,5vh,56px)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font:400 12px/1.4 var(--f-mono);letter-spacing:.04em;color:var(--graphite);margin-bottom:clamp(28px,5vh,48px)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink);text-decoration:underline}
.eyebrow{font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--oak-deep);display:flex;gap:10px;align-items:center}
.eyebrow::after{content:"";height:1px;width:38px;background:var(--oak)}
h1{font-size:clamp(34px,5.2vw,54px);line-height:1.08;margin:18px 0 20px}
.lead{font-size:clamp(17px,2vw,19px);color:var(--fg2);max-width:62ch}
.lead a,.body a,.note a{color:var(--oak-deep);text-underline-offset:3px}

.fig{margin:clamp(36px,6vh,56px) 0 0;padding:clamp(16px,3vw,32px);background:var(--paper);border:1px solid var(--hair)}
.fig svg{display:block;width:100%;height:auto;max-height:620px;margin:0 auto}
.fig-vastu svg{max-width:520px}
.fig figcaption{margin-top:16px;padding-top:12px;border-top:1px solid var(--hair);font:400 12px/1.5 var(--f-mono);color:var(--graphite)}

.body section{margin-top:clamp(44px,7vh,64px)}
.body h2,.pricing h2,.faq h2,.related h2,.cta h2,.hubgroup h2{font-size:clamp(26px,3.2vw,34px);line-height:1.15;margin:0 0 18px}
.pricing h2,.faq h2,.related h2{margin-top:16px}
.body p{margin:0 0 14px;color:var(--fg2)}
.body ul{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:10px}
.body li{position:relative;padding-left:22px;color:var(--fg2)}
.body li::before{content:"";position:absolute;left:0;top:.85em;width:10px;height:1px;background:var(--oak)}
.body b{font-weight:500;color:var(--ink)}

.pricing,.faq,.related{margin-top:clamp(64px,10vh,96px);padding-top:clamp(32px,5vh,44px);border-top:1px solid var(--hair)}
.pkgs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.pkgs li{background:var(--paper);padding:20px 18px;display:flex;flex-direction:column;gap:6px}
.pk{font:400 18px/1.25 var(--f-display)}
.pp{font:500 13px/1.4 var(--f-mono);color:var(--oak-deep)}
.pd{font-size:14px;color:var(--graphite);flex:1}
.pt{font:400 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.note{margin-top:14px;font-size:14px;color:var(--graphite)}

.qs{border-top:1px solid var(--hair)}
details{border-bottom:1px solid var(--hair)}
summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;font:400 18px/1.35 var(--f-display)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:15px;font:300 22px/1 var(--f-display);color:var(--oak-deep)}
details[open] summary::after{content:"–"}
details p{padding:0 0 20px;color:var(--fg2);max-width:62ch}

.cta{margin-top:clamp(64px,10vh,96px);padding:clamp(28px,5vw,48px);background:var(--wash)}
.cta p{color:var(--fg2);margin:0 0 24px;max-width:56ch}

.related ul{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--hair)}
.related li{border-bottom:1px solid var(--hair);padding:16px 0;display:grid;gap:4px}
.related a{font:400 19px/1.3 var(--f-display);text-decoration:none}
.related a:hover{color:var(--oak-deep)}
.related span{font-size:14px;color:var(--graphite)}

.hubgroup{margin-top:clamp(48px,8vh,72px)}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.cards a{display:flex;flex-direction:column;gap:8px;height:100%;padding:22px;border:1px solid var(--hair);text-decoration:none;transition:border-color .2s}
.cards a:hover{border-color:var(--ink)}
.ct{font:400 21px/1.25 var(--f-display)}
.cd{font-size:14px;color:var(--graphite);flex:1}
.cr{display:inline-flex;align-items:center;gap:8px;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--oak-deep);margin-top:8px}
.cr svg{width:12px;height:12px}

/* footer */
.contact{margin-top:clamp(80px,12vh,120px);padding-block:clamp(56px,9vh,90px) 28px;border-top:1px solid var(--hair)}
.contact .wrap{max-width:1140px}
.contact .h2{font-size:clamp(30px,3.8vw,48px);margin:22px 0 22px}
.mail{display:inline-block;font:300 clamp(20px,3vw,32px)/1.2 var(--f-display);text-decoration:none;word-break:break-all}
.mail:hover{color:var(--oak-deep)}
.social{display:flex;gap:10px;margin-top:22px}
.social a{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line2);border-radius:50%;color:var(--ink)}
.social a:hover{border-color:var(--ink)}
.social svg{width:18px;height:18px}
.guides{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:40px;font-size:14px}
.guides a{color:var(--graphite);text-decoration:none}
.guides a:hover{color:var(--ink);text-decoration:underline}
.foot{margin-top:40px;padding-top:18px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font:400 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}

/* tap targets */
.links a:not(.btn){display:inline-block;padding:12px 4px}

/* animated logo (same as the homepage) */
/* logo: the house builds itself on its plot line, holds, and rebuilds (independent of scroll) */
.lg-draw{stroke-dasharray:var(--L);stroke-dashoffset:0}
.lg .d1{--L:88}.lg .d2{--L:16}.lg .d3{--L:81}.lg .d4{--L:60}.lg .d5{--L:69}   /* exact lengths of each line in SVG units */
.lg .d1{animation:ld1 9s cubic-bezier(.5,0,.3,1) infinite}.lg .d2{animation:ld2 9s ease-in-out infinite}.lg .d3{animation:ld3 9s cubic-bezier(.5,0,.3,1) infinite}
.lg .d4{animation:ld4 9s cubic-bezier(.5,0,.3,1) infinite}.lg .d5{animation:ld5 9s cubic-bezier(.6,0,.2,1) infinite}
.lg .f1{animation:lf1 9s ease infinite}.lg .f2{animation:lf2 9s ease infinite}.lg .f3{animation:lf3 9s ease infinite}.lg .f4{animation:lf4 9s ease infinite}
.lg .s1{animation:ls1 9s ease infinite}.lg .s2{animation:ls2 9s ease infinite}.lg .s3{animation:ls3 9s ease infinite}.lg .s4{animation:ls4 9s ease infinite}.lg .dr{animation:ldr 9s ease infinite}
@keyframes ld1{0%,3%{stroke-dashoffset:var(--L);opacity:1}17%,86%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ld2{0%,14%{stroke-dashoffset:var(--L);opacity:1}20%,86%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ld3{0%,12%{stroke-dashoffset:var(--L);opacity:1}26%,86%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ld4{0%,18%{stroke-dashoffset:var(--L);opacity:1}30%,86%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ld5{0%,28%{stroke-dashoffset:var(--L);opacity:1}40%,86%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes lf1{0%,38%{opacity:0}46%,86%{opacity:1}95%,100%{opacity:0}}
@keyframes lf2{0%,10%{opacity:0}22%,86%{opacity:1}95%,100%{opacity:0}}
@keyframes lf3{0%,40%{opacity:0}48%,86%{opacity:1}95%,100%{opacity:0}}
@keyframes lf4{0%,44%{opacity:0}50%,86%{opacity:1}95%,100%{opacity:0}}
@keyframes ls1{0%,50%{opacity:0}53%,86%{opacity:1}95%,100%{opacity:0}}
@keyframes ls2{0%,52%{opacity:0}55%,86%{opacity:1}95%,100%{opacity:0}}
@keyframes ls3{0%,54%{opacity:0}57%,86%{opacity:1}95%,100%{opacity:0}}
@keyframes ls4{0%,56%{opacity:0}59%,86%{opacity:1}95%,100%{opacity:0}}
@keyframes ldr{0%,60%{opacity:0}66%,86%{opacity:1}95%,100%{opacity:0}}
@keyframes lgDraw{from{stroke-dashoffset:var(--L)}to{stroke-dashoffset:0}}
@keyframes lgFade{from{opacity:0}to{opacity:1}}

/* mobile menu */
.burger{display:none}
@media (min-width:900px){.nav .links a:not(.btn){display:inline-block;padding:12px 4px}}
@media (max-width:899px){
  .burger{all:unset;-webkit-tap-highlight-color:transparent;box-sizing:border-box;cursor:pointer;display:grid;align-content:center;justify-items:end;gap:5px;width:44px;height:44px;padding:0 6px;position:relative;z-index:2;align-self:center;margin-right:-6px}
  .burger i{display:block;height:1.5px;background:var(--ink);transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .2s,width .35s}
  .burger i:nth-child(1){width:26px}.burger i:nth-child(2){width:17px}.burger i:nth-child(3){width:26px}
  .burger:focus-visible{outline:2px solid var(--oak);outline-offset:2px}
  .nav.menu-open .burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav.menu-open .burger i:nth-child(2){opacity:0;width:0}
  .nav.menu-open .burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .nav .links{position:absolute;top:calc(100% - 4px);right:clamp(16px,4vw,44px);left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:0;width:max-content;min-width:168px;max-width:calc(100vw - 32px);padding:6px 18px 16px;background:var(--paper);border:0;border-radius:4px;box-shadow:0 10px 30px rgba(31,29,26,.13),0 1px 3px rgba(31,29,26,.08);
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s .3s;align-self:auto}
  .nav.menu-open .links{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
  .nav .links a:not(.btn){display:block;width:100%;text-align:right;padding:13px 2px;border-bottom:1px solid var(--hair);font-size:16px;line-height:1.2;color:var(--ink)}
  .nav .links .btn{display:inline-flex;justify-content:center;margin-top:12px;font-size:14px;padding:12px 14px}
}