/* Roofline: zinc, folded edges, mineral surfaces. Semantic controls stay uncut. */
:root{--zinc:#242a2c;--edge:#d3d9d8;--cut:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px))}
.hero-art-clip{position:absolute;inset:0;overflow:hidden;z-index:-2;background:#17212a}
.hero-art{position:absolute;inset:0;transform-origin:50% 60%}
.hero-photo{z-index:0}
.hero-shade{pointer-events:none}
.hero h1{text-shadow:0 2px 2px #0002,0 12px 30px #0003}
.btn,.btn.light,.btn:hover,.btn.light:hover{position:relative;isolation:isolate;background:transparent;border:0;border-radius:0;color:#fff;min-height:66px;padding:19px 27px 18px;transform:none;filter:drop-shadow(0 7px 5px #0002);transition:filter .2s}
.btn:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:#262b2e;clip-path:var(--cut);box-shadow:inset 0 1px 0 #fff8,inset 0 -4px 0 #0006}
.btn:after{content:'';position:absolute;inset:-3px -5px;z-index:-1;pointer-events:none;background:url('/roofers/templates/shared-owner-gate-20261108/assets/roofline/action-surface.webp') center / 110% 184% no-repeat;transition:filter .2s,transform .18s}
.btn:hover:after,.btn:focus-visible:after{filter:brightness(1.22);transform:translateY(-2px)}
.btn:active:after{transform:translateY(2px);filter:brightness(.92)}
.btn:active{filter:drop-shadow(0 2px 2px #0002)}
.btn span{border-left:1px solid #b9c6c34d;padding-left:19px}
.hero-side .btn{min-width:270px}
.nav-cta{border:0;position:relative;min-height:48px;padding:12px 18px;isolation:isolate}
.nav-cta:before{content:'';position:absolute;inset:0;z-index:-1;clip-path:var(--cut);background:linear-gradient(120deg,#ffffff2e,#fff0 48%,#ffffff1a);border:1px solid #ffffff70;box-shadow:inset 0 1px #fff8,inset 0 -2px #0003}
.inner .nav-cta:before{background:linear-gradient(120deg,#e5e9e7,#f7f8f7 50%,#cdd4d1);box-shadow:inset 0 1px #fff,inset 0 -2px #b6beb9}
.menu,.round-arrow,.dialog-close{border-radius:4px 15px 4px 15px;background:linear-gradient(140deg,#42494b,#171d1f 65%,#30393b);color:white;box-shadow:inset 0 1px #ffffff70,inset 0 -2px #0007,0 3px 5px #0002;border:1px solid #5c6665}
.text-link{min-height:44px}
.text-link>span{display:grid;place-items:center;width:30px;height:30px;background:linear-gradient(135deg,#e5e9e7,#fff 45%,#c6ceca);border-radius:0 10px 0 10px;box-shadow:inset 0 -2px #b5beba;transition:transform .2s}
.text-link:hover>span{transform:translate(2px,-2px)}
.materials{position:relative;background:radial-gradient(ellipse at 12% 30%,#fff 0,#f4f5f3 42%,#e3e7e4 100%);box-shadow:inset 0 1px #fff,inset 0 -1px #cbd1ce}
.material-tabs{gap:12px;border:0;padding:0 0 5px}
.material-tabs button{padding:14px 19px;color:#46504a;gap:23px;flex:1;isolation:isolate}
.material-tabs button:before{content:'';position:absolute;inset:0;z-index:-1;clip-path:polygon(0 8px,8px 0,calc(100% - 20px) 0,100% 100%,0 100%);background:linear-gradient(155deg,#fff,#e0e5e1 75%,#b6c0ba);box-shadow:inset 0 1px #fff,inset 0 -3px #b6c0ba}
.material-tabs button[aria-selected=true]{color:#fff}
.material-tabs button[aria-selected=true]:before{background:linear-gradient(135deg,#49534e,#202824 70%,#35413b);box-shadow:inset 0 1px #7b8980,inset 0 -3px #121b16}
.material-tabs button[aria-selected=true]:after{height:0}
.sample-stage{padding:15px 0 35px;isolation:isolate}
.sample-stage:after{content:'';position:absolute;left:19%;right:17%;height:24px;bottom:55px;border-radius:50%;background:#222b2424;filter:blur(14px);z-index:-1}
.sample-float{position:relative;z-index:1}
.sample-stage img{filter:drop-shadow(0 14px 9px #29372d1a);transition:filter .3s;transform:none!important}
.sample-stage:hover img{filter:drop-shadow(0 18px 11px #29372d29)}
.sample-no{color:#dce2dd;text-shadow:0 1px #fff,0 -1px #b5c0b9;top:5%;font-size:clamp(120px,17vw,230px)}
.sample-stage small{position:relative;z-index:2;font-size:9px;letter-spacing:.16em}
.service-row{margin-bottom:9px;border:0;position:relative;isolation:isolate;padding:23px 18px;gap:5%}
.service-row:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,#f8f9f7,#fff 55%,#edf0ed);clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%);box-shadow:inset 0 1px #d7ded8,inset 0 -2px #dce2dc;transition:filter .2s}
.service-row:hover{background:none;padding:23px 18px}
.service-row:hover:before{filter:brightness(.97)}
.service-row img{border-radius:0 18px 0 18px;box-shadow:0 6px 10px #1720191a;transition:transform .3s}
.service-row:hover img,.service-row:focus-visible img{transform:scale(1.025)}
.row-num{color:#58665c;text-shadow:0 1px white}
.service-row:last-child{border:0}
.featured-photo{overflow:hidden}
.featured-photo>img{height:100%;object-fit:cover}
.featured-copy{background:radial-gradient(ellipse at 0 0,#4a5550,#202924 70%)}
.steps article{border-top:0;position:relative;padding-top:30px}
.steps article:before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(#e5eae6,#a7b2ab 45%,#fafcf9 60%,#c1cbc3);clip-path:polygon(0 0,98% 0,100% 100%,0 100%)}
.cta{background:radial-gradient(ellipse at 10% 0,#414c46,#1c2420 70%);position:relative;isolation:isolate;border-top:5px solid #727e76;box-shadow:inset 0 2px #c2c9c4,inset 0 5px #101911}
.cta:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.08;background:repeating-linear-gradient(105deg,transparent 0 2px,#dbe5dd 3px,transparent 4px 7px)}
.guide-trigger{border-radius:0 16px 0 16px;background:linear-gradient(145deg,#fff,#edf1ed 65%,#c4cec7);border:1px solid #b4c0b6;box-shadow:inset 0 1px #fff,inset 0 -3px #b9c6bc,0 7px 15px #16281c26;min-height:52px}
.guide-options button,.back{background:linear-gradient(130deg,#f6f8f5,#e1e7e1);border-radius:0 12px 0 12px;box-shadow:inset 0 1px #fff,inset 0 -2px #c2cdc3;min-height:44px}
.core-item{border-radius:0 20px 0 20px;background:linear-gradient(140deg,#f7f9f6,#e3e9e2);box-shadow:inset 0 1px #fff,inset 0 -3px #c4d0c5}
.contact-layout form{background:linear-gradient(150deg,#f9fbf7,#edf1eb);box-shadow:inset 0 2px #fff,0 14px 28px #21351b0d;border:1px solid #d3ddd0}
.contact-marker{margin:40px 0 25px;border-left:4px solid #c3cec4;padding-left:24px;font-size:12px;letter-spacing:.1em;line-height:4}
.contact-marker span{margin-right:25px;color:#6d7c70}
.journal-object{font-size:clamp(100px,20vw,240px);line-height:1;color:#3b4940;padding:40px;background:linear-gradient(140deg,#edf2eb,#ccd7ce);text-shadow:0 2px #fff;border-radius:0 50px 0 50px;box-shadow:inset 0 1px #fff,inset 0 -5px #bbc8bd}
.journal-object small{font-size:12px;letter-spacing:.2em;display:block;margin-top:30px}
@media(max-width:900px){.material-tabs button{font-size:11px;padding:14px 12px;gap:12px}.hero-side .btn{min-width:0}.service-row{gap:20px}}
@media(max-width:560px){.hero{min-height:740px}.hero h1{font-size:clamp(40px,10.7vw,58px)}.hero-side .btn{min-width:250px}.btn{font-size:12px;padding:18px 23px}.btn span{padding-left:10px}.material-tabs{gap:6px}.material-tabs button{font-size:9px;padding:12px 14px 12px 9px;gap:4px;min-height:62px}.material-tabs button span{font-size:8px}.sample-stage:after{bottom:38px}.sample-stage{padding-bottom:16px}.service-row,.service-row:hover{padding:22px 12px;gap:12px;grid-template-columns:20px 64px 1fr}.service-row h3{font-size:20px}.service-row p{font-size:11px}.service-row img{height:90px}.cta .btn{max-width:345px}.contact-layout form{padding:25px 20px}.journal-object{padding:30px;font-size:140px}.form-actions .btn{padding:15px 20px}.core-item strong{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.hero-art,.sample-float{transform:none!important}.btn:after,.text-link>span,.service-row img{transition:none!important;transform:none!important}}
@media print{.hero-art,.sample-float{transform:none!important}.material-panel[hidden]{display:grid!important}.guide-trigger,.menu{display:none!important}}