/* Roofline review: a distinct opening for each page role. */
:root{--soft-metal:url('/assets/roofers/bw-sons-rebuild/template-soft-action.webp')}
.header{position:relative;z-index:15}.header.over-hero{z-index:15}.inner .header{background:#f6f7f3}.header nav a{position:relative}.header nav a:after{content:'';position:absolute;bottom:-7px;left:0;width:0;height:2px;border-radius:2px;background:currentColor;transition:width .25s}.header nav a:hover:after,.header nav a:focus-visible:after{width:100%}
.motion-switch{position:fixed;bottom:24px;left:24px;z-index:18;display:flex;align-items:center;gap:14px;min-height:44px;padding:10px 16px;border:1px solid #ffffff70;border-radius:17px 23px 17px 23px;background:#25312ded;color:#fff;box-shadow:inset 0 1px #ffffff40,0 5px 18px #10221926;font-size:10px;letter-spacing:.03em}.motion-switch[hidden]{display:none}.motion-switch span{font-size:15px}
.btn:before{clip-path:none;border-radius:22px 35px 23px 32px;background:#252b2b}.btn:after{background-image:var(--soft-metal);background-size:104% 145%;inset:-4px -6px}.btn{padding-left:29px;padding-right:30px}.nav-cta:before{clip-path:none;border-radius:14px 20px 14px 20px}.material-tabs button:before{clip-path:none;border-radius:20px 27px 7px 7px}.service-row:before{clip-path:none;border-radius:22px 35px 22px 22px}.service-row img{border-radius:18px 24px 18px 24px}.menu,.round-arrow,.dialog-close{border-radius:16px 22px 16px 22px}.guide-trigger{border-radius:18px 23px 18px 23px}.core-item{border-radius:24px 36px 24px 30px}.cta:before{border-radius:inherit}.sample-stage img{filter:drop-shadow(0 20px 14px #29372d24)}
.glass-edit{position:absolute;top:150px;left:6%;z-index:3;width:250px;min-height:190px;padding:23px 25px;color:white;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:18px}.glass-edit-surface{position:absolute;inset:0;z-index:-1;border-radius:28px 55px 30px 45px;background:radial-gradient(ellipse at var(--light-x,15%) 0%,#e3edf84d,transparent 55%),linear-gradient(135deg,#3e526aca,#172d42d9);border:1px solid #ffffff82;box-shadow:inset 2px 2px 2px #ffffff69,inset -2px -2px 4px #0a1a2b66,0 18px 45px #09152338;transition:filter .3s;pointer-events:none}.glass-edit strong{font-size:26px;font-weight:500;line-height:1.08;letter-spacing:-.03em}.glass-edit .micro{font-size:9px;letter-spacing:.12em}.glass-edit-foot{display:flex;justify-content:space-between;gap:15px;font-size:10px}.glass-edit-foot b{font-size:17px;font-weight:400}.glass-edit:hover .glass-edit-surface,.glass-edit:focus-visible .glass-edit-surface{filter:brightness(1.13)}
@supports(backdrop-filter:blur(8px)){.glass-edit-surface{background:radial-gradient(ellipse at var(--light-x,15%) 0%,#ffffff47,transparent 60%),linear-gradient(135deg,#7593ad3b,#13253680);backdrop-filter:blur(9px) saturate(1.15)}}
.opening{min-height:700px;position:relative;isolation:isolate;margin:0 26px 70px;padding:70px 5% 100px;border-radius:28px 70px 35px 35px;background:#edf0e9;display:flex;align-items:center;overflow:hidden;box-shadow:inset 0 1px #fff,0 12px 36px #1c35220b}.opening-copy{position:relative;z-index:3;width:48%;max-width:680px}.opening h1{font-size:clamp(54px,6.5vw,102px);line-height:1.01;letter-spacing:-.055em;font-weight:500}.opening .label{font-size:10px;letter-spacing:.08em;margin-bottom:28px}.opening-lead{font-size:16px;line-height:1.65;margin-top:30px;max-width:430px;color:#46564d}.opening .btn{margin-top:30px;min-width:240px;font-size:12px}.opening-art{position:absolute;inset:0;z-index:1;pointer-events:none}.opening-media{position:absolute;inset:0;transform-origin:60% 55%}.opening-media img{width:100%;height:100%;object-fit:cover}.opening-caption{position:absolute;z-index:4;left:5%;right:5%;bottom:28px;display:flex;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid #697b6c40;font-size:9px;letter-spacing:.12em;color:#53645a}.opening-light{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 15% 0,#fff9,transparent 55%)}
.opening--specimen{background:radial-gradient(ellipse at 10% 30%,#fff,#e4ebe1 75%)}.opening--specimen .opening-art{inset:60px -5% 50px 43%}.opening--specimen .opening-media img{object-fit:contain;filter:drop-shadow(0 25px 18px #15291f18)}.opening--specimen .opening-light{background:linear-gradient(90deg,#f3f6ef30,transparent 60%)}
.opening--material{background:radial-gradient(ellipse at 15% 0%,#4d5b52,#202b26 65%);color:#fff;min-height:740px}.opening--material .opening-art{inset:45px -1% 45px 49%}.opening--material .opening-media img{object-fit:contain;filter:drop-shadow(0 28px 30px #060e09aa)}.opening--material .opening-light{background:radial-gradient(ellipse at 90% 10%,#bbcfc221,transparent 55%)}.opening--material .opening-lead{color:#d2dcd6}.opening--material .opening-caption{color:#d2ded5;border-color:#d0ddd340}
.opening--workshop{background:#e9e8df;min-height:740px}.opening--workshop .opening-copy{width:53%;padding:30px 0}.opening--workshop h1{font-size:clamp(54px,6vw,90px);max-width:680px}.opening--workshop .opening-art{inset:25px 25px 85px 55%;border-radius:160px 45px 45px 45px;overflow:hidden;box-shadow:0 18px 30px #24281c28}.opening--workshop .opening-media img{object-position:65% center}.opening--workshop .opening-light{background:linear-gradient(90deg,#f6f5ed77,transparent 58%)}
.opening--project,.opening--story{min-height:790px;color:#fff;background:#1d2a23}.opening--project .opening-art,.opening--story .opening-art{inset:0}.opening--project .opening-media img,.opening--story .opening-media img{object-position:70% center}.opening--project .opening-light,.opening--story .opening-light{background:linear-gradient(90deg,#0e211ad9, #0e211a20 80%),linear-gradient(0deg,#0a1715a8,transparent 35%)}.opening--project .opening-copy,.opening--story .opening-copy{width:55%;max-width:720px}.opening--project h1,.opening--story h1{font-size:clamp(60px,7.8vw,116px)}.opening--project .opening-lead,.opening--story .opening-lead{color:#f0f4ef;max-width:400px}.opening--project .opening-caption,.opening--story .opening-caption{color:white;border-color:#d0ddd340}.opening--story .opening-copy{align-self:flex-end;padding-bottom:20px}.opening--story .opening-art{inset:0}.opening--story .opening-media img{object-position:center 40%}.opening--story .opening-light{background:linear-gradient(0deg,#0c1b18ee,transparent 80%)}
.opening--detail{min-height:650px;background:radial-gradient(ellipse at 0% 0%,#fff,#e8ede6)}.opening--detail .opening-art{inset:35px 35px 86px 51%;border-radius:45px 110px 45px 65px;overflow:hidden;box-shadow:0 18px 26px #26342b26}.opening--detail .opening-copy{width:48%}.opening--detail h1{font-size:clamp(54px,6.2vw,96px)}.opening--detail .opening-media img{object-position:65% center}.opening--detail .opening-light{background:linear-gradient(90deg,#fff4,transparent 65%)}.opening--metal{background:radial-gradient(ellipse at 0% 0%,#f0f4ee,#d4ddd3)}.opening--replacement .opening-art{border-radius:110px 45px 65px 45px}.opening--repair .opening-media img{object-position:45% center}.opening--metal .opening-media img{object-position:52% center}
.opening--journal{background:radial-gradient(ellipse at 20% 20%,#f8f6ed,#e5e4d8);min-height:730px}.opening--journal .opening-art{inset:70px -3% 65px 46%}.opening--journal .opening-media img{object-fit:contain;filter:drop-shadow(0 20px 17px #3e402520)}.opening--journal .opening-copy{width:47%}.opening--journal .opening-light{background:linear-gradient(90deg,#fff3,transparent 60%)}
.reading-opening,.archive-opening{margin:0 26px 65px;min-height:650px;padding:80px 5% 60px;position:relative;isolation:isolate;border-radius:35px 80px 35px 35px;background:radial-gradient(ellipse at 0 0,#f8faf3,#dce4da);overflow:hidden}.reading-opening>div:last-child{position:relative;z-index:1;max-width:750px}.reading-opening h1{font-size:clamp(60px,8vw,120px);line-height:1.02;letter-spacing:-.055em;font-weight:500}.reading-opening p:not(.label){font-size:18px;margin-top:30px;max-width:450px}.reading-relief{position:absolute;right:-3%;top:-40px;font-size:clamp(260px,40vw,620px);letter-spacing:-.1em;font-weight:700;line-height:1.1;color:#cdd8cb;text-shadow:0 2px #ffffffe0,0 -1px #9ba996,12px 18px 20px #64755d14;pointer-events:none}.reading-meta{display:flex;gap:30px;margin-top:60px;font-size:9px;letter-spacing:.08em}.archive-opening{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center;background:radial-gradient(ellipse at 0 0,#3a4940,#17251d);color:white}.archive-opening h1{font-size:clamp(54px,6vw,88px);font-weight:500;line-height:1.05}.archive-opening p:not(.label){color:#ced9ce;font-size:16px;margin-top:30px}.archive-relief{text-align:center;position:relative;align-self:center}.archive-relief>span{display:block;font-size:clamp(160px,25vw,380px);font-weight:500;letter-spacing:-.09em;line-height:.85;color:#afc3b1;text-shadow:0 1px #eef6e5,0 -2px #637e64,0 15px 25px #09190a66}.archive-relief small{display:block;margin-top:35px;font-size:10px;letter-spacing:.12em;color:#cad9ce;line-height:1.8}
.contact-opening{max-width:none;margin:0 26px 60px;padding:70px 5%;border-radius:35px 80px 35px 35px;background:radial-gradient(ellipse at 10% 0,#f9faf2,#e6ebe1);gap:9%;position:relative}.contact-opening h1{font-size:clamp(58px,6.6vw,100px);font-weight:500;line-height:1.04;letter-spacing:-.055em}.contact-opening form{border-radius:30px 45px 30px 30px;background:linear-gradient(140deg,#ffffffd9,#eef2e8b8);border:1px solid #fff;box-shadow:inset 0 2px #fff,0 24px 50px #3e58381a}.contact-relief{padding:30px;border:1px solid #d5dfce;border-radius:24px 40px 24px 24px;background:linear-gradient(140deg,#fefefb,#dde5d7);box-shadow:inset 0 1px #fff,0 15px 25px #28391d0d;max-width:350px}.contact-relief span{font-size:25px;letter-spacing:-.03em;color:#53664f}.choice-group label{border-radius:12px 20px 12px 20px}.journal-index>a{grid-template-columns:1fr}.project-index{padding-top:0}.project-card>div{padding-top:0}
[data-motion-off] .hero-art,[data-motion-off] .opening-media,[data-motion-off] .sample-float,[data-motion-off] .reading-relief,[data-motion-off] .archive-relief{transform:none!important}[data-motion-off] *,[data-motion-off] *:before,[data-motion-off] *:after{animation:none!important;transition:none!important}
@media(max-width:1000px){.opening{margin:0 18px 50px;padding:55px 5% 90px;min-height:620px}.opening h1{font-size:58px}.opening-copy{width:49%}.opening--workshop h1{font-size:58px}.opening-lead{font-size:14px}.opening .btn{gap:18px;min-width:0;font-size:11px}.opening--project h1,.opening--story h1{font-size:80px}.reading-opening,.archive-opening{margin:0 18px 50px;padding:65px 5%;min-height:580px}.contact-opening{margin:0 18px 50px;padding:60px 5%}.contact-opening h1{font-size:70px}.glass-edit{width:210px;min-height:160px;padding:20px;top:135px}.glass-edit strong{font-size:23px}}
@media(max-width:700px){.opening{display:block;min-height:0;margin:0 12px 45px;padding:40px 7% 70px;border-radius:25px 48px 25px 25px}.opening-copy,.opening--workshop .opening-copy,.opening--detail .opening-copy,.opening--journal .opening-copy{width:100%;max-width:none;padding:0}.opening h1,.opening--workshop h1,.opening--detail h1{font-size:clamp(44px,10.8vw,67px);letter-spacing:-.055em;line-height:1.04}.opening .label{font-size:9px;margin-bottom:24px;letter-spacing:.05em}.opening-lead{font-size:14px;max-width:100%;margin-top:23px}.opening .btn{margin-top:25px;font-size:11px;min-height:62px;max-width:100%;gap:15px}.opening-art,.opening--specimen .opening-art,.opening--material .opening-art,.opening--journal .opening-art{position:relative;inset:auto;height:260px;margin:0 -5%;width:110%;z-index:2;order:2}.opening{display:flex;flex-direction:column;align-items:stretch}.opening-copy{order:1}.opening-light{z-index:0}.opening--specimen .opening-art{height:265px;margin-top:5px}.opening--material .opening-art{height:310px;margin-top:10px}.opening--journal .opening-art{height:300px;margin-top:15px}.opening-caption{left:7%;right:7%;bottom:22px;font-size:7px;letter-spacing:.04em;padding-top:15px;gap:10px}.opening-caption span:first-child{max-width:72%}.opening--workshop .opening-art,.opening--detail .opening-art{position:relative;inset:auto;height:290px;width:100%;margin:32px 0 15px;border-radius:60px 28px 28px 28px}.opening--detail .opening-art{height:260px}.opening--project,.opening--story{display:block;min-height:740px;padding-top:80px;justify-content:flex-end}.opening--project .opening-art,.opening--story .opening-art{position:absolute;inset:0;margin:0;width:100%;height:100%;z-index:0}.opening--project .opening-copy,.opening--story .opening-copy{width:100%;padding-top:220px;max-width:none}.opening--project h1,.opening--story h1{font-size:clamp(49px,12vw,70px)}.opening--project .opening-media img,.opening--story .opening-media img{object-position:65% center}.opening--project .opening-light,.opening--story .opening-light{z-index:1;background:linear-gradient(0deg,#0b1d18f5,#0b1d1830 80%)}.opening--project .opening-caption,.opening--story .opening-caption{z-index:4}.opening--project .opening-lead,.opening--story .opening-lead{max-width:100%}.reading-opening,.archive-opening{margin:0 12px 45px;padding:45px 7%;min-height:0;border-radius:25px 48px 25px 25px}.reading-opening h1{font-size:clamp(48px,12vw,70px)}.reading-opening p:not(.label){font-size:15px;max-width:88%}.reading-relief{font-size:320px;right:-35px;top:40px;opacity:.45}.reading-meta{margin-top:45px;gap:25px;font-size:8px;max-width:290px}.archive-opening{grid-template-columns:1fr;gap:45px}.archive-opening h1{font-size:clamp(43px,11vw,65px)}.archive-relief{text-align:right;padding-right:14px}.archive-relief>span{font-size:180px}.archive-relief small{font-size:9px;margin-top:25px}.contact-opening{display:grid;margin:0 12px 45px;padding:45px 7%;gap:35px;border-radius:25px 48px 25px 25px}.contact-opening h1{font-size:clamp(49px,12vw,70px)}.contact-marker{margin:25px 0 20px;padding:18px;line-height:2.8}.contact-relief span{font-size:20px}.contact-opening form{padding:26px 20px;border-radius:25px 35px 25px 25px}.motion-switch{bottom:14px;left:12px;font-size:9px;padding:10px 12px;min-height:44px}.guide-trigger{right:12px;bottom:14px}.glass-edit{top:120px;left:6%;width:175px;min-height:135px;padding:17px;gap:13px}.glass-edit strong{font-size:20px}.glass-edit .micro{font-size:7px}.glass-edit-foot{font-size:8px;gap:8px}.glass-edit-surface{border-radius:25px 40px 25px 30px}.hero{min-height:820px}.hero-content{bottom:110px}.hero h1{font-size:clamp(39px,10.5vw,58px)}.glass-edit-foot b{font-size:12px}.hero-side .btn{min-width:240px}.btn span{border-left:0;padding-left:8px}.hero-side{max-width:320px}}
@media(prefers-reduced-motion:reduce){.hero-art,.opening-media,.sample-float,.reading-relief,.archive-relief{transform:none!important}.glass-edit-surface{transition:none}.motion-switch{display:none!important}}