/* ============================================================
   HomeBuildersNJ.net — Nocturne theme
   Fonts: Syne (display) · Manrope (body) · Space Mono (utility)
   ============================================================ */
:root{
  --ink:#0C0C0E;--ink-2:#141419;--ink-3:#1C1C22;--bone:#EDE8DE;--bone-d:#C9C4BA;
  --champ:#C7AE84;--champ-2:#DAC49B;--mute:#86817A;
  --line:rgba(237,232,222,.13);--line-2:rgba(199,174,132,.32);
  --brick:#9C5A44;
  --ok:#7FB08A;--err:#D98A76;
  --disp:"Syne",sans-serif;--body:"Manrope",system-ui,sans-serif;--mono:"Space Mono",ui-monospace,monospace;
  --wrap:1240px;--pad:clamp(20px,5vw,60px);
  --e:cubic-bezier(.22,.61,.36,1);--e2:cubic-bezier(.76,0,.24,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-weight:300;background:var(--ink);color:var(--bone);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
section[id],a[id]{scroll-margin-top:100px}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--champ);color:var(--ink)}
:focus-visible{outline:1.5px solid var(--champ);outline-offset:3px}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}

/* ---- Skip link ---- */
.skip{position:absolute;left:-999px;top:0;z-index:6000;background:var(--champ);color:var(--ink);padding:.7em 1.2em;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em}
.skip:focus{left:12px;top:12px}

/* ---- Layout helpers ---- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(72px,10vw,150px);position:relative}
.section-sm{padding-block:clamp(56px,7vw,100px);position:relative}
.center{text-align:center}
.mx-auto{margin-inline:auto}

/* ---- Type primitives ---- */
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--champ);display:inline-flex;align-items:center;gap:.9em}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--champ)}
.eyebrow.c::before{display:none}
.h-sec{font-family:var(--disp);font-weight:700;font-size:clamp(2.1rem,5vw,4.2rem);line-height:1.03;letter-spacing:-.02em}
.h-sub{font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.08;letter-spacing:-.015em}
.lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--bone-d);font-weight:300;max-width:60ch}
.muted{color:var(--mute)}
.champ{color:var(--champ)}
.prose p{color:var(--bone-d);font-weight:300;font-size:1.04rem;margin-bottom:1.1em;max-width:70ch}
.prose p:last-child{margin-bottom:0}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;padding:1.1em 1.9em;border-radius:2px;transition:background .35s var(--e),color .35s,border-color .35s,transform .12s;will-change:transform}
.btn svg{width:15px;height:15px;flex:none}
.btn-champ{background:var(--champ);color:var(--ink)}
.btn-champ:hover{background:var(--champ-2)}
.btn-line{border:1px solid var(--line-2);color:var(--bone)}
.btn-line:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn:active{transform:scale(.98)}
.btn-sm{padding:.85em 1.45em;font-size:.7rem}

/* ---- Scroll progress + cursor ---- */
#bar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--champ);z-index:2000;transition:width .1s linear}
#cur,#curd{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%)}
#cur{width:6px;height:6px;background:var(--champ)}
#curd{width:40px;height:40px;border:1px solid var(--champ);transition:width .25s,height .25s,background .25s;opacity:.55}
#curd.big{width:64px;height:64px;background:rgba(199,174,132,.08)}
@media(pointer:coarse){#cur,#curd{display:none}}

/* ---- Loader ---- */
#loader{position:fixed;inset:0;z-index:5000;background:var(--ink);display:grid;place-items:center;transition:opacity .7s var(--e),visibility .7s}
#loader.done{opacity:0;visibility:hidden}
.load-mk{text-align:center}
.load-mk .nm{font-family:var(--disp);font-weight:800;font-size:clamp(1.5rem,5vw,2.6rem);letter-spacing:.14em;overflow:hidden}
.load-mk .nm span{display:inline-block;transform:translateY(105%);animation:rise .8s var(--e2) forwards}
@keyframes rise{to{transform:none}}
.load-mk .ln{height:1px;background:var(--line);margin-top:18px;overflow:hidden;width:min(260px,60vw);margin-inline:auto}
.load-mk .ln i{display:block;height:100%;width:100%;background:var(--champ);transform:translateX(-100%);animation:fill 1s var(--e) .3s forwards}
@keyframes fill{to{transform:none}}

/* ---- Header / nav ---- */
#hd{position:fixed;top:0;left:0;width:100%;z-index:1000;padding-block:clamp(16px,2.2vw,26px);transition:padding .4s var(--e),background .4s}
#hd.solid{background:rgba(12,12,14,.74);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding-block:12px;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{font-family:var(--disp);font-weight:800;font-size:1.02rem;letter-spacing:.14em;display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand svg{width:26px;height:26px;flex:none}
.brand svg path,.brand svg line{stroke:var(--champ)}
.brand .nj{color:var(--champ)}
.nav-mid{display:flex;gap:clamp(18px,2.2vw,32px);margin-left:auto;margin-right:clamp(16px,2vw,28px)}
.nav-mid a{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--bone-d);position:relative;padding-block:4px;transition:color .3s}
.nav-mid a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--champ);transition:width .35s var(--e)}
.nav-mid a:hover,.nav-mid a[aria-current="page"]{color:var(--bone)}
.nav-mid a:hover::after,.nav-mid a[aria-current="page"]::after{width:100%}
.nav-cta{flex:none}
.burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex:none}
.burger span{width:24px;height:1px;background:var(--bone);transition:transform .35s var(--e),opacity .3s}
body.mo .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.mo .burger span:nth-child(2){opacity:0}
body.mo .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#mm{position:fixed;inset:0;background:var(--ink);z-index:999;display:flex;flex-direction:column;justify-content:center;padding:var(--pad);opacity:0;visibility:hidden;transition:opacity .5s var(--e),visibility .5s;overflow-y:auto}
body.mo #mm{opacity:1;visibility:visible}
#mm a{font-family:var(--disp);font-weight:700;font-size:clamp(1.7rem,7vw,3rem);color:var(--bone);padding-block:.14em;border-bottom:1px solid var(--line);transition:color .3s,padding-left .3s}
#mm a:hover,#mm a[aria-current="page"]{color:var(--champ);padding-left:12px}
.mm-ft{margin-top:26px;font-family:var(--mono);color:var(--champ);font-size:.74rem;letter-spacing:.12em;line-height:1.9}

/* ============ HERO ============ */
#hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
#hero.compact{min-height:64svh}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos,50% 50%);animation:ken 20s var(--e) infinite alternate}
@keyframes ken{from{transform:scale(1.03)}to{transform:scale(1.12)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,14,.52) 0%,rgba(12,12,14,.34) 36%,rgba(12,12,14,.93) 100%)}
.hero-frame{position:absolute;inset:0;z-index:1;pointer-events:none;display:grid;place-items:center}
.hero-frame svg{width:min(46vw,560px);opacity:.9;transform:translateX(18%)}
.hero-frame path,.hero-frame line{fill:none;stroke:var(--champ);stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;pathLength:1;animation:draw 2.6s var(--e) .4s forwards}
.hero-frame .dim{stroke:var(--champ-2);opacity:.5;stroke-width:.8}
.hero-frame .glow{fill:var(--champ-2);stroke:none;opacity:0;animation:dot .5s var(--e) 2.6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes dot{to{opacity:.9}}
.hero-in{position:relative;z-index:2;width:100%;padding-bottom:clamp(46px,7vh,84px);padding-top:150px;pointer-events:none}
#hero.compact .hero-in{padding-top:130px}
.hero-in a,.hero-in button{pointer-events:auto}
.hero-in .eyebrow{color:var(--champ-2);opacity:0;animation:fu .8s var(--e) .45s forwards}
.hero-h1{font-family:var(--disp);font-weight:700;font-size:clamp(2.5rem,7vw,6.4rem);line-height:1;letter-spacing:-.025em;margin-block:.32em .38em;max-width:18ch}
#hero.compact .hero-h1{font-size:clamp(2.1rem,5.4vw,4.4rem);max-width:20ch}
.hero-h1 .wd{display:inline-block;opacity:0;transform:translateY(60%);animation:wu .9s var(--e2) forwards}
.hero-h1 em{font-style:italic;font-weight:600;color:var(--champ-2)}
@keyframes wu{to{opacity:1;transform:none}}
@keyframes fu{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-sub{font-size:clamp(1.02rem,1.5vw,1.26rem);font-weight:300;color:var(--bone-d);max-width:56ch;margin-bottom:2.2em;opacity:0;animation:fu .8s var(--e) 1.05s forwards}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;align-items:center;opacity:0;animation:fu .8s var(--e) 1.2s forwards}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:clamp(38px,6vh,72px);padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap;opacity:0;animation:fu .8s var(--e) 1.35s forwards}
.hero-foot .item{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.hero-foot .item b{display:block;font-family:var(--disp);font-size:1.05rem;font-weight:700;color:var(--bone);letter-spacing:.02em;margin-top:7px;text-transform:none}
.hero-scroll{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--champ);display:flex;align-items:center;gap:10px}
.hero-scroll i{width:30px;height:1px;background:var(--champ);position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;left:-30px;top:0;width:30px;height:100%;background:var(--bone);animation:cue 1.9s var(--e) infinite}
@keyframes cue{0%{left:-30px}60%,100%{left:30px}}

/* ---- Breadcrumb ---- */
.crumb{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);display:flex;gap:.7em;flex-wrap:wrap;align-items:center}
.crumb a{color:var(--champ);transition:color .25s}
.crumb a:hover{color:var(--champ-2)}
.crumb span[aria-current]{color:var(--bone-d)}

/* ---- Intro / manifesto ---- */
.manifesto{font-family:var(--disp);font-weight:600;font-size:clamp(1.7rem,4.2vw,3.6rem);line-height:1.12;letter-spacing:-.02em}
.manifesto b{color:var(--champ);font-weight:600}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);margin-top:clamp(38px,6vw,68px);align-items:start}
.two-col p{color:var(--bone-d);font-weight:300;font-size:1.04rem}
.kick{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--champ);margin-bottom:12px}

