/* ==========================================================================
   Cleveland Cabinets - Location Page Design System   v2.0
   File: cle-cabinets.css   (upload to the CHILD THEME root)
   Scoped under .cle-page so it can never touch the theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. THEME UNWRAP (not scoped, targets the body class the template adds)
   -------------------------------------------------------------------------- */
body.cle-fullbleed{ overflow-x:hidden; }
body.cle-fullbleed #content > .ast-container,
body.cle-fullbleed .site-content > .ast-container{
  max-width:100% !important; width:100% !important;
  padding-left:0 !important; padding-right:0 !important; display:block !important;
}
body.cle-fullbleed #primary,
body.cle-fullbleed .site-main,
body.cle-fullbleed .content-area{
  margin:0 !important; padding:0 !important; width:100% !important;
  max-width:100% !important; border:0 !important;
}
body.cle-fullbleed .ast-article-single,
body.cle-fullbleed .ast-article-post,
body.cle-fullbleed .ast-article-inner,
body.cle-fullbleed .entry-content,
body.cle-fullbleed .entry-content.clear{
  margin:0 !important; padding:0 !important; border:0 !important;
  max-width:100% !important; width:100% !important;
  background:transparent !important; box-shadow:none !important;
}
body.cle-fullbleed .entry-content > *{ max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
body.cle-fullbleed .entry-header,
body.cle-fullbleed #secondary,
body.cle-fullbleed .ast-single-entry-banner{ display:none !important; }
body.cle-fullbleed .hentry{ margin-bottom:0 !important; }

/* --------------------------------------------------------------------------
   1. TOKENS + BASE
   -------------------------------------------------------------------------- */
.cle-page{
  --black:#111111; --charcoal:#2B2B2B; --iron:#1F1F1F; --white:#FFFFFF;
  --green:#61A747; --green-dark:#4E8A39; --green-deep:#589B40; --green-light:#6BB350;
  --forest:#2E5A44; --green-tint:#EEF6EA; --green-line:#D3E7CB;
  --ink:#1D2939; --stone:#5B6470; --mist:#F6F7F5; --line:#E4E7E2; --gold:#F2B01E;
  --radius:14px; --radius-sm:9px; --radius-pill:50px;
  --shadow:0 10px 30px rgba(17,17,17,.08);
  --shadow-lg:0 22px 50px rgba(17,17,17,.14);
  --font-display:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter","Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-family:var(--font-body); color:var(--ink);
  font-size:16px; line-height:1.65; width:100%; overflow-x:clip;
}
.cle-page *,.cle-page *::before,.cle-page *::after{ box-sizing:border-box; }
.cle-page img{ max-width:100%; height:auto; display:block; }
.cle-page h1,.cle-page h2,.cle-page h3,.cle-page h4{
  font-family:var(--font-display); color:var(--charcoal);
  margin:0 0 .5em; letter-spacing:-.01em; line-height:1.15;
}
.cle-page p{ margin:0 0 1em; }
.cle-page h1,.cle-page .cle-h1{ font-size:clamp(2.2rem,3.9vw,3.05rem); font-weight:800; line-height:1.12; }
.cle-page h2{ font-size:clamp(1.5rem,2.9vw,2.05rem); font-weight:800; }
.cle-page h3{ font-size:1.12rem; font-weight:700; line-height:1.3; }
.cle-page h1 .hl,.cle-page h2 .hl{ color:var(--green); }
.cle-page p > a,.cle-page li > a,.cle-page .cle-route__body a,.cle-page .cle-seo__body a{
  color:var(--green-dark); text-decoration:underline;
}
.cle-page .cle-container{ width:100%; max-width:1140px; margin:0 auto; padding:0 24px; }
.cle-page .cle-container--wide{ max-width:1340px; padding:0 20px; }

/* --------------------------------------------------------------------------
   2. SECTIONS
   -------------------------------------------------------------------------- */
.cle-page .cle-section{ padding:78px 0; background:#fdfdfd; }
.cle-page .cle-section--tint{
  background:var(--green-tint);
  border-top:1px solid var(--green-line); border-bottom:1px solid var(--green-line);
}
.cle-page .cle-section--mist{ background:var(--mist); }
.cle-page .cle-section--tight{ padding:56px 0; }

.cle-page .cle-section-head{ text-align:center; max-width:820px; margin:0 auto 42px; }
.cle-page .cle-section-head h2{ margin-bottom:.35em; }
.cle-page .cle-section-head p{ color:var(--stone); font-size:1.02rem; margin:0; }

.cle-page .cle-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; color:var(--forest);
  background:var(--green-tint); border:1px solid var(--green-line);
  border-radius:99px; padding:7px 16px; margin-bottom:16px;
}
.cle-page .cle-eyebrow svg{ width:15px; height:15px; flex:none; }
.cle-page .cle-section--tint .cle-eyebrow{ background:var(--white); }

.cle-page .cle-rule{ display:flex; align-items:center; justify-content:center; margin:20px auto 0; max-width:420px; }
.cle-page .cle-rule::before,.cle-page .cle-rule::after{ content:""; flex:1; height:2px; background:var(--green); }
.cle-page .cle-rule span{ width:18px; height:18px; border-radius:50%; background:var(--green); margin:0 10px; position:relative; flex:none; }
.cle-page .cle-rule span::after{ content:""; position:absolute; inset:5px; border-radius:50%; background:var(--white); }
.cle-page .cle-section--tint .cle-rule span::after{ background:var(--green-tint); }
.cle-page .cle-section--mist .cle-rule span::after{ background:var(--mist); }

/* --------------------------------------------------------------------------
   3. BUTTONS
   -------------------------------------------------------------------------- */
.cle-page a.btn,.cle-page .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:1rem; line-height:1;
  padding:15px 28px; border-radius:var(--radius-sm); border:2px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.cle-page .btn svg{ width:18px; height:18px; flex:none; }
.cle-page .btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.cle-page .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--green-line); }
.cle-page a.btn--primary{ background:var(--green); color:#fff; border-color:var(--green); }
.cle-page a.btn--primary:hover{ background:var(--green-dark); border-color:var(--green-dark); color:#fff; }
.cle-page a.btn--outline{ background:transparent; color:var(--charcoal); border-color:var(--charcoal); }
.cle-page a.btn--outline:hover{ background:var(--charcoal); color:#fff; }
.cle-page a.btn--ghost{ background:var(--white); color:var(--green-dark); border-color:var(--line); }
.cle-page a.btn--ghost:hover{ border-color:var(--green); background:var(--green-tint); color:var(--green-dark); }
.cle-page a.btn--white,
.cle-page a.btn--wline{
  font-family:var(--font-body);
  font-weight:600;
  font-size:1rem;
  letter-spacing:0;
  border-radius:var(--radius-pill);
  padding:16px 36px;
}
/* Primary pill: white with the soft green gradient bleeding to the right */
.cle-page a.btn--white{
  background:linear-gradient(100deg,#FFFFFF 0%,#FFFFFF 52%,#E4F2DC 100%);
  color:var(--charcoal);
  border-color:transparent;
  box-shadow:0 8px 20px rgba(17,17,17,.14);
}
.cle-page a.btn--white:hover{
  background:#FFFFFF;
  color:var(--green-dark);
  border-color:transparent;
  box-shadow:0 13px 28px rgba(17,17,17,.20);
  transform:translateY(-2px);
}
.cle-page a.btn--white:active{ transform:translateY(0); box-shadow:0 4px 12px rgba(17,17,17,.18); }
.cle-page a.btn--white:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.85); }

/* Secondary pill: transparent with a white outline */
.cle-page a.btn--wline{
  background:transparent;
  color:#FFFFFF;
  border-color:rgba(255,255,255,.92);
}
.cle-page a.btn--wline:hover{
  background:#FFFFFF;
  color:var(--charcoal);
  border-color:#FFFFFF;
  transform:translateY(-2px);
  box-shadow:0 11px 24px rgba(17,17,17,.16);
}
.cle-page a.btn--wline:active{ transform:translateY(0); box-shadow:none; }
.cle-page a.btn--wline:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.55); }
.cle-page .btn--full{ width:100%; }

