:root{--red:#c9252d;--gold:#ffd400;--dark:#090a0b;--ink:#202428;--cream:#f3f0ea;--white:#fff;--muted:#6b7075}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff}
.container{width:min(1160px,calc(100% - 40px));margin:auto}
.nav-wrap{position:sticky;top:0;z-index:20;background:rgba(17,19,21,.96);backdrop-filter:blur(8px);border-bottom:1px solid #333}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between}
.brand{color:white;text-decoration:none;display:flex;flex-direction:column;line-height:1}
.brand span{font:800 31px/1 'Barlow Condensed',sans-serif;letter-spacing:1px}
.brand span:after{content:'';display:inline-block;width:8px;height:8px;background:var(--red);margin-left:5px}
.brand small{font-size:8px;letter-spacing:2.5px;margin-top:5px}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:#ddd;text-decoration:none;font-size:14px;font-weight:600}
.nav-links a:hover{color:#fff}
.nav-cta{background:var(--red);padding:12px 18px;color:#fff!important}
.menu{display:none;background:none;color:white;border:0;font-size:24px}
.hero{background:var(--dark);color:#fff;overflow:hidden}
.hero-grid{min-height:680px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:50px}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:3px;color:#ef9296}
.eyebrow.red{color:var(--red)}
h1,h2,h3{font-family:'Barlow Condensed',Arial,sans-serif;margin:0}
h1{font-size:clamp(66px,8vw,110px);line-height:.82;text-transform:uppercase;letter-spacing:-2px}
h1 span{color:var(--red)}
.brand-title{font-size:clamp(68px,8vw,108px);line-height:.88;letter-spacing:-1px}
.brand-title span{display:inline-block;font-size:.57em;line-height:.94;letter-spacing:1px;margin-top:12px}
.lead{max-width:650px;color:#c9ccce;font-size:18px;line-height:1.7;margin:30px 0}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;border:0;text-decoration:none;padding:16px 22px;font-weight:700;font-size:14px;cursor:pointer}
.btn.primary{background:var(--red);color:#fff}
.btn.ghost{border:1px solid #555;color:#fff}
.btn.dark{background:var(--dark);color:#fff;width:100%}
.trust{display:flex;gap:22px;color:#aeb2b5;font-size:12px;margin-top:28px;flex-wrap:wrap}
.hero-visual{height:520px;position:relative;background:linear-gradient(145deg,#292d30,#17191b);border:1px solid #35393c;clip-path:polygon(10% 0,100% 0,100% 90%,90% 100%,0 100%,0 10%)}
.beam{position:absolute;background:#70767a;box-shadow:inset 0 0 0 4px #4b5053}
.b1{width:26px;height:90%;left:18%;bottom:0}
.b2{width:26px;height:75%;left:50%;bottom:0}
.b3{width:26px;height:90%;right:16%;bottom:0}
.roof{position:absolute;width:88%;height:26px;background:#888e92;top:21%;left:6%;transform:rotate(-27deg);transform-origin:left}
.roof:after{content:'';position:absolute;width:94%;height:26px;background:#656b6f;left:45%;top:120px;transform:rotate(54deg)}
.section{padding:110px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:60px;margin-bottom:50px}
.section-head h2,.about h2,.contact-section h2{font-size:clamp(44px,5vw,68px);line-height:.95;text-transform:uppercase}
.section-head>p{max-width:480px;line-height:1.7;color:var(--muted)}
.services{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ddd;border-left:1px solid #ddd}
.services article{min-height:230px;padding:32px;border-right:1px solid #ddd;border-bottom:1px solid #ddd;transition:.2s}
.services article:hover{background:var(--dark);color:white;transform:translateY(-4px)}
.services span{color:var(--red);font:700 13px Inter}
.services h3{font-size:32px;margin:35px 0 12px}
.services p{color:var(--muted);line-height:1.6;font-size:14px}
.services article:hover p{color:#bfc3c6}
.work-section{background:#17191b;color:#fff;padding:110px 0}
.section-head.light>p{color:#aeb2b5}
.gallery{display:grid;grid-template-columns:1.35fr .8fr .8fr;gap:16px}
.project{background:#24272a;overflow:hidden}
.project-art{height:270px;position:relative;background:#34383b}
.framing .project-art{height:360px}
.project>div:last-child{padding:22px}
.project small{color:#ea7b81;font-size:10px;letter-spacing:2px}
.project h3{font-size:28px;margin-top:5px}
.frame-art{background:repeating-linear-gradient(90deg,transparent 0 52px,#a06a45 53px 66px),linear-gradient(145deg,#52575a,#202427)}
.frame-art:after{content:'';position:absolute;left:0;right:0;top:30%;height:18px;background:#b47a4e;transform:skewY(-12deg)}
.deck-art{background:repeating-linear-gradient(12deg,#80563b 0 18px,#a06d49 19px 22px)}
.finish-art{background:linear-gradient(125deg,#595c5f 50%,#c7c3b8 51%)}
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:center}
.about-mark{font:800 clamp(150px,22vw,300px)/.8 'Barlow Condensed';color:#e5e1da;letter-spacing:-18px}
.about>div>p:not(.eyebrow){line-height:1.8;color:var(--muted);font-size:17px}
.steps{margin-top:30px;display:grid;gap:18px}
.steps>div{display:flex;align-items:center;gap:18px}
.steps b{width:42px;height:42px;background:var(--red);color:#fff;display:grid;place-content:center}
.steps span{display:flex;flex-direction:column;gap:3px}
.steps small{color:var(--muted)}
.contact-section{background:var(--red);color:#fff;padding:100px 0}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px}
.contact-grid>div>p{line-height:1.7}
.contact-list{display:flex;flex-direction:column;gap:13px;margin-top:35px}
.contact-list a,.contact-list span{color:#fff;text-decoration:none;font-weight:700}
form{background:#fff;color:var(--ink);padding:34px;display:grid;gap:18px}
label{display:grid;gap:8px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1px}
input,select,textarea{width:100%;border:1px solid #d8d8d8;background:#fafafa;padding:14px;font:14px Inter;color:#222}
textarea{resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-note{font-size:11px;color:#777;text-align:center;margin:0}
footer{background:#0d0f10;color:#aeb2b5;padding:38px 0}
footer .container{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px}
footer .brand{color:#fff}
@media(max-width:800px){.menu{display:block}
.nav-links{position:absolute;left:0;right:0;top:78px;background:#151719;padding:25px;display:none;flex-direction:column;align-items:stretch}
.nav-links.open{display:flex}
.hero-grid{grid-template-columns:1fr;padding:80px 0}
.hero-visual{display:none}
.services{grid-template-columns:1fr 1fr}
.gallery{grid-template-columns:1fr}
.project-art,.framing .project-art{height:260px}
.about,.contact-grid{grid-template-columns:1fr}
.about-mark{display:none}
.section-head{align-items:start;flex-direction:column;gap:15px}
.contact-grid{gap:45px}
}
@media(max-width:520px){.container{width:min(100% - 28px,1160px)}
.hero-grid{min-height:610px}
.trust{display:grid}
.section,.work-section{padding:80px 0}
.services{grid-template-columns:1fr}
.field-row{grid-template-columns:1fr}
footer .container{align-items:flex-start;flex-direction:column}
h1{font-size:64px}
.brand-title{font-size:68px}
.brand-title span{font-size:.54em}
}
.brand-image{height:68px;width:122px;display:flex;align-items:center;overflow:hidden}
.brand-image img{display:block;width:100%;height:100%;object-fit:contain}
.logo-showcase{display:flex;align-items:center;justify-content:center;background:#050607}
.logo-showcase>img{display:block;width:94%;height:auto;max-height:92%;object-fit:contain;filter:drop-shadow(0 20px 32px rgba(0,0,0,.5))}
@media(max-width:800px){.brand-image{height:62px;width:110px}}

/* BJ&R's black, red, and gold identity */
.nav-wrap{background:rgba(9,10,11,.97);border-bottom-color:rgba(255,212,0,.32)}
.brand span:after{background:var(--gold)}
.nav-cta,.btn.primary{background:var(--red);box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.nav-cta:hover,.btn.primary:hover{background:#a81d25}
.hero{background:radial-gradient(ellipse at 82% 40%,#25201a 0,#111315 42%,#090a0b 78%)}
.eyebrow{color:var(--gold)}
.eyebrow.red{color:var(--red)}
.brand-title span{color:var(--gold)}
.hero-visual{border-color:rgba(255,212,0,.35)}
.services article{border-color:#d8d3c7}
.services span,.project small{color:#b5262f}
.services article:hover{box-shadow:inset 0 4px 0 var(--gold)}
.work-section{background:#090a0b;border-top:4px solid var(--red)}
.section-head.light .eyebrow{color:var(--gold)}
.project{background:#17191b;border:1px solid #34302a}
.project small{color:var(--gold)}
.about-mark{color:#eee9dc}
.steps b{background:var(--red);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.contact-section{background:#111315;border-top:5px solid var(--gold)}
.contact-section h2{color:#fff}
.contact-grid>div>p{color:#d0ccbf}
.contact-list a:hover{color:var(--gold)}
.contact-list span{color:var(--gold)}
form{border-top:4px solid var(--red);box-shadow:0 18px 50px rgba(0,0,0,.25)}
.btn.dark{background:var(--red)}
.btn.dark:hover{background:#a81d25}
footer{background:#050607;border-top:1px solid rgba(255,212,0,.35)}

.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
.project-image{display:block;width:100%;height:260px;object-fit:cover;background:#292d30}
.framing .project-image{height:260px}
.project>div:last-child{min-height:112px}
.before-after{background:var(--cream)}
.comparison-grid{display:grid;gap:28px}
.comparison-card{background:#fff;border-top:5px solid var(--red);padding:26px;box-shadow:0 14px 35px rgba(20,18,15,.09)}
.comparison-card h3{font-size:34px;text-transform:uppercase;margin-bottom:18px}
.comparison-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.comparison-images.three-stage{grid-template-columns:repeat(3,minmax(0,1fr))}
.comparison-images figure{position:relative;margin:0;background:#161819;overflow:hidden}
.comparison-images img{display:block;width:100%;height:340px;object-fit:cover}
.comparison-images span{position:absolute;z-index:1;top:12px;left:12px;background:var(--red);color:#fff;padding:8px 11px;font-size:10px;font-weight:800;letter-spacing:1.5px}
.comparison-images figure:last-child span{background:var(--gold);color:#111}
@media(max-width:800px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.comparison-images.three-stage{grid-template-columns:1fr 1fr}.comparison-images img{height:290px}}
@media(max-width:520px){.gallery{grid-template-columns:1fr}.project-image,.framing .project-image{height:240px}.comparison-images,.comparison-images.three-stage{grid-template-columns:1fr}.comparison-images img{height:270px}.comparison-card{padding:18px}}
.footer-stamp{width:116px;height:116px;flex:0 0 116px;border:2px solid var(--gold);border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;transform:rotate(-7deg);font-size:8px;font-weight:800;line-height:1.45;letter-spacing:.7px}
.footer-stamp strong{font:800 26px/1 'Barlow Condensed',sans-serif;color:var(--gold);margin-top:4px}
@media(max-width:800px){footer .footer-stamp{align-self:center}}
.services article.with-photo{padding:0;overflow:hidden}
.services .service-image{display:block;width:100%;height:138px;object-fit:cover}
.services .service-copy{padding:22px 32px 28px}
.services .service-copy h3{margin-top:14px}

.services .tiling-service h3{margin:14px 0 12px}
.tiling-photos{display:grid;grid-template-columns:1fr;max-width:260px;margin:10px 0 14px}
.tiling-photos img{display:block;width:100%;height:104px;object-fit:cover}
@media(max-width:800px){.tiling-photos img{height:132px}}

.services .flooring-service .service-image{height:190px;object-position:center 70%}

.services .remodeling-images{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.services .remodeling-images .service-image{height:160px}

.services .painting-service .service-image{height:180px;object-position:center 28%}

.services-more{font-weight:900;text-transform:uppercase;color:#000;letter-spacing:1.2px;margin:18px 0 0;text-align:center}