
.cm-why-section{background:var(--cm-why-bg,#fff);padding:68px 0 62px}
.cm-why-container{width:min(var(--cm-site-max-width),calc(100% - var(--cm-site-gutter-desktop)));margin:0 auto}
.cm-why-header{width:100%;max-width:none;margin:0 auto 42px;text-align:center}
.cm-why-label{display:none}
.cm-why-header h2{margin:0;color:#111820;font-size:clamp(30px,3.4vw,42px);line-height:1.1;font-weight:760;letter-spacing:-.02em}
.cm-why-line{margin:8px auto 0;color:#5f6c78;font-size:15px;line-height:1.5}
.cm-why-line+.cm-why-line{margin-top:4px}

.cm-why-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;row-gap:0;border-top:1px solid rgba(22,163,74,.14)}
.cm-why-card{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:15px;align-items:start;padding:25px 0 24px;border:0;border-bottom:1px solid rgba(22,163,74,.13);border-radius:0;background:transparent;box-shadow:none}
.cm-why-card-icon{grid-column:1;grid-row:1/span 2;display:grid;place-items:center;width:40px;height:40px;margin:0;border-radius:50%;background:rgba(22,163,74,.08);color:#15803d;font-size:17px;font-weight:800;transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease}
.cm-why-card h3{grid-column:2;margin:0;color:#17212b;font-size:20px;line-height:1.3}
.cm-why-card p{grid-column:2;margin:8px 0 0;color:#66737f;font-size:15px;line-height:1.62}
.cm-why-card:hover .cm-why-card-icon{transform:scale(1.06);background:rgba(22,163,74,.12);box-shadow:0 0 0 5px rgba(22,163,74,.05)}









.cm-why-reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease;transition-delay:var(--cm-why-delay,0ms)}
.cm-why-reveal.is-visible{opacity:1;transform:translateY(0)}

@media (max-width:820px){
.cm-why-bento{grid-template-columns:1fr;column-gap:0}
}

@media (max-width:680px){

  .cm-why-section{padding:52px 0 48px}
  .cm-why-container{width:calc(100% - 24px)}
  .cm-why-header{margin-bottom:28px}
  .cm-why-header h2{font-size:clamp(26px,8vw,34px)}
  .cm-why-line{font-size:14px}
  .cm-why-card{grid-template-columns:44px minmax(0,1fr);column-gap:13px;padding:20px 0 19px}
  .cm-why-card-icon{width:38px;height:38px}
  .cm-why-card h3{font-size:17px}
  .cm-why-card p{font-size:13.5px;line-height:1.55}
  
  
  
  
  
  

}

@media (prefers-reduced-motion:reduce){

  .cm-why-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .cm-why-card-icon{transition:none!important}

}



/* ==========================================================
 Production Why Us Final Polish
 ========================================================== */

/* Follow surrounding page background; do not force a new section color */
.cm-why-section{
  background:transparent!important;
}

/* Benefit separator lines removed */
.cm-why-bento{
  border-top:0!important;
}
.cm-why-card{
  border-bottom:0!important;
}

/* Keep just one separator before Assurance */


/* Assurance label: dark/black, no side lines */



/* Stronger but still clean Assurance title */




/* Mobile spacing only layout remains locked */
@media (max-width:680px){

  .cm-why-section{
    padding-top:42px!important;
    padding-bottom:40px!important;
  }
  

}



/* ==========================================================
 Production Why Us Approved Final Polish
 ========================================================== */

/* White divider separates Why Us from previous section */
.cm-why-section{
  border-top:1px solid rgba(255,255,255,.95);
}

/* Supporting copy slightly larger */
.cm-why-line{
  font-size:16.5px!important;
  line-height:1.55!important;
}

/* White separators between benefits */
.cm-why-bento{
  border-top:0!important;
}
.cm-why-card{
  border-bottom:1px solid rgba(255,255,255,.95)!important;
}
/* Last visual row has no trailing separators */
.cm-why-card:nth-last-child(-n/**/+2){
  border-bottom:0!important;
}

/* One white line before assurance */


/* Special label: larger, normal weight, dark */



/* Assurance headline and description centered as one unit */






/* No underline. Days receive a one-time top-to-bottom reveal. */





/* Locked mobile layout; only approved spacing/typography adjustments */
@media (max-width:680px){

  .cm-why-section{
    padding-top:38px!important;
    padding-bottom:36px!important;
  }
  .cm-why-line{
    font-size:15px!important;
  }
  .cm-why-card{
    border-bottom:1px solid rgba(255,255,255,.95)!important;
  }
  .cm-why-card:last-child{
    border-bottom:0!important;
  }
  
  

}


@media (prefers-reduced-motion:reduce){

  

}



/* ==========================================================
 Production Editable Background + Assurance Controls
 ========================================================== */

/* WordPress Background Color controls the full Why Us section.
 Default: Click Mappers body blue-grey #ECF2F8 */
.cm-why-section{
  background:var(--cm-why-bg,#ECF2F8)!important;
}

/* Optional Assurance button hidden unless Show Button is enabled */


@media (prefers-reduced-motion:reduce){

  

}



/* final controlled polish */
.cm-why-promise-row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px 24px;margin:10px auto 0;color:#4f5c67;font-size:16.5px;line-height:1.5}
.cm-why-promise-row span{display:inline-flex;align-items:center;gap:8px}.cm-why-promise-row i{width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:#17212b}

.cm-why-admin-pill{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700}.cm-why-admin-pill.is-enabled,.cm-why-admin-pill.is-published{background:#eaf7ef;color:#1f7a45}.cm-why-admin-pill.is-disabled,.cm-why-admin-pill.is-draft{background:#fff4d8;color:#8a6200}
@media (max-width:680px){
.cm-why-promise-row{gap:8px 14px;font-size:15px}.cm-why-promise-row i{width:4px;height:4px;flex-basis:4px}
}



/* ==========================================================
 Production Assurance Final
 ========================================================== */

.cm-why-section{
  background:var(--cm-why-bg,#ECF2F8)!important;
}









/* Icon intentionally removed from final assurance design */


/* 15-Day focus: one-time smooth top-to-bottom fade */




@media (max-width:680px){

  
  
  
  

}


@media (prefers-reduced-motion:reduce){

  

}



/* ==========================================================
 Production Why Us Visual Polish
 ========================================================== */

/* Benefit icon: keep green symbol, change only soft circle background */
.cm-why-card-icon{
  color:#15803d!important;
  background:rgba(200,33,41,.085)!important;
}
.cm-why-card:hover .cm-why-card-icon{
  color:#15803d!important;
  background:rgba(200,33,41,.12)!important;
  box-shadow:0 0 0 5px rgba(200,33,41,.035)!important;
}

/* Benefit dividers: short, equal width, centered */
.cm-why-card{
  border-bottom:0!important;
  position:relative;
}
.cm-why-card::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:62%;
  max-width:330px;
  height:1px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.96);
}
.cm-why-card:nth-last-child(-n/**/+2)::after{
  display:none;
}

/* Assurance description is always centered on desktop */


/* 15-Day: dark text with soft mint marker drawing left to right */





@media (max-width:680px){

  .cm-why-card::after{
    width:64%;
    max-width:250px;
  }

}


@media (prefers-reduced-motion:reduce){

  

}



/* ==========================================================
 Production Why Us Count-Up Final Polish
 ========================================================== */

/* Restore original green-tint benefit icon circles */
.cm-why-card-icon{
  color:#15803d!important;
  background:rgba(22,163,74,.08)!important;
}
.cm-why-card:hover .cm-why-card-icon{
  color:#15803d!important;
  background:rgba(22,163,74,.12)!important;
  box-shadow:0 0 0 5px rgba(22,163,74,.05)!important;
}

/* Remove previous mint marker/highlight under 15-Day */


/* 15 uses the same CTA red; the rest remains dark */






/* Hard-center assurance description on desktop and mobile */


/* Keep assurance headline centered */


/* Previous marker animation disabled */


@media (prefers-reduced-motion:reduce){

  

}



/* ==========================================================
 Production Repeating Assurance Count
 ========================================================== */

/* Slightly larger assurance headline */


/* Number + Day both use CTA red */


/* Keep the remaining title dark */


/* Re-triggerable subtle upward reveal on every count cycle */



@media (max-width:680px){

  

}



/* ==========================================================
 Production Why Us Locked Final
 ========================================================== */

/* Assurance spacing: enough separation without creating a card */


/* Final centered assurance hierarchy */




/* 16-Day editable Days compact assurance badge */




/* The actual assurance title stays dark */


/* Description remains an independent centered line */


/* Preserve approved short, equal, centered benefit separators */
.cm-why-card::after{
  width:58%!important;
  max-width:300px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
}

/* Last desktop row has no separators */
.cm-why-card:nth-last-child(-n/**/+2)::after{
  display:none!important;
}

@media (max-width:680px){

  
  
  
  
  .cm-why-card::after{
    width:58%!important;
    max-width:230px!important;
  }

}



/* ==========================================================
 Production Why Us Micro Polish
 ========================================================== */

/* Keep Get-Free-Audit-like rounded proportion, but no border */


/* Give the supporting description a little more breathing room */



/* ==========================================================
 Production Why Us Control Fix
 ========================================================== */

/* Editable Days: normal CTA-like rounded rectangle, NOT a pill */


/* Optional assurance CTA obeys the WordPress Show Button toggle */



/* ==========================================================
 Production Why Us Final Locked Polish
 ========================================================== */

/* Compact assurance Days badge with subtle white lift */


/* Final assurance hierarchy spacing */




/* Optional Learn More remains a centered secondary CTA */


/* Balanced whitespace around the assurance group */


@media (max-width:680px){

  
  
  
  

}


/* Why Us benefit image/icon support existing layout preserved */
.cm-why-card-icon .cm-why-benefit-icon-img{display:block;width:30px;height:30px;max-width:100%;object-fit:contain}


/* ==========================================================
 Production HOMEPAGE WHY US RHYTHM
 Pull Why Us closer to Services while preserving internal layout.
 ========================================================== */
@media (min-width:1001px){

  .home .cm-why-section{
    padding-top:42px !important;
  }

}


@media (min-width:681px) and (max-width:1000px){

  .home .cm-why-section{
    padding-top:38px !important;
  }

}


@media (max-width:680px){

  .home .cm-why-section{
    padding-top:32px !important;
  }

}



/* Production Approved Why Us typography hierarchy */
@media (min-width:1001px){

  .cm-why-header h2{font-size:30px!important;}
  

}

@media (min-width:681px) and (max-width:1000px){

  .cm-why-header h2{font-size:28px!important;}
  

}

@media (max-width:680px){

  .cm-why-header h2{font-size:26px!important;}
  

}


/* ==========================================================
 Canonical standalone Assurance ownership
 Formerly attached at runtime to the Why Us handle.
 Values are preserved exactly; ownership now lives with the
 component stylesheet so conditional loading remains safe.
 ========================================================== */



.cm-why-section{
  border-top:0!important;
}
@media (max-width:680px){

  

}

