:root{
  --espresso:#171310; --ink:#221D18; --ink2:#2B241E;
  --plaster:#E8E7E0; --plaster2:#F3F2ED;
  --sage:#7C8B72; --brass:#C39A5E; --graphite:#3A3631;
  --rule-d:rgba(232,231,224,.15); --rule-l:rgba(23,19,16,.13);
}
*{box-sizing:border-box}
body{margin:0;background:var(--plaster);color:var(--graphite);
  font-family:"Instrument Sans",-apple-system,"Helvetica Neue",sans-serif;
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--brass);text-decoration:none} a:hover{color:#D8B279}
h1,h2,h3{margin:0;font-family:"Bricolage Grotesque","Helvetica Neue",sans-serif;font-weight:600;letter-spacing:-.02em;line-height:.94}
p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 40px}
.mono{font-family:"Martian Mono","SFMono-Regular",monospace;font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase}
.dark{background:var(--espresso);color:var(--plaster)}
.dark h1,.dark h2,.dark h3{color:var(--plaster)}
.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;height:52px;padding:0 28px;
  font-family:"Martian Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--brass);color:var(--espresso);background:var(--brass)}
.btn:hover{background:#D8B279;border-color:#D8B279;color:var(--espresso)}
.btn.ghost{background:transparent;color:var(--brass)}
.btn.ghost:hover{background:rgba(195,154,94,.12);color:var(--brass)}
/* tick rule — the measuring device, reused as every section divider */
.tick{height:15px;display:flex;align-items:flex-end;gap:0;overflow:hidden}
.tick i{display:block;width:11px;flex:0 0 11px;border-left:1px solid var(--rule-d);height:5px}
.tick i:nth-child(4n+1){height:11px}
.tick i:nth-child(12n+1){height:15px}
.tick.on-light i{border-color:var(--rule-l)}

.gwrap{position:relative}
.gfilters{display:flex;flex-direction:column;gap:14px;padding:22px 0 24px;border-top:1px solid var(--rule-d);border-bottom:1px solid var(--rule-d)}
.grow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.glab{font-family:"Martian Mono",monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
 color:rgba(232,231,224,.4);width:104px;flex:0 0 104px}
.gchip{display:inline-flex;align-items:center;height:31px;padding:0 13px;border:1px solid var(--rule-d);
 background:transparent;color:rgba(232,231,224,.7);cursor:pointer;font-family:"Martian Mono",monospace;
 font-size:9px;letter-spacing:.11em;text-transform:uppercase;border-radius:2px}
.gchip:hover{border-color:var(--brass);color:var(--plaster)}
.gchip.on{background:var(--brass);border-color:var(--brass);color:var(--espresso)}
.ggrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:26px}
.tile{position:relative;background:var(--ink);cursor:zoom-in;overflow:hidden}
.tile img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.tcap{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;
 background:linear-gradient(to top,rgba(12,10,9,.9),rgba(12,10,9,0));
 display:flex;justify-content:space-between;gap:8px;align-items:flex-end}