/* ---- Feature row (image + text alternating) ---- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(38px,5vw,72px);border-top:1px solid var(--line)}
.feat:first-of-type{border-top:none}
.feat.flip .feat-media{order:2}
.feat-media{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:4/3;background:var(--ink-2)}
.feat-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e),filter 1s var(--e);filter:saturate(.94) brightness(.95)}
.feat-media:hover img{transform:scale(1.05);filter:saturate(1.03) brightness(1)}
.feat-media .tag{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);background:rgba(12,12,14,.55);padding:.45em .7em;border-radius:3px;backdrop-filter:blur(4px)}
.feat h2,.feat h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.7rem,3.6vw,2.9rem);letter-spacing:-.02em;line-height:1.05;margin-bottom:.5em}
.feat .kick{margin-bottom:14px}
.feat p{color:var(--bone-d);font-weight:300;margin-bottom:1em;max-width:52ch}
.feat p:last-of-type{margin-bottom:0}

/* ---- Numbered practice / process list ---- */
#svc,.bg-2{background:var(--ink-2)}
.bg-3{background:var(--ink-3)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,44px)}
.rowlist{border-top:1px solid var(--line)}
.rowitem{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,auto) auto;gap:clamp(14px,3vw,40px);align-items:center;padding-block:clamp(22px,3vw,38px);border-bottom:1px solid var(--line);transition:padding-left .4s var(--e),background .4s;position:relative;overflow:hidden}
.rowitem::before{content:"";position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,rgba(199,174,132,.08),transparent);transition:width .5s var(--e)}
.rowitem:hover::before{width:100%}
.rowitem:hover{padding-left:clamp(8px,2vw,26px)}
.row-n{font-family:var(--mono);font-size:.78rem;color:var(--champ);position:relative;min-width:2.2em}
.row-t{font-family:var(--disp);font-weight:700;font-size:clamp(1.4rem,3.4vw,2.7rem);letter-spacing:-.02em;line-height:1.04;transition:color .35s;min-width:0;position:relative}
.rowitem:hover .row-t{color:var(--champ-2)}
.row-d{color:var(--mute);font-weight:300;font-size:.95rem;max-width:42ch;position:relative}
.row-a{width:52px;height:52px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;transition:background .35s,transform .4s var(--e);flex:none;position:relative}
.rowitem:hover .row-a{background:var(--champ);transform:rotate(-45deg)}
.row-a svg{width:19px;height:19px;stroke:var(--bone);transition:stroke .35s}
.rowitem:hover .row-a svg{stroke:var(--ink)}

/* ---- Simple services / cards grid ---- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,30px)}
.card{border:1px solid var(--line);border-radius:4px;padding:clamp(22px,2.6vw,34px);background:linear-gradient(180deg,rgba(255,255,255,.012),transparent);transition:border-color .4s,transform .4s var(--e),background .4s}
.card:hover{border-color:var(--line-2);transform:translateY(-4px)}
.card .cn{font-family:var(--mono);font-size:.72rem;color:var(--champ);letter-spacing:.14em}
.card h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.15rem,1.8vw,1.45rem);letter-spacing:-.01em;margin-block:.5em .45em;line-height:1.12}
.card p{color:var(--mute);font-weight:300;font-size:.95rem;line-height:1.6}
.card .ci{width:46px;height:46px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;margin-bottom:18px}
.card .ci svg{width:20px;height:20px;stroke:var(--champ);fill:none}

/* ---- Checklist ---- */
.checks{list-style:none;display:grid;gap:14px}
.checks.two{grid-template-columns:1fr 1fr;gap:14px clamp(20px,3vw,44px)}
.checks li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;color:var(--bone-d);font-weight:300}
.checks li b{color:var(--bone);font-weight:600}
.checks .ck{width:24px;height:24px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;flex:none;margin-top:2px}
.checks .ck svg{width:12px;height:12px;stroke:var(--champ)}

/* ---- Value band (no numbers) ---- */
.band{background:var(--ink-2);border-block:1px solid var(--line)}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.band-item{padding:clamp(26px,3vw,44px) clamp(18px,2vw,30px);border-left:1px solid var(--line);position:relative}
.band-item:first-child{border-left:none}
.band-item .bk{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--champ);margin-bottom:14px}
.band-item .bt{font-family:var(--disp);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1;letter-spacing:-.01em}
.band-item .bd{color:var(--mute);font-weight:300;font-size:.9rem;margin-top:12px}

/* ---- Portfolio grid + filter ---- */
.filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,40px)}
.filter button{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-d);padding:.7em 1.15em;border:1px solid var(--line);border-radius:2px;transition:all .3s}
.filter button:hover{border-color:var(--line-2);color:var(--bone)}
.filter button.on{background:var(--champ);color:var(--ink);border-color:var(--champ)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px)}
.gcell{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:4/3;cursor:pointer;background:var(--ink-2)}
.gcell.tall{aspect-ratio:3/4}
.gcell img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e),filter 1s var(--e);filter:saturate(.92) brightness(.9)}
.gcell:hover img{transform:scale(1.06);filter:saturate(1.02) brightness(1)}
.gcell::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(12,12,14,.72));opacity:.85;transition:opacity .4s}
.gcell:hover::after{opacity:1}
.gcell .cap{position:absolute;left:0;bottom:0;padding:16px 18px;z-index:2}
.gcell .cap .s{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--champ);display:block;margin-bottom:5px}
.gcell .cap .t{font-family:var(--disp);font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.gcell .exp{position:absolute;top:12px;right:12px;width:34px;height:34px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;background:rgba(12,12,14,.4);backdrop-filter:blur(4px);z-index:2;opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s}
.gcell:hover .exp{opacity:1;transform:none}
.gcell .exp svg{width:15px;height:15px;stroke:var(--bone)}
.is-hidden{display:none !important}

/* ---- Lightbox ---- */
#lb{position:fixed;inset:0;background:rgba(8,8,10,.96);z-index:2500;display:none;place-items:center;padding:var(--pad)}
#lb.open{display:grid}
.lb-in{max-width:1040px;width:100%}
.lb-in img{width:100%;max-height:76vh;object-fit:contain;border-radius:4px}
.lb-cap{display:flex;justify-content:space-between;gap:16px;margin-top:14px;align-items:baseline;flex-wrap:wrap}
.lb-cap h3{font-family:var(--disp);font-weight:700;font-size:1.5rem}
.lb-cap p{font-family:var(--mono);font-size:.7rem;color:var(--champ);letter-spacing:.1em}
.lb-x{position:fixed;top:20px;right:20px;width:48px;height:48px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;background:rgba(12,12,14,.5)}
.lb-x svg{width:20px;height:20px;stroke:var(--bone)}
.lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:52px;height:52px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;background:rgba(12,12,14,.5);transition:background .3s}
.lb-nav:hover{background:var(--champ)}
.lb-nav:hover svg{stroke:var(--ink)}
.lb-nav svg{width:20px;height:20px;stroke:var(--bone)}
#lbPrev{left:20px}#lbNext{right:20px}

/* ---- FAQ accordion ---- */
.faq{border-top:1px solid var(--line);max-width:920px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;padding-block:clamp(18px,2.2vw,26px);font-family:var(--disp);font-weight:700;font-size:clamp(1.05rem,2vw,1.5rem);letter-spacing:-.01em;color:var(--bone);transition:color .3s}
.faq-q:hover{color:var(--champ-2)}
.faq-ic{width:34px;height:34px;flex:none;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;position:relative;transition:background .3s}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;background:var(--champ);transition:transform .35s var(--e),background .3s}
.faq-ic::before{width:13px;height:1.5px}
.faq-ic::after{width:1.5px;height:13px}
.faq-item.open .faq-ic{background:var(--champ)}
.faq-item.open .faq-ic::before,.faq-item.open .faq-ic::after{background:var(--ink)}
.faq-item.open .faq-ic::after{transform:scaleY(0)}
.faq-a{overflow:hidden;height:0;transition:height .4s var(--e)}
.faq-a .inner{padding-bottom:clamp(18px,2.2vw,26px);color:var(--bone-d);font-weight:300;max-width:74ch}

/* ---- Counties grid ---- */
.counties{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.county{background:var(--ink);padding:clamp(16px,1.6vw,22px);display:flex;align-items:center;gap:12px;transition:background .35s,color .35s;color:var(--bone-d);font-weight:300}
.county:hover{background:var(--ink-2);color:var(--bone)}
.county .cd{width:6px;height:6px;border-radius:50%;background:var(--champ);flex:none}
.county b{font-weight:500}

/* ---- Cost calculator ---- */
.calc{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3vw,48px);align-items:stretch}
.calc-form{border:1px solid var(--line);border-radius:6px;padding:clamp(24px,3vw,40px);background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)}
.calc-form label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--champ);margin:0 0 10px}
.calc-form .fld+.fld{margin-top:26px}
.calc-form input{width:100%;background:var(--ink);border:1px solid var(--line-2);border-radius:4px;color:var(--bone);font-family:var(--disp);font-weight:700;font-size:1.5rem;letter-spacing:-.01em;padding:.55em .7em;transition:border-color .3s,box-shadow .3s}
.calc-form input:focus{outline:none;border-color:var(--champ);box-shadow:0 0 0 3px rgba(199,174,132,.14)}
.calc-form input::placeholder{color:var(--mute);font-weight:400}
.field{margin-bottom:22px}
.field:last-child{margin-bottom:0}
.field label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--champ);margin-bottom:10px}
.field .hint{color:var(--mute);font-weight:300;font-size:.82rem;margin-top:8px;font-family:var(--body);text-transform:none;letter-spacing:0}
.input,select.input{width:100%;background:var(--ink);border:1px solid var(--line-2);border-radius:3px;padding:.9em 1em;color:var(--bone);font-size:1rem;transition:border-color .3s,background .3s}
.input:focus{outline:none;border-color:var(--champ)}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C7AE84' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1em center;background-size:16px;padding-right:2.6em}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{flex:1;min-width:120px;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:.85em .6em;border:1px solid var(--line-2);border-radius:3px;color:var(--bone-d);transition:all .3s;line-height:1.3}
.seg button small{display:block;color:var(--mute);margin-top:5px;font-size:.9em}
.seg button.on{background:var(--champ);color:var(--ink);border-color:var(--champ)}
.seg button.on small{color:rgba(12,12,14,.7)}
.calc-out{border:1px solid var(--line-2);border-radius:6px;padding:clamp(24px,3vw,40px);background:var(--ink-2);display:flex;flex-direction:column;justify-content:center}
.calc-out .ck{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--champ);margin-bottom:14px}
.calc-out .est{font-family:var(--disp);font-weight:800;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;letter-spacing:-.02em;color:var(--bone)}
.calc-out .rng{color:var(--bone-d);font-weight:300;margin-top:14px}
.calc-out .brk{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:10px}
.calc-out .brk div{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.74rem;color:var(--mute)}
.calc-out .brk b{color:var(--bone);font-weight:400}
.calc-note{color:var(--mute);font-weight:300;font-size:.82rem;margin-top:22px;font-style:italic;line-height:1.6}
.formula{font-family:var(--mono);font-size:.95rem;color:var(--champ);background:var(--ink-2);border:1px solid var(--line-2);border-left:2px solid var(--champ);border-radius:4px;padding:.9em 1em;margin:1em 0;line-height:1.5}
.pricetable{width:100%;border-collapse:collapse;margin-top:8px}
.pricetable th,.pricetable td{text-align:left;padding:.95em 1em;border-bottom:1px solid var(--line);font-weight:300;color:var(--bone-d)}
.pricetable th{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--champ);font-weight:400}
.pricetable td:last-child,.pricetable th:last-child{text-align:right;font-family:var(--mono);color:var(--bone)}
.pricetable tr:last-child td{border-bottom:none}

