/* TNYI Key Approaches page. Scoped so it can safely coexist with legacy styles. */
.approaches-page {
  --approach-navy: #131f45;
  --approach-navy-deep: #0e1834;
  --approach-blue: #1e42af;
  --approach-orange: #d04f26;
  --approach-ink: #1b2333;
  --approach-body: #4b5468;
  --approach-muted: #7c8598;
  --approach-line: #e4e7ef;
  --approach-soft: #f6f7fb;
  --approach-blue-soft: #ebf1fc;
  --approach-max: 1240px;
  --approach-font: "Montserrat-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--approach-ink);
  background: var(--approach-soft);
  font-family: var(--approach-font);
  overflow: hidden;
}
.approaches-page *, .approaches-page *::before, .approaches-page *::after { box-sizing: border-box; }
.approaches-page h1, .approaches-page h2, .approaches-page h3, .approaches-page p { margin: 0; }
.approaches-page img { max-width: 100%; }
.approaches-page a { text-decoration: none; }
.approaches-page :focus-visible { outline: 3px solid var(--approach-orange); outline-offset: 3px; border-radius: 7px; }
.approaches-container { width: min(100%, var(--approach-max)); margin: 0 auto; padding: 0 32px; }

/* Hero */
.approaches-hero { position: relative; isolation: isolate; padding: 92px 0 112px; background: linear-gradient(180deg, #fff 0%, #f8faff 100%); }
.approaches-hero::before, .approaches-hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.approaches-hero::before { width: 470px; height: 470px; right: -225px; top: -180px; background: rgba(30, 66, 175, .07); }
.approaches-hero::after { width: 270px; height: 270px; left: -155px; bottom: -145px; background: rgba(208, 79, 38, .08); }
.approaches-hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(380px, .98fr); gap: 72px; align-items: center; }
.approaches-hero__grid > * { min-width: 0; }
.approaches-hero__copy { max-width: 650px; padding: 18px 0; }
.approaches-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px !important; color: var(--approach-orange); font: 700 13px/1.2 "Montserrat-Bold", sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.approaches-eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 4px; background: currentColor; }
.approaches-hero h1 { max-width: 680px; color: var(--approach-navy); font: 700 clamp(40px, 5vw, 66px)/1.1 "Montserrat-Bold", sans-serif; letter-spacing: -.035em; text-wrap: balance; }
.approaches-rule { display: block; width: 178px; height: 4px; margin: 28px 0 26px; border-radius: 4px; background: linear-gradient(90deg, var(--approach-orange), #e99570); }
.approaches-hero__lead { max-width: 630px; color: var(--approach-body); font: 400 18px/1.8 var(--approach-font); }
.approaches-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.approaches-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; border: 1.5px solid transparent; border-radius: 10px; padding: 16px 24px; cursor: pointer; font: 700 15px/1.2 "Montserrat-Bold", sans-serif; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.approaches-button--primary { color: #fff; background: var(--approach-navy); box-shadow: 0 9px 22px rgba(19, 31, 69, .18); }
.approaches-button--primary:hover { color: #fff; background: var(--approach-blue); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(30, 66, 175, .24); }
.approaches-button--soft { color: var(--approach-navy); border-color: rgba(30, 66, 175, .2); background: var(--approach-blue-soft); box-shadow: 0 6px 16px rgba(30, 66, 175, .08); }
.approaches-button--soft:hover { color: #fff; border-color: var(--approach-orange); background: var(--approach-orange); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(208, 79, 38, .2); }
.approaches-button i { transition: transform .2s ease; }
.approaches-button:hover i { transform: translateX(3px); }
.approaches-hero__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 42px; color: var(--approach-muted); font: 600 12px/1.4 "Montserrat-Medium", sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.approaches-hero__meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--approach-orange); }
.approaches-hero__visual { position: relative; }
.approaches-hero__visual::before { content: ""; position: absolute; top: 48px; right: -28px; width: 92%; height: 92%; border: 1px solid rgba(30, 66, 175, .16); border-radius: 24px; transform: rotate(4deg); }
.approaches-hero__visual-card { position: relative; z-index: 1; padding: 18px; border: 1px solid rgba(19, 31, 69, .08); border-radius: 24px 24px 24px 70px; background: #fff; box-shadow: 0 24px 60px rgba(19, 31, 69, .14); }
.approaches-hero__visual-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 4px 4px 16px 10px; }
.approaches-visual-label, .approaches-visual-count { color: var(--approach-muted); font: 700 12px/1.3 "Montserrat-Bold", sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.approaches-visual-count { color: var(--approach-orange); }
.approaches-hero__image-wrap { position: relative; overflow: hidden; border-radius: 15px 15px 15px 48px; background: var(--approach-blue-soft); }
.approaches-hero__image { display: block; width: 100%; aspect-ratio: 1.08; object-fit: cover; transition: opacity .16s ease, transform .4s ease; }
.approaches-hero__image.is-changing { opacity: .15; transform: scale(1.02); }
.approaches-hero__image-badge { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 9px 12px; color: var(--approach-navy); border: 1px solid rgba(255, 255, 255, .72); border-radius: 8px; background: rgba(255, 255, 255, .9); box-shadow: 0 8px 20px rgba(19, 31, 69, .12); font: 700 11px/1.2 "Montserrat-Bold", sans-serif; }
.approaches-hero__image-badge i { color: var(--approach-orange); }
.approaches-hero__visual-note { display: flex; align-items: center; gap: 10px; padding: 17px 8px 4px; color: var(--approach-navy); font: 700 15px/1.45 "Montserrat-Bold", sans-serif; }
.approaches-visual-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--approach-orange); box-shadow: 0 0 0 5px rgba(208, 79, 38, .12); }
.approaches-scroll-cue { position: absolute; bottom: 28px; left: 50%; display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 11px 16px; border: 1px solid var(--approach-line); border-radius: 999px; transform: translateX(-50%); color: var(--approach-navy); background: rgba(255, 255, 255, .92); box-shadow: 0 7px 18px rgba(19, 31, 69, .08); font: 700 11px/1.2 "Montserrat-Bold", sans-serif; letter-spacing: .13em; text-transform: uppercase; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.approaches-scroll-cue:hover { color: #fff; border-color: var(--approach-orange); background: var(--approach-orange); box-shadow: 0 10px 22px rgba(208, 79, 38, .22); transform: translateX(-50%) translateY(-2px); }
.approaches-scroll-cue i { color: var(--approach-orange); animation: approaches-scroll-cue 1.7s ease-in-out infinite; }
.approaches-scroll-cue:hover i { color: #fff; }
@keyframes approaches-scroll-cue { 0%, 100% { transform: translateY(0); } 55% { transform: translateY(5px); } }

/* Explorer */
.approaches-section { position: relative; padding: 96px 0; background: var(--approach-soft); scroll-margin-top: 88px; }
.approaches-section::before { content: "APPROACH"; position: absolute; top: 30px; right: 2%; color: rgba(30, 66, 175, .04); font: 700 clamp(72px, 12vw, 170px)/1 "Montserrat-Bold", sans-serif; letter-spacing: -.08em; pointer-events: none; }
.approaches-section-heading { position: relative; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: 56px; margin-bottom: 48px; }
.approaches-section-heading > div { max-width: 660px; }
.approaches-section-heading h2 { color: var(--approach-navy); font: 700 clamp(30px, 3.2vw, 44px)/1.18 "Montserrat-Bold", sans-serif; letter-spacing: -.025em; text-wrap: balance; }
.approaches-section-lead { max-width: 420px; color: var(--approach-body); font: 400 17px/1.75 var(--approach-font); }
.approaches-stage-rail { position: relative; z-index: 1; margin: 0 0 34px; padding: 30px 18px 20px; border: 1px solid rgba(30, 66, 175, .13); border-radius: 22px; background: linear-gradient(145deg, #f1faf7 0%, #fff 58%, #f5f7fd 100%); box-shadow: 0 18px 38px rgba(19, 31, 69, .08); }
.approaches-stage-rail__list { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; padding: 28px 0 0; list-style: none; }
.approaches-stage-rail__list::before { content: ""; position: absolute; z-index: 0; top: 28px; right: 9%; left: 9%; height: 4px; border-radius: 999px; background: linear-gradient(90deg, #c3d9f2, #bfe5d8 52%, #d6e1f4); }
.approaches-stage-rail__item { position: relative; z-index: 1; min-width: 0; padding: 28px 8px 0; }
.approaches-stage-rail__card { position: relative; display: flex; align-items: center; width: 100%; min-height: 244px; padding: 42px 18px 18px; color: var(--approach-navy); border: 1px solid #a9ddcd; border-radius: 19px; background: rgba(255, 255, 255, .96); box-shadow: 0 13px 26px rgba(19, 31, 69, .08); cursor: pointer; flex-direction: column; text-align: center; font: inherit; transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease; }
.approaches-stage-rail__card:hover, .approaches-stage-rail__card:focus-visible { border-color: var(--approach-orange); background: #fff; box-shadow: 0 18px 34px rgba(19, 31, 69, .14); transform: translateY(-5px); }
.approaches-stage-rail__card.is-active { border-color: #84ceb9; background: linear-gradient(180deg, #fff 0%, #f4fbf8 100%); box-shadow: 0 18px 36px rgba(19, 31, 69, .14); transform: translateY(-5px); }
.approaches-stage-rail__dot { position: absolute; top: 0; left: 50%; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; color: #fff; border: 3px solid #8fa9e6; border-radius: 50%; background: var(--approach-navy); box-shadow: 0 0 0 5px rgba(143, 169, 230, .26), 0 12px 22px rgba(19, 31, 69, .18); transform: translate(-50%, -50%); font: 700 16px/1 "Montserrat-Bold", sans-serif; letter-spacing: .02em; transition: background .28s ease, border-color .28s ease, box-shadow .28s ease, transform .28s ease; }
.approaches-stage-rail__card:hover .approaches-stage-rail__dot, .approaches-stage-rail__card:focus-visible .approaches-stage-rail__dot, .approaches-stage-rail__card.is-active .approaches-stage-rail__dot { border-color: #fff; background: var(--approach-blue); box-shadow: 0 0 0 5px rgba(208, 79, 38, .22), 0 13px 24px rgba(19, 31, 69, .22); transform: translate(-50%, -50%) scale(1.06); }
.approaches-stage-rail__stage { color: var(--approach-navy); font: 700 20px/1.25 "Montserrat-Bold", sans-serif; }
.approaches-stage-rail__title { margin-top: 12px; color: var(--approach-body); font: 400 15px/1.55 var(--approach-font); }
.approaches-stage-rail__outcome { display: inline-flex; align-items: center; justify-content: center; margin-top: auto; min-height: 34px; padding: 8px 15px; color: #fff; border-radius: 999px; background: var(--approach-orange); font: 700 11px/1.1 "Montserrat-Bold", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.approaches-stage-rail__link { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; color: var(--approach-blue); font: 700 12px/1.2 "Montserrat-Bold", sans-serif; }
.approaches-stage-rail__link i { font-size: 10px; transition: transform .2s ease; }
.approaches-stage-rail__card:hover .approaches-stage-rail__link i, .approaches-stage-rail__card:focus-visible .approaches-stage-rail__link i { transform: translate(2px, -2px); }
.approaches-explorer { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: 22px; align-items: stretch; }
.approaches-index { min-width: 0; padding: 26px 22px; border: 1px solid var(--approach-line); border-radius: 18px; background: #fff; box-shadow: 0 12px 28px rgba(19, 31, 69, .06); }
.approaches-index__label { margin-bottom: 16px !important; color: var(--approach-muted); font: 700 12px/1.3 "Montserrat-Bold", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.approaches-index__list { display: flex; flex-direction: column; gap: 9px; }
.approaches-index__item { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 13px 14px; color: var(--approach-navy); border: 1px solid transparent; border-radius: 11px; background: #fff; cursor: pointer; text-align: left; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.approaches-index__item:hover { border-color: rgba(30, 66, 175, .16); background: var(--approach-blue-soft); transform: translateX(3px); }
.approaches-index__item.is-active { color: #fff; border-color: var(--approach-navy); background: var(--approach-navy); box-shadow: 0 10px 20px rgba(19, 31, 69, .16); }
.approaches-index__number { align-self: start; color: var(--approach-orange); font: 700 13px/1.2 "Montserrat-Bold", sans-serif; letter-spacing: .05em; }
.approaches-index__item.is-active .approaches-index__number { color: #ffad91; }
.approaches-index__title { min-width: 0; font: 700 15px/1.45 "Montserrat-Bold", sans-serif; }
.approaches-index__item > i { justify-self: end; font-size: 12px; opacity: .58; transition: transform .2s ease, opacity .2s ease; }
.approaches-index__item:hover > i, .approaches-index__item.is-active > i { opacity: 1; transform: translateX(3px); }
.approaches-detail { min-width: 0; padding: 10px; border: 1px solid var(--approach-line); border-radius: 18px; background: #fff; box-shadow: 0 12px 28px rgba(19, 31, 69, .06); }
.approaches-detail-panel { position: relative; display: block; min-height: 470px; padding: 36px 40px 28px; overflow: hidden; border-radius: 14px; background: linear-gradient(145deg, #fff 0%, #fbfcff 72%, #f1f5fd 100%); animation: approach-panel-in .38s ease both; }
.approaches-detail-panel[hidden] { display: none; }
@keyframes approach-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.approaches-detail-panel::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--approach-orange), #ef9a76 42%, rgba(30, 66, 175, .1) 100%); }
.approaches-detail-panel::after { content: ""; position: absolute; right: -95px; bottom: -130px; width: 300px; height: 300px; border: 1px solid rgba(30, 66, 175, .1); border-radius: 50%; pointer-events: none; }
.approaches-detail-panel__copy { position: relative; z-index: 1; max-width: 760px; min-width: 0; }
.approaches-detail-panel__topline { display: flex; align-items: center; gap: 14px; margin-bottom: 21px; }
.approaches-detail-panel__stage-mark { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; flex: 0 0 auto; color: #fff; border-radius: 15px 15px 15px 4px; background: var(--approach-navy); box-shadow: 0 10px 20px rgba(19, 31, 69, .15); font: 700 16px/1 "Montserrat-Bold", sans-serif; letter-spacing: .06em; }
.approaches-detail-panel__kicker { margin: 0 !important; color: var(--approach-orange); font: 700 12px/1.2 "Montserrat-Bold", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.approaches-detail-panel h3 { color: var(--approach-navy); font: 700 clamp(25px, 2.4vw, 34px)/1.25 "Montserrat-Bold", sans-serif; letter-spacing: -.02em; }
.approaches-card-rule { display: block; width: 58px; height: 4px; margin: 18px 0 19px; border-radius: 4px; background: var(--approach-orange); }
.approaches-detail-panel__content { color: var(--approach-body); font: 400 17px/1.8 var(--approach-font); }
.approaches-detail-panel__content p { margin: 0 !important; font: inherit !important; color: inherit !important; }
.approaches-detail-panel__content span, .approaches-detail-panel__content div { font: inherit !important; color: inherit !important; }
.approaches-detail-panel__note { display: flex; align-items: flex-start; gap: 9px; margin-top: 23px; padding-top: 17px; color: var(--approach-navy); border-top: 1px solid var(--approach-line); font: 700 13px/1.5 "Montserrat-Bold", sans-serif; }
.approaches-detail-panel__note i { flex: 0 0 auto; margin-top: 2px; color: var(--approach-orange); }
.approaches-detail__footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 9px 16px 5px; border-top: 1px solid var(--approach-line); }
.approaches-detail__progress { color: var(--approach-muted); font: 700 13px/1.2 "Montserrat-Bold", sans-serif; letter-spacing: .08em; }
.approaches-detail__progress strong { color: var(--approach-orange); }
.approaches-detail__controls { display: flex; align-items: center; gap: 10px; }
.approaches-control { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 11px 14px; color: var(--approach-navy); border: 1px solid var(--approach-line); border-radius: 8px; background: #fff; cursor: pointer; font: 700 13px/1.2 "Montserrat-Bold", sans-serif; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.approaches-control:hover, .approaches-control:focus-visible { color: #fff; border-color: var(--approach-orange); background: var(--approach-orange); transform: translateY(-2px); box-shadow: 0 7px 16px rgba(208, 79, 38, .2); }
.approaches-control--filled { color: #fff; border-color: var(--approach-navy); background: var(--approach-navy); }
.approaches-control--filled:hover, .approaches-control--filled:focus-visible { border-color: var(--approach-blue); background: var(--approach-blue); }
.approaches-empty { min-height: 320px; }

/* CTA */
.approaches-cta { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 88% 20%, rgba(208, 79, 38, .26), transparent 33%), linear-gradient(135deg, var(--approach-navy-deep), #1b2c5e); }
.approaches-cta::after { content: ""; position: absolute; right: -90px; bottom: -180px; width: 380px; height: 380px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; pointer-events: none; }
.approaches-cta__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 34px; padding-top: 65px; padding-bottom: 65px; }
.approaches-cta .approaches-eyebrow { color: #ffad91; }
.approaches-cta h2 { max-width: 660px; color: #fff; font: 700 clamp(30px, 4vw, 48px)/1.18 "Montserrat-Bold", sans-serif; letter-spacing: -.025em; }
.approaches-button--light { flex: 0 0 auto; color: var(--approach-navy); background: #fff; box-shadow: 0 10px 22px rgba(0, 0, 0, .15); }
.approaches-button--light:hover { color: #fff; background: var(--approach-orange); transform: translateY(-2px); box-shadow: 0 12px 25px rgba(0, 0, 0, .2); }

@media (max-width: 1100px) {
  .approaches-hero__grid { gap: 45px; grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr); }
  .approaches-explorer { grid-template-columns: minmax(230px, .75fr) minmax(0, 1.25fr); }
  .approaches-detail-panel { padding-right: 32px; padding-left: 32px; }
}
@media (max-width: 900px) {
  .approaches-hero { padding: 68px 0 92px; }
  .approaches-hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .approaches-hero__copy { max-width: 760px; }
  .approaches-hero__visual { max-width: 600px; width: 100%; margin: 0 auto; }
  .approaches-hero__image { aspect-ratio: 1.35; }
  .approaches-section { padding: 76px 0; }
  .approaches-section-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
  .approaches-section-lead { max-width: 650px; }
  .approaches-stage-rail { padding: 28px 14px 16px; }
  .approaches-stage-rail__list { display: flex; gap: 10px; overflow-x: auto; margin: 0 -4px; padding: 28px 8px 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .approaches-stage-rail__list::before { display: none; }
  .approaches-stage-rail__item { flex: 0 0 min(260px, 72vw); padding: 28px 0 0; scroll-snap-align: start; }
  .approaches-explorer { grid-template-columns: 1fr; }
  .approaches-index__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .approaches-detail-panel { min-height: 0; }
}
@media (max-width: 640px) {
  .approaches-container { padding: 0 20px; }
  .approaches-hero { padding: 52px 0 82px; }
  .approaches-hero h1 { font-size: clamp(34px, 10.5vw, 48px); }
  .approaches-hero__lead { font-size: 17px; line-height: 1.75; }
  .approaches-hero__actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .approaches-button { width: 100%; }
  .approaches-hero__meta { margin-top: 28px; gap: 9px; font-size: 11px; }
  .approaches-hero__visual-card { padding: 12px; border-radius: 18px 18px 18px 44px; }
  .approaches-hero__image-wrap { border-radius: 11px 11px 11px 32px; }
  .approaches-hero__image { aspect-ratio: 1.16; }
  .approaches-hero__visual::before { top: 28px; right: -10px; border-radius: 18px; }
  .approaches-scroll-cue { bottom: 24px; }
  .approaches-section { padding: 60px 0; }
  .approaches-section-heading { margin-bottom: 34px; }
  .approaches-section-heading h2 { font-size: 31px; }
  .approaches-section-lead { font-size: 16px; }
  .approaches-stage-rail { margin-bottom: 26px; padding: 24px 10px 12px; border-radius: 18px; }
  .approaches-stage-rail__list { gap: 9px; padding-right: 6px; padding-left: 6px; }
  .approaches-stage-rail__item { flex-basis: min(250px, 80vw); }
  .approaches-stage-rail__card { min-height: 228px; padding-right: 15px; padding-left: 15px; }
  .approaches-stage-rail__stage { font-size: 19px; }
  .approaches-stage-rail__title { font-size: 14px; }
  .approaches-index { padding: 20px 14px; }
  .approaches-index__list { display: flex; flex-direction: row; overflow-x: auto; gap: 9px; padding: 2px 2px 8px; scroll-snap-type: x mandatory; }
  .approaches-index__item { flex: 0 0 min(78vw, 292px); scroll-snap-align: start; }
  .approaches-detail { padding: 8px; }
  .approaches-detail-panel { min-height: 0; padding: 30px 22px 23px; }
  .approaches-detail-panel__copy { padding: 0 3px 6px; }
  .approaches-detail-panel__topline { margin-bottom: 18px; }
  .approaches-detail-panel__stage-mark { width: 48px; height: 48px; border-radius: 13px 13px 13px 4px; font-size: 14px; }
  .approaches-detail-panel h3 { font-size: 25px; }
  .approaches-detail-panel__content { font-size: 16px; line-height: 1.75; }
  .approaches-detail__footer { align-items: flex-start; flex-direction: column; padding: 14px 10px 5px; }
  .approaches-detail__controls { width: 100%; justify-content: space-between; }
  .approaches-control { flex: 1 1 0; }
  .approaches-cta__inner { align-items: stretch; flex-direction: column; padding-top: 54px; padding-bottom: 54px; }
  .approaches-button--light { width: 100%; }
}
@media (max-width: 480px) {
  .approaches-container { padding-right: 18px; padding-left: 18px; }
  .approaches-eyebrow { font-size: 12px; }
  .approaches-hero__visual-note { font-size: 14px; }
  .approaches-visual-label, .approaches-visual-count { font-size: 10px; }
  .approaches-hero__image-badge { right: 10px; bottom: 10px; font-size: 10px; }
  .approaches-index__title { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .approaches-page *, .approaches-page *::before, .approaches-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

.approaches-detail-panel__content ul { margin: 0 0 20px; padding-left: 22px; }
.approaches-detail-panel__content li { margin: 0 0 8px; }
.approaches-detail-panel__content h4 { margin: 26px 0 12px !important; color: var(--approach-navy); font: 700 16px/1.35 "Montserrat-Bold", sans-serif; }
.approaches-outcomes { padding: 92px 0; background: #fff; }
.approaches-outcomes__intro { max-width: 680px; margin: -18px 0 30px; color: var(--approach-body); font: 400 17px/1.75 var(--approach-font); }
.approaches-outcomes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.approaches-outcome-card { min-height: 220px; padding: 25px; border: 1px solid var(--approach-line); border-radius: 16px; background: var(--approach-soft); box-shadow: 0 10px 24px rgba(19, 31, 69, .05); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.approaches-outcome-card:hover { border-color: rgba(208, 79, 38, .35); transform: translateY(-4px); box-shadow: 0 16px 28px rgba(19, 31, 69, .1); }
.approaches-outcome-card > span { display: block; margin-bottom: 24px; color: var(--approach-orange); font: 700 13px/1.2 "Montserrat-Bold", sans-serif; letter-spacing: .08em; }
.approaches-outcome-card h3 { color: var(--approach-navy); font: 700 22px/1.3 "Montserrat-Bold", sans-serif; }
.approaches-outcome-card p { margin-top: 12px; color: var(--approach-body); font: 400 16px/1.7 var(--approach-font); }
.approaches-outcomes__closing { max-width: 840px; margin-top: 30px; padding: 22px 24px; border-left: 4px solid var(--approach-orange); background: var(--approach-blue-soft); color: var(--approach-body); font: 400 16px/1.75 var(--approach-font); }
@media (max-width: 760px) {
  .approaches-outcomes { padding: 64px 0; }
  .approaches-outcomes__grid { grid-template-columns: 1fr; }
}