/* Homepage compositions follow Archly Home 01. Shared page styles stay in site.css. */
.project-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:7%;align-items:start}.project-grid img{width:100%;object-fit:cover}.project-grid .idea-wide img{height:570px}.project-grid .idea-tall{margin-top:145px;position:relative}.project-grid .idea-tall img{height:490px}.project-grid figcaption{padding-top:26px}.project-grid figcaption>span{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--accent)}.project-grid h3{margin:12px 0 20px;font-size:32px}.project-grid figcaption p{margin-top:22px;max-width:530px}.project-bottom{display:grid;grid-template-columns:1fr 1.3fr auto;gap:55px;align-items:center;border-block:1px solid var(--line);padding:45px 0;margin-top:65px}.project-bottom .text-link{white-space:nowrap}.scope-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:24px}.scope-card{border:1px solid var(--line);padding:38px;display:grid;grid-template-columns:1fr 1.2fr;gap:35px}.scope-card .eyebrow{margin-bottom:16px}.scope-card ul{padding-left:18px;margin:20px 0 26px}.scope-card li{margin-bottom:8px}.scope-feature{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;gap:24px;background:var(--accent);color:#292b31}.scope-feature h3{font-size:44px;color:#292b31}.scope-feature .eyebrow{color:#292b31;margin:0}.scope-feature ul{margin:0}.scope-feature .button{background:var(--dark);color:white;border-color:var(--dark);margin-top:auto}.scope-feature p+p{margin:0}.service-mosaic{padding-top:45px}.mosaic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:start}.mosaic-column{display:flex;flex-direction:column;gap:24px}.mosaic-column:nth-child(2),.mosaic-column:nth-child(4){padding-top:145px}.mosaic-column:nth-child(3){padding-top:35px}.mosaic-heading{min-height:185px}.mosaic-heading h2{font-size:48px}.mosaic-heading>p:last-child{display:none}.mosaic-heading .eyebrow{display:none}.mosaic-grid .service-card{min-height:330px;padding:32px 20px 58px;text-align:center;align-items:center;background-image:linear-gradient(#32343b99,#32343b99),url('/assets/images/service-lines.webp');background-position:center bottom;background-size:100% auto;background-repeat:no-repeat}.mosaic-grid .service-card h3{font-size:23px;padding:0;margin:0;max-width:none}.mosaic-grid .service-card p{font-size:13px;line-height:1.65;margin:20px 0}.mosaic-grid .card-arrow{top:auto;bottom:0;right:calc(50% - 27px);width:54px;height:48px;border:1px solid var(--line);display:grid;place-items:center;background:var(--bg);font-size:28px}.mosaic-grid .text-link{font-size:11px;margin-top:auto;align-self:center}.mosaic-photo{overflow:hidden}.mosaic-photo img{width:100%;height:320px;object-fit:cover;transition:transform .7s}.mosaic-column:last-child .mosaic-photo img{object-position:right}.mosaic-photo:hover img{transform:scale(1.045)}.steps-grid{gap:30px;padding-top:40px}.steps-grid li{border:1px solid var(--line);padding:38px 32px 28px;background:linear-gradient(#32343b99,#32343b99),url('/assets/images/steps-lines.webp') center bottom/100% auto no-repeat;display:flex;flex-direction:column;min-height:390px}.steps-grid li:nth-child(2){margin-top:-40px;margin-bottom:40px}.steps-grid h3{font-size:28px}.steps-grid p{margin:22px 0 30px}.steps-grid .step-number{margin:auto 0 0;font-size:76px;color:var(--accent)}.design-marquee{overflow:hidden;position:relative;border-block:1px solid var(--line);padding:35px 0}.marquee-track{display:flex;width:max-content;font:400 clamp(46px,7vw,110px)/1.25 var(--heading);color:white}.marquee-track span{white-space:nowrap}.marquee-track i{color:var(--accent);font-weight:400}.comparison-section{padding-block:70px}.comparison-section .section-heading{margin-bottom:30px}.comparison{position:relative;--split:50%;overflow:hidden;height:clamp(240px,36vw,480px)}.comparison>img{width:100%;height:100%;object-fit:cover}.comparison-after{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split)) 0 0)}.comparison-after img{width:100%;height:100%;object-fit:cover}.comparison-line{position:absolute;inset:0 auto 0 var(--split);width:44px;transform:translateX(-50%);cursor:ew-resize;touch-action:none;user-select:none}.comparison-line::before{content:"";position:absolute;inset:0 auto 0 50%;width:2px;background:white;transform:translateX(-50%)}.comparison-line:focus-visible{outline:none}.comparison-line:focus-visible span{outline:3px solid white;outline-offset:5px}.comparison img{user-select:none;-webkit-user-drag:none}.comparison-line span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:var(--accent);color:#25262b;display:grid;place-items:center;font-size:28px}.comparison-label{position:absolute;top:22px;background:#25262be8;color:white;padding:8px 14px;font-size:12px}.after-label{left:22px}.before-label{right:22px}.comparison-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:28px}.comparison-notes h3{font-size:25px;margin-bottom:12px}.faq-section{padding:0;background:var(--dark)}.faq-editorial{display:grid;grid-template-columns:1fr 1fr;max-width:1552px;margin:auto}.faq-photo{position:relative}.faq-photo img{width:100%;height:510px;object-fit:cover;object-position:center 42%}.faq-photo figcaption{position:absolute;bottom:18px;left:25px;color:white;background:#25262bc9;padding:4px 10px;font-size:11px}.faq-intro,.faq-checklist{padding:70px clamp(30px,5vw,85px)}.faq-intro{align-self:center}.faq-intro>p:not(.eyebrow){margin:25px 0}.faq-checklist ul{list-style:none;padding:0;margin-top:32px}.faq-checklist li{border-bottom:1px solid var(--line);padding:18px 0}.faq-editorial .faq-list{background:var(--accent);color:#292b31;padding:35px clamp(25px,4vw,65px)}.faq-editorial .faq-item{border-color:#292b3140}.faq-editorial .faq-item summary{color:#292b31;font-size:19px}.faq-editorial .faq-symbol{color:#292b31}.faq-editorial .faq-item p{color:#292b31}.hero-photo{overflow:hidden}



@media(min-width:1500px){.mosaic-grid .service-card{min-height:345px}}
@media(max-width:1100px){.mosaic-grid{gap:18px}.mosaic-column{gap:18px}.mosaic-grid .service-card{padding:25px 14px 55px}.mosaic-grid .service-card h3{font-size:21px}.mosaic-photo img{height:270px}.scope-card{display:block}.scope-card>div+div{margin-top:25px}.scope-feature{display:flex}.project-bottom{grid-template-columns:1fr 1.4fr}.project-bottom>a{grid-column:2;justify-self:start}.steps-grid li{padding:28px 22px}.project-grid .idea-wide img{height:470px}.project-grid .idea-tall img{height:420px}}
@media(max-width:900px){.mosaic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}.mosaic-column:nth-child(3){padding-top:0}.mosaic-column:nth-child(4){padding-top:60px}.mosaic-column:nth-child(2){padding-top:100px}.mosaic-heading{min-height:130px}.mosaic-grid .service-card{min-height:310px}.mosaic-photo img{height:320px}.scope-grid{grid-template-columns:1fr 1fr}.scope-feature h3{font-size:36px}.project-grid{gap:35px}.project-grid .idea-tall{margin-top:90px}.project-grid .idea-wide img{height:400px}.project-grid .idea-tall img{height:360px}.project-bottom{gap:25px}.comparison-notes{gap:24px}.faq-photo img{height:480px}.faq-intro,.faq-checklist{padding:40px 28px}.steps-grid{gap:18px}.steps-grid li{min-height:470px}.steps-grid h3{font-size:24px}}
@media(max-width:600px){.project-grid{grid-template-columns:1fr;gap:40px}.project-grid .idea-tall{margin-top:0;margin-left:36px}.project-grid .idea-wide img{height:330px}.project-grid .idea-tall img{height:400px}.project-grid h3{font-size:29px}.project-bottom{grid-template-columns:1fr;gap:25px;margin-top:40px}.project-bottom>a{grid-column:1}.scope-grid{grid-template-columns:1fr}.scope-card{padding:28px}.scope-feature{grid-column:auto;grid-row:auto}.mosaic-grid{gap:14px}.mosaic-column{gap:14px}.mosaic-column:nth-child(2){padding-top:80px}.mosaic-column:nth-child(4){padding-top:30px}.mosaic-heading{min-height:105px}.mosaic-heading h2{font-size:31px}.mosaic-grid .service-card{padding:20px 12px 48px;min-height:380px}.mosaic-grid .service-card h3{font-size:19px;overflow-wrap:anywhere}.mosaic-grid .service-card p{font-size:12px;margin:15px 0}.mosaic-grid .text-link{font-size:10px;gap:6px}.mosaic-grid .card-arrow{height:38px;width:44px;right:calc(50% - 22px)}.mosaic-photo img{height:195px}.steps-grid{grid-template-columns:1fr;padding-top:0;gap:24px}.steps-grid li{min-height:320px;padding:30px}.steps-grid li:nth-child(2){margin:0}.steps-grid h3{font-size:27px}.comparison-label{top:12px;padding:5px 7px;font-size:9px}.after-label{left:10px}.before-label{right:10px}.comparison-line span{width:38px;height:38px;font-size:23px}.comparison-section{padding-block:48px}.comparison-notes{grid-template-columns:1fr;gap:22px}.faq-editorial{grid-template-columns:1fr}.faq-photo img{height:350px}.faq-intro{grid-row:1}.faq-checklist{grid-row:4}.faq-editorial .faq-list{padding:20px 28px}.faq-editorial .faq-item summary{font-size:18px}}