/* ---- Blog cards ---- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,30px)}
.post{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--ink-2);transition:border-color .4s,transform .4s var(--e)}
.post:hover{border-color:var(--line-2);transform:translateY(-4px)}
.post-media{aspect-ratio:16/10;overflow:hidden;background:var(--ink-3)}
.post-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e);filter:saturate(.92) brightness(.92)}
.post:hover .post-media img{transform:scale(1.05)}
.post-body{padding:clamp(20px,2vw,28px)}
.post-body .pk{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--champ)}
.post-body h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.15rem,1.9vw,1.4rem);letter-spacing:-.01em;margin-block:.6em .5em;line-height:1.15}
.post-body p{color:var(--mute);font-weight:300;font-size:.94rem;line-height:1.6}

/* ---- CTA band ---- */
#cta{position:relative;overflow:hidden;text-align:center;padding-block:clamp(84px,13vw,170px)}
.cta-bg{position:absolute;inset:0;z-index:0}
.cta-bg img{width:100%;height:100%;object-fit:cover}
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(12,12,14,.74),rgba(12,12,14,.9))}
.cta-in{position:relative;z-index:2}
.cta-in h2{font-family:var(--disp);font-weight:700;font-size:clamp(2.2rem,6vw,5.2rem);line-height:1;letter-spacing:-.025em;margin-bottom:.4em}
.cta-in h2 em{font-style:italic;color:var(--champ-2)}
.cta-in p{color:var(--bone-d);font-weight:300;max-width:52ch;margin:0 auto 2.2em;font-size:1.08rem}
.cta-in .hero-cta{justify-content:center}

/* ---- Contact form ---- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4vw,64px);align-items:start}
.form{border:1px solid var(--line);border-radius:6px;padding:clamp(24px,3vw,42px);background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-grid .full{grid-column:1/-1}
.form-grid .field{margin-bottom:0}
.req{color:var(--champ)}
textarea.input{min-height:130px;resize:vertical}
.radiorow{display:flex;gap:10px;flex-wrap:wrap}
.radiochip{position:relative}
.radiochip input{position:absolute;opacity:0;width:0;height:0}
.radiochip span{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:.7em 1em;border:1px solid var(--line-2);border-radius:3px;color:var(--bone-d);transition:all .25s;cursor:pointer}
.radiochip input:checked+span{background:var(--champ);color:var(--ink);border-color:var(--champ)}
.radiochip input:focus-visible+span{outline:1.5px solid var(--champ);outline-offset:2px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-err{color:var(--err);font-size:.8rem;margin-top:6px;font-weight:400;display:none}
.field.invalid .input{border-color:var(--err)}
.field.invalid .form-err{display:block}
.form-status{margin-top:18px;padding:1em 1.2em;border-radius:4px;font-size:.95rem;display:none}
.infobox{border:1px solid var(--line);border-radius:6px;padding:clamp(22px,2.4vw,30px);background:var(--ink-2);margin-bottom:22px}
.infobox:last-child{margin-bottom:0}
.infobox .kick{margin-bottom:14px}
.infoaddr{font-style:normal;color:var(--bone-d);line-height:1.7;font-weight:300}
.infoaddr strong{color:var(--bone);font-weight:600}
.infoaddr a{color:var(--champ);border-bottom:1px solid rgba(199,174,132,.35)}
.infoaddr a:hover{color:var(--champ-2)}
.band-mini{background:linear-gradient(180deg,rgba(199,174,132,.07),transparent);border-color:var(--line-2)}
.form-status.show{display:block}
.form-status.ok{background:rgba(127,176,138,.12);border:1px solid rgba(127,176,138,.4);color:#bfe0c6}
.form-status.bad{background:rgba(217,138,118,.1);border:1px solid rgba(217,138,118,.4);color:#e7b4a6}
.recaptcha-note{font-size:.74rem;color:var(--mute);font-weight:300;margin-top:14px;line-height:1.6}
.recaptcha-note a{color:var(--champ)}
.info-panel{display:grid;gap:22px}
.info-block{border:1px solid var(--line);border-radius:5px;padding:clamp(20px,2.2vw,30px)}
.info-block .ik{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--champ);margin-bottom:12px}
.info-block h3{font-family:var(--disp);font-weight:700;font-size:1.2rem;margin-bottom:8px}
.info-block p,.info-block address{color:var(--bone-d);font-weight:300;font-style:normal;line-height:1.7}
.info-block a{color:var(--champ);transition:color .25s}
.info-block a:hover{color:var(--champ-2)}

/* ---- Footer ---- */
#ft{background:var(--ink);padding-top:clamp(54px,7vw,88px);overflow:hidden;border-top:1px solid var(--line)}
.ft-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:42px;border-bottom:1px solid var(--line)}
.ft-brand .bn{font-family:var(--disp);font-weight:800;font-size:1.3rem;letter-spacing:.12em;display:flex;align-items:center;gap:10px}
.ft-brand .bn svg{width:26px;height:26px}.ft-brand .bn svg path,.ft-brand .bn svg line{stroke:var(--champ)}
.ft-brand .bn .nj{color:var(--champ)}
.ft-brand p{color:var(--mute);font-weight:300;font-size:.92rem;margin-top:14px;max-width:34ch}
.ft-social{display:flex;gap:12px;margin-top:22px}
.ft-social a{width:42px;height:42px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;transition:all .3s var(--e)}
.ft-social a:hover{background:var(--champ);border-color:var(--champ)}
.ft-social svg{width:16px;height:16px;stroke:var(--bone)}
.ft-social a:hover svg{stroke:var(--ink)}
.ft-col h4,.ft-cta h4{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--champ);margin-bottom:16px}
.ft-col a{display:block;color:var(--mute);font-weight:300;font-size:.92rem;padding-block:7px;transition:color .25s}
.ft-col a:hover{color:var(--bone)}
.ft-cta p{color:var(--mute);font-weight:300;font-size:.88rem;margin-bottom:16px;line-height:1.7}
.ft-cta address{font-style:normal;color:var(--bone-d);font-weight:300;font-size:.9rem;line-height:1.7;margin-bottom:18px}
.ft-word{font-family:var(--disp);font-weight:800;font-size:clamp(2.6rem,15vw,13rem);line-height:.9;text-align:center;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px var(--line-2);margin-top:clamp(28px,4vw,48px);user-select:none;white-space:nowrap}
.ft-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:24px;flex-wrap:wrap;border-top:1px solid var(--line)}
.ft-bot p,.ft-bot a{font-family:var(--mono);font-size:.66rem;color:var(--mute);letter-spacing:.05em}
.ft-bot .lg{display:flex;gap:20px;flex-wrap:wrap}
.ft-bot a:hover{color:var(--bone)}

/* ---- Back to top ---- */
#top{position:fixed;right:20px;bottom:20px;width:48px;height:48px;border:1px solid var(--line-2);background:rgba(12,12,14,.6);backdrop-filter:blur(8px);border-radius:50%;display:grid;place-items:center;z-index:900;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .3s,background .3s}
#top.show{opacity:1;transform:none;pointer-events:auto}
#top:hover{background:var(--champ);border-color:var(--champ)}
#top svg{width:17px;height:17px;stroke:var(--bone)}
#top:hover svg{stroke:var(--ink)}

/* ---- Reveal ---- */
html.reveal-ready [data-rev]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--e),transform .9s var(--e)}
html.reveal-ready [data-rev].in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .nav-mid{display:none}
  .nav-cta{display:none}
  .burger{display:flex}
  .brand{margin-right:auto}
  .two-col{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr;gap:24px}
  .feat.flip .feat-media{order:0}
  .calc{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr 1fr}
  .ft-brand{grid-column:1/3}
  .grid-3,.blog-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .counties{grid-template-columns:repeat(2,1fr)}
  .hero-frame{display:none}
}
@media(max-width:640px){
  .grid-3,.grid-2,.blog-grid,.checks.two,.gallery{grid-template-columns:1fr}
  .band-grid{grid-template-columns:1fr 1fr}
  .band-item{border-left:none;border-top:1px solid var(--line)}
  .band-item:first-child,.band-item:nth-child(2){border-top:none}
  .band-item:nth-child(odd){border-right:1px solid var(--line)}
  .form-grid{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr}
  .ft-brand{grid-column:auto}
  .row-d{display:none}
  .rowitem{grid-template-columns:auto 1fr auto}
  .hero-foot{gap:22px}
  .lb-nav{display:none}
  .sec-head{align-items:flex-start}
}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rev]{opacity:1!important;transform:none!important}
  .hero-bg img{animation:none!important}
  #loader{display:none!important}
  .hero-frame path,.hero-frame line{stroke-dashoffset:0!important;animation:none!important}
  .hero-frame .glow{opacity:.9!important;animation:none!important}
  .hero-h1 .wd,.hero-sub,.hero-cta,.hero-foot,.hero-in .eyebrow{opacity:1!important;transform:none!important;animation:none!important}
}

