:root{--paper:#f3f0e9;--paper-2:#eae6dc;--paper-line:#d6d1c4;--ink-soft:#55585c;--ink:#08090b;--surface:#0d0e11;--surface-2:#131519;--surface-3:#1a1c21;--charcoal:#25272b;--silver:#c7c9cc;--platinum:#c7c9cc;--pearl:#f3f0e9;--pewter:#858a91;--stone:#b7b0a6;--muted:#9aa0a7;--line:#2b2e34;--header-h:112px;--serif:Georgia,'Times New Roman',serif;--sans:Arial,Helvetica,sans-serif;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px)}body{margin:0;color:var(--pearl);background:var(--surface);font:400 1rem/1.6 var(--sans)}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}img{max-width:100%;display:block}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--platinum);outline-offset:5px}button{border:0;background:none}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400}h2{font-size:clamp(2.4rem,4.6vw,4.2rem);line-height:1.09;letter-spacing:-.045em}h3{font-size:1.75rem;line-height:1.2;letter-spacing:-.025em}em{font-style:normal}h1 em,h2 em{color:var(--platinum)}.wrap{width:min(1320px,88%);margin:auto}.eyebrow{text-transform:uppercase;font-size:.75rem;line-height:1.5;letter-spacing:.22em;font-weight:500;color:var(--platinum)}.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:52px;padding:15px 24px;border:1px solid transparent;font-size:.875rem;line-height:1.35;font-weight:500;transition:background .2s,box-shadow .2s,transform .2s}.button span,.text-link span{transition:transform .2s}.button:hover span,.text-link:hover span{transform:translate(3px,-1px)}.button-silver{background:linear-gradient(115deg,#e0e0dd,#fbfaf7 48%,#d2d3d5);color:var(--ink)}.button-silver:hover{box-shadow:0 0 24px #ddd2;transform:translateY(-2px)}.button-dark{background:transparent;color:var(--pearl);border-color:var(--pewter)}.button-dark:hover{background:var(--pearl);color:var(--ink);border-color:var(--pearl)}.text-link{display:inline-flex;align-items:center;gap:18px;padding:10px 0;font-size:.875rem;line-height:1.45;border-bottom:1px solid currentColor;font-weight:500}.text-link-light{color:var(--pearl)}.text-link{color:var(--pearl);border-bottom-color:var(--pewter)}.text-link:hover{border-bottom-color:var(--platinum)}.skip-link{position:fixed;top:-100px;left:20px;z-index:200;background:white;color:black;padding:15px}.skip-link:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.site-header{position:sticky;top:0;z-index:30;background:var(--ink);color:var(--pearl);box-shadow:0 1px 0 #ffffff16}.preview-note{background:#2c2d30;color:#d9d9d6;display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1.4;padding:6px 45px;position:relative;text-align:center}.note-separator{margin:0 10px;color:#999}.preview-note button{position:absolute;right:12px;top:0;height:100%;width:30px;font-size:1.3rem;color:#d9d9d6}.header-inner{display:flex;align-items:center;gap:32px;justify-content:space-between;min-height:84px}.brand{display:block;flex-shrink:0;width:242px;height:77px}.brand-art{display:block;width:100%;height:100%;background-repeat:no-repeat;background-size:563px 375px;background-position:-186px -66px}.desktop-nav{display:flex;align-items:center;gap:30px;margin-left:auto}.desktop-nav a{font-size:.875rem;padding:8px 0;position:relative;color:#dcdcd8}.desktop-nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--silver);transition:right .25s}.desktop-nav a:hover::after,.desktop-nav a.active::after{right:0}.header-estimate{min-height:44px;padding:12px 19px}.menu-toggle,.mobile-nav{display:none}.hero-track{height:calc(185svh - var(--header-h));background:var(--ink);position:relative;scroll-margin-top:var(--header-h)}.hero-sticky{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));min-height:420px;overflow:hidden}.hero-picture{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 3% 4% 3%)}.hero-images{position:absolute;inset:0;transform:scale(1.055);will-change:transform}.hero-image{position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% 54%;inset:0}.monochrome{filter:grayscale(1) brightness(.88)}.color-image{clip-path:inset(0 90% 0 0);will-change:clip-path}.reveal-line{position:absolute;inset:0 auto 0 10%;width:2px;background:linear-gradient(#b6bac0,#fff,#b6bac0);box-shadow:0 0 15px #ffffff44}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#08090be8,#08090b60 52%,transparent 85%)}.hero-copy{position:absolute;top:22%;left:8%;color:var(--pearl);max-width:80%;will-change:transform,opacity}.hero-copy h1{font-size:clamp(3rem,5.7vw,6.3rem);line-height:1.02;letter-spacing:-.055em;margin:23px 0}.hero-copy .eyebrow{color:#eee}.hero-intro{font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.6;color:#e4e3de}.hero-actions{display:flex;align-items:center;gap:30px;margin-top:32px}.hero-finish{position:absolute;left:7%;bottom:12%;color:#fff;opacity:0;transform:translateY(25px);pointer-events:none;text-shadow:0 1px 20px #0003}.hero-finish h2{font-size:clamp(3rem,6.3vw,6rem);margin-top:15px}.scroll-cue{position:absolute;left:8%;bottom:9%;display:flex;align-items:center;gap:20px;color:#eee;font-size:.75rem;text-transform:uppercase;letter-spacing:.18em}.scroll-arrow{font-size:1.6rem}.motion-toggle{position:absolute;right:6%;bottom:8%;color:#f0efeb;font-size:.75rem;padding:10px 13px;background:#1011136b;border:1px solid #ffffff40}.section-light{background:var(--surface)}.services{padding:100px 0 64px}.section-heading{margin-bottom:42px}.section-heading h2{margin:15px 0 19px}.section-heading>p:last-child{color:var(--muted)}.mobile-break{display:none}.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px}.service-photo{width:100%;padding:0;display:block;position:relative;overflow:hidden;aspect-ratio:1.43}.service-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.service-photo:hover img{transform:scale(1.035)}.image-corner{position:absolute;right:0;bottom:0;width:48px;height:48px;background:var(--surface);color:var(--platinum);font-size:1.6rem;display:grid;place-items:center}.service-copy{display:flex;gap:24px;padding:29px 0 35px}.service-icon{width:40px;height:52px;object-fit:contain;flex-shrink:0}.service-copy h3{font-size:2rem}.service-copy p{max-width:360px;color:var(--muted);margin:12px 0 17px}.other-services{display:grid;grid-template-columns:1fr 1.55fr auto;gap:30px;align-items:center;border-top:1px solid var(--line);padding:29px 0 36px}.other-services h3{font-size:1.5rem}.other-services p{font-size:.875rem;color:var(--muted);line-height:1.6;max-width:500px}.other-services .text-link{font-size:.8125rem;white-space:nowrap}.work-section{padding:80px 0;background:var(--surface-2)}.work-header{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}.work-header h2{margin-top:15px;font-size:clamp(2.5rem,4vw,3.7rem)}.gallery-filters{display:flex;gap:22px;flex-wrap:wrap}.filter{padding:9px 0;font-size:.875rem;border-bottom:1px solid transparent;color:var(--muted)}.filter:hover,.filter.active{border-bottom-color:var(--platinum);color:var(--pearl)}.gallery-grid{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:220px 220px;gap:18px}.gallery-card{position:relative;overflow:hidden;padding:0;min-height:0;text-align:left;background:var(--surface-3)}.gallery-wide{grid-row:span 2}.gallery-card img{height:100%;width:100%;object-fit:cover;transition:transform .7s}.gallery-card:hover img{transform:scale(1.035)}.gallery-label{position:absolute;bottom:0;left:0;right:0;padding:42px 24px 20px;background:linear-gradient(transparent,#0008);color:white;display:flex;justify-content:space-between;gap:20px;font-size:.875rem}.gallery-label>span:last-child{font-size:1.3rem}.gallery-grid.filtered{grid-template-columns:1fr;grid-template-rows:480px}.gallery-grid.filtered .gallery-card{grid-row:auto}.image-disclaimer{margin-top:17px;font-size:.75rem;color:var(--muted)}.process{padding:80px 0 90px}.process h2{margin:13px 0 38px;font-size:clamp(2.3rem,3.6vw,3.3rem)}.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.process-grid article{display:flex;gap:24px}.process-grid article+article{border-left:1px solid var(--line);padding-left:33px}.step-number{font:italic 400 3.5rem/1 var(--serif);letter-spacing:-.05em;color:var(--pewter)}.process-grid h3{font-size:1.2rem;line-height:1.35;margin:2px 0 10px;letter-spacing:-.02em}.process-grid p{font-size:.875rem;color:var(--muted);line-height:1.6;max-width:220px}.contact-section{background:var(--ink);color:var(--pearl);border-top:1px solid var(--line);padding:77px 0 80px;position:relative;overflow:hidden}.contact-shine{position:absolute;inset:0;background:linear-gradient(125deg,transparent 45%,#ffffff08 65%,#ffffff12 65.1%,transparent 80%);pointer-events:none}.contact-inner{position:relative;text-align:center}.contact-inner h2{margin:17px 0 20px;font-size:clamp(2.7rem,4.8vw,4.5rem)}.contact-inner>p:not(.eyebrow){color:var(--platinum)}.contact-actions{display:flex;justify-content:center;align-items:center;gap:35px;margin:33px 0 22px}.phone-link{font-family:var(--serif);font-size:1.7rem;white-space:nowrap}.email-link{font-size:.875rem;color:var(--platinum);overflow-wrap:anywhere}.site-footer{background:var(--ink);color:var(--muted);border-top:1px solid var(--line)}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:25px 0}.site-footer nav{display:flex;flex-wrap:wrap;gap:25px;font-size:.8125rem}.site-footer nav button{padding:0;font-size:inherit}.back-top{font-size:1.6rem;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);color:var(--platinum)}.site-footer .brand{width:242px}.noscript-note{padding:20px;text-align:center}
dialog{padding:0;border:0;background:var(--surface-2);color:var(--pearl);width:min(680px,calc(100vw - 32px));max-height:calc(100svh - 40px);overscroll-behavior:contain}dialog::backdrop{background:#08090be0;backdrop-filter:blur(6px)}dialog[open]{animation:dialog-in .22s ease}.dialog-close{position:absolute;top:15px;right:15px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--pewter);background:var(--ink);color:var(--pearl);font:400 1.8rem/1 var(--sans)}.dialog-content{padding:44px}.dialog-content h2{font-size:2.9rem;margin:14px 0 20px}.dialog-hero{height:250px;width:100%;object-fit:cover}.service-list{padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin:25px 0}.service-list li{border-bottom:1px solid var(--line);padding:13px 0;font-size:.9375rem}.dialog-note{color:var(--muted);margin:22px 0 28px;font-size:.9375rem}.lightbox{width:min(1100px,calc(100vw - 32px));background:var(--ink);color:var(--pearl)}.lightbox>img{width:100%;height:min(65svh,700px);object-fit:contain;background:#08090b}.lightbox-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:24px 30px}.lightbox-bottom h2{font-size:1.7rem;letter-spacing:-.02em}.lightbox-bottom p{font-size:.8125rem;color:#b6b6b2;margin-top:6px}.lightbox-controls{display:flex;align-items:center;gap:20px;flex-shrink:0}.lightbox-controls button{color:var(--pearl);height:44px;width:44px;border:1px solid #777;font-size:1.3rem}.lightbox-controls span{font-size:.875rem;font-variant-numeric:tabular-nums}.estimate-dialog{width:min(640px,calc(100vw - 32px))}.demo-form-note{font-size:.8125rem;color:var(--platinum);margin:0 0 24px;padding:10px 13px;background:var(--surface-3);border-left:2px solid var(--pewter)}.form-progress{display:flex;gap:30px;padding:16px 0 24px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--muted)}.form-progress .current{color:var(--pearl)}fieldset{padding:0;border:0;margin:0;min-width:0}label{display:block;font-size:.875rem;margin-bottom:9px}input,select,textarea{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:0;padding:13px 14px;color:var(--pearl);font-size:1rem;min-height:50px;margin-bottom:22px}input:hover,select:hover,textarea:hover{border-color:var(--pewter)}textarea{resize:vertical;min-height:110px}.optional{color:var(--muted);font-size:.75rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.form-next{width:100%;justify-content:space-between}.form-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:9px}.success-mark{font-size:2rem;margin:20px 0;color:var(--platinum)}.estimate-dialog h3{font-size:1.75rem;margin-bottom:15px}#estimate-success>p{color:var(--muted);font-size:.9375rem}#request-summary{padding:20px;background:var(--ink);border:1px solid var(--line);margin:25px 0}dt{font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}dd{margin:3px 0 15px;overflow-wrap:anywhere}dd:last-child{margin-bottom:0}[hidden]{display:none!important}body.dialog-open{overflow:hidden}
@keyframes dialog-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(min-width:1800px){.hero-copy{left:calc((100% - 1320px)/2)}}
@media(max-width:1050px){.header-inner{gap:18px}.brand{width:210px;height:68px}.brand-art{background-size:490px 327px;background-position:-162px -58px}.desktop-nav{gap:20px}.header-estimate span{display:none}.hero-copy{top:20%}.hero-copy h1{font-size:4.4rem}.other-services{grid-template-columns:1fr 1.5fr}.other-services .text-link{grid-column:2;justify-self:start}.process-grid{gap:20px}.process-grid article{gap:15px}.process-grid article+article{padding-left:20px}.step-number{font-size:2.8rem}.footer-inner{gap:20px}.site-footer nav{gap:15px}}
@media(max-width:780px){.wrap{width:88%}.header-inner{min-height:74px}.desktop-nav,.header-estimate{display:none}.menu-toggle{display:flex;align-items:center;gap:15px;padding:12px 0;color:var(--pearl);font-size:.875rem}.menu-toggle>span:last-child{font-size:1.2rem}.mobile-nav:not([hidden]){display:flex;flex-direction:column;gap:6px;padding:10px 6% 25px;border-top:1px solid #fff2}.mobile-nav>a{padding:10px 0;font-size:1rem}.mobile-nav .button{margin-top:10px;align-self:start}.hero-copy h1{font-size:clamp(2.9rem,7.5vw,4rem)}.hero-copy{left:8%;top:20%;max-width:86%}.hero-image{object-position:55% center}.hero-intro{font-size:1rem}.hero-actions{gap:22px;flex-wrap:wrap}.hero-actions .button{padding:14px 17px;gap:18px}.hero-finish h2{font-size:3.5rem}.hero-track{height:calc(180svh - var(--header-h))}.services{padding-top:65px}.section-heading{margin-bottom:32px}.section-heading>p:last-child{font-size:.9375rem}.service-grid{gap:26px}.service-copy{gap:15px}.service-icon{width:30px}.service-copy h3{font-size:1.6rem}.service-copy p{font-size:.9375rem}.other-services{gap:20px}.work-section{padding:55px 0}.work-header{align-items:start;flex-direction:column}.gallery-grid{grid-template-rows:180px 180px}.process{padding:60px 0}.process-grid{grid-template-columns:1fr;gap:27px}.process-grid article{gap:25px}.process-grid article+article{border:0;padding:22px 0 0;border-top:1px solid var(--line)}.process-grid p{max-width:none}.step-number{font-size:3rem;min-width:65px}.contact-section{padding:65px 0}.contact-inner .eyebrow{font-size:.6875rem}.footer-inner{flex-wrap:wrap}.site-footer nav{order:3;width:100%;justify-content:space-between;gap:12px}.lightbox-bottom{flex-direction:column;align-items:start}.lightbox-controls{width:100%;justify-content:space-between}.dialog-content{padding:32px}.dialog-content h2{font-size:2.4rem}}
@media(max-width:560px){.preview-note{font-size:.6875rem;padding:7px 34px 7px 13px;justify-content:start;text-align:left}.note-separator{margin:0 5px}.brand{width:185px;height:62px}.brand-art{background-size:432px 288px;background-position:-143px -51px}.header-inner{min-height:68px}.hero-sticky{min-height:440px}.hero-copy{top:16%;left:8%;max-width:86%}.hero-copy .eyebrow{font-size:.6875rem;letter-spacing:.17em}.hero-copy h1{font-size:clamp(2.65rem,9.5vw,3.5rem);margin:22px 0;line-height:1.06}.hero-copy h1 em{display:block}.hero-intro{font-size:.9375rem}.hero-actions{margin-top:25px;gap:14px 22px}.hero-actions .button{font-size:.8125rem;min-height:50px}.hero-actions .text-link{font-size:.8125rem}.hero-finish h2{font-size:3rem}.scroll-cue{bottom:9%;font-size:.625rem;gap:15px}.motion-toggle{font-size:.6875rem;bottom:8%;right:7%}.hero-images{transform-origin:55% center}.mobile-break{display:block}.service-grid{grid-template-columns:1fr;gap:24px}.service-photo{aspect-ratio:1.2}.service-copy{padding:24px 0 25px;gap:18px}.service-copy h3{font-size:1.9rem}.service-copy p{max-width:none}.service-icon{width:35px}.other-services{grid-template-columns:1fr;gap:15px;padding:28px 0}.other-services .text-link{grid-column:auto;justify-self:start}.gallery-filters{gap:23px}.gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:260px 205px;gap:12px}.gallery-wide{grid-column:1/-1;grid-row:auto}.gallery-label{font-size:.75rem;padding:36px 15px 13px;gap:8px}.gallery-grid.filtered{grid-template-columns:1fr;grid-template-rows:360px}.gallery-grid.filtered .gallery-wide{grid-column:auto}.work-header h2{font-size:2.65rem}.image-disclaimer{font-size:.75rem}.contact-actions{flex-direction:column;gap:23px}.contact-actions .button{padding:15px 18px;gap:18px;font-size:.8125rem}.contact-inner h2{font-size:2.8rem}.contact-inner>p:not(.eyebrow){font-size:.9375rem}.email-link{font-size:.8125rem}.site-footer .brand{width:185px}.site-footer nav{display:grid;grid-template-columns:1fr 1fr;row-gap:17px;text-align:left}.site-footer nav button{text-align:left}.dialog-content{padding:30px 24px}.dialog-content h2{font-size:2.2rem}.dialog-hero{height:210px}.form-row{grid-template-columns:1fr;gap:0}.service-list{gap:0 16px;font-size:.875rem}.form-actions{gap:15px}.form-actions .button{font-size:.8125rem;padding:14px 15px}.lightbox>img{height:50svh}.lightbox-bottom{padding:22px}.lightbox-bottom h2{font-size:1.5rem}.preview-note button{right:3px}}
html.motion-off .hero-track{height:auto}html.motion-off .hero-sticky{position:relative;height:calc(100svh - var(--header-h))}html.motion-off .hero-picture{clip-path:none!important}html.motion-off .color-image{clip-path:none!important}html.motion-off .hero-images{transform:none!important}html.motion-off .hero-copy{opacity:1!important;transform:none!important;visibility:visible!important}html.motion-off .hero-finish,html.motion-off .reveal-line{display:none}html.motion-off .hero-shade{background:linear-gradient(90deg,#08090be8,#08090b60 52%,transparent 85%)!important}html.motion-off .scroll-cue{opacity:1!important;visibility:visible!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero-track{height:auto}.hero-sticky{position:relative}.hero-picture,.color-image{clip-path:none!important}.hero-images{transform:none!important}.reveal-line,.hero-finish{display:none}.hero-copy{opacity:1!important;transform:none!important;visibility:visible!important}.hero-shade{background:linear-gradient(90deg,#08090be8,#08090b60 52%,transparent 85%)!important}}
/* Renovations extend the painting-led identity with a quiet editorial section. */
.renovations-section{padding:90px 0}.renovations-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8%}.renovations-copy h2{margin:18px 0 25px;font-size:clamp(2.4rem,3.7vw,3.8rem)}.renovations-copy h2 em{color:var(--platinum)}.renovations-copy>p:not(.eyebrow){max-width:510px;color:var(--muted)}.renovations-services{list-style:none;display:flex;flex-wrap:wrap;gap:12px 24px;padding:20px 0;margin:10px 0 18px;border-bottom:1px solid var(--line);font-size:.875rem}.renovations-copy .partner-note{font-size:.875rem;line-height:1.7;margin-bottom:27px}.renovations-photo{margin:0;position:relative}.photo-plate{position:relative;padding:0 0 20px 20px}.photo-plate::before{content:'';position:absolute;inset:20px 20px 0 0;border:1px solid var(--pewter);pointer-events:none}.renovations-photo img{position:relative;width:100%;height:auto;aspect-ratio:1.05;object-fit:cover}.renovations-photo figcaption{position:relative;text-align:right;font-size:.75rem;color:var(--muted);padding:14px 20px 0 0}.renovations-section+.process{border-top:1px solid var(--line)}.section-light+.section-light{border-top:1px solid var(--line)}.renovation-intro{padding:30px 0 85px}.breadcrumb{margin-bottom:45px}.renovation-intro h1{font-size:clamp(2.8rem,4.7vw,4.8rem);line-height:1.07;letter-spacing:-.045em;margin:18px 0 28px}.renovation-intro .partner-note{margin-top:23px}.renovation-scope{padding:75px 0 85px;background:var(--surface-2)}.renovation-scope h2{margin:16px 0 40px}.renovation-scope-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.renovation-scope-grid article{border-top:1px solid var(--pewter);padding-top:25px}.renovation-scope-grid h3{margin:17px 0;font-size:1.7rem}.renovation-scope-grid p{color:var(--muted)}
@media(min-width:781px) and (max-width:1150px){.header-inner{gap:16px}.desktop-nav{gap:16px}.header-estimate{padding:12px;font-size:.8125rem}.header-estimate span{display:none}.header-inner .brand{width:185px;height:62px}.header-inner .brand-art{background-size:432px 288px;background-position:-143px -51px}}
@media(max-width:900px){.renovations-grid{gap:5%}.renovations-copy h2{font-size:2.6rem}.renovations-photo img{aspect-ratio:.8}.renovation-scope-grid{gap:25px}}
@media(max-width:780px){.renovations-section{padding:60px 0}.intro-section{padding:58px 0 62px}.renovations-grid{grid-template-columns:1fr;gap:35px}.renovations-copy>p:not(.eyebrow){max-width:none}.renovations-photo img{aspect-ratio:1.5}.renovations-copy h2{font-size:clamp(2.25rem,6vw,3rem)}.renovation-intro{padding:20px 0 60px}.breadcrumb{margin-bottom:35px}.renovation-scope{padding:55px 0}.renovation-scope-grid{grid-template-columns:1fr;gap:32px}}

/* Starter build-out: shared page furniture for Painting, Our Work and Contact. */
.page-hero{background:var(--ink);color:var(--pearl);padding:62px 0 68px;position:relative;overflow:hidden}.page-hero .wrap{position:relative}.page-hero .eyebrow{color:#cfd0cc}.page-hero h1{font-size:clamp(2.6rem,5vw,4.6rem);line-height:1.05;letter-spacing:-.05em;margin:18px 0 22px}.page-hero p{max-width:620px;color:#d6d6d1}.page-hero-actions{display:flex;align-items:center;gap:32px;flex-wrap:wrap;margin-top:34px}
.breadcrumb-row{padding:22px 0 0}.breadcrumb-row .text-link{font-size:.8125rem}
.section-stone{background:var(--surface-2)}
.lede{font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.65;max-width:720px;color:var(--pearl)}
.intro-section{padding:88px 0 92px}.intro-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:7%;align-items:center}.intro-grid h2{font-size:clamp(2.1rem,3.3vw,3.1rem);margin:16px 0 26px}.intro-grid .eyebrow{margin-bottom:0}.intro-body>p+p{margin-top:18px}.intro-body p{color:var(--muted)}.intro-body .lede{color:var(--pearl)}

/* Every service, listed plainly. Painting first; the rest are coordinated work. */
.service-index{padding:80px 0 86px}.service-index .section-heading{margin-bottom:0}.svc-rows{margin-top:46px;border-bottom:1px solid var(--line)}.svc-row{display:grid;grid-template-columns:86px minmax(0,250px) minmax(0,1fr);gap:0 40px;align-items:start;padding:34px 0;border-top:1px solid var(--line)}.svc-index{font:italic 400 2.6rem/1 var(--serif);letter-spacing:-.04em;color:var(--pewter)}.svc-name h3{font-size:1.55rem;letter-spacing:-.02em}.svc-name p{font-size:.8125rem;color:var(--muted);margin-top:9px;line-height:1.6}.svc-list{list-style:none;padding:0;margin:5px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;font-size:1.0625rem;line-height:1.95;color:var(--platinum)}.svc-list li{white-space:nowrap;display:flex;align-items:baseline;margin-right:26px}.svc-list li::before{content:'·';margin-right:13px;color:var(--pewter)}.service-index-note{margin-top:34px;font-size:.875rem;color:var(--muted);line-height:1.7;max-width:760px}

/* Before / after pairs. Both halves are the same job, shot before and after. */
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}.ba-item{margin:0;position:relative}.ba-item>img{width:100%;height:auto;object-fit:cover;display:block;aspect-ratio:4/3;background:var(--surface-3)}.ba-pair.portrait .ba-item>img{aspect-ratio:3/4}.ba-tag{position:absolute;top:0;left:0;background:#101113e8;color:var(--pearl);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;padding:10px 15px}.ba-item figcaption{font-size:.8125rem;color:var(--muted);padding-top:11px;line-height:1.55}
.project{padding:70px 0}.project+.project{border-top:1px solid var(--line)}.project-head{display:flex;justify-content:space-between;align-items:end;gap:34px;margin-bottom:32px}.project-head h2{font-size:clamp(2rem,3.2vw,3rem);margin-top:14px}.project-head>div:first-child{max-width:640px}.project-head p:not(.eyebrow){color:var(--muted);margin-top:16px}.project-meta{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap;text-align:right;line-height:2}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}.photo-grid .gallery-card{aspect-ratio:4/3;min-height:0}.photo-grid .gallery-card.tall{aspect-ratio:3/4}

/* Reviews stay empty until Jordan supplies real ones. Nothing is invented. */
.reviews{padding:78px 0 84px}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin-top:38px}.review{border-top:1px solid var(--line);padding-top:26px}.review blockquote{margin:0;font-family:var(--serif);font-size:1.3rem;line-height:1.45;letter-spacing:-.015em}.review cite{display:block;margin-top:20px;font-style:normal;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.reviews-pending{border:1px solid var(--line);background:var(--surface-3);padding:30px 32px;margin-top:32px;max-width:760px}.reviews-pending p{font-size:.9375rem;color:var(--muted);line-height:1.7}.reviews-pending p+p{margin-top:12px}

/* Contact page: the estimate form lives on the page, not only in the dialog. */
.contact-page{padding:66px 0 88px}.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:7%;align-items:start}.contact-aside h2{font-size:clamp(1.9rem,2.9vw,2.6rem)}.contact-aside>p{color:var(--muted);margin:16px 0 0;max-width:420px}
.contact-list{margin:34px 0 0;padding:0}.contact-list dt{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-top:20px;border-top:1px solid var(--line)}.contact-list dd{margin:8px 0 20px;font-size:1.05rem;overflow-wrap:anywhere}.contact-list dd a{border-bottom:1px solid var(--line);padding-bottom:2px}.contact-list dd a:hover{border-bottom-color:var(--ink)}.contact-list .contact-phone{font-family:var(--serif);font-size:1.7rem}
.social-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}.social-link{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);padding:11px 16px;font-size:.8125rem}.social-link:hover{border-color:var(--ink)}.social-pending{font-size:.8125rem;color:var(--muted);line-height:1.6}
.form-card{background:var(--surface-2);border:1px solid var(--line);padding:38px}.form-card h3{font-size:1.6rem;margin-bottom:8px}.form-card>p{font-size:.9375rem;color:var(--muted);margin-bottom:26px}
.form-status{margin:0 0 20px;padding:13px 15px;font-size:.875rem;line-height:1.55;border-left:3px solid var(--pewter);background:var(--surface-3)}.form-status[data-state=error]{border-left-color:#c7625a;background:#261716;color:#f0cfcb}.form-status[data-state=sent]{border-left-color:#6fa382;background:#13201a;color:#cfe4d7}
.service-area{padding:70px 0 76px}.service-area-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:7%;align-items:start}.service-area h2{font-size:clamp(1.9rem,2.9vw,2.6rem)}.area-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}.area-list li{padding:13px 0;border-bottom:1px solid var(--line);font-size:.9375rem}.area-note{font-size:.875rem;color:var(--muted);line-height:1.7;margin-top:24px}
.faq{padding:74px 0 80px}.faq-grid{margin-top:34px;border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line);padding:26px 0}.faq-item h3{font-size:1.2rem;letter-spacing:-.02em}.faq-item p{color:var(--muted);font-size:.9375rem;margin-top:12px;line-height:1.7;max-width:760px}
.image-note{font-size:.75rem;color:var(--muted);margin-top:16px;line-height:1.6}
@media(max-width:980px){.intro-grid,.contact-grid,.service-area-grid{grid-template-columns:1fr;gap:34px}.review-grid{grid-template-columns:1fr 1fr;gap:0 34px}.svc-row{grid-template-columns:70px minmax(0,1fr);gap:0 26px;padding:28px 0}.svc-list{grid-column:2}.svc-name{margin-bottom:13px}.review-grid{gap:30px}.photo-grid{grid-template-columns:1fr 1fr}.project-head{flex-direction:column;align-items:start;gap:18px}.project-meta{text-align:left}}
@media(max-width:780px){.page-hero{padding:46px 0 52px}.page-hero-actions{gap:20px;margin-top:28px}.service-index{padding:58px 0 62px}.svc-index{font-size:2rem}.svc-list{font-size:1rem;line-height:2.05}.svc-row{grid-template-columns:52px minmax(0,1fr);gap:0 18px}.project{padding:52px 0}.reviews{padding:58px 0 62px}.review-grid{grid-template-columns:1fr;gap:26px}.contact-page{padding:48px 0 64px}.form-card{padding:28px 22px}.service-area,.faq{padding:54px 0 58px}.area-list{grid-template-columns:1fr}}
@media(max-width:560px){.ba-pair{grid-template-columns:1fr;gap:12px}.photo-grid{grid-template-columns:1fr;gap:12px}.page-hero h1{font-size:clamp(2.4rem,9vw,3.2rem)}}