.tfin{font-family:"Martian Mono",monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--plaster)}
.tcon{font-family:"Martian Mono",monospace;font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);text-align:right}
.gwrap[data-c="ff"] .tile:not([data-c="ff"]){display:none}
.gwrap[data-c="eu"] .tile:not([data-c="eu"]){display:none}
.gwrap[data-r="Kitchen"] .tile:not([data-r="Kitchen"]){display:none}
.gwrap[data-r="Bathroom"] .tile:not([data-r="Bathroom"]){display:none}
.gwrap[data-f="antique-cream"] .tile:not([data-f="antique-cream"]){display:none}
.gwrap[data-f="blue-shaker"] .tile:not([data-f="blue-shaker"]){display:none}
.gwrap[data-f="cognac"] .tile:not([data-f="cognac"]){display:none}
.gwrap[data-f="dark-grain"] .tile:not([data-f="dark-grain"]){display:none}
.gwrap[data-f="dark-grey-gloss"] .tile:not([data-f="dark-grey-gloss"]){display:none}
.gwrap[data-f="espresso"] .tile:not([data-f="espresso"]){display:none}
.gwrap[data-f="glossy-white"] .tile:not([data-f="glossy-white"]){display:none}
.gwrap[data-f="light-grey"] .tile:not([data-f="light-grey"]){display:none}
.gwrap[data-f="moonshine"] .tile:not([data-f="moonshine"]){display:none}
.gwrap[data-f="oxford"] .tile:not([data-f="oxford"]){display:none}
.gwrap[data-f="pebble-grey"] .tile:not([data-f="pebble-grey"]){display:none}
.gwrap[data-f="pebble-stone"] .tile:not([data-f="pebble-stone"]){display:none}
.gwrap[data-f="pigeon-white"] .tile:not([data-f="pigeon-white"]){display:none}
.gwrap[data-f="pure-white"] .tile:not([data-f="pure-white"]){display:none}
.gwrap[data-f="saddle"] .tile:not([data-f="saddle"]){display:none}
.gwrap[data-f="sage-green"] .tile:not([data-f="sage-green"]){display:none}
.gwrap[data-f="shaker-cinder"] .tile:not([data-f="shaker-cinder"]){display:none}
.gwrap[data-f="shaker-cream"] .tile:not([data-f="shaker-cream"]){display:none}
.gwrap[data-f="shaker-dove"] .tile:not([data-f="shaker-dove"]){display:none}
.gwrap[data-f="shaker-honey"] .tile:not([data-f="shaker-honey"]){display:none}
.gwrap[data-f="slim-dove-white"] .tile:not([data-f="slim-dove-white"]){display:none}
.gwrap[data-f="slim-white-oak"] .tile:not([data-f="slim-white-oak"]){display:none}
.gwrap[data-f="torrance-white"] .tile:not([data-f="torrance-white"]){display:none}
.gwrap[data-f="white-oak"] .tile:not([data-f="white-oak"]){display:none}

/* The sample rack that closes the hero. Sixteen doors across, cropped by the
   viewport on both sides so it reads as a rack that continues. The labels only
   appear on hover, so the wall of colour stays uninterrupted at rest. */
/* The headline was a fixed 100px, which pushed the rack off the first screen on
   anything shorter than a desktop monitor. */
section.dark h1{font-size:clamp(46px,6.4vw,84px)}
/* The rack now sits inside .wrap so it can be reordered against the spec table on
   mobile, and breaks back out to the viewport edges from there. */
.rack{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:2px;
 background:var(--rule-d);border-top:1px solid var(--rule-d);margin-top:20px;
 margin-inline:calc(50% - 50vw);width:100vw}
.h-row{display:flex;gap:64px;align-items:flex-start}
.h-main{flex:1;min-width:0}
.h-spec{flex:0 0 290px;padding-top:10px}

/* On a phone the doors were arriving after five rows of specification: the visual
   proof of the trade sat behind a data table. The rack moves ahead of it, so the
   first thing a scroll reveals is the work. */
@media(max-width:860px){
 section.dark .wrap:has(> .h-row){display:flex;flex-direction:column}
 .h-row{display:contents}
 .h-main{order:1}
 .h-label{order:2}
 .rack{order:3}
 .h-spec{order:4;flex:none;padding-top:26px}
}
.rk{position:relative;display:block;overflow:hidden;background:var(--ink)}
.rk img{transition:transform .5s ease}
.rk:hover img,.rk:focus-visible img{transform:scale(1.05)}
.rk-l{position:absolute;left:0;right:0;bottom:0;padding:7px 6px;text-align:center;
 font-size:8px;color:var(--plaster);background:rgba(23,19,16,.82);
 opacity:0;transition:opacity .22s ease}