/* ============================================================
   REVISION 2 — richer hero, beautiful cards, modern gallery,
   advanced footer, and readable typography (contrast pass)
   ============================================================ */

/* ---- Tokens: lift faint greys, add depth helpers ---- */
:root{
  --mute:#A7A199;            /* was #86817A — lifted for legibility */
  --mute-2:#8B857D;          /* only for the very faintest micro-text */
  --card:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.006));
  --card-hover:linear-gradient(180deg,rgba(199,174,132,.075),rgba(255,255,255,.012));
  --sh:0 28px 70px -34px rgba(0,0,0,.78);
}
body{color:var(--bone)}
.muted{color:var(--mute)}
.lead{color:var(--bone-d);font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.7}
.two-col p,.prose p{color:var(--bone-d);font-size:1.07rem;line-height:1.75}
.eyebrow{font-size:.72rem;letter-spacing:.28em}

/* ---- Buttons: subtle glow + arrow nudge ---- */
.btn{border-radius:3px;letter-spacing:.14em}
.btn svg{transition:transform .35s var(--e)}
.btn-champ{box-shadow:0 16px 34px -18px rgba(199,174,132,.65)}
.btn-champ:hover{box-shadow:0 22px 44px -18px rgba(199,174,132,.8)}
.btn-champ:hover svg{transform:translateX(3px)}

/* ============ HERO — more attractive ============ */
.hero-bg::after{background:
  radial-gradient(120% 95% at 12% 105%, rgba(199,174,132,.20), transparent 55%),
  linear-gradient(180deg, rgba(12,12,14,.32) 0%, rgba(12,12,14,.24) 30%, rgba(12,12,14,.80) 76%, rgba(12,12,14,.97) 100%)}
.hero-bg::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(12,12,14,.55),transparent 20%),
    repeating-linear-gradient(0deg,transparent 0 43px,rgba(237,232,222,.03) 43px 44px),
    repeating-linear-gradient(90deg,transparent 0 43px,rgba(237,232,222,.03) 43px 44px);
  -webkit-mask-image:radial-gradient(115% 100% at 72% 26%,#000,transparent 82%);
          mask-image:radial-gradient(115% 100% at 72% 26%,#000,transparent 82%)}
.hero-frame svg{width:min(52vw,660px);opacity:.5;transform:translateX(15%) translateY(-3%)}
.hero-frame path,.hero-frame line{stroke-width:1}
.hero-frame::after{content:"";position:absolute;width:min(46vw,560px);height:min(46vw,560px);right:-4%;top:10%;
  background:radial-gradient(circle,rgba(199,174,132,.18),transparent 62%);filter:blur(12px);pointer-events:none;z-index:-1}
.hero-h1{font-size:clamp(2.7rem,7.4vw,6.9rem);letter-spacing:-.03em;text-shadow:0 2px 46px rgba(0,0,0,.4)}
.hero-h1 em{font-style:italic;background:linear-gradient(100deg,var(--champ) 8%,var(--champ-2) 55%,#f2e6cc);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:clamp(1.08rem,1.6vw,1.36rem);color:var(--bone);max-width:54ch;text-shadow:0 1px 22px rgba(0,0,0,.45)}
.hero-in .eyebrow{font-size:.74rem;color:var(--champ-2)}
.hero-foot{border-top:1px solid var(--line-2)}
.hero-foot .item{color:var(--bone-d)}
.hero-foot .item b{font-size:1.14rem;color:var(--bone)}
.crumb{color:var(--bone-d)}
.crumb a{color:var(--champ-2)}
#hero.compact{min-height:70svh}
#hero.compact .hero-h1{font-size:clamp(2.3rem,5.6vw,4.7rem);letter-spacing:-.025em}
#hero.compact .hero-sub{margin-bottom:0}

/* ============ CARDS — beautiful everywhere ============ */
.grid-3{gap:clamp(18px,2vw,28px)}
.card{position:relative;border:1px solid var(--line);border-radius:16px;padding:clamp(28px,2.8vw,40px);background:var(--card);overflow:hidden;
  transition:border-color .45s,transform .45s var(--e),background .45s,box-shadow .45s}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--champ),rgba(199,174,132,0));transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e)}
.card:hover::before{transform:scaleX(1)}
.card:hover{border-color:var(--line-2);transform:translateY(-6px);background:var(--card-hover);box-shadow:var(--sh)}
.card .cn{position:absolute;top:clamp(20px,2.4vw,30px);right:clamp(22px,2.6vw,34px);font-family:var(--disp);font-weight:800;font-size:2.5rem;line-height:1;letter-spacing:0;color:transparent;-webkit-text-stroke:1px var(--line-2);opacity:.85;transition:-webkit-text-stroke-color .45s}
.card:hover .cn{-webkit-text-stroke-color:var(--champ)}
.card .ci{width:58px;height:58px;border-radius:15px;border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(199,174,132,.09),transparent);display:grid;place-items:center;margin-bottom:22px;transition:background .45s,border-color .45s,transform .45s var(--e)}
.card:hover .ci{background:var(--champ);border-color:var(--champ);transform:rotate(-4deg)}
.card .ci svg{width:25px;height:25px;stroke:var(--champ);transition:stroke .45s}
.card:hover .ci svg{stroke:var(--ink)}
.card h3{font-size:clamp(1.24rem,1.9vw,1.5rem);margin-block:.15em .5em;padding-right:2.2em;line-height:1.15}
.card p{color:var(--bone-d);font-size:1rem;line-height:1.72}

/* ============ FEATURE ROWS ============ */
.feat{gap:clamp(30px,5vw,84px)}
.feat-media{border-radius:16px;box-shadow:var(--sh)}
.feat-media::after{content:"";position:absolute;inset:0;border:1px solid rgba(237,232,222,.09);border-radius:16px;pointer-events:none}
.feat-media img{filter:saturate(.99) brightness(.97)}
.feat-media .tag{top:16px;left:16px;font-size:.62rem;letter-spacing:.14em;color:var(--champ-2);background:rgba(12,12,14,.6);border:1px solid var(--line-2);padding:.5em .9em;border-radius:100px;backdrop-filter:blur(6px)}
.feat h2,.feat h3{font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.06}
.feat p{color:var(--bone-d);font-size:1.06rem;line-height:1.78;max-width:54ch}
.feat .kick{font-size:.7rem;letter-spacing:.18em;margin-bottom:16px}

/* ============ VALUE BAND ============ */
.band-item{transition:background .4s}
.band-item:hover{background:rgba(199,174,132,.055)}
.band-item .bk{color:var(--champ-2)}
.band-item .bt{font-size:clamp(1.6rem,2.8vw,2.4rem)}
.band-item .bd{color:var(--bone-d);font-size:.98rem;line-height:1.6}

/* ============ PROCESS ROWS ============ */
.row-t{font-size:clamp(1.5rem,3.4vw,2.7rem)}
.row-d{color:var(--bone-d);font-size:1rem;line-height:1.6}
.row-n{font-size:.82rem}

/* ============ CHECKLISTS ============ */
.checks li{font-size:1.03rem}
.checks li b{color:var(--bone)}
.checks .ck{width:26px;height:26px}
.checks li .muted{color:var(--mute)}

/* ============ COUNTIES ============ */
.counties{border-radius:12px}
.county{color:var(--bone-d);font-size:1rem}
.county:hover .cd{box-shadow:0 0 0 4px rgba(199,174,132,.16)}

/* ============ GALLERY (base uniform, e.g. homepage) ============ */
.gallery{gap:clamp(14px,1.6vw,22px)}
.gcell{border-radius:14px}
.gcell img{filter:saturate(.96) brightness(.86)}
.gcell::after{background:linear-gradient(180deg,rgba(12,12,14,0) 38%,rgba(12,12,14,.55) 68%,rgba(12,12,14,.9))}
.gcell::before{content:"";position:absolute;inset:0;border:1px solid transparent;border-radius:14px;z-index:3;pointer-events:none;transition:border-color .4s}
.gcell:hover::before{border-color:rgba(199,174,132,.55)}
.gcell .cap{padding:20px 22px}
.gcell .cap .s{color:var(--champ-2);font-size:.62rem;letter-spacing:.16em}
.gcell .cap .t{font-size:1.16rem}
.gcell .exp{width:40px;height:40px;background:rgba(12,12,14,.5)}

/* ============ PORTFOLIO — modern masonry ============ */
.gallery-full{display:block;column-count:3;column-gap:clamp(14px,1.6vw,22px)}
.gallery-full .gcell{aspect-ratio:auto;width:100%;margin:0 0 clamp(14px,1.6vw,22px);break-inside:avoid;-webkit-column-break-inside:avoid}
.gallery-full .gcell img{height:auto;aspect-ratio:auto}
@media(max-width:980px){.gallery-full{column-count:2}}
@media(max-width:600px){.gallery-full{column-count:1}}

/* ============ FILTER — modern pills ============ */
.filter{gap:12px}
.filter button{border-radius:100px;padding:.78em 1.4em;color:var(--bone-d);background:rgba(255,255,255,.022)}
.filter button:hover{border-color:var(--line-2);color:var(--bone);background:rgba(199,174,132,.06)}
.filter button.on{box-shadow:0 14px 28px -16px rgba(199,174,132,.6)}