/* Before/after slider. The range input is the real control — it gives keyboard,
   touch and screen-reader support for free; dragging the image just drives it. */
.ba-slider{margin:0}
.ba-frame{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--surface-3);touch-action:pan-y;cursor:ew-resize}
.ba-frame>img,.ba-top>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.ba-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--ba,50%)) 0 0)}
.ba-divider{position:absolute;top:0;bottom:0;left:var(--ba,50%);width:2px;margin-left:-1px;background:linear-gradient(#b6bac0,#fff,#b6bac0);box-shadow:0 0 14px #ffffff55;pointer-events:none}
.ba-grip{position:absolute;top:50%;left:var(--ba,50%);width:46px;height:46px;margin:-23px 0 0 -23px;border:1px solid var(--platinum);border-radius:50%;background:#08090bcc;backdrop-filter:blur(3px);display:grid;place-items:center;color:var(--pearl);font-size:.9rem;letter-spacing:.1em;pointer-events:none}
.ba-slider .ba-tag{z-index:2}
.ba-tag-after{left:auto;right:0}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none;background:none;min-height:0}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:46px;height:100%}
.ba-range::-moz-range-thumb{width:46px;height:100%;border:0;background:none}
.ba-slider:focus-within .ba-frame{outline:3px solid var(--platinum);outline-offset:3px}
.ba-slider figcaption{font-size:.8125rem;color:var(--muted);padding-top:12px;line-height:1.55}
.ba-slider figcaption b{color:var(--platinum);font-weight:400}
.ba-wide .ba-frame{aspect-ratio:4/3}

/* Editorial figures that drift a little as the page scrolls. The shift is set
   by app.js from the same requestAnimationFrame loop as the hero. */
.intro-figure{margin:0;position:relative;padding:0 0 18px 18px}
.intro-figure::before{content:'';position:absolute;inset:18px 18px 0 0;border:1px solid var(--pewter);pointer-events:none}
.intro-figure .frame{position:relative;overflow:hidden;aspect-ratio:4/5}
.intro-figure .frame-inner{position:absolute;inset:0;transform:translate3d(0,var(--shift,0px),0) scale(1.1);will-change:transform}.intro-figure .frame-inner>img{width:100%;height:100%;object-fit:cover;display:block}
.intro-figure figcaption{position:relative;text-align:right;font-size:.75rem;color:var(--muted);padding:12px 20px 0 0}
.renovations-photo .frame{position:relative;overflow:hidden;aspect-ratio:1.05}
.renovations-photo .frame-inner{position:absolute;inset:0;transform:translate3d(0,var(--shift,0px),0) scale(1.1);will-change:transform}.renovations-photo .frame-inner>img{position:relative;width:100%;height:100%;object-fit:cover}
html.motion-off [data-parallax] img,html.motion-off [data-parallax] .frame-inner{transform:none!important}
@media(prefers-reduced-motion:reduce){[data-parallax] img,[data-parallax] .frame-inner{transform:none!important}}
@media(max-width:980px){.intro-grid{align-items:start}.intro-figure .frame{aspect-ratio:4/3}.intro-figure{max-width:620px}}
@media(max-width:900px){.renovations-photo .frame{aspect-ratio:.8}}
@media(max-width:780px){.intro-figure{padding:0 0 14px 14px}.intro-figure::before{inset:14px 14px 0 0}.intro-figure .frame{aspect-ratio:4/3}.renovations-photo .frame{aspect-ratio:1.5}}
.ba-slider{max-width:620px}.ba-slider.ba-wide{max-width:none}
.ba-feature{display:grid;grid-template-columns:minmax(0,.9fr) 1fr;gap:7%;align-items:center;margin-top:8px}
.ba-feature .ba-slider{max-width:none}
.ba-feature-copy h3{font-size:clamp(1.8rem,2.8vw,2.5rem);margin:14px 0 18px}
.ba-feature-copy p{color:var(--muted);max-width:430px}
.ba-feature-copy .text-link{margin-top:22px}
.drag-hint{display:flex;width:fit-content;align-items:center;gap:10px;margin-top:22px;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--platinum)}.ba-feature-copy .text-link{display:inline-flex;margin-top:18px}
@media(max-width:980px){.ba-feature{grid-template-columns:1fr;gap:28px}.ba-feature .ba-slider{max-width:560px}}