/* Compact service mosaic: retain offset columns while scaling to screen height. */
@media(min-width:901px){
 .service-mosaic{padding-block:12px}
 .mosaic-grid,.mosaic-column{gap:10px}
 .mosaic-heading{min-height:54px;height:54px;position:relative;z-index:1}
 .mosaic-heading h2{font-size:clamp(34px,3.85vw,55px);line-height:1.08;position:absolute;bottom:0;left:0;width:max-content;max-width:calc(200% + 10px)}
 .mosaic-column:nth-child(2),.mosaic-column:nth-child(4){padding-top:58px}
 .mosaic-column:nth-child(3){padding-top:16px}
 .mosaic-grid .service-card{min-height:clamp(215px,27vh,265px);padding:16px 16px 38px}
 .mosaic-grid .service-card h3{font-size:20px}
 .mosaic-grid .service-card p{font-size:13px;line-height:1.5;margin:12px 0 0}
 .mosaic-grid .service-card .text-link{display:none}
 .mosaic-grid .card-arrow{height:30px;width:38px;right:calc(50% - 19px);font-size:22px}
 .mosaic-photo img{height:clamp(130px,18vh,185px)}
 .service-mosaic>.section-note{margin-top:18px}
}
@media(max-width:900px){.mosaic-grid .service-card{min-height:260px}.mosaic-photo img{height:220px}}
@media(max-width:600px){.mosaic-grid .service-card{min-height:265px}.mosaic-photo img{height:180px}}

