/* ============================================================
BETHEL FINISH WORKS — design system
Single theme by design. Every color painted explicitly.
============================================================ */
:root{
color-scheme:light dark;
--walnut:#1E1813; /* dark field — hero, footer */
--walnut-2:#2B231C; /* raised dark surface */
--bone:#F8F6F2; /* page ground — near white */
--paper:#FFFFFF; /* cards on bone */
--ink:#221D18; /* body text on light */
--ink-2:#5E564D; /* secondary text on light */
--faint:#8B8279;
--line:#DDD7CC; /* rules on light */
--line-dk:#443A30; /* rules on dark */
--ox:#6E2434; /* oxblood — pew cushion, the accent */
--ox-lt:#9C4453;
--brass:#9C7A35; /* hardware */
--brass-lt:#C8A64F;
--sage:#4A5D4E;
--cream:#EFE9DC; /* text on walnut */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0; background:var(--bone); color:var(--ink);
font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.narrow{max-width:760px}
h1,h2,h3,.serif{font-family:Newsreader,Georgia,serif;font-weight:500}
h1{font-size:clamp(42px,6.4vw,76px);line-height:1.02;letter-spacing:-.02em;margin:0;text-wrap:balance}
h2{font-size:clamp(30px,4.2vw,46px);line-height:1.1;letter-spacing:-.015em;margin:0 0 14px;text-wrap:balance}
h3{font-size:23px;line-height:1.2;margin:0 0 8px}
p{margin:0 0 16px}
a{color:inherit}
.lede{font-family:Newsreader,Georgia,serif;font-size:clamp(19px,2.1vw,23px);line-height:1.5;color:var(--ink-2)}
.eyebrow{
font-size:12px;letter-spacing:.19em;text-transform:uppercase;font-weight:600;
color:var(--brass);margin:0 0 16px
}
.eyebrow.on-dark{color:var(--brass)}
/* ---------- header ---------- */
header.top{
position:sticky;top:0;z-index:60;background:var(--walnut);
border-bottom:1px solid var(--line-dk)
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--cream)}
.mark svg{flex:none}
.mark .nm{font-family:Newsreader,serif;font-size:20px;line-height:1;letter-spacing:.01em}
.mark .nm small{display:block;font-family:Archivo,sans-serif;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-top:4px}
nav.main{display:flex;align-items:center;gap:22px}
nav.main a{color:var(--cream);text-decoration:none;font-size:14.5px;opacity:.86}
nav.main a:hover{opacity:1;color:#fff}
.btn{
display:inline-block;border:0;cursor:pointer;text-decoration:none;
font-family:Archivo,sans-serif;font-size:15px;font-weight:600;letter-spacing:.01em;
padding:13px 22px;border-radius:2px;transition:background .15s
}
.btn-ox{background:var(--ox);color:#fff}
.btn-ox:hover{background:#832B3D}
.btn-brass{background:var(--brass);color:#1E1813}
.btn-brass:hover{background:#B08C41}
.btn-ghost{background:transparent;color:var(--cream);border:1px solid #6A5B4B}
.btn-ghost:hover{border-color:var(--brass);color:#fff}
.btn-lg{padding:16px 30px;font-size:16px}
@media(max-width:880px){nav.main{display:none}}
/* ---------- hero ---------- */
.hero{background:var(--walnut);color:var(--cream);padding:76px 0 0;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
.hero h1{color:#F6F2E8}
.hero h1 em{font-style:italic;color:var(--brass)}
.hero .sub{font-size:19.5px;line-height:1.55;color:#C6BCAE;max-width:44ch;margin:24px 0 30px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .callnote{font-size:14px;color:#9A8F81;margin-top:16px}
.diagwrap{padding:10px 0 0}
.hero svg.diagram{width:100%;height:auto;display:block}
@media(max-width:900px){.hero .grid{grid-template-columns:1fr;gap:30px}.hero{padding-top:52px}}
/* trust strip */
.trust{background:var(--walnut-2);border-top:1px solid var(--line-dk);margin-top:56px}
.trust ul{
list-style:none;margin:0;padding:18px 0;display:flex;flex-wrap:wrap;gap:10px 40px;
justify-content:center;font-size:14px;color:#CFC4B4
}
.trust li{display:flex;align-items:center;gap:9px}
.trust .dot{width:5px;height:5px;border-radius:50%;background:var(--brass);flex:none}
/* ---------- sections ---------- */
section{padding:82px 0}
.sec-head{max-width:720px;margin-bottom:38px}
.rule{height:1px;background:var(--line);border:0;margin:0}
/* services */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.svc > div{background:var(--paper);padding:30px 28px 32px;display:flex;flex-direction:column}
.svc .num{font-family:Newsreader,serif;font-size:14px;color:var(--brass);margin-bottom:14px;letter-spacing:.05em}
.svc h3{margin-bottom:10px}
.svc p{font-size:16.5px;color:var(--ink-2);margin-bottom:16px}
.svc ul{margin:0 0 20px;padding-left:18px;font-size:15.5px;color:var(--ink-2)}
.svc li{margin-bottom:5px}
.svc li::marker{color:var(--brass)}
.svc .price{
margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
font-size:14px;color:var(--ink-2)
}
.svc .price b{font-family:Newsreader,serif;font-size:20px;color:var(--ox);display:block;margin-top:3px;font-weight:500}
@media(max-width:900px){.svc{grid-template-columns:1fr}}
/* dark band */
.band{background:var(--walnut);color:var(--cream)}
.band h2{color:#F6F2E8}
.band .lede{color:#C6BCAE}
.band .rule{background:var(--line-dk)}
/* the Sunday promise */
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:36px}
.promise h3{color:#F1EADC;font-size:20px}
.promise p{font-size:16px;color:#B8AC9C;margin:0}
.promise .k{
font-family:Newsreader,serif;font-size:40px;color:var(--brass);line-height:1;
display:block;margin-bottom:12px
}
@media(max-width:820px){.promise{grid-template-columns:1fr;gap:26px}}
.pledge{
margin-top:44px;border:1px solid var(--brass);padding:26px 28px;
display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap
}
.pledge .lbl{
font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--brass);
font-weight:600;flex:none;padding-top:5px;width:140px
}
.pledge p{margin:0;font-family:Newsreader,serif;font-size:20px;line-height:1.45;color:#F1EADC;flex:1;min-width:280px}
/* anatomy */
.anat{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.anat svg{width:100%;height:auto}
.gloss dt{font-weight:600;font-size:16px;margin-top:16px}
.gloss dd{margin:3px 0 0;font-size:16px;color:var(--ink-2)}
.gloss dt:first-child{margin-top:0}
@media(max-width:880px){.anat{grid-template-columns:1fr;gap:30px}}
/* proof / craft */
.proof{display:grid;grid-template-columns:1.05fr .95fr;gap:52px}
.proof .kicker{font-family:Newsreader,serif;font-size:27px;line-height:1.3;color:var(--ink);margin-bottom:18px}
.proof p{font-size:17px;color:var(--ink-2)}
.checks{list-style:none;margin:0;padding:0}
.checks li{
position:relative;padding-left:30px;margin-bottom:13px;font-size:16.5px;color:var(--ink-2)
}
.checks li:before{
content:"";position:absolute;left:0;top:9px;width:14px;height:8px;
border-left:2px solid var(--sage);border-bottom:2px solid var(--sage);transform:rotate(-45deg)
}
.checks li b{color:var(--ink)}
@media(max-width:880px){.proof{grid-template-columns:1fr;gap:30px}}
/* pricing */
.ptable{width:100%;border-collapse:collapse;margin-top:26px;font-size:16.5px}
.ptable th{
text-align:left;font-family:Archivo,sans-serif;font-size:11.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-2);font-weight:600;
border-bottom:2px solid var(--ink);padding:0 14px 9px
}
.ptable td{border-bottom:1px solid var(--line);padding:15px 14px;vertical-align:top}
.ptable td.n{text-align:right;white-space:nowrap;font-family:Newsreader,serif;font-size:20px;color:var(--ox)}
.ptable tr:last-child td{border-bottom:2px solid var(--ink)}
.ptable .what{font-weight:600}
.ptable .what span{display:block;font-weight:400;font-size:15px;color:var(--ink-2);margin-top:3px}
/* swatches */
.swatches{display:flex;flex-wrap:wrap;gap:0;margin:30px 0 10px;border:1px solid var(--line)}
.sw{flex:1 1 90px;height:74px;position:relative}
.sw span{
position:absolute;bottom:7px;left:9px;font-size:10.5px;letter-spacing:.1em;
text-transform:uppercase;color:rgba(255,255,255,.82)
}
.sw.dk span{color:rgba(30,24,19,.66)}
/* people */
.people{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:34px}
.people > div{background:var(--paper);padding:28px}
.people .nm{font-family:Newsreader,serif;font-size:26px;margin-bottom:3px}
.people .role{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:14px}
.people p{font-size:16.5px;color:var(--ink-2);margin:0}
@media(max-width:760px){.people{grid-template-columns:1fr}}
/* offer */
.offer{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--ox);padding:38px 40px}
.offer h2{margin-bottom:10px}
.offer ol{margin:22px 0 0;padding-left:20px;font-size:17px;color:var(--ink-2);max-width:60ch}
.offer li{margin-bottom:9px}
.offer li::marker{color:var(--ox);font-weight:600}
/* form */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-top:26px}
.f-full{grid-column:1/-1}
label{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:#B8AC9C;margin-bottom:7px}
input,select,textarea{
width:100%;font-family:Archivo,sans-serif;font-size:16px;padding:13px 14px;
background:#2B231C;border:1px solid #4A3E33;color:#F1EADC;border-radius:2px
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass)}
textarea{min-height:110px;resize:vertical}
.formnote{font-size:14.5px;color:#9A8F81;margin-top:16px}
@media(max-width:760px){.formgrid{grid-template-columns:1fr}}
/* footer */
footer{background:var(--walnut);color:#9A8F81;padding:56px 0 40px;border-top:1px solid var(--line-dk);font-size:15px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:34px}
@media(max-width:980px){.fgrid{grid-template-columns:1fr 1fr}}
footer h4{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin:0 0 14px;font-weight:600}
footer a{color:#C6BCAE;text-decoration:none;display:block;margin-bottom:8px}
footer a:hover{color:#fff}
.fbot{border-top:1px solid var(--line-dk);padding-top:22px;font-size:13.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
@media(max-width:760px){.fgrid{grid-template-columns:1fr;gap:26px}}
.todo{background:#FFF6D6;border:1px dashed #B08C41;color:#5C4A18;padding:2px 7px;font-size:13px;border-radius:2px;font-family:Archivo,sans-serif}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* ============================================================
PAGE-LEVEL COMPONENTS (service pages, cost pages, geo pages)
============================================================ */
/* breadcrumbs */
.crumbs{font-size:13px;color:#9A8F81;padding:14px 0 0}
.crumbs a{color:#C6BCAE;text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs span{margin:0 7px;color:#6A5B4B}
/* page hero — shorter than the homepage hero */
.phero{background:var(--walnut);color:var(--cream);padding:0 0 64px}
.phero h1{color:#F6F2E8;font-size:clamp(38px,5.4vw,62px);margin-top:26px}
.phero .sub{font-size:19px;line-height:1.55;color:#C6BCAE;max-width:52ch;margin:22px 0 28px}
.phero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:26px}
.phero svg.diagram{width:100%;height:auto;display:block}
@media(max-width:900px){.phero .grid{grid-template-columns:1fr;gap:28px}}
/* the direct answer box — written for the snippet */
.answer{
background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--brass);
padding:28px 32px;margin:0 0 8px
}
.answer p{font-family:Newsreader,Georgia,serif;font-size:21px;line-height:1.5;margin:0}
.answer p + p{margin-top:14px;font-size:19px;color:var(--ink-2)}
/* comparison table */
.ctable{width:100%;border-collapse:collapse;margin-top:28px;font-size:16px}
.ctable th{
text-align:left;font-family:Archivo,sans-serif;font-size:11.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--ink-2);font-weight:600;
border-bottom:2px solid var(--ink);padding:0 14px 9px;vertical-align:bottom
}
.ctable td{border-bottom:1px solid var(--line);padding:16px 14px;vertical-align:top;color:var(--ink-2)}
.ctable td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.ctable td.n{font-family:Newsreader,serif;font-size:19px;color:var(--ox);white-space:nowrap}
.ctable tr:last-child td{border-bottom:2px solid var(--ink)}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* numbered process */
.steps{counter-reset:s;margin-top:34px;border-top:1px solid var(--line)}
.steps > div{
display:grid;grid-template-columns:76px 1fr;gap:24px;
padding:26px 0;border-bottom:1px solid var(--line)
}
.steps .n{
font-family:Newsreader,serif;font-size:34px;color:var(--brass);line-height:1;padding-top:2px
}
.steps h3{margin-bottom:6px}
.steps p{font-size:16.5px;color:var(--ink-2);margin:0}
@media(max-width:640px){.steps > div{grid-template-columns:1fr;gap:8px}}
/* FAQ */
.faq-sec{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.faq{border-top:1px solid var(--line)}
.faq-i{padding:24px 0;border-bottom:1px solid var(--line)}
.faq-i h3{font-size:21px;margin-bottom:9px}
.faq-i div{font-size:16.5px;color:var(--ink-2)}
.faq-i div p{margin:0 0 10px}
.faq-i div p:last-child{margin:0}
/* related links */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:30px}
.related a{
background:var(--paper);padding:22px 24px;text-decoration:none;display:block;color:var(--ink)
}
.related a:hover{background:#EDEAE1}
.related .t{font-family:Newsreader,serif;font-size:20px;margin-bottom:5px}
.related .d{font-size:14.5px;color:var(--ink-2)}
@media(max-width:820px){.related{grid-template-columns:1fr}}
/* inline callout */
.callout{
border-left:3px solid var(--ox);padding:4px 0 4px 22px;margin:24px 0;
font-family:Newsreader,Georgia,serif;font-size:21px;line-height:1.45;color:var(--ink)
}
/* CTA strip */
.ctastrip{background:var(--walnut);color:var(--cream);padding:56px 0}
.ctastrip h2{color:#F6F2E8;margin-bottom:10px}
.ctastrip p{color:#C6BCAE;font-size:17.5px;max-width:56ch}
.ctastrip .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;align-items:center}
/* header right cluster */
.hdr-right{display:flex;align-items:center;gap:18px}
.hdr-tel{
color:var(--cream);text-decoration:none;font-family:Newsreader,serif;font-size:19px;
white-space:nowrap;letter-spacing:.01em
}
.hdr-tel:hover{color:#fff}
@media(max-width:1060px){.hdr-tel{display:none}}
@media(max-width:520px){.hdr-right .btn{padding:11px 14px;font-size:13.5px}}
/* mobile call bar — fixed to the bottom on phones only */
.callbar{display:none}
@media(max-width:880px){
.callbar{
display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;
border-top:1px solid var(--line-dk)
}
.callbar a{
flex:1;text-align:center;padding:15px 8px;text-decoration:none;
font-family:Archivo,sans-serif;font-size:15px;font-weight:600
}
.callbar .c1{background:var(--ox);color:#fff}
.callbar .c2{background:var(--brass);color:#1E1813}
body{padding-bottom:54px}
}
/* below the nav breakpoint the fixed call bar carries the CTA, so the
header button would only crowd the logo */
@media(max-width:880px){
.hdr-right .btn{display:none}
.topbar{padding:12px 0}
.mark .nm{font-size:18px}
}
/* two-path quote section */
.paths{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}
.path{border:1px solid var(--line-dk);padding:32px 34px;background:var(--walnut-2)}
.path-k{font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:12px}
.path h3{color:#F6F2E8;font-size:26px;margin-bottom:12px}
.path p{color:#C6BCAE;font-size:16.5px}
.photo-list{margin:18px 0 16px;padding-left:22px;color:#C6BCAE;font-size:16px}
.photo-list li{margin-bottom:9px}
.photo-list li b{color:#F1EADC}
.photo-list li::marker{color:var(--brass);font-weight:600}
.path .formgrid{margin-top:8px}
.ticks{display:grid;grid-template-columns:1fr;gap:8px;margin-top:4px}
.tick{
display:flex;align-items:flex-start;gap:11px;font-family:Archivo,sans-serif;font-size:15.5px;
color:#E4DCCB;text-transform:none;letter-spacing:0;font-weight:400;cursor:pointer;margin:0
}
.tick input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--brass);flex:none;padding:0}
@media(max-width:940px){.paths{grid-template-columns:1fr;gap:26px}.path{padding:26px 22px}}
.pledge-3 .pl{flex:1;min-width:280px}
.pledge-3 .pl p{margin:0 0 14px;font-size:18.5px}
.pledge-3 .pl p:last-child{margin:0}
.pledge-3 .pl b{color:var(--brass);font-weight:500}
/* byline */
.byline{display:flex;gap:20px;align-items:flex-start;border-top:1px solid var(--line);padding-top:28px}
.by-mark{flex:none;width:44px;height:44px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:var(--paper)}
.byline p{font-size:16px;color:var(--ink-2);margin:0 0 6px}
.byline p b{color:var(--ink)}
.byline .rev{font-size:14px;color:var(--faint)}
/* worth-it checklist */
.worth{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:30px}
.worth > div{background:var(--paper);padding:28px 30px}
.worth h3{font-size:20px;margin-bottom:14px}
.worth h3 span{display:inline-block;font-family:Archivo,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:3px 8px;margin-left:8px;vertical-align:middle}
.worth .yes h3 span{background:#DCE3DC;color:var(--sage)}
.worth .no h3 span{background:#EAD6DA;color:var(--ox)}
.worth ul{margin:0;padding-left:18px;font-size:16px;color:var(--ink-2)}
.worth li{margin-bottom:8px}
.worth li::marker{color:var(--brass)}
@media(max-width:820px){.worth{grid-template-columns:1fr}}
/* care list */
.care{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:30px}
.care h3{font-size:19px;margin-bottom:12px}
.care ul{margin:0;padding-left:18px;font-size:16px;color:var(--ink-2)}
.care li{margin-bottom:8px}
.care .do li::marker{color:var(--sage)}
.care .dont li::marker{color:var(--ox)}
@media(max-width:760px){.care{grid-template-columns:1fr;gap:22px}}
.phero .callnote{font-size:14px;color:#9A8F81;margin-top:18px}
/* mobile menu */
.burger{display:none;background:none;border:1px solid #6A5B4B;border-radius:2px;width:42px;height:38px;padding:8px 9px;cursor:pointer;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:var(--cream);border-radius:1px;transition:transform .18s,opacity .18s}
.burger.is-open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.mnav{background:var(--walnut-2);border-top:1px solid var(--line-dk);padding:8px 28px 14px}
.mnav a{display:block;padding:13px 0;border-bottom:1px solid var(--line-dk);color:var(--cream);text-decoration:none;font-size:16.5px}
.mnav a:last-child{border-bottom:0}
.mnav .mnav-cta{color:var(--brass-lt);font-weight:600;font-family:Archivo,sans-serif}
@media(max-width:880px){.burger{display:flex}}
@media(min-width:881px){.mnav{display:none!important}}
.proof > div,.anat > div,.paths > div{min-width:0}
/* single-theme by design: same palette under either OS preference */
@media (prefers-color-scheme:dark){:root{color-scheme:light dark}}
/* ---------- photography ---------- */
.photo-band{position:relative;background:var(--walnut);overflow:hidden}
.photo-band img{display:block;width:100%;height:clamp(300px,46vw,560px);object-fit:cover;object-position:center 60%}
.photo-band .cap{
position:absolute;left:0;right:0;bottom:0;padding:18px 0 16px;
background:linear-gradient(to top,rgba(30,24,19,.82),rgba(30,24,19,0));
font-family:Newsreader,serif;font-style:italic;font-size:15px;color:#CFC4B4
}
.photo-inline{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.photo-inline img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.photo-inline figcaption{font-family:Newsreader,serif;font-style:italic;font-size:14.5px;color:var(--faint);margin-top:8px}
@media(max-width:880px){.photo-inline{grid-template-columns:1fr;gap:26px}}
.hero-photo{position:relative}
.hero-photo img{width:100%;height:auto;display:block;border:1px solid #3A3028}
.hero-photo figcaption{font-family:Newsreader,serif;font-style:italic;font-size:13.5px;color:#8A7F70;margin:8px 0 0 4px}
/* ============================================================
LIGHT PASS (Sep 2026) — mid-page bands go warm cream instead of
walnut; header, hero, footer stay dark. Overrides below win by order.
============================================================ */
:root{--cream-bg:#F1ECE0;--sage-bg:#4F5F52}
.band{background:var(--cream-bg);color:var(--ink);border-top:1px solid #E6DFD0;border-bottom:1px solid #E6DFD0}
.band h2{color:var(--ink)}
.band .lede{color:var(--ink-2)}
.band .rule{background:var(--line)}
.band .eyebrow.on-dark{color:var(--brass)}
.band .promise h3{color:var(--ink)}
.band .promise p{color:var(--ink-2)}
.band .pledge{border-color:var(--brass);background:#FFFFFF}
.band .pledge p{color:var(--ink)}
.band .btn-ghost{color:var(--ink);border-color:#B9AE9C}
.band .btn-ghost:hover{background:#FFFFFF}
.band label{color:var(--ink-2)}
.band input,.band select,.band textarea{background:#FFFFFF;border:1px solid var(--line);color:var(--ink)}
.band .formnote{color:var(--ink-2)}
.band .swatches{border-color:var(--line)}
.band .callout{background:#FFFFFF}
.band .photo-inline img{border-color:var(--line)!important}
.band figcaption{color:var(--faint)!important}
/* inline light-on-dark colors baked into page markup, remapped when they sit on cream */
.band [style*="#C6BCAE"],.band [style*="#9A8F81"],.band [style*="#7E7062"],.band [style*="#B8AC9C"]{color:var(--ink-2)!important}
.band [style*="#F1EADC"],.band [style*="#F6F2E8"],.band [style*="#E4DCCB"]{color:var(--ink)!important}
.band [style*="#443A30"],.band [style*="#6A5B4B"]{border-bottom-color:var(--line)!important}
.band th{color:var(--ink-2)!important;border-bottom-color:var(--ink)!important}
.band .ptable tr:last-child td,.band .ctable tr:last-child td{border-bottom-color:var(--ink)!important}
/* homepage quote paths */
.path{background:#FFFFFF;border:1px solid var(--line)}
.path h3{color:var(--ink)}
.path p,.photo-list{color:var(--ink-2)}
.photo-list li b{color:var(--ink)}
.tick{color:var(--ink)}
/* CTA strip: sage instead of walnut, like a second accent */
.ctastrip{background:var(--sage-bg);color:#F4F1EA}
.ctastrip h2{color:#FFFFFF}
.ctastrip p{color:#DDE2DA}
.ctastrip .btn-ghost{color:#FFFFFF;border-color:rgba(255,255,255,.55)}
/* answer + faq stay a touch warmer than the ground */
.answer{background:#FFFFFF}
.faq-sec{background:var(--cream-bg)}
/* annotated sanctuary (hotspot map) */
.room{position:relative;margin:0 auto;background:var(--walnut);overflow:hidden}
.room img{display:block;width:100%;height:auto}
.hs{position:absolute;transform:translate(-9px,-9px);display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;font-family:Archivo,sans-serif;font-size:13.5px;letter-spacing:.02em;z-index:2}
.hs .dot{width:18px;height:18px;border-radius:50%;background:#fff;color:var(--walnut);font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 0 0 4px rgba(255,255,255,.28);animation:hsPulse 2.4s ease-out infinite}
.hs .lbl{background:rgba(30,24,19,.74);padding:6px 10px 6px 9px;border-bottom:1.5px solid var(--brass-lt);white-space:nowrap;backdrop-filter:blur(2px)}
.hs:hover .lbl{background:var(--ox)}
.hs:hover .dot{animation:none;box-shadow:0 0 0 5px rgba(255,255,255,.45)}
@keyframes hsPulse{0%{box-shadow:0 0 0 3px rgba(255,255,255,.4)}70%{box-shadow:0 0 0 11px rgba(255,255,255,0)}100%{box-shadow:0 0 0 3px rgba(255,255,255,0)}}
.room-legend{margin:18px 0 0;padding-left:22px;columns:2;column-gap:36px;font-size:15.5px;color:var(--ink-2)}
.room-legend li{margin-bottom:7px;break-inside:avoid}
.room-legend a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--brass)}
@media(max-width:700px){.hs .lbl{display:none}.hs{transform:translate(-11px,-11px)}.hs .dot{width:22px;height:22px;font-size:12px}.room-legend{columns:1}}
@media(prefers-reduced-motion:reduce){.hs .dot{animation:none}}
/* guide pages */
.guide h2{font-size:clamp(26px,3.4vw,34px);margin:44px 0 12px}
.guide h2:first-child{margin-top:0}
.guide p,.guide li{font-size:17.5px;color:var(--ink-2)}
.guide ul{padding-left:20px;margin:0 0 18px}
.guide li{margin-bottom:10px}
.guide li b,.guide p b{color:var(--ink)}
.guide .ctable td{font-size:15.5px}
.guide p.callout{margin:26px 0}
.band .people{background:var(--line);border-color:var(--line)}
.band .people > div{background:#FFFFFF}
.band .people p{color:var(--ink-2)}
.band .people .nm{color:var(--ink)}
.hero-kw{font-family:Archivo,sans-serif;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-lt);margin:0 0 14px;font-weight:600;line-height:1.5;letter-spacing:.14em}
.hero-display{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:clamp(42px,6.4vw,76px);line-height:1.02;letter-spacing:-.02em;margin:0;text-wrap:balance}
.guide ul a{color:var(--ox)}
.rsteps{margin:0;padding-left:0;list-style:none;counter-reset:rs}
.rsteps li{counter-increment:rs;position:relative;padding-left:44px;margin-bottom:16px;font-size:16.5px;color:var(--ink-2)}
.rsteps li b{color:var(--ink)}
.rsteps li::before{content:counter(rs,decimal-leading-zero);position:absolute;left:0;top:2px;font-family:Newsreader,serif;font-size:22px;color:var(--brass);line-height:1}
.hero .cta .btn-lg{padding:14px 20px;font-size:15px}
/* ---- funding cards ---- */
.fund{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.fund>div{position:relative;overflow:hidden;background:#FFFFFF;border:1px solid var(--line);border-top:3px solid var(--brass);padding:30px 28px 30px;
background-image:url("data:image/svg+xml;utf8,"),url("data:image/svg+xml;utf8,");background-repeat:no-repeat,repeat-x;background-position:right -46px top -22px,left bottom 14px;background-size:150px auto,120px 24px}
.fund .k{font-family:Newsreader,Georgia,serif;font-size:54px;line-height:1;color:var(--brass);opacity:.55;display:block;margin-bottom:14px}
.fund h3{font-size:23px;line-height:1.2;margin:0 0 10px;color:var(--ink)}
.fund p{font-size:16px;color:var(--ink-2);margin:0 0 26px}
.fund a{color:var(--ox)}
@media(max-width:940px){
.fund{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 16px 18px;margin-left:-16px;margin-right:-16px;scrollbar-width:thin}
.fund>div{flex:0 0 82%;max-width:360px;scroll-snap-align:start;padding:26px 22px}
.fund-hint{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:2px}
}
.fund-hint{display:none}
/* ---- wood-grain texture in solid sections ---- */
.band{background-image:url("data:image/svg+xml;utf8,");background-size:1400px 700px;background-repeat:repeat}
.ctastrip{background-image:url("data:image/svg+xml;utf8,");background-size:1400px 700px;background-repeat:repeat}
footer{background-image:url("data:image/svg+xml;utf8,");background-size:64px 32px;background-repeat:repeat}
/* ---- light hero (Sept 16): header and footer stay dark, hero goes cream ---- */
.hero{background:var(--bone);color:var(--ink)}
.hero h1,.hero .hero-display{color:var(--ink)}
.hero .hero-display em{color:var(--ox)}
.hero .hero-kw{color:var(--brass)}
.hero .sub{color:var(--ink-2)}
.hero .callnote{color:var(--ink-2)}
.hero .callnote a{color:var(--ox)}
.hero .btn-ghost{color:var(--ink);border-color:#B9AE9C}
.hero svg.diagram text{fill:var(--ink-2)}
.hero svg.diagram text[fill="#8A7F70"]{fill:#8A7F70}
.hero svg.diagram g[stroke="#EFE9DC"]{stroke:#8A7F70}
.hero svg.diagram line[stroke="#4A3E33"]{stroke:#B9AE9C}
.hero svg.diagram g[stroke="#3A3028"]{stroke:#C9BFB0}
.trust{background:#FFFFFF;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust li{color:var(--ink-2)}
/* ---- headings: one line when they fit ---- */
.sec-head{max-width:none}
h2{text-wrap:pretty}
/* right-side hotspots: label sits left of the dot so it never clips the frame */
.hs.r{flex-direction:row-reverse;transform:translate(calc(-100% + 9px),-9px)}
.room-note{font-size:14px;color:var(--ink-2);margin:14px 0 0;font-style:italic}
/* current page in the nav */
nav.main a.is-here{opacity:1;color:#fff;border-bottom:1.5px solid var(--brass);padding-bottom:3px}
.mnav a.is-here{color:#fff;border-left:3px solid var(--brass);padding-left:10px;margin-left:-13px}
/* ============================================================
POLISH LAYER — Sep 17 2026 spacing + consistency pass
(appended last so it wins; safe to edit or remove as a block)
============================================================ */
/* 1. Button groups: consistent 12px gap, never touching */
.cta, .ctastrip .row, p:has(> .btn + .btn){display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn + .btn{margin-left:0}
@media (max-width:600px){
.cta .btn, .ctastrip .row .btn, p:has(> .btn + .btn) .btn{flex:1 1 100%;text-align:center}
}
/* 2. One left edge per page: narrow sections line up with wide ones */
@media (min-width:900px){
.wrap.narrow{max-width:1120px}
.wrap.narrow > *{max-width:760px}
}
/* 3. Eyebrows in two-column blocks were being blown up by .proof p */
.proof .eyebrow{font-size:12px;color:var(--brass);letter-spacing:.19em;margin-bottom:14px}
/* 4. Home hero: one eyebrow, buttons side by side on desktop */
.hero .wrap.grid > div > .eyebrow:has(+ .hero-kw){display:none}
@media (min-width:900px){ .hero .grid{grid-template-columns:1.2fr .8fr} }
.hero .btn-lg{padding:16px 26px}
/* 5. Never break a bare phone number or a price range */
a[href^="tel:"]:not(:has(*)), .nw{white-space:nowrap}
/* 6. Answer box: room before the next section, tighter on phones */
.answer{margin-bottom:0}
section:has(> .wrap > .answer) + section{padding-top:56px !important}
section:has(> .wrap > .answer) + div{margin-top:56px}
@media (max-width:600px){
section:has(> .wrap > .answer) + section{padding-top:40px !important}
section:has(> .wrap > .answer) + div{margin-top:40px}
}
@media (max-width:600px){ .answer{padding:20px;border-left-width:3px} }
/* 7. Related cards: no empty grey cells */
@media (min-width:821px){
.related:has(> a:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
.related:not(:has(> a:nth-child(4):last-child)) > a:last-child:nth-child(3n+1){grid-column:1 / -1}
.related:not(:has(> a:nth-child(4):last-child)) > a:last-child:nth-child(3n+2){grid-column:span 2}
}
/* 8. Forms: inputs line up even when a label wraps */
.formgrid > div{display:flex;flex-direction:column;justify-content:flex-end}
.formgrid > div > .btn, .formgrid > div > button{align-self:flex-start}
.formgrid textarea{line-height:1.5}
/* 9. Price tables on phones: give the description column room */
@media (max-width:600px){
.ptable th, .ptable td{padding-left:8px;padding-right:8px}
.ptable td.n{white-space:nowrap;font-size:17px}
.ptable th:last-child{white-space:nowrap}
}
/* 10. Fabric swatches: even rows on phones */
@media (max-width:600px){ .sw{flex:1 1 25%;height:64px} .sw span{font-size:9.5px;left:7px;right:4px} }
/* 11. Byline block: breathing room under the CTA strip */
section:has(.byline){padding-top:48px;padding-bottom:56px}
/* 12. Section rhythm: back-to-back plain sections were stacking 164px of air */
section:not([class]) + section:not([class]):not([style]){padding-top:16px}
.ctastrip{padding-top:72px;padding-bottom:72px}
@media (max-width:600px){ section{padding-top:64px;padding-bottom:64px} .ctastrip{padding-top:56px;padding-bottom:56px} }
/* 13. Comparison tables (3+ columns) on phones: stack rows as cards instead of side-scrolling */
@media (max-width:600px){
.scroll-x:has(.ctable:has(td:nth-child(3))){overflow:visible}
.ctable:has(td:nth-child(3)), .ctable:has(td:nth-child(3)) tbody, .ctable:has(td:nth-child(3)) tr, .ctable:has(td:nth-child(3)) td{display:block;width:100% !important}
.ctable:has(td:nth-child(3)) thead, .ctable:has(td:nth-child(3)) tr:has(> th){display:none}
.ctable:has(td:nth-child(3)) tr{padding:16px 0;border-bottom:1px solid var(--line)}
.ctable:has(td:nth-child(3)) tr:last-child{border-bottom:2px solid var(--ink)}
.ctable:has(td:nth-child(3)) td{border:0 !important;padding:2px 0 !important;text-align:left !important}
.ctable:has(td:nth-child(3)) td:first-child{font-weight:600;font-size:17px;color:var(--ink);padding-bottom:4px !important}
.ctable:has(td:nth-child(3)) td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;font-family:Archivo,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin:10px 0 2px}
.ctable:has(td:nth-child(3)) td.n{font-size:19px}
}
/* 14. Photo captions: readable over bright images */
.photo-band .cap{padding:48px 0 18px;background:linear-gradient(to top, rgba(20,16,12,.92) 0%, rgba(20,16,12,.6) 55%, rgba(20,16,12,0) 100%);color:#EFE9DC;text-shadow:0 1px 2px rgba(0,0,0,.5)}
@media (max-width:600px){ .photo-band img{height:260px} .photo-band .cap{font-size:13.5px;padding:40px 0 12px} }
/* 15. Phones: funding ideas stack instead of a half-empty swipe row; long drive times wrap */
@media (max-width:600px){
.fund{display:grid;grid-template-columns:1fr;gap:14px;overflow:visible;padding:0;margin-left:0;margin-right:0}
.fund > div{max-width:none;padding:24px 22px 34px}
.fund .k{font-size:40px;margin-bottom:10px}
.fund-hint{display:none}
.ctable td.n{white-space:normal}
}