.rk:hover .rk-l,.rk:focus-visible .rk-l{opacity:1}
/* One row at every width. As columns drop, whole doors leave rather than
   wrapping to a second line, and the ones that stay keep the tonal range. */
@media(max-width:1060px){
 .rack{grid-template-columns:repeat(8,minmax(0,1fr))}
 .rk[data-t="3"]{display:none}
}
@media(max-width:620px){
 .rack{grid-template-columns:repeat(5,minmax(0,1fr))}
 .rk[data-t="2"]{display:none}
}

/* Stating width and height on every <img> fixed layout shift, but it also made
   the HTML height attribute authoritative for images sized only by CSS width —
   74 door swatches rendered 124x494 instead of in proportion. Images that set a
   height inline (the full-bleed bands, object-fit:cover) keep it, because an
   inline style wins over this rule. */
img[width][height]{height:auto}

/* "Get my fixed price" is longer than the label it replaced, and on a 320px
   screen the header row (logo + button + burger) ran 3px past the viewport. */
@media(max-width:400px){
 header .btn{padding:0 12px;font-size:10px;letter-spacing:.04em}
}

/* Services hub: the five pages as a set, so the group reads as one offer. */
.svcgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule-l)}
.svch{display:block;background:var(--plaster);padding:26px 24px 28px;text-decoration:none}
.svch:hover{background:var(--plaster2)}
@media(max-width:900px){.svcgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.svcgrid{grid-template-columns:1fr}}

/* Anchor targets sit under a 67px sticky header without this. */
[id]{scroll-margin-top:84px}

/* Headings read better with balanced line breaks than with a short last line. */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* Removes the 300ms double-tap delay on touch devices. */
a,button,summary,.gchip,.tile{touch-action:manipulation}

/* Keyboard focus must stay visible even when a sticky header overlaps. */
:focus-visible{scroll-margin-top:84px}

/* Skip link: first thing a keyboard or screen-reader user meets. */
.skip{position:absolute;left:-9999px;top:0;z-index:40;background:var(--brass);color:var(--espresso);
 padding:12px 20px;font-family:"Martian Mono",monospace;font-size:12px;text-decoration:none}
.skip:focus{left:12px;top:12px}


/* quote section: two columns on desktop; on mobile the contact block is the
   fallback for people who would rather call, so it belongs after the form,
   not between the pitch and it */
/* The form needs room: its fields carry labels and a file upload, and below
   roughly 620px they read as cramped. So the pitch column is the one that gives
   way, and the whole row stacks earlier than the rest of the site rather than
   squeezing the form through the middle widths. */
.quoterow{display:grid;grid-template-columns:330px minmax(0,1fr);gap:28px 54px;
 grid-template-areas:"pitch form" "contact form";align-items:start}
.q-pitch{grid-area:pitch}
.q-contact{grid-area:contact;padding-top:26px;border-top:1px solid var(--rule-d)}
.q-form{grid-area:form;min-width:0}
@media(max-width:1060px){
 /* align-items:start carries over from the grid, and in a column flex it shrinks
    children to content width — which for an iframe is the 300px HTML default. */
 .quoterow{display:flex!important;flex-direction:column;gap:0;align-items:stretch}
 .q-pitch{order:1}
 .q-form{order:2;margin-top:30px}
 .q-contact{order:3;margin-top:34px}
}

/* A form stretched across a full desktop width reads as badly as a cramped one,
   so it keeps a comfortable measure and centres in whatever space it is given. */
.hlbox{width:100%;max-width:780px;margin-inline:auto}
.hlbox iframe{max-width:100%}


/* Timeline tracks: label column, then a bar sharing one 0-8 week scale so the
   two routes can be compared by length. On narrow screens the label sits above
   its bar rather than squeezing both into one line. */