/* ============ BLOG CARDS ============ */
.blog-grid{gap:clamp(20px,2.2vw,34px)}
.post{border-radius:16px;background:var(--card);position:relative}
.post:hover{border-color:var(--line-2);transform:translateY(-6px);box-shadow:var(--sh)}
.post-media{aspect-ratio:16/11;position:relative}
.post-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(12,12,14,.5));opacity:.9}
.post-media img{filter:saturate(.97) brightness(.9)}
.post-body{padding:clamp(22px,2.2vw,30px);padding-bottom:calc(clamp(22px,2.2vw,30px) + 26px);position:relative}
.post-body .pk{display:inline-block;font-size:.62rem;letter-spacing:.16em;color:var(--champ-2);border:1px solid var(--line-2);border-radius:100px;padding:.42em .85em;background:rgba(199,174,132,.05)}
.post-body h3{font-size:clamp(1.22rem,1.9vw,1.5rem);margin-block:.85em .45em;line-height:1.14}
.post-body p{color:var(--bone-d);font-size:1rem;line-height:1.65}
.post-body::after{content:"Explore \2192";position:absolute;left:clamp(22px,2.2vw,30px);bottom:clamp(18px,2vw,24px);font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--champ);opacity:.75;transition:opacity .35s,letter-spacing .35s}
.post:hover .post-body::after{opacity:1;letter-spacing:.2em}

/* ============ CTA BAND ============ */
.cta-bg::after{background:radial-gradient(90% 130% at 50% 125%,rgba(199,174,132,.2),transparent 55%),linear-gradient(rgba(12,12,14,.72),rgba(12,12,14,.93))}
.cta-in p{color:var(--bone);font-size:1.12rem}

/* ============ CALCULATOR / PRICE TABLE — readability ============ */
.calc-out .brk div{color:var(--bone-d)}
.calc-note{color:var(--mute)}
.seg button small{color:var(--bone-d)}
.seg button.on small{color:rgba(12,12,14,.72)}
.pricetable th,.pricetable td{padding:1.05em 1em}

/* ============ FOOTER — advanced ============ */
#ft{padding-top:clamp(60px,7vw,98px)}
.ft-top{grid-template-columns:1.9fr 1fr 1fr 1.25fr;gap:44px;padding-bottom:46px}
.ft-brand .bn{font-size:1.32rem}
.ft-brand p{color:var(--bone-d);font-size:.97rem;line-height:1.75;max-width:44ch;margin-top:16px}
.ft-props{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
.ft-props span{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--champ-2);border:1px solid var(--line-2);border-radius:100px;padding:.5em .8em;background:rgba(199,174,132,.05)}
.ft-props i{color:var(--mute);font-style:normal;font-size:.72rem}
.ft-mail{display:flex;width:fit-content;align-items:center;gap:9px;margin-top:22px;font-family:var(--mono);font-size:.84rem;letter-spacing:.03em;color:var(--champ);transition:color .25s}
.ft-mail .ft-ico{width:17px;height:17px;flex:none}
.ft-mail span{border-bottom:1px solid var(--line-2);padding-bottom:3px}
.ft-mail:hover{color:var(--champ-2)}
.ft-mail:hover .ft-ico{color:var(--champ-2)}
/* Inline call / mail icons (address blocks, mobile menu, contact info box) */
.cl-ico{width:15px;height:15px;flex:none;vertical-align:-2.5px;margin-right:8px}
.infoaddr a{display:inline-flex;align-items:center;border-bottom:none}
.infoaddr a span{border-bottom:1px solid rgba(199,174,132,.35);padding-bottom:1px}
.ft-col a{color:var(--bone-d);font-size:.95rem;transition:color .25s,padding-left .25s}
.ft-col a:hover{color:var(--champ);padding-left:6px}
.ft-cta address{color:var(--bone-d);font-size:.95rem;line-height:1.85;font-style:normal;margin-bottom:20px}
.ft-areas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ft-areas-t{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--champ);margin-right:6px}
.ft-areas ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px 24px;margin:0;padding:0}
.ft-areas li{position:relative;padding-left:16px;color:var(--bone-d);font-weight:300;font-size:.92rem}
.ft-areas li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--champ)}
.ft-word{color:transparent;-webkit-text-stroke:1px var(--line-2)}
.ft-bot p,.ft-bot a{color:var(--mute)}
@media(max-width:640px){.ft-props span{font-size:.55rem}}

/* ---- Nav: keep longer labels on one line; collapse earlier ---- */
.nav-mid{gap:clamp(13px,1.5vw,24px);margin-right:clamp(12px,1.6vw,22px)}
.nav-mid a{white-space:nowrap;font-size:.7rem;letter-spacing:.09em}
.nav-cta{white-space:nowrap}
@media(max-width:1080px){
  .nav-mid,.nav-cta{display:none}
  .burger{display:flex}
  .brand{margin-right:auto}
}

/* ---- Responsive footer re-stack (must follow Revision 2 base rule) ---- */
@media(max-width:980px){
  .ft-top{grid-template-columns:1fr 1fr;gap:32px}
  .ft-brand{grid-column:1/3}
}
@media(max-width:640px){
  .ft-top{grid-template-columns:1fr;gap:30px}
  .ft-brand{grid-column:auto}
  .ft-areas{gap:12px 18px}
  .ft-areas ul{gap:10px 18px}
}

/* ---- Text-safety: no clipping / overflow on any screen ---- */
h1,h2,h3,h4,.hero-h1,.h-sec,.h-sub,.row-t,.faq-q,.cta-in h2,.card h3,.post-body h3,.feat h2,.feat h3,.manifesto{overflow-wrap:break-word}
.brand,.ft-brand .bn{overflow-wrap:normal}
.ft-word{font-size:clamp(1.6rem,8.2vw,6.4rem);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-align:center}

/* ---- Guarantee zero horizontal scroll on every screen ---- */
html{overflow-x:hidden}
#loader{overflow:hidden}
.load-mk .nm{white-space:nowrap;max-width:94vw;font-size:clamp(1.15rem,4.6vw,2.6rem)}
#hd,.nav{max-width:100vw}

/* ---- Footer wordmark: always fully visible, wraps on small screens ---- */
.ft-word{white-space:normal;overflow:visible;word-break:normal;line-height:.92;font-size:clamp(2rem,9vw,6.2rem);letter-spacing:.02em}
#ft{overflow:hidden}
@media(max-width:700px){.ft-word{font-size:clamp(1.7rem,10vw,3.6rem);padding-inline:4px}}

/* ---- Footer column labels (non-heading, keeps heading order clean) ---- */
.ft-col .ft-h,.ft-cta .ft-h{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--champ);margin-bottom:16px}

/* ---- Contact map embed ---- */
.map-embed{position:relative;width:100%;aspect-ratio:16/7;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--ink-2)}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.05) brightness(.92)}
@media(max-width:640px){.map-embed{aspect-ratio:4/3}}

/* ============================================================
   FIX PASS — even gallery grid + aligned two-column checklist
   ============================================================ */

/* Our Homes: replace uneven masonry with a clean, aligned uniform grid */
.gallery-full{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));column-count:auto;column-gap:0;gap:clamp(14px,1.6vw,22px)}
.gallery-full .gcell{aspect-ratio:4/3;width:auto;margin:0;break-inside:auto;-webkit-column-break-inside:auto}
.gallery-full .gcell img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
@media(max-width:900px){.gallery-full{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.gallery-full{grid-template-columns:1fr}}

/* Two-column checklists: natural, tight, evenly-spaced rows that line up */
.checks.two{grid-auto-rows:auto;row-gap:22px}
.checks.two li{align-content:start}
@media(max-width:640px){.checks.two{grid-auto-rows:auto;row-gap:18px}}

/* ============================================================
   FIX PASS 2 — header legibility over hero + no CTA clipping
   ============================================================ */

/* Soft top scrim behind the transparent header so nav stays readable
   over bright hero images; fades out once the header becomes solid. */
#hd::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 52px);z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,12,14,.86) 0%,rgba(12,12,14,.5) 52%,rgba(12,12,14,0) 100%);
  opacity:1;transition:opacity .4s var(--e)}
#hd.solid::before{opacity:0}
.nav-mid a,.brand{text-shadow:0 1px 14px rgba(0,0,0,.5)}
#hd.solid .nav-mid a,#hd.solid .brand{text-shadow:none}

/* Tighter, clearer labels + more compact spacing so everything fits */
.brand{font-size:.98rem;letter-spacing:.1em}
.nav-mid{gap:clamp(11px,1.3vw,22px);margin-right:clamp(12px,1.4vw,20px)}
.nav-mid a{font-size:.685rem;letter-spacing:.08em}
.nav-cta.btn-sm{padding:.72em 1.15em;font-size:.66rem;letter-spacing:.1em}

/* Show the full nav only when there is room; collapse to the menu below ~1200px */
@media(max-width:1200px){.nav-mid,.nav-cta{display:none}.burger{display:flex}.brand{margin-right:auto}}

/* Process rows are now title-only (given step titles) → 3-col: number, title, arrow */
.rowitem{grid-template-columns:auto minmax(0,1fr) auto}

/* ============================================================
   COSMETIC FIXES
   ============================================================ */

/* 1) Calculator breakdown: keep each row on one line (no awkward wraps) */
.calc-out .brk div{gap:14px;align-items:baseline}
.calc-out .brk div span:first-child{white-space:normal;line-height:1.35}
.calc-out .brk b{white-space:nowrap;text-align:right}
@media(max-width:400px){.calc-out .brk div{font-size:.68rem}.calc-out .brk b{font-size:.68rem}}

/* 2) Gallery crop: bias the focal point toward the house (portrait photos
      were cropping the roof/foreground too tightly) + a hair less zoom */
.gcell img{object-position:center 42%}
.gallery-full .gcell img{object-position:center 40%}

/* 3) Remove the custom desktop cursor — use the normal system pointer */
#cur,#curd{display:none !important}

/* ============================================================
   FINISHING PASS — headers, spacing, feature images, footer
   ============================================================ */

/* 1) Section headers: robust 2-col grid (heading left, lead bottom-right),
      consistent everywhere, never wraps unpredictably */