/* --------------------------------------------------------------------------
   4. CTA CLUSTER  (big phone row, then two compact cards side by side)
   -------------------------------------------------------------------------- */
.cle-page .cle-cta{ margin:26px 0 18px; max-width:620px; }
.cle-page a.cle-cta__phone{
  display:flex; align-items:center; gap:15px; width:100%;
  background:var(--green); color:#fff; border-radius:var(--radius);
  padding:16px 20px; text-decoration:none;
  box-shadow:0 12px 26px rgba(97,167,71,.28);
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.cle-page a.cle-cta__phone:hover{ background:var(--green-dark); color:#fff; transform:translateY(-2px); }
.cle-page a.cle-cta__phone:active{ background:var(--green-dark); color:#fff; transform:translateY(0); }
.cle-page a.cle-cta__phone:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--green-line); }
.cle-page a.cle-cta__phone .cle-cta__eyebrow,
.cle-page a.cle-cta__phone .cle-cta__label,
.cle-page a.cle-cta__phone .cle-cta__ico{ color:#fff; }
.cle-page .cle-cta__ico{
  width:46px; height:46px; flex:none; border-radius:11px;
  background:rgba(255,255,255,.20); display:flex; align-items:center; justify-content:center;
}
.cle-page .cle-cta__ico svg{ width:22px; height:22px; }
.cle-page .cle-cta__txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.cle-page .cle-cta__eyebrow{
  font-family:var(--font-display); font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; opacity:.92; line-height:1;
}
.cle-page .cle-cta__label{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.05rem,2.2vw,1.35rem); line-height:1.15; }

.cle-page .cle-cta__pair{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.cle-page a.cle-cta__card{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 13px; text-decoration:none; color:var(--charcoal);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.cle-page a.cle-cta__card:hover{ transform:translateY(-2px); border-color:var(--green); box-shadow:var(--shadow); color:var(--charcoal); }
.cle-page a.cle-cta__card:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--green-line); }
.cle-page a.cle-cta__card .cle-cta__ico{ width:36px; height:36px; border-radius:9px; background:var(--green-tint); color:var(--green-dark); }
.cle-page a.cle-cta__card .cle-cta__ico svg{ width:18px; height:18px; }
.cle-page .cle-cta__ctxt{ display:flex; flex-direction:column; min-width:0; }
.cle-page a.cle-cta__card .cle-cta__ctitle{ font-family:var(--font-display); font-weight:700; font-size:.86rem; line-height:1.28; color:var(--charcoal); }
.cle-page a.cle-cta__card .cle-cta__csub{ font-size:.74rem; color:var(--stone); line-height:1.35; }
.cle-page .cle-cta__note{ font-size:.83rem; color:var(--stone); margin:12px 0 0; }

/* CTA cluster centred inside the green bands */
.cle-page .cle-band .cle-cta{ margin:6px auto 18px; }
.cle-page .cle-cta--ondark{ text-align:left; }
.cle-page .cle-band .cle-cta__note{ display:none; }
/* inside the green CTA bands, the phone button uses #4f8a3a on hover and active */
.cle-page .cle-band a.cle-cta__phone{ background:#4f8a3a; box-shadow:0 12px 26px rgba(79,138,58,.30); }
.cle-page .cle-band a.cle-cta__phone:hover,
.cle-page .cle-band a.cle-cta__phone:active{ background:#4f8a3a; color:#fff; }

/* --------------------------------------------------------------------------
   5. CHECKLIST + PROOF
   -------------------------------------------------------------------------- */
.cle-page .cle-check{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:11px; }
.cle-page .cle-check li{ position:relative; padding-left:36px; font-size:.97rem; line-height:1.55; }
.cle-page .cle-check li::before{
  content:""; position:absolute; left:0; top:2px; width:24px; height:24px; border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}
.cle-page .cle-proof{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:.93rem; font-weight:600; color:var(--charcoal); margin:16px 0 0;
}
.cle-page .cle-stars{ color:var(--gold); letter-spacing:2px; font-size:1rem; line-height:1; }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.cle-page .cle-hero{
  position:relative; padding:52px 0 82px;
  background:linear-gradient(180deg,#F1F8ED 0%,#F7FBF5 40%,var(--white) 100%);
  overflow:hidden; isolation:isolate;
}
.cle-page .cle-hero__bg{ display:none !important; }
.cle-page .cle-hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(97,167,71,.14) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(97,167,71,.14) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 55%,transparent 92%);
          mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 55%,transparent 92%);
}
.cle-page .cle-hero > .cle-container{ position:relative; z-index:2; }
.cle-page .cle-hero__grid{ display:grid; grid-template-columns:1.06fr .94fr; gap:46px; align-items:center; }
.cle-page .cle-hero__sub{ font-size:.97rem; color:var(--stone); max-width:52ch; }
.cle-page .cle-hero .cle-eyebrow{
  font-size:12px; letter-spacing:.06em; text-transform:none;
  white-space:nowrap; max-width:100%;
}
@media (max-width:1240px){ .cle-page .cle-hero .cle-eyebrow{ font-size:11px; letter-spacing:.04em; } }
@media (max-width:1120px){ .cle-page .cle-hero .cle-eyebrow{ font-size:10px; letter-spacing:.02em; } }

.cle-page a.cle-visitbadge{
  display:flex; align-items:center; gap:13px;
  background:rgba(238,246,234,.92); border:1px solid var(--green-line);
  border-radius:var(--radius); padding:13px 17px; margin:0 0 24px;
  text-decoration:none; max-width:620px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.cle-page a.cle-visitbadge:hover{ transform:translateY(-2px); border-color:var(--green); box-shadow:var(--shadow); }
.cle-page .cle-visitbadge__ico{
  width:40px; height:40px; flex:none; border-radius:11px; background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.cle-page .cle-visitbadge__ico svg{ width:20px; height:20px; }
.cle-page .cle-visitbadge__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cle-page .cle-visitbadge__eyebrow{
  font-family:var(--font-display); font-size:.69rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.13em; color:var(--forest); line-height:1;
}
.cle-page .cle-visitbadge__main{ font-family:var(--font-display); font-weight:700; font-size:.95rem; line-height:1.35; color:var(--charcoal); }
.cle-page .cle-visitbadge__arrow{ margin-left:auto; color:var(--green-dark); font-size:1.25rem; font-weight:700; flex:none; }

.cle-page .cle-hero__media{ position:relative; }
.cle-page .cle-heromedia__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cle-page .cle-heromedia__col{ display:flex; flex-direction:column; gap:12px; }
.cle-page .cle-heromedia__col--offset{ margin-top:38px; }
.cle-page .cle-heromedia__grid img{ width:100%; border-radius:14px; object-fit:cover; box-shadow:var(--shadow-lg); background:var(--mist); border:1px solid var(--green); }
.cle-page .cle-heromedia__col img:nth-child(1){ aspect-ratio:4/5; }
.cle-page .cle-heromedia__col img:nth-child(2){ aspect-ratio:4/3; }
.cle-page .cle-heromedia__col--offset img:nth-child(1){ aspect-ratio:4/3; }
.cle-page .cle-heromedia__col--offset img:nth-child(2){ aspect-ratio:4/5; }

.cle-page .cle-badge{
  position:absolute; z-index:3; display:flex; align-items:center; gap:11px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 17px 12px 14px; box-shadow:var(--shadow-lg);
}
.cle-page .cle-badge--quality{ left:-18px; bottom:-18px; transform:rotate(-1.5deg); }
.cle-page .cle-badge--flow{ display:none; }
.cle-page .cle-badge--stat{ right:-14px; top:-16px; transform:rotate(1.5deg); }
.cle-page .cle-badge__ico{
  width:36px; height:36px; border-radius:10px; background:var(--green-tint);
  color:var(--green-dark); display:flex; align-items:center; justify-content:center; flex:none;
}
.cle-page .cle-badge__ico svg{ width:18px; height:18px; }
.cle-page .cle-badge strong{ display:block; font-family:var(--font-display); font-weight:800; font-size:.95rem; color:var(--charcoal); line-height:1.2; }
.cle-page .cle-badge span span{ font-size:.77rem; color:var(--stone); }
.cle-page .cle-badge--stat strong{ color:var(--green); font-weight:900; font-size:1.02rem; }

/* --------------------------------------------------------------------------
   7. TRUST / BADGES CAROUSEL  (green band, bare logos, arrows, auto-advance)
   Reused by the cabinet doors carousel below via .cle-carousel.
   -------------------------------------------------------------------------- */
.cle-page .cle-badgeband{ background:var(--green); padding:34px 0; }
/* arrows sit clear of the track, so the track only gets a small inner gutter */
.cle-page .cle-carousel{ position:relative; margin:0 58px; }
.cle-page .cle-carousel__track{
  display:flex; gap:18px; align-items:stretch;
  overflow-x:auto; padding:2px; margin:0;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; scroll-behavior:smooth;
}
.cle-page .cle-carousel__track::-webkit-scrollbar{ display:none; }

/* white chips, JPG logos read cleanly on green. 4 wide, no leftover gap */
.cle-page .cle-badges .cle-carousel__item{
  flex:0 0 calc((100% - 3*18px)/4);
  scroll-snap-align:start;
  display:flex; align-items:center; justify-content:center;
  min-height:104px; padding:10px 14px;
  background:#fdfdfd; border-radius:12px; text-decoration:none;
  box-shadow:0 6px 16px rgba(17,17,17,.10);
  transition:transform .18s ease, box-shadow .18s ease;
  overflow:hidden;
}
.cle-page .cle-badges a.cle-carousel__item:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(17,17,17,.16); }
.cle-page .cle-badges .cle-carousel__item img{
  width:100%; height:84px; max-width:100%; object-fit:contain;
}

/* round arrow buttons */
.cle-page .cle-carousel__nav{
  position:absolute; top:50%; margin-top:-23px;
  width:46px; height:46px; min-width:46px; min-height:46px;
  padding:0; flex:none; border-radius:50%;
  border:0; cursor:pointer; z-index:5;
  display:flex; align-items:center; justify-content:center;
  background:var(--green); color:#ffffff;
  box-shadow:0 8px 18px rgba(17,17,17,.28);
  transition:transform .18s ease, background .18s ease;
}
.cle-page .cle-carousel__nav svg{ width:20px; height:20px; display:block; stroke:#ffffff; }
.cle-page .cle-carousel__nav:hover{ background:var(--green-dark); }
.cle-page .cle-carousel__nav:active{ transform:scale(.92); }
.cle-page .cle-carousel__nav--prev{ left:-52px; }
.cle-page .cle-carousel__nav--next{ right:-52px; }

/* --------------------------------------------------------------------------
   8. ABOUT
   -------------------------------------------------------------------------- */
.cle-page .cle-about{ display:grid; grid-template-columns:1fr 1.08fr; gap:46px; align-items:center; }
.cle-page .cle-about__media{ display:flex; flex-direction:column; gap:12px; }
/* height auto so no face or edge is ever cropped */
.cle-page .cle-about__media img{
  width:100%; height:auto; object-fit:contain;
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
}
.cle-page .cle-about__caption{
  margin:0; font-size:.85rem; line-height:1.55; font-style:italic; color:var(--stone);
  border-left:3px solid var(--green); padding-left:12px;
}
.cle-page .cle-about__content{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
/* stops the eyebrow pill stretching the full column width */
.cle-page .cle-about__content > .cle-eyebrow{ align-self:flex-start; width:auto; }
.cle-page .cle-about__content > h2,
.cle-page .cle-about__content > p,
.cle-page .cle-about__content > .cle-stats,
.cle-page .cle-about__content > .cle-cta{ width:100%; }
.cle-page .cle-about h2{ margin-bottom:.45em; }

.cle-page .cle-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:20px 0 4px; }
.cle-page .cle-stat{ background:var(--white); border:1px solid var(--green-line); border-radius:12px; padding:12px 8px; text-align:center; }
.cle-page .cle-stat strong{ display:block; font-family:var(--font-display); font-weight:900; font-size:1.2rem; color:var(--green); line-height:1.15; }
.cle-page .cle-stat span{ font-size:.74rem; color:var(--stone); line-height:1.3; display:block; }

/* --------------------------------------------------------------------------
   9. PORTFOLIO + LIGHTBOX
   -------------------------------------------------------------------------- */
.cle-page .cle-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cle-page .cle-gallery figure{ margin:0; }
.cle-page .cle-gallery img{
  width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:10px; cursor:zoom-in;
  border:1px solid var(--green);
  transition:transform .35s ease,box-shadow .25s ease;
}
.cle-page .cle-gallery img:hover{ transform:scale(1.03); box-shadow:var(--shadow-lg); }
.cle-lb{ position:fixed; inset:0; z-index:99999; background:rgba(17,17,17,.92); display:none; align-items:center; justify-content:center; }
.cle-lb.open{ display:flex; }
.cle-lb img{ max-width:92vw; max-height:86vh; border-radius:10px; }
.cle-lb button{ position:absolute; background:rgba(255,255,255,.12); color:#fff; border:0; cursor:pointer; width:46px; height:46px; border-radius:50%; font-size:26px; line-height:1; }
.cle-lb button:hover{ background:#61A747; }
.cle-lb__close{ top:22px; right:22px; }
.cle-lb__prev{ left:18px; top:50%; transform:translateY(-50%); }
.cle-lb__next{ right:18px; top:50%; transform:translateY(-50%); }

/* --------------------------------------------------------------------------
   10. CABINET DOORS  (desktop: static 6-col grid, no arrows; mobile: looping carousel)
   -------------------------------------------------------------------------- */
.cle-page .cle-doors{ margin:0; }
.cle-page .cle-doors .cle-carousel__track{
  display:grid; grid-template-columns:repeat(6,1fr); gap:16px;
  overflow:visible; scroll-snap-type:none;
}
.cle-page .cle-doors .cle-carousel__nav{ display:none; }   /* no arrows on desktop */
.cle-page a.cle-door{
  display:block; background:#fff; border:1px solid var(--line); border-radius:12px;
  overflow:hidden; text-decoration:none; min-width:0;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.cle-page a.cle-door:hover{ transform:translateY(-3px); border-color:var(--green); box-shadow:var(--shadow-lg); }
/* full white background behind each door, shadow and border unchanged */
.cle-page .cle-door img{ width:100%; aspect-ratio:3/4; object-fit:contain; background:#ffffff; padding:14px 10px; }
.cle-page .cle-door h3.cle-door__name{
  display:block; text-align:center; padding:6px 6px 14px; margin:0;
  font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--charcoal);
  white-space:nowrap;
}
.cle-page a.cle-door:hover h3.cle-door__name{ color:var(--green-dark); }
.cle-page .cle-doors__cta{ text-align:center; margin-top:30px; }

/* --------------------------------------------------------------------------
   11. COUNTERTOP/* --------------------------------------------------------------------------
   11. COUNTERTOP/* --------------------------------------------------------------------------
   11. COUNTERTOP COLUMNS  (green cards on a white section)
   -------------------------------------------------------------------------- */
.cle-page .cle-tops{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cle-page .cle-top{
  background:var(--green); border:1px solid var(--green); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.cle-page .cle-top:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.cle-page .cle-top__head{ padding:20px 20px 0; }
.cle-page .cle-top__head h3{ margin:0; color:#fff; }
.cle-page .cle-top img{ width:100%; aspect-ratio:16/10; object-fit:cover; margin-top:14px; background:var(--mist); }
.cle-page .cle-top__body{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; gap:14px; }
.cle-page .cle-top__body p{ margin:0; color:rgba(255,255,255,.94); font-size:.94rem; }
.cle-page a.cle-top__btn{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:.9rem; line-height:1;
  padding:12px 22px; border-radius:var(--radius-sm);
  background:#fff; color:var(--green-dark); border:2px solid #fff; text-decoration:none;
  transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.cle-page a.cle-top__btn:hover{ transform:translateY(-2px); background:var(--green-tint); color:var(--green-dark); box-shadow:var(--shadow); }
.cle-page a.cle-top__btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.6); }

/* --------------------------------------------------------------------------
   12. SERVICE/* --------------------------------------------------------------------------
   12. SERVICE CARDS (no images)
   -------------------------------------------------------------------------- */
.cle-page .cle-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cle-page .cle-card{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:24px 22px; display:flex; flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.cle-page .cle-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--green-line); }
.cle-page .cle-card__chip{
  width:44px; height:44px; border-radius:12px; margin-bottom:14px;
  background:var(--green-tint); color:var(--green-dark); border:1px solid var(--green-line);
  display:flex; align-items:center; justify-content:center;
}
.cle-page .cle-card__chip svg{ width:22px; height:22px; }
.cle-page .cle-card h3{ margin-bottom:.45em; }
.cle-page .cle-card p{ color:var(--stone); font-size:.94rem; margin-bottom:16px; }
.cle-page .cle-card .btn{ margin-top:auto; align-self:flex-start; padding:11px 20px; font-size:.88rem; }

/* --------------------------------------------------------------------------
   13. DRIVE / DIRECTIONS
   -------------------------------------------------------------------------- */
.cle-page .cle-drive{ display:grid; grid-template-columns:1.25fr .75fr; gap:24px; align-items:stretch; }
.cle-page .cle-map{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; min-height:370px; box-shadow:var(--shadow); }
.cle-page .cle-map iframe{ width:100%; height:100%; min-height:370px; border:0; display:block; }
.cle-page .cle-facts{ display:grid; gap:11px; align-content:start; }
.cle-page .cle-fact{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:13px 15px; }
.cle-page .cle-fact__ico{ width:38px; height:38px; border-radius:10px; flex:none; background:var(--green-tint); color:var(--green-dark); display:flex; align-items:center; justify-content:center; }
.cle-page .cle-fact__ico svg{ width:19px; height:19px; }
.cle-page .cle-fact__l{ display:block; font-size:.73rem; text-transform:uppercase; letter-spacing:.1em; color:var(--stone); font-weight:700; }
.cle-page .cle-fact__v{ display:block; font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--charcoal); line-height:1.3; }
.cle-page .cle-route{ margin-top:20px; border-top:1px solid var(--green-line); }
.cle-page .cle-route details{ border-bottom:1px solid var(--green-line); }
.cle-page .cle-route summary{ cursor:pointer; list-style:none; padding:15px 34px 15px 2px; font-family:var(--font-display); font-weight:700; font-size:.98rem; color:var(--charcoal); position:relative; }
.cle-page .cle-route summary::-webkit-details-marker{ display:none; }
.cle-page .cle-route summary::after{ content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); color:var(--green); font-size:1.35rem; font-weight:700; line-height:1; }
.cle-page .cle-route details[open] summary::after{ content:"\2212"; }
.cle-page .cle-route__body{ padding:0 0 17px; color:var(--stone); font-size:.94rem; }
.cle-page .cle-drive__note{ text-align:center; color:var(--stone); font-size:.86rem; margin-top:16px; }

/* --------------------------------------------------------------------------
   14. QUIET SEO TOGGLES  (tiny 12px accordion, H2 forced inline & small)
   -------------------------------------------------------------------------- */
.cle-page .cle-seo{ padding:30px 0; background:#fdfdfd; }
.cle-page .cle-seo .cle-container{ max-width:820px; }
.cle-page .cle-seo details{ border-bottom:1px solid var(--line); }
.cle-page .cle-seo summary{
  cursor:pointer; list-style:none; display:block;
  padding:10px 22px 10px 0; position:relative;
}
.cle-page .cle-seo summary::-webkit-details-marker{ display:none; }
.cle-page .cle-seo summary h2{
  display:inline !important;
  margin:0 !important; padding:0 !important;
  font-family:var(--font-body) !important;
  font-size:12px !important; line-height:1.5 !important;
  font-weight:500 !important; color:var(--stone) !important;
  letter-spacing:0 !important; text-transform:none !important;
}
.cle-page .cle-seo summary::after{
  content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%);
  font-size:14px; color:var(--stone); line-height:1;
}
.cle-page .cle-seo details[open] summary::after{ content:"\2212"; }
.cle-page .cle-seo summary:hover h2{ color:var(--green-dark) !important; }
.cle-page .cle-seo__body{ padding:2px 0 16px; font-size:.93rem; color:var(--stone); }
.cle-page .cle-seo__body p{ margin:0 0 .8em; }
.cle-page .cle-seo__body p:last-child{ margin-bottom:0; }

/* --------------------------------------------------------------------------
   15. GREEN CTA/* --------------------------------------------------------------------------
   15. GREEN CTA/* --------------------------------------------------------------------------
   15. GREEN CTA BANDS
   -------------------------------------------------------------------------- */
.cle-page .cle-bandsec{ padding:0 0 78px; background:#fdfdfd; }
/* boxed band stretches closer to the edges than the normal 1140px content */
.cle-page .cle-bandsec > .cle-container{ max-width:1300px; }
.cle-page .cle-band{
  position:relative;
  background:linear-gradient(160deg,var(--green-light) 0%,var(--green) 55%,var(--green-deep) 100%);
  padding:58px 24px; border-radius:16px; text-align:center; overflow:hidden;
}
.cle-page .cle-band--full{ border-radius:0; padding:64px 0; margin:0; width:100%; }
.cle-page .cle-band--full > .cle-container{ max-width:1300px; }
.cle-page .cle-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 260px at 15% 0%,rgba(255,255,255,.16),transparent 65%);
}
.cle-page .cle-band > *,.cle-page .cle-band .cle-container{ position:relative; z-index:1; }
.cle-page .cle-band .cle-container{ text-align:center; }
.cle-page .cle-band h2{ color:#fff; font-size:clamp(1.75rem,3.8vw,2.6rem); font-weight:800; margin-bottom:.35em; }
.cle-page .cle-band p{ color:rgba(255,255,255,.95); font-size:1.02rem; max-width:720px; margin:0 auto 24px; }
.cle-page .cle-band__btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:18px; }
.cle-page .cle-band__foot{ color:rgba(255,255,255,.9); font-size:.93rem; margin:0; }

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.cle-page .cle-faq{ max-width:900px; margin:0 auto; display:grid; gap:13px; }
.cle-page .cle-faq details{ background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:border-color .2s ease,box-shadow .2s ease; }
.cle-page .cle-faq details[open]{ border-color:var(--green-line); box-shadow:var(--shadow); }
.cle-page .cle-faq summary{ cursor:pointer; list-style:none; padding:19px 54px 19px 21px; position:relative; }
.cle-page .cle-faq summary::-webkit-details-marker{ display:none; }
.cle-page .cle-faq summary h3{ margin:0; font-family:var(--font-display); font-weight:700; font-size:1.02rem; line-height:1.4; color:var(--charcoal); }
.cle-page .cle-faq summary::after{
  content:""; position:absolute; right:24px; top:25px; width:11px; height:11px;
  border-right:2.5px solid var(--green); border-bottom:2.5px solid var(--green);
  transform:rotate(45deg); transition:transform .2s ease;
}
.cle-page .cle-faq details[open] summary::after{ transform:rotate(-135deg); top:29px; }
.cle-page .cle-faq summary:hover h3{ color:var(--green-dark); }
.cle-page .cle-faq__a{ padding:0 21px 21px; color:var(--stone); font-size:.95rem; line-height:1.7; }
.cle-page .cle-faq__a p:last-child{ margin-bottom:0; }

/* Elementor shortcode wrappers */
.cle-page .cle-embed{ width:100%; }

/* --------------------------------------------------------------------------
   17. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .cle-page .cle-section{ padding:60px 0; }
  .cle-page .cle-bandsec{ padding-bottom:60px; }
  .cle-page .cle-hero{ padding:38px 0 64px; }
  .cle-page .cle-hero__grid,
  .cle-page .cle-about{ grid-template-columns:1fr; gap:34px; }
  .cle-page .cle-about__media{ order:-1; }
  .cle-page .cle-about__media img{ max-height:none; }
  .cle-page .cle-cards,
  .cle-page .cle-tops{ grid-template-columns:repeat(2,1fr); }
  .cle-page .cle-container--wide{ max-width:1140px; }
  .cle-page .cle-drive{ grid-template-columns:1fr; }
  .cle-page .cle-map,.cle-page .cle-map iframe{ min-height:320px; }
  .cle-page .cle-gallery{ grid-template-columns:repeat(2,1fr); }
  .cle-page .cle-cta{ max-width:100%; }
  .cle-page .cle-hero__sub{ max-width:100%; }
  .cle-page .cle-heromedia__col--offset{ margin-top:24px; }
  .cle-page .cle-badge--stat{ right:0; top:-14px; }
  .cle-page .cle-badge--quality{ left:0; bottom:-14px; }
  .cle-page .cle-badge--flow{ display:none; }
  .cle-page a.cle-visitbadge{ max-width:100%; }
  .cle-page .cle-hero .cle-eyebrow{ font-size:11px; letter-spacing:.06em; }
}

@media (max-width:767px){
  .cle-page .cle-section{ padding:48px 0; }
  .cle-page .cle-section--tight{ padding:40px 0; }
  .cle-page .cle-bandsec{ padding-bottom:48px; }
  .cle-page .cle-container{ padding:0 18px; }
  .cle-page .cle-cards,
  .cle-page .cle-tops{ grid-template-columns:1fr; }
  .cle-page .cle-stats{ grid-template-columns:repeat(2,1fr); }
  .cle-page .cle-cta__pair{ grid-template-columns:1fr; }
  /* on mobile, both floating badges hide and the quality one flows under the images */
  .cle-page .cle-badge--quality,
  .cle-page .cle-badge--stat{ display:none; }
  .cle-page .cle-badge--flow{
    display:flex; position:static; transform:none; margin:14px auto 0;
    width:100%; max-width:340px; justify-content:center;
  }
  .cle-page .cle-heromedia__col--offset{ margin-top:16px; }
  .cle-page .cle-heromedia__grid,.cle-page .cle-heromedia__col{ gap:9px; }
  .cle-page a.cle-visitbadge{ padding:12px 14px; gap:11px; }
  .cle-page .cle-visitbadge__main{ font-size:.89rem; }
  .cle-page .cle-hero .cle-eyebrow{ white-space:normal; font-size:11px; }
  .cle-page .cle-band{ padding:48px 20px; border-radius:12px; }
  .cle-page .cle-band--full{ padding:52px 0; border-radius:0; }
  .cle-page .cle-band__btns .btn{ width:100%; }
  .cle-page .cle-faq summary{ padding:16px 46px 16px 17px; }
  .cle-page .cle-faq summary h3{ font-size:.96rem; }
  .cle-page .cle-faq summary::after{ right:18px; top:22px; }
  .cle-page .cle-faq details[open] summary::after{ top:26px; }
  .cle-page .cle-faq__a{ padding:0 17px 17px; }
  .cle-page .cle-rule{ max-width:260px; }
  .cle-page .cle-section-head{ margin-bottom:32px; }
  /* badges: 2 visible on mobile, arrows stay visible and circular */
  .cle-page .cle-badges .cle-carousel__item{ flex:0 0 calc((100% - 18px)/2); min-height:92px; padding:8px 12px; }
  .cle-page .cle-badges .cle-carousel__item img{ width:100%; height:70px; }
  .cle-page .cle-carousel{ margin:0 44px; }
  .cle-page .cle-carousel__nav{ width:38px; height:38px; min-width:38px; min-height:38px; margin-top:-19px; }
  .cle-page .cle-carousel__nav--prev{ left:-42px; }
  .cle-page .cle-carousel__nav--next{ right:-42px; }
  /* cabinet doors: looping swipe carousel on mobile, 3 visible, arrows on */
  .cle-page .cle-doors .cle-carousel__track{
    display:flex; grid-template-columns:none; gap:10px;
    overflow-x:auto; scroll-snap-type:none;
  }
  .cle-page .cle-doors .cle-carousel__nav{ display:flex; }
  .cle-page a.cle-door{ flex:0 0 calc((100% - 2*10px)/3); }
  .cle-page .cle-door h3.cle-door__name{ font-size:.72rem; padding:8px 3px; }
}

@media (max-width:544px){
  .cle-page .cle-gallery{ grid-template-columns:1fr 1fr; gap:8px; }
  .cle-page .cle-door h3.cle-door__name{ font-size:.68rem; }
  .cle-page .btn{ padding:14px 22px; font-size:.94rem; }
  .cle-page a.cle-cta__phone{ padding:14px 15px; gap:12px; }
  .cle-page .cle-cta__ico{ width:42px; height:42px; }
  .cle-page .cle-hero{ padding:28px 0 52px; }
  .cle-page .cle-hero::before{ background-size:44px 44px; }
}

@media (prefers-reduced-motion:reduce){
  .cle-page *{ transition:none !important; animation:none !important; }
  .cle-page .btn:hover,.cle-page .cle-card:hover,.cle-page a.cle-cta__card:hover,
  .cle-page a.cle-cta__phone:hover,.cle-page .cle-gallery img:hover,
  .cle-page a.cle-door:hover,.cle-page .cle-top:hover,.cle-page a.cle-trust__item:hover{ transform:none; }
}

/* --------------------------------------------------------------------------
   18. TRUSTINDEX REVIEWS  (best effort: encourage 3 visible cards)
   The review COUNT shown is controlled in the Trustindex plugin settings,
   not here. This only helps the layout breathe. If only 2 show, raise the
   "number of reviews" in Trustindex > widget settings.
   -------------------------------------------------------------------------- */
.cle-page + .ti-widget,
.cle-page .ti-widget{ --ti-gap:14px; }