.tkwrap{border-top:1px solid rgba(58,54,49,.18)}
.tk,.tk-head,.tk-foot{display:flex;align-items:center;gap:30px}
.tk{padding:20px 0;border-bottom:1px solid rgba(58,54,49,.18)}
.tk-head{padding-bottom:6px}
.tk-foot{padding-top:16px}
.tk-lab{flex:0 0 282px}
.tk-bar{flex:1;position:relative;height:40px;min-width:0}
@media(max-width:820px){
 .tk,.tk-head,.tk-foot{display:block;gap:0}
 .tk-lab{flex:none}
 .tk-bar{height:34px;margin-top:12px}
 .tk-head .tk-bar{margin-top:0}
 .tk-foot .tk-bar{margin-top:14px}
}

/* Guides index: each post leads with its own first photograph, cropped 3:2. */
.gcard{display:grid;grid-template-columns:230px minmax(0,1fr);gap:30px;align-items:center;
 padding:22px 0 24px;border-top:1px solid var(--rule-l);text-decoration:none}
.gcard-th{aspect-ratio:3/2;overflow:hidden;border-radius:2px;background:var(--ink)}
.gcard-th img{transition:transform .4s ease}
.gcard:hover .gcard-th img{transform:scale(1.04)}
.gcard:hover h3{color:var(--sage)}
@media(max-width:720px){
 .gcard{grid-template-columns:1fr;gap:16px}
 .gcard-th{aspect-ratio:16/9}
}

.wrap{max-width:1120px}
img{max-width:100%}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
html{scroll-behavior:smooth}
.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;
 background:transparent;border:1px solid var(--rule-d);color:var(--plaster);cursor:pointer;border-radius:2px;padding:0}
.burger:hover{border-color:var(--brass);color:var(--brass)}
.burger[aria-expanded="true"]{background:var(--brass);border-color:var(--brass);color:var(--espresso)}
.mobnav{position:fixed;inset:62px 0 0;background:var(--espresso);z-index:21;overflow-y:auto;
 display:flex;flex-direction:column;justify-content:space-between;padding:12px 0 28px}
.mobnav[hidden]{display:none}
.mobnav nav{display:flex;flex-direction:column}
.mobnav nav a{display:block;padding:17px 24px;color:var(--plaster);text-decoration:none;font-size:23px;
 font-family:"Bricolage Grotesque",sans-serif;font-weight:600;letter-spacing:-.02em;
 border-bottom:1px solid var(--rule-d)}
.mobnav nav a:hover,.mobnav nav a:focus-visible{background:rgba(195,154,94,.1);color:var(--brass)}
.mobnav-foot{padding:26px 24px 0;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.mobnav-foot a.mono{color:rgba(232,231,224,.7)}
.mobnav-foot .btn{width:100%;justify-content:center;height:52px}
body.navopen,body.lbopen{overflow:hidden}
/* lightbox */
#lb{position:fixed;inset:0;z-index:2147482000;background:rgba(10,8,7,.96);display:flex;
 align-items:center;justify-content:center;padding:62px 16px 76px}
#lb[hidden]{display:none}
.lb-f{margin:0;max-width:1400px;width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}
.lb-f img{max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;display:block;
 object-fit:contain;background:var(--ink)}
.lb-f figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:20px;width:100%;
 max-width:900px;font-family:"Martian Mono",monospace;font-size:10px;letter-spacing:.13em;
 text-transform:uppercase;color:rgba(232,231,224,.72)}
.lb-cnt{color:rgba(232,231,224,.42);white-space:nowrap}
#lb button{position:absolute;background:rgba(23,19,16,.8);border:1px solid var(--rule-d);
 color:var(--plaster);cursor:pointer;border-radius:2px}
