/* ECD — generated by tools/convert/run.mjs. Do not edit.
   1. tools/design/ecd-site/assets/css/site.css — the prototype's shared stylesheet
   2. the prototype's per-page <style> rules that every page has
   3. the rest of those rules, scoped to the pages that have them
   4. tools/convert/theme.css — chrome for the admin's own blocks
   Edit those sources and re-run, never this file. */

/* --- 1. the prototype's site.css --- */
body{margin: 0px; background: rgb(243, 245, 246); color: rgb(16, 28, 38); font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.65;}
*{box-sizing: border-box;}
a{color: rgb(179, 64, 10);}
a:hover{color: rgb(122, 43, 5);}
h1, h2, h3, h4{font-family: Archivo, "Arial Narrow", system-ui, sans-serif; font-stretch: 112%; line-height: 1.08; letter-spacing: -0.015em; margin: 0px; text-wrap: balance;}
h1{font-size: clamp(38px, 5.2vw, 64px); font-weight: 800;}
h2{font-size: clamp(28px, 3.2vw, 40px); font-weight: 750;}
h3{font-size: 21px; font-weight: 700; line-height: 1.25;}
p, ul, ol{margin: 0px;}
p{text-wrap: pretty;}
.w{max-width: 1200px; margin: 0px auto; padding: 0px 24px;}
.mono{font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;}
.sec{padding: 88px 0px;}
.bp{background-color: rgb(10, 34, 54); background-image: linear-gradient(rgba(150, 190, 225, 0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.11) 1px, transparent 1px), linear-gradient(rgba(150, 190, 225, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.05) 1px, transparent 1px); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; color: rgb(230, 237, 243);}
.bp a{color: rgb(255, 178, 122);}
.bp a:hover{color: rgb(255, 211, 176);}
.bp .mono{color: rgb(159, 194, 222);}
.paper{background: rgb(255, 255, 255);}
.lbl{display: flex; align-items: center; gap: 12px; color: rgb(85, 102, 122);}
.lbl::before{content: ""; width: 28px; height: 2px; background: rgb(232, 89, 12);}
.ans{font-size: 19px; line-height: 1.65; max-width: 780px; padding: 18px 0px 0px; border-top: 2px solid rgb(232, 89, 12);}
.bp .ans{color: rgb(220, 230, 238);}
.btn{display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0px 26px; background: rgb(194, 65, 12); color: rgb(255, 255, 255); text-decoration: none; font-weight: 600; font-size: 16px; border: 0px; border-radius: 2px; cursor: pointer; font-family: inherit;}
.btn:hover{background: rgb(154, 52, 18); color: rgb(255, 255, 255);}
.bp .btn, .bp .btn:hover, .hd .btn, .hd .btn:hover{color: rgb(255, 255, 255);}
.btn-o{display: inline-flex; align-items: center; min-height: 50px; padding: 0px 24px; border: 1.5px solid; color: inherit; text-decoration: none; font-weight: 600; border-radius: 2px;}
.bp .btn-o{color: rgb(230, 237, 243);}
.ph{display: inline; border: 1px dashed rgb(194, 65, 12); background: rgb(255, 241, 232); color: rgb(122, 43, 5); padding: 0px 5px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.82em; border-radius: 2px;}
.bp .ph, .ft .ph, .hd .ph{background: rgba(232, 89, 12, 0.16); color: rgb(255, 211, 176); border-color: rgb(255, 154, 92);}
.draft{display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border: 1px dashed rgb(194, 65, 12); background: rgb(255, 241, 232); color: rgb(92, 33, 4); font-size: 15px;}
.card{background: rgb(255, 255, 255); border: 1px solid rgb(210, 219, 226); padding: 28px;}
.grid{display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));}
.grid-s{display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));}
.two{display: grid; gap: 56px; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); align-items: start;}
.side{display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start;}
.side > .main{flex: 999 1 560px; min-width: 0px;}
.side > .aside{flex: 1 1 300px; display: grid; gap: 20px; position: relative;}
.tb{overflow-x: auto; border: 1px solid rgb(202, 212, 220); background: rgb(255, 255, 255);}
.tb table{width: 100%; border-collapse: collapse; font-size: 16px; min-width: 560px;}
.tb th{text-align: left; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: rgb(64, 82, 95); background: rgb(238, 242, 244); padding: 14px 18px; border-bottom: 1px solid rgb(202, 212, 220);}
.tb td{padding: 14px 18px; border-bottom: 1px solid rgb(225, 231, 235); vertical-align: top;}
.tb tr:last-child td{border-bottom: 0px;}
.tb td.n{font-family: "JetBrains Mono", monospace; font-size: 14px; white-space: nowrap;}
.tb caption{caption-side: bottom; text-align: left; padding: 12px 18px; font-size: 13px; color: rgb(85, 102, 122); border-top: 1px solid rgb(225, 231, 235);}
.faq{display: grid; border-top: 1px solid rgb(202, 212, 220);}
.faq details{border-bottom: 1px solid rgb(202, 212, 220); padding: 4px 0px;}
.faq summary{cursor: pointer; list-style: none; padding: 20px 40px 20px 0px; font-weight: 600; font-size: 18px; position: relative;}
.faq summary::-webkit-details-marker{display: none;}
.faq summary::after{content: "+"; position: absolute; right: 4px; top: 16px; font-family: "JetBrains Mono", monospace; font-size: 22px; color: rgb(194, 65, 12);}
.faq details[open] summary::after{content: "–";}
.faq details p{padding: 0px 0px 22px; max-width: 820px; color: rgb(42, 58, 71);}
.img{position: relative; background-color: rgb(227, 233, 237); background-image: repeating-linear-gradient(135deg, rgba(10, 34, 54, 0.07) 0px, rgba(10, 34, 54, 0.07) 1px, transparent 1px, transparent 14px); border: 1px solid rgb(198, 209, 217); display: flex; align-items: flex-end; padding: 14px; color: rgb(64, 82, 95); font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;}
.links{display: flex; flex-wrap: wrap; gap: 10px;}
.links a{display: inline-flex; align-items: center; min-height: 44px; padding: 0px 16px; border: 1px solid rgb(185, 198, 208); background: rgb(255, 255, 255); text-decoration: none; color: rgb(16, 28, 38); font-weight: 500; font-size: 15px;}
.links a:hover{border-color: rgb(194, 65, 12); color: rgb(179, 64, 10);}
.crumb{display: flex; flex-wrap: wrap; gap: 8px; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(159, 194, 222);}
.bp .crumb a{color: rgb(207, 224, 238); text-decoration: none;}
.rev{font-family: "JetBrains Mono", monospace; font-size: 13px; color: rgb(159, 194, 222);}
.steps{list-style: none; padding: 0px; margin: 0px; display: grid; counter-reset: s 0;}
.steps li{display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 24px 0px; border-top: 1px solid rgb(202, 212, 220);}
.steps li::before{counter-increment: s 1; content: counter(s, decimal-leading-zero); font-family: "JetBrains Mono", monospace; font-size: 26px; color: rgb(194, 65, 12); line-height: 1.1;}
.steps .d{font-family: "JetBrains Mono", monospace; font-size: 13px; color: rgb(64, 82, 95); display: block; margin-top: 4px;}
.steps b{font-family: Archivo, sans-serif; font-stretch: 108%; font-size: 19px;}
.body{max-width: 800px;}
.body p + p{margin-top: 18px;}
.body > h2{margin: 72px 0px 20px;}
.body > h2:first-child{margin-top: 0px;}
.body h3{margin: 36px 0px 12px;}
.body ul, .body ol{padding-left: 22px; margin-top: 14px; display: grid; gap: 8px;}
.body .tb{margin: 28px 0px;}
.body .steps{margin: 20px 0px;}
.body ul + p, .body ol + p, .body .tb + p, .body .steps + p{margin-top: 18px;}
.box{border: 1px solid rgb(210, 219, 226); background: rgb(255, 255, 255); padding: 24px;}
.box h3{font-size: 17px; margin-bottom: 10px;}
.kv{display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 15px;}
.kv dt{font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(85, 102, 122); padding-top: 3px;}
.kv dd{margin: 0px;}
.hd{background: rgb(10, 34, 54); color: rgb(230, 237, 243); border-bottom: 1px solid rgba(150, 190, 225, 0.18);}
.hdi{display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; min-height: 76px; padding-top: 12px; padding-bottom: 12px;}
.logo{display: flex; align-items: center; gap: 12px; color: rgb(255, 255, 255); text-decoration: none; margin-right: auto;}
.logo b{font-family: Archivo, sans-serif; font-stretch: 125%; font-weight: 800; font-size: 24px; letter-spacing: 0.04em;}
.logo span{font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(159, 194, 222); line-height: 1.35;}
.nav{display: flex; flex-wrap: wrap; gap: 4px 22px;}
.nav a{color: rgb(216, 227, 236); text-decoration: none; font-size: 15px; font-weight: 500; padding: 10px 0px;}
.nav a:hover{color: rgb(255, 255, 255);}
.hdc{display: flex; align-items: center; gap: 16px; flex-wrap: wrap;}
.tel{color: rgb(255, 255, 255); text-decoration: none; font-family: "JetBrains Mono", monospace; font-size: 14px;}
.ft{background: rgb(7, 24, 38); color: rgb(183, 199, 212); font-size: 15px;}
.ft a{color: rgb(220, 230, 238); text-decoration: none;}
.ft a:hover{color: rgb(255, 178, 122);}
.ftg{display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); padding: 72px 0px 48px;}
.ft h4{font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: rgb(143, 179, 208); margin-bottom: 16px;}
.ft ul{list-style: none; padding: 0px; display: grid; gap: 8px;}
.ftb{display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; border-top: 1px solid rgba(150, 190, 225, 0.16); padding: 24px 0px 40px; font-size: 13px;}
.field{display: grid; gap: 6px;}
.field label, .field legend{font-size: 14px; font-weight: 600;}
.field input, .field select, .field textarea{font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 16px; min-height: 48px; padding: 10px 14px; border: 1px solid rgb(159, 176, 189); background: rgb(255, 255, 255); color: rgb(16, 28, 38); border-radius: 2px; width: 100%;}
.field textarea{min-height: 120px; resize: vertical;}
.bp .field label{color: rgb(230, 237, 243);}
.form{display: grid; gap: 16px; background: rgb(255, 255, 255); color: rgb(16, 28, 38); padding: 32px; border-top: 4px solid rgb(232, 89, 12);}
.svc{display: flex; flex-direction: column; gap: 10px; padding: 24px; background: rgb(255, 255, 255); border: 1px solid rgb(210, 219, 226); text-decoration: none; color: rgb(16, 28, 38);}
.svc:hover{border-color: rgb(194, 65, 12); color: rgb(16, 28, 38);}
.svc b{font-family: Archivo, sans-serif; font-stretch: 108%; font-size: 20px; line-height: 1.2;}
.svc span{font-size: 15.5px; color: rgb(62, 79, 92); line-height: 1.55;}
.svc i{font-style: normal; font-family: "JetBrains Mono", monospace; font-size: 11px; color: rgb(179, 64, 10); letter-spacing: 0.1em;}
.pill{display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid rgba(150, 190, 225, 0.28); background: rgba(10, 34, 54, 0.6); text-decoration: none;}
.opts{display: flex; flex-wrap: wrap; gap: 8px;}
.opt{min-height: 44px; padding: 0px 16px; border: 1.5px solid rgb(159, 176, 189); background: rgb(255, 255, 255); color: rgb(16, 28, 38); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 15px; font-weight: 500; border-radius: 2px; cursor: pointer;}
.opt:hover{border-color: rgb(194, 65, 12);}
.opt.on{background: rgb(10, 34, 54); border-color: rgb(10, 34, 54); color: rgb(255, 255, 255);}
.tool{display: grid; gap: 28px; background: rgb(255, 255, 255); border-width: 4px 1px 1px; border-style: solid; border-color: rgb(232, 89, 12) rgb(202, 212, 220) rgb(202, 212, 220); border-image: none; padding: 32px;}
.q{display: grid; gap: 12px; padding-bottom: 22px; border-bottom: 1px dashed rgb(202, 212, 220);}
.q:last-child{border-bottom: 0px; padding-bottom: 0px;}
.q > p{font-weight: 600;}
.res{background: rgb(10, 34, 54); color: rgb(230, 237, 243); padding: 32px; display: grid; gap: 18px;}
.res .big{font-family: Archivo, sans-serif; font-stretch: 112%; font-weight: 800; font-size: clamp(30px, 4vw, 46px); line-height: 1.05; color: rgb(255, 255, 255);}
.res .mono{color: rgb(159, 194, 222);}
.res a{color: rgb(255, 178, 122);}
.meter{height: 10px; background: rgba(150, 190, 225, 0.2); position: relative;}
.meter span{position: absolute; left: 0px; top: 0px; bottom: 0px; background: rgb(232, 89, 12);}
.range{width: 100%; accent-color: rgb(194, 65, 12); min-height: 44px;}
.toc{display: grid; gap: 4px; padding: 22px; border: 1px solid rgb(210, 219, 226); background: rgb(255, 255, 255);}
.toc a{text-decoration: none; color: rgb(16, 28, 38); font-size: 15px; padding: 6px 0px; border-bottom: 1px dashed rgb(225, 231, 235);}
.toc a:hover{color: rgb(179, 64, 10);}
.note{font-size: 14px; color: rgb(85, 102, 122);}

