@font-face{font-family:'Mulish';font-style:normal;font-weight:200 1000;font-display:swap;src:url(fonts/Mulish-latin.woff2) format('woff2')}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/Quicksand-latin.woff2) format('woff2')}

:root{--char:#333;--char-d:#262626;--taupe:#ab9f95;--taupe-l:#d8d0c7;--ink:#3a3835;--mute:#6d6862;--line:#e5e3df;--bg:#fff;--soft:#f7f6f4;--green:#8dc63f;--orange:#f58220;--head:'Quicksand','Avenir Next',Arial,sans-serif;--body:'Mulish','Muli',Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-padding-top:70px;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:hidden}.lenis.lenis-scrolling iframe{pointer-events:none}
body{margin:0;font:400 17px/1.7 var(--body);color:var(--ink);background:var(--bg);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--head);line-height:1.2;margin:0 0 .6em}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.section{padding-top:72px;padding-bottom:72px}.section.tight{padding-top:24px}
.kicker{font-weight:400;font-size:clamp(20px,2.6vw,26px);letter-spacing:.14em;text-transform:uppercase;text-align:center;color:#55524e;margin-bottom:44px}
.kicker.big{font-size:clamp(22px,3.2vw,32px);margin-bottom:22px}
.lede{max-width:720px;margin:0 auto 24px;text-align:center;font-size:19px;color:var(--mute)}
.page-head{text-align:center;padding-bottom:36px}
.btn{display:inline-block;font:700 13px/1 var(--head);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:#fff;background:var(--char);border:1.5px solid var(--char);padding:16px 28px;cursor:pointer;transition:background .2s,color .2s,border-color .2s;border-radius:2px}
.btn:hover{background:#000;border-color:#000}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.nav a:focus,.nav a:focus-visible{outline:none}.nav a:focus-visible{color:#fff;border-bottom-color:var(--green)}
.btn-ghost{background:transparent;color:var(--char)}.btn-ghost:hover{background:var(--char);color:#fff}
.btn-light{background:#fff;color:var(--char);border-color:#fff}.btn-light:hover{background:var(--taupe-l);border-color:var(--taupe-l);color:#000}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:var(--char);color:#eee;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.bar{position:relative;max-width:none;margin:0 auto;height:56px;display:grid;grid-template-columns:1fr 303px 1fr;align-items:center;padding:0 56px}
.nav{display:flex;gap:26px;align-items:center;height:56px}.nav-l{grid-column:1}.nav-r{grid-column:3;justify-content:flex-end}
.nav a{font:600 12.5px/1 var(--head);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:#d6d2cc;padding:8px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap}
.nav a:hover{color:#fff}.nav a.active{color:#fff;border-bottom-color:var(--green)}
html.nav-ind-on .nav a.active{border-bottom-color:transparent}
/* logo: white box hanging over the hero (live site: 283x113, 15px from top), shrinks into the bar once scrolled */
.logo{--la:3.0977;position:absolute;left:0;right:0;margin:0 auto;top:15px;width:284px;height:113px;display:block;background:#fff;padding:13px;z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:top .3s ease,width .3s ease,height .3s ease,padding .3s ease,box-shadow .3s ease}
.logo img{width:100%;height:100%;display:block}
.is-scrolled .logo{top:8px;height:80px;padding:10px;width:200px;box-shadow:0 3px 10px rgba(0,0,0,.22)}
.m-call,.burger{display:none}
.mobile-nav{background:var(--char-d);border-top:1px solid rgba(255,255,255,.08);padding-top:78px;transition:padding .3s ease}
.is-scrolled .mobile-nav{padding-top:0}
.mobile-nav a{display:block;padding:16px 28px;font:600 13px/1 var(--head);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:#e6e2dc;border-bottom:1px solid rgba(255,255,255,.07)}
.mobile-nav a.active{color:#fff;box-shadow:inset 4px 0 0 var(--green)}

/* home */
.hero{background:#ddd}.hero img{width:100%;height:clamp(260px,46vw,690px);object-fit:cover;object-position:center 40%}
.hero-band{background:var(--char);text-align:center;padding:64px 0 72px}
.hero-band h1{font-weight:400;font-size:clamp(28px,4vw,46px);color:var(--taupe-l);max-width:780px;margin:0 auto .5em}
.hero-band p{color:#b8b0a7;margin:0 auto 30px;max-width:560px}
.features{display:flex;flex-direction:column;gap:72px}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.feature.flip .feature-img{order:2}
.feature-img img{width:100%;aspect-ratio:3/4;object-fit:cover}
.feature h3{font-size:26px;font-weight:700;color:#1b1b1b;margin-bottom:.5em;position:relative;padding-bottom:16px}
.feature h3::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;background:var(--green)}
.feature p{color:var(--mute);margin:0}
.gallery{display:grid;gap:8px}
.g3{grid-template-columns:repeat(3,1fr)}
.g-item{display:block;border:0;padding:0;margin:0;background:#eee;cursor:zoom-in;overflow:hidden;position:relative}
.g-item img{width:100%;height:100%;aspect-ratio:2/3;object-fit:cover;transition:transform .5s}
.g-item:hover img{transform:scale(1.04)}
.g-item.wide{grid-column:1/-1}.g-item.wide img{aspect-ratio:21/9}
/* beams gallery: masonry-ish */
#page-custom-wood-beams .gallery{display:block;column-count:3;column-gap:8px}
#page-custom-wood-beams .g-item{break-inside:avoid;margin-bottom:8px;width:100%}
#page-custom-wood-beams .g-item img{aspect-ratio:auto;height:auto}

/* bunk */
.loft{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.loft-h{font:700 clamp(34px,4.4vw,54px)/1.08 var(--head);color:#1d1b19;margin:0 0 22px;letter-spacing:-.005em}
.loft-h span{display:block;color:#4f7d1a}
.loft-h::after{content:"";display:block;width:84px;height:5px;background:var(--green);margin-top:22px}
.loft-hero{width:100%;height:auto}
.loft-draw{width:100%;height:auto}
.loft-note{margin:14px 0 18px;color:var(--mute);font-size:16px}
.loft-list{list-style:none;margin:0;padding:0}
.loft-list li{position:relative;padding:3px 0 3px 40px;margin:0 0 10px;font:600 20px/1.3 var(--head);color:#1d1b19}
.loft-list li::before{content:"";position:absolute;left:0;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M7 13.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.built-txt h2{font-size:28px;font-weight:700;color:#1b1b1b}
.loft-cta{display:flex;flex-wrap:wrap;gap:12px;margin:36px 0 0;justify-content:center}
.built{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.built-fig{margin:0}.built-fig img{width:100%;max-height:640px;object-fit:cover;object-position:center 30%}
.ticks{list-style:none;padding:0;margin:20px 0 0}
.ticks li{position:relative;padding-left:28px;margin-bottom:8px;color:var(--mute)}
.ticks li::before{content:"";position:absolute;left:0;top:.72em;width:14px;height:3px;background:var(--green)}
.cta-band{background:var(--char);color:#fff;text-align:center;padding:64px 0}
.cta-band h2{font-weight:400;font-size:clamp(24px,3.4vw,36px);color:var(--taupe-l);letter-spacing:.04em}
.cta-band p{color:#b8b0a7}
.phone-big{font:700 24px var(--head);color:#fff;text-decoration:none;margin-left:18px;letter-spacing:.04em;white-space:nowrap}
.phone-big:hover{color:var(--green)}

/* story */
.story{background:var(--char);color:#c9c3bb}
.story .kicker{color:var(--taupe-l)}
.story .section{padding-top:124px}
.section.page-head{padding-top:124px}
.story-fig{margin:0 0 40px}.story-fig img{width:100%;height:auto;border:1px solid rgba(255,255,255,.7)}
.meet{text-align:center;color:#fff;font-size:28px}
.story-txt{max-width:820px;margin:0 auto}.story-txt p{color:#c9c3bb;margin:0 0 1.4em}

/* contact */
.contact{background:#fff;border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.contact-info h3{font-size:22px}
.contact-info p{color:var(--mute)}
.contact dl{margin:28px 0 0}.contact dt{font:700 12px var(--head);letter-spacing:.14em;text-transform:uppercase;color:#1b1b1b;margin-top:18px}
.contact dd{margin:2px 0 0;color:var(--mute)}.contact dd a{text-decoration:none}.contact dd a:hover{text-decoration:underline}
.quote{background:var(--soft);padding:32px}
.quote h3{font-size:22px}

.site-foot{background:var(--char);color:#a9a39b;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:26px 0}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.foot-in p{margin:0}
.social{display:flex;gap:18px}.social a{color:#fff;width:22px;height:22px;display:block;opacity:.9}.social a:hover{opacity:1;color:var(--green)}.social svg{width:100%;height:100%}

/* lightbox: main image + filmstrip of the current gallery along the bottom */
.lb{position:fixed;inset:0;z-index:200;background:rgba(15,15,15,.94);display:flex;flex-direction:column;padding:16px 16px calc(12px + env(safe-area-inset-bottom,0px))}
.lb[hidden]{display:none}
.lb-stage{position:relative;flex:1 1 0;min-height:0;margin-bottom:10px}
.lb .lb-main{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-width:none;max-height:none}
.lb button{position:absolute;background:none;border:0;color:#fff;font-size:34px;cursor:pointer;padding:12px 18px;line-height:1;z-index:3;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.lb .x{top:6px;right:6px}.lb .p{left:2px;top:50%;margin-top:-30px}.lb .n{right:2px;top:50%;margin-top:-30px}
.lb-strip{flex:none;position:relative;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:6px 4px;scrollbar-width:thin;scrollbar-color:#6a655f transparent;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.lb .lb-th{position:relative;z-index:auto;flex:none;height:72px;padding:0;border:0;background:#222;opacity:.5;outline:3px solid transparent;outline-offset:0;font-size:0;text-shadow:none;transition:opacity .25s,outline-color .25s}
.lb .lb-th:first-child{margin-left:auto}.lb .lb-th:last-child{margin-right:auto}
.lb .lb-th img{display:block;height:100%;width:auto;max-width:none}
.lb .lb-th:hover{opacity:.85}
.lb .lb-th.on{opacity:1;outline-color:var(--green)}
.lb .lb-th:focus-visible{outline-color:#fff}
@media(max-width:700px){.lb{padding:10px 8px calc(8px + env(safe-area-inset-bottom,0px))}.lb .lb-th{height:52px}.lb .p{left:0}.lb .n{right:0}}


/* back to top */
.to-top{position:fixed;left:20px;bottom:20px;z-index:140;width:44px;height:44px;border-radius:50%;border:0;background:var(--char);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.28);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility .25s,background .2s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:#000}
.to-top svg{width:20px;height:20px}
@media(max-width:1100px){
 .nav{display:none}
 .bar{grid-template-columns:48px 1fr 48px;padding:0 12px}
 .m-call{display:flex;grid-column:1;grid-row:1;width:44px;height:44px;align-items:center;justify-content:center;color:#fff}.m-call svg{width:22px;height:22px}
 .burger{display:flex;grid-column:3;grid-row:1;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;align-items:center;background:none;border:0;cursor:pointer;padding:0}
 .burger span{display:block;width:24px;height:2px;background:#fff;transition:transform .2s,opacity .2s}
 .burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 .burger[aria-expanded=true] span:nth-child(2){opacity:0}
 .burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media(max-width:700px){
 .logo{top:9px;width:170px;height:68px;padding:8px}
 .is-scrolled .logo{top:6px;height:58px;padding:7px;width:146px}
 .mobile-nav{padding-top:28px}
}
@media(max-width:820px){
 body{font-size:16px}
 .section{padding-top:48px;padding-bottom:48px}
 .story .section{padding-top:76px}
 .section.page-head{padding-top:76px}
 .wrap{padding:0 18px}
 .feature,.feature.flip{grid-template-columns:1fr;gap:24px}.feature.flip .feature-img{order:0}
 .features{gap:48px}
 .g3{grid-template-columns:repeat(2,1fr)}
 #page-custom-wood-beams .gallery{column-count:2}
 .loft{grid-template-columns:1fr;gap:32px}
 .loft-list li{font-size:18px}
 .built{grid-template-columns:1fr;gap:28px}
 .contact-grid{grid-template-columns:1fr;gap:36px}
 .quote{padding:22px}
 .phone-big{display:block;margin:18px 0 0}
 .hero-band{padding:44px 0 52px}
 .to-top{left:14px;bottom:14px}
 .foot-in{justify-content:center;text-align:center}
}

/* ===== motion (2026-10-08). transform/opacity (plus one mask sweep) only. Hiding-before-reveal needs html.js AND no reduced-motion,
   so with JS off or reduced motion everything is simply visible. ===== */
:root{--eo:cubic-bezier(.25,1,.5,1)}
.hero{overflow:hidden}
.btn{transition:background .2s,color .2s,border-color .2s,transform .2s var(--eo),box-shadow .25s var(--eo)}
.btn:active{transform:scale(.97);transition-duration:.08s;box-shadow:none}
.social a{transition:transform .25s var(--eo),color .2s,opacity .2s}
.contact dd a,.phone-big{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--eo),color .2s}
.contact dd a:hover,.phone-big:hover{text-decoration:none;background-size:100% 1px}
.dir-link{display:inline-block;margin-top:4px;font-size:15px;font-weight:700;color:#4f7d1a!important}
.feature-img,.built-fig{overflow:hidden}
.feature-img img,.built-fig img{transition:transform .9s var(--eo)}
.g-item img{transition:transform .8s var(--eo)}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--taupe);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--eo)}
.nav a.active::after{display:none}
.nav-ind{position:absolute;left:0;top:0;width:1px;height:2px;background:var(--green);transform-origin:0 0;z-index:1;pointer-events:none;opacity:0}
.nav-ind.on{opacity:1}.nav-ind.ready{transition:transform .45s var(--eo),opacity .2s}
@media(max-width:1100px){.nav-ind{display:none}}
@media(hover:hover){
 .btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px -10px rgba(0,0,0,.5)}
 .btn:active{transform:scale(.97)}
 .nav a:not(.active):hover::after{transform:scaleX(1)}
 .feature-img:hover img,.built-fig:hover img{transform:scale(1.035)}
 .social a:hover{transform:translateY(-2px)}
 .to-top.show:hover{transform:translateY(-2px)}
}
@keyframes pgIn{from{opacity:0}}
@keyframes fadeIn{from{opacity:0}}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}}
@keyframes kb{from{scale:1.08}to{scale:1}}
@media(prefers-reduced-motion:no-preference){
 .page:not([hidden]){animation:pgIn .45s ease backwards}
 .page.out{opacity:0;transition:opacity .14s ease-in}
 .hero img{will-change:transform;animation:kb 2.8s var(--eo) both}
 .mobile-nav:not([hidden]){animation:dropIn .25s var(--eo) both}
 .lb:not([hidden]){animation:fadeIn .25s ease both}
 html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--eo),transform .8s var(--eo);transition-delay:calc(var(--i,0)*90ms)}
 html.js .rv.in{opacity:1;transform:none}
 /* the loft line drawing is a raster, so it is "drawn in" with a soft left-to-right sweep, then the note and bullets follow */
 html.js .rv.rv-draw{transform:none;transition:opacity .4s ease .1s,-webkit-mask-position 1.9s cubic-bezier(.45,.05,.25,1) .1s,mask-position 1.9s cubic-bezier(.45,.05,.25,1) .1s;
  -webkit-mask-image:linear-gradient(90deg,#000 35%,transparent 65%);mask-image:linear-gradient(90deg,#000 35%,transparent 65%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
 html.js .rv.rv-draw.in{-webkit-mask-position:0 0;mask-position:0 0}
 html.js .loft-list li.rv{transform:translateX(-14px);transition-delay:calc(var(--i)*130ms + .6s)}
 html.js .loft-list li.rv.in{transform:none}
 html.js .loft-list li::before{opacity:0;transform:scale(.3);transition:transform .5s var(--eo),opacity .3s ease;transition-delay:calc(var(--i)*130ms + .75s)}
 html.js .loft-list li.in::before{opacity:1;transform:none}
 html.js .loft-note.rv{transition-delay:.9s}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* ===== production additions (build_prod.py): real pages, text-first contact, loft bed page ===== */
img{height:auto}
.skip{position:absolute;left:-9999px;top:8px;z-index:400;background:#fff;color:#000;padding:10px 14px;font:700 14px var(--head)}
.skip:focus{left:8px}
.logo img{width:100%;height:100%;display:block}
.m-call svg{width:22px;height:22px}
.eyebrow{font:700 12px/1 var(--head);letter-spacing:.2em;text-transform:uppercase;color:#4f7d1a;margin:0 0 12px}
.btn-xl{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:16px;padding:22px 44px}
.btn-xl svg{width:22px;height:22px;flex:none}
.btn-ghost.btn-xl{padding:22px 38px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.lb-open{display:block;width:100%;border:0;background:none;padding:0;margin:0;cursor:zoom-in}
.lb-open img{width:100%}

/* contact block: text first */
.textcard h3{font-size:24px}
.textcard p{color:var(--mute);margin:0 0 20px}
.textcard .btn{display:flex;width:100%}
.textcard .btn+.btn{margin-top:12px}
.textcard .alt{margin:22px 0 0;font-size:16px}
.textcard .alt a{font-weight:700;color:#1b1b1b;word-break:break-word}
.contact dd .sep{color:#b3ada5;margin:0 6px}

/* home show-special callout */
.special{padding-top:56px}
.special-card{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px;align-items:center;background:var(--soft);border:1px solid var(--line);border-left:5px solid var(--green);padding:20px 44px 20px 24px;text-decoration:none;color:inherit;transition:transform .3s var(--eo),box-shadow .3s var(--eo)}
.special-card img{width:100%;border-radius:8px}
.special-card h2{font:700 clamp(24px,3vw,34px)/1.15 var(--head);color:#1d1b19;margin:0 0 12px}
.special-card p{margin:0 0 18px;color:var(--mute)}
.special-card p strong{color:#1d1b19;font:700 24px var(--head)}
.special-card s{color:#8a8279}
.special-link{display:inline-block;font:700 13px/1 var(--head);letter-spacing:.16em;text-transform:uppercase;color:#1d1b19;padding-bottom:6px;border-bottom:2px solid var(--green)}
@media(hover:hover){.special-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px -16px rgba(0,0,0,.35)}}
.special-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 14px;margin:0 auto 36px;padding:14px 20px;background:var(--soft);border-left:5px solid var(--green);text-align:center;color:var(--ink)}
.special-bar strong{font:700 20px var(--head);color:#1d1b19}
.special-bar s{color:#8a8279}

/* loft bed page */
.loft-head{padding-bottom:28px}
.loft-head .eyebrow{font-size:13px}
.loft-page-h{font:700 clamp(34px,6vw,60px)/1.06 var(--head);color:#1d1b19;margin:0 0 20px;letter-spacing:-.005em}
.loft-page-h span{display:block;color:#4f7d1a}
.price{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin:18px 0 28px}
.price-now{font:700 clamp(54px,11vw,88px)/1 var(--head);color:#1d1b19}
.price-side{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left}
.price-note{font:600 19px/1.3 var(--head);color:#4f7d1a}
.price-reg{color:var(--mute);font-size:18px;line-height:1.3}
@media (max-width:560px){.price{flex-direction:column}.price-side{align-items:center;text-align:center}}
.price-reg s{color:#8a8279}
.loft-wrap{display:flex;flex-direction:column;gap:56px}
.loft-shot{max-width:1072px;margin:0 auto;width:100%}
.loft-shot img{border-radius:12px;display:block}
.loft-notes{max-width:780px;margin:56px auto 0;text-align:center}
.loft-notes .note{background:var(--soft);border-left:5px solid var(--green);padding:18px 22px;text-align:left;color:var(--ink);margin:0 0 32px}
.loft-page .loft{align-items:center}
.loft-page .loft-list li{font-size:20px}

/* privacy and 404 */
.prose-wrap{padding-top:124px}
.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:22px;margin:2em 0 .5em}
.prose p,.prose li{color:var(--mute)}
.prose ul{padding-left:1.2em}
.prose a{color:#1d1b19}
.nf{text-align:center}
.foot-in .foot-l{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
.foot-in a.priv{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.foot-in a.priv:hover{border-bottom-color:var(--green)}

@media(max-width:820px){
 .prose-wrap{padding-top:76px}
 .special{padding-top:36px}
 .special-card{grid-template-columns:1fr;gap:18px;padding:18px 20px 24px}
 .loft-wrap{gap:36px}
 .loft-page .loft-list li{font-size:18px}
 .loft-notes{margin-top:36px}
}
@media(max-width:560px){
 .cta-row .btn{width:100%}
 .btn-xl{padding:22px 24px}
}

/* scroll-scrubbed orbit hero on /bunk-beds/ (2026-10-13) */
.orbit{position:relative;background:#1d1b19}
html.js .orbit{height:260vh;height:250svh}
.orbit-stage{position:sticky;top:56px;height:calc(100vh - 56px);height:calc(100svh - 56px);overflow:hidden;color:#fff}
.orbit-still,.orbit-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.orbit-still{object-fit:cover;object-position:center}
.orbit-canvas{opacity:0}
.orbit-live .orbit-canvas{opacity:1}
.orbit-live .orbit-still{visibility:hidden}
.orbit-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top right,rgba(0,0,0,.62) 0%,rgba(0,0,0,.35) 32%,rgba(0,0,0,0) 62%)}
.orbit-copy{position:absolute;left:0;bottom:0;max-width:min(720px,100%);padding:0 clamp(20px,5vw,72px) clamp(56px,9vh,96px)}
.orbit-h{font:700 clamp(36px,6vw,76px)/1.04 var(--head);color:#fff;margin:0;letter-spacing:-.005em;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.orbit-h span{display:block;color:var(--green)}
.orbit-h::after{content:"";display:block;width:84px;height:5px;background:var(--green);margin:22px 0 18px}
.orbit-sub{font:600 clamp(15px,1.6vw,19px)/1.4 var(--head);color:#f1ede8;margin:0;letter-spacing:.02em;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.orbit-btn{margin-top:26px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease,visibility 0s linear .5s,background .2s,color .2s,border-color .2s}
.orbit.end .orbit-btn{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.orbit-hint{position:absolute;left:50%;bottom:18px;margin-left:-16px;width:32px;height:32px;color:#fff;opacity:.9;transition:opacity .4s ease;pointer-events:none;filter:drop-shadow(0 1px 4px rgba(0,0,0,.6))}
.orbit-hint svg{width:32px;height:32px;display:block;animation:orbitHint 1.8s ease-in-out infinite}
.orbit.hint-off .orbit-hint{opacity:0}
@keyframes orbitHint{0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}}
.section.page-head.orbit-after{padding-top:72px}
@media(max-width:820px){.section.page-head.orbit-after{padding-top:48px}.orbit-btn{margin-top:20px}.orbit-h::after{margin:16px 0 14px;width:64px;height:4px}}
@media(prefers-reduced-motion:reduce){
 html.js .orbit{height:auto}
 .orbit-stage{position:relative;top:0;height:clamp(380px,56vw,720px)}
 .orbit-canvas,.orbit-hint{display:none}
 .orbit-btn{opacity:1;visibility:visible;transform:none}
 .orbit-hint svg{animation:none}
}

/* inline orbit over the wide photo on /loft-bed/ (2026-10-13): canvas overlays the img, same box */
.loft-shot{position:relative}
.orbit-inline-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:12px;opacity:0;pointer-events:none}
.loft-shot.orbit-live .orbit-inline-canvas{opacity:1}
@media(prefers-reduced-motion:reduce){.orbit-inline-canvas{display:none}}

/* drag/swipe to scrub the loft photo (2026-10-13) */
.loft-shot[data-orbit-inline]{touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.loft-shot[data-orbit-inline] img{-webkit-user-drag:none}
@media(pointer:fine){.loft-shot[data-orbit-inline]{cursor:grab}.loft-shot[data-orbit-inline].dragging{cursor:grabbing}}
.orbit-drag-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:rgba(20,20,20,.62);color:#fff;font-weight:600;font-size:13px;line-height:1.2;font-family:inherit;letter-spacing:.02em;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .5s ease}
.orbit-drag-hint.on{opacity:1}
.orbit-drag-hint.gone{opacity:0;visibility:hidden}
.orbit-drag-hint .h-coarse{display:none}
@media(pointer:coarse){.orbit-drag-hint .h-fine{display:none}.orbit-drag-hint .h-coarse{display:inline}}
@media(prefers-reduced-motion:reduce){.orbit-drag-hint{display:none}}

/* ===== phones only (2026-10-15, branch fix/mobile-spacing). Everything below lives inside max-width:700px so 701px and up (tablet, desktop) is untouched. ===== */

/* A. section rhythm. Root cause: in the 820px block of build_site.py `.wrap{padding:0 18px}` comes after `.section{padding:48px 0}` with equal
   specificity, so every `.wrap.section` lost its vertical padding (headings sat on the previous block, text on the bottom edge of dark bands).
   Restore the intended 48px here (two-class selectors, so they win over the single-class rules above) and re-state the special cases. */
@media(max-width:700px){
 .wrap.section{padding-top:48px;padding-bottom:48px}
 .wrap.section.tight{padding-top:24px}
 .story .wrap.section,.wrap.section.prose-wrap{padding-top:76px}
 .wrap.section.page-head{padding-top:76px;padding-bottom:24px}
 .wrap.section.page-head.orbit-after{padding-top:48px}
 .wrap.section.page-head.loft-head{padding-bottom:28px}
 /* the /loft-bed/ body block is a bare .wrap, so it needs its own bottom space before the Contact section line */
 .loft-page>.wrap:last-child{padding-bottom:48px}
 /* home page: the two CTA buttons under the bunk/loft teaser stack at one width with an even gap and the same space below as the sections have */
 .loft-cta{flex-direction:column;align-items:stretch;gap:12px;margin-top:28px}
 .loft-cta .btn{text-align:center}
 /* footer: the Privacy link was left-aligned under the centred copyright line */
 .foot-in .foot-l{justify-content:center;text-align:center}
}

/* B. orbit hero stage follows the visible viewport as the Safari toolbar shows and hides (dvh), with svh and vh fallbacks.
   Not applied under reduced motion, where the stage has its own height. */
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
 .orbit-stage{height:calc(100vh - 56px);height:calc(100svh - 56px);height:calc(100dvh - 56px)}
}

/* C. phones: the big full-screen cover look stays (white copy bottom-left on a scrim); the copy block sits above the chat greeting, chat button and back-to-top
   (they occupy the bottom ~165px of the visible screen; the stage bottom is the visible bottom thanks to dvh). The Scroll chevron would sit under the greeting,
   so it is hidden on phones. The vars (--oscrim, --oc-b, --oc-t, --st-*) and classes (orbit-dark, orbit-copy-top, orbit-fit) are set by the tuning string in site.js. */
@media(max-width:700px){
 .orbit-scrim{background:linear-gradient(to top,rgba(0,0,0,var(--oscrim,.66)) 0%,rgba(0,0,0,calc(var(--oscrim,.66)*.79)) 42%,rgba(0,0,0,calc(var(--oscrim,.66)*.27)) 68%,rgba(0,0,0,0) 85%)}
 .orbit-hint{display:none}
 .orbit-still{inset:auto;left:var(--st-l,0);top:var(--st-t,0);width:var(--st-w,100%);height:var(--st-h,100%);-webkit-mask-image:var(--st-mask,none);mask-image:var(--st-mask,none);-webkit-mask-composite:source-in;mask-composite:intersect;max-width:none}
 .orbit-fit .orbit-stage{background:linear-gradient(#faf6ed,#f6f2e9)}
 .orbit-dark .orbit-scrim{display:none}
 .orbit-dark .orbit-h{color:#1d1b19;text-shadow:none}
 .orbit-dark .orbit-h span{color:#4f7d1a}
 .orbit-dark .orbit-sub{color:#4b4843;text-shadow:none}
 .orbit-dark .orbit-btn{background:var(--char);color:#fff;border-color:var(--char)}
}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
 .orbit-copy{padding-bottom:var(--oc-b,calc(184px + env(safe-area-inset-bottom,0px)))}
 .orbit-copy-top .orbit-copy{top:var(--oc-t,40px);bottom:auto;padding-bottom:0}
}