@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --hp-black:#000;
  --hp-white:#fff;
  --hp-mint:#05e5af;
  --hp-mint-dark:#00a77f;
  --hp-gray:#f5f5f5;
  --hp-line:#d9d9d9;
  --hp-radius:30px;
  --hp-max:1440px;
  --hp-nav-max:1550px;
  --hp-ease:cubic-bezier(.2,.8,.2,1);
  --hp-grid-columns:12;
  --hp-grid-gutter:32px;
  --hp-page-margin:48px;
  --hp-space-1:8px;
  --hp-space-2:16px;
  --hp-space-3:24px;
  --hp-space-4:32px;
  --hp-space-5:40px;
  --hp-space-6:48px;
  --hp-space-8:64px;
  --hp-space-10:80px;
  --hp-space-12:96px;
}
body{background:var(--hp-black);font-family:Manrope,"Helvetica Neue",Arial,sans-serif}
body.hp-menu-open{overflow:hidden}
.hp{background:var(--hp-black);color:var(--hp-white);overflow:hidden}
.hp *{box-sizing:border-box}
.hp img{display:block;width:100%;max-width:100%}
.hp a{color:inherit;text-decoration:none}
.hp button,.hp input{font:inherit}
.hp button{color:inherit}
.hp h1,.hp h2,.hp h3,.hp p,.hp figure{margin:0}
.hp ul{margin:0;padding:0;list-style:none}
.hp-container{width:min(var(--hp-max),calc(100% - (var(--hp-page-margin) * 2)));margin-inline:auto}
.hp-section{padding:112px 0}
.hp-kicker{margin-bottom:18px;color:var(--hp-mint);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.hp-display{max-width:14ch;font-size:clamp(42px,5vw,72px);font-weight:600;line-height:1.02;letter-spacing:-.06em;text-wrap:balance}
.hp-lead{max-width:610px;color:#c7c7c7;font-size:clamp(17px,1.5vw,20px);line-height:1.65}
.hp-section-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);align-items:end;gap:60px;margin-bottom:58px}
.hp-section-head .hp-lead{justify-self:end}
.hp-btn{display:inline-flex;min-height:58px;align-items:center;justify-content:center;gap:12px;padding:14px 28px;border:1px solid transparent;border-radius:999px;background:var(--hp-mint);color:var(--hp-black)!important;font-size:16px;font-weight:700;white-space:nowrap;transition:transform .25s var(--hp-ease),background .25s var(--hp-ease)}
.hp-btn:hover{background:#23edbd;transform:translateY(-2px)}
.hp-btn.hp-outline{background:transparent;color:var(--hp-white)!important;border-color:rgba(255,255,255,.78)}
.hp-btn.hp-outline:hover{background:var(--hp-white);color:var(--hp-black)!important}
.hp-arrow{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hp-icon{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hp-icon-disc{display:grid;width:52px;height:52px;place-items:center;flex:0 0 auto;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:#080808;color:var(--hp-mint)}
.hp-custom-icon{width:35px!important;height:35px!important;max-width:none!important;object-fit:contain;filter:drop-shadow(0 0 3px rgba(5,229,175,.18))}
.hp-icon-disc-custom{border-color:transparent!important;background:transparent!important;border-radius:0!important}
.hp-icon-disc-custom .hp-custom-icon{width:46px!important;height:46px!important}
.hp-process-step .hp-custom-icon{width:32px!important;height:32px!important;filter:none}
.hp-process-step .hp-icon-disc-custom .hp-custom-icon{width:38px!important;height:38px!important}
.hp-quote-step .hp-custom-icon{width:52px!important;height:52px!important}
.hp-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--hp-ease),transform .7s var(--hp-ease)}
.hp-reveal.is-visible{opacity:1;transform:none}

/* Preserve the MindMarket navigation while aligning its CTA to the new palette. */
.efg-wordmark{
  display:inline-flex!important;
  align-items:center;
  font-family:Manrope,"Helvetica Neue",Arial,sans-serif!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:-.055em!important;
  white-space:nowrap;
}
.desktop-nav-shell .brand.efg-wordmark{font-size:18px}
.reference-mobile-brand.efg-wordmark{gap:0;font-size:clamp(17px,4.5vw,19px)}
.reference-mobile-brand.efg-wordmark::before{
  content:"";
  display:block;
  width:34px;
  height:34px;
  flex:0 0 34px;
  margin-right:8px;
  background:url("media/epoxy-floor-guys-nav-mark.webp") center/contain no-repeat;
}
.hp-footer-brand.efg-wordmark{gap:12px;font-size:19px;letter-spacing:-.045em!important}
.hp-footer-brand.efg-wordmark::before{
  content:"";
  display:block;
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:9px;
  background:#fff url("media/epoxy-floor-guys-footer-mark.webp") center/38px auto no-repeat;
}
.apply-top{background:var(--hp-mint)!important;color:var(--hp-black)!important;border-radius:10px!important;gap:14px!important;padding:0 10px 0 22px!important;min-height:68px!important;font-size:clamp(18px,.893vw,22.8438px)!important;font-weight:500!important;line-height:1.5!important;letter-spacing:normal!important;white-space:nowrap;transition:transform .25s var(--hp-ease),background .25s var(--hp-ease)!important}
.apply-top:hover{background:#23edbd!important;color:var(--hp-black)!important;transform:translateY(-2px)!important}
.apply-top i{display:grid!important;place-items:center!important;width:34px!important;height:34px!important;border-radius:50%!important;background:#101513!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important;font-size:20px!important;font-style:normal!important;line-height:1!important}
.apply-top i::before{content:none!important;display:none!important}
.apply-top i::after{content:none!important;display:none!important}
.apply-top i svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transform:translateX(-.5px);transition:transform .22s var(--hp-ease)}
.apply-top:hover i svg{transform:translateX(1.5px)}
.nav-more-compact>summary,.nav-more-compact[open]>summary,.nav-more-compact:hover>summary{background:var(--hp-mint)!important;color:var(--hp-black)!important}
.reference-mobile-toggle{background:var(--hp-mint)!important}
.reference-mobile-toggle::before{background:var(--hp-mint)!important}
.reference-mobile-toggle:hover{background:#23edbd!important}
.reference-mobile-nav.is-open{background:var(--hp-mint)!important}
.reference-mobile-contact i{background:#000!important;color:#fff!important}
@media(min-width:1000px){
  .header .shell{
    right:0!important;
    left:0!important;
    width:min(var(--hp-nav-max),calc(100% - 32px))!important;
    max-width:var(--hp-nav-max)!important;
    margin-inline:auto!important;
    transform:none;
  }
  .site-nav{font-size:clamp(17px,.84vw,21.5px)!important}
  .site-nav>a,.nav-more:not(.nav-more-compact)>summary{font-size:inherit!important;font-weight:500!important;line-height:1.5!important;letter-spacing:normal!important}
  .nav-more>summary::after{content:none!important}
  .nav-chevron{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s var(--hp-ease)}
  .nav-more[open]>.nav-chevron,.nav-more[open]>summary .nav-chevron{transform:rotate(180deg)}
  .mega-menu{
    position:absolute!important;
    top:calc(100% + 8px)!important;
    right:auto!important;
    left:0!important;
    grid-template-columns:minmax(0,1.03fr) minmax(0,1fr)!important;
    width:min(1320px,100%)!important;
    min-width:0!important;
    min-height:420px!important;
    gap:0!important;
    padding:12px!important;
    overflow:hidden!important;
    border:1px solid rgba(20,24,22,.08)!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:0 26px 70px rgba(0,0,0,.24)!important;
  }
  .nav-more[open]>.mega-menu,.nav-more:hover>.mega-menu{display:grid!important}
  .mega-menu::before{content:"";position:absolute;right:0;bottom:100%;left:0;height:8.5px}
  .mega-projects{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;min-height:396px!important;gap:8px!important;background:transparent!important}
  .mega-project{position:relative;min-width:0;overflow:hidden;border-radius:10px;background:#141714;color:#fff!important;isolation:isolate}
  .mega-project::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.82) 100%);pointer-events:none}
  .mega-project img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;transform:scale(1.025);transition:transform .45s var(--hp-ease)}
  .mega-project:nth-child(1) img{object-position:left center}
  .mega-project:nth-child(2) img{object-position:center center}
  .mega-project:nth-child(3) img{object-position:right center}
  .mega-project:hover img{transform:scale(1.075)}
  .mega-project span{position:absolute;z-index:2;right:48px;bottom:14px;left:16px;font-family:Inter,Manrope,sans-serif;font-size:clamp(18px,.84vw,21.5px);font-weight:500;line-height:1.5;letter-spacing:normal}
  .mega-project>svg{position:absolute;z-index:2;right:14px;bottom:14px;width:30px;height:30px;padding:7px;border-radius:50%;background:#fff;color:#171917;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--hp-ease)}
  .mega-project:hover>svg{transform:translateX(3px)}
  .mega-directory{display:flex;min-width:0;flex-direction:column;padding:15px 20px 12px 28px;color:#171917}
  .mega-directory-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:2px 0 18px;border-bottom:1px solid #dddeda}
  .mega-directory-head p{font-family:Inter,Manrope,sans-serif;font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.035em}
  .mega-directory-head>a{display:inline-flex;align-items:center;gap:7px;color:#087c60!important;font-family:Inter,Manrope,sans-serif;font-size:15px;font-weight:600;line-height:1.35;white-space:nowrap}
  .mega-directory-head svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--hp-ease)}
  .mega-directory-head>a:hover svg{transform:translateX(3px)}
  .mega-groups{display:grid;grid-template-columns:.9fr 1.1fr 1fr;gap:26px;padding-top:22px}
  .mega-group{min-width:0}
  .mega-group h2{margin:0 0 10px;color:#7a807c;font-family:Inter,Manrope,sans-serif;font-size:11px;font-weight:750;line-height:1.3;letter-spacing:.11em;text-transform:uppercase}
  .mega-group a{display:block;padding:7px 0!important;border:0!important;border-radius:0!important;background:transparent!important;color:#242724!important;font-family:Inter,Manrope,sans-serif!important;font-size:16px!important;font-weight:530!important;line-height:1.3!important;letter-spacing:-.02em!important;transition:color .18s ease,transform .18s ease!important}
  .mega-group a:hover{color:#008f6d!important;transform:translateX(3px)}
  .compact-menu{min-width:250px!important;padding:10px!important;border:1px solid rgba(20,24,22,.08)!important;box-shadow:0 20px 54px rgba(0,0,0,.18)!important}
  .compact-menu p{margin:3px 10px 8px;color:#858b87;font-family:Inter,Manrope,sans-serif;font-size:11px;font-weight:750;line-height:1.3;letter-spacing:.11em;text-transform:uppercase}
  .compact-menu a{display:block;padding:10px!important;border-radius:7px!important;font-family:Inter,Manrope,sans-serif!important;font-size:16px!important;line-height:1.3!important}
  .compact-menu a:hover{background:#f3f5f2!important;color:#087c60!important}
  .nav-service-areas{position:relative!important}
  .nav-service-areas .service-area-menu{right:auto!important;left:50%!important;min-width:236px!important;transform:translateX(-50%)}
}
@media(min-width:1000px) and (max-width:1279px){
  .mega-menu{grid-template-columns:1fr!important;max-height:calc(100svh - 98px);overflow:auto!important}
  .mega-projects{min-height:166px!important}
  .mega-directory{padding:18px 22px 20px}
  .mega-groups{gap:22px}
  .site-nav>a[href="/service-areas.html"]{display:none!important}
}
@media(min-width:1000px) and (max-width:1080px){
  .site-nav>a[href="/colors-finishes.html"]{display:none!important}
  .site-nav>a,.nav-more:not(.nav-more-compact)>summary{padding-inline:9px!important;font-size:15px!important}
}
@media(max-width:999px){
  .reference-mobile-panel{display:flex;flex-direction:column}
  .reference-mobile-list{padding:10px 16px}
  .reference-mobile-list>a,.reference-mobile-list summary{min-height:56px;font-family:Inter,Manrope,sans-serif;font-size:clamp(20px,5.5vw,26px);font-weight:560;letter-spacing:-.055em}
  .reference-mobile-list details:last-child summary{border-bottom:0}
  .mobile-chevron{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--hp-ease)}
  .reference-mobile-list details[open] .mobile-chevron{transform:rotate(180deg)}
  .reference-mobile-list details>div{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:2px 0 14px}
  .reference-mobile-list details>div a{display:flex;min-height:42px;align-items:center;padding:8px 0;border-bottom:1px solid #e7e6e1;color:#434844;font-family:Inter,Manrope,sans-serif;font-size:14px;font-weight:520;line-height:1.2;letter-spacing:-.025em}
  .reference-mobile-list details>div a:hover{color:#007e60}
  .reference-mobile-actions{display:grid;gap:8px;margin-top:8px}
  .reference-mobile-contact,.reference-mobile-quote{position:relative;display:flex;min-height:72px;align-items:center;justify-content:space-between;padding:12px 12px 12px 18px;border-radius:10px;transform:translateY(16px) scale(.94);opacity:0;transition:transform .25s ease,opacity .15s ease}
  .reference-mobile-contact{margin-top:0;background:#fff;color:#2c2e2a;font-family:Inter,Manrope,sans-serif;font-size:clamp(20px,5.6vw,25px);font-weight:540;line-height:1.2;letter-spacing:-.05em}
  .reference-mobile-quote{background:#000!important;color:#fff;font-family:Inter,Manrope,sans-serif;font-size:clamp(18px,5vw,23px);font-weight:540;line-height:1.2;letter-spacing:-.045em}
  .reference-mobile-contact i,.reference-mobile-quote i{display:grid;width:48px;height:48px;place-items:center;flex:0 0 auto;border-radius:50%;font-style:normal}
  .reference-mobile-contact i{background:#000!important;color:#fff!important}
  .reference-mobile-quote i{background:var(--hp-mint);color:#111411}
  .reference-mobile-contact svg,.reference-mobile-quote svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .reference-mobile-nav.is-open .reference-mobile-contact,.reference-mobile-nav.is-open .reference-mobile-quote{opacity:1;transform:translateY(0) scale(1)}
}
@media(max-width:520px){
  .reference-mobile-list details>div{grid-template-columns:1fr}
  .reference-mobile-list details>div a{min-height:39px}
}

/* Hero */
.hp-hero{padding:118px 0 0;background:var(--hp-black)}
.hp-hero-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:30px;align-items:center;min-height:650px;padding:34px 0 44px}
.hp-hero-copy{padding:26px 8px 26px 0}
.hp-hero h1{max-width:10.5ch;font-size:clamp(52px,5.4vw,76px);font-weight:600;line-height:.98;letter-spacing:-.065em;text-wrap:balance}
.hp-hero-copy p{max-width:500px;margin-top:30px;color:#c8c8c8;font-size:18px;line-height:1.65}
.hp-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hp-hero-media{height:650px;border-radius:var(--hp-radius);overflow:hidden;background:#111}
.hp-hero-media img{height:100%;object-fit:cover;object-position:center}
.hp-proof{background:var(--hp-white);color:var(--hp-black)}
.hp-proof-grid{display:grid;grid-template-columns:repeat(4,1fr);min-height:144px;align-items:center}
.hp-proof-item{display:flex;align-items:center;gap:18px;padding:26px 30px;border-right:1px solid #dedede;font-size:16px;font-weight:700;line-height:1.3}
.hp-proof-item .hp-icon-disc-custom{border:1px solid #080808!important;border-radius:50%!important;background:#080808!important}
.hp-proof-item .hp-icon-disc-custom .hp-custom-icon{width:38px!important;height:38px!important}
.hp-proof-item:last-child{border-right:0}

/* Floor solution carousel */
.hp-solutions-section{overflow:hidden;padding-bottom:96px}
.hp-solution-showcase{display:block}
.hp-solution-heading{max-width:660px;margin-bottom:42px}
.hp-solution-heading .hp-display{max-width:18ch}
.hp-solution-carousel{position:relative}
.hp-solution-viewport{overflow-x:auto;overflow-y:hidden;padding:4px 4px 14px;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;overscroll-behavior-inline:contain}
.hp-solution-viewport::-webkit-scrollbar{display:none}
.hp-solution-viewport.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.hp-solution-track{display:flex;width:max-content;align-items:stretch;gap:16px;padding:0 min(42vw,540px) 0 2px}
.hp-solution-slide{flex:0 0 clamp(218px,18.8vw,270px);height:clamp(390px,38vw,510px);scroll-snap-align:start;transition:flex-basis .48s var(--hp-ease),transform .32s var(--hp-ease)}
.hp-solution-slide.is-active{flex-basis:clamp(430px,36.4vw,520px)}
.hp-solution-select{position:relative;display:block;width:100%;height:100%;overflow:hidden;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:3px;background:#101312;color:var(--hp-white);text-align:left;isolation:isolate;transition:border-color .32s ease,box-shadow .32s ease,transform .32s var(--hp-ease)}
.hp-solution-select:focus-visible{outline:3px solid var(--hp-mint);outline-offset:4px}
.hp-solution-slide.is-active .hp-solution-select{border-color:var(--hp-mint);box-shadow:0 0 0 1px rgba(5,229,175,.46),0 0 25px rgba(5,229,175,.24),0 0 58px rgba(5,229,175,.12)}
.hp-solution-slide:not(.is-active) .hp-solution-select:hover{border-color:rgba(5,229,175,.72);transform:translateY(-3px)}
.hp-solution-select>img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .7s var(--hp-ease),filter .35s ease}
.hp-solution-slide:not(.is-active) .hp-solution-select>img{filter:saturate(.82) brightness(.8)}
.hp-solution-slide:hover .hp-solution-select>img{transform:scale(1.035)}
.hp-solution-card-footer{position:absolute;z-index:1;right:0;bottom:0;left:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:15px;align-items:center;min-height:80px;padding:17px 18px;background:linear-gradient(110deg,rgba(3,5,5,.98),rgba(8,11,10,.93));border-top:1px solid rgba(255,255,255,.1);font-size:18px;font-weight:650;letter-spacing:-.04em}
.hp-solution-card-footer .hp-arrow{width:23px;height:23px;color:var(--hp-mint);transition:transform .24s ease}
.hp-solution-select:hover .hp-arrow,.hp-solution-select:focus-visible .hp-arrow{transform:translateX(4px)}
.hp-solution-icon{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 5px rgba(5,229,175,.24))}
.hp-solution-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;margin:13px 4px 0}
.hp-solution-progress{height:4px;overflow:hidden;border-radius:99px;background:#454846}
.hp-solution-progress span{display:block;width:25%;height:100%;border-radius:inherit;background:var(--hp-mint);box-shadow:0 0 13px rgba(5,229,175,.68);transition:width .4s var(--hp-ease)}
.hp-solution-nav{display:flex;gap:8px}
.hp-solution-nav button{display:grid;width:39px;height:32px;place-items:center;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:7px;background:transparent;color:var(--hp-white);transition:border-color .2s ease,background .2s ease,color .2s ease}
.hp-solution-nav button:hover,.hp-solution-nav button:focus-visible{border-color:var(--hp-mint);background:var(--hp-mint);color:#06120f;outline:0}
.hp-solution-nav button:first-child .hp-arrow{transform:rotate(180deg)}
.hp-solution-nav .hp-arrow{width:18px;height:18px}
.hp-solution-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.hp-proof-item .hp-diamond-grinding-icon{width:46px!important;height:46px!important;border-radius:0;filter:none}
@media(max-width:999px){
  .hp-solutions-section{padding-bottom:80px}
  .hp-solution-heading{margin-bottom:30px}
  .hp-solution-slide,.hp-solution-slide.is-active{flex-basis:min(78vw,440px);height:min(112vw,500px)}
  .hp-solution-card-footer{min-height:72px;padding:15px;font-size:16px}
  .hp-solution-controls{margin-top:10px}
}
@media(max-width:620px){
  .hp-solution-viewport{margin-right:calc(var(--hp-page-margin) * -1);padding-right:var(--hp-page-margin)}
  .hp-solution-slide,.hp-solution-slide.is-active{flex-basis:78vw;height:104vw;max-height:480px}
  .hp-solution-track{gap:12px}
  .hp-solution-card-footer{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;min-height:64px;padding:12px;font-size:15px}
  .hp-solution-icon{width:29px;height:29px}
  .hp-solution-controls{gap:13px;margin-right:0}
  .hp-solution-nav button{width:36px;height:31px}
}

/* Feature */
.hp-feature-section{padding:22px 0 110px;background:var(--hp-white);color:var(--hp-black)}
.hp-feature{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:38px;padding:48px;border-radius:var(--hp-radius);background:var(--hp-gray)}
.hp-feature h2{max-width:11ch;font-size:clamp(42px,4.6vw,64px);font-weight:600;line-height:1;letter-spacing:-.06em}
.hp-feature p{max-width:500px;margin-top:24px;color:#464646;font-size:17px;line-height:1.65}
.hp-feature .hp-btn{margin-top:28px}
.hp-callouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px}
.hp-callouts li{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:700}
.hp-callouts .hp-icon-disc{width:40px;height:40px;border:0}
.hp-callouts .hp-icon{width:21px;height:21px}
.hp-feature-photo{min-height:590px;overflow:hidden;border-radius:24px}
.hp-feature-photo img{height:100%;object-fit:cover}

/* Projects */
.hp-project-lead{display:grid;grid-template-columns:.72fr 1.28fr;gap:44px;align-items:start}
.hp-project-copy{position:sticky;top:120px;padding-top:20px}
.hp-project-copy .hp-display{max-width:9ch}
.hp-project-copy .hp-lead{margin-top:24px}
.hp-project-copy .hp-btn{margin-top:30px}
.hp-compare{--compare:50%;--before-label-opacity:1;--after-label-opacity:1;position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--hp-radius);background:#222}
.hp-compare-before,.hp-compare-after,.hp-compare-before img,.hp-compare-after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp-compare-before{z-index:0;clip-path:inset(0 calc(100% - var(--compare)) 0 0)}
.hp-compare-after{z-index:1;clip-path:inset(0 0 0 var(--compare))}
.hp-compare input{position:absolute;z-index:4;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.hp-compare-line{position:absolute;z-index:3;top:0;bottom:0;left:var(--compare);width:2px;background:var(--hp-white);transform:translateX(-50%);pointer-events:none}
.hp-compare-handle{position:absolute;top:50%;left:50%;width:52px;height:52px;border-radius:50%;background:var(--hp-white);transform:translate(-50%,-50%)}
.hp-compare-handle::before,.hp-compare-handle::after{content:"";position:absolute;top:21px;width:9px;height:9px;border-top:2px solid var(--hp-black);border-left:2px solid var(--hp-black)}
.hp-compare-handle::before{left:13px;transform:rotate(-45deg)}.hp-compare-handle::after{right:13px;transform:rotate(135deg)}
.hp-compare-label{position:absolute;z-index:2;top:18px;padding:8px 11px;border-radius:999px;background:rgba(0,0,0,.74);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;pointer-events:none;transition:opacity .14s linear}
.hp-compare-before .hp-before{left:18px;opacity:var(--before-label-opacity)}.hp-compare-after .hp-after{right:18px;opacity:var(--after-label-opacity)}
.hp-project-meta{display:flex;align-items:center;gap:16px;margin-top:18px}
.hp-project-meta h3{font-size:21px;font-weight:600;letter-spacing:-.03em}
.hp-project-meta p{margin-top:4px;color:#aaa;font-size:14px}
.hp-project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-top:54px}
.hp-project-card img{aspect-ratio:16/10;object-fit:cover;border-radius:24px}

/* Preparation */
.hp-process-section{padding:28px 0 112px;background:var(--hp-white);color:var(--hp-black)}
.hp-process{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;padding:48px;border-radius:var(--hp-radius);background:var(--hp-gray)}
.hp-process .hp-display{max-width:10ch}
.hp-process .hp-lead{margin-top:22px;color:#4d4d4d}
.hp-process-list{margin-top:28px}
.hp-process-step{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;padding:13px 0;border-bottom:1px solid var(--hp-line)}
.hp-process-step .hp-icon-disc{width:42px;height:42px;border:0;border-radius:0;background:transparent;color:#0a0d0c}
.hp-process-step .hp-icon-disc .hp-icon{width:34px;height:34px;stroke-width:2.4;color:#0a0d0c}
.hp-process-step .hp-icon-disc-custom{border:0!important;border-radius:0!important;background:transparent!important}
.hp-process-step h3{font-size:16px;font-weight:700}
.hp-process-step p{margin-top:3px;color:#555;font-size:13px;line-height:1.45}
.hp-process .hp-btn{margin-top:28px}
.hp-process-photo{min-height:690px;overflow:hidden;border-radius:24px}
.hp-process-photo img{height:100%;object-fit:cover}

/* Finish selector */
.hp-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.hp-filter{padding:10px 15px;border:1px solid transparent;border-radius:9px;background:transparent;cursor:pointer;font-size:14px;font-weight:600;white-space:nowrap}
.hp-filter:hover,.hp-filter.is-active{border-color:var(--hp-mint);color:var(--hp-mint)}
.hp-swatches{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:12px;margin-top:26px;overflow:visible}
.hp-swatch{position:relative;min-height:270px;padding:0;overflow:hidden;border:2px solid transparent;border-radius:18px;background:#111;cursor:pointer;transition:transform .2s var(--hp-ease),border-color .2s var(--hp-ease),box-shadow .2s var(--hp-ease)}
.hp-swatch.is-hidden{display:none}.hp-swatch:hover,.hp-swatch:focus-visible{z-index:2;border-color:var(--hp-mint);outline:none;box-shadow:0 0 0 1px rgba(5,229,175,.5);transform:translateY(-4px)}
.hp-swatch img{height:100%;object-fit:cover}.hp-swatch span{position:absolute;right:10px;bottom:10px;left:10px;padding:8px 10px;border-radius:999px;background:rgba(0,0,0,.76);text-align:center;font-size:12px;font-weight:700}
.hp-finish-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:32px}

/* Residential and commercial */
.hp-split-section{padding:30px 0 112px}
.hp-space-split{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:680px;overflow:hidden;border-radius:var(--hp-radius)}
.hp-space-half{position:relative;padding:42px;overflow:hidden}
.hp-space-half img{position:absolute;inset:0;height:100%;object-fit:cover}
.hp-space-half::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.52),rgba(0,0,0,.22) 38%,rgba(0,0,0,.8))}
.hp-split-title{position:absolute;z-index:2;top:42px;left:42px;max-width:620px;font-size:clamp(38px,4vw,58px);font-weight:600;line-height:1.02;letter-spacing:-.055em;text-wrap:balance}
.hp-space-content{position:absolute;z-index:1;right:42px;bottom:42px;left:42px}
.hp-space-content h3{font-size:34px;font-weight:600;letter-spacing:-.05em}
.hp-space-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 20px;margin-top:18px;color:#ececec;font-size:14px}
.hp-space-list li{display:flex;align-items:center;gap:8px}.hp-space-list .hp-icon{width:16px;height:16px;color:var(--hp-mint)}

/* Values */
.hp-values{padding:56px;border:1px solid #3b3b3b;border-radius:var(--hp-radius)}
.hp-values-top{display:grid;grid-template-columns:1fr .8fr;gap:70px;margin-bottom:34px}
.hp-values-top .hp-display{max-width:10ch}
.hp-value-row{display:grid;grid-template-columns:auto minmax(220px,.7fr) minmax(280px,1.3fr);align-items:center;gap:24px;padding:18px 0;border-bottom:1px solid #393939}
.hp-value-row:first-child{border-top:1px solid #393939}.hp-value-row h3{font-size:20px;font-weight:600;letter-spacing:-.035em}.hp-value-row p{color:#bcbcbc;font-size:16px;line-height:1.6}.hp-values .hp-btn{margin-top:30px}

/* Quote steps, review, price */
.hp-steps-head{display:grid;grid-template-columns:1fr .6fr;gap:50px;align-items:end}
.hp-step-track{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:54px}
.hp-quote-step{text-align:center}.hp-quote-step .hp-icon-disc{position:relative;width:82px;height:82px;margin:0 auto 18px}.hp-quote-step .hp-icon-disc::after{content:attr(data-step);position:absolute;top:-11px;right:-4px;display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:var(--hp-mint);color:var(--hp-black);font-size:12px;font-weight:700}.hp-quote-step h3{font-size:16px;font-weight:700;line-height:1.25}.hp-quote-step p{margin-top:10px;color:#aaa;font-size:13px;line-height:1.55}.hp-process-action{text-align:center;margin-top:38px}
.hp-conversion{display:grid;gap:18px;padding-bottom:100px}
.hp-review,.hp-pricing{display:grid;grid-template-columns:1fr 1fr;gap:42px;padding:48px;border-radius:var(--hp-radius)}
.hp-review{background:#161616}.hp-review h2,.hp-pricing h2{max-width:11ch;font-size:clamp(38px,4vw,58px);font-weight:600;line-height:1.02;letter-spacing:-.055em}.hp-review p{max-width:470px;margin-top:22px;color:#bdbdbd;line-height:1.65}.hp-review .hp-btn,.hp-pricing .hp-btn{margin-top:28px}
.hp-proof-ready{display:grid;min-height:280px;place-items:center;padding:38px;border:1px solid #404040;border-radius:20px;background:radial-gradient(circle at 50% 15%,rgba(5,229,175,.12),transparent 55%);text-align:center;color:#cfcfcf}.hp-proof-ready .hp-icon-disc{margin:0 auto 16px}.hp-proof-ready strong{display:block;font-size:18px}.hp-proof-ready span{display:block;max-width:340px;margin-top:8px;color:#999;font-size:14px;line-height:1.5}
.hp-proof-project{position:relative;isolation:isolate;min-height:320px;overflow:hidden;padding:0;place-items:stretch;border-color:rgba(255,255,255,.18);background:#0b0b0b;text-align:left}
.hp-proof-project>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 56%}
.hp-proof-project::after{content:"";position:absolute;z-index:0;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 34%,rgba(0,0,0,.16) 54%,rgba(0,0,0,.9) 100%)}
.hp-proof-project figcaption{position:absolute;z-index:1;right:0;bottom:0;left:0;padding:28px}
.hp-proof-project .hp-proof-label{margin:0 0 8px;color:var(--hp-mint);font-size:11px;font-weight:700;letter-spacing:.14em;line-height:1.2;text-transform:uppercase}
.hp-proof-project strong{color:var(--hp-white);font-size:22px;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.hp-proof-project .hp-proof-detail{max-width:none;margin-top:6px;color:rgba(255,255,255,.74);font-size:13px;line-height:1.45}
.hp-pricing{background:var(--hp-gray);color:var(--hp-black)}.hp-pricing p{max-width:500px;margin-top:22px;color:#4a4a4a;line-height:1.65}.hp-price-factors{display:grid;gap:13px;padding-left:36px;border-left:1px solid #ccc}.hp-price-factors li{display:grid;grid-template-columns:auto 1fr;gap:11px}.hp-price-factors .hp-icon{width:20px;height:20px;color:var(--hp-mint-dark)}.hp-price-factors strong{display:block;font-size:14px}.hp-price-factors span{display:block;margin-top:2px;color:#555;font-size:13px;line-height:1.4}

/* FAQ, service area, final conversion */
.hp-faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px}.hp-faq-list{border-top:1px solid #444}.hp-faq-list details{border-bottom:1px solid #444}.hp-faq-list summary{display:flex;min-height:64px;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;font-size:16px;font-weight:600;transition:color .2s var(--hp-ease)}.hp-faq-list summary:hover{color:var(--hp-mint)}.hp-faq-list summary::-webkit-details-marker{display:none}.hp-faq-list summary .hp-icon{transition:transform .2s var(--hp-ease)}.hp-faq-list details[open] summary .hp-icon{transform:rotate(45deg)}.hp-faq-list details p{padding:0 44px 22px 0;color:#aaa;font-size:14px;line-height:1.65}
.hp-area-section{padding:28px 0 18px}.hp-area{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;padding:48px;border-radius:var(--hp-radius);background:var(--hp-gray);color:var(--hp-black)}.hp-area h2{font-size:clamp(36px,4vw,54px);font-weight:600;line-height:1.03;letter-spacing:-.055em}.hp-area .hp-region{display:block;margin-top:18px;color:var(--hp-mint-dark);font-size:20px;font-weight:700}.hp-area p{margin-top:14px;color:#555;line-height:1.6}.hp-area-links{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 30px;align-content:center}.hp-area-links a{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #d4d4d4;font-size:14px;font-weight:600}.hp-area-links .hp-icon{width:18px;height:18px;color:var(--hp-mint-dark)}
.hp-final{padding:0 0 32px}.hp-final-panel{position:relative;min-height:520px;overflow:hidden;border-radius:var(--hp-radius)}.hp-final-panel>img{position:absolute;inset:0;height:100%;object-fit:cover}.hp-final-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.95),rgba(0,0,0,.72) 42%,rgba(0,0,0,.05) 74%)}.hp-final-copy{position:relative;z-index:1;max-width:620px;padding:70px 56px}.hp-final-copy h2{font-size:clamp(42px,5vw,66px);font-weight:600;line-height:1;letter-spacing:-.06em}.hp-final-copy p{max-width:450px;margin-top:22px;color:#d1d1d1;font-size:17px;line-height:1.6}.hp-final-copy small{display:block;margin-top:18px;color:#aaa}

/* New footer */
.hp-footer{padding:64px 0 34px;background:var(--hp-black);color:var(--hp-white);border-top:1px solid #242424}
.hp-footer-grid{display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:32px}.hp-footer-brand{font-size:18px;font-weight:700;letter-spacing:-.04em}.hp-footer-intro p{max-width:260px;margin-top:18px;color:#999;font-size:14px;line-height:1.65}.hp-footer-col h2{margin:0 0 18px;font-size:14px;font-weight:700}.hp-footer-col a{display:block;padding:5px 0;color:#aaa;font-size:13px}.hp-footer-col a:hover{color:var(--hp-mint)}.hp-footer-cta .hp-btn{min-height:48px;padding:11px 18px;font-size:13px}.hp-footer-bottom{display:flex;justify-content:space-between;gap:24px;margin-top:48px;padding-top:24px;border-top:1px solid #333;color:#777;font-size:12px}

@media(max-width:999px){
  .hp-hero{padding-top:88px}.hp-hero-grid{grid-template-columns:1fr;min-height:0;padding:48px 0}.hp-hero-copy{padding:0}.hp-hero h1{max-width:11ch}.hp-hero-media{height:min(70vw,610px)}
  .hp-proof-grid{grid-template-columns:repeat(2,1fr)}.hp-proof-item:nth-child(2){border-right:0}.hp-proof-item:nth-child(-n+2){border-bottom:1px solid #dedede}
  .hp-section{padding:88px 0}.hp-section-head,.hp-solutions,.hp-feature,.hp-project-lead,.hp-process,.hp-values-top,.hp-review,.hp-pricing,.hp-faq-grid,.hp-area{grid-template-columns:1fr}.hp-section-head{gap:24px}.hp-section-head .hp-lead{justify-self:start}
  .hp-solution-media{grid-template-columns:repeat(2,1fr)}.hp-feature{padding:34px}.hp-feature-photo{min-height:480px}.hp-project-copy{position:static}.hp-project-copy .hp-display{max-width:12ch}.hp-project-grid{margin-top:34px}.hp-process{padding:34px}.hp-process-photo{min-height:520px}
  .hp-swatches{grid-template-columns:repeat(7,150px);overflow-x:auto;padding:6px 2px 10px;scroll-padding-inline:2px}.hp-space-split{min-height:780px}.hp-value-row{grid-template-columns:auto 1fr}.hp-value-row p{grid-column:2}.hp-step-track{grid-template-columns:repeat(3,1fr)}.hp-review,.hp-pricing{padding:36px}.hp-price-factors{padding:28px 0 0;border-top:1px solid #ccc;border-left:0}
  .hp-footer-grid{grid-template-columns:repeat(3,1fr)}.hp-footer-intro{grid-column:1/-1}
}
@media(max-width:680px){
  .hp-container{width:min(var(--hp-max),calc(100% - 28px))}.hp-section{padding:72px 0}.hp-section-head{margin-bottom:38px}.hp-display{font-size:clamp(38px,12vw,54px)}
  .hp-hero{padding-top:78px}.hp-hero-grid{gap:26px;padding-top:38px}.hp-hero h1{font-size:clamp(46px,14vw,62px)}.hp-hero-copy p{font-size:16px}.hp-actions{align-items:stretch;flex-direction:column}.hp-btn{width:100%}.hp-hero-media{height:440px;border-radius:24px}.hp-hero-media img{object-position:58% center}
  .hp-proof-grid{grid-template-columns:1fr}.hp-proof-item{min-height:88px;padding:18px 10px;border-right:0!important;border-bottom:1px solid #dedede!important}.hp-proof-item:last-child{border-bottom:0!important}
  .hp-solution-row{grid-template-columns:auto 1fr}.hp-solution-row>.hp-arrow{display:none}.hp-solution-media{grid-template-columns:1fr}.hp-shot{aspect-ratio:1.1}.hp-feature{padding:28px 22px}.hp-feature h2{font-size:42px}.hp-callouts{grid-template-columns:1fr}.hp-feature-photo{min-height:390px}
  .hp-project-grid{grid-template-columns:1fr}.hp-compare{aspect-ratio:4/5}.hp-project-meta{align-items:flex-start}.hp-process{padding:28px 20px}.hp-process-photo{min-height:430px}.hp-process-step{grid-template-columns:auto 1fr;gap:9px}
  .hp-filters{gap:4px}.hp-filter{padding:8px 10px;font-size:12px}.hp-swatches{grid-template-columns:repeat(7,140px)}.hp-swatch{min-height:220px}
  .hp-space-split{grid-template-columns:1fr;min-height:980px}.hp-space-half{min-height:490px}.hp-split-title{top:30px;right:24px;left:24px;font-size:39px}.hp-space-content{right:24px;bottom:28px;left:24px}
  .hp-values{padding:32px 22px}.hp-values-top{gap:24px}.hp-value-row{gap:13px}.hp-value-row .hp-icon-disc{width:44px;height:44px}.hp-value-row h3{font-size:18px}
  .hp-steps-head{grid-template-columns:1fr}.hp-step-track{grid-template-columns:1fr;gap:32px}.hp-quote-step{display:grid;grid-template-columns:82px 1fr;text-align:left}.hp-quote-step .hp-icon-disc{grid-row:1/3;margin:0}.hp-quote-step p{margin-top:6px}.hp-process-action .hp-btn{width:auto}
  .hp-review,.hp-pricing{padding:28px 22px}.hp-proof-ready{min-height:230px}.hp-faq-grid{gap:34px}.hp-faq-list summary{min-height:72px;font-size:15px}.hp-area{gap:32px;padding:30px 22px}.hp-area-links{grid-template-columns:1fr}
  .hp-final-panel{min-height:620px}.hp-final-panel>img{object-position:64% center}.hp-final-panel::after{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.96) 60%)}.hp-final-copy{position:absolute;right:0;bottom:0;left:0;padding:40px 24px}.hp-final-copy h2{font-size:45px}
  .hp-footer-grid{grid-template-columns:repeat(2,1fr)}.hp-footer-intro,.hp-footer-cta{grid-column:1/-1}.hp-footer-bottom{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.hp-reveal{opacity:1;transform:none;transition:none}}

/*
  Responsive layout system
  Desktop: 12 columns / 32px gutters / 48px outer margins
  Tablet:   8 columns / 24px gutters / 32px outer margins
  Mobile:   4 columns / 16px gutters / 16px outer margins
  All layout spacing resolves to the shared 8pt token scale above.
*/
.hp-hero-grid,
.hp-section-head,
.hp-solutions,
.hp-feature,
.hp-project-lead,
.hp-project-grid,
.hp-process,
.hp-space-split,
.hp-values-top,
.hp-steps-head,
.hp-review,
.hp-pricing,
.hp-faq-grid,
.hp-area,
.hp-footer-grid,
.hp-proof-grid{
  display:grid;
  grid-template-columns:repeat(var(--hp-grid-columns),minmax(0,1fr));
  column-gap:var(--hp-grid-gutter);
}

.hp-hero-copy,
.hp-solutions>:first-child,
.hp-feature>:first-child,
.hp-process>:first-child{grid-column:1/span 5}
.hp-hero-media,
.hp-solutions>.hp-solution-media,
.hp-feature>.hp-feature-photo,
.hp-process>.hp-process-photo{grid-column:6/-1}
.hp-section-head>:first-child{grid-column:1/span 7}
.hp-section-head>.hp-lead{grid-column:8/-1}
.hp-project-copy{grid-column:1/span 4}
.hp-project-lead>:last-child{grid-column:5/-1}
.hp-project-grid>.hp-project-card{grid-column:span 6}
.hp-proof-grid>.hp-proof-item{grid-column:span 3}
.hp-space-split>.hp-space-half{grid-column:span 6}
.hp-values-top>:first-child{grid-column:1/span 6}
.hp-values-top>.hp-lead{grid-column:8/-1}
.hp-steps-head>:first-child{grid-column:1/span 7}
.hp-steps-head>.hp-lead{grid-column:9/-1}
.hp-review>:first-child,.hp-pricing>:first-child{grid-column:1/span 6}
.hp-review>:last-child,.hp-pricing>:last-child{grid-column:7/-1}
.hp-faq-grid>:first-child{grid-column:1/span 4}
.hp-faq-grid>.hp-faq-list{grid-column:5/-1}
.hp-area>:first-child{grid-column:1/span 5}
.hp-area>.hp-area-links{grid-column:7/-1}
.hp-footer-intro{grid-column:1/span 3}
.hp-footer-grid>.hp-footer-col:nth-child(2){grid-column:4/span 2}
.hp-footer-grid>.hp-footer-col:nth-child(3){grid-column:6/span 2}
.hp-footer-grid>.hp-footer-col:nth-child(4){grid-column:8/span 2}
.hp-footer-grid>.hp-footer-col:nth-child(5){grid-column:10/-1}
.hp-footer-cta{grid-column:1/span 3}

.hp-section{padding:var(--hp-space-12) 0}
.hp-section-head{gap:var(--hp-grid-gutter);margin-bottom:56px}
.hp-hero-grid{gap:var(--hp-grid-gutter);padding:var(--hp-space-4) 0 var(--hp-space-6)}
.hp-hero-copy{padding:var(--hp-space-3) var(--hp-space-1) var(--hp-space-3) 0}
.hp-hero-copy p{margin-top:var(--hp-space-4)}
.hp-actions{gap:var(--hp-space-2);margin-top:var(--hp-space-4)}
.hp-btn{min-height:56px;padding:var(--hp-space-2) var(--hp-space-4)}
.hp-proof-item{gap:var(--hp-space-2);padding:var(--hp-space-3) var(--hp-space-4)}
.hp-solutions{gap:var(--hp-grid-gutter)}
.hp-solution-list{margin-top:var(--hp-space-4)}
.hp-solution-row{gap:var(--hp-space-2);padding:var(--hp-space-2) 0}
.hp-solution-media{gap:var(--hp-space-3)}
.hp-feature-section{padding:var(--hp-space-3) 0 var(--hp-space-12)}
.hp-feature{gap:var(--hp-grid-gutter);padding:var(--hp-space-6)}
.hp-feature p{margin-top:var(--hp-space-3)}
.hp-callouts{gap:var(--hp-space-2);margin-top:var(--hp-space-4)}
.hp-feature .hp-btn{margin-top:var(--hp-space-4)}
.hp-project-lead{gap:var(--hp-grid-gutter)}
.hp-project-copy{padding-top:var(--hp-space-2)}
.hp-project-copy .hp-lead{margin-top:var(--hp-space-3)}
.hp-project-copy .hp-btn{margin-top:var(--hp-space-4)}
.hp-project-meta{gap:var(--hp-space-2);margin-top:var(--hp-space-2)}
.hp-project-grid{gap:var(--hp-grid-gutter);margin-top:var(--hp-space-6)}
.hp-process-section{padding:var(--hp-space-3) 0 var(--hp-space-12)}
.hp-process{gap:var(--hp-grid-gutter);padding:var(--hp-space-6)}
.hp-process .hp-lead{margin-top:var(--hp-space-3)}
.hp-process-list{margin-top:var(--hp-space-4)}
.hp-process-step{gap:var(--hp-space-2);padding:var(--hp-space-2) 0}
.hp-process .hp-btn{margin-top:var(--hp-space-4)}
.hp-filters{gap:var(--hp-space-1);margin-top:var(--hp-space-4)}
.hp-swatches{gap:var(--hp-space-2);margin-top:var(--hp-space-3)}
.hp-finish-actions{gap:var(--hp-space-2);margin-top:var(--hp-space-4)}
.hp-split-section{padding:var(--hp-space-4) 0 var(--hp-space-12)}
.hp-space-half{padding:var(--hp-space-5)}
.hp-space-content{right:var(--hp-space-5);bottom:var(--hp-space-5);left:var(--hp-space-5)}
.hp-space-list{gap:var(--hp-space-1) var(--hp-space-2);margin-top:var(--hp-space-2)}
.hp-values{padding:56px}
.hp-values-top{gap:var(--hp-grid-gutter);margin-bottom:var(--hp-space-4)}
.hp-value-row{gap:var(--hp-space-3);padding:var(--hp-space-2) 0}
.hp-values .hp-btn{margin-top:var(--hp-space-4)}
.hp-steps-head{gap:var(--hp-grid-gutter)}
.hp-step-track{gap:var(--hp-space-2);margin-top:var(--hp-space-6)}
.hp-process-action{margin-top:var(--hp-space-5)}
.hp-conversion{gap:var(--hp-space-2);padding-bottom:var(--hp-space-12)}
.hp-review,.hp-pricing{gap:var(--hp-grid-gutter);padding:var(--hp-space-6)}
.hp-review p,.hp-pricing p{margin-top:var(--hp-space-3)}
.hp-review .hp-btn,.hp-pricing .hp-btn{margin-top:var(--hp-space-4)}
.hp-faq-grid{gap:var(--hp-grid-gutter)}
.hp-area-section{padding:var(--hp-space-3) 0 var(--hp-space-2)}
.hp-area{gap:var(--hp-grid-gutter);padding:var(--hp-space-6)}
.hp-area-links{gap:var(--hp-space-2) var(--hp-space-4)}
.hp-final{padding:0 0 var(--hp-space-3)}
.hp-final-copy{padding:var(--hp-space-8) 56px}
.hp-footer{padding:var(--hp-space-8) 0 var(--hp-space-4)}
.hp-footer-grid{gap:var(--hp-grid-gutter);row-gap:var(--hp-space-4)}
.hp-footer-intro p{margin-top:var(--hp-space-2)}
.hp-footer-bottom{margin-top:var(--hp-space-6);padding-top:var(--hp-space-3)}
.hp-footer-bottom a{color:inherit;text-decoration:underline;text-underline-offset:3px;transition:color .2s ease}
.hp-footer-bottom a:hover{color:var(--hp-mint)}

@media(max-width:1199px){
  :root{--hp-grid-columns:8;--hp-grid-gutter:24px;--hp-page-margin:32px}
}

@media(min-width:1000px) and (max-width:1199px){
  .hp-hero-copy,.hp-solutions>:first-child,.hp-feature>:first-child,.hp-process>:first-child{grid-column:1/span 3}
  .hp-hero-media,.hp-solutions>.hp-solution-media,.hp-feature>.hp-feature-photo,.hp-process>.hp-process-photo{grid-column:4/-1}
  .hp-section-head>:first-child,.hp-steps-head>:first-child{grid-column:1/span 5}
  .hp-section-head>.hp-lead,.hp-steps-head>.hp-lead{grid-column:6/-1}
  .hp-project-copy,.hp-faq-grid>:first-child{grid-column:1/span 3}
  .hp-project-lead>:last-child,.hp-faq-grid>.hp-faq-list{grid-column:4/-1}
  .hp-project-grid>.hp-project-card,.hp-space-split>.hp-space-half{grid-column:span 4}
  .hp-proof-grid>.hp-proof-item{grid-column:span 2}
  .hp-values-top>:first-child,.hp-review>:first-child,.hp-pricing>:first-child{grid-column:1/span 4}
  .hp-values-top>.hp-lead,.hp-review>:last-child,.hp-pricing>:last-child{grid-column:5/-1}
  .hp-area>:first-child{grid-column:1/span 3}
  .hp-area>.hp-area-links{grid-column:4/-1}
  .hp-footer-intro{grid-column:1/span 3}
  .hp-footer-grid>.hp-footer-col:nth-child(2){grid-column:4/span 2}
  .hp-footer-grid>.hp-footer-col:nth-child(3){grid-column:6/-1}
  .hp-footer-grid>.hp-footer-col:nth-child(4){grid-column:4/span 2}
  .hp-footer-grid>.hp-footer-col:nth-child(5){grid-column:6/-1}
  .hp-footer-cta{grid-column:1/span 3}
}

@media(max-width:999px){
  .hp-section{padding:var(--hp-space-10) 0}
  .hp-hero-grid>* ,
  .hp-section-head>* ,
  .hp-solutions>* ,
  .hp-feature>* ,
  .hp-project-lead>* ,
  .hp-process>* ,
  .hp-values-top>* ,
  .hp-steps-head>* ,
  .hp-review>* ,
  .hp-pricing>* ,
  .hp-faq-grid>* ,
  .hp-area>*{grid-column:1/-1!important}
  .hp-proof-grid>.hp-proof-item{grid-column:span 4}
  .hp-project-grid>.hp-project-card{grid-column:span 4}
  .hp-space-split>.hp-space-half{grid-column:span 4}
  .hp-footer-intro{grid-column:1/-1}
  .hp-footer-grid>.hp-footer-col{grid-column:span 2!important}
  .hp-footer-cta{grid-column:1/span 3}
  .hp-section-head,.hp-solutions,.hp-feature,.hp-project-lead,.hp-process,.hp-values-top,.hp-review,.hp-pricing,.hp-faq-grid,.hp-area{row-gap:var(--hp-space-4)}
}

@media(max-width:767px){
  :root{--hp-grid-columns:4;--hp-grid-gutter:16px;--hp-page-margin:16px}
  .hp-container{width:min(var(--hp-max),calc(100% - (var(--hp-page-margin) * 2)))}
  .hp-section{padding:72px 0}
  .hp-proof-grid>.hp-proof-item,
  .hp-project-grid>.hp-project-card,
  .hp-space-split>.hp-space-half{grid-column:1/-1}
  .hp-footer-grid>.hp-footer-col{grid-column:span 2!important}
  .hp-footer-intro,.hp-footer-cta{grid-column:1/-1}
  .hp-feature,.hp-process,.hp-values,.hp-review,.hp-pricing,.hp-area{padding:var(--hp-space-3)}
  .hp-project-grid{row-gap:var(--hp-space-4)}
  .hp-final-copy{padding:var(--hp-space-5) var(--hp-space-3)}
}

/* Quote consultation modal */
body.quote-modal-open{overflow:hidden}
.quote-modal{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:24px;visibility:hidden;opacity:0;transition:opacity .24s ease,visibility .24s ease;font-family:Inter,"Instrument Sans",Arial,sans-serif}
.quote-modal.is-open{visibility:visible;opacity:1}
.quote-backdrop{position:absolute;inset:0;background:rgba(2,4,4,.82);backdrop-filter:blur(12px)}
.quote-dialog{position:relative;z-index:1;display:grid;grid-template-columns:minmax(320px,.86fr) minmax(500px,1.14fr);grid-template-rows:minmax(0,1fr);width:min(1160px,100%);height:min(760px,calc(100svh - 48px));overflow:hidden;border-radius:28px;background:#f7f8f5;box-shadow:0 32px 110px rgba(0,0,0,.42);transform:translateY(14px) scale(.985);transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.quote-modal.is-open .quote-dialog{transform:none}
.quote-visual{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;min-height:0;overflow:hidden;padding:42px;background:#070908;color:#fff}
.quote-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,7,.5),rgba(5,8,7,.12) 46%,rgba(5,8,7,.94));pointer-events:none}
.quote-visual-copy,.quote-visual-photo,.quote-proof{position:relative;z-index:1}
.quote-visual-copy{max-width:360px}
.quote-kicker{margin:0 0 15px;color:#05e5af;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.quote-kicker-dark{color:#0b9e7f}
.quote-visual h2{max-width:9ch;margin:0;font-size:clamp(38px,4vw,58px);font-weight:600;line-height:.96;letter-spacing:-.07em}
.quote-visual-copy>p:last-child{max-width:34ch;margin:22px 0 0;color:#c6ceca;font-size:15px;line-height:1.55}
.quote-visual-photo{align-self:end;height:100%;min-height:0;max-height:320px;margin:24px -12px -8px;overflow:hidden;border-radius:18px}
.quote-visual-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.quote-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.2);color:#b8c2bd;font-size:11px;line-height:1.35}
.quote-proof span{display:grid;gap:7px}.quote-proof b{color:#05e5af;font-size:12px;letter-spacing:.08em}
.quote-content{display:flex;min-width:0;flex-direction:column;padding:38px 52px 24px;color:#0a0d0c}
.quote-topbar{display:flex;align-items:flex-start;justify-content:space-between}.quote-overline{display:block;color:#6e7974;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.quote-step-label{display:block;margin-top:6px;color:#151b18;font-size:13px;font-weight:700}
.quote-close{display:grid;width:38px;height:38px;place-items:center;padding:0;border:0;border-radius:50%;background:#e8ece8;color:#0a0d0c;font-size:25px;font-weight:300;line-height:1;transition:transform .2s ease,background .2s ease}.quote-close:hover{background:#dce4df;transform:rotate(8deg)}.quote-close-mobile{display:none;position:absolute;z-index:2;top:20px;right:20px;background:rgba(0,0,0,.45);color:#fff}
.quote-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:24px 0 46px}.quote-progress i{height:3px;border-radius:99px;background:#dfe5e0}.quote-progress i.is-active{background:#05dca9}
.quote-step{min-height:410px}.quote-step[hidden]{display:none}.quote-step h2{max-width:12ch;margin:0;font-size:clamp(37px,4.15vw,61px);font-weight:600;line-height:.96;letter-spacing:-.075em}.quote-intro{max-width:44ch;margin:18px 0 30px;color:#68736e;font-size:15px;line-height:1.55}
.quote-choice-grid{display:grid;gap:12px}.quote-choice-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}.quote-choice,.quote-finish{min-width:0;padding:18px;text-align:left;border:1px solid #d9e0db;border-radius:16px;background:#fff;color:#0a0d0c;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.quote-choice:hover,.quote-choice.is-selected,.quote-finish:hover,.quote-finish.is-selected{border-color:#05dca9;box-shadow:0 8px 22px rgba(2,80,61,.11);transform:translateY(-2px)}.quote-choice-icon{display:grid;width:52px;height:52px;place-items:center;margin-bottom:22px;border-radius:14px;background:#e7faf3}.quote-choice-icon img{width:46px;height:46px;object-fit:contain}.quote-choice strong,.quote-finish strong{display:block;font-size:15px;line-height:1.1}.quote-choice small,.quote-finish small{display:block;margin-top:7px;color:#7a8580;font-size:12px;line-height:1.35}
.quote-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.quote-field{display:block;margin-bottom:16px}.quote-field>span{display:block;margin-bottom:8px;color:#25312c;font-size:12px;font-weight:800}.quote-field select,.quote-field input{width:100%;height:52px;padding:0 14px;border:1px solid #d5ded8;border-radius:11px;background:#fff;color:#141b17;font:inherit;font-size:14px;outline:none}.quote-field select:focus,.quote-field input:focus{border-color:#05cfa0;box-shadow:0 0 0 3px rgba(5,229,175,.15)}.quote-pill-grid{display:flex;flex-wrap:wrap;gap:8px}.quote-pill{padding:11px 14px;border:1px solid #d5ded8;border-radius:999px;background:#fff;color:#52605a;font-size:13px;transition:.2s ease}.quote-pill:hover,.quote-pill.is-selected{border-color:#05dca9;background:#e7faf3;color:#078f70}
.quote-finish-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.quote-finish{padding:0 0 14px;overflow:hidden}.quote-finish-swatch,.quote-finish>img{display:block;width:100%;height:112px;margin-bottom:14px;object-fit:cover}.quote-finish-flake{background-color:#aeb5b2;background-image:radial-gradient(#f3f3ef 1px,transparent 1.5px),radial-gradient(#656e6b 1px,transparent 1.5px);background-position:0 0,7px 4px;background-size:13px 13px}.quote-finish-solid{background:linear-gradient(135deg,#d4d6d4,#929a97)}.quote-finish-options{display:grid;place-items:center;background:#e8faf4}.quote-finish-options .quote-finish-option-icon{width:66px;height:66px;margin:0;object-fit:contain}.quote-finish strong,.quote-finish small{margin-inline:12px}.quote-upload{display:flex;align-items:center;gap:12px;margin-top:8px;padding:13px;border:1px dashed #b8c8c0;border-radius:12px;background:#f0f7f3;color:#334039;cursor:pointer}.quote-upload input{position:absolute;width:1px;height:1px;opacity:0}.quote-upload-icon{display:grid;width:36px;height:36px;place-items:center;border-radius:10px;background:#fff;color:#079d7b;font-size:22px}.quote-upload strong,.quote-upload small{display:block}.quote-upload strong{font-size:13px}.quote-upload small{margin-top:3px;color:#79867f;font-size:11px}
.quote-error{min-height:18px;margin:9px 0 0;color:#b73e45;font-size:12px}.quote-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto}.quote-actions[hidden]{display:none}.quote-button{display:inline-flex;min-height:54px;align-items:center;justify-content:center;gap:24px;padding:14px 21px;border:0;border-radius:999px;background:#05dca9;color:#041510;font-size:14px;font-weight:800;transition:transform .2s ease,background .2s ease}.quote-button:hover{background:#25edbd;transform:translateY(-2px)}.quote-button span{font-size:19px}.quote-back-button{padding:12px 0;border:0;background:transparent;color:#596660;font-size:13px;font-weight:700}.quote-back-button:hover{color:#079d7b}.quote-privacy{margin:20px 0 0;color:#89948f;font-size:10px;line-height:1.45}.quote-success{min-height:410px}.quote-success-mark{display:grid;width:58px;height:58px;place-items:center;margin-bottom:24px;border-radius:50%;background:#05dca9;color:#06261d;font-size:28px}.quote-success h2{max-width:9ch}.quote-success-card{display:grid;gap:9px;margin:22px 0;padding:17px 19px;border-radius:14px;background:#eaf4ef;color:#64736b;font-size:12px}.quote-success-card strong{margin-bottom:4px;color:#18241e;font-size:13px}.quote-success-card span::before{content:"✓";margin-right:8px;color:#079d7b;font-weight:800}
/* ---- Quote modal: selection + control polish ---------------------------- */
.quote-choice,.quote-finish,.quote-pill{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.quote-choice,.quote-finish{box-shadow:0 1px 2px rgba(9,32,26,.05)}
.quote-choice:hover,.quote-finish:hover{border-color:#a9c9bd;background:#fdfffe;box-shadow:0 12px 26px rgba(3,62,48,.13);transform:translateY(-2px)}
.quote-choice:active,.quote-finish:active,.quote-pill:active{transform:translateY(0) scale(.994)}
/* Selected: teal ring held 2px clear of the card, plus a tick badge. */
.quote-choice.is-selected,.quote-finish.is-selected{border-color:#05c99b;background:#f4fdfa;box-shadow:0 0 0 2px #f7f8f5,0 0 0 4px #05dca9,0 14px 30px rgba(3,72,56,.16);transform:translateY(-2px)}
.quote-choice.is-selected::after,.quote-finish.is-selected::after{content:"";position:absolute;z-index:2;top:12px;right:12px;width:23px;height:23px;border-radius:50%;background:#05dca9 url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M3 7.35 5.75 10.1 11 4.4' fill='none' stroke='%2304211A' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px 13px no-repeat;box-shadow:0 3px 8px rgba(3,72,56,.34)}
.quote-choice.is-selected .quote-choice-icon{background:#cdf6e8}
.quote-choice:focus-visible,.quote-finish:focus-visible,.quote-pill:focus-visible,.quote-upload:focus-within{outline:none;box-shadow:0 0 0 2px #f7f8f5,0 0 0 5px rgba(4,152,118,.62)}
.quote-choice.is-selected:focus-visible,.quote-finish.is-selected:focus-visible{box-shadow:0 0 0 2px #f7f8f5,0 0 0 4px #05dca9,0 0 0 7px rgba(4,152,118,.42)}
.quote-pill{padding:11px 17px;color:#48564f;font-weight:600;transition:border-color .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}
.quote-pill:hover{border-color:#a9c9bd;background:#f3fbf8;color:#0a3d31}
.quote-pill.is-selected{border-color:transparent;background:#05dca9;color:#04211a;font-weight:750;box-shadow:0 0 0 2px #f7f8f5,0 0 0 4px rgba(5,220,169,.38),0 8px 18px rgba(3,72,56,.22)}
.quote-pill.is-selected:focus-visible{box-shadow:0 0 0 2px #f7f8f5,0 0 0 5px rgba(4,152,118,.62)}
/* Custom dropdown arrow: chip inset from the field edge, never the native one. */
.quote-field select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:56px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><rect width='30' height='30' rx='11' fill='%23E2F7EF'/><path d='M10.2 13.1 15 17.9l4.8-4.8' fill='none' stroke='%230A1310' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 11px center;background-size:30px 30px;cursor:pointer;text-overflow:ellipsis}
.quote-field select::-ms-expand{display:none}
.quote-field select:hover{border-color:#a9c9bd;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><rect width='30' height='30' rx='11' fill='%2305DCA9'/><path d='M10.2 13.1 15 17.9l4.8-4.8' fill='none' stroke='%2304211A' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.quote-field select:focus,.quote-field select:focus-visible{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><rect width='30' height='30' rx='11' fill='%2305DCA9'/><path d='M10.2 13.1 15 17.9l4.8-4.8' fill='none' stroke='%2304211A' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.quote-field select:focus-visible{outline:none;border-color:#05cfa0;box-shadow:0 0 0 3px rgba(5,229,175,.28)}
.quote-field input:focus-visible{outline:none}
@media(max-width:900px){.quote-dialog{grid-template-columns:1fr;grid-template-rows:auto;height:calc(100svh - 24px);overflow:auto}.quote-visual{display:none}.quote-close-mobile{display:grid}.quote-content{padding:28px 28px 22px}.quote-progress{margin-bottom:32px}.quote-step{min-height:0}.quote-step h2{max-width:11ch}.quote-actions{margin-top:34px}}
@media(max-width:620px){.quote-modal{padding:12px}.quote-dialog{max-height:calc(100svh - 24px);border-radius:20px}.quote-content{padding:23px 20px 19px}.quote-progress{margin:20px 0 28px}.quote-choice-grid-three,.quote-field-row,.quote-finish-grid{grid-template-columns:1fr 1fr}.quote-choice{padding:14px}.quote-choice-icon{width:46px;height:46px;margin-bottom:16px}.quote-choice-icon img{width:41px;height:41px}.quote-choice small{font-size:11px}.quote-finish-swatch,.quote-finish>img{height:92px}.quote-finish-options .quote-finish-option-icon{width:56px;height:56px}.quote-step h2{font-size:42px}.quote-intro{margin-bottom:22px}.quote-finish-grid .quote-finish:last-child{grid-column:span 2}.quote-privacy{text-align:center}.quote-success-card{margin-bottom:20px}}
@media(min-width:901px){
  .quote-content{min-height:0;overflow:hidden}
  #quote-form{display:flex;min-height:0;flex:1 1 auto;flex-direction:column}
  /* Bleed padding keeps the selected ring from being clipped by the scroller. */
  .quote-step{min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c9d5cf transparent;padding:3px 8px;margin:-3px -8px}
  .quote-actions{flex:0 0 auto;padding-top:18px}
}
@media(prefers-reduced-motion:reduce){.quote-modal,.quote-dialog,.quote-button,.quote-choice,.quote-finish,.quote-pill{transition:none}
  .quote-choice:hover,.quote-finish:hover,.quote-choice.is-selected,.quote-finish.is-selected{transform:none}}

/* Selected navigation mark. */
@media(min-width:1000px){
  .desktop-nav-shell .efg-wordmark::before{
    content:"";
    display:block;
    width:38px;
    height:38px;
    flex:0 0 38px;
    margin-right:9px;
    background:url("media/epoxy-floor-guys-nav-mark.webp") center/contain no-repeat;
  }
}

/* Straightforward estimates */
.hp-pricing{grid-template-columns:minmax(280px,.79fr) minmax(0,1.21fr);gap:0;padding:0!important;overflow:hidden;border-radius:30px;background:#fbfbfa;color:#080a09}
.hp-pricing-copy{display:flex;min-height:520px;flex-direction:column;align-items:flex-start;padding:72px 70px}
.hp-pricing .hp-kicker{margin-bottom:38px;color:var(--hp-mint-dark);font-size:13px;font-weight:800;letter-spacing:.15em}
.hp-pricing h2{max-width:8.7ch;font-size:clamp(46px,4.5vw,72px);line-height:.98;letter-spacing:-.068em}
.hp-price-accent{display:block;width:68px;height:5px;margin:32px 0 22px;border-radius:999px;background:var(--hp-mint)}
.hp-pricing p{max-width:450px;margin:0;color:#464b49;font-size:19px;line-height:1.55}
.hp-pricing .hp-btn{min-width:228px;margin-top:44px;justify-content:center}
.hp-price-factors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:42px 0 42px 56px;border:0;border-left:1px solid #d6d8d6;align-content:center}
.hp-price-factors li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:22px;align-items:center;min-height:196px;padding:24px 30px;border-bottom:1px solid #d6d8d6}
.hp-price-factors li:nth-child(n+3){border-bottom:0}
.hp-price-factors li:nth-child(odd){border-right:1px solid #d6d8d6}
.hp-price-factors .hp-price-icon{position:relative;display:grid;width:56px;height:56px;place-items:center;margin:0;border-radius:0;background:none;color:#0b1915}
.hp-price-icon .hp-icon{display:block;width:44px;height:44px;color:#0b1915;stroke-width:1.4;transform:none}
.hp-price-icon .hp-price-img{display:block;width:46px;height:46px;object-fit:contain}
.hp-price-factors strong{font-size:21px;font-weight:650;line-height:1.08;letter-spacing:-.05em}
.hp-price-factors span>span{margin-top:15px;color:#555b59;font-size:17px;line-height:1.45}
@media(max-width:1199px){
  .hp-pricing-copy{padding:56px 46px}
  .hp-price-factors{padding-left:32px}
  .hp-price-factors li{grid-template-columns:44px minmax(0,1fr);gap:17px;padding:22px}
  .hp-price-factors .hp-price-icon{width:44px;height:44px}
  .hp-price-icon .hp-icon{width:36px;height:36px}
  .hp-price-icon .hp-price-img{width:38px;height:38px}
  .hp-price-factors strong{font-size:18px}
  .hp-price-factors span>span{margin-top:10px;font-size:15px}
}
@media(max-width:999px){
  .hp-pricing{grid-template-columns:1fr;border-radius:24px}
  .hp-pricing-copy{min-height:0;padding:48px 42px 42px}
  .hp-price-factors{padding:18px 42px 38px;border-top:1px solid #d6d8d6;border-left:0}
  .hp-price-factors li:nth-child(-n+2){border-bottom:1px solid #d6d8d6}
  .hp-price-factors li:nth-child(odd){border-right:0}
}
@media(max-width:620px){
  .hp-pricing{border-radius:20px}
  .hp-pricing-copy{padding:34px 24px 32px}
  .hp-pricing .hp-kicker{margin-bottom:23px;font-size:11px}
  .hp-pricing h2{max-width:9.5ch;font-size:48px}
  .hp-price-accent{width:54px;height:4px;margin:24px 0 18px}
  .hp-pricing p{font-size:16px}
  .hp-pricing .hp-btn{width:100%;margin-top:30px}
  .hp-price-factors{grid-template-columns:1fr;padding:6px 24px 22px}
  .hp-price-factors li{grid-template-columns:40px minmax(0,1fr);gap:16px;min-height:0;padding:22px 0}
  .hp-price-factors .hp-price-icon{width:40px;height:40px}
  .hp-price-icon .hp-icon{width:32px;height:32px}
  .hp-price-icon .hp-price-img{width:34px;height:34px}
  .hp-price-factors li:nth-child(n){border-right:0;border-bottom:1px solid #d6d8d6}
  .hp-price-factors li:last-child{border-bottom:0}
  .hp-price-factors strong{font-size:19px}
  .hp-price-factors span>span{margin-top:7px;font-size:15px}
}

/* ==========================================================================
   ANIMATED NAVIGATION
   Ported from the MindMarket mega-menu study. Four layers move on open:
     1. panel chrome   scale(.97) -> 1        .4s  bounce (slight overshoot)
     2. panel contents y+16px + fade          .2s  ease
     3. each item      y+20px + fade          .4s  ease, delayed index x 25ms
     4. featured art   scale(1.06) -> 1.025   .6s  ease-inOut
   The panel only renders while [open], which JS holds through the exit
   transition, so nothing here fights the <details> element's own display.
   ========================================================================== */
@media(min-width:901px){
  :root{
    --nav-dur:.4s;
    --nav-dur-fast:.2s;
    --nav-dur-slow:.6s;
    --nav-ease:cubic-bezier(.5,0,0,1);
    --nav-ease-bounce:cubic-bezier(.17,.67,.3,1.33);
    --nav-ease-inout:cubic-bezier(.455,.03,.515,.955);
    --nav-stagger:25ms;
  }

  /* hover alone no longer reveals the panel — JS opens it so the animation runs */
  .nav-more:not([open])>.nav-more-menu{display:none!important}
  .nav-more[open]>.nav-more-menu{display:grid!important}

  /* 2. contents rise and fade */
  .nav-more[open]>.nav-more-menu{
    opacity:0;
    translate:0 16px;
    transition:opacity .1s var(--nav-ease),translate var(--nav-dur-fast) var(--nav-ease);
  }
  .nav-more.is-open>.nav-more-menu{opacity:1;translate:none}

  /* 1. panel chrome lives on ::after so it can scale without dragging the text */
  .mega-menu,.compact-menu{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .mega-menu::after,.compact-menu::after{
    content:"";
    position:absolute;
    z-index:0;
    inset:0;
    background:#fff;
    border:1px solid rgba(20,24,22,.08);
    border-radius:12px;
    box-shadow:0 26px 70px rgba(0,0,0,.24);
    transform:scale(.97);
    transition:transform var(--nav-dur) var(--nav-ease-bounce);
  }
  .nav-more.is-open>.nav-more-menu::after{transform:none}
  .mega-menu>*,.compact-menu>*{position:relative;z-index:1}

  /* 3. the staggered reveal. translate (not transform) so per-link hover
        transforms keep working untouched. */
  .nav-more .is-stagger{
    opacity:0;
    translate:0 20px;
    transition:opacity var(--nav-dur) var(--nav-ease),
               translate var(--nav-dur) var(--nav-ease),
               color .18s ease,
               transform .18s ease!important;
  }
  .nav-more.is-open .is-stagger{
    opacity:1;
    translate:none;
    transition-delay:calc(var(--index,0) * var(--nav-stagger))!important;
  }

  /* 4. featured art settles out of a slight zoom */
  .nav-more .mega-project img{
    transform:scale(1.06);
    transition:transform var(--nav-dur-slow) var(--nav-ease-inout)!important;
  }
  .nav-more.is-open .mega-project img{transform:scale(1.025)}
  .nav-more .mega-project:hover img{transform:scale(1.075)!important}

  /* chevron and trigger pill share the bounce, so the whole bar feels of a piece */
  .nav-chevron{transition:transform var(--nav-dur) var(--nav-ease-bounce)!important}
  .nav-more.is-open>summary .nav-chevron,
  .nav-more.is-open>.nav-chevron{transform:rotate(180deg)}

  .site-nav>a,.nav-more:not(.nav-more-compact)>summary{
    position:relative;
    z-index:1;
    background:transparent!important;
  }
  .site-nav>a::before,.nav-more:not(.nav-more-compact)>summary::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    border-radius:999px;
    background:#f3f0e9;
    opacity:0;
    transform:scale(.6);
    transition:transform var(--nav-dur) var(--nav-ease-bounce),opacity .1s var(--nav-ease);
  }
  .site-nav>a:hover::before,
  .nav-more:not(.nav-more-compact)>summary:hover::before,
  .nav-more.is-open:not(.nav-more-compact)>summary::before{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .nav-more[open]>.nav-more-menu,
  .nav-more .is-stagger{opacity:1!important;translate:none!important;transition:none!important}
  .mega-menu::after,.compact-menu::after{transform:none!important;transition:none!important}
  .nav-more .mega-project img{transform:scale(1.025)!important;transition:none!important}
}

/* ==========================================================================
   FLOOR SYSTEMS GALLERY
   Four panels share one row; the active one takes the space. Proportions are
   measured off the reference comp: a 1.86:1 active-to-collapsed ratio, a 10px
   gutter, and a solid footer bar on every panel so a collapsed panel is still
   labelled and still clickable.

   Nothing scrolls at desktop width, so there is no scroll position to keep in
   sync — the whole layout is a transition of flex-grow, which cannot drift.
   ========================================================================== */
.hp-systems{
  --sys-dur:.62s;
  --sys-ease:cubic-bezier(.22,.85,.26,1);
  --sys-ease-bounce:cubic-bezier(.17,.67,.3,1.33);
  --sys-bar-h:78px;
  --sys-gap:10px;
  position:relative;
}

.hp-systems-track{
  display:flex;
  gap:var(--sys-gap);
  height:clamp(400px,36vw,520px);
  margin:0;
  padding:0;
  list-style:none;
}

.hp-system{
  position:relative;
  flex:1 1 0%;
  min-width:0;
  transition:flex-grow var(--sys-dur) var(--sys-ease);
}
.hp-system.is-active{flex-grow:1.86}

.hp-system-link{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:4px;
  background:#0d0f0e;
  color:var(--hp-white);
  isolation:isolate;
  transition:border-color .35s ease,box-shadow .35s ease;
}
.hp-system.is-active .hp-system-link{
  border-color:var(--hp-mint);
  box-shadow:0 0 0 1px rgba(5,229,175,.45),0 0 26px rgba(5,229,175,.22),0 0 70px rgba(5,229,175,.1);
}
.hp-system-link:focus-visible{outline:3px solid var(--hp-mint);outline-offset:4px}

/* the photo fills the whole panel; the bar floats over its lower edge, which
   is why the comp shows floor texture reading faintly through the active bar */
.hp-system-frame{
  position:absolute;
  display:block;
  inset:0;
  overflow:hidden;
}
.hp-systems .hp-system-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
  /* collapsed panels sit a touch cooler so the active one reads as selected,
     without going so dark that the photo stops selling the finish */
  filter:saturate(.95) brightness(.92);
  transform:scale(1.06);
  transition:transform 1.1s var(--sys-ease),filter var(--sys-dur) ease;
}
.hp-system.is-active .hp-system-img{filter:none;transform:scale(1)}
.hp-system-link:hover .hp-system-img{filter:none;transform:scale(1.02)}
.hp-system.is-active .hp-system-link:hover .hp-system-img{transform:scale(1.03)}

/* footer bar — identical on every panel, so collapsing one never hides its name */
.hp-system-bar{
  position:absolute;
  z-index:1;
  right:0;
  bottom:0;
  left:0;
  display:flex;
  min-height:var(--sys-bar-h);
  align-items:center;
  gap:14px;
  padding:0 18px;
  /* translucent, so a bright floor glows through it and a dark one reads
     near-black — the bar picks up the photo instead of covering it */
  background:rgba(9,11,10,.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
  border-top:1px solid rgba(255,255,255,.12);
}
.hp-systems .hp-system-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  object-fit:contain;
  filter:drop-shadow(0 0 5px rgba(5,229,175,.3));
}
.hp-system-label{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  font-size:16px;
  font-weight:600;
  letter-spacing:-.03em;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.hp-system-arrow{
  width:20px;
  height:20px;
  flex:0 0 20px;
  color:var(--hp-mint);
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .26s var(--sys-ease);
}
.hp-system-link:hover .hp-system-arrow{transform:translateX(4px)}

/* the indicator mirrors the active panel's position and width, so it reads as
   a map of the row rather than an abstract quarter-full bar */
.hp-systems-progress{
  position:relative;
  height:3px;
  margin-top:18px;
  border-radius:99px;
  background:#3b3f3d;
}
.hp-systems-progress span{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--p-left,0);
  width:var(--p-width,25%);
  border-radius:inherit;
  background:var(--hp-mint);
  box-shadow:0 0 13px rgba(5,229,175,.6);
  transition:left var(--sys-dur) var(--sys-ease),width var(--sys-dur) var(--sys-ease);
}

/* the comp has no arrow buttons — panels are the control at desktop width.
   They come back on narrow screens, where the row scrolls. */
.hp-systems-nav{display:none}

@media(max-width:900px){
  .hp-systems-track{
    height:auto;
    gap:12px;
    overflow-x:auto;
    padding-bottom:4px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
  }
  .hp-systems-track::-webkit-scrollbar{display:none}
  .hp-system,.hp-system.is-active{
    flex:0 0 min(78vw,420px);
    height:min(100vw,450px);
    scroll-snap-align:center;
  }
  .hp-systems .hp-system-img{filter:none;transform:scale(1)}
  .hp-systems-nav{
    display:flex;
    gap:8px;
    justify-content:flex-end;
    margin-top:12px;
  }
  .hp-systems-btn{
    display:grid;
    width:44px;
    height:36px;
    place-items:center;
    padding:0;
    border:1px solid rgba(255,255,255,.25);
    border-radius:7px;
    background:transparent;
    color:var(--hp-white);
    cursor:pointer;
    transition:border-color .2s ease,background .2s ease,color .2s ease,transform .2s var(--sys-ease-bounce);
  }
  .hp-systems-btn:hover,.hp-systems-btn:focus-visible{border-color:var(--hp-mint);background:var(--hp-mint);color:#06120f;outline:0}
  .hp-systems-btn:active{transform:scale(.94)}
  .hp-systems-btn:first-child .hp-arrow{transform:rotate(180deg)}
  .hp-systems-btn .hp-arrow{width:18px;height:18px}
}

@media(prefers-reduced-motion:reduce){
  .hp-system,.hp-systems .hp-system-img,.hp-systems-progress span{transition:none!important}
}

/* ==========================================================================
   NAVIGATION TYPOGRAPHY
   Two problems the measurements turned up:

   1. Tracking was applied unevenly. The wordmark sits at -.055em and the mega
      panel at -.035em, but the nav links, the quote button and the card labels
      were at 0 — so the bar reads looser than everything around it. Inter at
      17px wants a little negative tracking to look set rather than typed.

   2. The hierarchy was inverted. "Explore every flooring option" — a line of
      connective copy — was the largest text in the panel at 22px, while the
      thirteen destination links people actually came to click were the
      smallest at 16px. Those links are peers of the nav bar's own items, so
      they should match it.

   Weights were also spread across 500/530/600/650/700/750; 530 and 650 are
   invisible next to their neighbours, so this collapses to 500/600/700.
   ========================================================================== */
@media(min-width:901px){
  /* !important because an earlier rule opts the whole bar out of tracking
     with `letter-spacing:normal!important` — that reset is what made the nav
     look looser than the panel beneath it */
  .site-nav>a,.nav-more:not(.nav-more-compact)>summary{
    font-size:17px!important;
    font-weight:500!important;
    line-height:1.15!important;
    letter-spacing:-.03em!important;
  }
  .apply-top{
    font-size:17px!important;
    font-weight:600!important;
    letter-spacing:-.03em!important;
  }

  .mega-directory-head p{font-size:19px;font-weight:600;letter-spacing:-.035em}
  .mega-directory-head>a{font-size:14px;font-weight:600;letter-spacing:-.02em}

  .mega-group h2,.compact-menu p{
    font-size:12px;
    font-weight:700;
    letter-spacing:.1em;
  }
  .mega-group a{
    font-size:17px!important;
    font-weight:500!important;
    line-height:1.2!important;
    letter-spacing:-.025em!important;
  }
  .compact-menu a{
    font-size:16px!important;
    font-weight:500!important;
    letter-spacing:-.025em!important;
  }
  .mega-project span{font-size:17px;font-weight:600;letter-spacing:-.03em}
}

@media(min-width:901px){
  /* Columns were sized by ratio (.9fr 1.1fr 1fr), which had no relationship to
     the labels in them: column one got 158px for a 164px word and wrapped,
     while column two sat on 37px of slack. Sizing to content and spreading the
     remainder means no label wraps unless the panel genuinely runs out of room,
     and minmax(0,…) still lets them shrink gracefully if it does. */
  .mega-groups{
    grid-template-columns:repeat(3,minmax(0,max-content));
    justify-content:space-between;
  }
}

/* Between roughly 900 and 1400px the panel is narrow enough that the link
   columns need 522px and only get 430px, so every long label wraps. Rebalance
   the split toward the directory (the three project cards are decorative and
   lose nothing by being narrower) and step the links down one size. */
@media(min-width:901px) and (max-width:1400px){
  .mega-menu{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important}
  .mega-groups{column-gap:20px}
  .mega-group a{font-size:16px!important}
  .mega-directory-head p{font-size:18px}
}

/* Keep the estimate panel out of the site's general 12-column layout rules. */
@media(min-width:1000px){
  .hp-pricing{grid-template-columns:minmax(280px,.79fr) minmax(0,1.21fr)!important;grid-template-rows:1fr!important}
  .hp-pricing>.hp-pricing-copy{grid-column:1!important;grid-row:1!important}
  .hp-pricing>.hp-price-factors{grid-column:2!important;grid-row:1!important}
}
@media(max-width:999px){
  .hp-pricing{grid-template-columns:1fr!important;grid-template-rows:auto auto!important}
  .hp-pricing>.hp-pricing-copy{grid-column:1/-1!important;grid-row:1!important}
  .hp-pricing>.hp-price-factors{grid-column:1/-1!important;grid-row:2!important}
}

/* Quote process timeline */
.hp-steps-head{grid-template-columns:minmax(0,1.42fr) minmax(320px,.58fr)!important;gap:100px!important;align-items:start!important;margin:0!important}
.hp-steps-head>div:first-child{grid-column:auto!important}
.hp-steps-head .hp-display{max-width:12ch;font-size:clamp(56px,5.4vw,84px);line-height:.97}
.hp-steps-intro{display:flex;grid-column:auto!important;flex-direction:column;align-items:flex-start;padding-top:64px}
.hp-steps-intro .hp-lead{max-width:500px;margin:0;color:#d5d7d6;font-size:clamp(20px,1.7vw,28px);line-height:1.38}
.hp-steps-intro .hp-btn{min-width:390px;justify-content:space-between;margin-top:36px;border-color:var(--hp-mint);color:var(--hp-mint)}
.hp-steps-intro .hp-btn:hover{background:var(--hp-mint);color:#06120f}
.hp-step-track{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:88px}
.hp-step-track::before{content:"";position:absolute;z-index:0;top:166px;right:10%;left:10%;height:2px;background:#555a58}
.hp-quote-step{position:relative;z-index:1;display:grid;grid-template-rows:144px 45px auto;text-align:center}
.hp-process-icon-wrap{display:grid;width:126px;height:126px;place-items:center;justify-self:center;align-self:center}
.hp-process-icon{width:102px;height:102px;object-fit:contain;color:#f7faf8;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.hp-process-icon-wrap-check .hp-process-icon{color:var(--hp-mint);stroke-width:1.6}
.hp-process-node{display:grid;width:22px;height:22px;place-self:center;box-sizing:border-box;border:5px solid #0a0d0c;border-radius:50%;background:var(--hp-mint);box-shadow:0 0 0 2px #6c706e}
.hp-steps-head .hp-display{font-size:clamp(44px,4.7vw,72px)}
.hp-steps-intro .hp-lead{font-size:20px;line-height:1.5}
.hp-process-icon-wrap{width:96px;height:96px}
.hp-process-icon{width:76px;height:76px}
.hp-process-icon-wrap-check .hp-process-icon{width:62px;height:62px}
.hp-quote-step h3{margin-top:20px;font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-.04em}
.hp-quote-step p{max-width:225px;margin:18px auto 0;color:#c5c8c6;font-size:16px;line-height:1.55}
@media(max-width:1199px){
  .hp-steps-head{gap:50px!important}
  .hp-steps-intro{padding-top:42px}
  .hp-steps-intro .hp-btn{min-width:310px}
  .hp-step-track{margin-top:64px}
  .hp-process-icon-wrap{width:104px;height:104px}
  .hp-process-icon{width:83px;height:83px}
  .hp-process-icon-wrap-check .hp-process-icon{width:68px;height:68px}
  .hp-step-track::before{top:142px}
  .hp-quote-step{grid-template-rows:122px 40px auto}
  .hp-quote-step h3{font-size:21px}
  .hp-quote-step p{font-size:16px}
}
@media(max-width:999px){
  .hp-steps-head{grid-template-columns:1fr!important;gap:30px!important}
  .hp-steps-intro{padding-top:0}
  .hp-steps-intro .hp-btn{min-width:0}
  .hp-step-track{grid-template-columns:1fr;gap:0;margin:50px 0 0;padding-left:0}
  .hp-step-track::before{display:none}
  .hp-quote-step{grid-template-columns:102px 1fr;grid-template-rows:auto auto;min-height:136px;text-align:left}
  .hp-process-icon-wrap{grid-row:1/span 2;width:102px;height:102px}
  .hp-process-icon{width:76px;height:76px}
  .hp-process-icon-wrap-check .hp-process-icon{width:62px;height:62px}
  .hp-process-node{display:none}
  .hp-quote-step h3{margin:20px 0 0;padding-left:20px;font-size:23px;align-self:end}
  .hp-quote-step p{max-width:38ch;margin:9px 0 24px;padding-left:20px;font-size:16px}
}
@media(max-width:620px){
  .hp-steps-head .hp-display{font-size:48px}
  .hp-steps-intro .hp-lead{font-size:19px}
  .hp-steps-intro .hp-btn{width:100%;margin-top:26px}
  .hp-step-track{margin-top:42px}
  .hp-quote-step{grid-template-columns:82px 1fr;min-height:122px}
  .hp-process-icon-wrap{width:82px;height:82px}
  .hp-process-icon{width:62px;height:62px}
  .hp-process-icon-wrap-check .hp-process-icon{width:50px;height:50px}
  .hp-quote-step h3{margin-top:12px;padding-left:16px;font-size:20px}
  .hp-quote-step p{margin-top:7px;padding-left:16px;font-size:15px}
}

/* Give the primary labels room to breathe without changing the mobile header. */
@media(min-width:1000px) and (max-width:1199px){.site-nav{gap:5px!important}}
@media(min-width:1200px){.site-nav{gap:8px!important}}

/* The compact desktop menu morphs from two rails into a clear close icon. */
@media(min-width:901px){
  .nav-more-compact>summary span::before,
  .nav-more-compact>summary span::after{
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%);
    transition:transform .22s var(--hp-ease);
  }
  .nav-more-compact:not(.is-open)>summary span::before{transform:translateY(-4px)}
  .nav-more-compact:not(.is-open)>summary span::after{transform:translateY(3px)}
  .nav-more-compact.is-open>summary span::before{transform:translateY(-50%) rotate(45deg)}
  .nav-more-compact.is-open>summary span::after{transform:translateY(-50%) rotate(-45deg)}
}

/* Project examples: equal before/after grid */
.hp-projects-showcase{display:block}
.hp-projects-header{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);gap:80px;align-items:end;margin-bottom:58px}
.hp-projects-header .hp-display{max-width:10ch}
.hp-projects-header .hp-lead{max-width:430px;justify-self:end;margin:0}
.hp-project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:52px 26px;margin:0!important}
.hp-project-grid>.hp-project-card{grid-column:auto!important;min-width:0}
.hp-project-card .hp-compare{aspect-ratio:4/3;border-radius:12px}
.hp-project-card .hp-compare>img,.hp-project-card .hp-compare-after,.hp-project-card .hp-compare-after img{object-position:center}
.hp-project-card .hp-compare-handle{width:46px;height:46px}
.hp-project-card .hp-compare-handle::before,.hp-project-card .hp-compare-handle::after{top:18px}
.hp-project-card .hp-compare-handle::before{left:11px}.hp-project-card .hp-compare-handle::after{right:11px}
.hp-project-card .hp-project-meta{margin-top:15px}
.hp-project-card .hp-project-meta h3{font-size:20px}
.hp-project-card .hp-project-meta p{margin-top:5px;color:#9da19f;font-size:14px}
.hp-projects-action{display:flex;justify-content:center;margin-top:52px}
.hp-projects-action .hp-btn{min-width:210px;justify-content:space-between}
@media(max-width:999px){
  .hp-projects-header{grid-template-columns:1fr;gap:22px;margin-bottom:36px}
  .hp-projects-header .hp-lead{justify-self:start}
  .hp-project-grid{gap:36px 20px}
}
@media(max-width:680px){
  .hp-project-grid{grid-template-columns:1fr!important;gap:34px}
  .hp-project-card .hp-compare{aspect-ratio:4/3}
  .hp-projects-action{margin-top:38px}
  .hp-projects-action .hp-btn{width:100%}
}

/* The circle button at the end of the bar opens a full-width panel of three
   cards (About Us / Insights / Contact), not a narrow text list — same card
   treatment as the Services panel, just without the link directory beside it. */
@media(min-width:901px){
  .nav-more-compact{position:static}
  .more-mega{
    grid-template-columns:minmax(0,1fr)!important;
    min-height:0!important;
  }
  .more-mega .mega-projects{min-height:340px!important}
}

/* ==========================================================================
   MOBILE MENU — match the reference's accordion behaviour
   Ours snapped open (a <details> shows its contents the instant the open
   attribute lands) and allowed every section to be open at once. The
   reference animates the height, fades each child link in behind the one
   before it, and keeps a single section open. Same open sequence as the
   desktop panel, so the two feel like one component.
   ========================================================================== */
@media(max-width:999px){
  .reference-mobile-list details>div{
    display:grid;
    grid-template-rows:0fr;
    padding:0!important;
    transition:grid-template-rows .42s cubic-bezier(.5,0,0,1);
  }
  .reference-mobile-list details.is-open>div{grid-template-rows:1fr}

  /* the grid 0fr->1fr technique needs one clipping child; JS inserts it */
  .reference-mobile-list details>div>.mobile-sub{
    min-height:0;
    overflow:hidden;
  }
  .reference-mobile-list details.is-open>div>.mobile-sub{padding:8px 0 16px}

  .reference-mobile-list details>div a{
    opacity:0;
    translate:0 12px;
    transition:opacity .38s cubic-bezier(.5,0,0,1),translate .38s cubic-bezier(.5,0,0,1);
  }
  .reference-mobile-list details.is-open>div a{
    opacity:1;
    translate:none;
    transition-delay:calc(var(--index,0) * 22ms);
  }

  .reference-mobile-list summary span{transition:transform .42s cubic-bezier(.17,.67,.3,1.33)}
  .reference-mobile-list details.is-open summary span{transform:rotate(180deg)}
}

@media(max-width:999px) and (prefers-reduced-motion:reduce){
  .reference-mobile-list details>div,
  .reference-mobile-list details>div a{transition:none!important}
  .reference-mobile-list details>div a{opacity:1;translate:none}
}

/* Interactive local-service map, promoted from local-service-map.html. */
.hp-service-map-section{padding:32px 0}
.hp-service-map-shell{display:grid;min-height:760px;grid-template-columns:minmax(380px,.82fr) minmax(600px,1.45fr);overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:var(--hp-radius);background:var(--hp-gray);color:#080a09;box-shadow:0 32px 90px rgba(0,0,0,.32)}
.hp-service-map-copy{display:flex;min-width:0;flex-direction:column;justify-content:center;padding:68px 58px 58px}
.hp-service-map-copy .hp-kicker{color:var(--hp-mint-dark)}
.hp-service-map-copy h2{max-width:10ch;font-size:clamp(44px,4vw,66px);font-weight:600;letter-spacing:-.065em;line-height:.99;text-wrap:balance}
.hp-service-location{display:flex;align-items:center;gap:9px;margin-top:30px!important;font-size:clamp(20px,1.7vw,26px);font-weight:700;letter-spacing:-.035em}
.hp-service-location svg{width:27px;height:27px;flex:0 0 auto;fill:var(--hp-mint);stroke:#080a09;stroke-width:1.5}
.hp-service-location strong{color:var(--hp-mint-dark)}
.hp-service-intro{max-width:510px;margin-top:22px!important;color:#5f6663;font-size:16px;line-height:1.7}
.hp-service-area-picker{margin-top:30px}
.hp-service-area-picker>span{display:block;margin-bottom:12px;color:#737976;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.hp-service-area-chips{display:flex;flex-wrap:wrap;gap:8px}
.hp-service-area-chip{padding:9px 12px;border:1px solid #cfd4d1;border-radius:999px;background:transparent;color:#424744;cursor:pointer;font-size:12px;font-weight:600;transition:.22s ease}
.hp-service-area-chip:hover,.hp-service-area-chip:focus-visible,.hp-service-area-chip.is-active{border-color:var(--hp-mint-dark);background:#dff8f0;color:#006d52;outline:none}
.hp-service-area-cta{display:inline-flex;width:max-content;min-width:270px;align-items:center;justify-content:space-between;gap:28px;margin-top:30px;padding:17px 20px;border-radius:9px;background:var(--hp-mint);color:#080a09!important;font-size:15px;font-weight:700;transition:transform .22s ease,background .22s ease}
.hp-service-area-cta:hover{background:#23edbd;transform:translateY(-2px)}
.hp-service-area-cta svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
.hp-service-assurances{display:flex;flex-wrap:wrap;gap:18px 24px;margin-top:30px;padding-top:22px;border-top:1px solid #d9dddb;color:#505653;font-size:12px}
.hp-service-assurances span{display:flex;align-items:center;gap:7px;white-space:nowrap}
.hp-service-assurances svg{width:20px;height:20px;fill:none;stroke:var(--hp-mint-dark);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}
.hp-service-map-card{min-width:0;margin:12px;border-radius:24px;background:#0b0e0d;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hp-service-map-topbar{display:flex;height:62px;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid rgba(255,255,255,.09);color:#cdd2d0;font-size:12px;font-weight:600;letter-spacing:.03em}
.hp-service-map-topbar>div{display:flex;align-items:center;gap:10px}
.hp-service-map-topbar output{color:#7f8985;font-size:11px}
.hp-service-map-dot{width:8px;height:8px;border-radius:50%;background:var(--hp-mint);box-shadow:0 0 18px var(--hp-mint)}
.hp-service-map-stage{position:relative;height:calc(100% - 62px);min-height:650px;overflow:hidden;border-radius:0 0 24px 24px;isolation:isolate}
.hp-service-map-stage::after{position:absolute;z-index:401;inset:0;pointer-events:none;background:radial-gradient(circle at 49% 47%,transparent 0 18%,rgba(4,9,8,.08) 48%,rgba(4,9,8,.42) 100%);content:""}
#hp-service-map{position:absolute;inset:0;background:#0b0e0d;font-family:Manrope,"Helvetica Neue",Arial,sans-serif}
.hp-service-map-legend{position:absolute;z-index:402;bottom:22px;left:22px;display:flex;gap:18px;padding:12px 14px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(8,12,11,.82);color:#abb2af;font-size:10px;backdrop-filter:blur(10px)}
.hp-service-map-legend span{display:flex;align-items:center;gap:8px}
.hp-service-map-legend i{display:block;width:24px;height:9px}
.hp-service-legend-area{border:1px solid var(--hp-mint);background:rgba(5,229,175,.18)}
.hp-service-legend-city{width:10px!important;height:10px!important;border-radius:50% 50% 50% 0;background:var(--hp-mint);transform:rotate(-45deg)}
#hp-service-map .leaflet-container{background:#0b0e0d;font-family:Manrope,"Helvetica Neue",Arial,sans-serif}
.hp-svc-pin{display:block;width:20px;height:20px;border:2px solid #001a14;border-radius:50% 50% 50% 0;background:var(--hp-mint);box-shadow:0 0 0 3px rgba(5,229,175,.16),0 5px 18px rgba(0,0,0,.45);transform:rotate(-45deg);transition:transform .24s ease,background .24s ease,box-shadow .24s ease}
.hp-svc-pin-wrap:hover .hp-svc-pin{transform:rotate(-45deg) scale(1.12)}
.hp-svc-pin.is-active{background:#fff;box-shadow:0 0 0 5px rgba(5,229,175,.25),0 0 28px rgba(5,229,175,.75);transform:rotate(-45deg) scale(1.12)}
#hp-service-map .leaflet-marker-icon:focus-visible{outline:2px solid var(--hp-mint);outline-offset:4px}
#hp-service-map .hp-svc-label.leaflet-tooltip{padding:3px 9px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(8,12,11,.82);color:#e7ecea;font-size:11px;font-weight:600;letter-spacing:.01em;box-shadow:none;backdrop-filter:blur(8px)}
#hp-service-map .hp-svc-label.leaflet-tooltip::before{display:none}
#hp-service-map .leaflet-control-zoom{border:1px solid rgba(255,255,255,.14)!important;border-radius:8px!important;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.4)!important}
#hp-service-map .leaflet-control-zoom a{width:32px;height:32px;line-height:32px;background:rgba(8,12,11,.9);color:#cdd2d0;border-bottom-color:rgba(255,255,255,.12)!important}
#hp-service-map .leaflet-control-zoom a:hover{background:var(--hp-mint);color:#001a14}
#hp-service-map .leaflet-control-attribution{padding:2px 8px;background:rgba(8,12,11,.72)!important;color:#7f8985!important;font-size:10px}
#hp-service-map .leaflet-control-attribution a{color:#9aa3a0!important}

@media(max-width:1180px){
  .hp-service-map-shell{grid-template-columns:1fr}
  .hp-service-map-copy{padding:56px 52px}
  .hp-service-map-copy h2{max-width:12ch}
  .hp-service-map-card{min-height:680px}
}
@media(max-width:700px){
  .hp-service-map-section{padding:24px 0 16px}
  .hp-service-map-shell{border-radius:22px}
  .hp-service-map-copy{padding:38px 24px 32px}
  .hp-service-map-copy h2{font-size:clamp(38px,11vw,48px);line-height:1.01}
  .hp-service-location{align-items:flex-start;font-size:20px;line-height:1.3}
  .hp-service-intro{font-size:15px}
  .hp-service-area-cta{width:100%;min-width:0}
  .hp-service-assurances{display:grid;grid-template-columns:1fr}
  .hp-service-map-card{min-height:540px;margin:0 8px 8px;border-radius:18px}
  .hp-service-map-topbar{height:56px;padding:0 16px}
  .hp-service-map-stage{min-height:480px;border-radius:0 0 18px 18px}
  .hp-service-map-legend{right:12px;bottom:12px;left:12px;justify-content:center}
  #hp-service-map .hp-svc-label.leaflet-tooltip{display:none}
}
@media(prefers-reduced-motion:reduce){.hp-svc-pin,.hp-service-area-cta{transition:none}}

/* Match the FAQ proportions to the service-map section: 36% / 64%. */
@media(min-width:1181px){
  .hp-faq-grid{grid-template-columns:minmax(380px,.82fr) minmax(600px,1.45fr)}
  .hp-faq-grid>:first-child,.hp-faq-grid>.hp-faq-list{grid-column:auto}
}
@media(max-width:1180px){
  .hp-faq-grid{grid-template-columns:1fr}
  .hp-faq-grid>:first-child,.hp-faq-grid>.hp-faq-list{grid-column:1/-1}
}

/* Layout review refinements — remove accidental type and alignment drift. */
@media(min-width:1000px){
  .header .shell{
    width:min(var(--hp-max),calc(100% - (var(--hp-page-margin) * 2)))!important;
    max-width:var(--hp-max)!important;
  }
  .hp-process-photo{
    position:relative;
    height:100%;
    min-height:0;
    align-self:stretch;
  }
  .hp-process-photo img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
}

.hp .hp-kicker{
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.16em;
}

.hp-hero-copy p.hp-kicker,.hp-final-copy p.hp-kicker{color:var(--hp-mint)}
.hp-hero .hp-kicker,.hp-final-copy .hp-kicker{color:var(--hp-mint)}
.hp-feature .hp-kicker,.hp-process .hp-kicker,.hp-area .hp-kicker{color:var(--hp-mint-dark)}
.hp-pricing .hp-kicker{color:var(--hp-mint-dark)}
.hp-hero h1{max-width:100%}
.hp-process-step h3{font-size:20px;line-height:1.2}
.hp-faq-list details p{max-width:65ch}

@media(max-width:999px){
  .reference-mobile-panel{top:84px}
  .reference-mobile-list>a,.reference-mobile-list summary{font-weight:600}
  .reference-mobile-list details>div a{
    min-height:44px;
    padding:11px 0;
    font-size:16px;
    font-weight:500;
    line-height:1.35;
  }
  .reference-mobile-contact,.reference-mobile-quote{font-weight:600}
}

/* ==========================================================================
   DESIGN QA PASS
   Small execution fixes only — no layout redesign.
   ========================================================================== */
/* Proof bar: between 1000-1280px the four items wrapped to three ragged
   lines; tighter padding and one type step down keeps them to two. */
@media(min-width:1000px) and (max-width:1280px){
  .hp-proof-item{gap:14px;padding:22px 18px;font-size:15px}
}
/* Floor systems: below 1400px a collapsed panel is too narrow for its label,
   which ellipsized ("Commerci…"). Collapsed panels show the icon alone; the
   label and arrow belong to the expanded state. */
@media(min-width:901px) and (max-width:1399px){
  .hp-system:not(.is-active) .hp-system-label,
  .hp-system:not(.is-active) .hp-system-arrow{display:none}
  .hp-system:not(.is-active) .hp-system-bar{justify-content:center}
}
/* Feature callouts: at 1000-1199px the copy column is three of eight
   columns, so two-up callouts wrapped every label. One per row. */
@media(min-width:1000px) and (max-width:1199px){
  .hp-callouts{grid-template-columns:1fr}
}
/* Preparation photo: below 1000px it rendered at intrinsic portrait ratio
   and towered over the copy. Crop to a steady frame instead. */
@media(max-width:999px){
  .hp-process-photo{position:relative;min-height:0;aspect-ratio:3/2;overflow:hidden}
  .hp-process-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}
@media(max-width:680px){
  .hp-process-photo{aspect-ratio:4/3}
}
/* Finish swatches: the scroll strip showed a default scrollbar; hide it and
   snap cards, and bleed to the page edge on phones like the systems row. */
@media(max-width:999px){
  .hp-swatches{scrollbar-width:none;scroll-snap-type:x proximity}
  .hp-swatches::-webkit-scrollbar{display:none}
  .hp-swatch{scroll-snap-align:start}
}
@media(max-width:767px){
  .hp-swatches{margin-right:calc(var(--hp-page-margin) * -1);padding-right:var(--hp-page-margin)}
}
/* Quote modal: with Back hidden on step one, Continue sat flush left. */
.quote-actions [data-quote-next]{margin-left:auto}

/* ==========================================================================
   TEXT SELECTION
   A softer mint than the CTA teal (#05e5af) — the full-saturation brand colour
   reads as too loud across a highlighted paragraph, while still-branded mint
   keeps it from looking like the browser default blue.

   Replaces an orange rule left over from the previous palette, which was still
   the selection colour on the homepage.
   ========================================================================== */
::selection{
  background:#7FE8D1;
  color:#07110F;
}