.sec-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:end;gap:clamp(28px,4vw,60px);margin-bottom:clamp(30px,3.4vw,52px)}
.sec-head > p.lead{align-self:end;margin:0 0 .4em;color:var(--bone-d)}
@media(max-width:860px){
  .sec-head{grid-template-columns:1fr;align-items:start;gap:14px}
  .sec-head > p.lead{margin-bottom:0;max-width:60ch !important}
}

/* 2) Tighter vertical rhythm (was up to 150px, too airy) */
.section{padding-block:clamp(54px,6.5vw,102px)}
.section-sm{padding-block:clamp(40px,4.5vw,72px)}

/* 3) Feature images fill the row height to match the text (no small,
      centered images next to tall copy) */
.feat{align-items:stretch}
.feat-media{aspect-ratio:auto;min-height:clamp(300px,32vw,440px);align-self:stretch}
.feat-media img{width:100%;height:100%;object-fit:cover}
@media(max-width:980px){
  .feat-media{aspect-ratio:16/11;min-height:0;align-self:auto}
}

/* 4) Footer polish — depth, champagne accent, refined type */
#ft{background:linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 260px);border-top:1px solid var(--line-2);position:relative}
#ft::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(199,174,132,.7),transparent)}
#ft .wrap{position:relative;z-index:1}
.ft-top{padding-bottom:clamp(40px,4vw,52px)}
.ft-brand p{color:var(--bone-d)}
.ft-props span{transition:border-color .3s,color .3s,background .3s}
.ft-props span:hover{border-color:var(--champ);color:var(--champ)}
.ft-col .ft-h{color:var(--champ)}
.ft-cta .ft-h{color:var(--champ)}
.ft-cta .btn{width:100%;justify-content:center;margin-top:4px}
.ft-areas{background:rgba(255,255,255,.012);border-radius:12px;padding:26px clamp(18px,2vw,28px);border:1px solid var(--line);margin-top:8px}
.ft-word{background:linear-gradient(180deg,rgba(199,174,132,.22),rgba(199,174,132,.03));-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px var(--line-2);margin-top:clamp(26px,3.5vw,44px);margin-bottom:6px}
.ft-bot{margin-top:4px}
@media(max-width:640px){
  .ft-cta .btn{width:auto}
}

/* Footer proposition chips: guarantee they wrap and never clip on small screens */
.ft-props{max-width:100%}
@media(max-width:640px){
  .ft-props{gap:7px}
  .ft-props span{font-size:.52rem;padding:.5em .72em;letter-spacing:.07em}
  .ft-props i{font-size:.6rem}
}
@media(max-width:380px){
  .ft-props span{font-size:.5rem;padding:.45em .65em}
}

/* ============================================================
   MOTION PASS — richer entrance + hover animations
   ============================================================ */

/* Staggered children (grids, lists, gallery, chips) */
.stagger{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .7s var(--e),transform .7s var(--e);transition-delay:var(--d,0ms)}
.stagger.in{opacity:1;transform:none}

/* Section headings: animated underline sweep + gentle rise on the eyebrow */
.sec-head .eyebrow{position:relative;display:inline-block;overflow:hidden}
.sec-head .eyebrow::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:var(--champ);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e) .25s}
.sec-head.in .eyebrow::after,[data-rev].in .eyebrow::after{transform:scaleX(1)}
.h-sec{background:linear-gradient(100deg,var(--bone) 0 60%,var(--champ-2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:220% 100%;background-position:100% 0;transition:background-position 1.1s var(--e)}
[data-rev].in .h-sec,.sec-head.in .h-sec{background-position:0 0}

/* Hero headline words: subtle continuous shimmer on the gradient em */
.hero-h1 em{background-size:100% 100%}  /* static gold — shimmer animation removed */
@keyframes heroShimmer{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.hero-sub{animation:fu 1s var(--e) .9s both}
.hero-foot .item{animation:fu .8s var(--e) both}
.hero-foot .item:nth-child(2){animation-delay:.1s}.hero-foot .item:nth-child(3){animation-delay:.2s}

/* Cards: 3D tilt + moving spotlight + lift */
.card,.post{transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(0);transition:transform .5s var(--e),border-color .45s,background .45s,box-shadow .45s}
.card:hover,.post:hover{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-6px)}
.card::after,.post::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(199,174,132,.14),transparent 60%);z-index:1}
.card:hover::after,.post:hover::after{opacity:1}
.card > *,.post > *{position:relative;z-index:2}
.card .ci{transition:background .45s,border-color .45s,transform .5s var(--e)}
.card:hover .ci{transform:rotate(-6deg) scale(1.06)}
.card .cn{transition:-webkit-text-stroke-color .45s,transform .5s var(--e),opacity .45s}
.card:hover .cn{transform:translateX(-4px) scale(1.05);opacity:1}

/* Gallery tiles: spotlight + smoother zoom + caption slide */
.gcell{transition:transform .5s var(--e),box-shadow .5s var(--e)}
.gcell:hover{transform:translateY(-4px)}
.gcell img{transition:transform 1.1s var(--e),filter .6s var(--e)}
.gcell:hover img{transform:scale(1.07)}
.gcell .cap{transition:transform .45s var(--e)}
.gcell:hover .cap{transform:translateY(-4px)}
.gcell .exp{transition:transform .45s var(--e),background .3s,opacity .3s}
.gcell:hover .exp{transform:rotate(0) scale(1.1)}

/* Process rows: number & arrow motion, sliding highlight */
.rowitem .row-n{transition:color .4s var(--e),transform .5s var(--e)}
.rowitem:hover .row-n{color:var(--champ);transform:translateX(4px)}
.rowitem .row-t{transition:color .4s,transform .5s var(--e)}
.rowitem:hover .row-t{transform:translateX(6px)}

/* Checklist ticks pop in */
.checks .ck{transition:transform .4s var(--e),background .3s,border-color .3s}
.checks li:hover .ck{transform:scale(1.12) rotate(-6deg);border-color:var(--champ)}
.checks li:hover .ck svg{stroke:var(--champ)}

/* Feature media: parallax-ish scale + tag slide */
.feat-media .tag{transition:transform .45s var(--e),background .3s}
.feat:hover .feat-media .tag{transform:translateY(-3px)}

/* Buttons: sheen sweep */
.btn{position:relative;overflow:hidden}
.btn::after{display:none}  /* button sheen sweep removed */
.btn:hover::after{left:140%}
.btn-champ::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent)}

/* Filter pills & footer links micro-interactions */
.filter button{transition:transform .3s var(--e),border-color .3s,color .3s,background .3s}
.filter button:hover{transform:translateY(-2px)}
.filter button.on{transform:translateY(-1px)}
.ft-col a{position:relative}
.ft-mail{transition:color .25s,letter-spacing .3s}
.ft-mail:hover{letter-spacing:.06em}

/* Nav links: underline grow */
.nav-mid a{position:relative}
.nav-mid a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:100%;background:var(--champ);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--e)}
.nav-mid a:hover::after{transform:scaleX(1);transform-origin:left}

/* Value band items: rise + accent */
.band-item{transition:background .4s,transform .5s var(--e)}
.band-item:hover{transform:translateY(-4px)}
.band-item .bt{transition:color .4s}
.band-item:hover .bt{color:var(--champ-2)}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
  .stagger{opacity:1!important;transform:none!important}
  .hero-h1 em{animation:none!important}
  .hero-sub,.hero-foot .item{animation:none!important}
  .h-sec{-webkit-text-fill-color:var(--bone);background:none!important}
  .card,.post{transform:none!important}
  .btn::after{display:none}
}

/* FIX: media must never exceed its column (an inline aspect-ratio + stretch
   was letting width derive from height and overflow onto the text) */
.feat-media{width:100%;max-width:100%}
.grid-2 > .feat-media,.grid-2 > .feat-media img{max-width:100%}

/* ============================================================
   FIX: feature image size + section-heading width/legibility
   ============================================================ */

/* Feature media = controlled, balanced 4:3 crop (was stretching to a
   portrait photo's full natural height and looking oversized) */
.feat{align-items:center}
.feat-media{aspect-ratio:4/3;min-height:0;max-height:none;height:auto;align-self:center;width:100%;max-width:100%}
.feat-media img{width:100%;height:100%;object-fit:cover}
.grid-2 > .feat-media{align-self:center}
@media(max-width:980px){.feat-media{aspect-ratio:16/11}}

/* Section headings without a supporting line should use the full width
   (they were cramped into the left 60% column and stacking oddly) */
.sec-head:not(:has(p.lead)){grid-template-columns:1fr}
.sec-head:not(:has(p.lead)) .h-sec{max-width:20ch}

/* Keep headings crisp & solid (the animated gradient fill could tint /
   clip descenders on multi-line headings) */
.h-sec{-webkit-text-fill-color:var(--bone);color:var(--bone);background:none;background-image:none}

/* ============================================================
   FIX: section headers — clean, consistent STACKED layout
   (2-col cramped long headings & misaligned leads/buttons)
   ============================================================ */
.sec-head{display:block !important;margin-bottom:clamp(30px,3.4vw,52px)}
.sec-head > div{max-width:100%}
.sec-head .h-sec{max-width:22ch}
.sec-head > p.lead{display:block;margin:.95em 0 0;max-width:58ch;color:var(--bone-d);align-self:auto}
.sec-head > .btn,.sec-head > a.btn{display:inline-flex;margin-top:1.5em}
@media(max-width:640px){
  .sec-head .h-sec{max-width:20ch}
  .sec-head > p.lead{max-width:60ch}
}

/* ============================================================
   ADD: Brand logo lockup (header + footer), brand banner,
        legal pages typography, house-styles grid
   Appended last so it takes precedence in the cascade.
   ============================================================ */

/* ---- Header brand → real logo on a clean plate ---- */
.brand{display:inline-flex;align-items:center;gap:0;background:#fff;
  border:1px solid rgba(199,174,132,.4);border-radius:9px;
  padding:6px 11px;line-height:0;white-space:nowrap;
  box-shadow:0 2px 16px rgba(0,0,0,.30);
  transition:transform .12s var(--e),box-shadow .35s var(--e),border-color .35s}
