:root {
  --navy: #18334b;
  --paper: #f0eee7;
  --panel: #d8e2df;
  --green: #206f1c;
  --work-heading: #1c6119;
  --approach-heading: #77b875;
  --perspectives-heading: #1c6119;
  --line: #a3b2b7;
  --approach-line: #6e8a9f;
  --approach-copy: #d6e2eb;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--navy);
  background: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; border-radius: 2px; }

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  padding: 0 5vw;
  border-bottom: 1px solid var(--line);
}

nav > div { display: flex; gap: 34px; }
nav > div a { font-size: 18px; }

.brand { display: flex; flex-direction: column; line-height: .78; letter-spacing: .12em; }
.brand b { font-size: 18px; }
.brand span { margin-top: 7px; font-size: 16px; letter-spacing: .29em; }

.hero { padding: 55px 5vw 0; }
.hero-copy { display: grid; grid-template-columns: 1fr; row-gap: min(3vw, 44.28px); }
.hero h1 { margin: 0; font: 400 clamp(54px, 7.1vw, 75px)/.92 Georgia, serif; letter-spacing: -.045em; }
.hero h1 em { color: #1c6119; font-weight: 400; }
.hero .intro { max-width: 1400px; margin: 40px 0 58px; font-size: clamp(19px, calc(1.2vw + 7.6px), 25px); line-height: 1.62; }

.work-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 464px);
  align-items: center;
  margin: 8px -5vw 0;
  padding: 72px 5vw;
  gap: clamp(48px, 7vw, 120px);
  background: var(--panel);
}

.work-copy { max-width: 960px; }

.work-label, .approach header p, .perspectives-label {
  font: italic 400 clamp(40px, 5.68vw, 55px)/1.15 Georgia, serif;
  letter-spacing: 0;
  text-transform: none;
}

.work-label { margin: 0 0 34px; color: var(--work-heading); }
.work-copy > p:not(.work-label) { max-width: 920px; margin: 0 0 22px; font-size: 18px; line-height: 1.65; }
.work-copy ul { display: grid; max-width: 920px; margin: 38px 0 0 32px; padding: 0; gap: 13px; list-style: none; }
.work-copy li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.45; }
.work-copy li::before { content: ""; position: absolute; top: .72em; left: 0; width: 8px; height: 1px; background: var(--green); }
.work-context { max-width: 920px; margin-top: 34px; }
.work-context p { margin: 0 0 22px; font-size: 18px; line-height: 1.65; }
.work-context a { border-bottom: 1px solid currentColor; }

.work-image { justify-self: end; width: 100%; max-width: 464px; margin: 0; }
.work-image-frame { overflow: hidden; }
.work-image img { display: block; width: 100%; height: auto; }
.work-image figcaption { margin-top: 12px; font: 18px/1.4 Arial, sans-serif; text-align: center; }

.approach { padding: 82.5px 5vw; color: #fff; background: var(--navy); }
.approach > header { margin-bottom: 30px; }
.approach header p { margin: 0 0 18px; color: var(--approach-heading); }
.approach h2 { margin: 0; font: 400 40px/1 Georgia, serif; text-align: center; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--approach-line); }
.steps article { min-height: 0; padding: 34px 28px 0 0; border-right: 1px solid var(--approach-line); }
.steps article + article { padding-left: 28px; }
.steps h3 { margin: 24px 0 18px; font: 400 29px/1.05 Georgia, serif; }
.steps p { margin-bottom: 0; color: var(--approach-copy); font-size: 16px; line-height: 1.65; }

.testimonial-section { padding: 86px 5vw 110px; background: var(--paper); }
.perspectives-label { margin: 0 0 32px; color: var(--perspectives-heading); }
.testimonial-list { position: relative; }
.testimonial-list:not(.is-expanded)::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 65px; background: linear-gradient(transparent, var(--paper)); pointer-events: none; }
.testimonial { display: grid; grid-template-columns: clamp(205px, 25vw, 305px) minmax(0, 1fr); gap: clamp(31px, calc(56px - 2vw), 50px); padding: 21px 0; border-bottom: 1px solid var(--line); }
.testimonial[hidden] { display: none; }
.testimonial:last-child, .testimonial-list:not(.is-expanded) .testimonial:nth-child(2) { border-bottom: 0; }
.person, .quote-content { min-width: 0; }
.person h3 { margin: 0; font: 400 22px/1.2 Georgia, serif; }
.person p { margin: 10px 0 0; font-size: 16px; line-height: 1.5; }
.quote-topic { margin: 0 0 6px; color: var(--green); font: italic 400 16px/1.2 Georgia, serif; }
.testimonial blockquote { position: relative; margin: 0; font: 400 clamp(20px, calc(1.2vw + 10px), 24px)/1.24 Georgia, serif; }
.testimonial .quote-mark { position: absolute; right: 100%; width: .58em; font: inherit; text-align: left; }

