/* Full-width photographs and a single, controllable customer-story timeline. */
[data-film-controls][hidden],[data-film-chapters][hidden] { display:none!important; }
.work-hero { position:relative; isolation:isolate; min-height:min(830px,calc(100svh - 119px)); background:#19281f; color:#fff; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.work-hero-background,.work-hero-shade { position:absolute; inset:0; width:100%; height:100%; z-index:-1; }
.work-hero-background { object-fit:cover; object-position:50% 48%; }
.work-hero-shade { background:linear-gradient(90deg,#11241eef 0%,#11241eb5 36%,#11241e12 78%),linear-gradient(0deg,#11241ebf,transparent 35%); }
.work-hero-content { padding-block:5rem 7rem; }
body:not(.demo-body) .work-hero .eyebrow { color:#dceacb; margin-bottom:1.7rem; }.work-hero .eyebrow:before { background:#dceacb!important; }
.work-hero h1 { font-size:clamp(3.5rem,5.6vw,5.6rem); line-height:1.01; max-width:770px; }
body:not(.demo-body) .work-hero h1 em { color:#dce9ac; }
.work-hero-content > p:not(.eyebrow):not(.work-hero-price) { max-width:435px; font-size:1.08rem; line-height:1.7; margin-top:1.6rem; color:#f2f5ee; }
.work-hero .actions { margin-top:1.8rem; gap:1.6rem; align-items:center; }.work-hero .text-link { color:#fff; }.work-hero .text-link:hover { color:#dce9ac; }
body:not(.demo-body) .work-hero .button { background:#e1ebae; color:#203427; min-height:56px; }.work-hero .button:hover { background:#f0f6d2!important; }
.work-hero-price { display:flex; align-items:center; gap:1.1rem; font-size:.82rem; margin-top:1.8rem; color:#e6eee2; }.work-hero-price strong { font-size:1.65rem; color:#fff; letter-spacing:-.04em; }.work-hero-price strong span { font-size:.85rem; font-weight:450; margin-left:.2rem; letter-spacing:0; }
.work-hero-footer { display:flex; align-items:center; gap:2rem; justify-content:space-between; position:absolute; bottom:0; left:0; right:0; padding-block:1.3rem; border-top:1px solid #ffffff45; font-size:.76rem; }.work-hero-footer > span:first-child { font-weight:650; }.work-hero-footer a { width:42px; height:42px; display:grid; place-items:center; border:1px solid #ffffff70; border-radius:50%; }.work-hero-footer svg { width:19px; transform:rotate(90deg); }
.customer-film { padding:5.5rem 0 4rem; background:#f2f1e9; scroll-margin-top:95px; }.film-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:3rem; padding-bottom:2rem; }.film-heading > p { color:#556054; line-height:1.8; font-size:.95rem; }.film-heading h2 { max-width:720px; }
.film-selector { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-bottom:1.6rem; background:#cbd1c4; border:1px solid #cbd1c4; border-radius:8px; overflow:hidden; }
.film-selector button { min-width:0; display:flex; align-items:center; gap:1rem; padding:1.05rem 1.4rem; font:inherit; font-size:1rem; font-weight:600; border:0; background:#f7f7f1; color:#394935; cursor:pointer; min-height:68px; }.film-selector button > span { color:#65745b; font-size:.69rem; font-weight:500; }.film-selector small { margin-left:auto; font-size:.65rem; font-weight:400; }.film-selector [aria-pressed=true] { background:#263e30; color:#fff; }.film-selector [aria-pressed=true] > span { color:#dce9ac; }.film-selector button:hover { box-shadow:inset 0 -3px #859368; }
.film-theater { background:#13261d; color:#fff; }.film-stage { position:relative; }.film-scene { position:relative; overflow:hidden; isolation:isolate; min-height:620px; display:flex; align-items:center; }.film-scene[hidden],.film-theater article[hidden] { display:none; }
.film-background,.film-shade { position:absolute; inset:0; width:100%; height:100%; z-index:-1; }.film-background { object-fit:cover; object-position:center; transform:scale(var(--film-zoom,1)); will-change:transform; }.film-shade { background:linear-gradient(90deg,#0c211cf7 0%,#0c211ccc 38%,#0c211c26 100%),linear-gradient(0deg,#0c211c66,transparent); }
.film-scene-content { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; padding-block:3rem; }.film-narration { max-width:520px; }.film-scene-meta { display:flex; justify-content:space-between; gap:1.2rem; color:#dbe5d5; font-size:.73rem; padding-bottom:2.6rem; }.film-scene-meta > span { font-variant-numeric:tabular-nums; color:#c4d3b9; }.film-role { font-size:.66rem; font-weight:600; letter-spacing:.13em; color:#dce9ac; margin-bottom:1rem; }.film-narration h3 { font-size:clamp(2rem,3.2vw,3.1rem); line-height:1.12; letter-spacing:-.045em; font-weight:600; text-wrap:balance; }.film-caption { margin-top:1.4rem; font-size:1.02rem; line-height:1.8; color:#e0e9dc; max-width:460px; }
.film-visual { width:100%; max-width:445px; justify-self:end; }.film-screen,.film-chat { background:#fffefa; color:#27372c; border:1px solid #e3e6da; border-radius:15px; overflow:hidden; box-shadow:0 20px 80px #07160c40; min-height:380px; }.film-screen-bar { background:#edf0e7; display:flex; align-items:center; gap:1rem; padding:1.05rem 1.3rem; font-size:.76rem; color:#4d5e47; border-bottom:1px solid #dce3d3; }.film-screen-bar > span:first-child { color:#788b6e; font-size:.57rem; letter-spacing:.3em; }.film-screen-body { padding:2rem; }.film-card-tag { color:#546848; font-size:.67rem; font-weight:650; letter-spacing:.1em; display:block; margin-bottom:.9rem; }.film-screen h4 { font-size:1.7rem; line-height:1.2; letter-spacing:-.04em; font-weight:650; margin-bottom:1rem; }.film-screen-body > p { font-size:.94rem; line-height:1.65; color:#596651; }
.film-entry { padding:.85rem 1rem; margin-top:.8rem; border:1px solid #dce3d2; border-radius:7px; background:#f4f6ee; }.film-entry small { display:block; font-size:.7rem; color:#64725c; margin-bottom:.35rem; }.film-entry strong { display:block; font-size:.94rem; font-weight:500; line-height:1.5; }.film-demo-action { display:block; padding:1rem; background:#294634; color:#fff; border-radius:6px; margin-top:1.2rem; font-size:.9rem; text-align:center; }
.film-status { display:flex; align-items:center; gap:.75rem; font-size:.85rem; color:#36532a; padding:.9rem 0; border-bottom:1px solid #dde6d5; line-height:1.5; }.film-status svg { width:19px; height:19px; flex-shrink:0; }.film-card-note { font-size:.76rem!important; margin-top:1rem; }
.film-app-top { display:flex; align-items:center; gap:.8rem; padding:1.1rem 1.3rem; background:#edf0e7; border-bottom:1px solid #dce3d3; }.film-avatar { display:grid; place-items:center; background:#d6dfc9; border-radius:50%; width:42px; height:42px; font-weight:600; }.film-app-top strong { display:block; font-size:.95rem; }.film-app-top small { display:block; font-size:.66rem; color:#617256; margin-top:.25rem; }.film-app-top > svg { width:20px; margin-left:auto; }.film-chat-body { padding:1.4rem; min-height:285px; }.film-message { padding:1rem 1.15rem; background:#ecf0e4; border-radius:13px 13px 13px 2px; margin-bottom:1.1rem; max-width:94%; }.film-message small { display:block; font-size:.65rem; font-weight:650; color:#596d4c; margin-bottom:.4rem; }.film-message p { font-size:.97rem; line-height:1.55; color:#263627; }.film-message.from-customer { margin-left:auto; background:#344f3b; border-radius:13px 13px 2px 13px; }.film-message.from-customer p,.film-message.from-customer small { color:#fff; }.film-message.from-owner { background:#e7ecdf; }.film-compose { border:1px solid #d3ddc9; border-radius:24px; display:flex; justify-content:space-between; align-items:center; margin:0 1.3rem 1.2rem; padding:.65rem 1rem; font-size:.76rem; color:#68745c; }.film-compose span { background:#47603b; border-radius:50%; width:25px; height:25px; display:grid; place-items:center; color:white; }
.film-call { background:#142d22ed; border:1px solid #a9c28f88; border-radius:18px; padding:2rem; min-height:400px; display:flex; align-items:center; justify-content:center; flex-direction:column; color:#fff; box-shadow:0 20px 80px #07160c40; }.film-call-avatar { width:70px; height:70px; background:#d2dfb2; color:#2c4231; display:grid; place-items:center; border-radius:50%; font-size:1.8rem; margin-bottom:1.2rem; }.film-call > span:not(.film-call-avatar) { font-size:.76rem; color:#d3dfcb; }.film-call h4 { font-size:2.2rem; margin:.2rem 0 .5rem; font-weight:500; }.film-call > p { font-size:.79rem; color:#d3dfcb; }.film-ring { width:58px; height:58px; display:grid; place-items:center; background:#d1e8a5; color:#203624; border-radius:50%; margin:2rem 0 1rem; }.film-ring svg { width:25px; }.film-missed { color:#f6d6b9; font-size:.82rem; }.film-rating { font-size:2.7rem; color:#946423; white-space:nowrap; letter-spacing:.05em; }.film-review-link { display:block; padding:1rem; border:1px solid #cbd8be; border-radius:8px; color:#36532a; font-size:.9rem; text-align:center; }
.film-beat { transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1); }.film-beat.is-upcoming { opacity:0; transform:translateY(18px); }.customer-film[data-playing=true] .film-ring { animation:phone-ring 1.8s ease-in-out infinite; }.customer-film[data-playing=false] .film-ring { animation-play-state:paused; }
@keyframes phone-ring { 0%,100% { box-shadow:0 0 0 0 #d1e8a540; } 50% { box-shadow:0 0 0 15px #d1e8a508; } }
.film-player { display:flex; align-items:center; gap:1.2rem; min-height:80px; border-top:1px solid #afc19c40; padding-block:.8rem; }.film-player button { color:#fff; border:1px solid #8a9d7d75; background:transparent; height:46px; min-width:46px; border-radius:7px; display:flex; align-items:center; justify-content:center; gap:.65rem; cursor:pointer; font:inherit; }.film-play { padding:.5rem .9rem; min-width:102px!important; font-size:.82rem!important; }.film-player button:hover { background:#304d38; }.film-time { white-space:nowrap; font-size:.75rem; font-variant-numeric:tabular-nums; color:#e1eadb; }.film-player input[type=range] { -webkit-appearance:none; appearance:none; flex:1; min-width:30px; width:auto; cursor:pointer; height:44px; background:transparent; border:0; padding:0; accent-color:#dce9ac; }.film-player input[type=range]::-webkit-slider-runnable-track { height:4px; border-radius:3px; background:linear-gradient(90deg,#dce9ac var(--progress,0%),#718768 var(--progress,0%)); }.film-player input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; background:#e0ecb7; border:2px solid #263e30; box-shadow:0 0 0 1px #c8d5b9; height:16px; width:16px; border-radius:50%; margin-top:-6px; }.film-player input[type=range]::-moz-range-track { background:#718768; height:4px; }.film-player input[type=range]::-moz-range-thumb { background:#e0ecb7; border:0; border-radius:50%; width:16px; height:16px; }.film-player svg { width:19px; height:19px; }
.film-chapters { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1.1rem; margin-top:1.6rem; }.film-chapters button { display:flex; gap:.6rem; align-items:flex-start; border:0; border-top:3px solid #d4dbcb; padding:.9rem 0; text-align:left; background:transparent; color:#5a6950; font-size:.75rem; font-family:inherit; line-height:1.5; min-height:54px; cursor:pointer; }.film-chapters [aria-pressed=true] { border-top-color:#36563e; color:#243d2a; font-weight:700; }.film-chapters button > span:first-child { font-size:.61rem; padding-top:.1rem; }
.film-bottom-line { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:.7rem 0 1.3rem; }.film-bottom-line p { font-size:.7rem; color:#5a6950; }.film-bottom-line a { display:flex; gap:.6rem; align-items:center; font-size:.78rem; font-weight:550; white-space:nowrap; }.film-bottom-line svg { width:16px; }.film-transcript { border-top:1px solid #d4dbcb; font-size:.9rem; line-height:1.7; }.film-transcript summary { padding:1rem 0; min-height:48px; cursor:pointer; font-size:.79rem; }.film-transcript h3 { margin:1.6rem 0 1rem; font-size:1.3rem; }.film-transcript li { margin-bottom:1rem; }.film-transcript > div { max-width:850px; margin-bottom:2rem; }.film-theater:fullscreen { overflow-y:auto; display:flex; flex-direction:column; justify-content:center; }.film-theater:fullscreen .film-scene { min-height:calc(100vh - 80px); }.film-theater:fullscreen .film-player { flex-shrink:0; }
.work-onboarding { position:relative; isolation:isolate; overflow:hidden; background:#203429; padding:5rem 0; }.work-onboarding-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left center; z-index:-1; }.work-onboarding > .container { display:flex; justify-content:flex-end; }.work-onboarding-card { width:52%; padding:3rem; border-radius:2px; background:#fffef9f5; box-shadow:0 10px 50px #16241a26; }.work-onboarding-card h2 { font-size:clamp(2rem,3.1vw,3.2rem); }.work-onboarding-card ol { list-style:none; padding:0; margin:1.8rem 0; }.work-onboarding-card li { display:flex; gap:1rem; padding:1.2rem 0; border-top:1px solid #d9e0d1; }.work-onboarding-card li > span { font-size:.74rem; color:#65784e; padding-top:.25rem; }.work-onboarding-card h3 { font-size:1.08rem; font-weight:600; }.work-onboarding-card li p { font-size:.86rem; color:#5a6950; margin-top:.6rem; line-height:1.7; }.work-onboarding-card > .text-link { margin-top:1rem; display:flex; font-size:.77rem; }
/* The actual prototype is large enough to read in the portfolio. */
.portfolio-section .portfolio-grid,.portfolio-collection .portfolio-grid { grid-template-columns:1fr; gap:3.5rem; }.portfolio-collection .portfolio-card,.portfolio-collection .portfolio-card:nth-child(n+4) { grid-column:auto; }.portfolio-image,.portfolio-collection .portfolio-card:nth-child(n+4) .portfolio-image { height:580px; padding:0; border-radius:8px; }.portfolio-image .browser-frame { border:0; box-shadow:none; border-radius:0; }.portfolio-image .preview-capture { height:auto; object-fit:cover; object-position:top; }.portfolio-image .browser-bar { display:none; }.portfolio-meta { padding-top:1.2rem; }.portfolio-meta h3 { font-size:1.6rem; }.portfolio-meta p { font-size:.8rem; }.portfolio-open { font-size:.85rem; padding:.8rem 1.2rem; bottom:24px; }.portfolio-page-hero .lead { max-width:650px; }
.photo-credits { scroll-margin-top:130px; padding:1.2rem; border:1px solid #d7dfcf; border-radius:7px; }.photo-credits summary { cursor:pointer; min-height:44px; font-weight:600; }.photo-credits li { margin-block:1rem; font-size:.86rem; overflow-wrap:anywhere; }.photo-credits a { text-decoration:underline; }
/* Each trade keeps its own identity, with photographs extending edge to edge. */
.ref-electric-hero { position:relative; isolation:isolate; min-height:670px; display:flex; align-items:center; padding:3.5rem 0 5rem; overflow:hidden; }
.ref-electric-photo { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0; margin:0; z-index:-2; }.ref-electric-photo img { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); object-position:center; }.ref-electric-hero:before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#042952f5 0%,#042952cf 38%,#0429521f 85%); }.ref-electric-copy { width:56%; }.ref-electric-hero .ref-spark { display:none; }.ref-wave { height:45px; }.ref-electric-hero > .demo-container { position:relative; z-index:1; }
.ref-plumbing-hero { min-height:670px; }.ref-plumbing-background { width:100%; height:100%; opacity:1; object-position:50% 45%; }.ref-plumbing-hero:after { background:linear-gradient(90deg,#102739f5 0%,#102739d9 34%,#10273920 80%); }.ref-plumbing-tag { border-radius:0; background:#fffffff0; }.ref-plumbing-copy { width:55%; }
.ref-roof-hero { display:flex; align-items:center; min-height:690px; background:#172739; isolation:isolate; }.ref-roof-hero > img { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; max-width:none; object-fit:cover; object-position:center; margin:0; z-index:-2; }.ref-roof-hero:after { display:block; background:linear-gradient(90deg,#0c2035e3 0%,#0c20358a 45%,#0c20352b 100%); z-index:-1; }.ref-roof-hero > .demo-container { padding-block:4rem; align-items:center; gap:6rem; grid-template-columns:1.35fr 1fr; }.ref-roof-hero > .demo-container:before { display:none; }.ref-roof-hero .ref-quick-form { margin:0; background:#111b26f2; }.ref-roof-copy h1 { font-size:clamp(2.7rem,4.5vw,4.5rem); }.ref-roof-copy .demo-button { background:#2e79c9; color:#fff; }.ref-roof-hero .ref-roof-copy .demo-kicker { color:#d1e5fc; }
.ref-photo-grid img { height:330px; }.ref-photo-grid a { position:relative; }.ref-photo-grid a > span { position:absolute; inset:auto 0 0; padding:2rem 1rem 1rem; background:linear-gradient(transparent,#000d); color:white; font-size:.76rem; line-height:1.6; }.ref-image-note a { text-decoration:underline; }
.theme-form .form-hero { position:relative; isolation:isolate; width:100%; max-width:none; margin:0; min-height:680px; padding:5rem max(2.5rem,calc((100vw - 1220px)/2)); display:flex; align-items:center; background:#28263d; color:white; }.theme-form .form-hero > div:first-child { width:60%; z-index:1; }.theme-form .form-hero h1 { font-size:clamp(3rem,5vw,5.1rem); }.theme-form .form-hero h1 em { color:#e0d6f3; }.theme-form .form-hero p,.theme-form .form-hero .demo-kicker,.theme-form .form-hero-caption { color:#f2eaf9; }.theme-form .form-hero-image { position:absolute; inset:0; height:100%; width:100%; border-radius:0; z-index:-2; }.theme-form .form-hero-image img { width:100%; height:100%; object-fit:cover; object-position:70% 50%; border-radius:0; }.theme-form .form-hero-image > span { display:none; }.theme-form .form-hero:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#28243ddd 0%,#28243d9c 45%,#28243d18 100%); z-index:-1; }.theme-form .form-hero .demo-button { background:#e2d7f1; color:#362543; }
.trade-work-photo { position:relative; height:460px; overflow:hidden; }.trade-work-photo > img { width:100%; height:100%; object-fit:cover; }.trade-work-photo figcaption { position:absolute; bottom:0; left:0; right:0; padding:3rem max(1.25rem,calc((100% - 1220px)/2)) 1.4rem; background:linear-gradient(transparent,#101b27ee); color:white; font-size:.82rem; }
@media(min-width:761px) and (max-width:1100px) {
 .work-hero { min-height:680px; }.film-scene-content { gap:3rem; }.film-selector button { gap:.6rem; padding:.8rem; font-size:.85rem; }.film-selector small { font-size:.6rem; }.film-narration h3 { font-size:2.2rem; }.film-screen-body { padding:1.5rem; }.film-visual { max-width:390px; }.film-caption { font-size:.92rem; }.film-message p { font-size:.9rem; }.work-onboarding-card { width:58%; padding:2rem; }.ref-roof-hero > .demo-container { gap:2rem; }.ref-electric-copy { width:60%; }.ref-plumbing-copy { width:62%; }
}
@media(max-width:760px) {
 .work-hero { min-height:720px; min-height:calc(100svh - 107px); }.work-hero-content { padding-block:3.8rem 7rem; }.work-hero-background { object-position:62% center; }.work-hero-shade { background:linear-gradient(90deg,#11241edb,#11241e40),linear-gradient(0deg,#11241edc,transparent); }.work-hero h1 { font-size:clamp(2.85rem,10.8vw,4.5rem); }.work-hero .eyebrow { font-size:.56rem!important; max-width:290px; }.work-hero-content > p:not(.eyebrow):not(.work-hero-price) { font-size:.97rem; max-width:345px; }.work-hero .actions { align-items:flex-start; flex-direction:column; gap:1rem; }.work-hero .actions .button { width:auto; }.work-hero-price { gap:.75rem; font-size:.7rem; flex-wrap:wrap; }.work-hero-price strong { font-size:1.45rem; }.work-hero-footer { font-size:.67rem; padding-block:1rem; }.work-hero-footer > span:nth-child(2) { display:none; }
 .customer-film { padding:3.5rem 0 2.5rem; scroll-margin-top:76px; }.film-heading { display:block; padding-bottom:1.5rem; }.film-heading .eyebrow { font-size:.56rem!important; max-width:290px; }.film-heading > p { margin-top:1.2rem; font-size:.88rem; }.film-heading > p br { display:none; }.film-heading h2 { font-size:clamp(2.2rem,8.5vw,3rem); }.film-selector { width:calc(100% - 2.5rem); margin-bottom:1.1rem; }.film-selector button { display:block; text-align:left; padding:.8rem .6rem; font-size:.73rem; min-height:80px; line-height:1.4; }.film-selector button > span { display:block; font-size:.53rem; margin-bottom:.3rem; }.film-selector small { display:none; }
 .film-theater { display:flex; flex-direction:column; }.film-scene { min-height:670px; align-items:stretch; }.film-scene-content { display:flex; flex-direction:column; gap:1.5rem; padding-block:1.7rem; }.film-shade { background:linear-gradient(180deg,#0c211cee 0%,#0c211cc9 42%,#0c211c33 100%); }.film-scene-meta { padding-bottom:1.3rem; font-size:.62rem; }.film-role { font-size:.59rem; margin-bottom:.7rem; }.film-narration h3 { font-size:clamp(1.65rem,7.1vw,2.3rem); max-width:440px; line-height:1.14; }.film-caption { font-size:.88rem; line-height:1.7; margin-top:.85rem; }.film-visual { align-self:center; max-width:420px; }.film-screen,.film-chat { min-height:310px; border-radius:11px; }.film-screen-body { padding:1.25rem; }.film-screen-bar { font-size:.68rem; padding:.8rem 1rem; }.film-screen h4 { font-size:1.35rem; }.film-screen-body > p { font-size:.84rem; }.film-entry { margin-top:.7rem; padding:.7rem .85rem; }.film-entry small { font-size:.63rem; }.film-entry strong { font-size:.83rem; }.film-demo-action { font-size:.8rem; padding:.85rem; }.film-status { font-size:.78rem; gap:.55rem; padding:.7rem 0; }.film-app-top { padding:.85rem 1rem; }.film-app-top strong { font-size:.85rem; }.film-app-top small { font-size:.6rem; }.film-avatar { width:35px; height:35px; font-size:.9rem; }.film-chat-body { min-height:228px; padding:1rem; }.film-message { padding:.8rem 1rem; margin-bottom:.8rem; }.film-message p { font-size:.86rem; line-height:1.5; }.film-message small { font-size:.6rem; }.film-compose { font-size:.68rem; margin:0 1rem 1rem; padding:.45rem .85rem; }.film-call { min-height:320px; padding:1.4rem; }.film-call-avatar { height:55px; width:55px; font-size:1.4rem; margin-bottom:.75rem; }.film-call h4 { font-size:1.8rem; }.film-call > p { font-size:.73rem; }.film-ring { margin:1.4rem 0 1rem; width:48px; height:48px; }.film-rating { font-size:2.4rem; }.film-review-link { padding:.8rem; font-size:.8rem; }
 .film-player { gap:.7rem; min-height:70px; order:-1; border-top:0; position:sticky; top:74px; z-index:5; background:#13261d; width:100%!important; padding:.7rem 1.25rem; }.film-play { min-width:42px!important; padding:.4rem!important; }.film-play [data-film-play-label] { display:none; }.film-player button { min-width:40px; height:44px; }.film-player .film-time { font-size:.6rem; }.film-player .film-replay { min-width:30px; border:0; }.film-player .film-expand { display:none; }.film-chapters { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.3rem .9rem; margin-top:1.2rem; }.film-chapters button { font-size:.64rem; gap:.4rem; padding:.7rem 0; }.film-chapters button > span:first-child { font-size:.53rem; }.film-bottom-line { display:block; padding-bottom:1rem; }.film-bottom-line p { font-size:.62rem; line-height:1.7; }.film-bottom-line a { margin-top:.65rem; min-height:36px; }.film-transcript { font-size:.85rem; }.film-transcript ol { padding-left:1.2rem; }
 .work-onboarding { padding:16rem 0 2rem; }.work-onboarding-background { height:470px; object-position:25% center; }.work-onboarding > .container { display:block; }.work-onboarding-card { width:100%; padding:1.7rem 1.4rem; }.work-onboarding-card h2 { font-size:2.2rem; }.work-onboarding-card h3 { font-size:1rem; }.work-onboarding-card li p { font-size:.81rem; }.work-onboarding-card > .button { font-size:.8rem!important; padding:.8rem 1rem!important; }
 .portfolio-section .portfolio-grid,.portfolio-collection .portfolio-grid { gap:2.4rem; }.portfolio-image,.portfolio-collection .portfolio-card:nth-child(n+4) .portfolio-image { height:345px; padding:0; border-radius:5px; }.portfolio-image .preview-capture { width:100%; height:100%; object-fit:cover; object-position:top; }.portfolio-meta h3 { font-size:1.2rem; }.portfolio-meta p { font-size:.65rem; }.portfolio-meta { padding-top:1rem; }.portfolio-open { font-size:.72rem; padding:.7rem 1rem; bottom:18px; }
 .ref-electric-hero { padding:3rem 0 4rem; min-height:650px; }.ref-electric-photo { position:absolute; width:100%; height:100%; margin:0; border-radius:0; }.ref-electric-photo img { object-position:40% center; }.ref-electric-copy { width:100%; }.ref-electric-hero:before { background:linear-gradient(90deg,#042952e6,#04295266),linear-gradient(0deg,#04295299,transparent); }.reference-trade .ref-electric-copy h1 { font-size:clamp(2.7rem,9vw,4rem); }.ref-wave { height:30px; }
 .ref-plumbing-hero { min-height:650px; }.ref-plumbing-background { width:100%; height:100%; opacity:1; object-position:64% center; }.ref-plumbing-hero:after { background:linear-gradient(90deg,#102739e8,#10273966); }.ref-plumbing-copy { width:100%; }.ref-plumbing-copy > p:not(.demo-kicker) { max-width:280px; font-size:.96rem; }
 .ref-roof-hero { min-height:0; }.ref-roof-hero > img { position:absolute; height:100%; width:100%; object-position:37% center; }.ref-roof-hero:after { background:linear-gradient(180deg,#0c2035ba,#0c203546); }.ref-roof-hero > .demo-container { grid-template-columns:1fr; gap:2rem; padding-block:3rem 2rem; }.ref-roof-copy h1 { font-size:clamp(2.65rem,9vw,3.8rem); }.ref-roof-hero .ref-quick-form { padding:1.4rem; background:#101b27ed; }.ref-photo-grid img { height:245px; }.ref-photo-grid a:first-child img { height:310px; }.ref-photo-grid a > span { font-size:.67rem; padding:2rem .7rem .7rem; }
 .theme-form .form-hero { padding:3rem 1.25rem; min-height:660px; }.theme-form .form-hero > div:first-child { width:100%; }.theme-form .form-hero h1 { font-size:clamp(2.8rem,10vw,4rem); }.theme-form .form-hero-image { height:100%; margin:0; }.theme-form .form-hero-image img { object-position:60% center; }.theme-form .form-hero:after { background:linear-gradient(90deg,#28243dcf,#28243d55); }.theme-form .form-hero p { font-size:1rem; max-width:325px; }.theme-form .form-hero-caption { margin-top:2rem; }.trade-work-photo { height:360px; }
}
@media(max-width:360px) { .work-hero-content { padding-top:2.6rem; }.work-hero h1 { font-size:2.8rem; }.work-hero .actions { gap:.8rem; }.work-hero-price { margin-top:1.3rem; }.film-selector button { font-size:.65rem; }.film-player { gap:.45rem; }.film-scene-content { gap:1.2rem; }.film-message p { font-size:.81rem; }.film-entry strong { font-size:.79rem; }.film-scene-meta { font-size:.55rem; }.film-narration h3 { font-size:1.8rem; }.film-rating { font-size:2rem; }.portfolio-image,.portfolio-collection .portfolio-card:nth-child(n+4) .portfolio-image { height:300px; } }
.film-selector { grid-template-columns:repeat(4,minmax(0,1fr)); }.film-selector button { gap:.6rem; padding-inline:1rem; font-size:.91rem; }.film-selector small { font-size:.59rem; }.film-site-review { width:100%; height:230px; object-fit:cover; object-position:top; border:1px solid #dce3d2; border-radius:4px; }.material-photo { width:100%; height:200px; object-fit:cover; margin-bottom:1.4rem; }
.service-detail-hero { position:relative; isolation:isolate; width:100%!important; max-width:none!important; display:flex; min-height:610px; align-items:center; background:#142c20; color:#fff; padding:4rem max(2.5rem,calc((100% - 1240px)/2)); overflow:hidden; }.service-detail-hero > img { position:absolute; inset:0; width:100%; height:100%; max-height:none; object-fit:cover; border-radius:0!important; z-index:-2; }.service-detail-hero:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#11291eeb,#11291e9e 48%,#11291e22); z-index:-1; }.service-detail-hero > div { max-width:690px; }.service-detail-hero .lead { color:#e4eddf; max-width:600px; }.service-detail-hero .eyebrow { color:#e1ebcc!important; }.service-detail-hero h1 em { color:#dce9ac!important; }.service-detail-hero .button { margin-top:1.4rem; }
@media(max-width:1100px) { .film-selector small { display:none; } }
@media(max-width:760px) { .film-selector { grid-template-columns:repeat(2,minmax(0,1fr)); }.film-selector button { display:flex; font-size:.76rem; min-height:60px; gap:.6rem; padding:.75rem .65rem; }.film-selector button > span { margin:0; font-size:.55rem; }.film-site-review { height:180px; }.service-detail-hero { padding:3rem 1.25rem; min-height:600px; }.service-detail-hero h1 { font-size:2.55rem; }.service-detail-hero .lead { font-size:.98rem; }.material-photo { height:240px; } }
.work-onboarding-card li > span { color:#425535; }.film-app-top small { color:#475a3f; }
.example-detail-hero.demo-container { position:relative; isolation:isolate; width:100%!important; max-width:none; display:flex; align-items:center; min-height:620px; padding:4rem max(2.5rem,calc((100% - 1220px)/2)); overflow:hidden; background:#102739; color:#fff; }.example-detail-hero > div { position:relative; z-index:1; max-width:650px; }.example-detail-hero > figure { position:absolute; inset:0; width:100%; height:100%; margin:0; z-index:-2; }.example-detail-hero > figure img { width:100%; height:100%; object-fit:cover; border-radius:0!important; }.example-detail-hero:after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#102739f2 0%,#102739b8 46%,#10273920 100%); }.example-detail-hero > div > p:not(.demo-kicker) { color:#e4ebf0; max-width:560px; }.example-detail-hero .demo-kicker { color:#cbdff0!important; }.example-detail-hero figure figcaption { position:absolute; right:20px; bottom:12px; color:white; background:#102739cc; padding:.35rem .6rem; font-size:.62rem; border:0; }.theme-current .example-detail-hero h1 span { color:#ffe035; }.theme-clearflow .example-detail-hero h1 span { color:#ffd3c8; }.theme-ridgeline.reference-trade .example-detail-hero h1 em { color:#bbdcff; }.theme-form .example-detail-hero { background:#30263e; }.theme-form .example-detail-hero:after { background:linear-gradient(90deg,#30263eee,#30263eb0 46%,#30263e22); }.theme-form .example-detail-hero h1 em { color:#e5d5f4; }.theme-olive .example-detail-hero { background:#243725; }.theme-olive .example-detail-hero:after { background:linear-gradient(90deg,#233522ed,#233522b8 46%,#23352222); }.theme-olive .example-detail-hero h1 em { color:#e1e6b2; }
@media(max-width:760px) { .example-detail-hero.demo-container { padding:3rem 1.25rem 4rem; min-height:630px; }.example-detail-hero > figure { min-height:0; }.example-detail-hero > figure img { min-height:100%; }.example-detail-hero h1 { font-size:2.8rem; }.example-detail-hero:after { background:linear-gradient(90deg,#102739e6,#1027398f); }.example-detail-hero > div > p:not(.demo-kicker) { font-size:.94rem; }.example-detail-hero figure figcaption { right:12px; bottom:10px; font-size:.55rem; } }
/* Keep photo captions above the shade while the image stays behind the copy. */
.example-detail-hero > figure { z-index:auto; }
.example-detail-hero > figure img { position:absolute; inset:0; z-index:-2; }
.example-detail-hero figure figcaption { z-index:1; background:#102739; opacity:1; }
.theme-form .example-detail-body article > span { color:#57445f; opacity:1; }
@media(max-width:760px) {
 .example-detail-hero:after { background:linear-gradient(90deg,#102739e6,#102739b3); }
 .theme-form .example-detail-hero:after { background:linear-gradient(90deg,#30263eef,#30263eb3); }
 .theme-olive .example-detail-hero:after { background:linear-gradient(90deg,#233522ed,#233522b3); }
}
@keyframes film-scene-enter { from { opacity:.35; } to { opacity:1; } }
.film-scene:not([hidden]) { animation:film-scene-enter .7s ease-out; }
@media(prefers-reduced-motion:reduce) { .film-scene { animation:none!important; }.film-beat { transition:none; }.film-background { transform:none!important; will-change:auto; }.film-ring { animation:none!important; } }