/* Hover loupe. A circular window showing the same photo at 2.2x, so someone can
   look closely at the finish. Fine pointers only - there is no hover on a phone. */
.frame[data-zoom]{cursor:zoom-in}
.zoom-lens{position:absolute;width:148px;height:148px;border-radius:50%;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .2s ease;border:1px solid var(--platinum);box-shadow:0 14px 44px #08090baa,inset 0 0 0 1px #08090b55}
.frame.zooming .zoom-lens{opacity:1}
.zoom-lens>img{position:absolute;max-width:none;object-fit:cover;display:block}
.zoom-hint{position:absolute;right:14px;bottom:14px;z-index:2;font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pearl);background:#08090b99;backdrop-filter:blur(3px);border:1px solid #ffffff2e;padding:7px 11px;opacity:0;transition:opacity .2s ease;pointer-events:none}
.frame[data-zoom]:hover .zoom-hint{opacity:1}
.frame[data-zoom].zooming .zoom-hint{opacity:0}
@media(hover:none),(pointer:coarse){.zoom-lens,.zoom-hint{display:none}.frame[data-zoom]{cursor:default}}
@media(max-width:780px){.zoom-lens{width:120px;height:120px}}


/* ---- Paper sections ----
   The business card is obsidian on one side and pearl on the other, so the page
   alternates the same two surfaces. Everything inside a paper section flips to
   ink on pearl; the dark sections are untouched. */
.section-paper{background:var(--paper);color:var(--ink)}
.section-paper+.section-paper{border-top:1px solid var(--paper-line)}
.section-paper h1,.section-paper h2,.section-paper h3,.section-paper .lede,.section-paper strong{color:var(--ink)}
.section-paper h1 em,.section-paper h2 em{color:#8a9184}
.section-paper .eyebrow{color:#5d6157}
.section-paper p,.section-paper li,.section-paper dd,.section-paper figcaption,.section-paper cite{color:var(--ink-soft)}.section-paper .section-heading>p:last-child,.section-paper .intro-body p,.section-paper .service-copy p,.section-paper .renovations-copy>p:not(.eyebrow),.section-paper .process-grid p,.section-paper .project-head p:not(.eyebrow),.section-paper .ba-item figcaption,.section-paper .ba-slider figcaption{color:var(--ink-soft)}
.section-paper .svc-list{color:var(--ink)}
.section-paper .svc-list li::before{color:#9aa08f}
.section-paper .svc-index{color:#8d8677}
.section-paper .step-number{color:#8d8677}
.section-paper .svc-rows,.section-paper .svc-row,.section-paper .faq-grid,.section-paper .faq-item,.section-paper .review,.section-paper .reviews-pending,.section-paper .contact-list dt,.section-paper .area-list li,.section-paper .process-grid article+article,.section-paper .service-list li{border-color:var(--paper-line)}
.section-paper .text-link{color:var(--ink);border-bottom-color:#b8b2a4}
.section-paper .text-link:hover{border-bottom-color:var(--ink)}
.section-paper .button-dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.section-paper .button-dark:hover{background:#2b2d31;color:var(--paper);border-color:#2b2d31}
.section-paper .button-silver{background:var(--ink);color:var(--paper)}
.section-paper .button-silver:hover{background:#2b2d31;box-shadow:none}
.section-paper .filter{color:#7b7d72}
.section-paper .filter:hover,.section-paper .filter.active{color:var(--ink);border-bottom-color:var(--ink)}
.section-paper .image-corner{background:var(--paper);color:var(--ink)}
.section-paper .gallery-card,.section-paper .ba-item>img,.section-paper .ba-frame{background:var(--paper-2)}
.section-paper .photo-plate::before{border-color:#b8b2a4}
.section-paper .renovations-services{border-bottom-color:var(--paper-line)}
.section-paper .image-note,.section-paper .image-disclaimer,.section-paper .project-meta,.section-paper .social-pending,.section-paper .area-note{color:#76786e}
.section-paper .partner-note{color:var(--ink-soft)}
.section-paper .form-card{background:#fbfaf7;border-color:var(--paper-line)}
.section-paper input,.section-paper select,.section-paper textarea{background:#fbfaf7;border-color:#c3bdb0;color:var(--ink)}
.section-paper input:hover,.section-paper select:hover,.section-paper textarea:hover{border-color:var(--ink-soft)}
.section-paper label,.section-paper .form-progress .current{color:var(--ink)}
.section-paper .form-progress{border-top-color:var(--paper-line);color:#7b7d72}
.section-paper .demo-form-note{background:var(--paper-2);color:var(--ink-soft);border-left-color:#b8b2a4}
.section-paper .contact-phone,.section-paper .contact-list dd a{color:var(--ink)}
.section-paper .zoom-hint{background:#08090bcc;color:var(--paper);border-color:#ffffff30}

/* ---- Colour cards ----
   Real chips Jordan carried onto jobs, with the names and codes read off the
   cards in his own photographs. This is the colour on the site: it belongs to
   a painter, so it is the paint. */
.palette{padding:86px 0 90px}
.palette .section-heading>p:last-child{max-width:600px}
.swatch-row{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.swatch{display:flex;flex-direction:column}
.swatch .chip{display:block;aspect-ratio:.72;background:var(--c);box-shadow:inset 0 0 0 1px #0000001f}
.swatch b{font-weight:400;font-family:var(--serif);font-size:1.0625rem;letter-spacing:-.01em;margin-top:15px}
.swatch i{font-style:normal;font-size:.6875rem;letter-spacing:.14em;margin-top:5px;opacity:.72}
.palette-note{margin-top:30px;font-size:.75rem;line-height:1.7;max-width:640px}
.palette-proof{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:46px;max-width:620px}
.palette-proof figure{margin:0}
.palette-proof img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--paper-2)}
.palette-proof figcaption{font-size:.75rem;padding-top:10px;line-height:1.5}
@media(max-width:980px){.swatch-row{grid-template-columns:repeat(3,1fr);gap:22px}}
@media(max-width:560px){.palette{padding:58px 0 62px}.swatch-row{grid-template-columns:repeat(2,1fr);gap:18px}.swatch b{font-size:1rem}.palette-proof{grid-template-columns:1fr;max-width:none}}


/* ---- Colour match ----
   The card stands flush against the photo of the wall it went on, the way it
   was held up on site. Chip colours are sampled from Jordan's own photographs
   of the cards, so they are a guide, not a reproduction. */
.match-list{display:grid;gap:22px;margin-top:42px}
.match{display:grid;grid-template-columns:168px minmax(0,1fr);align-items:stretch;background:var(--surface-3)}
.match-chip{background:var(--c);display:flex;flex-direction:column;justify-content:flex-end;padding:20px 18px;color:#101113;min-height:150px}
.match-chip.on-dark{color:#f3f0e9}
.match-chip b{font-weight:400;font-family:var(--serif);font-size:1.15rem;line-height:1.2}
.match-chip i{font-style:normal;font-size:.6875rem;letter-spacing:.14em;margin-top:6px;opacity:.75}
.match-photo{position:relative;overflow:hidden;min-height:150px}
.match-photo img{width:100%;height:100%;object-fit:cover;display:block}
.match-caption{position:absolute;left:0;bottom:0;right:0;padding:26px 18px 14px;background:linear-gradient(transparent,#08090bd9);color:var(--pearl);font-size:.8125rem}
.match-aside{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.match-aside h3{font-size:1.15rem;margin-bottom:6px}
.match-aside>p{font-size:.875rem;color:var(--muted);max-width:620px}
.match-chips{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:18px}
.match-chips li{display:flex;align-items:center;gap:12px;font-size:.875rem}
.match-chips span{width:42px;height:54px;background:var(--c);flex-shrink:0;box-shadow:inset 0 0 0 1px #ffffff1f}
.match-chips i{font-style:normal;display:block;font-size:.6875rem;letter-spacing:.13em;color:var(--muted);margin-top:3px}
@media(max-width:700px){.match{grid-template-columns:1fr}.match-chip{min-height:0;flex-direction:row;align-items:baseline;gap:14px;padding:14px 16px}.match-chip i{margin-top:0}.match-photo{aspect-ratio:4/3}}

/* ---- A painter, first ----
   Full-bleed scroll-scrubbed clip behind the introduction. The source is
   720x1280, so covering a wide viewport upscales it; the scrim both carries the
   text and hides most of that softness. Note the sticky element clips itself —
   putting overflow on an ANCESTOR would break the pin. */
.pour{background:var(--ink);color:var(--pearl);position:relative}
.pour-track{height:calc(200svh - var(--header-h))}
.pour-sticky{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));min-height:560px;overflow:hidden;display:flex;align-items:center}
.pour-media{position:absolute;inset:0}
.pour-media video,.pour-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pour-media img{z-index:1}
.pour-media.is-live .pour-start{opacity:0}
.pour-scrim{position:absolute;inset:0;z-index:2;opacity:calc(1 - var(--pour-n,0) * .6);background:linear-gradient(90deg,#08090bd9,#08090bb8 40%,#08090b75 62%,#08090b2e 80%,#08090b12),linear-gradient(0deg,#08090b52,transparent 40%)}
.pour-copy{position:relative;z-index:3;max-width:620px;text-shadow:0 1px 2px #08090b8c,0 2px 22px #08090bbf,0 0 44px #08090b80}.pour-copy>*{-webkit-mask-image:linear-gradient(to top,#000 calc(100% - var(--reveal,0%) * 1.25),transparent calc(125% - var(--reveal,0%) * 1.25));mask-image:linear-gradient(to top,#000 calc(100% - var(--reveal,0%) * 1.25),transparent calc(125% - var(--reveal,0%) * 1.25));transform:translate3d(0,var(--lift,0px),0);will-change:mask-image,transform}html.motion-off .pour-copy>*{-webkit-mask-image:none!important;mask-image:none!important;transform:none!important}
.pour-copy h2{font-size:clamp(2.5rem,5vw,4.4rem);line-height:1.04;letter-spacing:-.05em;margin:18px 0 26px}
.pour-copy .lede{color:var(--pearl);max-width:560px}.pour-copy .eyebrow{color:var(--pearl)}
.pour-copy>p:not(.eyebrow):not(.lede):not(.image-note){color:#e4e6e1;max-width:560px;margin-top:16px}
.pour-copy .image-note{color:#e6e8e3;margin-top:28px;max-width:430px;text-shadow:0 1px 2px #08090bb3,0 2px 14px #08090bd9}
.pour-rule{margin-top:30px;height:2px;background:#ffffff2e;position:relative;max-width:300px}
.pour-rule span{position:absolute;inset:0 auto 0 0;width:var(--pour,0%);background:linear-gradient(90deg,#b6bac0,#fff);box-shadow:0 0 12px #ffffff55}
html.motion-off .pour-track,html.motion-off .pour-sticky{height:auto}
html.motion-off .pour-sticky{position:relative;padding:90px 0;min-height:0}
html.motion-off .pour-media{position:absolute}
@media(prefers-reduced-motion:reduce){.pour-track,.pour-sticky{height:auto}.pour-sticky{position:relative;padding:90px 0;min-height:0}.pour-copy>*{-webkit-mask-image:none!important;mask-image:none!important;transform:none!important}.pour-scrim{opacity:1}}
@media(max-width:980px){.pour-track{height:calc(185svh - var(--header-h))}.pour-scrim{background:linear-gradient(90deg,#08090bf5,#08090be0 55%,#08090b99),linear-gradient(0deg,#08090b8c,transparent 50%)}}
@media(max-width:560px){.pour-sticky{min-height:520px}.pour-copy h2{font-size:clamp(2.3rem,9vw,3.1rem)}.pour-copy .lede{font-size:1rem}}

.pour-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:32px}
.pour-actions .phone-link{font-size:1.45rem}
@media(max-width:560px){.pour-actions{gap:18px}.pour-actions .phone-link{font-size:1.25rem}}

/* ---- About ----
   Moved down from the pour section so the page shows the work before it
   talks about itself. Photo sits left on desktop, after the copy on mobile
   (and in reading order). */
.about{padding:110px 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8%}
.about-photo{margin:0;position:relative;order:-1}
.about-photo img{position:relative;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.about-photo figcaption{position:relative;text-align:right;font-size:.75rem;padding:14px 20px 0 0}
.about-copy h2{margin:18px 0 25px;font-size:clamp(2.4rem,3.7vw,3.8rem)}
.about-lede{font-size:1.125rem;line-height:1.65;max-width:520px;margin:0 0 34px}
.about-points{display:grid;grid-template-columns:1fr 1fr;gap:34px;border-top:1px solid var(--paper-line);padding-top:30px}
.about-points h3{font-size:1.2rem;margin:0 0 10px}
.about-points p{margin:0;font-size:.9375rem;line-height:1.7}
@media(max-width:980px){.about{padding:80px 0}.about-grid{gap:5%}.about-points{grid-template-columns:1fr;gap:22px}}
@media(max-width:780px){.about{padding:60px 0}.about-grid{grid-template-columns:1fr;gap:35px}.about-photo{order:0}}

/* ---- Employees Only ----
   The door to /admin. Quiet on purpose: customers can ignore it, Jordan can
   always find it. The dashboard itself is password-protected. */
.footer-base{display:flex;justify-content:flex-end;border-top:1px solid var(--line);padding:14px 0 18px}
.employees-link{display:inline-flex;align-items:center;gap:8px;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pewter);border:1px solid var(--line);padding:8px 13px;transition:color .2s,border-color .2s}
.employees-link:hover,.employees-link:focus-visible{color:var(--platinum);border-color:var(--pewter)}
.employees-link svg{flex-shrink:0}
@media(max-width:780px){.footer-base{justify-content:center}}

/* ---- Painting page: local section and FAQ ----
   The page's text-heavy sections, on paper so they read easily and break up
   an otherwise all-dark page. Headings stay plain ink here: the sage accent
   used for <em> on paper is below 3:1 (see the open contrast question). */
.local{padding:90px 0}
.local h2,.faq-2col h2{font-size:clamp(2rem,3.2vw,3rem);margin-top:14px}
.local-copy .lede{font-size:1.125rem;line-height:1.65;margin:0 0 18px;max-width:600px}
.local-copy p{max-width:600px;line-height:1.75}
.local-copy .text-link{display:inline-flex;gap:8px;margin-top:14px}
.project-head p+p{margin-top:12px}
.faq-2col .faq-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:6%;border-top:0}
.faq-2col .faq-item{border-bottom:0;border-top:1px solid var(--paper-line)}
.section-paper .faq-item p{color:var(--ink-soft)}
@media(max-width:780px){.local{padding:60px 0}.faq-2col .faq-grid{grid-template-columns:1fr}}
/* Links inside running text: a plain underline, not the standalone arrow-link. */
.inline-link{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:currentColor;transition:text-decoration-color .2s}
.project-head .inline-link{color:var(--pearl)}
.section-paper .inline-link{color:var(--ink)}
.inline-link:hover{text-decoration-thickness:2px}

/* ---- Our Work: project notes ----
   Plain, dated descriptions of every project on the page, straight from the
   project records. Also the most quotable text on the site for search and AI
   answers, so keep them factual. */
.project-notes .notes-intro{max-width:620px;margin-top:18px}
.project-notes .project-date{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:#5d6157;margin:8px 0 0}
.project-notes .faq-item h3{margin:0}
.faq-item p{overflow-wrap:anywhere}

/* Before/after slider: the frame handles pointer and touch dragging (app.js),
   so the invisible range input stops intercepting touches - it stays for the
   keyboard and screen readers. No text selection or iOS image callout while
   dragging. */
.ba-range{pointer-events:none}
.ba-frame{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* Paint pour stills. While the clip loads, the placeholder (and the video's
   own poster) is the FIRST frame - the white room the scrub starts from - so
   nothing flips from blue back to white when the video takes over. The
   finished blue room is only for motion off / reduced motion, where the clip
   never plays; it is lazy and display:none otherwise, so it costs nothing. */
.pour-media .pour-end{display:none}
html.motion-off .pour-media .pour-end{display:block}
html.motion-off .pour-media .pour-start{display:none}
@media(prefers-reduced-motion:reduce){.pour-media .pour-end{display:block}.pour-media .pour-start{display:none}}

/* ---- Homepage work section: one before/after, told once ----
   Slider on the left; the title at the top of the right column and the story
   at the bottom, aligned to the slider's edges; one link, at the end. On
   phones it stacks: title, slider, story. */
.work-feature{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);grid-template-areas:"slider head" "slider copy";grid-template-rows:auto 1fr;column-gap:7%;row-gap:30px}
.work-feature .work-head{grid-area:head}
.work-feature .ba-slider{grid-area:slider;max-width:none}
.work-feature .work-copy{grid-area:copy;align-self:end}
.work-head h2{margin-top:15px;font-size:clamp(2.5rem,4vw,3.7rem)}
.work-copy h3{font-size:clamp(1.8rem,2.8vw,2.5rem);margin:14px 0 16px}
.work-copy>p:not(.eyebrow){color:var(--muted);max-width:440px}
.work-facts{display:flex;flex-wrap:wrap;margin:26px 0 30px;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.work-facts>div{padding:14px 22px 14px 0;margin-right:22px;border-right:1px solid var(--line)}
.work-facts>div:last-child{border-right:0;margin-right:0;padding-right:0}
.work-facts dt{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pewter);margin:0 0 5px}
.work-facts dd{margin:0;font-size:.9375rem;color:var(--pearl)}
.work-feature .ba-slider figcaption{display:flex;align-items:center;gap:10px;letter-spacing:.14em;text-transform:uppercase;font-size:.6875rem;color:var(--platinum)}
@media(max-width:980px){.work-feature{grid-template-columns:1fr;grid-template-areas:"head" "slider" "copy";grid-template-rows:auto;row-gap:26px}.work-feature .ba-slider{max-width:560px}.work-feature .work-copy{align-self:start}}
@media(max-width:560px){.work-head h2{font-size:2.65rem}.work-facts{display:block}.work-facts>div{border-right:0;margin-right:0;padding:12px 0}.work-facts>div+div{border-top:1px solid var(--line)}}

/* =====================================================================
   CLIENT REDESIGN — September 2026
   The owner rejected the animated homepage and supplied a mockup of
   exactly what he wants: static, editorial, cream and black with a bronze
   accent. Nothing on the site moves on scroll any more. Hovers change
   color only - nothing slides. The previous design is archived in
   archive/2026-09-25-before-client-redesign/.
   ===================================================================== */
/* Cormorant Garamond, one variable-weight file (latin) straight from Google's
   font CDN and preloaded in each page's head - no render-blocking font
   stylesheet. Covers the 500 and 600 weights the site uses. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500 600;font-display:swap;src:url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtKky2F7g.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--cream:#f6f2ea;--bronze:#7d5f37;--bronze-light:#c9a878;--serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;--display:var(--serif)}

/* Header, site-wide, as in the mockup: plain uppercase nav and a black
   estimate button with a light border. (.site-header raises these above the
   generic .button rules further down.) */
.desktop-nav{gap:28px}
.desktop-nav a{font-size:.8rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.desktop-nav a::after{transition:none}
.home .desktop-nav a.active::after{right:100%}
.site-header .header-estimate{background:#0c0c0d;color:#fff;border:1.5px solid #dcdad5;border-radius:1px;box-shadow:0 0 0 1px #000000a6;font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;min-height:46px;padding:0 24px}
.site-header .header-estimate:hover{background:#1c1d20;color:#fff;border-color:#fff}
@media(max-width:1180px){.desktop-nav{gap:18px}.desktop-nav a{letter-spacing:.03em}.site-header .header-estimate{padding:0 16px}}
/* Homepage: the header sits over the hero photo - clear at the top, solid once scrolled (app.js) */
.home .site-header{background:transparent;box-shadow:none}
.home .site-header.is-solid,.home .site-header:has(.mobile-nav:not([hidden])){background:var(--ink);box-shadow:0 1px 0 #ffffff16}

/* Shared pieces */
.h-section{padding:90px 0;border-top:0;position:relative}
.h-cream{background:var(--cream);color:var(--ink)}
.h-light{background:#fbf9f5;color:var(--ink)}
.h-dark{background:#050506 url('assets/brand/obsidian-plaster.webp') center/cover;color:var(--pearl)}
.h-eyebrow{font:500 .72rem/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;margin:0 0 16px;color:#d9d3c7}
.h-bronze{color:var(--bronze)}
.h-title{font-family:var(--display);font-weight:500;font-size:clamp(2.3rem,3.7vw,3.4rem);line-height:1.06;letter-spacing:0;margin:0;color:inherit}
.h-center{text-align:center}
.h-rule-label{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 0 12px;font:500 .72rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
.h-rule-label::before,.h-rule-label::after{content:'';width:min(120px,14vw);height:1px;background:#9a958b}
.h-sep{opacity:.55;margin:0 2px}
.h-btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:50px;padding:14px 28px;font:700 .8rem/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;border:1px solid transparent;border-radius:1px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.h-arrow{flex-shrink:0}
/* Brushed silver: light top, grey foot, a thin dark outline */
.h-btn-silver{color:#141414;background:linear-gradient(180deg,#fdfdfb 0%,#ecebe7 40%,#dad9d4 72%,#c6c4be 100%);border-color:#f7f6f2;box-shadow:0 0 0 1px #0000004d,inset 0 -1px 0 #0000001a}
.h-btn-silver:hover{background:linear-gradient(180deg,#fff 0%,#f6f5f2 40%,#e7e6e2 72%,#d6d4ce 100%);border-color:#fff}
.h-cream .h-btn-silver,.h-light .h-btn-silver{box-shadow:0 0 0 1px #7a766e,inset 0 -1px 0 #0000001a}
.h-btn-dark{color:#fff;background:#0c0c0d;border:1.5px solid #dcdad5;box-shadow:0 0 0 1px #000000a6}
.h-btn-dark:hover{background:#1c1d20;border-color:#fff}
.h-icon{flex-shrink:0}

/* 1. Hero - a house at dusk (licensed stock photo, tools/build-hero.py) sits
   on the right at its own proportions and fades into the dark left, which
   carries the headline, as in the mockup. Phones get a 3:4 crop, full-bleed,
   with the text at the foot. */
.h-hero{position:relative;display:flex;align-items:center;min-height:clamp(560px,43vw,720px);overflow:hidden;background:#07080a;color:var(--pearl);margin-top:calc(-1 * var(--header-h));padding:calc(var(--header-h) + 36px) 0 52px;border-top:0}
.h-hero-image{position:absolute;top:0;right:0;bottom:0;height:100%;width:auto;min-width:62%;max-width:none;object-fit:cover;object-position:50% 40%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.h-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#07080af2 0%,#07080ad9 30%,#07080a73 46%,#07080a1a 62%,transparent 76%),linear-gradient(180deg,#07080aa6 0,transparent 24%),linear-gradient(0deg,#07080a80 0,transparent 26%)}
.h-hero-copy{position:relative;z-index:1}
.h-hero h1{margin:0 0 20px;font:inherit;color:inherit}
/* The H1 carries the search terms in its first line (the small eyebrow) and
   the mockup's statement in its second. */
.h-hero h1 .h-eyebrow{display:block}
.h-hero-title{display:block;font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(2.6rem,4.3vw,4.1rem);line-height:1;color:#fff}
.h-hero-lede{max-width:445px;font-size:1.1rem;line-height:1.55;color:#f0ede7;margin:0 0 30px}
.h-actions{display:flex;flex-wrap:wrap;gap:16px}
.h-hero-area{display:flex;align-items:center;gap:12px;margin:30px 0 0;font:500 .74rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#f0ede7}

/* 2. Services */
.h-services{padding:72px 0 84px}
.h-service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:42px}
.h-service{display:flex;flex-direction:column;background:#0b0b0c;color:var(--pearl)}
.h-service-media{aspect-ratio:702/321;overflow:hidden;background:#1a1c21}
.h-service-media picture{display:block;height:100%}
.h-service-media img{width:100%;height:100%;object-fit:cover;display:block}
.h-service-panel{position:relative;flex:1;padding:22px 22px 24px}
.h-service-panel h3{font:600 .8rem/1.25 var(--sans);letter-spacing:.22em;text-transform:uppercase;margin:0 0 12px;color:#fff}
.h-service-panel p{margin:0;padding-right:36px;font-size:.84rem;line-height:1.75;color:#cfcac0}
.h-service-arrow{position:absolute;right:22px;bottom:20px;font-size:1.3rem;line-height:1;color:#fff}
.h-service:hover .h-service-panel h3,.h-service:hover .h-service-arrow{color:var(--bronze-light)}
.h-service:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

/* 3. Why Jordan James - one compact band, as in the mockup: heading, a
   rule, the statement over four icons, and the chrome monogram at the right
   edge. On narrower screens the monogram stays, beside the heading. */
.h-why{position:relative;overflow:hidden;padding:0;background:linear-gradient(118deg,transparent 8%,#ffffff0d 17%,transparent 27%,transparent 46%,#ffffff0a 56%,transparent 65%,transparent 76%,#ffffff0d 86%,transparent 95%),linear-gradient(90deg,#00000066,#0000001a 50%,#00000059),#050506 url('assets/brand/obsidian-plaster.webp') center/cover}
.h-why-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,2fr) auto;grid-template-areas:"head body mark";align-items:center;min-height:224px}
.h-why-head{grid-area:head;align-self:stretch;display:flex;flex-direction:column;justify-content:center;margin:20px 0;padding:10px 40px 10px 0;border-right:1px solid #ffffff3d}
.h-why-head .h-eyebrow{color:#d8cdb8;margin-bottom:12px}
.h-why-head .h-title{font-size:clamp(2.3rem,3.3vw,3.2rem);line-height:1.02}
.h-why-body{grid-area:body;padding:26px 28px 26px 40px}
.h-why-lede{margin:0 0 20px;font-size:1.04rem;line-height:1.55;color:#f1eee8}
.h-why-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.h-why-list li{display:flex;flex-direction:column;align-items:center;gap:12px;padding:4px 8px;text-align:center;font:500 .7rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#f1eee8}
.h-why-list li+li{border-left:1px solid #ffffff3d}
.h-why-list .h-icon{width:42px;height:42px;color:#fff}
.h-why-mark{grid-area:mark;justify-self:end;display:block;width:auto;max-width:none;height:204px;margin:10px 0;position:relative;left:28px;filter:drop-shadow(0 12px 22px #000000d9)}
@media(max-width:1100px){.h-why-grid{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head mark" "body body";min-height:0}.h-why-head{border-right:0;margin:0;padding:44px 0 26px}.h-why-mark{height:150px;margin:26px 0 0;left:0}.h-why-body{padding:24px 0 44px;border-top:1px solid #ffffff3d}}
@media(max-width:700px){.h-why-head{padding:40px 0 22px}.h-why-head .h-title{font-size:2.05rem}.h-why-mark{height:112px;margin-top:34px}.h-why-lede br{display:none}.h-why-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}.h-why-list li:nth-child(3){border-left:0}}

/* 4. Featured work */
.h-featured{padding:64px 0}
.h-featured-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2.5fr);gap:44px;align-items:center}
.h-featured-copy .h-title{margin:4px 0 16px}
.h-featured-copy p:not(.h-eyebrow){margin:0 0 28px;max-width:300px;color:var(--ink-soft)}
.h-pairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.h-pair{margin:0}
.h-pair-frame{position:relative;display:grid;grid-template-columns:1fr 1fr;aspect-ratio:3/2;overflow:hidden;background:#dcd6ca}
.h-pair-frame img{width:100%;height:100%;object-fit:cover;display:block}
.h-pair-after{border-left:2px solid var(--cream)}
.h-tag{position:absolute;top:12px;left:0;width:50%;text-align:center;font:600 .66rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 1px 2px #000000b3,0 0 14px #00000080}
.h-tag-after{left:50%}
.h-pair figcaption{margin-top:14px;text-align:center;font:600 .68rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}

/* 5. About */
.h-about{padding:0;background:var(--cream);color:var(--ink)}
.h-about-grid{display:grid;grid-template-columns:1fr 1.45fr .95fr;align-items:stretch;min-height:340px}
.h-about-media{position:relative;overflow:hidden;min-height:320px;background:#dcd6ca}
.h-about-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h-about-fade img{object-position:50% 72%}
.h-about-brand img{object-position:62% 50%}
.h-about-copy{align-self:center;padding:56px 50px}
.h-about-copy .h-title{margin:4px 0 18px;font-size:clamp(2.2rem,3.1vw,2.9rem)}
.h-about-copy p:not(.h-eyebrow){margin:0;line-height:1.75;color:var(--ink-soft)}

/* 6. Process */
.h-process{padding:78px 0 90px;border-top:1px solid #e4ddd0}
.h-steps{list-style:none;margin:50px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.h-step{position:relative}
.h-step+.h-step::before{content:'\203A';position:absolute;left:-28px;top:4px;font-size:1.9rem;line-height:1;color:#9a958b}
.h-step-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.h-step-num{font-family:var(--display);font-size:2.2rem;line-height:1;color:var(--ink)}
.h-step .h-icon{color:var(--ink)}
.h-step h3{font:600 .74rem/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;margin:0;color:var(--ink)}
.h-step p{margin:0;font-size:.95rem;line-height:1.6;color:var(--ink-soft)}

/* 7. Reviews */
.h-reviews{padding:64px 0;border-top:1px solid #ebe5da}
.h-reviews-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:44px;align-items:center}
.h-review-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.h-review{margin:0;background:#fff;border:1px solid #e4ddd0;padding:24px}
.h-review blockquote{margin:0 0 14px;font-size:.92rem;line-height:1.6;color:var(--ink-soft)}
.h-review figcaption{font-size:.78rem;color:var(--ink-soft)}
.h-stars{margin:0 0 12px;color:var(--bronze);letter-spacing:.2em}
.h-review-pending{grid-column:1/-1;display:flex;align-items:center;min-height:120px}
.h-review-pending p{margin:0;font-family:var(--display);font-size:1.45rem;line-height:1.35;color:var(--ink)}

/* 8. Footer, site-wide */
.site-footer.h-footer{background:#050506 url('assets/brand/obsidian-plaster.webp') center/cover;color:var(--pearl);border-top:0}
.h-footer-grid{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:center;padding:58px 0 50px}
.h-footer-grid>*+*{border-left:1px solid #ffffff26;padding-left:44px}
.h-footer-brand p{margin:16px 0 0;font:500 .64rem/1.8 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#bdb8ae}
.h-footer-cta{text-align:center;padding-right:44px}
.h-footer-title{font-family:var(--display);font-size:clamp(1.7rem,2.2vw,2.05rem);line-height:1.15;margin:0 0 6px;color:#fff}
.h-footer-cta p:not(.h-footer-title){margin:0 0 22px;color:#d9d4ca}
.h-footer-contact{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:.95rem;color:#e8e4dc}
.h-footer-contact li{display:flex;align-items:center;gap:14px;overflow-wrap:anywhere}
.h-footer-contact a{color:#f3f0e9}
.h-footer-base{display:flex;justify-content:space-between;align-items:center;gap:18px 30px;flex-wrap:wrap;border-top:1px solid #ffffff1f;padding:16px 0 20px}
.h-footer-base nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.78rem;letter-spacing:.08em}
.h-footer-base nav a{color:#bdb8ae}
.h-footer-base nav a:hover{color:#fff}

/* Responsive */
@media(max-width:1100px){.h-featured-grid,.h-reviews-grid{grid-template-columns:1fr}.h-featured-copy p:not(.h-eyebrow){max-width:none}}
@media(max-width:980px){.h-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.h-about-grid{grid-template-columns:1fr 1fr}.h-about-copy{grid-column:1/-1;order:-1;padding:60px 6%}.h-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:38px}.h-step+.h-step::before{display:none}.h-footer-grid{grid-template-columns:1fr;gap:32px}.h-footer-grid>*+*{border-left:0;padding-left:0;border-top:1px solid #ffffff26;padding-top:30px}.h-footer-cta{text-align:left;padding-right:0}}
@media(max-width:700px){.h-section{padding:62px 0}.h-pairs,.h-review-cards{grid-template-columns:1fr}.h-about{padding:0}}
@media(max-width:560px){.h-service-grid,.h-steps{grid-template-columns:1fr}.h-hero-title{font-size:2.55rem}.h-actions .h-btn{flex:1 1 100%}.h-hero-area{flex-wrap:wrap}.h-about-grid{grid-template-columns:1fr}.h-about-media{min-height:230px}.h-rule-label::before,.h-rule-label::after{width:40px}}
.h-step-num,.h-title,.h-footer-title{font-variant-numeric:lining-nums}
@media(min-width:1101px){.h-featured-grid{grid-template-columns:minmax(0,1fr) minmax(0,3.2fr);gap:40px}.h-pairs{margin-right:calc(16px - (100vw - min(1320px,88vw)) / 2)}}
.h-featured-copy .h-title{font-size:clamp(2.1rem,2.9vw,2.6rem)}
.h-service-panel p{font-size:.8rem;padding-right:30px}
/* Each divider belongs to the item after it, and the card clips it wherever
   that item starts a line - so a wrapped line never ends on a stray "|". */
.h-items{overflow:hidden}
.h-items span{position:relative;display:inline-block;margin-right:.6em}
.h-items span::before{content:'';position:absolute;left:-.46em;top:.5em;bottom:.5em;width:1px;background:currentColor;opacity:.5}

/* The owner's logo (tools/build-logo.py): side-by-side lockup in the header,
   the stacked original in the footer. Replaces the old logo-sheet sprite. */
.site-header .brand-art{background:url('assets/brand/logo-lockup.webp') left center/contain no-repeat}
.site-header .brand{width:250px;height:79px}
@media(max-width:1180px){.site-header .brand{width:222px;height:70px}}
.h-footer-logo{display:block;width:min(230px,70%)}
.h-footer-logo img{display:block;width:100%;height:auto}
@media(max-width:560px){.site-header .brand{width:176px;height:56px}}
/* Footer base row: the old footer's small-screen rules (order:3, full width,
   a 2-column grid) must not reach the new footer. Employees Only stays at the
   very bottom on every screen size, as the owner asked. */
.site-footer .h-footer-base nav{order:0;width:auto;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px 22px;text-align:left}
.h-footer-base .employees-link{order:2}
@media(max-width:700px){.h-footer-base{flex-direction:column;align-items:flex-start}}
/* Buttons site-wide, in the mockup's style: flat cream or outlined, uppercase. */
.button{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;gap:16px}
.button-silver{color:#141414;background:linear-gradient(180deg,#fdfdfb 0%,#ecebe7 40%,#dad9d4 72%,#c6c4be 100%);border-color:#f7f6f2;box-shadow:0 0 0 1px #0000004d}
.button-silver:hover{background:linear-gradient(180deg,#fff 0%,#f6f5f2 40%,#e7e6e2 72%,#d6d4ce 100%);border-color:#fff;box-shadow:0 0 0 1px #0000004d}
.section-paper .button-silver{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.section-paper .button-silver:hover{background:#2b2d31;border-color:#2b2d31}
/* No motion on hover either: the client wants nothing sliding, nudging or
   zooming. Hover feedback is color only. */
.button:hover span,.text-link:hover span,.button-silver:hover,.service-photo:hover img,.gallery-card:hover img{transform:none}
.button span,.text-link span,.service-photo img,.gallery-card img{transition:none}
/* The estimate dialog fades in; it no longer slides up. */
@keyframes dialog-fade{from{opacity:0}to{opacity:1}}
dialog[open]{animation:dialog-fade .18s ease}

/* Phones: the hero picture goes full-bleed behind the text, which sits at
   the foot so the house shows above it. */
.h-hero-image{left:0;width:100%;min-width:0;object-position:50% 50%;-webkit-mask-image:none;mask-image:none}
/* Between phone and desktop the mockup's larger logo and full nav don't fit
   on one line, so the Menu button takes over below 1020px (it used to be
   780px). Same rules as the base phone header. */
@media(min-width:781px) and (max-width:1020px){.desktop-nav,.site-header .header-estimate{display:none}.menu-toggle{display:flex;align-items:center;gap:15px;padding:12px 0;color:var(--pearl);font-size:.875rem}.menu-toggle>span:last-child{font-size:1.2rem}.mobile-nav:not([hidden]){display:flex;flex-direction:column;gap:6px;padding:10px 6% 25px;border-top:1px solid #fff2}.mobile-nav>a{padding:10px 0;font-size:1rem}.mobile-nav .button{margin-top:10px;align-self:start}}

/* About: the right-hand photo melts into the cream beside the copy, as the
   kitchen photo does in the mockup (only while the copy sits beside it). */
@media(min-width:981px){.h-about-fade{background:var(--cream)}.h-about-fade img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42%);mask-image:linear-gradient(90deg,transparent 0,#000 42%)}}
/* A faint shade across the top of each pair keeps the white labels legible on bright skies and walls. */
.h-pair-frame::after{content:'';position:absolute;inset:0 0 auto;height:30%;background:linear-gradient(180deg,#00000059,transparent);pointer-events:none}
.h-tag{z-index:1}
/* Services dropdown (site-wide): the service pages sit under Services, as the
   mockup's nav has it. It shows at once - no motion - on hover or while
   anything inside has keyboard focus, and stays readable to screen readers. */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-caret{margin-left:7px;vertical-align:2px}
.desktop-nav .nav-sub{position:absolute;top:100%;left:-22px;padding-top:18px;opacity:0;pointer-events:none;z-index:60}
.nav-drop:hover .nav-sub,.nav-drop:focus-within .nav-sub{opacity:1;pointer-events:auto}
.nav-sub-list{min-width:240px;padding:8px 0;background:#0b0b0c;border:1px solid #ffffff29;box-shadow:0 22px 44px #000000b3}
.desktop-nav .nav-sub a{display:block;padding:11px 22px;font-size:.76rem;letter-spacing:.06em;color:#e8e4dc;white-space:nowrap}
.desktop-nav .nav-sub a::after{display:none}
.desktop-nav .nav-sub a:hover,.desktop-nav .nav-sub a[aria-current]{color:#fff;background:#ffffff12}
.mobile-nav>a.mobile-sub{padding:7px 0 7px 18px;font-size:.92rem;color:#cfcac0}
.h-services-intro{max-width:640px;margin:14px auto 0;text-align:center;font-size:1rem;line-height:1.65;color:var(--ink-soft)}
.h-about-copy p:not(.h-eyebrow)+p{margin-top:14px}
.h-about-copy .inline-link{color:var(--ink)}
/* The condo room slider: landscape, and held to a size its video-frame "before" stays sharp at. */
.ba-slider.ba-wide.ba-room{max-width:880px;margin-top:6px;margin-bottom:34px}
/* Featured pairs: the caption is the link, and it covers the whole pair, so a
   tap on either photo or the title goes to where those photos live. Hover is
   color only. */
.h-pair{position:relative}
.h-pair-link{color:inherit;text-decoration:none}
.h-pair-link::after{content:'';position:absolute;inset:0;z-index:2}
.h-pair:hover .h-pair-link{color:var(--bronze);text-decoration:underline;text-underline-offset:4px}
.h-pair-link:focus-visible{outline:none}
.h-pair:has(.h-pair-link:focus-visible){outline:2px solid var(--bronze);outline-offset:4px}
/* Hero town line: Jordan's eight service areas. It wraps inside the text
   column (never across the photo), and each divider belongs to the town after
   it and is clipped at the start of a line - no stray "|" at either end. */
.h-hero-area{align-items:flex-start}
.h-hero-area .h-icon{margin-top:3px}
.h-towns{flex:1 1 0;min-width:0;max-width:560px;overflow:hidden;line-height:1.9;margin-top:-4px}
.h-towns span{position:relative;display:inline-block;margin-right:1.15em;white-space:nowrap}
.h-towns span::before{content:'';position:absolute;left:-.78em;top:.4em;bottom:.4em;width:1px;background:currentColor;opacity:.55}

/* =====================================================================
   HOMEPAGE LAYOUT (the owner's phone mockups, September 2026)
   Every screen follows his wide mockup (drawn 887px wide) - desktop too, at
   his request - except touch-screen phones, which follow the framed one
   (block below): (max-width:560px) and (pointer:coarse). Computer windows get the
   wide design at any width, because the owner reviews the site in narrow
   browser windows and calls them desktop.
   .m-only is the design's own markup and always shows; .d-only is the
   retired desktop-mockup markup, kept hidden in case he wants it back.
   ===================================================================== */
.d-only{display:none!important}

/* Services header: the owner's own words, on every size */
.h-kinds{margin:14px 0 0;text-align:center;font:600 .74rem/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--bronze)}
.h-services-head .h-services-intro{margin-top:12px}
.h-serving{display:flex;align-items:flex-start;justify-content:center;gap:10px;max-width:640px;margin:12px auto 0;font-size:.92rem;line-height:1.55;color:var(--ink-soft);text-align:center}
.h-serving .h-icon{margin-top:3px}

/* Our Work: a link section - the job photos live on /work, not here */
.h-work-link{max-width:720px;text-align:center}
.h-work-link .h-title{margin:4px 0 16px}
.h-work-link p:not(.h-eyebrow){margin:0 auto 28px;max-width:560px;color:var(--ink-soft);line-height:1.7}

@media(max-width:1020px){
  /* Header as drawn: the lockup and Menu grow with the screen (every page) */
  .site-header .brand{width:calc(78.7px + 24.9vw);height:calc(24.9px + 7.87vw)}
  .menu-toggle{font-size:calc(9.3px + 1.21vw)}
  .menu-toggle>span:last-child{font-size:1.35em}
  .h-work-link{text-align:left}
  .h-work-link p:not(.h-eyebrow){margin-left:0}
}

/* Sizes run in a straight line from a 390px phone (readable sizes) to his
   mockup's own measurements at 887px, the width it is drawn at:
   calc(a + b*vw) meets both points; from 1021px they hold (block below). */
@media all{

  /* Header solid, hero below it: his phone mockup's house filling it, the
     text over the dark planting on the left */
  .home .site-header{background:var(--ink)}
  .h-hero{margin-top:0;min-height:0;align-items:center;padding:calc(6.5px + 6.04vw) 0 calc(29px + .7vw)}
  .h-hero-image{object-position:62% 50%}
  .h-hero-shade{background:linear-gradient(90deg,#07080ad9 0%,#07080aa6 38%,#07080a33 60%,transparent 74%)}
  .h-hero h1{margin:0}
  .h-hero h1 .h-eyebrow{font-size:calc(5.6px + .946vw);letter-spacing:.32em;margin:0 0 calc(4px + 2vw)}
  .h-hero-title{font-size:calc(5.6px + 5.57vw);line-height:1.04;text-transform:none;letter-spacing:0}
  .h-hero-mobile .h-hero-lede{font-size:calc(8.4px + 1.19vw);line-height:1.45;margin:calc(14.1px + 2.54vw) 0 0;max-width:calc(148px + 26.2vw);color:#f2efe9}
  .h-btn-cream{gap:.9em;margin-top:calc(22.6px + 1.9vw);background:#f6f2ea;color:#141414;border-color:#f6f2ea;letter-spacing:.28em;padding:1.07em 1.4em;min-height:42px;font-size:calc(6.15px + .885vw)}
  .h-btn-cream .h-arrow{width:2.2em}
  .h-btn-cream:hover{background:#fff;border-color:#fff}
  .h-hero-mobile .h-kinds{text-align:left;margin:calc(16.6px + 1.9vw) 0 0;max-width:calc(148px + 26.2vw);font-size:calc(5.6px + .946vw);letter-spacing:.24em;color:var(--bronze-light);text-wrap:balance}
  .h-hero-mobile .h-serving{justify-content:flex-start;text-align:left;margin:calc(23px + 1.27vw) 0 0;max-width:calc(148px + 26.2vw);font-size:calc(8.6px + .83vw);line-height:1.5;color:#e2ddd3}

  /* Trust strip: one row of four with short dividers. Icon over the words
     on phones, beside them from 720px (as drawn) */
  .h-trust{background:#07080a;padding:0 max(4px,calc(9.66vw - 33.7px))}
  .h-trust-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .h-trust-list li{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:calc(10.3px + 1.2vw) 3px;text-align:center;color:#d9d4cb;font:500 calc(6.2px + .543vw)/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase}
  .h-trust-list li+li::before{content:'';position:absolute;left:0;top:26%;bottom:26%;width:1px;background:#ffffff47}
  .h-trust-list b{display:block;font-weight:700;font-size:calc(6.5px + .958vw);letter-spacing:.13em;color:#fff}
  .h-trust-list .h-icon{flex:none;width:calc(15.2px + 3.02vw);height:calc(15.2px + 3.02vw);color:#fff}

  /* Services: split cards, picture and text side by side, swapping sides
     each time, cream and black in turn. The picture's share grows from
     48% on a phone to his 61% at 887px */
  .h-services{padding:0;background:var(--cream)}
  .h-services .wrap{width:100%}
  .h-service-grid{grid-template-columns:minmax(0,1fr);gap:0;margin-top:0}
  .h-service{flex-direction:row;background:var(--cream);color:var(--ink)}
  .h-service+.h-service{border-top:2px solid #faf8f3}
  .h-service:nth-child(even){flex-direction:row-reverse;background:#0b0b0c;color:var(--pearl)}
  .h-service-media{position:relative;flex:0 0 calc(71.2vw - 90.7px);aspect-ratio:auto}
  .h-service-media picture{position:absolute;inset:0;height:auto}
  .h-service-media img{position:absolute;inset:0;width:100%;height:100%}
  .h-service:nth-child(1) .h-service-media img{object-position:35% 50%}
  .h-service:nth-child(2) .h-service-media img{object-position:28% 50%}
  .h-service:nth-child(3) .h-service-media img{object-position:34% 50%}
  .h-service:nth-child(4) .h-service-media img{object-position:8% 50%}
  .h-service-panel{flex:1 1 auto;min-width:0;padding:calc(15px + 1.8vw) calc(1.4px + 3.22vw) calc(19.3px + 1.2vw) calc(4.23vw - .5px)}
  .h-service-num{display:flex;align-items:center;gap:.45em;font:500 calc(9.5px + 2.76vw)/1 var(--display);font-variant-numeric:lining-nums;opacity:.72}
  .h-service-num::after{content:'';width:calc(11.3vw - 10px);height:1px;background:currentColor;opacity:.6}
  .h-service-panel h3{width:min-content;font:500 calc(2.8px + 4.87vw)/1 var(--display);letter-spacing:.01em;text-transform:uppercase;margin:.42em 0 .84em;color:inherit}
  .h-service:nth-child(4) .h-service-panel h3{font-size:min(calc(2.8px + 4.87vw),calc(11px + 2.75vw))}
  .h-service:hover .h-service-panel h3{color:inherit}
  .h-service-panel p.h-items{font-size:calc(9.8px + .976vw);line-height:1.35;color:inherit;padding-right:0}
  .h-items span{margin-right:.95em}
  .h-items span::before{content:'\2022';width:auto;background:none;top:0;bottom:auto;left:-.8em;opacity:.75}
  .h-service-panel .h-service-desc{margin:1.42em 0 0;padding-right:0;font-size:calc(10.1px + .664vw);line-height:1.4;color:inherit;opacity:.85}
  .h-service-cta{display:inline-flex;align-items:center;gap:.9em;margin-top:3em;padding:1.2em 1.25em;background:#0b0b0c;color:#fff;font:600 calc(5.2px + .87vw)/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;line-height:1.3;max-width:100%}
  .h-service-cta .h-arrow{width:2em;flex:none}
  .h-service:nth-child(even) .h-service-cta{background:#3a3b3f}
}
@media(min-width:720px){
  .h-trust-list li{flex-direction:row;justify-content:center;gap:calc(4px + 1.35vw);text-align:left}
}

/* Desktop (1021px and up): the same wide design, sizes held where they reach
   at 1020px; the hero keeps close to the house picture's own shape, and the
   trust row and the cards stay in a centred column so nothing stretches thin */
@media(min-width:1021px){
  .h-hero{min-height:clamp(470px,44vw,760px);padding:68px 0 36px}
  .h-hero h1 .h-eyebrow{font-size:15.3px;margin-bottom:24px}
  .h-hero-title{font-size:62.4px}
  .h-hero-mobile .h-hero-lede{font-size:20.5px;margin-top:40px;max-width:415px}
  .h-btn-cream{margin-top:42px;font-size:15.2px}
  .h-hero-mobile .h-kinds{font-size:15.3px;margin-top:36px}
}
/* The kinds line breaks in two (balanced) inside the text column until there
   is room for it left of the lit house; from 1100px it is one line */
@media(min-width:1100px){
  .h-hero-mobile .h-kinds{max-width:none}
  .h-hero-mobile .h-serving{font-size:17px;margin-top:36px;max-width:440px}
  .h-trust{padding:0 24px}
  .h-trust-list{max-width:1180px;margin:0 auto}
  .h-trust-list li{padding:22.5px 3px;font-size:11.7px;gap:17.8px}
  .h-trust-list b{font-size:16.3px}
  .h-trust-list .h-icon{width:46px;height:46px}
  .h-service-grid{max-width:1440px;margin:0 auto}
  .h-service-media{flex-basis:61%}
  .h-service-panel{padding:44px 48px 40px 56px}
  .h-service-num{font-size:37.7px}
  .h-service-num::after{width:105px}
  .h-service-panel h3{font-size:52.5px}
  .h-service:nth-child(4) .h-service-panel h3{font-size:min(52.5px,calc(5.1vw - 13.6px))}
  .h-service-panel p.h-items{font-size:19.8px}
  .h-service-panel .h-service-desc{font-size:16.9px}
  .h-service-cta{font-size:14.1px}
}

/* Phones (touch screens up to 560px): his phone mockup, the one drawn in a phone frame
   (docs/client-mockup-mobile-2026-09-v1.webp) - a 2 x 2 trust strip, and
   each card stacked: its picture band full width on top, then the number,
   the title and the items on one line each, the line of description and
   the button. Everything else gets the wide mockup's split cards. */
@media (max-width:560px) and (pointer:coarse){
  .h-hero{padding:24px 0 24px}
  .h-hero-mobile .h-hero-lede{line-height:1.38}
  .h-btn-cream{margin-top:32px;min-height:38px;padding:.95em 1.3em}
  .h-trust{padding:2px 16px 4px}
  .h-trust-list{grid-template-columns:1fr 1fr}
  .h-trust-list li{flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;padding:13px 4px 13px 10px;text-align:left;font-size:.54rem;letter-spacing:.14em}
  .h-trust-list li+li::before{content:none}
  .h-trust-list li:nth-child(odd){border-right:1px solid #ffffff38}
  .h-trust-list li:nth-child(-n+2){border-bottom:1px solid #ffffff38}
  .h-trust-list b{font-size:.7rem;letter-spacing:.16em}
  .h-trust-list .h-icon{width:30px;height:30px}

  .h-service,.h-service:nth-child(even){flex-direction:column}
  .h-service+.h-service{border-top:0}
  .h-service-media{flex:none;position:static}
  .h-service-media picture{position:static;display:block;height:auto}
  .h-service-media img{position:static;width:100%;height:auto}
  .h-service-panel{padding:18px 24px 28px}
  .h-service-num{font-size:1.35rem;gap:12px}
  .h-service-num::after{width:72px}
  .h-service-panel h3,.h-service:nth-child(4) .h-service-panel h3{width:auto;font-size:clamp(1.3rem,6.1vw,1.8rem);line-height:1.05;margin:8px 0 20px;white-space:nowrap}
  .h-items br{display:none}
  .h-service-panel p.h-items{font-size:clamp(.74rem,3.3vw,.9rem);line-height:1.5}
  .h-service-panel .h-service-desc{font-size:clamp(.74rem,3.25vw,.88rem);line-height:1.45;margin-top:16px}
  .h-service-cta{margin-top:32px;padding:12px 20px;font-size:clamp(.56rem,2.45vw,.66rem);letter-spacing:.2em;white-space:nowrap}
}
@media (max-width:380px) and (pointer:coarse){
  .h-trust-list li{gap:9px;padding-left:6px;letter-spacing:.08em}
  .h-trust-list b{letter-spacing:.1em}
  .h-trust-list .h-icon{width:28px;height:28px}
}
/* A computer window this narrow shows the wide design: its one-row strip
   needs tighter letters to fit */
@media (max-width:380px) and (pointer:fine){
  .h-trust-list li{letter-spacing:.03em;padding-inline:1px}
  .h-trust-list b{letter-spacing:.08em}
}