/* --- 2. page <style> rules every page has --- */
.box .bxh{font-family: Archivo, "Arial Narrow", system-ui, sans-serif; font-stretch: 112%; font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; margin: 0px 0px 10px;}
.ctah{font-family: Archivo, "Arial Narrow", system-ui, sans-serif; font-stretch: 112%; font-size: clamp(28px, 3.2vw, 40px); font-weight: 750; line-height: 1.08; letter-spacing: -0.015em; margin: 0px; text-wrap: balance;}
.side > .aside{min-width: 0px; max-width: 100%;}
.box{min-width: 0px; overflow-wrap: anywhere;}
@media (max-width: 760px){
.hdi{gap: 8px 14px; min-height: 0px; padding-top: 10px; padding-bottom: 8px;}
.logo span{display: none;}
.nav{order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; gap: 22px; scrollbar-width: none; mask-image: linear-gradient(90deg, rgb(0, 0, 0) 85%, transparent);}
.nav::-webkit-scrollbar{display: none;}
.nav a{white-space: nowrap; padding: 6px 0px; font-size: 14px;}
.hd .btn{padding: 10px 14px; font-size: 14px;}
}
@media (max-width: 480px){
.hd .hdc .btn{display: none;}
.hd .tel{border: 1px solid rgba(159, 194, 222, 0.5); padding: 9px 12px; font-size: 13px;}
}

