:root{--ink:#151918;--green:#34483e;--sage:#d9dfd7;--cream:#f2efe8;--white:#fff;--line:rgba(21,25,24,.16);--accent:#d5a968}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:"DM Sans",sans-serif}a{color:inherit;text-decoration:none}img{display:block;width:100%}.site-header{height:82px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;background:rgba(242,239,232,.94);backdrop-filter:blur(12px);position:fixed;z-index:20;top:0;width:100%;border-bottom:1px solid rgba(0,0,0,.08)}.brand{display:flex;align-items:center;gap:12px;font-family:Manrope,sans-serif;font-weight:800;letter-spacing:.12em}.brand b{color:#627467}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--ink);letter-spacing:-.08em;font-size:15px}.site-header nav{display:flex;align-items:center;gap:34px;font-size:14px;font-weight:600}.nav-cta{border:1px solid var(--ink);padding:12px 20px}.menu{display:none;background:none;border:0}.hero{height:min(920px,100vh);min-height:680px;position:relative;color:#fff;overflow:hidden;margin-top:82px}.hero>img{height:100%;object-fit:cover}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,15,13,.89) 0%,rgba(10,15,13,.62) 34%,rgba(10,15,13,.08) 67%)}.hero-copy{position:absolute;left:8vw;top:50%;transform:translateY(-50%);width:min(650px,80vw)}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.2em;margin:0 0 22px}.eyebrow.dark{color:#5f7066}.hero h1,.section h2,.why h2,.contact h2{font-family:Manrope,sans-serif;letter-spacing:-.045em;margin:0;line-height:1.02}.hero h1{font-size:clamp(48px,6.3vw,92px)}.hero h1 em{color:#d7c09b;font-style:normal}.hero-text{font-size:19px;line-height:1.6;max-width:570px;margin:28px 0}.hero-actions{display:flex;gap:14px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:17px 23px;font-weight:700;font-size:14px;border:1px solid rgba(255,255,255,.7);transition:.25s}.btn:hover{transform:translateY(-2px)}.btn.primary{background:#fff;color:var(--ink);border-color:#fff}.btn.ghost{color:#fff}.trust-row{display:flex;gap:25px;margin-top:34px;font-size:13px;color:rgba(255,255,255,.82)}.scroll{position:absolute;bottom:36px;right:5vw;font-size:10px;letter-spacing:.2em;display:flex;align-items:center;gap:12px}.scroll span{height:44px;width:1px;background:white}.section{padding:110px 8vw}.intro{display:grid;grid-template-columns:1.35fr .65fr;gap:9vw}.intro h2,.section-head h2{font-size:clamp(35px,4.2vw,62px);max-width:850px}.intro-copy{font-size:17px;line-height:1.75;color:#4c5651}.text-link{display:inline-flex;gap:40px;color:var(--ink);font-weight:700;border-bottom:1px solid;padding-bottom:9px;margin-top:15px}.products{background:#e4e7e1}.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:52px}.section-head>p{max-width:400px;color:#59635e;line-height:1.6}.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.product{background:#f5f3ee;display:grid;grid-template-columns:48% 52%;min-height:310px;overflow:hidden}.product-image{background-image:url("jm-steel-patio-hero.png");background-size:auto 155%;background-repeat:no-repeat}.roof-insulated{background-position:76% 28%}.roof-colorbond{background-position:62% 48%;filter:saturate(.75)}.roof-poly{background-position:35% 35%;filter:brightness(1.18) saturate(.75)}.roof-carport{background-position:90% 20%;filter:grayscale(.25)}.product-copy{padding:34px;display:flex;flex-direction:column}.product-copy>span{font-size:12px;color:#7c867f}.product h3{font:700 23px/1.2 Manrope;margin:45px 0 12px}.product p{color:#66706a;line-height:1.55;margin:0}.product a{font-weight:700;font-size:13px;margin-top:auto}.why{display:grid;grid-template-columns:1fr 1fr;background:var(--green);color:white}.why-image{overflow:hidden;min-height:720px}.why-image img{height:100%;object-fit:cover;object-position:65%;filter:saturate(.85)}.why-copy{padding:100px 8vw 90px 7vw}.why h2{font-size:clamp(42px,4.7vw,70px);margin-bottom:55px}.reason{display:grid;grid-template-columns:50px 1fr;gap:15px;border-top:1px solid rgba(255,255,255,.2);padding:27px 0}.reason>b{color:#c9d1ca}.reason h3{margin:0 0 7px;font:600 18px Manrope}.reason p{margin:0;color:rgba(255,255,255,.65);line-height:1.5}.project-grid{display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:330px 330px;gap:18px}.project{position:relative;background-image:linear-gradient(0deg,rgba(9,14,12,.75),transparent 60%),url("jm-steel-patio-hero.png");background-size:cover;color:white;overflow:hidden}.project.p1{grid-row:span 2;background-position:65% center}.project.p2{background-position:87% 30%}.project.p3{background-position:35% 40%;filter:saturate(.75)}.project>div{position:absolute;left:28px;bottom:25px}.project span{font-size:10px;letter-spacing:.16em}.project h3{font:600 24px Manrope;margin:8px 0 4px}.project p{margin:0;color:rgba(255,255,255,.72);font-size:13px}.project-note{text-align:center;color:#637069;margin:35px 0 0}.process{background:#d7ddd7}.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #9eaaa2}.step{padding:30px 30px 0 0;border-right:1px solid #a9b3ac;min-height:220px}.step:not(:first-child){padding-left:28px}.step:last-child{border-right:0}.step b{font-size:13px;color:#6b786f}.step h3{font:600 21px Manrope;margin:45px 0 12px}.step p{color:#5e6963;line-height:1.6;font-size:14px}.contact{background:#202824;color:white;padding:110px 8vw;display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw}.contact h2{font-size:clamp(40px,4.6vw,68px);max-width:650px}.contact-copy>p:not(.eyebrow){color:rgba(255,255,255,.66);line-height:1.65;max-width:580px}.direct{display:grid;gap:20px;margin-top:42px}.direct a,.direct span{display:flex;flex-direction:column;font:600 17px Manrope}.direct small{color:rgba(255,255,255,.5);font:600 10px "DM Sans";letter-spacing:.15em;margin-bottom:6px}form{background:#f4f1ea;color:var(--ink);padding:42px;display:grid;grid-template-columns:1fr 1fr;gap:24px 18px}.field{display:flex;flex-direction:column;gap:8px}.field.full{grid-column:1/-1}label{font-size:12px;font-weight:700}input,select,textarea{width:100%;border:0;border-bottom:1px solid #acb0aa;background:transparent;padding:11px 2px;font:15px "DM Sans";outline:none;border-radius:0}input:focus,select:focus,textarea:focus{border-color:var(--green)}textarea{resize:vertical}.submit{background:var(--green)!important;color:white!important;border-color:var(--green)!important;grid-column:1/-1}.form-note{grid-column:1/-1;text-align:center;font-size:11px;color:#727a75;margin:0}footer{background:#111614;color:#fff;padding:52px 8vw 90px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:35px;align-items:start}footer p{color:rgba(255,255,255,.55);margin:0;max-width:300px}footer>div{display:flex;flex-direction:column;gap:8px}footer small{grid-column:1/-1;color:rgba(255,255,255,.38);border-top:1px solid rgba(255,255,255,.15);padding-top:28px}.mobile-call{display:none}.reveal{animation:rise .8s ease both}@keyframes rise{from{opacity:0;transform:translateY(calc(-50% + 18px))}to{opacity:1;transform:translateY(-50%)}}
@media(max-width:900px){.site-header{height:70px}.site-header nav{position:absolute;top:70px;left:0;right:0;background:var(--cream);padding:25px 5vw;display:none;flex-direction:column;align-items:flex-start}.site-header nav.open{display:flex}.menu{display:flex;flex-direction:column;gap:6px}.menu span{width:25px;height:2px;background:var(--ink)}.hero{margin-top:70px;height:790px}.hero-shade{background:linear-gradient(90deg,rgba(10,15,13,.83),rgba(10,15,13,.15))}.hero-copy{left:6vw}.trust-row{flex-direction:column;gap:8px}.section{padding:80px 6vw}.intro{grid-template-columns:1fr;gap:35px}.section-head{align-items:start;flex-direction:column}.product-grid{grid-template-columns:1fr}.why{grid-template-columns:1fr}.why-image{min-height:480px}.project-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.project{min-width:82vw;height:470px;scroll-snap-align:start}.steps{grid-template-columns:1fr 1fr}.step:nth-child(2){border-right:0}.contact{grid-template-columns:1fr;padding:80px 6vw}.mobile-call{display:block;position:fixed;z-index:30;bottom:14px;left:5vw;right:5vw;background:#e2b36f;color:#17201b;padding:15px;text-align:center;font-weight:800;box-shadow:0 8px 28px rgba(0,0,0,.25)}footer{grid-template-columns:1fr 1fr;padding-bottom:100px}}
@media(max-width:560px){.hero h1{font-size:46px}.hero-text{font-size:16px}.hero-actions .btn{width:100%}.scroll{display:none}.product{grid-template-columns:1fr}.product-image{height:220px;background-size:cover}.product h3{margin-top:24px}.project{min-width:88vw;height:420px}.steps{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px solid #a9b3ac;padding-left:0!important}.contact{gap:50px}form{padding:28px 20px;grid-template-columns:1fr}.field{grid-column:1/-1}footer{grid-template-columns:1fr}.site-header .brand{font-size:13px}.brand-mark{width:34px;height:34px}}

/* Real JM Steel Patio project showcase */
.roof-insulated{background-image:url("hero-marketing.webp");background-size:cover;background-position:center}
.roof-colorbond{background-image:url("colorbond-marketing.webp");background-size:cover;background-position:center;filter:none}
.roof-poly{background-image:url("polycarbonate-marketing.webp");background-size:cover;background-position:center;filter:none}
.insulated-feature{display:grid;grid-template-columns:.82fr 1.18fr;gap:7vw;align-items:center;background:#f4f1eb}
.insulated-copy h2{font-size:clamp(40px,4.4vw,66px)}
.insulated-copy>p:not(.eyebrow){font-size:17px;line-height:1.7;color:#58635d;margin:28px 0}
.insulated-copy ul{list-style:none;padding:0;margin:30px 0}
.insulated-copy li{display:grid;grid-template-columns:45px 1fr;gap:14px;border-top:1px solid var(--line);padding:20px 0}
.insulated-copy li span{font-size:12px;color:#78827c}
.insulated-copy li div{display:flex;flex-direction:column;gap:7px}
.insulated-copy li b{font:600 17px Manrope}
.insulated-copy li small{font-size:14px;line-height:1.5;color:#68726c}
.insulated-media{position:relative;min-height:720px}
.insulated-media img{position:absolute;object-fit:cover;box-shadow:0 18px 45px rgba(20,30,25,.16)}
.media-main{inset:0 13% 10% 0;width:87%;height:90%}
.media-detail{right:0;bottom:0;width:46%!important;height:39%;border:9px solid #f4f1eb}
.colorbond-feature{display:grid;grid-template-columns:1.18fr .82fr;gap:7vw;align-items:center;background:#dfe4df}
.colorbond-copy h2{font-size:clamp(40px,4.4vw,66px)}
.colorbond-copy>p:not(.eyebrow){font-size:17px;line-height:1.7;color:#58635d;margin:28px 0}
.colorbond-media{position:relative;min-height:720px}
.colorbond-media img{position:absolute;object-fit:cover;box-shadow:0 18px 45px rgba(20,30,25,.14)}
.cb-main{inset:7% 0 7% 12%;width:88%;height:86%}
.cb-top{left:0;top:0;width:45%!important;height:32%;border:8px solid #dfe4df}
.cb-bottom{left:0;bottom:0;width:48%!important;height:35%;border:8px solid #dfe4df}
.cb-benefits{border-top:1px solid var(--line);margin:30px 0}
.cb-benefits>div{padding:18px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.cb-benefits b{font:600 17px Manrope}
.cb-benefits span{font-size:14px;color:#68726c}
.poly-feature{display:grid;grid-template-columns:.8fr 1.2fr;gap:7vw;align-items:center;background:#26322f;color:#fff}
.poly-copy h2{font-size:clamp(40px,4.4vw,66px)}
.poly-copy>p:not(.eyebrow){font-size:17px;line-height:1.7;color:rgba(255,255,255,.68);margin:28px 0}
.poly-options{margin:32px 0 34px;border-top:1px solid rgba(255,255,255,.2)}
.poly-options>div{display:flex;flex-direction:column;gap:6px;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.poly-options span{font-size:11px;letter-spacing:.13em;color:#b6c6bd}
.poly-options b{font:600 17px Manrope}
.poly-media{position:relative;min-height:720px}
.poly-media img{position:absolute;object-fit:cover;box-shadow:0 18px 45px rgba(0,0,0,.24)}
.poly-main{inset:0 18% 12% 0;width:82%;height:88%}
.poly-side{right:0;top:9%;width:42%!important;height:38%;border:8px solid #26322f}
.poly-detail{right:0;bottom:0;width:48%!important;height:39%;border:8px solid #26322f}
.project-grid{grid-template-columns:repeat(12,1fr);grid-template-rows:360px 360px 280px 280px 280px;gap:18px}
.project{background:#34483e;isolation:isolate}
.project>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.project::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,14,12,.88),transparent 68%);z-index:-1;pointer-events:none}
.project>div{right:24px}
.project.p10>img{object-position:center 42%}
.project.p11>img{object-position:center 46%}
.project.p1{grid-column:span 7;grid-row:span 1}
.project.p2{grid-column:span 5}
.project.p10{grid-column:span 7;background-position:center 42%}
.project.p11{grid-column:span 5;background-position:center 46%}
.project.p3,.project.p4,.project.p5{grid-column:span 4}
.project.p6,.project.p7,.project.p8,.project.p9{grid-column:span 6}
.project-motion{margin-top:56px;background:#e3e7e1;padding:28px;display:grid;grid-template-columns:1fr repeat(4,160px);gap:18px;align-items:center}
.project-motion h3{font:600 clamp(27px,3vw,42px)/1.1 Manrope;margin:0 0 15px}
.project-motion>div>p:last-child{color:#667069;line-height:1.6;max-width:420px}
.project-motion video{width:100%;height:390px;object-fit:cover;background:#111}
@media(max-width:900px){.hero>img{object-position:58% center}.insulated-feature,.colorbond-feature,.poly-feature{grid-template-columns:1fr}.insulated-media,.colorbond-media,.poly-media{min-height:620px}.colorbond-copy{grid-row:1}.project-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:none;overflow:visible}.project,.project.p1,.project.p2,.project.p3,.project.p4,.project.p5,.project.p6,.project.p7,.project.p8,.project.p9,.project.p10,.project.p11{grid-column:auto;grid-row:auto;min-width:0;height:420px}.project-motion{grid-template-columns:repeat(2,1fr)}.project-motion>div{grid-column:1/-1}.project-motion video{height:480px}}
@media(max-width:560px){.insulated-media,.colorbond-media,.poly-media{min-height:480px}.media-main{inset:0 8% 8% 0;width:92%;height:92%}.media-detail{width:49%!important;height:35%}.cb-main{inset:5% 0 5% 8%;width:92%;height:90%}.cb-top{width:48%!important;height:30%}.cb-bottom{width:50%!important;height:32%}.poly-main{inset:0 12% 10% 0;width:88%;height:90%}.poly-side{width:45%!important;height:34%}.poly-detail{width:50%!important;height:36%}.project-grid{grid-template-columns:1fr}.project,.project.p1,.project.p2,.project.p3,.project.p4,.project.p5,.project.p6,.project.p7,.project.p8,.project.p9,.project.p10,.project.p11{height:430px}.project-motion{grid-template-columns:1fr;padding:20px}.project-motion>div{grid-column:auto}.project-motion video{height:auto;max-height:620px}}