/* Chehalis Buildings, look W (2026-11-01, v3 rebuild): cream / ink / one forest accent, Newsreader display + Inter text.
   Copied from genesis-sales/chehalis/design/v3/w.css (the picked mock) plus the rulings: sticky thin nav, mobile menu under
   768px, sticky style tabs, cream name blocks where a style has no photo. Fonts are self-hosted (no third-party host). */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/newsreader-latin.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-latin.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-tight-latin.woff2) format("woff2")}
:root{--canvas:#FAF9F5;--surface:#F0EEE6;--line:#D1CFC5;--ink:#141413;--muted:#5E5D59;--accent:#2F5D4A;
--dark:#141413;--dark-ink:#FAF9F5;--dark-muted:#D1CFC5;--dark-line:#5E5D59;
--f-display:'Newsreader',Georgia,serif;--f-text:'Inter','Inter Tight',system-ui,sans-serif;
--dw:400;--dt:-0.02em;--navh:64px;
--s-hero:88px;--s-num:88px;--s-sec:56px;--s-sub:32px;--s-lead:24px;--s-body:18px;--s-small:15px;--s-label:12px}
@media (max-width:767px){:root{--s-hero:44px;--s-num:64px;--s-sec:32px;--s-sub:24px;--s-lead:20px;--s-body:17px}}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--navh) + 16px)}
body{background:var(--canvas);color:var(--ink);font:400 var(--s-body)/1.5 var(--f-text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
a.tl{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:8px;z-index:50;background:var(--canvas);padding:8px 16px}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.col{max-width:680px}
.center{text-align:center;margin-left:auto;margin-right:auto}
.d{font-family:var(--f-display);font-weight:var(--dw);letter-spacing:var(--dt);line-height:1.05}
.t-hero{font-size:var(--s-hero)}.t-sec{font-size:var(--s-sec)}.t-sub{font-size:var(--s-sub)}
.t-lead{font-size:var(--s-lead);line-height:1.4}.t-small{font-size:var(--s-small)}
.muted{color:var(--muted)}
.label{font:500 var(--s-label)/1.2 var(--f-text);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}
/* nav */
.nav{position:sticky;top:0;z-index:30;background:var(--canvas);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;height:var(--navh);gap:32px}
.brand{font-family:var(--f-display);font-weight:var(--dw);letter-spacing:var(--dt);font-size:20px;color:var(--ink);margin-right:auto;white-space:nowrap}
.links{display:flex;gap:32px}.links a{color:var(--muted);font-size:var(--s-small)}
.links a[aria-current]{color:var(--ink)}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;color:var(--ink);font-size:var(--s-small);min-height:44px;display:flex;align-items:center}
.menu summary::-webkit-details-marker{display:none}
.menu-p{position:absolute;right:-8px;top:52px;background:var(--canvas);border:1px solid var(--line);border-radius:8px;padding:8px 0;min-width:200px}
.menu-p a{display:block;padding:12px 20px;color:var(--ink);font-size:var(--s-body)}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 24px;border-radius:999px;background:var(--accent);color:var(--canvas);font:500 var(--s-small)/1 var(--f-text);white-space:nowrap}
/* sections */
.s{padding:120px 0}
.band{background:var(--surface)}
.dark{background:var(--dark);color:var(--dark-ink)}.dark .muted{color:var(--dark-muted)}.dark a{color:var(--dark-ink)}
.ph{border-radius:16px;overflow:hidden;background:var(--surface)}
.ph img{width:100%;height:100%;object-fit:cover}
.block{border-radius:16px;background:var(--surface);display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;font-family:var(--f-display);font-weight:var(--dw);letter-spacing:var(--dt);color:var(--ink);font-size:var(--s-sub);line-height:1.1}
.head{padding:96px 0 48px}
.two{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start}
.fact{font-size:var(--s-small);color:var(--muted);margin-top:4px}
.fact a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* front */
.hero{padding:96px 0 48px}
.hero-ph,.buyer-ph{width:100%;height:min(calc((100vw - 64px) * 9 / 16),560px)}   /* 1500px source: kept at or under 560px tall so it stays sharp */
.num{font-size:var(--s-num);color:var(--accent);line-height:1}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.steps li{border-top:1px solid var(--line);padding-top:24px}
.dark .steps li{border-color:var(--dark-line)}
.bignum{font-size:var(--s-hero);line-height:1;display:inline-block}
/* footer */
.foot{border-top:1px solid var(--line);padding:48px 0 64px;font-size:var(--s-small);color:var(--muted)}
.foot p+p{margin-top:8px}.foot a{color:var(--muted)}
.foot .fl{display:flex;flex-wrap:wrap;gap:0 24px}.foot .fl a,.foot .fnum a{display:inline-flex;align-items:center;min-height:44px}
.foot .fnum{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
/* style page */
.bleed{height:560px;overflow:hidden;background:var(--surface)}
.bleed img{width:100%;height:100%;object-fit:cover}
.namebleed{background:var(--surface);padding:160px 0 120px}
.trow{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:20px 0;border-top:1px solid var(--line)}
.trows .trow:last-child{border-bottom:1px solid var(--line)}
.trow .sz,.trow .pr{font-size:var(--s-sub)}
.trow .pr{font-variant-numeric:tabular-nums;white-space:nowrap}
.others{font-size:var(--s-small);color:var(--muted);margin-top:24px}
.inc li{padding:16px 0;border-top:1px solid var(--line)}
.inc li:last-child{border-bottom:1px solid var(--line)}
/* buyer */
.slot{font-size:var(--s-sec);color:var(--muted);min-height:1.1em}
.slot.on{color:var(--accent);font-size:var(--s-num)}
.dots{display:grid;grid-template-columns:repeat(4,1fr);position:relative;margin-top:32px}
.dots::before{content:"";position:absolute;left:7px;width:75%;top:7px;height:1px;background:var(--line)}
.dots li{position:relative;font-size:var(--s-small);color:var(--muted)}
.dots i{display:block;width:15px;height:15px;border-radius:50%;border:1px solid var(--muted);background:var(--canvas);margin-bottom:12px}
.dots li.on i{background:var(--accent);border-color:var(--accent)}
.dots li.on{color:var(--ink)}
.dl div{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:16px 0;border-top:1px solid var(--line)}
.dl div:last-child{border-bottom:1px solid var(--line)}
.dl dt{color:var(--muted);font-size:var(--s-small);padding-top:2px}
.bphotos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bphotos .ph{aspect-ratio:4/3}
/* other pages */
.wide{aspect-ratio:21/9;width:100%}
.big2{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.big2 div{border-top:1px solid var(--line);padding-top:24px}
.big2 b{display:block;font:400 var(--s-sec)/1.05 var(--f-display);letter-spacing:var(--dt);margin-bottom:8px}
.hrows li{display:grid;grid-template-columns:80px 1fr 1.4fr;gap:24px;align-items:baseline;padding:24px 0;border-top:1px solid var(--line)}
.hrows li:last-child{border-bottom:1px solid var(--line)}
.towns{display:flex;flex-wrap:wrap;gap:8px 32px;font:400 var(--s-lead)/1.4 var(--f-display);letter-spacing:var(--dt)}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.gal figure:first-child{grid-column:1/-1}
.gal figure:first-child .ph{aspect-ratio:16/9;max-height:600px}
.gal .ph{aspect-ratio:4/3}
.gal.g2 figure:first-child{grid-column:auto}.gal.g2 figure:first-child .ph{aspect-ratio:4/3;max-height:none}.gal.g1{grid-template-columns:1fr}
.gal figcaption{margin-top:12px;font-size:var(--s-small);color:var(--muted)}
@media (max-width:767px){
 .wrap{padding:0 20px}
 .links{display:none}.menu{display:block}
 .nav .wrap{gap:16px}
 .brand{font-size:18px}
 .pill{padding:0 18px}
 .s{padding:96px 0}
 .hero{padding:64px 0 32px}
 .hero-ph,.buyer-ph{height:auto;aspect-ratio:4/3}
 .steps{grid-template-columns:1fr 1fr;gap:32px 20px}
 .head{padding:64px 0 32px}
 .two,.big2{grid-template-columns:1fr;gap:32px}
 .bleed{height:300px}
 .namebleed{padding:96px 0 64px}
 .trow .sz,.trow .pr{font-size:var(--s-lead)}
 .dl div{grid-template-columns:1fr;gap:4px}
 .hrows li{grid-template-columns:48px 1fr;gap:4px 16px}
 .hrows li p{grid-column:2}
 .wide{aspect-ratio:4/3}
 .gal{grid-template-columns:1fr}
 .gal figure:first-child .ph{aspect-ratio:4/3}
 .bphotos{grid-template-columns:1fr}
}
/* R15 shells first: /buildings = one card per shell; a shell page = width chips (CSS radios, no JS) then that width's lengths */
.shells{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.shells a{display:flex;flex-direction:column;height:100%;color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--canvas);transition:border-color .2s}
.shells a:hover,.hcard a:hover{border-color:var(--ink)}
.hcard a{display:block;color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:16px;background:var(--canvas);transition:border-color .2s}
.hcard .tx{padding:24px 24px 28px}.hcard .go{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.hcard a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.shells a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.shells .tx{display:flex;flex-direction:column;flex:1;padding:24px 24px 28px}.shells .ph{border-radius:0;aspect-ratio:3/2}
.shells .go{margin-top:auto;padding-top:24px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.shells .from{font-size:var(--s-sub);font-variant-numeric:tabular-nums;line-height:1.2}
.pick{position:relative}
.pick input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pick label{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;margin:0 8px 8px 0;border:1px solid var(--line);border-radius:999px;font-size:var(--s-small);cursor:pointer;white-space:nowrap}
.pick input:checked+label{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.pick input:focus-visible+label{outline:2px solid var(--accent);outline-offset:3px}
.pick .lens>div{display:none}
.pick input:nth-of-type(1):checked~.lens>div:nth-of-type(1),.pick input:nth-of-type(2):checked~.lens>div:nth-of-type(2),.pick input:nth-of-type(3):checked~.lens>div:nth-of-type(3),.pick input:nth-of-type(4):checked~.lens>div:nth-of-type(4),.pick input:nth-of-type(5):checked~.lens>div:nth-of-type(5),.pick input:nth-of-type(6):checked~.lens>div:nth-of-type(6),.pick input:nth-of-type(7):checked~.lens>div:nth-of-type(7),.pick input:nth-of-type(8):checked~.lens>div:nth-of-type(8),.pick input:nth-of-type(9):checked~.lens>div:nth-of-type(9),.pick input:nth-of-type(10):checked~.lens>div:nth-of-type(10),.pick input:nth-of-type(11):checked~.lens>div:nth-of-type(11),.pick input:nth-of-type(12):checked~.lens>div:nth-of-type(12),.pick input:nth-of-type(13):checked~.lens>div:nth-of-type(13),.pick input:nth-of-type(14):checked~.lens>div:nth-of-type(14),.pick input:nth-of-type(15):checked~.lens>div:nth-of-type(15),.pick input:nth-of-type(16):checked~.lens>div:nth-of-type(16){display:block}
@media (max-width:1023px){.shells{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.shells{grid-template-columns:1fr;gap:16px}.pick label{padding:0 14px}}
/* R15 add-on: Call beside Text me in the header (same number) */
.pill.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent);margin-right:-20px}
@media (max-width:420px){.nav .wrap{gap:8px;padding:0 16px}.brand{font-size:16px}.pill{padding:0 12px}.pill.ghost{margin-right:0}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* R16 site finish (FINAL-SITE-FINISH-1) */
.acts{display:flex;flex-wrap:wrap;gap:12px}
.pill.big{min-height:52px;padding:0 32px;font-size:var(--s-lead)}
.fhero{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center}
.fh-ph{aspect-ratio:3/2;width:100%}
.from{font-size:var(--s-sub);font-variant-numeric:tabular-nums;line-height:1.2}
.offices{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.offices li{border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;background:var(--canvas)}
.offices .ofig{background:var(--surface);color:var(--ink);padding:16px 24px 8px}
.odraw{display:block;width:100%;height:auto}
.offices .tx{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1}
.trust li{padding:20px 0;border-top:1px solid var(--line)}
.trust li:last-child{border-bottom:1px solid var(--line)}
.trust .ph{aspect-ratio:16/9}
.faq div{padding:20px 0;border-top:1px solid var(--line)}
.faq div:last-child{border-bottom:1px solid var(--line)}
.shell-ph{width:100%;aspect-ratio:3/2;max-height:640px}
.houses{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.houses li{border-top:1px solid var(--line);padding-top:24px}
.cform{display:grid;gap:20px;max-width:560px}
.cform label{display:grid;gap:8px;font-size:var(--s-small);color:var(--muted)}
.cform input,.cform textarea{font:400 var(--s-body)/1.4 var(--f-text);color:var(--ink);background:var(--canvas);border:1px solid var(--line);border-radius:8px;padding:12px 14px;min-height:48px;width:100%}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.cform button{border:0;cursor:pointer;font:500 var(--s-body)/1 var(--f-text)}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:1023px){.offices{grid-template-columns:1fr 1fr}.fhero{grid-template-columns:1fr;gap:32px}}
@media (max-width:767px){.offices{grid-template-columns:1fr;gap:16px}.houses{grid-template-columns:1fr;gap:32px}}
.bignum{white-space:nowrap;font-size:clamp(32px,9vw,var(--s-hero))}
/* R18 part 2: photo credit, set once by img() from the photo data */
.photo-credit{position:relative}
.pc{position:absolute;right:0;bottom:0;padding:22px 10px 6px 34px;font-size:11px;line-height:1.2;letter-spacing:.02em;color:rgba(255,255,255,.7);text-decoration:none;background:radial-gradient(ellipse at 100% 100%,rgba(0,0,0,.5),rgba(0,0,0,0) 72%);border-radius:0 0 16px 0;z-index:1}
a.pc:hover{color:#fff;text-decoration:underline}