:root{--navy:#071526;--blue:#102b47;--gold:#d9b45f;--ink:#f7f5f0;--muted:#bdc8d4}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#071526;color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.65}a{color:inherit}header{position:sticky;top:0;z-index:10;background:rgba(5,16,29,.96);border-bottom:1px solid #26394b;backdrop-filter:blur(12px)}.wrap{max-width:1160px;margin:auto;padding:0 25px}.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:100px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none}.brand img{width:98px;height:94px;object-fit:contain}.brand span{font-weight:800;letter-spacing:.05em;font-size:15px}.brand small{display:block;font-size:10px;letter-spacing:.12em;color:var(--gold)}.links{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.links a{text-decoration:none;font-weight:700;font-size:12px;letter-spacing:.05em}.links a:hover{color:var(--gold)}.pill{background:linear-gradient(120deg,#e8c978,#b78d3c);color:#101726!important;border-radius:999px;padding:13px 19px;display:inline-block;text-decoration:none;font-weight:800;font-size:13px}.outline{border:1px solid #d5b367;color:#f2d99c;border-radius:999px;padding:12px 18px;display:inline-block;text-decoration:none;font-weight:700;font-size:13px}.hero{padding:96px 0 88px;background:radial-gradient(circle at 80% 30%,#1c4260 0%,#0a1d32 48%,#071526 80%)}.eyebrow{text-transform:uppercase;color:var(--gold);font-size:12px;letter-spacing:.24em;font-weight:800}.hero h1{font-size:clamp(42px,6vw,76px);line-height:1.06;letter-spacing:-.035em;max-width:850px;margin:20px 0}.hero p{max-width:730px;color:#d3dce5;font-size:19px}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.section{padding:72px 0}.section.alt{background:#0d2238}.section h2{font-size:clamp(30px,4vw,44px);line-height:1.16;margin:0 0 14px}.section>div>p{color:var(--muted);max-width:780px}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:32px}.card{border:1px solid #34506a;border-radius:19px;padding:27px;background:linear-gradient(135deg,#112b43,#0b1d30)}.card b{display:block;font-size:20px;color:#f4d18a;margin-bottom:8px}.card p{margin:0;color:#cbd5e1}.callout{border-left:4px solid var(--gold);padding:20px 24px;background:#152b40;border-radius:0 16px 16px 0;margin-top:30px;color:#e2e8f0}.related{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.related a{border:1px solid #46617a;border-radius:999px;padding:9px 14px;text-decoration:none;font-size:13px}footer{border-top:1px solid #2b4258;padding:34px 0;color:#a9b7c6;font-size:13px}footer a{color:#e8c978}@media(max-width:800px){.nav{align-items:flex-start;flex-direction:column;padding:8px 0 20px}.links{gap:12px}.brand img{width:80px;height:76px}.hero{padding:65px 0}.cards{grid-template-columns:1fr}.links a{font-size:11px}}
.metal-hero{position:relative;isolation:isolate;min-height:470px;display:flex;align-items:center;overflow:hidden}.metal-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#071526 3%,rgba(7,21,38,.94) 28%,rgba(7,21,38,.55) 63%,rgba(7,21,38,.08) 100%);z-index:-1}.metal-hero::after{content:"";position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2}.seam-hero::after{background-image:url('standing-seam-home.webp')}.fastener-hero::after{background-image:url('exposed-fastener-home.webp')}.metal-hero .wrap{width:100%}.metal-hero h1{max-width:700px}.metal-hero p{max-width:580px}.metal-feature{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}.metal-feature img,.metal-option img{width:100%;height:320px;object-fit:cover;border-radius:18px;border:1px solid #39536c}.metal-option{display:block;text-decoration:none;overflow:hidden;border-radius:20px;border:1px solid #34506a;background:#112b43}.metal-option img{height:240px;border:0;border-radius:0}.metal-option div{padding:25px}.metal-option h3{font-size:25px;color:#f2d38b;margin:0 0 9px}.metal-option p{color:#d4dce5}.metal-list{padding-left:23px;color:#d2dce7}.metal-list li{margin-bottom:12px}.metal-note{font-size:13px;color:#b6c4d1!important}.metal-feature h2{margin-top:10px}@media(max-width:800px){.metal-feature{grid-template-columns:1fr}.metal-hero::before{background:linear-gradient(90deg,rgba(7,21,38,.96),rgba(7,21,38,.65))}.metal-hero{min-height:420px}.metal-feature img{height:240px}}

/* User-supplied Tuff-Rib roofing photograph, screws visible in panel valleys */
.fastener-hero{background-image:linear-gradient(90deg,rgba(2,16,29,.92) 0%,rgba(2,16,29,.80) 36%,rgba(2,16,29,.12) 78%),url("tuff-rib-real-roof.webp")!important;background-position:center 48%!important;background-size:cover!important;}

.fastener-hero::after{background-image:url("tuff-rib-real-roof.webp")!important;background-position:center 48%!important;}