#lb button:hover{border-color:var(--brass);color:var(--brass)}
.lb-x{top:18px;right:18px;height:42px;padding:0 17px;
 font-family:"Martian Mono",monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.lb-p,.lb-n{top:50%;transform:translateY(-50%);width:50px;height:60px;
 display:flex;align-items:center;justify-content:center}
.lb-p{left:14px} .lb-n{right:14px}
[data-gallery] img[data-large]{cursor:zoom-in}
@media (max-width:780px){
 #lb{padding:58px 10px 92px}
 .lb-p,.lb-n{top:auto;bottom:16px;transform:none;width:54px;height:46px}
 .lb-p{left:calc(50% - 62px)} .lb-n{right:calc(50% - 62px)}
 .lb-f figcaption{flex-direction:column;gap:5px;align-items:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* ---- tablet ---- */
@media (max-width:1120px){
 .wrap{padding:0 24px}
 [style*="repeat(9,"]{grid-template-columns:repeat(6,minmax(0,1fr))!important}
 .ggrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* ---- phone ---- */
/* The desktop nav (logo + seven links + phone + button) stops fitting around
   960px, well before the old 780px breakpoint, and overflowed the viewport in
   between. The burger now takes over while there is still room for it. */
@media (max-width:960px){
 .wrap{padding:0 20px}
 h1{font-size:clamp(36px,10.5vw,58px)!important;line-height:1!important}
 h2{font-size:clamp(27px,7.2vw,40px)!important;line-height:1.03!important}
 h3{font-size:clamp(19px,5vw,26px)!important}

 /* every multi-column grid collapses */
 [style*="repeat(9,"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
 [style*="repeat(4,"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 [style*="repeat(3,"]{grid-template-columns:1fr!important}
 [style*="repeat(2,"]{grid-template-columns:1fr!important}
 .ggrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}

 /* every side-by-side flex row stacks.
    keyed on flex children rather than on gap: the proof bar, the spec band and the
    day ruler space their columns with padding and carry no gap at all */
 section [style*="display:flex"]:not([style*="flex-direction:column"]),
 footer [style*="display:flex"]:not([style*="flex-direction:column"]){flex-wrap:wrap!important}
 section [style*="display:flex"][style*="gap:"]:not([style*="flex-direction:column"]){flex-direction:column!important;align-items:stretch!important}
 section [style*="flex:1"], footer [style*="flex:1"]{flex:1 1 100%!important;min-width:0!important;padding-right:0!important}
 /* stacked columns need breathing room they never needed side by side */
 section [style*="display:flex"]:not([style*="flex-direction:column"]) > [style*="flex:1"]:not(:last-child){margin-bottom:24px!important}
 section [style*="display:flex"][style*="gap:"] > *:not(:last-child){margin-bottom:6px}
 section [style*="flex:0 0"]:not([style*="border-radius:50%"]),
 footer [style*="flex:0 0"]{flex:1 1 100%!important;width:auto!important;min-width:0!important}
 /* rows that must stay side by side */
 .tcap{flex-wrap:nowrap!important}
 .tcap span{flex:0 0 auto!important}
 section [style*="display:flex"][style*="justify-content:space-between"]{gap:14px}
 header [style*="display:flex"]{flex-direction:row!important;align-items:center!important}
 .gfilters, .grow, .rv-item-head{flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important}
 .glab{width:100%!important;flex:0 0 100%!important;margin-bottom:2px}
 .tcap{flex-direction:row!important}

 /* nav moves into the burger sheet */
 .desknav, .deskphone{display:none!important}
 .burger{display:inline-flex!important}
 header .wrap{gap:12px!important;height:62px!important}
 header .wrap > a:first-child{margin-right:auto}
 header .btn{height:36px!important;padding:0 15px!important;width:auto}

 /* full-bleed image bands get shorter */
 [style*="height:620px"], [style*="height:520px"], [style*="height:480px"]{height:min(56vw,340px)!important}
 [style*="min-height:440px"]{min-height:300px!important}

 /* the day ruler keeps its scale but stops crowding */
 [style*="position:relative;height:34px"]{height:26px!important}

 form{grid-template-columns:1fr!important}
 form [style*="span 2"]{grid-column:span 1!important}
 .btn{width:100%;justify-content:center}
 header .btn{width:auto}
}
@media (max-width:420px){
 [style*="repeat(9,"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}