/* =========================================================
   WHY CHOOSE US — vertical timeline
   ========================================================= */

.why-choose{
  padding-block: var(--space-9);
  background: var(--color-surface);
}

.why-choose__grid{
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-8);
  align-items: start;
}

.why-choose__content{ position: sticky; top: 140px; max-width: 420px; }
.why-choose__content h2{ margin: var(--space-2) 0 var(--space-3); }
.why-choose__content p{ color: var(--color-body); margin-bottom: var(--space-5); }

/* ==========================
   CTA BUTTON — MATCH ABOUT / SERVICES BUTTON
========================== */

.why-choose__content .btp-btn{
  height:58px;
  padding:0 34px;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
}

.why-choose__timeline{
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
}
.why-choose__timeline::before{
  content: '';
  position: absolute;
  left: 27px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--color-border);
}

.why-choose__item{
  position: relative;
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
}
.why-choose__item:last-child{ padding-bottom: 0; }

.why-choose__icon{
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.why-choose__icon svg{ width: 22px; height: 22px; }
.why-choose__item:hover .why-choose__icon{ background: var(--color-accent); color: #fff; transform: scale(1.06); }

.why-choose__item strong{ font-family: var(--font-heading); font-size: var(--fs-h5); display: block; margin-bottom: 4px; margin-top: 10px; }
.why-choose__item p{ color: var(--color-muted); margin: 0; }

@media (max-width: 1024px){
  .why-choose__grid{ grid-template-columns: 1fr; }
  .why-choose__content{ position: static; max-width: none; }
}

@media (max-width: 560px){
  .why-choose{ padding-block: var(--space-7); }
  .why-choose__icon{ width: 46px; height: 46px; }
  .why-choose__timeline::before{ left: 22px; }
  .why-choose__content .btp-btn{
    width:100%;
    justify-content:center;
  }
}