.brand:hover{box-shadow:0 6px 26px rgba(0,0,0,.42);border-color:rgba(199,174,132,.7)}
.brand:active{transform:scale(.98)}
.brand picture{display:block;line-height:0}
.brand-img{height:34px;width:auto;display:block}
#hd.solid .brand{padding:5px 10px}
#hd.solid .brand-img{height:30px}

/* ---- Footer brand → real logo on a clean plate ---- */
.ft-brand .bn{display:inline-flex;background:#fff;
  border:1px solid rgba(199,174,132,.4);border-radius:12px;
  padding:12px 18px;line-height:0;gap:0;
  box-shadow:0 10px 34px -14px rgba(0,0,0,.7)}
.ft-brand .bn picture{display:block;line-height:0}
.bn-img{height:52px;width:auto;display:block}

/* ---- Brand banner band (home) ---- */
.brand-band{background:var(--ink-2);padding-block:clamp(40px,6vw,84px);position:relative}
.brand-band .bb-frame{width:100%;max-width:1180px;margin-inline:auto;
  border:1px solid var(--line-2);border-radius:16px;overflow:hidden;
  box-shadow:var(--sh);background:#0b1a33}
.brand-band .bb-frame img{width:100%;height:auto;display:block}

/* ============================================================
   Legal pages (Privacy Policy / Terms & Conditions)
   ============================================================ */
.prose .legal-meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--champ);line-height:1.9;margin:0 0 2.2em;max-width:none}
.prose .legal-meta strong{font-weight:700;color:var(--champ)}
.prose .lh{font-family:var(--disp);font-weight:700;color:var(--bone);
  font-size:clamp(1.16rem,1.9vw,1.5rem);line-height:1.2;letter-spacing:-.01em;
  margin:2.4em 0 .55em;padding-top:1.5em;border-top:1px solid var(--line)}
.prose .lh:first-child,.prose > .legal-meta + .lh{margin-top:1.6em}
.prose .lsub{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--champ);margin:1.7em 0 .5em}
.prose .lul{list-style:none;margin:.35em 0 1.35em;padding:0;max-width:70ch}
.prose .lul li{position:relative;padding-left:1.5em;margin-bottom:.5em;
  color:var(--bone-d);font-weight:300;font-size:1.04rem;line-height:1.72}
.prose .lul li::before{content:"";position:absolute;left:0;top:.72em;
  width:8px;height:1px;background:var(--champ)}
.prose .lol{margin:.35em 0 1.35em;padding-left:1.4em;max-width:70ch}
.prose .lol li{margin-bottom:.5em;color:var(--bone-d);font-weight:300;
  font-size:1.04rem;line-height:1.72}
.prose .lol li::marker{color:var(--champ);font-family:var(--mono);font-size:.85em}
.prose p strong{color:var(--bone);font-weight:600}

/* ============================================================
   House styles we build (Our Homes page)
   ============================================================ */
.hs-grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,22px);margin-top:clamp(30px,3.4vw,48px)}
.hs-card{position:relative;border:1px solid var(--line);border-radius:15px;
  padding:clamp(20px,2vw,28px);background:var(--card);overflow:hidden;
  transition:border-color .4s,transform .4s var(--e),background .4s,box-shadow .4s}
.hs-card:hover{border-color:var(--line-2);transform:translateY(-5px);
  background:var(--card-hover);box-shadow:var(--sh)}
.hs-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:.5em}
.hs-n{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--champ)}
.hs-fav{font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--champ);border:1px solid var(--line-2);border-radius:999px;padding:.34em .8em;white-space:nowrap}
.hs-name{font-family:var(--disp);font-weight:700;color:var(--bone);
  font-size:clamp(1.14rem,1.6vw,1.34rem);line-height:1.15;letter-spacing:-.01em;margin:.1em 0 .7em}
.hs-list{list-style:none;margin:0;padding:0}
.hs-list li{position:relative;padding-left:1.4em;margin-bottom:.42em;
  color:var(--bone-d);font-weight:300;font-size:.95rem;line-height:1.6}
.hs-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--champ)}
.hs-note{margin-top:clamp(26px,3vw,42px);color:var(--mute);font-weight:300;
  font-size:.92rem;font-style:italic;max-width:70ch}

@media(max-width:980px){
  .hs-grid{grid-template-columns:repeat(2,1fr)}
  .bn-img{height:46px}
}
@media(max-width:640px){
  .hs-grid{grid-template-columns:1fr}
  .brand-img{height:30px}
  #hd.solid .brand-img{height:28px}
  .brand{padding:5px 9px}
  .bn-img{height:42px}
  .ft-brand .bn{padding:10px 14px}
  .prose .lh{font-size:1.16rem}
}

/* ============================================================
   ADD: Heading legibility — use available width, fewer lines,
        single line on desktop where space allows.
   ============================================================ */
/* Hero titles: widen the measure so long titles don't stack into 3-5 cramped lines */
.hero-h1{max-width:26ch}
#hero.compact .hero-h1{max-width:30ch}

/* Section headings: let them span the available width; drop the tight cap */
.sec-head .h-sec,
.sec-head:not(:has(p.lead)) .h-sec{max-width:38ch}
.h-sec{max-width:38ch}

/* Section-heading hard breaks are removed in the HTML so headings flow
   naturally — one line on desktop where there is room, wrapping on mobile. */



/* Slightly smaller section-heading ceiling so common headings fit on one
   line on desktop (leaves margin so the balancer doesn't split them),
   while hero titles fill the width naturally. */
.h-sec{font-size:clamp(2rem,4vw,3.6rem)}
.hero-h1{text-wrap:pretty}

/* ============================================================
   ADD: Blog index cards (meta) + single article layout
   ============================================================ */
/* Blog index cards */
.post-body .pmeta{display:flex;gap:.7em;align-items:center;margin-top:.85em;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.post-body .pmeta i{width:3px;height:3px;border-radius:50%;background:var(--champ);display:inline-block}
.blog-grid .post .post-body{padding-bottom:calc(clamp(22px,2.2vw,30px) + 44px)}
.blog-grid .post .post-body::after{content:"Read article \2192"}

/* Article head (custom, compact) */
.art-head{padding-top:clamp(122px,16vh,182px);padding-bottom:clamp(18px,2.6vw,30px);position:relative}
.art-title{font-family:var(--disp);font-weight:700;color:var(--bone);
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.08;letter-spacing:-.02em;
  margin-top:16px;max-width:24ch;text-wrap:pretty}
.article-meta{display:flex;flex-wrap:wrap;gap:.85em;align-items:center;margin-top:18px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-d)}
.article-meta i{width:4px;height:4px;border-radius:50%;background:var(--champ);display:inline-block}

/* Featured image */
.article-figure{max-width:960px;margin:0 auto clamp(30px,4vw,56px);padding-inline:var(--pad)}
.article-figure .fx{border-radius:16px;overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--sh);background:var(--ink-3)}
.article-figure img{width:100%;height:auto;display:block;aspect-ratio:2/1;object-fit:cover}

/* Article body */
.article{max-width:760px;margin-inline:auto}
.article > p{color:var(--bone-d);font-weight:300;font-size:1.09rem;line-height:1.8;margin-bottom:1.25em}
.article > p.lead,.article > p:first-of-type{font-size:1.2rem;color:var(--bone);line-height:1.7}
.article h2{font-family:var(--disp);font-weight:700;color:var(--bone);
  font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.18;letter-spacing:-.015em;margin:1.9em 0 .5em}
.article h3{font-family:var(--disp);font-weight:700;color:var(--bone);
  font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.2;margin:1.5em 0 .4em}
.article h2:first-child,.article h3:first-child,.article > p:first-of-type:first-child{margin-top:0}
.article ul,.article ol{margin:.5em 0 1.5em;padding:0;list-style:none}
.article ol{counter-reset:ac}
.article li{position:relative;padding-left:1.6em;margin-bottom:.55em;color:var(--bone-d);font-weight:300;font-size:1.06rem;line-height:1.7}
.article ul li::before{content:"";position:absolute;left:0;top:.66em;width:9px;height:1px;background:var(--champ)}
.article ol li{counter-increment:ac;padding-left:2.1em}
.article ol li::before{content:counter(ac);position:absolute;left:0;top:.02em;font-family:var(--mono);font-size:.78rem;color:var(--champ)}
.article a{color:var(--champ);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.article a:hover{color:var(--champ-2)}
.article strong{color:var(--bone);font-weight:600}
.article blockquote{margin:1.7em 0;padding:.3em 0 .3em 1.3em;border-left:2px solid var(--champ);
  color:var(--bone);font-style:italic;font-size:1.14rem;line-height:1.6}
.article-note{margin:2.4em auto 0;max-width:760px;padding-top:1.4em;border-top:1px solid var(--line);
  color:var(--mute);font-size:.92rem;font-style:italic}

/* Share + back */
.article-foot{max-width:760px;margin:clamp(30px,4vw,50px) auto 0;display:flex;flex-wrap:wrap;gap:18px;
  justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:24px}
.article-share{display:flex;gap:10px;align-items:center}
.article-share span{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-right:2px}
.article-share a{width:38px;height:38px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;color:var(--bone-d);transition:background .3s,color .3s,border-color .3s}
.article-share a:hover{background:var(--champ);color:var(--ink);border-color:var(--champ)}
.article-share svg{width:16px;height:16px;fill:currentColor}
.back-blog{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--champ);display:inline-flex;gap:.6em;align-items:center;transition:gap .3s,color .3s}
.back-blog svg{width:15px;height:15px}
.back-blog:hover{color:var(--champ-2);gap:.95em}

/* Keep reading */
.kr-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(22px,2.4vw,34px)}

/* ============================================================
   ADD: Animated + refined site header (applies to every page)
   ============================================================ */
