/* Earth Works v12 — exact upper black header direction from client reference.
   Scope: desktop upper black bar only. Lower navigation, hero and page content stay unchanged. */

:root{
  --ew-header-top:74px;
  --ew-nav-height:58px;
  --ew-fixed-header-height:132px;
}
body{padding-top:var(--ew-fixed-header-height)!important}
.client-header{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:99999!important}
.client-header__black{height:var(--ew-header-top)!important;background:#050604!important;border-bottom:1px solid rgba(255,255,255,.14)!important}

/* Reference proportions: compact transparent logo | handwritten promise | phone | phone | dark search | quote */
.client-header__grid.client-header__grid--v11{
  height:var(--ew-header-top)!important;
  min-height:var(--ew-header-top)!important;
  display:grid!important;
  grid-template-columns:170px 252px minmax(0,1fr)!important;
  gap:18px!important;
  align-items:center!important;
  padding-top:0!important;
  padding-bottom:0!important;
}
.client-brand{display:flex!important;align-items:center!important;justify-content:flex-start!important;height:100%!important}
.client-brand__plate{
  width:164px!important;
  height:64px!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border-radius:0!important;
  overflow:visible!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
.client-brand__plate img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:left center!important;
  filter:none!important;
}

.client-slogan--v11{
  height:54px!important;
  padding:0 17px 0 2px!important;
  border-right:1px solid rgba(255,255,255,.30)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  text-align:left!important;
  min-width:0!important;
}
.client-slogan--v11 strong{
  display:block!important;
  margin:0!important;
  color:#fff!important;
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive!important;
  font-size:17px!important;
  font-weight:600!important;
  line-height:1.05!important;
  letter-spacing:-.035em!important;
  white-space:nowrap!important;
}
.client-slogan--v11 .client-slogan__covered{color:#55aa31!important;border:0!important;padding:0!important;font-size:inherit!important}
.client-slogan--v11>div.client-service-row{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:15px!important;
  margin-top:6px!important;
  width:100%!important;
}
.client-service-row span{
  color:#f4f4f1!important;
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive!important;
  font-size:12px!important;
  font-weight:600!important;
  line-height:1!important;
  white-space:nowrap!important;
  border:0!important;
  padding:0!important;
}
.client-service-row i{display:block!important;width:2px!important;height:14px!important;background:#4d9c28!important;border-radius:3px!important;opacity:.9!important}

.client-utility.client-utility--v11{
  min-width:0!important;
  height:54px!important;
  display:grid!important;
  grid-template-columns:150px 150px minmax(260px,1fr) 140px!important;
  gap:14px!important;
  align-items:center!important;
}
.client-utility--v11 .client-contact{
  height:47px!important;
  min-width:0!important;
  margin:0!important;
  padding:3px 14px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
  border-left:0!important;
  border-right:2px solid #447f29!important;
  color:#fff!important;
}
.client-utility--v11 .client-contact b{
  color:#fff!important;
  font-family:"Arial Narrow","Roboto Condensed","Segoe UI",Arial,sans-serif!important;
  font-size:16px!important;
  font-weight:850!important;
  line-height:1!important;
  letter-spacing:-.025em!important;
  white-space:nowrap!important;
}
.client-utility--v11 .client-contact small{
  display:block!important;
  margin-top:4px!important;
  color:#f0f0ed!important;
  font-family:"Arial Narrow","Roboto Condensed","Segoe UI",Arial,sans-serif!important;
  font-size:9px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}

/* Dark search treatment from the client reference. */
.client-search-button.client-search-button--v11{
  width:100%!important;
  min-width:0!important;
  height:45px!important;
  padding:5px 9px 5px 13px!important;
  border:1px solid rgba(255,255,255,.04)!important;
  border-radius:4px!important;
  background:linear-gradient(180deg,#1a1d19,#121411)!important;
  color:#fff!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}
.client-search-button.client-search-button--v11:hover{background:#1c201a!important;border-color:rgba(93,168,48,.55)!important;transform:none!important}
.client-search-button--v11 .client-search-button__label{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:3px!important;
  text-align:left!important;
  line-height:1!important;
  overflow:hidden!important;
}
.client-search-button--v11 .client-search-button__label small{
  color:#58a934!important;
  font-family:"Arial Narrow","Roboto Condensed","Segoe UI",Arial,sans-serif!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.client-search-button--v11 .client-search-button__label b{
  width:100%!important;
  color:#f1f2ef!important;
  font-family:"Segoe UI",Arial,sans-serif!important;
  font-size:10px!important;
  font-weight:500!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.client-search-button--v11 .client-search-button__icon{
  flex:0 0 31px!important;
  width:31px!important;
  height:31px!important;
  border-radius:0!important;
  background:transparent!important;
  display:grid!important;
  place-items:center!important;
}
.client-search-button--v11 .client-search-button__icon svg{width:22px!important;height:22px!important;fill:none!important;stroke:#5aa832!important;stroke-width:2.2!important}

.client-utility--v11 .client-quote-button{
  height:43px!important;
  min-height:43px!important;
  padding:0 18px!important;
  border-radius:5px!important;
  background:linear-gradient(180deg,#66ad38,#438f25)!important;
  color:#fff!important;
  font-family:"Arial Narrow","Roboto Condensed","Segoe UI",Arial,sans-serif!important;
  font-size:16px!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16)!important;
}
.client-help-link,.client-search-row{display:none!important}

/* Lower navigation is intentionally untouched except for header offset. */
.client-nav{height:var(--ew-nav-height)!important}
.client-nav__inner{height:var(--ew-nav-height)!important}

@media(max-width:1500px){
  .client-header__grid.client-header__grid--v11{grid-template-columns:154px 232px minmax(0,1fr)!important;gap:14px!important}
  .client-brand__plate{width:148px!important;height:58px!important}
  .client-slogan--v11{padding-right:13px!important}
  .client-slogan--v11 strong{font-size:15px!important}
  .client-service-row span{font-size:11px!important}
  .client-utility.client-utility--v11{grid-template-columns:132px 132px minmax(235px,1fr) 126px!important;gap:10px!important}
  .client-utility--v11 .client-contact{padding-inline:8px!important}
  .client-utility--v11 .client-contact b{font-size:14px!important}
  .client-utility--v11 .client-quote-button{font-size:14px!important}
}
@media(max-width:1180px){
  :root{--ew-header-top:72px;--ew-fixed-header-height:130px}
  .client-header__grid.client-header__grid--v11{grid-template-columns:136px 195px minmax(0,1fr)!important;gap:10px!important}
  .client-brand__plate{width:130px!important;height:55px!important}
  .client-slogan--v11 strong{font-size:13px!important}.client-service-row span{font-size:9px!important}.client-service-row{gap:9px!important}
  .client-utility.client-utility--v11{grid-template-columns:110px 110px minmax(200px,1fr) 112px!important;gap:7px!important}
  .client-utility--v11 .client-contact b{font-size:12px!important}.client-utility--v11 .client-contact small{font-size:8px!important}
  .client-search-button.client-search-button--v11{height:42px!important}.client-utility--v11 .client-quote-button{height:42px!important;min-height:42px!important;font-size:12px!important}
}
@media(max-width:900px){
  :root{--ew-header-top:76px;--ew-fixed-header-height:76px}
  body{padding-top:76px!important}
  .client-header__black{height:76px!important}
  .client-header__grid.client-header__grid--v11{height:76px!important;min-height:76px!important;grid-template-columns:44px 1fr auto!important;gap:12px!important}
  .client-brand__plate{width:150px!important;height:60px!important}
  .client-slogan--v11,.client-utility.client-utility--v11{display:none!important}
  .client-nav{position:fixed!important;top:76px!important;left:0!important;right:0!important;bottom:0!important;height:auto!important;background:#fff!important}
  .client-nav__inner{height:auto!important;display:block!important;padding:18px!important}
}

/* v12 approved-header micro refinements — Sept 11 */
/* Remove only the separator between the promise block and the phone group. */
.client-slogan--v11{
  border-right:0!important;
  padding-right:12px!important;
}

/* Exact requested wording treatment. */
.client-slogan--v11 strong{
  letter-spacing:-.025em!important;
}
.client-slogan--v11 .client-slogan__covered{
  color:#58b331!important;
}

/* Curved green underline under Pickup / Delivery / Install. */
.client-service-row span{
  position:relative!important;
  padding-bottom:5px!important;
}
.client-service-row span::after{
  content:""!important;
  position:absolute!important;
  left:3%!important;
  right:3%!important;
  bottom:0!important;
  height:5px!important;
  border-bottom:2px solid #58b331!important;
  border-radius:0 0 50% 50%!important;
  transform:rotate(-1.5deg)!important;
  opacity:.95!important;
}

/* Slightly lighter catalogue search while keeping the approved dark header. */
.client-search-button.client-search-button--v11{
  background:linear-gradient(180deg,#282c27,#20231f)!important;
  border-color:rgba(255,255,255,.09)!important;
}
.client-search-button.client-search-button--v11:hover{
  background:linear-gradient(180deg,#2d322c,#252924)!important;
  border-color:rgba(88,179,49,.60)!important;
}

/* New expanded hero artwork fills the SAME hero real estate with no blurred side treatment. */
.client-home-hero{
  background:#dfe8d8!important;
}
.client-home-hero::before{
  content:none!important;
  display:none!important;
  filter:none!important;
}
.client-home-hero img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 46%!important;
  max-height:none!important;
}


/* =========================================================
   V12 final micro-tweaks — header spacing/search + project arrows only
   ========================================================= */
@media (min-width:1501px){
  /* Keep the approved header structure, but reserve breathing room before the phone group. */
  .client-header__grid.client-header__grid--v11{
    grid-template-columns:170px 242px minmax(0,1fr)!important;
    gap:20px!important;
  }
  .client-utility.client-utility--v11{
    grid-template-columns:150px 150px 320px 140px!important;
    gap:14px!important;
    justify-content:end!important;
  }
}
@media (min-width:1181px) and (max-width:1500px){
  .client-utility.client-utility--v11{
    grid-template-columns:132px 132px 270px 126px!important;
    justify-content:end!important;
  }
}

/* Requested white catalogue search while retaining the black utility header. */
.client-search-button.client-search-button--v11{
  background:#fff!important;
  border-color:#e3e6df!important;
  color:#171914!important;
  box-shadow:0 2px 8px rgba(0,0,0,.14)!important;
}
.client-search-button.client-search-button--v11:hover{
  background:#fff!important;
  border-color:#78aa2d!important;
}
.client-search-button--v11 .client-search-button__label small{color:#5b931b!important}
.client-search-button--v11 .client-search-button__label b{color:#252922!important}
.client-search-button--v11 .client-search-button__icon{
  background:#edf3e1!important;
  border-radius:5px!important;
}
.client-search-button--v11 .client-search-button__icon svg{stroke:#5f951c!important}

/* Browse-by-project controls sit opposite the heading, not below the subheader. */
.client-project-section .client-section-heading--project{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-areas:"title controls" "copy controls"!important;
  column-gap:28px!important;
  row-gap:8px!important;
  align-items:center!important;
  margin-bottom:24px!important;
}
.client-project-section .client-section-heading--project>div:first-child{grid-area:title!important}
.client-project-section .client-section-heading--project>p{
  grid-area:copy!important;
  max-width:740px!important;
  margin:0!important;
}
.client-project-section .client-section-heading--project .project-carousel__controls{
  grid-area:controls!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:9px!important;
  margin:0!important;
  align-self:center!important;
}
.client-project-section .project-carousel--project .project-carousel__controls{position:static!important}
@media(max-width:900px){
  .client-project-section .client-section-heading--project{
    grid-template-columns:1fr auto!important;
    grid-template-areas:"title controls" "copy copy"!important;
    column-gap:14px!important;
  }
}
@media(max-width:620px){
  .client-project-section .client-section-heading--project{
    grid-template-columns:1fr!important;
    grid-template-areas:"title" "copy" "controls"!important;
  }
  .client-project-section .client-section-heading--project .project-carousel__controls{justify-content:flex-start!important;margin-top:4px!important}
}

/* Final alignment fix: center the service row directly beneath the promise line. */
.client-slogan--v11{
  align-items:center!important;
  text-align:center!important;
}
.client-slogan--v11>div.client-service-row{
  justify-content:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}