.approach-page {
  background: #142019;
}
.approach-page h1,
.approach-page main h2 {
  font-family: var(--sans);
  font-weight: 400;
  line-height: .99;
  letter-spacing: -.065em;
  margin: 0;
}
.approach-page main em {
  font-family: var(--serif);
  font-weight: 400;
}
.approach-hero {
  padding: clamp(155px, 15vw, 218px) 0 clamp(64px, 8vw, 108px);
  color: #edf3ed;
  background: radial-gradient(ellipse at 76% 40%, #344a3a70, transparent 57%);
}
.approach-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(35px, 7vw, 100px);
}
.approach-hero h1 {
  font-size: clamp(64px, 7.6vw, 112px);
}
.approach-hero h1 em,
.approach-decision h2 em {
  color: #b0c8b7;
}
.approach-hero p {
  max-width: 39ch;
  margin: 26px 0 0;
  font: 16px/1.7 var(--sans);
  color: #adbbb1;
}
.approach-loop {
  position: relative;
  width: 100%;
  max-width: 550px;
  aspect-ratio: 500 / 280;
  justify-self: end;
}
.approach-loop-line {
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: #8ba49380;
  stroke-width: 1;
}
.approach-loop-inner {
  stroke: #8ba49330;
}
.approach-loop-line .approach-direction {
  stroke: #bbcebd;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.approach-loop-name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font: italic clamp(19px, 2.3vw, 33px)/1 var(--serif);
  color: #c2d4c6;
  white-space: nowrap;
}
.approach-loop ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.approach-loop li {
  position: absolute;
  transform: translate(-50%,-50%);
}
.approach-loop li:nth-child(1) { left: 50%; top: 14.29%; }
.approach-loop li:nth-child(2) { left: 81.18%; top: 32.14%; }
.approach-loop li:nth-child(3) { left: 81.18%; top: 67.86%; }
.approach-loop li:nth-child(4) { left: 50%; top: 85.71%; }
.approach-loop li:nth-child(5) { left: 18.82%; top: 67.86%; }
.approach-loop li:nth-child(6) { left: 18.82%; top: 32.14%; }
.approach-loop a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 10px;
  border: 1px solid #98ad9b45;
  border-radius: 24px;
  background: #1d3025;
  color: #d0ded2;
  font: 11px/1 var(--mono);
  text-decoration: none;
  white-space: nowrap;
}
.approach-loop a:is(:hover,:focus-visible) {
  color: #15251a;
  background: #c8d8c9;
}
.approach-method,
.approach-example {
  background: #eff1ea;
  color: #16231b;
  padding-block: clamp(72px, 8vw, 126px);
}
.approach-method-grid,
.approach-example-grid,
.approach-decision-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(45px, 8vw, 140px);
}
.approach-page main h2 {
  font-size: clamp(44px, 5.2vw, 74px);
}
.approach-method h2 em,
.approach-example h2 em {
  color: #58705e;
}
.approach-method header > p,
.approach-steps p,
.approach-decision p,
.approach-example p {
  font: 15px/1.72 var(--sans);
  color: #516358;
  max-width: 58ch;
}
.approach-method header > p {
  max-width: 32ch;
  margin: 22px 0 0;
}
.approach-steps {
  list-style: none;
  counter-reset: method;
  margin: 0;
  padding: 0;
  border-top: 1px solid #a6b4a8;
}
.approach-steps li {
  counter-increment: method;
  position: relative;
  border-bottom: 1px solid #c8d1c8;
  padding: 24px 0 27px 42px;
  scroll-margin-top: 24px;
}
.approach-steps li::before {
  content: counter(method, decimal-leading-zero);
  position: absolute;
  top: 30px;
  left: 0;
  color: #5d7664;
  font: 10px/1.5 var(--mono);
}
.approach-steps h3 {
  font: 400 clamp(22px, 2.2vw, 32px)/1.15 var(--sans);
  letter-spacing: -.045em;
  margin: 0;
}
.approach-steps p {
  margin: 10px 0 0;
}
.approach-decision {
  padding-block: clamp(60px, 6vw, 95px);
  background: #1b2d23;
  color: #edf3ed;
}
.approach-decision p {
  color: #bed0c3;
}
.approach-decision p:first-child,
.approach-example p:first-child {
  margin-top: 0;
}
.approach-decision p:last-child { margin-bottom: 0; }
.approach-example {
  background: #e0e7dd;
}
.approach-example .approach-question {
  color: #263c2d;
  font: 400 clamp(26px, 2.7vw, 39px)/1.18 var(--serif);
  letter-spacing: -.02em;
  margin-bottom: 20px;
}
.approach-example .text-link { margin-top: 8px; }
@media (max-width: 850px) {
  .approach-hero-grid { gap: 25px; }
  .approach-loop a { font-size: 10px; padding: 9px 8px; }
  .approach-hero p { font-size: 15px; }
}
@media (max-width: 650px) {
  .approach-hero { padding: 147px 0 53px; }
  .approach-hero-grid,
  .approach-method-grid,
  .approach-example-grid,
  .approach-decision-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 33px;
  }
  .approach-hero h1 { font-size: clamp(57px, 12vw, 73px); }
  .approach-loop { max-width: 430px; justify-self: start; }
  .approach-loop a { min-height: 36px; }
  .approach-method,
  .approach-example { padding-block: 63px; }
  .approach-steps li { padding-left: 34px; }
  .approach-method header > p { max-width: 42ch; }
}