@font-face{font-family:"Outfit";src:url("outfit-regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Outfit";src:url("outfit-bold.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap}
:root{--snow:#fafafa;--platinum:#efefef;--crimson:#9b1d20;--wine:#7a141a;--black:#000;--gutter:clamp(1.4rem,4.6vw,5.25rem)}
*,*::before,*::after{box-sizing:border-box}
html{min-width:320px;background:var(--snow)}
body{margin:0;color:var(--black);background:var(--snow);font-family:"Outfit",Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
.site-shell{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.site-header{min-height:clamp(5.5rem,10vh,8.5rem);padding:1.9rem var(--gutter) 1rem;display:flex;align-items:flex-start;gap:2rem}
.brand{display:block;width:clamp(12rem,19vw,18rem);flex:0 0 auto}.brand img{display:block;width:100%;height:auto}
.header-line{height:1px;margin-top:.9rem;flex:1;background:var(--platinum)}
.hero{min-height:0;display:grid;grid-template-columns:minmax(28rem,.88fr) minmax(35rem,1.12fr);align-items:center;padding-left:var(--gutter)}
.hero-content{position:relative;z-index:3;width:min(100%,40rem);padding:2rem 3.25rem 3rem 0}
h1{max-width:10ch;margin:0;font-size:clamp(4.2rem,6.35vw,7rem);font-weight:700;letter-spacing:-.065em;line-height:.87}
h1 span{color:var(--crimson)}
.intro{max-width:33rem;margin:1.8rem 0 2rem;font-size:clamp(1.05rem,1.35vw,1.38rem);line-height:1.45}
.contact-list{display:grid;gap:.65rem;width:min(100%,36rem);font-style:normal}
.contact-row{min-height:4.6rem;display:grid;grid-template-columns:4.6rem minmax(0,1fr) 2.4rem;align-items:center;overflow:hidden;background:var(--platinum);text-decoration:none;transition:color 180ms ease,transform 180ms ease,background-color 180ms ease}
.contact-icon{width:100%;height:100%;display:grid;place-items:center;color:var(--snow);background:var(--crimson);transition:background-color 180ms ease}
.contact-icon svg,.contact-arrow{width:1.7rem;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.contact-copy{min-width:0;display:grid;gap:.1rem;padding:0 1.7rem}
.contact-copy small{color:var(--wine);font-size:1rem;font-weight:700}
.contact-copy strong{font-size:1.08rem;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-arrow{width:1.3rem;opacity:0;transform:translateX(-.4rem);transition:opacity 180ms ease,transform 180ms ease}
.contact-row:hover,.contact-row:focus-visible{color:var(--snow);background:var(--wine);transform:translateX(.35rem);outline:0}
.contact-row:hover .contact-icon,.contact-row:focus-visible .contact-icon{background:var(--black)}
.contact-row:hover .contact-copy small,.contact-row:focus-visible .contact-copy small{color:var(--snow)}
.contact-row:hover .contact-arrow,.contact-row:focus-visible .contact-arrow{opacity:1;transform:translateX(0)}
.joinery-visual{position:relative;align-self:stretch;min-height:0;display:grid;place-items:center;overflow:hidden}
.joinery-visual svg{display:block;width:min(100%,46rem);max-height:calc(100svh - 11rem);height:auto;transform:translateY(-1%)}
.datum path{fill:none;stroke:var(--crimson);stroke-width:1.25}
.beam path{stroke:var(--black);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wood-front{fill:#f7f7f7}.wood-top{fill:#fff}.wood-side{fill:#e5e5e5}.red-side{fill:var(--crimson)}
.mortise{fill:#d8d8d8}.tenon{fill:#f4f4f4}.tenon-top{fill:#fff}.tenon-side{fill:#e2e2e2}
.grain{fill:none;stroke:#c6c6c6!important;stroke-width:1!important}
.measurements path{fill:none;stroke:rgba(0,0,0,.55);stroke-width:1;stroke-dasharray:4 4}
.fasteners circle{fill:var(--snow);stroke:var(--black);stroke-width:1.35}
.site-footer{min-height:4rem;display:flex;align-items:center;gap:1.5rem;padding:.85rem var(--gutter);border-top:1px solid rgba(0,0,0,.28);font-size:.85rem;font-weight:700}
.footer-rule{width:3.5rem;height:2px;background:var(--crimson)}
@media(max-width:1120px){
 .hero{grid-template-columns:minmax(26rem,.93fr) minmax(28rem,1.07fr)}
 .contact-row{grid-template-columns:4.4rem minmax(0,1fr) 2rem}.contact-copy{padding:0 1.25rem}.contact-copy strong{font-size:1rem}
}
@media(max-width:860px){
 .site-shell{overflow:clip}.site-header{min-height:auto;padding-top:1.1rem;padding-bottom:.7rem}.brand{width:min(62vw,14rem)}.header-line{display:none}
 .hero{display:flex;flex-direction:column;align-items:stretch;padding:0}
 .hero-content{width:100%;padding:1.4rem var(--gutter) 1.25rem}
 h1{max-width:10ch;font-size:clamp(2.7rem,11vw,4.5rem);line-height:.91}
 .intro{max-width:34rem;margin:1rem 0 1.15rem;font-size:1rem;line-height:1.38}
 .contact-list{width:100%;max-width:38rem}
 .joinery-visual{width:100%;min-height:clamp(23rem,79vw,35rem);padding:1rem var(--gutter) 2rem;border-top:1px solid rgba(155,29,32,.2)}
 .joinery-visual svg{width:min(100%,40rem);transform:none}
 .site-footer{flex-wrap:wrap;row-gap:.25rem}
}
@media(max-width:600px){
 .site-header{padding-top:.75rem;padding-bottom:.35rem}.brand{width:min(57vw,11.5rem)}
 .hero-content{padding-top:.75rem;padding-bottom:.85rem}
 h1{font-size:clamp(2.35rem,10.6vw,3.5rem);line-height:.91;letter-spacing:-.06em}
 .intro{margin:.65rem 0 .75rem;font-size:.86rem;line-height:1.31}
 .contact-list{gap:.4rem}
 .contact-row{min-height:3.45rem;grid-template-columns:3.45rem minmax(0,1fr)}
 .contact-icon{grid-row:1}.contact-icon svg{width:1.3rem}
 .contact-copy{gap:0;padding:0 .8rem}.contact-copy small{font-size:.7rem}.contact-copy strong{font-size:.79rem;overflow:visible;text-overflow:clip}
 .contact-arrow{display:none}
 .joinery-visual{min-height:20rem;padding:1rem 1rem 1.5rem}.joinery-visual svg{width:100%}
 .site-footer{min-height:3.25rem;padding-top:.75rem;padding-bottom:.75rem;font-size:.75rem}.footer-rule{width:1.75rem}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}}