/* --- 3. page <style> rules scoped to their own pages --- */
body[data-page="home"] h1{font-size: clamp(38px, 5.2vw, 68px); font-weight: 800;}
body[data-page="home"] h2{font-size: clamp(28px, 3.2vw, 42px); font-weight: 750;}
body[data-page="home"] .sec{padding: 96px 0px;}
body[data-page="home"] .bp .btn,body[data-page="home"] .bp .btn:hover,body[data-page="services"] .bp .btn,body[data-page="services"] .bp .btn:hover{color: rgb(255, 255, 255);}
body[data-page="home"] .field label{font-size: 14px; font-weight: 600;}
body[data-page="home"] .pill{display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid rgba(150, 190, 225, 0.28); background: rgba(10, 34, 54, 0.6);}
body[data-page="home"] .svc{display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; background: rgb(255, 255, 255); border: 1px solid rgb(210, 219, 226); text-decoration: none; color: rgb(16, 28, 38); min-height: 132px;}
body[data-page="home"] .svc b{font-family: Archivo, sans-serif; font-stretch: 108%; font-size: 19px; line-height: 1.2;}
body[data-page="home"] .svc span{font-size: 15px; color: rgb(62, 79, 92); line-height: 1.5;}
body[data-page="home"] main > section.bp:first-child,body[data-page="projects"] main > section.bp:first-child,body[data-page="seattle"] main > section.bp:first-child,body[data-page="service-areas"] main > section.bp:first-child{background-image: linear-gradient(rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 34, 54, 0.94) 0%, rgba(10, 34, 54, 0.84) 42%, rgba(10, 34, 54, 0.58) 100%), url("/storage/uploads/site/photos/framing-roof.webp"); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px, cover, cover; background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, center center, center center;}
@media (max-width: 800px){
body[data-page="home"] main > section.bp:first-child,body[data-page="projects"] main > section.bp:first-child,body[data-page="seattle"] main > section.bp:first-child,body[data-page="service-areas"] main > section.bp:first-child{background-image: linear-gradient(rgba(10, 34, 54, 0.88), rgba(10, 34, 54, 0.88)), url("/storage/uploads/site/photos/framing-roof.webp"); background-size: cover, cover;}
}
body[data-page="about"],body[data-page="addition-cost-calculator"],body[data-page="adu-dadu-design-build"],body[data-page="architectural-design"],body[data-page="bathroom-remodel"],body[data-page="bellevue"],body[data-page="bothell"],body[data-page="commercial-tenant-improvements"],body[data-page="contact"],body[data-page="faq"],body[data-page="foundation-repair"],body[data-page="get-an-estimate"],body[data-page="guides"],body[data-page="guides/design-build-process"],body[data-page="guides/do-i-need-a-structural-engineer"],body[data-page="guides/eastside-remodel-permits"],body[data-page="guides/king-county-adu-rules"],body[data-page="guides/load-bearing-walls-explained"],body[data-page="guides/reading-a-structural-drawing"],body[data-page="guides/second-story-addition-feasibility"],body[data-page="guides/seismic-retrofit-older-seattle-homes"],body[data-page="home-additions"],body[data-page="how-we-work"],body[data-page="issaquah"],body[data-page="kirkland"],body[data-page="kitchen-remodel"],body[data-page="load-bearing-wall-checker"],body[data-page="load-bearing-wall-removal"],body[data-page="medina-clyde-hill"],body[data-page="mercer-island"],body[data-page="newcastle"],body[data-page="permit-cost-and-timeline-estimator"],body[data-page="permit-expediting"],body[data-page="privacy"],body[data-page="projects"],body[data-page="projects/education-hill-whole-home-remodel"],body[data-page="projects/kirkland-second-story-addition"],body[data-page="projects/lake-hills-kitchen-wall-removal"],body[data-page="projects/mercer-island-foundation-underpinning"],body[data-page="projects/sammamish-detached-adu"],body[data-page="projects/wallingford-seismic-retrofit"],body[data-page="redmond"],body[data-page="renton"],body[data-page="reviews"],body[data-page="sammamish"],body[data-page="seattle"],body[data-page="second-story-additions"],body[data-page="seismic-retrofit"],body[data-page="service-areas"],body[data-page="structural-engineering"],body[data-page="structural-plans-and-permits"],body[data-page="terms"],body[data-page="whole-home-remodel"]{margin: 0px;}
body[data-page="about"] main > section:first-child,body[data-page="addition-cost-calculator"] main > section:first-child,body[data-page="adu-dadu-design-build"] main > section:first-child,body[data-page="architectural-design"] main > section:first-child,body[data-page="bathroom-remodel"] main > section:first-child,body[data-page="bellevue"] main > section:first-child,body[data-page="bothell"] main > section:first-child,body[data-page="commercial-tenant-improvements"] main > section:first-child,body[data-page="contact"] main > section:first-child,body[data-page="faq"] main > section:first-child,body[data-page="foundation-repair"] main > section:first-child,body[data-page="guides"] main > section:first-child,body[data-page="guides/design-build-process"] main > section:first-child,body[data-page="guides/do-i-need-a-structural-engineer"] main > section:first-child,body[data-page="guides/eastside-remodel-permits"] main > section:first-child,body[data-page="guides/king-county-adu-rules"] main > section:first-child,body[data-page="guides/load-bearing-walls-explained"] main > section:first-child,body[data-page="guides/reading-a-structural-drawing"] main > section:first-child,body[data-page="guides/second-story-addition-feasibility"] main > section:first-child,body[data-page="guides/seismic-retrofit-older-seattle-homes"] main > section:first-child,body[data-page="home-additions"] main > section:first-child,body[data-page="how-we-work"] main > section:first-child,body[data-page="issaquah"] main > section:first-child,body[data-page="kirkland"] main > section:first-child,body[data-page="kitchen-remodel"] main > section:first-child,body[data-page="load-bearing-wall-checker"] main > section:first-child,body[data-page="load-bearing-wall-removal"] main > section:first-child,body[data-page="medina-clyde-hill"] main > section:first-child,body[data-page="mercer-island"] main > section:first-child,body[data-page="newcastle"] main > section:first-child,body[data-page="permit-cost-and-timeline-estimator"] main > section:first-child,body[data-page="permit-expediting"] main > section:first-child,body[data-page="projects"] main > section:first-child,body[data-page="projects/education-hill-whole-home-remodel"] main > section:first-child,body[data-page="projects/kirkland-second-story-addition"] main > section:first-child,body[data-page="projects/lake-hills-kitchen-wall-removal"] main > section:first-child,body[data-page="projects/mercer-island-foundation-underpinning"] main > section:first-child,body[data-page="projects/sammamish-detached-adu"] main > section:first-child,body[data-page="projects/wallingford-seismic-retrofit"] main > section:first-child,body[data-page="redmond"] main > section:first-child,body[data-page="renton"] main > section:first-child,body[data-page="sammamish"] main > section:first-child,body[data-page="seattle"] main > section:first-child,body[data-page="second-story-additions"] main > section:first-child,body[data-page="seismic-retrofit"] main > section:first-child,body[data-page="services"] main > section:first-child,body[data-page="structural-engineering"] main > section:first-child,body[data-page="structural-plans-and-permits"] main > section:first-child,body[data-page="whole-home-remodel"] main > section:first-child{position: relative; min-height: 470px;}
body[data-page="about"] main > section:first-child::after,body[data-page="contact"] main > section:first-child::after{content: ""; position: absolute; right: max(24px, 50% - 600px); top: 50%; transform: translateY(-50%); width: min(500px, 38vw); aspect-ratio: 4 / 3; background: url("/storage/uploads/site/art/art-office.svg") center center / contain no-repeat; pointer-events: none;}
body[data-page="about"] main > section:first-child .w > *,body[data-page="addition-cost-calculator"] main > section:first-child .w > *,body[data-page="adu-dadu-design-build"] main > section:first-child .w > *,body[data-page="architectural-design"] main > section:first-child .w > *,body[data-page="bathroom-remodel"] main > section:first-child .w > *,body[data-page="bellevue"] main > section:first-child .w > *,body[data-page="bothell"] main > section:first-child .w > *,body[data-page="commercial-tenant-improvements"] main > section:first-child .w > *,body[data-page="contact"] main > section:first-child .w > *,body[data-page="faq"] main > section:first-child .w > *,body[data-page="foundation-repair"] main > section:first-child .w > *,body[data-page="guides"] main > section:first-child .w > *,body[data-page="guides/design-build-process"] main > section:first-child .w > *,body[data-page="guides/do-i-need-a-structural-engineer"] main > section:first-child .w > *,body[data-page="guides/eastside-remodel-permits"] main > section:first-child .w > *,body[data-page="guides/king-county-adu-rules"] main > section:first-child .w > *,body[data-page="guides/load-bearing-walls-explained"] main > section:first-child .w > *,body[data-page="guides/reading-a-structural-drawing"] main > section:first-child .w > *,body[data-page="guides/second-story-addition-feasibility"] main > section:first-child .w > *,body[data-page="guides/seismic-retrofit-older-seattle-homes"] main > section:first-child .w > *,body[data-page="home-additions"] main > section:first-child .w > *,body[data-page="how-we-work"] main > section:first-child .w > *,body[data-page="issaquah"] main > section:first-child .w > *,body[data-page="kirkland"] main > section:first-child .w > *,body[data-page="kitchen-remodel"] main > section:first-child .w > *,body[data-page="load-bearing-wall-checker"] main > section:first-child .w > *,body[data-page="load-bearing-wall-removal"] main > section:first-child .w > *,body[data-page="medina-clyde-hill"] main > section:first-child .w > *,body[data-page="mercer-island"] main > section:first-child .w > *,body[data-page="newcastle"] main > section:first-child .w > *,body[data-page="permit-cost-and-timeline-estimator"] main > section:first-child .w > *,body[data-page="permit-expediting"] main > section:first-child .w > *,body[data-page="projects"] main > section:first-child .w > *,body[data-page="projects/education-hill-whole-home-remodel"] main > section:first-child .w > *,body[data-page="projects/kirkland-second-story-addition"] main > section:first-child .w > *,body[data-page="projects/lake-hills-kitchen-wall-removal"] main > section:first-child .w > *,body[data-page="projects/mercer-island-foundation-underpinning"] main > section:first-child .w > *,body[data-page="projects/sammamish-detached-adu"] main > section:first-child .w > *,body[data-page="projects/wallingford-seismic-retrofit"] main > section:first-child .w > *,body[data-page="redmond"] main > section:first-child .w > *,body[data-page="renton"] main > section:first-child .w > *,body[data-page="sammamish"] main > section:first-child .w > *,body[data-page="seattle"] main > section:first-child .w > *,body[data-page="second-story-additions"] main > section:first-child .w > *,body[data-page="seismic-retrofit"] main > section:first-child .w > *,body[data-page="services"] main > section:first-child .w > *,body[data-page="structural-engineering"] main > section:first-child .w > *,body[data-page="structural-plans-and-permits"] main > section:first-child .w > *,body[data-page="whole-home-remodel"] main > section:first-child .w > *{max-width: min(640px, 100%);}
@media (max-width: 1100px){
body[data-page="about"] main > section:first-child,body[data-page="addition-cost-calculator"] main > section:first-child,body[data-page="adu-dadu-design-build"] main > section:first-child,body[data-page="architectural-design"] main > section:first-child,body[data-page="bathroom-remodel"] main > section:first-child,body[data-page="bellevue"] main > section:first-child,body[data-page="bothell"] main > section:first-child,body[data-page="commercial-tenant-improvements"] main > section:first-child,body[data-page="contact"] main > section:first-child,body[data-page="faq"] main > section:first-child,body[data-page="foundation-repair"] main > section:first-child,body[data-page="guides"] main > section:first-child,body[data-page="guides/design-build-process"] main > section:first-child,body[data-page="guides/do-i-need-a-structural-engineer"] main > section:first-child,body[data-page="guides/eastside-remodel-permits"] main > section:first-child,body[data-page="guides/king-county-adu-rules"] main > section:first-child,body[data-page="guides/load-bearing-walls-explained"] main > section:first-child,body[data-page="guides/reading-a-structural-drawing"] main > section:first-child,body[data-page="guides/second-story-addition-feasibility"] main > section:first-child,body[data-page="guides/seismic-retrofit-older-seattle-homes"] main > section:first-child,body[data-page="home-additions"] main > section:first-child,body[data-page="how-we-work"] main > section:first-child,body[data-page="issaquah"] main > section:first-child,body[data-page="kirkland"] main > section:first-child,body[data-page="kitchen-remodel"] main > section:first-child,body[data-page="load-bearing-wall-checker"] main > section:first-child,body[data-page="load-bearing-wall-removal"] main > section:first-child,body[data-page="medina-clyde-hill"] main > section:first-child,body[data-page="mercer-island"] main > section:first-child,body[data-page="newcastle"] main > section:first-child,body[data-page="permit-cost-and-timeline-estimator"] main > section:first-child,body[data-page="permit-expediting"] main > section:first-child,body[data-page="projects"] main > section:first-child,body[data-page="projects/education-hill-whole-home-remodel"] main > section:first-child,body[data-page="projects/kirkland-second-story-addition"] main > section:first-child,body[data-page="projects/lake-hills-kitchen-wall-removal"] main > section:first-child,body[data-page="projects/mercer-island-foundation-underpinning"] main > section:first-child,body[data-page="projects/sammamish-detached-adu"] main > section:first-child,body[data-page="projects/wallingford-seismic-retrofit"] main > section:first-child,body[data-page="redmond"] main > section:first-child,body[data-page="renton"] main > section:first-child,body[data-page="sammamish"] main > section:first-child,body[data-page="seattle"] main > section:first-child,body[data-page="second-story-additions"] main > section:first-child,body[data-page="seismic-retrofit"] main > section:first-child,body[data-page="services"] main > section:first-child,body[data-page="structural-engineering"] main > section:first-child,body[data-page="structural-plans-and-permits"] main > section:first-child,body[data-page="whole-home-remodel"] main > section:first-child{min-height: 0px;}
body[data-page="about"] main > section:first-child::after,body[data-page="addition-cost-calculator"] main > section:first-child::after,body[data-page="adu-dadu-design-build"] main > section:first-child::after,body[data-page="architectural-design"] main > section:first-child::after,body[data-page="bathroom-remodel"] main > section:first-child::after,body[data-page="bellevue"] main > section:first-child::after,body[data-page="bothell"] main > section:first-child::after,body[data-page="commercial-tenant-improvements"] main > section:first-child::after,body[data-page="contact"] main > section:first-child::after,body[data-page="faq"] main > section:first-child::after,body[data-page="foundation-repair"] main > section:first-child::after,body[data-page="guides"] main > section:first-child::after,body[data-page="guides/design-build-process"] main > section:first-child::after,body[data-page="guides/do-i-need-a-structural-engineer"] main > section:first-child::after,body[data-page="guides/eastside-remodel-permits"] main > section:first-child::after,body[data-page="guides/king-county-adu-rules"] main > section:first-child::after,body[data-page="guides/load-bearing-walls-explained"] main > section:first-child::after,body[data-page="guides/reading-a-structural-drawing"] main > section:first-child::after,body[data-page="guides/second-story-addition-feasibility"] main > section:first-child::after,body[data-page="guides/seismic-retrofit-older-seattle-homes"] main > section:first-child::after,body[data-page="home-additions"] main > section:first-child::after,body[data-page="how-we-work"] main > section:first-child::after,body[data-page="issaquah"] main > section:first-child::after,body[data-page="kirkland"] main > section:first-child::after,body[data-page="kitchen-remodel"] main > section:first-child::after,body[data-page="load-bearing-wall-checker"] main > section:first-child::after,body[data-page="load-bearing-wall-removal"] main > section:first-child::after,body[data-page="medina-clyde-hill"] main > section:first-child::after,body[data-page="mercer-island"] main > section:first-child::after,body[data-page="newcastle"] main > section:first-child::after,body[data-page="permit-cost-and-timeline-estimator"] main > section:first-child::after,body[data-page="permit-expediting"] main > section:first-child::after,body[data-page="projects"] main > section:first-child::after,body[data-page="projects/education-hill-whole-home-remodel"] main > section:first-child::after,body[data-page="projects/kirkland-second-story-addition"] main > section:first-child::after,body[data-page="projects/lake-hills-kitchen-wall-removal"] main > section:first-child::after,body[data-page="projects/mercer-island-foundation-underpinning"] main > section:first-child::after,body[data-page="projects/sammamish-detached-adu"] main > section:first-child::after,body[data-page="projects/wallingford-seismic-retrofit"] main > section:first-child::after,body[data-page="redmond"] main > section:first-child::after,body[data-page="renton"] main > section:first-child::after,body[data-page="sammamish"] main > section:first-child::after,body[data-page="seattle"] main > section:first-child::after,body[data-page="second-story-additions"] main > section:first-child::after,body[data-page="seismic-retrofit"] main > section:first-child::after,body[data-page="services"] main > section:first-child::after,body[data-page="structural-engineering"] main > section:first-child::after,body[data-page="structural-plans-and-permits"] main > section:first-child::after,body[data-page="whole-home-remodel"] main > section:first-child::after{display: none;}
body[data-page="about"] main > section:first-child .w > *,body[data-page="addition-cost-calculator"] main > section:first-child .w > *,body[data-page="adu-dadu-design-build"] main > section:first-child .w > *,body[data-page="architectural-design"] main > section:first-child .w > *,body[data-page="bathroom-remodel"] main > section:first-child .w > *,body[data-page="bellevue"] main > section:first-child .w > *,body[data-page="bothell"] main > section:first-child .w > *,body[data-page="commercial-tenant-improvements"] main > section:first-child .w > *,body[data-page="contact"] main > section:first-child .w > *,body[data-page="faq"] main > section:first-child .w > *,body[data-page="foundation-repair"] main > section:first-child .w > *,body[data-page="guides"] main > section:first-child .w > *,body[data-page="guides/design-build-process"] main > section:first-child .w > *,body[data-page="guides/do-i-need-a-structural-engineer"] main > section:first-child .w > *,body[data-page="guides/eastside-remodel-permits"] main > section:first-child .w > *,body[data-page="guides/king-county-adu-rules"] main > section:first-child .w > *,body[data-page="guides/load-bearing-walls-explained"] main > section:first-child .w > *,body[data-page="guides/reading-a-structural-drawing"] main > section:first-child .w > *,body[data-page="guides/second-story-addition-feasibility"] main > section:first-child .w > *,body[data-page="guides/seismic-retrofit-older-seattle-homes"] main > section:first-child .w > *,body[data-page="home-additions"] main > section:first-child .w > *,body[data-page="how-we-work"] main > section:first-child .w > *,body[data-page="issaquah"] main > section:first-child .w > *,body[data-page="kirkland"] main > section:first-child .w > *,body[data-page="kitchen-remodel"] main > section:first-child .w > *,body[data-page="load-bearing-wall-checker"] main > section:first-child .w > *,body[data-page="load-bearing-wall-removal"] main > section:first-child .w > *,body[data-page="medina-clyde-hill"] main > section:first-child .w > *,body[data-page="mercer-island"] main > section:first-child .w > *,body[data-page="newcastle"] main > section:first-child .w > *,body[data-page="permit-cost-and-timeline-estimator"] main > section:first-child .w > *,body[data-page="permit-expediting"] main > section:first-child .w > *,body[data-page="projects"] main > section:first-child .w > *,body[data-page="projects/education-hill-whole-home-remodel"] main > section:first-child .w > *,body[data-page="projects/kirkland-second-story-addition"] main > section:first-child .w > *,body[data-page="projects/lake-hills-kitchen-wall-removal"] main > section:first-child .w > *,body[data-page="projects/mercer-island-foundation-underpinning"] main > section:first-child .w > *,body[data-page="projects/sammamish-detached-adu"] main > section:first-child .w > *,body[data-page="projects/wallingford-seismic-retrofit"] main > section:first-child .w > *,body[data-page="redmond"] main > section:first-child .w > *,body[data-page="renton"] main > section:first-child .w > *,body[data-page="sammamish"] main > section:first-child .w > *,body[data-page="seattle"] main > section:first-child .w > *,body[data-page="second-story-additions"] main > section:first-child .w > *,body[data-page="seismic-retrofit"] main > section:first-child .w > *,body[data-page="services"] main > section:first-child .w > *,body[data-page="structural-engineering"] main > section:first-child .w > *,body[data-page="structural-plans-and-permits"] main > section:first-child .w > *,body[data-page="whole-home-remodel"] main > section:first-child .w > *{max-width: none;}
}
body[data-page="about"] main > section.bp:first-child{background-image: linear-gradient(rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 34, 54, 0.94) 0%, rgba(10, 34, 54, 0.84) 42%, rgba(10, 34, 54, 0.58) 100%), url("/storage/uploads/site/photos/gc-site.webp"); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px, cover, cover; background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, center center, center center;}
@media (max-width: 800px){
body[data-page="about"] main > section.bp:first-child{background-image: linear-gradient(rgba(10, 34, 54, 0.88), rgba(10, 34, 54, 0.88)), url("/storage/uploads/site/photos/gc-site.webp"); background-size: cover, cover;}
}
body[data-page="addition-cost-calculator"] main > section:first-child::after,body[data-page="home-additions"] main > section:first-child::after,body[data-page="newcastle"] main > section:first-child::after{content: ""; position: absolute; right: max(24px, 50% - 600px); top: 50%; transform: translateY(-50%); width: min(500px, 38vw); aspect-ratio: 4 / 3; background: url("/storage/uploads/site/art/art-addition.svg") center center / contain no-repeat; pointer-events: none;}
body[data-page="addition-cost-calculator"] main > section.bp:first-child,body[data-page="home-additions"] main > section.bp:first-child,body[data-page="issaquah"] main > section.bp:first-child,body[data-page="newcastle"] main > section.bp:first-child,body[data-page="privacy"] main > section.bp:first-child,body[data-page="terms"] main > section.bp:first-child{background-image: linear-gradient(rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 34, 54, 0.94) 0%, rgba(10, 34, 54, 0.84) 42%, rgba(10, 34, 54, 0.58) 100%), url("/storage/uploads/site/photos/modern-ranch.webp"); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px, cover, cover; background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, center center, center center;}
@media (max-width: 800px){
body[data-page="addition-cost-calculator"] main > section.bp:first-child,body[data-page="home-additions"] main > section.bp:first-child,body[data-page="issaquah"] main > section.bp:first-child,body[data-page="newcastle"] main > section.bp:first-child,body[data-page="privacy"] main > section.bp:first-child,body[data-page="terms"] main > section.bp:first-child{background-image: linear-gradient(rgba(10, 34, 54, 0.88), rgba(10, 34, 54, 0.88)), url("/storage/uploads/site/photos/modern-ranch.webp"); background-size: cover, cover;}
}
body[data-page="addition-cost-calculator"] [data-tool-pending] .tool,body[data-page="addition-cost-calculator"] [data-tool-pending] [aria-live],body[data-page="load-bearing-wall-checker"] [data-tool-pending] .tool,body[data-page="load-bearing-wall-checker"] [data-tool-pending] [aria-live],body[data-page="permit-cost-and-timeline-estimator"] [data-tool-pending] .tool,body[data-page="permit-cost-and-timeline-estimator"] [data-tool-pending] [aria-live]{visibility: hidden;}
body[data-page="adu-dadu-design-build"] main > section:first-child::after,body[data-page="guides/king-county-adu-rules"] main > section:first-child::after,body[data-page="projects/sammamish-detached-adu"] main > section:first-child::after,body[data-page="sammamish"] main > section:first-child::after{content: ""; position: absolute; right: max(24px, 50% - 600px); top: 50%; transform: translateY(-50%); width: min(500px, 38vw); aspect-ratio: 4 / 3; background: url("/storage/uploads/site/art/art-adu.svg") center center / contain no-repeat; pointer-events: none;}
body[data-page="adu-dadu-design-build"] main > section.bp:first-child,body[data-page="guides/king-county-adu-rules"] main > section.bp:first-child,body[data-page="projects/sammamish-detached-adu"] main > section.bp:first-child,body[data-page="sammamish"] main > section.bp:first-child{background-image: linear-gradient(rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 34, 54, 0.94) 0%, rgba(10, 34, 54, 0.84) 42%, rgba(10, 34, 54, 0.58) 100%), url("/storage/uploads/site/photos/adu-entry.webp"); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px, cover, cover; background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, center center, center center;}
@media (max-width: 800px){
body[data-page="adu-dadu-design-build"] main > section.bp:first-child,body[data-page="guides/king-county-adu-rules"] main > section.bp:first-child,body[data-page="projects/sammamish-detached-adu"] main > section.bp:first-child,body[data-page="sammamish"] main > section.bp:first-child{background-image: linear-gradient(rgba(10, 34, 54, 0.88), rgba(10, 34, 54, 0.88)), url("/storage/uploads/site/photos/adu-entry.webp"); background-size: cover, cover;}
}
body[data-page="architectural-design"] main > section:first-child::after,body[data-page="medina-clyde-hill"] main > section:first-child::after,body[data-page="projects"] main > section:first-child::after{content: ""; position: absolute; right: max(24px, 50% - 600px); top: 50%; transform: translateY(-50%); width: min(500px, 38vw); aspect-ratio: 4 / 3; background: url("/storage/uploads/site/art/art-design.svg") center center / contain no-repeat; pointer-events: none;}
body[data-page="architectural-design"] main > section.bp:first-child,body[data-page="bellevue"] main > section.bp:first-child,body[data-page="contact"] main > section.bp:first-child,body[data-page="medina-clyde-hill"] main > section.bp:first-child{background-image: linear-gradient(rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 34, 54, 0.94) 0%, rgba(10, 34, 54, 0.84) 42%, rgba(10, 34, 54, 0.58) 100%), url("/storage/uploads/site/photos/modern-infill.webp"); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px, cover, cover; background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, center center, center center;}
@media (max-width: 800px){
body[data-page="architectural-design"] main > section.bp:first-child,body[data-page="bellevue"] main > section.bp:first-child,body[data-page="contact"] main > section.bp:first-child,body[data-page="medina-clyde-hill"] main > section.bp:first-child{background-image: linear-gradient(rgba(10, 34, 54, 0.88), rgba(10, 34, 54, 0.88)), url("/storage/uploads/site/photos/modern-infill.webp"); background-size: cover, cover;}
}
body[data-page="bathroom-remodel"] main > section:first-child::after{content: ""; position: absolute; right: max(24px, 50% - 600px); top: 50%; transform: translateY(-50%); width: min(500px, 38vw); aspect-ratio: 4 / 3; background: url("/storage/uploads/site/art/art-bath.svg") center center / contain no-repeat; pointer-events: none;}
body[data-page="bathroom-remodel"] main > section.bp:first-child,body[data-page="projects/education-hill-whole-home-remodel"] main > section.bp:first-child,body[data-page="redmond"] main > section.bp:first-child,body[data-page="reviews"] main > section.bp:first-child,body[data-page="whole-home-remodel"] main > section.bp:first-child{background-image: linear-gradient(rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 34, 54, 0.94) 0%, rgba(10, 34, 54, 0.84) 42%, rgba(10, 34, 54, 0.58) 100%), url("/storage/uploads/site/photos/great-room.webp"); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px, cover, cover; background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, center center, center center;}
@media (max-width: 800px){
body[data-page="bathroom-remodel"] main > section.bp:first-child,body[data-page="projects/education-hill-whole-home-remodel"] main > section.bp:first-child,body[data-page="redmond"] main > section.bp:first-child,body[data-page="reviews"] main > section.bp:first-child,body[data-page="whole-home-remodel"] main > section.bp:first-child{background-image: linear-gradient(rgba(10, 34, 54, 0.88), rgba(10, 34, 54, 0.88)), url("/storage/uploads/site/photos/great-room.webp"); background-size: cover, cover;}
}
body[data-page="bellevue"] main > section:first-child::after,body[data-page="guides/load-bearing-walls-explained"] main > section:first-child::after,body[data-page="load-bearing-wall-checker"] main > section:first-child::after,body[data-page="load-bearing-wall-removal"] main > section:first-child::after{content: ""; position: absolute; right: max(24px, 50% - 600px); top: 50%; transform: translateY(-50%); width: min(500px, 38vw); aspect-ratio: 4 / 3; background: url("/storage/uploads/site/art/art-wall.svg") center center / contain no-repeat; pointer-events: none;}
body[data-page="bothell"] main > section:first-child::after,body[data-page="kitchen-remodel"] main > section:first-child::after,body[data-page="projects/lake-hills-kitchen-wall-removal"] main > section:first-child::after{content: ""; position: absolute; right: max(24px, 50% - 600px); top: 50%; transform: translateY(-50%); width: min(500px, 38vw); aspect-ratio: 4 / 3; background: url("/storage/uploads/site/art/art-kitchen.svg") center center / contain no-repeat; pointer-events: none;}
body[data-page="bothell"] main > section.bp:first-child,body[data-page="guides/load-bearing-walls-explained"] main > section.bp:first-child,body[data-page="kitchen-remodel"] main > section.bp:first-child,body[data-page="load-bearing-wall-checker"] main > section.bp:first-child,body[data-page="load-bearing-wall-removal"] main > section.bp:first-child,body[data-page="projects/lake-hills-kitchen-wall-removal"] main > section.bp:first-child{background-image: linear-gradient(rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 34, 54, 0.94) 0%, rgba(10, 34, 54, 0.84) 42%, rgba(10, 34, 54, 0.58) 100%), url("/storage/uploads/site/photos/kitchen.webp"); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px, cover, cover; background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, center center, center center;}
@media (max-width: 800px){
body[data-page="bothell"] main > section.bp:first-child,body[data-page="guides/load-bearing-walls-explained"] main > section.bp:first-child,body[data-page="kitchen-remodel"] main > section.bp:first-child,body[data-page="load-bearing-wall-checker"] main > section.bp:first-child,body[data-page="load-bearing-wall-removal"] main > section.bp:first-child,body[data-page="projects/lake-hills-kitchen-wall-removal"] main > section.bp:first-child{background-image: linear-gradient(rgba(10, 34, 54, 0.88), rgba(10, 34, 54, 0.88)), url("/storage/uploads/site/photos/kitchen.webp"); background-size: cover, cover;}
}
body[data-page="commercial-tenant-improvements"] main > section:first-child::after{content: ""; position: absolute; right: max(24px, 50% - 600px); top: 50%; transform: translateY(-50%); width: min(500px, 38vw); aspect-ratio: 4 / 3; background: url("/storage/uploads/site/art/art-ti.svg") center center / contain no-repeat; pointer-events: none;}
body[data-page="commercial-tenant-improvements"] main > section.bp:first-child,body[data-page="faq"] main > section.bp:first-child,body[data-page="foundation-repair"] main > section.bp:first-child,body[data-page="guides/do-i-need-a-structural-engineer"] main > section.bp:first-child,body[data-page="mercer-island"] main > section.bp:first-child,body[data-page="projects/mercer-island-foundation-underpinning"] main > section.bp:first-child,body[data-page="structural-engineering"] main > section.bp:first-child{background-image: linear-gradient(rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 34, 54, 0.94) 0%, rgba(10, 34, 54, 0.84) 42%, rgba(10, 34, 54, 0.58) 100%), url("/storage/uploads/site/photos/site-review.webp"); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px, cover, cover; background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, center center, center center;}
@media (max-width: 800px){
body[data-page="commercial-tenant-improvements"] main > section.bp:first-child,body[data-page="faq"] main > section.bp:first-child,body[data-page="foundation-repair"] main > section.bp:first-child,body[data-page="guides/do-i-need-a-structural-engineer"] main > section.bp:first-child,body[data-page="mercer-island"] main > section.bp:first-child,body[data-page="projects/mercer-island-foundation-underpinning"] main > section.bp:first-child,body[data-page="structural-engineering"] main > section.bp:first-child{background-image: linear-gradient(rgba(10, 34, 54, 0.88), rgba(10, 34, 54, 0.88)), url("/storage/uploads/site/photos/site-review.webp"); background-size: cover, cover;}
}
body[data-page="faq"] main > section:first-child::after,body[data-page="guides/reading-a-structural-drawing"] main > section:first-child::after,body[data-page="renton"] main > section:first-child::after,body[data-page="structural-plans-and-permits"] main > section:first-child::after{content: ""; position: absolute; right: max(24px, 50% - 600px); top: 50%; transform: translateY(-50%); width: min(500px, 38vw); aspect-ratio: 4 / 3; background: url("/storage/uploads/site/art/art-plans.svg") center center / contain no-repeat; pointer-events: none;}
body[data-page="foundation-repair"] main > section:first-child::after,body[data-page="issaquah"] main > section:first-child::after,body[data-page="projects/mercer-island-foundation-underpinning"] main > section:first-child::after{content: ""; position: absolute; right: max(24px, 50% - 600px); top: 50%; transform: translateY(-50%); width: min(500px, 38vw); aspect-ratio: 4 / 3; background: url("/storage/uploads/site/art/art-foundation.svg") center center / contain no-repeat; pointer-events: none;}
body[data-page="get-an-estimate"] main > section.bp:first-child,body[data-page="guides"] main > section.bp:first-child,body[data-page="guides/eastside-remodel-permits"] main > section.bp:first-child,body[data-page="guides/reading-a-structural-drawing"] main > section.bp:first-child,body[data-page="permit-cost-and-timeline-estimator"] main > section.bp:first-child,body[data-page="permit-expediting"] main > section.bp:first-child,body[data-page="structural-plans-and-permits"] main > section.bp:first-child{background-image: linear-gradient(rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 34, 54, 0.94) 0%, rgba(10, 34, 54, 0.84) 42%, rgba(10, 34, 54, 0.58) 100%), url("/storage/uploads/site/photos/engineer-plans.webp"); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px, cover, cover; background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, center center, center center;}
@media (max-width: 800px){
body[data-page="get-an-estimate"] main > section.bp:first-child,body[data-page="guides"] main > section.bp:first-child,body[data-page="guides/eastside-remodel-permits"] main > section.bp:first-child,body[data-page="guides/reading-a-structural-drawing"] main > section.bp:first-child,body[data-page="permit-cost-and-timeline-estimator"] main > section.bp:first-child,body[data-page="permit-expediting"] main > section.bp:first-child,body[data-page="structural-plans-and-permits"] main > section.bp:first-child{background-image: linear-gradient(rgba(10, 34, 54, 0.88), rgba(10, 34, 54, 0.88)), url("/storage/uploads/site/photos/engineer-plans.webp"); background-size: cover, cover;}
}
body[data-page="guides"] main > section:first-child::after,body[data-page="guides/do-i-need-a-structural-engineer"] main > section:first-child::after,body[data-page="mercer-island"] main > section:first-child::after,body[data-page="structural-engineering"] main > section:first-child::after{content: ""; position: absolute; right: max(24px, 50% - 600px); top: 50%; transform: translateY(-50%); width: min(500px, 38vw); aspect-ratio: 4 / 3; background: url("/storage/uploads/site/art/art-engineering.svg") center center / contain no-repeat; pointer-events: none;}
body[data-page="guides/design-build-process"] main > section:first-child::after,body[data-page="how-we-work"] main > section:first-child::after{content: ""; position: absolute; right: max(24px, 50% - 600px); top: 50%; transform: translateY(-50%); width: min(500px, 38vw); aspect-ratio: 4 / 3; background: url("/storage/uploads/site/art/art-process.svg") center center / contain no-repeat; pointer-events: none;}
body[data-page="guides/design-build-process"] main > section.bp:first-child,body[data-page="guides/seismic-retrofit-older-seattle-homes"] main > section.bp:first-child,body[data-page="how-we-work"] main > section.bp:first-child,body[data-page="projects/wallingford-seismic-retrofit"] main > section.bp:first-child,body[data-page="renton"] main > section.bp:first-child,body[data-page="seismic-retrofit"] main > section.bp:first-child,body[data-page="services"] main > section.bp:first-child{background-image: linear-gradient(rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 34, 54, 0.94) 0%, rgba(10, 34, 54, 0.84) 42%, rgba(10, 34, 54, 0.58) 100%), url("/storage/uploads/site/photos/crew-floor.webp"); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px, cover, cover; background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, center center, center center;}
@media (max-width: 800px){
body[data-page="guides/design-build-process"] main > section.bp:first-child,body[data-page="guides/seismic-retrofit-older-seattle-homes"] main > section.bp:first-child,body[data-page="how-we-work"] main > section.bp:first-child,body[data-page="projects/wallingford-seismic-retrofit"] main > section.bp:first-child,body[data-page="renton"] main > section.bp:first-child,body[data-page="seismic-retrofit"] main > section.bp:first-child,body[data-page="services"] main > section.bp:first-child{background-image: linear-gradient(rgba(10, 34, 54, 0.88), rgba(10, 34, 54, 0.88)), url("/storage/uploads/site/photos/crew-floor.webp"); background-size: cover, cover;}
}
body[data-page="guides/eastside-remodel-permits"] main > section:first-child::after,body[data-page="permit-cost-and-timeline-estimator"] main > section:first-child::after,body[data-page="permit-expediting"] main > section:first-child::after{content: ""; position: absolute; right: max(24px, 50% - 600px); top: 50%; transform: translateY(-50%); width: min(500px, 38vw); aspect-ratio: 4 / 3; background: url("/storage/uploads/site/art/art-permit.svg") center center / contain no-repeat; pointer-events: none;}
body[data-page="guides/second-story-addition-feasibility"] main > section:first-child::after,body[data-page="kirkland"] main > section:first-child::after,body[data-page="projects/kirkland-second-story-addition"] main > section:first-child::after,body[data-page="second-story-additions"] main > section:first-child::after{content: ""; position: absolute; right: max(24px, 50% - 600px); top: 50%; transform: translateY(-50%); width: min(500px, 38vw); aspect-ratio: 4 / 3; background: url("/storage/uploads/site/art/art-second.svg") center center / contain no-repeat; pointer-events: none;}
body[data-page="guides/second-story-addition-feasibility"] main > section.bp:first-child,body[data-page="kirkland"] main > section.bp:first-child,body[data-page="projects/kirkland-second-story-addition"] main > section.bp:first-child,body[data-page="second-story-additions"] main > section.bp:first-child{background-image: linear-gradient(rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.13) 1px, transparent 1px), linear-gradient(rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 225, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 34, 54, 0.94) 0%, rgba(10, 34, 54, 0.84) 42%, rgba(10, 34, 54, 0.58) 100%), url("/storage/uploads/site/photos/framing-second.webp"); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px, cover, cover; background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, center center, center center;}
@media (max-width: 800px){
body[data-page="guides/second-story-addition-feasibility"] main > section.bp:first-child,body[data-page="kirkland"] main > section.bp:first-child,body[data-page="projects/kirkland-second-story-addition"] main > section.bp:first-child,body[data-page="second-story-additions"] main > section.bp:first-child{background-image: linear-gradient(rgba(10, 34, 54, 0.88), rgba(10, 34, 54, 0.88)), url("/storage/uploads/site/photos/framing-second.webp"); background-size: cover, cover;}
}
body[data-page="guides/seismic-retrofit-older-seattle-homes"] main > section:first-child::after,body[data-page="projects/wallingford-seismic-retrofit"] main > section:first-child::after,body[data-page="seattle"] main > section:first-child::after,body[data-page="seismic-retrofit"] main > section:first-child::after{content: ""; position: absolute; right: max(24px, 50% - 600px); top: 50%; transform: translateY(-50%); width: min(500px, 38vw); aspect-ratio: 4 / 3; background: url("/storage/uploads/site/art/art-seismic.svg") center center / contain no-repeat; pointer-events: none;}
body[data-page="projects/education-hill-whole-home-remodel"] main > section:first-child::after,body[data-page="redmond"] main > section:first-child::after,body[data-page="services"] main > section:first-child::after,body[data-page="whole-home-remodel"] main > section:first-child::after{content: ""; position: absolute; right: max(24px, 50% - 600px); top: 50%; transform: translateY(-50%); width: min(500px, 38vw); aspect-ratio: 4 / 3; background: url("/storage/uploads/site/art/art-whole.svg") center center / contain no-repeat; pointer-events: none;}
body[data-page="services"] .rev{font-family: "JetBrains Mono", monospace; font-size: 13px;}
body[data-page="services"] .body h2{margin: 64px 0px 20px;}
body[data-page="services"] .body .tb{margin: 24px 0px;}
body[data-page="services"] .svc{display: flex; flex-direction: column; gap: 10px; padding: 26px; background: rgb(255, 255, 255); border: 1px solid rgb(210, 219, 226); text-decoration: none; color: rgb(16, 28, 38);}
body[data-page="services"] .svc b{font-family: Archivo, sans-serif; font-stretch: 108%; font-size: 21px; line-height: 1.2;}
body[data-page="services"] .svc em{font-style: normal; font-family: "JetBrains Mono", monospace; font-size: 13px; color: rgb(16, 28, 38); margin-top: auto; padding-top: 8px; border-top: 1px dashed rgb(202, 212, 220);}

