.approach-strip {
  padding:34px 0;
  border-top:1px solid rgba(17,24,39,.07);
  border-bottom:1px solid rgba(17,24,39,.07);
  background:rgba(255,255,255,.42);
}
.approach-grid {
  display:grid;
  grid-template-columns:1.2fr 1.7fr repeat(3,.55fr);
  gap:26px;
  align-items:center;
}
.approach-grid h2 {
  margin:0;
  max-width:300px;
  font-size:clamp(1.7rem,2.5vw,2.5rem);
  line-height:1.06;
  letter-spacing:-.045em;
}
.approach-grid > p { margin:0; color:var(--slate); font-size:.88rem; line-height:1.65; }
.metric { padding-left:22px; border-left:1px solid rgba(36,91,143,.18); }
.metric strong { display:block; font-size:1.75rem; letter-spacing:-.04em; }
.metric span { color:var(--slate); font-size:.72rem; }

@media (max-width:1000px) {
  .approach-grid { grid-template-columns:1fr 1.5fr repeat(3,.6fr); }}

@media (max-width:760px) {
  .approach-grid { grid-template-columns:1fr 1fr; }
  .approach-grid > p { grid-column:1/-1; }
  .metric { border-left:0; padding-left:0; }}

@media (max-width:520px) {
  .approach-grid { grid-template-columns:1fr; }}

/* Approach strip: compact proportions and stronger separators like the approved design. */
.approach-strip {
  padding:28px 0;
  background:rgba(255,255,255,.5);
}

.approach-grid {
  grid-template-columns:1.25fr 1.8fr repeat(3,.62fr);
  gap:0;
}

.approach-grid > div:first-child {
  padding-right:28px;
}

.approach-grid > p {
  padding:0 34px;
  border-left:1px solid rgba(36,91,143,.18);
}

.metric {
  min-height:72px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 26px;
  border-left:1px solid rgba(36,91,143,.18);
}

.approach-grid h2 {
  max-width:330px;
  font-size:clamp(1.55rem,2.05vw,2.1rem);
}

@media (max-width:1000px) {

  .approach-grid {
    grid-template-columns:1.1fr 1.5fr repeat(3,.62fr);
  }

  .approach-grid > p {
    padding-inline:24px;
  }

  .metric {
    padding-inline:18px;
  }}

@media (max-width:760px) {

  .approach-grid {
    grid-template-columns:1fr 1fr;
    gap:24px 20px;
  }

  .approach-grid > div:first-child {
    grid-column:1 / -1;
    padding-right:0;
  }

  .approach-grid > p {
    grid-column:1 / -1;
    padding:0;
    border-left:0;
  }

  .metric {
    min-height:auto;
    padding:0;
    border-left:0;
  }}

@media (max-width:520px) {

  .approach-grid {
    grid-template-columns:1fr;
  }}


/* Typography + CTA polish */
@media (min-width: 761px) {

  .approach-grid h2 {
    font-size: clamp(1.45rem, 1.8vw, 2rem);
    line-height: 1.08;
    max-width: 320px;
  }}


/* Tablet: approach section stacked into 3 clear rows */
@media (min-width: 761px) and (max-width: 1000px) {
  .approach-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 22px;
  }

  .approach-grid > div:first-child {
    grid-column: 1 / -1;
    padding-right: 0;
  }

  .approach-grid > p {
    grid-column: 1 / -1;
    padding: 0;
    border-left: 0;
    max-width: 720px;
  }

  .metric {
    min-height: auto;
    padding: 18px 20px 0;
    border-left: 0;
    border-top: 1px solid rgba(36,91,143,.18);
  }}
.approach-strip .eyebrow{margin:0 0 18px;color:#245B8F;font-size:.68rem;font-weight:750;letter-spacing:.18em}


/* About focus metric: text-led alternative to numeric metrics. */
.metric-focus strong{
  font-size:1rem;
  line-height:1.18;
  letter-spacing:-.025em;
}
.metric-focus span{
  display:block;
  margin-top:6px;
  line-height:1.35;
}
@media(max-width:1000px){
  .metric-focus strong{font-size:.94rem}
}
@media(max-width:760px){
  .metric-focus strong{font-size:1rem}
}

/* Keep every approach-grid child shrinkable inside tablet widths. */
.approach-grid > * {
  min-width: 0;
}

.metric strong,
.metric span,
.approach-grid > p {
  overflow-wrap: anywhere;
}

/* iPad / tablet portrait: avoid the dense five-column desktop strip. */
@media (min-width: 761px) and (max-width: 1100px) {
  .approach-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 22px;
  }

  .approach-grid > div:first-child {
    grid-column: 1 / -1;
    padding-right: 0;
  }

  .approach-grid > p {
    grid-column: 1 / -1;
    max-width: 720px;
    padding: 0;
    border-left: 0;
  }

  .metric {
    min-height: auto;
    padding: 18px 20px 0;
    border-left: 0;
    border-top: 1px solid rgba(36,91,143,.18);
  }
}


/* Homepage desktop balance: shorter strategy copy gives the current-focus metric more room. */
@media (min-width: 1101px) {
  .approach-grid {
    grid-template-columns: 1.25fr 1.2fr .55fr .55fr 1.2fr;
  }

  .metric-focus strong {
    white-space: nowrap;
  }
}