.perspectives-toggle { display: block; margin: 30px auto 0; padding: 10px 2px 6px; border: 0; border-bottom: 1px solid currentColor; color: #1c6119; background: transparent; font: italic 400 30px/1.3 Georgia, serif; cursor: pointer; }

.closing { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; overflow: hidden; padding: 63.75px 5vw; color: #fff; background: #10380e; }
.closing p, .closing a { max-width: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; font-weight: 400; letter-spacing: -.025em; white-space: normal; }
.closing p { font-size: clamp(21.6px, 3.055555vw, 36px); }
.closing a { border-bottom: 1px solid currentColor; font-size: clamp(16px, 2.013889vw, 29px); font-weight: 300; letter-spacing: -.035em; }

footer { display: flex; align-items: center; justify-content: space-between; min-height: 105px; padding: 35px 5vw; font-size: 16px; }
footer a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (min-width: 1811px) {
  nav,
  .hero,
  .approach,
  .testimonial-section,
  .closing,
  footer {
    padding-right: calc((100vw - 1810px) / 2 + 90.5px);
    padding-left: calc((100vw - 1810px) / 2 + 90.5px);
  }

  .work-feature {
    margin-right: calc((100vw - 1810px) / -2 - 90.5px);
    margin-left: calc((100vw - 1810px) / -2 - 90.5px);
    padding-right: calc((100vw - 1810px) / 2 + 90.5px);
    padding-left: calc((100vw - 1810px) / 2 + 90.5px);
  }
}

@media (min-width: 851px) and (max-width: 1100px) {
  .work-feature { grid-template-columns: minmax(0, 1fr) calc(25.703vw + 181.27px); gap: calc(24.498vw - 192.48px); padding-right: calc(14.056vw - 99.61px); padding-left: 5vw; }
  .work-copy ul { margin-left: calc(6.426vw - 38.69px); }
}

@media (max-width: 1040px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (min-width: 851px) and (max-width: 1040px) {
  .steps article:nth-child(odd) { padding-left: 0; }
}

@media (max-width: 886px) { .desktop-intro-break { display: none; } }

@media (max-width: 850px) {
  .work-feature { grid-template-columns: 1fr; padding: 60px 5vw; gap: 46px; }
  .work-image { justify-self: start; }
  .work-copy ul { margin-top: 26px; gap: 8px; }
  .work-copy li { padding-left: 20px; line-height: 1.35; }
  .work-copy li::before { width: 7px; }
  .work-context { margin-top: 24px; }
  .testimonial-section { padding-top: 62px; padding-bottom: 80px; }
}

@media (min-width: 521px) and (max-width: 850px) {
  .steps article { min-height: 250px; }
}

@media (min-width: 520px) and (max-width: 850px) { .work-image { justify-self: center; } }

@media (max-width: 620px) {
  footer { flex-direction: column; align-items: flex-start; gap: 20px; }
}

@media (max-width: 560px) {
  .testimonial-section { padding-top: 51px; padding-bottom: 64px; }
  .perspectives-label { margin-bottom: 19px; }
  .testimonial { grid-template-columns: 1fr; gap: 27px; }
  .testimonial blockquote { margin-left: .58em; }
}

@media (max-width: 520px) {
  nav { height: 72px; padding: 0 20px; }
  .hero, .approach, .testimonial-section, .closing { padding-right: 20px; padding-left: 20px; }
  .hero h1 { font-size: 13vw; }
  .hero .intro { font-size: 17px; }
  .work-feature { margin-right: -20px; margin-left: -20px; padding: 51px 20px; }
  .work-copy ul { margin-left: 20px; }
  .work-image-frame { aspect-ratio: 464 / 407; }
  .steps { grid-template-columns: 1fr; }
  .steps article, .steps article + article { min-height: auto; padding: 9.333px 0; border-right: 0; }
  .steps h3 { margin-top: 8px; margin-bottom: 4px; }
  .testimonial { padding: 10.5px 0; }
  footer { padding: 30px 20px; }
}