/* --- 4. tools/convert/theme.css --- */
/* ---------------------------------------------------------------------------
   Part 4 of theme/assets/styles.css: what the prototype has no rules for.
   The header, the footer and every imported section are styled by the
   prototype's own site.css (parts 1–3) — this file adds the skip link, the
   engine's form messages, the engine's starter blocks in the ECD look and the
   404 page. Values follow the design's palette:
     ink #101C26 · paper #FFFFFF · page #F3F5F6 · blueprint #0A2236
     accent #C2410C (#E8590C rules, #B3400A links) · rule #D2DBE2
   --------------------------------------------------------------------------- */
html{scroll-behavior:smooth}
img{max-width:100%}
main{display:block}

.ecd-skip{position:absolute;left:-9999px;top:0;z-index:100;background:#0A2236;color:#FFFFFF;padding:12px 18px;text-decoration:none}
.ecd-skip:focus{left:12px;top:12px;color:#FFFFFF}

/* The header's wordmark subtitle is two lines in the design ("Engineering" /
   "Contracting · Design") but one single-line Settings value, which cannot keep
   a newline through an admin save. So the column is narrow enough to wrap it
   after the first word: 15.5em sits between the two line lengths for JetBrains
   Mono and the usual monospace fallbacks (Consolas, Menlo) at this size and
   letter-spacing. A newline stored some other way is still honoured. */
.logo span{white-space:pre-line;max-width:15.5em}

/* Engine form messages inside the design's forms (theme/blocks/section.php). */
.bc-form-msg{font-size:15px;padding:14px 18px;border:1px solid #C2410C;background:#FFF1E8;color:#7A2B05}
.bc-form-msg.is-error{border-color:#9A3412;background:#FDE8E0}
.bc-form-config{background:#EEF2F4;color:#101C26;border:1px solid #CAD4DC;padding:16px;margin-top:16px;font-size:14px}

/* --- The engine's starter blocks, insertable from the admin ---------------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 24px}
.hero,.prose,.cta-band,.contact-section,.features-section{padding:96px 0}
.eyebrow{display:flex;align-items:center;gap:12px;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:#55667A;margin-bottom:22px}
.eyebrow::before{content:"";width:28px;height:2px;background:#E8590C}
.display,.section-title{font-family:'Archivo','Arial Narrow',system-ui,sans-serif;font-stretch:112%;letter-spacing:-.015em;margin:0 0 20px;text-wrap:balance}
.display{font-size:clamp(38px,5.2vw,68px);font-weight:800;line-height:1.08}
.section-title{font-size:clamp(28px,3.2vw,42px);font-weight:750;line-height:1.08}
.display em,.section-title em{font-style:normal;color:#B3400A}
.lede{margin:0 0 28px;font-size:19px;line-height:1.65;color:#3E4F5C;max-width:780px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:14px}
.btn-primary{background:#C2410C;color:#FFFFFF;border:0}
.btn-primary:hover{background:#9A3412;color:#FFFFFF}
.btn-ghost{background:transparent;color:inherit;border:1.5px solid currentColor}
.prose .wrap-narrow{font-size:17px;line-height:1.65;color:#2A3A47}
.prose .wrap-narrow>*+*{margin-top:1.1em}
.prose h2{font-family:'Archivo','Arial Narrow',system-ui,sans-serif;font-stretch:112%;font-size:clamp(26px,3vw,38px);font-weight:750;line-height:1.1;letter-spacing:-.015em;color:#101C26;margin:1.6em 0 .5em}
.prose h3{font-family:'Archivo','Arial Narrow',system-ui,sans-serif;font-stretch:108%;font-size:21px;font-weight:700;color:#101C26;margin:1.5em 0 .4em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:22px}
.prose li+li{margin-top:.4em}
.prose li::marker{color:#C2410C}
.prose blockquote{margin:1.5em 0;padding:4px 0 4px 22px;border-left:2px solid #E8590C;color:#101C26}
.features{display:grid;gap:24px;margin-top:44px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.feature{background:#FFFFFF;border:1px solid #D2DBE2;padding:28px}
.feature .num{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.1em;color:#B3400A}
.feature__title{font-family:'Archivo',sans-serif;font-stretch:108%;font-size:19px;font-weight:700;line-height:1.2;margin:14px 0 8px}
.feature__desc{margin:0;color:#3E4F5C;font-size:15px;line-height:1.5}
.bc-form{display:grid;gap:16px;margin-top:28px}
.bc-form__row{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.bc-form__field{display:grid;gap:6px;font-size:14px;font-weight:600}
.bc-form__field input,.bc-form__field textarea{font:inherit;font-size:16px;font-weight:400;min-height:48px;padding:10px 14px;border:1px solid #9FB0BD;background:#FFFFFF;color:#101C26;border-radius:2px;width:100%}
.bc-form__field textarea{min-height:120px;resize:vertical}
.bc-form button{justify-self:start}
.form-notice{padding:14px 18px;border:1px solid #C2410C;background:#FFF1E8;color:#7A2B05;margin:16px 0}
.form-notice--err{border-color:#9A3412;background:#FDE8E0}

/* Inline formatting the admin's rich text can apply (sanitize_inline_html). */
.bc-fs-xs{font-size:.78em}.bc-fs-sm{font-size:.9em}.bc-fs-lg{font-size:1.15em}
.bc-fs-xl{font-size:1.35em}.bc-fs-xxl{font-size:1.6em}
.bc-ta-center{text-align:center}.bc-ta-right{text-align:right}.bc-ta-justify{text-align:justify}
.bc-lh-xtight{line-height:1}.bc-lh-tighter{line-height:1.1}.bc-lh-tight{line-height:1.2}
.bc-lh-snug{line-height:1.35}.bc-lh-relaxed{line-height:1.75}.bc-lh-loose{line-height:2}

/* --- 404 ------------------------------------------------------------------- */
.ecd-404{padding:clamp(72px,10vw,140px) 24px;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.ecd-404__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}

/* --- Blog: the listing cards and a post ----------------------------------- */
.post-card{display:flex;flex-direction:column;background:#FFFFFF;border:1px solid #D2DBE2;text-decoration:none;color:#101C26;overflow:hidden}
.post-card:hover{border-color:#C2410C;color:#101C26}
.post-card__img{display:block;background:#E3E9ED;border-bottom:1px solid #D2DBE2}
.post-card__img img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}
.post-card__body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 24px}
.post-card i{font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#B3400A}
.post-card b{font-family:'Archivo',sans-serif;font-stretch:108%;font-size:20px;line-height:1.2}
.post-card span:not(.post-card__img):not(.post-card__body){font-size:15px;color:#3E4F5C;line-height:1.5}
.post-card:hover b{color:#B3400A}
.links a[aria-current="true"]{border-color:#C2410C;background:#FFF1E8;color:#B3400A}
.post-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #CAD4DC;padding-top:24px}
.post-pager .mono{color:#40525F}
.post-cover{display:block;width:100%;height:auto;max-height:460px;object-fit:cover;border:1px solid #D2DBE2}

/* The post body sits one level inside .body (the block needs its own element
   for the admin), so the build's `.body > h2` spacing has to be repeated. */
.post-body>h2{margin:72px 0 20px}
.post-body>h2:first-child{margin-top:0}
.post-body>h3{margin:36px 0 12px}
.post-body p+p{margin-top:18px}
.post-body ul,.post-body ol{padding-left:22px;margin-top:14px;display:grid;gap:8px}
.post-body ul+p,.post-body ol+p,.post-body .tb+p{margin-top:18px}
.post-body .tb{margin:28px 0}
.post-body a{text-underline-offset:3px}
@media (max-width:760px){.post-body>h2{margin:48px 0 16px}}

/* The blog hub gets a photograph behind its header band, like every other
   section front on the site (those come from the build's own page CSS). */
body[data-page="blog"] main>section.bp:first-child{
  background-image:
    linear-gradient(rgba(150,190,225,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,190,225,.13) 1px,transparent 1px),
    linear-gradient(rgba(150,190,225,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,190,225,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,34,54,.94) 0%,rgba(10,34,54,.84) 42%,rgba(10,34,54,.58) 100%),
    url(/storage/uploads/site/photos/site-review.webp);
  background-size:96px 96px,96px 96px,24px 24px,24px 24px,cover,cover;
  background-position:0 0,0 0,0 0,0 0,center,center;
}
@media (max-width:800px){
  body[data-page="blog"] main>section.bp:first-child{
    background-image:linear-gradient(rgba(10,34,54,.88),rgba(10,34,54,.88)),url(/storage/uploads/site/photos/site-review.webp);
    background-size:cover,cover;
  }
}

/* ===========================================================================
   Phones
   The build is already fluid — nothing on any page is wider than the screen.
   What follows is the part a static build cannot do: a menu that collapses
   instead of scrolling out of sight, a footer that folds, and the colours for
   the chrome the engine injects (sticky header, footer accordion, back to top).
   =========================================================================== */

/* The engine's mobile chrome (core-assets/mobile.css) in ECD colours. */
:root{
  --bc-sticky-bg:rgba(10,34,54,.96);
  --bc-sticky-shadow:0 6px 20px rgba(7,24,38,.45);
  --bc-acc-rule:rgba(150,190,225,.18);
  --bc-top-bg:#0A2236;
  --bc-top-bg-hover:#C2410C;
  --bc-top-border:rgba(159,194,222,.5);
  --bc-top-color:#E6EDF3;
  --bc-top-radius:2px;
}

/* --- Header: the Menu button --------------------------------------------- */
.nav-btn{display:none;align-items:center;gap:9px;min-height:44px;padding:0 14px;border:1.5px solid rgba(159,194,222,.5);border-radius:2px;background:transparent;color:#E6EDF3;cursor:pointer;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.nav-btn:hover{border-color:#E8590C;color:#FFFFFF}
.nav-btn::after{content:"";width:8px;height:8px;margin-top:-4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s ease,margin-top .2s ease}
.hd.is-open .nav-btn::after{margin-top:2px;transform:rotate(-135deg)}
.nav-cta{display:none}
/* Note: on a wide screen the build's own header already wraps to two rows —
   brand and nav, then phone and CTA. That is how the approved design renders,
   with seven nav items or with Blog making eight, so nothing here changes it. */

@media (max-width:760px){
  /* With JavaScript the strip becomes a panel; without it, the build's own
     sideways-scrolling nav is left exactly as it was. */
  .js .nav-btn{display:inline-flex}
  .js .hd .nav{order:4;flex:1 1 100%;display:none;flex-direction:column;gap:0;margin-top:6px;padding-bottom:4px;border-top:1px solid rgba(150,190,225,.18);max-height:min(68vh,560px);overflow-y:auto;overflow-x:visible;-webkit-mask-image:none;mask-image:none}
  .js .hd.is-open .nav{display:flex}
  .js .hd .nav a{padding:15px 2px;font-size:16px;white-space:normal;border-bottom:1px solid rgba(150,190,225,.12)}
  .js .hd .nav a[aria-current="page"]{color:#FFB27A}
  .js .hd .nav .nav-cta{display:flex;justify-content:center;align-items:center;min-height:50px;margin:16px 0 8px;padding:0 26px;border-bottom:0;font-size:16px}
  .js .hd .hdc .btn{display:none}          /* it lives in the panel now */
  .js .hd .tel{border:1px solid rgba(159,194,222,.5);border-radius:2px;padding:9px 12px;font-size:13px}
}
/* Logo, phone and Menu on one row on a 390px screen; narrower screens wrap,
   which is why the phone keeps its own border either way. */
@media (max-width:480px){
  .js .hdi{gap:8px 10px}
  .js .w{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
  .js .hd .tel{padding:8px 10px;font-size:12px}
  .js .nav-btn{padding:0 11px;gap:7px}

  /* Breathing room tuned for a phone: the build's 96px bands are a desktop
     rhythm and cost most of a screen here. */
  .sec{padding:64px 0}
  .two{gap:32px}
  .w{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
  .card{padding:22px}
  .ans{font-size:18px}
}

/* --- Footer: the engine folds the columns, this is how they look folded --- */
@media (max-width:760px){
  .ft.bc-footer-acc .ftg{gap:0;padding:44px 0 8px}
  .ft.bc-footer-acc h4{margin-bottom:0}
  .ft.bc-footer-acc .bc-acc-title{padding-top:17px!important;padding-bottom:17px!important}
  .ft.bc-footer-acc .bc-acc-inner ul{display:grid;gap:14px;padding:2px 0 6px}
  .ft.bc-footer-acc .bc-acc-inner a{display:inline-block;padding:3px 0}
  .ft .ftb{padding:22px 0 32px;gap:10px 24px}
  .ft .ftg>div[data-bc-acc="off"]{padding-bottom:22px}
}

/* The sticky header must not hide an anchor's heading. */
html.bc-has-sticky{scroll-padding-top:calc(var(--bc-header-h,72px) + 12px)}