/* Sable Stone Construction — Steel & Fire */
:root{--black:#111111;--char:#2B2B2B;--deep:#0b0b0b;--fire:#E8590C;--text:#e9e6e1;--mute:#a9a39b;--line:#333}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--text);font:400 17px/1.6 Barlow,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
/* texture */
.grit{position:relative;isolation:isolate}
.grit::before{content:'';position:absolute;inset:0;z-index:-1;background:url(../img/concrete.jpg) center/600px;opacity:.35;mix-blend-mode:luminosity}
.grit::after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 40%,transparent 20%,#000a 90%)}
/* header */
.hdr{position:sticky;top:0;z-index:50;background:#0b0b0bee;backdrop-filter:blur(6px);border-bottom:1px solid #222}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand img{height:48px;width:auto}
.nav{display:flex;align-items:center;gap:30px}
.nav a{font:600 14px Oswald,Arial;letter-spacing:.14em;text-transform:uppercase;color:#ddd}
.nav a:hover,.nav a.on{color:var(--fire)}
.menu{display:none;background:none;border:2px solid #555;color:#fff;font:600 13px Oswald;letter-spacing:.12em;padding:8px 12px;text-transform:uppercase}
/* buttons */
.btn{display:inline-block;background:var(--fire);color:#fff!important;font:600 16px Oswald,Arial;letter-spacing:.12em;text-transform:uppercase;padding:16px 30px;clip-path:polygon(0 0,100% 0,100% 70%,93% 100%,0 100%);border:0;cursor:pointer}
.btn:hover{background:#ff6a1a}
.ghost{display:inline-block;border:2px solid #fff;color:#fff;font:600 16px Oswald,Arial;letter-spacing:.12em;text-transform:uppercase;padding:14px 26px}
.ghost:hover{border-color:var(--fire);color:var(--fire)}
.nav .btn{padding:11px 20px;font-size:13px;color:#fff}
/* hero */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;background:#000}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center 45%;filter:grayscale(.1) contrast(1.1) brightness(.72);animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.07)}}
.hero .sh{position:absolute;inset:0;background:linear-gradient(90deg,#111 0%,#111c 38%,#1110 75%),linear-gradient(0deg,#111 0%,#1110 35%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:60px;padding-bottom:120px}
.eb{font:600 14px Oswald,Arial;letter-spacing:.3em;color:var(--fire);text-transform:uppercase;margin-bottom:18px}
.wordmark{width:min(640px,88%);margin-bottom:28px;filter:drop-shadow(0 4px 0 #000)}
h1,.h1{font:700 clamp(46px,8vw,112px)/.92 Oswald,Arial;text-transform:uppercase}
h1 span,.h1 span,h2 span{color:var(--fire)}
.sub{font-size:21px;color:#ccc;margin:22px 0 34px;max-width:580px}
.cta .ghost{margin-left:14px}
.tbar{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;border-top:1px solid var(--line);background:#0b0b0bcc}
.tbar a{flex:1;padding:22px 32px;font:600 17px Oswald,Arial;letter-spacing:.16em;text-transform:uppercase;border-right:1px solid var(--line)}
.tbar a:last-child{border-right:0}.tbar b{color:var(--fire);margin-right:10px}
.tbar a:hover{background:#1b1b1b}
/* page hero */
.phero{padding:110px 0 70px;border-bottom:1px solid #222}
.phero p{color:var(--mute);font-size:20px;max-width:680px;margin-top:16px}
/* sections */
section{padding:84px 0}
.alt{background:var(--char)}
.st{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:40px;flex-wrap:wrap}
h2{font:700 clamp(34px,4.4vw,54px)/1 Oswald,Arial;text-transform:uppercase}
h3{font:700 26px/1.1 Oswald,Arial;text-transform:uppercase}
.more{color:var(--fire);font:600 14px Oswald;letter-spacing:.14em;text-transform:uppercase}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#1a1a1a;padding:36px;border-top:4px solid var(--fire)}
.card .n{font:700 40px Oswald;color:var(--fire)}
.card h3{margin:6px 0 12px}.card p{color:var(--mute)}
.card ul{margin:14px 0 0 18px;color:#cfcac3}.card li{margin:4px 0}
.card .more{display:block;margin-top:18px}
/* types */
.types{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{position:relative;height:340px;overflow:hidden;background:#1a1a1a}
.tile .pi{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.25);transition:transform .6s}
.tile:hover .pi{transform:scale(1.05)}
.tile .lab{position:absolute;left:0;right:0;bottom:0;padding:70px 22px 20px;background:linear-gradient(#0000,#000e)}
.tile .lab h3{font-size:22px}.tile .lab p{font:600 12px Oswald;letter-spacing:.16em;text-transform:uppercase;color:var(--fire)}
.ph{background:repeating-linear-gradient(45deg,#1c1c1c 0 6px,#232323 6px 12px);box-shadow:inset 0 0 90px #000;display:flex;align-items:center;justify-content:center}
.ph img{width:90px;opacity:.25}
/* split */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.split .img{min-height:420px;background-size:cover;background-position:center;filter:grayscale(.3)}
.split p{color:#cfcac3;margin:16px 0}
.checks{list-style:none;margin:20px 0}.checks li{padding:10px 0;border-bottom:1px solid #383838;font:500 18px Barlow}.checks li::before{content:'';display:inline-block;width:10px;height:10px;background:var(--fire);transform:rotate(45deg);margin-right:14px}
/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
.pillars div{padding:34px;border-right:1px solid var(--line)}.pillars div:last-child{border-right:0}
.pillars h3{color:var(--fire)}.pillars p{color:var(--mute);margin-top:8px}
/* cta band */
.band{padding:80px 0;text-align:center}
.band p{color:var(--mute);margin:14px auto 30px;max-width:620px}
/* gallery */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.filters button{background:#1b1b1b;color:#ddd;border:1px solid #3a3a3a;font:600 13px Oswald;letter-spacing:.14em;text-transform:uppercase;padding:10px 16px;cursor:pointer}
.filters button.on,.filters button:hover{background:var(--fire);border-color:var(--fire);color:#fff}
.gtype{margin-bottom:56px}
.gtype h3{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.gtype .meta{color:var(--mute);margin-bottom:18px;font-size:16px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.gal button{border:0;padding:0;background:#1a1a1a;cursor:zoom-in;aspect-ratio:4/3;overflow:hidden}
.gal img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2);transition:transform .5s}
.gal button:hover img{transform:scale(1.05)}
.soon{border:1px dashed #555;padding:40px;color:var(--mute);text-align:center}
.lb{position:fixed;inset:0;z-index:99;background:#000e;display:none;align-items:center;justify-content:center;padding:30px}
.lb.open{display:flex}.lb img{max-height:90vh;max-width:95vw}
.lb button{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;font:600 30px Oswald;cursor:pointer}
/* blog */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.post{background:#1a1a1a;border-top:4px solid var(--fire);padding:30px}
.post time{font:600 12px Oswald;letter-spacing:.16em;color:var(--fire);text-transform:uppercase}
.post h3{margin:8px 0 10px}.post p{color:var(--mute)}
.article{max-width:760px}.article p{margin:16px 0;color:#d6d1ca}
/* form */
form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:block;font:600 13px Oswald;letter-spacing:.14em;text-transform:uppercase;color:#cfcac3;margin-bottom:6px}
input,select,textarea{width:100%;background:#0f0f0f;border:1px solid #444;color:#fff;font:400 16px Barlow,Arial;padding:13px 14px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--fire);border-color:var(--fire)}
.full{grid-column:1/-1}
.note{color:var(--mute);font-size:14px}
.info{list-style:none}.info li{padding:14px 0;border-bottom:1px solid #383838}.info b{display:block;font:600 12px Oswald;letter-spacing:.16em;color:var(--fire);text-transform:uppercase}
.ph-txt{color:#ffb38a;background:#3a1d0b;padding:0 4px;font-family:monospace;font-size:.9em}
/* flag accent */
.stars{display:inline-flex;gap:6px;margin-bottom:14px}.stars i{width:9px;height:9px;background:var(--fire);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);opacity:.85}
/* footer */
footer{background:#0b0b0b;border-top:1px solid #222;padding:60px 0 30px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer .slogan{font:600 14px Oswald;letter-spacing:.28em;text-transform:uppercase;color:var(--mute);margin-top:16px}footer .slogan b{color:var(--fire);font-weight:600}
footer h4{font:600 13px Oswald;letter-spacing:.18em;text-transform:uppercase;color:var(--fire);margin-bottom:12px}
footer li{list-style:none;margin:6px 0;color:#bbb}
.legal{margin-top:40px;padding-top:20px;border-top:1px solid #222;color:#777;font-size:14px}
/* responsive */
@media(max-width:980px){
 .grid3,.pillars{grid-template-columns:1fr}.pillars div{border-right:0;border-bottom:1px solid var(--line)}
 .types{grid-template-columns:1fr 1fr}.split,.fgrid{grid-template-columns:1fr}
 .menu{display:block}.nav{display:none;position:absolute;top:78px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#0b0b0b;border-bottom:1px solid #222}
 .nav.open{display:flex}.nav a{padding:16px 32px;border-top:1px solid #1f1f1f}.nav .btn{margin:16px 32px;text-align:center;clip-path:none}
 .tbar{position:relative;flex-direction:column}.tbar a{border-right:0;border-bottom:1px solid var(--line);padding:16px 24px}
 .hero{min-height:auto;flex-direction:column;align-items:stretch}.hero .wrap{padding-top:90px;padding-bottom:60px}
}
@media(max-width:600px){.wrap{padding:0 20px}.types{grid-template-columns:1fr}.tile{height:260px}form{grid-template-columns:1fr}.cta .ghost{margin:12px 0 0}section{padding:60px 0}.brand img{height:38px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}