@keyframes hdDrop{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes hdItem{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}

/* Entrance: the bar eases down; brand, links and CTA stagger in */
#hd{animation:hdDrop .75s var(--e) both}
.brand{animation:hdItem .6s var(--e) .12s both;
  transition:transform .35s var(--e),box-shadow .4s,border-color .4s}
.nav-mid a{animation:hdItem .55s var(--e) both}
.nav-mid a:nth-child(1){animation-delay:.16s}
.nav-mid a:nth-child(2){animation-delay:.22s}
.nav-mid a:nth-child(3){animation-delay:.28s}
.nav-mid a:nth-child(4){animation-delay:.34s}
.nav-mid a:nth-child(5){animation-delay:.40s}
.nav-mid a:nth-child(6){animation-delay:.46s}
.nav-mid a:nth-child(7){animation-delay:.52s}
.nav-cta{animation:hdItem .6s var(--e) .56s both}

/* Nav links: gradient underline, subtle lift, and a persistent active state */
.nav-mid a{transition:color .3s,transform .3s var(--e)}
.nav-mid a:hover{transform:translateY(-1px)}
.nav-mid a::after{height:1.5px;border-radius:2px;background:linear-gradient(90deg,var(--champ),var(--champ-2))}
.nav-mid a[aria-current="page"]{color:var(--bone)}
.nav-mid a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

/* Brand plate: gentle lift on hover */
.brand:hover{transform:translateY(-1px) scale(1.02)}

/* Header CTA: on-brand champagne fill on hover (instead of cream) */
.nav-cta:hover{background:var(--champ);color:var(--ink);border-color:var(--champ)}

/* Solid-on-scroll gets a soft shadow for depth */
#hd.solid{box-shadow:0 12px 34px -20px rgba(0,0,0,.7)}

/* Mobile menu: links cascade in when the menu opens */
@keyframes mmIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body.mo #mm a{animation:mmIn .5s var(--e) both}
body.mo #mm a:nth-child(1){animation-delay:.05s}
body.mo #mm a:nth-child(2){animation-delay:.10s}
body.mo #mm a:nth-child(3){animation-delay:.15s}
body.mo #mm a:nth-child(4){animation-delay:.20s}
body.mo #mm a:nth-child(5){animation-delay:.25s}
body.mo #mm a:nth-child(6){animation-delay:.30s}
body.mo #mm a:nth-child(7){animation-delay:.35s}
body.mo #mm a:nth-child(8){animation-delay:.40s}

@media(prefers-reduced-motion:reduce){
  #hd,.brand,.nav-mid a,.nav-cta,#mm a{animation:none !important}
}

/* ============================================================
   LIGHT MODE  —  toggle via  <html data-theme="light">
   Strategy: the dark "chrome" (header, footer, CTA band, photo
   heroes, gallery captions) is kept dark in BOTH themes by
   re-scoping the original dark token values inside those regions;
   the page CONTENT flips to a warm ivory light theme.
   Appended last so it wins the cascade.
   ============================================================ */
html[data-theme="light"]{
  --bone:#23221E;                    /* primary text -> warm near-black */
  --bone-d:#4E4B44;                  /* secondary text */
  --mute:#77726A;                    /* muted text */
  --ink-2:#ECE6D9;                   /* light surface: cards, sections, bands */
  --ink-3:#E3DCCB;                   /* deeper light surface */
  --champ:#A17C3C;                   /* gold deepened for contrast on ivory */
  --champ-2:#BE9A55;
  --line:rgba(35,34,30,.14);         /* hairline / divider on light */
  --line-2:rgba(150,112,58,.34);     /* gold hairline on light */
  --card:linear-gradient(180deg,#FFFFFF,#FBF8F1);
  --card-hover:linear-gradient(180deg,#FFFDF8,#F5EEDF);
  --sh:0 26px 60px -32px rgba(60,50,30,.30);
  --paper:#F5F1E8;                   /* page background */
}
html[data-theme="light"] body{background:var(--paper)}
/* elements that used var(--ink) as a (now light) background surface */
html[data-theme="light"] #mm{background:var(--paper)}
html[data-theme="light"] #loader{background:var(--paper)}
html[data-theme="light"] .county{background:#EFE9DC}
html[data-theme="light"] .calc-form input,
html[data-theme="light"] .input,
html[data-theme="light"] select.input{background:#fff}
/* outline button: hover fills gold in light mode (reads on both light & dark bands) */
html[data-theme="light"] .btn-line:hover{background:var(--champ);color:var(--ink);border-color:var(--champ)}

/* Keep the dark chrome dark: re-scope the ORIGINAL dark token values inside
   these regions, so every descendant's text/border follows automatically.
   #hero.hero-photo matches the 7 photo heroes; the 2 solid legal heroes
   have no .hero-bg, so they correctly flip to light. */
html[data-theme="light"] #hd,
html[data-theme="light"] #ft,
html[data-theme="light"] #cta,
html[data-theme="light"] #hero.hero-photo,
html[data-theme="light"] .gcell{
  color:var(--bone);
  --bone:#EDE8DE; --bone-d:#C9C4BA; --mute:#A7A199;
  --ink-2:#141419; --ink-3:#1C1C22;
  --champ:#C7AE84; --champ-2:#DAC49B;
  --line:rgba(237,232,222,.13); --line-2:rgba(199,174,132,.32);
  --card:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.006));
  --card-hover:linear-gradient(180deg,rgba(199,174,132,.075),rgba(255,255,255,.012));
  --sh:0 28px 70px -34px rgba(0,0,0,.78);
}

/* ---- Theme toggle button (sits in the dark header) ---- */
.theme-tgl{width:40px;height:40px;border-radius:50%;flex:none;display:inline-flex;
  align-items:center;justify-content:center;border:1px solid var(--line-2);
  color:var(--bone);background:transparent;
  transition:color .3s var(--e),border-color .3s var(--e),transform .12s var(--e)}
.theme-tgl:hover{color:var(--champ);border-color:var(--champ)}
.theme-tgl:active{transform:scale(.94)}
.theme-tgl svg{width:18px;height:18px}
.theme-tgl .i-sun{display:none}
html[data-theme="light"] .theme-tgl .i-moon{display:none}
html[data-theme="light"] .theme-tgl .i-sun{display:block}

/* ============================================================
   FIX — glyph clipping on background-clip:text elements
   The gradient text fill paints only within the element's box,
   but slanted/italic glyphs (e.g. the trailing "d" in the gold
   "Your Land") and edge glyphs overhang that box and were being
   cut off. Extending the paint box with padding (and offsetting
   the trailing element with negative margin) restores the full
   glyph with zero layout shift.
   ============================================================ */
.hero-h1 em{padding-right:.22em;margin-right:-.22em}
.cta-in h2 em,#cta h2 em{padding-right:.14em;margin-right:-.14em}
.h-sec{padding-right:.12em}
.ft-word{padding-left:.14em;padding-right:.14em}

/* ============================================================
   HERO IMAGERY — always show the COMPLETE house, no crop, on
   every page and every screen. Two regimes:

   • LANDSCAPE (desktop / wide): the 3:2 photo is fitted with
     object-fit:contain, and the slim side gaps are filled with a
     softly blurred, darkened copy of THAT page's own image (via
     the --hero-blur variable set on each <section id="hero">).
   • PORTRAIT (phones / portrait tablets): the hero stacks — the
     full photo sits on top in a frame that matches its native
     3:2 ratio (so nothing is cropped), with the headline + copy
     directly below on the dark surface.
   ============================================================ */
@media (min-aspect-ratio:1/1){
  /* Full-bleed image at its previous immersive size — the photo fills the
     whole hero (no letterbox, no shrinking). The heroes are tall enough that
     object-fit:cover only trims the expendable sky and foreground, never the
     house, and each page's --hero-pos nudges the focal point to keep the
     whole house in frame. */
  #hero.hero-photo .hero-bg img{object-fit:cover;animation:none}
  #hero.compact.hero-photo{min-height:min(94svh,58vw)}
}

@media (max-aspect-ratio:1/1){
  #hero.hero-photo{min-height:0;display:block;overflow:visible}
  #hero.hero-photo .hero-bg{position:relative;inset:auto;width:100%;height:auto;
    aspect-ratio:3/2;z-index:0;animation:none}
  #hero.hero-photo .hero-bg picture{position:absolute;inset:0;display:block;height:100%}
  #hero.hero-photo .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center;animation:none}
  #hero.hero-photo::before{display:none!important}
  #hero.hero-photo .hero-bg::before{display:none}
  #hero.hero-photo .hero-bg::after{background:linear-gradient(180deg,
    rgba(12,12,14,.30) 0%,rgba(12,12,14,0) 15%,rgba(12,12,14,0) 82%,var(--ink) 100%)}
  #hero.hero-photo .hero-in{position:relative;z-index:2;background:var(--ink);
    padding-top:clamp(22px,5.5vw,34px);padding-bottom:clamp(30px,7vw,48px)}
  #hero.hero-photo.compact .hero-in{padding-top:clamp(22px,5.5vw,34px)}
  .hero-scroll{display:none}
}

/* ---- Phone / click-to-call links ---- */
.ft-tel{margin-top:10px}
.ft-cta address a{color:var(--champ);transition:color .25s}
.ft-cta address a:hover{color:var(--champ-2)}
#mm .mm-ft a{color:inherit;font:inherit;letter-spacing:inherit;font-weight:inherit;border:0;padding:0;text-decoration:none}

/* ---- Footer statement heading + share icons (added) ---- */
.ft-lead-h{font-family:var(--display,'Syne',sans-serif);font-weight:600;font-size:1.12rem;line-height:1.25;color:var(--bone);margin:0 0 .55em;letter-spacing:.01em}
.ft-lead-p{margin-top:0}
.ft-social{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:24px}
.ft-social-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-right:5px}
.ft-social .sh{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line-2);border-radius:50%;color:var(--bone-d);background:transparent;cursor:pointer;transition:color .25s,border-color .25s,background .25s,transform .2s}
.ft-social .sh svg{width:17px;height:17px}
.ft-social .sh:hover,.ft-social .sh:focus-visible{color:var(--ink);background:var(--champ);border-color:var(--champ);transform:translateY(-2px);outline:none}
#shareToast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);background:#141419;color:#EDE8DE;border:1px solid rgba(199,174,132,.4);padding:11px 20px;border-radius:100px;font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:9999;box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
#shareToast.show{opacity:1;transform:translateX(-50%) translateY(0)}