/* Process cards: quiet architectural accents, with hover only on fine pointers. */
#how-it-works .steps-grid li{isolation:isolate;transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .4s,box-shadow .4s}
#how-it-works .steps-grid li::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(145deg,#b99a801f,transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none}
#how-it-works .steps-grid li::after{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.3,1);pointer-events:none}
#how-it-works .steps-grid h3{transition:color .35s}
#how-it-works .step-number{position:static;transform-origin:left bottom;transition:transform .45s,color .35s}
@media(hover:hover) and (pointer:fine){
 #how-it-works .steps-grid li:hover{transform:translateY(-8px);border-color:var(--accent);box-shadow:0 18px 35px #16171b40}
 #how-it-works .steps-grid li:hover::before{opacity:1}
 #how-it-works .steps-grid li:hover::after{transform:scaleX(1)}
 #how-it-works .steps-grid li:hover h3{color:#e3c7b0}
 #how-it-works .steps-grid li:hover .step-number{transform:translateX(8px) scale(1.08);color:#e3c7b0}
}
@media(prefers-reduced-motion:reduce){
 #how-it-works .steps-grid li:hover,#how-it-works .steps-grid li:hover .step-number{transform:none}
}

@media(max-width:900px){.mosaic-heading h2{font-size:36px}}

/* Center each service action inside the card, clear of the rounded border. */
.mosaic-grid .service-card{padding-bottom:50px}
.mosaic-grid .card-arrow{top:auto;bottom:10px;left:50%;right:auto;transform:translateX(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;font-size:22px;line-height:1}

/* Photograph-based triangular billboard strips, only mounted during a turn. */
.hero-photo{background:var(--dark)}
.hero-prism-stage{position:absolute;inset:0;display:flex;z-index:1;pointer-events:none}
.hero-prism-strip{flex:1;min-width:0;height:100%;perspective:900px}
.hero-prism-rotor{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.hero-prism-face{position:absolute;inset:0;width:calc(100% + .3px);backface-visibility:hidden;background-repeat:no-repeat}
.hero-photo.is-turning>img{visibility:hidden}


.hero-photo{isolation:isolate}.hero-photo::after{z-index:2}

.service-mosaic>.mosaic-heading{height:auto;min-height:0;margin-bottom:32px}
.service-mosaic>.mosaic-heading h2{position:static;width:auto;max-width:none;line-height:1.18}
.service-mosaic>.mosaic-heading h2 br{display:none}
@media(min-width:768px){
 .mosaic-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
 .mosaic-grid .mosaic-column{padding-top:0;gap:16px}
 .mosaic-grid .mosaic-column:nth-child(even){padding-top:64px}
 .mosaic-grid .service-card,.mosaic-grid .mosaic-photo{aspect-ratio:1;min-height:0;height:auto;width:100%;margin:0}
 .mosaic-grid .service-card{justify-content:center;padding:24px 20px 54px}
 .mosaic-grid .service-card h3{font-size:22px}
 .mosaic-grid .service-card p{font-size:13px;line-height:1.6;margin:16px 0 0}
 .mosaic-grid .service-card .text-link{display:none}
 .mosaic-grid .mosaic-photo img{height:100%;width:100%;object-fit:cover}
}
@media(min-width:768px) and (max-width:1100px){.mosaic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:767px){
 .mosaic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
 .mosaic-column{display:contents}
 .mosaic-heading{grid-column:1/-1;min-height:0;margin-bottom:12px}
 .mosaic-grid .mosaic-photo{display:none}
 .mosaic-grid .service-card{min-height:380px;margin-inline:8px;padding:30px 24px;text-align:center;align-items:center;justify-content:center;overflow:hidden;background-image:linear-gradient(180deg,rgba(20,22,25,.08),rgba(20,22,25,.58) 42%,rgba(20,22,25,.86)),var(--service-photo);background-size:cover;background-position:center;border-color:#ffffff26}
 .mosaic-grid .service-card[href='/full-bathroom-remodeling.html']{--service-photo:url('/assets/images/vanity-small.webp')}
 .mosaic-grid .service-card[href='/shower-remodeling.html']{--service-photo:url('/assets/images/shower-small.webp')}
 .mosaic-grid .service-card[href='/bathroom-tile-flooring.html']{--service-photo:url('/assets/images/tile-detail-small.webp')}
 .mosaic-grid .service-card[href='/bathtub-replacement.html']{--service-photo:url('/assets/images/bathtub-detail-small.webp')}
 .mosaic-grid .service-card[href='/tub-to-shower-conversion.html']{--service-photo:url('/assets/images/conversion-service-small.webp')}
 .mosaic-grid .service-card[href='/vanity-fixture-upgrades.html']{--service-photo:url('/assets/images/vanity-service-small.webp')}
 .mosaic-grid .service-card h3{font-size:26px;line-height:1.2;overflow-wrap:normal;text-shadow:0 1px 8px #0003}
 .mosaic-grid .service-card p{color:#f1eeeb;font-size:14px;line-height:1.65;margin:16px 0 22px}
 .mosaic-grid .service-card .text-link{display:inline-flex;align-self:center;margin-top:0;font-size:12px;gap:20px;border-color:#ffffff70}
 .mosaic-grid .card-arrow{display:none}
 .mosaic-grid .service-card:hover{border-color:var(--accent)}
}
@media(max-width:600px){.mosaic-grid{grid-template-columns:minmax(0,1fr)}.mosaic-grid .service-card{min-height:390px}.mosaic-heading h2{font-size:36px}}
@media(max-width:767px){
 #how-it-works .center-heading{margin-bottom:28px}
 #how-it-works .steps-grid{grid-template-columns:minmax(0,1fr);gap:14px;padding-top:0}
 #how-it-works .steps-grid li{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:16px;row-gap:10px;min-height:0;padding:22px;margin:0}
 #how-it-works .steps-grid h3{grid-column:2;grid-row:1;font-size:23px;margin:0}
 #how-it-works .steps-grid p{grid-column:2;grid-row:2;font-size:14px;line-height:1.6;margin:0}
 #how-it-works .steps-grid .step-number{grid-column:1;grid-row:1/3;align-self:start;font-size:34px;line-height:1;margin:0}
}