:root {
  --ink:#17191a;
  --muted:#5e6464;
  --paper:#f7f7f5;
  --line:#d8dcda;
  --green:#c8f3d2;
  --dark:#12382d;
  --blue:#dceaf5;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

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

a {
  color:inherit;
  text-decoration:none;
}

a:focus-visible {
  outline:3px solid #31785d;
  outline-offset:4px;
}

.wrap {
  max-width:1440px;
  margin:auto;
  padding:0 5.2%;
}

.header {
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}

.brand {
  font-weight:700;
  font-size:19px;
  letter-spacing:-.05em;
}

.brand span {
  color:#668f7b;
}

.nav {
  display:flex;
  gap:32px;
  align-items:center;
  font-size:14px;
}

.nav a:hover {
  text-decoration:underline;
}

.language {
  font-size:13px;
  white-space:nowrap;
}

.language a {
  padding:5px;
}

.language [aria-current="page"] {
  font-weight:700;
  text-decoration:underline;
}

.nav .contact {
  border:1px solid #1b2420;
  border-radius:50px;
  padding:11px 18px;
}

.hero {
  padding-top:100px;
}

.eyebrow {
  font-size:14px;
  color:#52605a;
  margin:0 0 24px;
}

.hero h1 {
  font-size:clamp(52px,7.5vw,112px);
  letter-spacing:-.075em;
  line-height:.99;
  font-weight:500;
  max-width:1120px;
  margin:0;
}

.hero-bottom {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  align-items:end;
  margin:48px 0 80px;
}

.intro {
  max-width:510px;
  font-size:clamp(19px,2vw,24px);
  line-height:1.45;
  letter-spacing:-.025em;
  margin:0;
}

.hero-action {
  justify-self:end;
}

.button {
  display:inline-flex;
  align-items:center;
  gap:25px;
  background:var(--ink);
  color:white;
  padding:17px 23px;
  border-radius:40px;
  font-size:14px;
  font-weight:600;
}

.button:hover {
  background:#315c4b;
}

.button span {
  font-size:19px;
}

.visual {
  height:360px;
  background:var(--green);
  border-radius:3px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:36px;
}

.visual:before,.visual:after {
  content:"";
  position:absolute;
  border:1px solid rgba(18,56,45,.28);
  border-radius:50%;
  width:520px;
  height:520px;
  top:-80px;
  left:52%;
  transform:translateX(-50%);
}

.visual:after {
  width:360px;
  height:360px;
  top:0;
  background:rgba(255,255,255,.17);
}

.visual-label {
  position:relative;
  z-index:1;
  color:var(--dark);
  font-size:15px;
  line-height:1.45;
  max-width:240px;
}

.visual-mark {
  position:absolute;
  right:5%;
  bottom:30px;
  font-size:clamp(75px,12vw,170px);
  line-height:1;
  font-weight:600;
  letter-spacing:-.09em;
  color:var(--dark);
}

section {
  scroll-margin-top:30px;
}

.section {
  padding:120px 0;
  border-bottom:1px solid var(--line);
}

.section-grid {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:40px;
}

.section-label {
  font-size:14px;
  color:var(--muted);
  margin:8px 0;
}

.section h2 {
  font-size:clamp(38px,4.5vw,64px);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.055em;
  margin:0 0 34px;
  max-width:800px;
}

.lead {
  font-size:clamp(20px,2.1vw,27px);
  line-height:1.45;
  letter-spacing:-.025em;
  max-width:780px;
  margin:0;
  color:#343a37;
}

.services {
  margin-top:70px;
}

.service {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:30px;
  border-top:1px solid var(--line);
  padding:30px 0 35px;
}

.service h3 {
  font-size:25px;
  font-weight:500;
  letter-spacing:-.035em;
  margin:0;
}

.service p {
  font-size:16px;
  line-height:1.6;
  color:var(--muted);
  max-width:530px;
  margin:0;
}

.body-copy {
  font-size:16px;
  color:#53605a;
  line-height:1.65;
  margin:0;
}

.about-copy p+p {
  margin-top:20px;
}

.tags {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:35px;
}

.tags span {
  border:1px solid #c5ceca;
  border-radius:30px;
  padding:9px 13px;
  font-size:13px;
}

.project {
  background:var(--blue);
  padding:48px;
  margin-top:70px;
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:end;
}

.cta {
  background:var(--dark);
  color:#f5fff8;
  padding:110px 0;
}

.cta h2 {
  font-size:clamp(45px,6.4vw,88px);
  font-weight:500;
  letter-spacing:-.065em;
  line-height:1.02;
  max-width:850px;
  margin:0 0 30px;
}

.cta p {
  max-width:570px;
  color:#c5d9cb;
  font-size:19px;
  line-height:1.55;
  margin:0 0 35px;
}

.cta .button {
  background:#f4fff6;
  color:var(--dark);
}

.footer {
  background:var(--dark);
  color:#c5d9cb;
  padding:30px 0;
  border-top:1px solid #416153;
  font-size:13px;
}

.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:20px;
}

.footer a {
  text-decoration:underline;
}

@media(max-width:700px) {
  .wrap {
    padding:0 6%;
  }

  .header {
    height:67px;
  }

  .nav {
    gap:16px;
  }

  .nav>a:not(.contact) {
    display:none;
  }

  .hero {
    padding-top:70px;
  }

  .hero h1 {
    font-size:clamp(47px,12vw,72px);
  }

  .hero-bottom {
    grid-template-columns:1fr;
    margin:32px 0 55px;
  }

  .hero-action {
    justify-self:start;
  }

  .visual {
    height:270px;
    padding:24px;
  }

  .visual:before {
    left:65%;
    width:360px;
    height:360px;
    top:-35px;
  }

  .visual:after {
    left:65%;
    width:245px;
    height:245px;
    top:25px;
  }

  .visual-mark {
    font-size:76px;
  }

  .section {
    padding:80px 0;
  }

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

  .services {
    margin-top:45px;
  }

  .service {
    grid-template-columns:1fr;
    gap:12px;
  }

  .project {
    padding:28px;
    display:block;
    margin-top:45px;
  }

  .cta {
    padding:80px 0;
  }

  .footer-inner {
    flex-direction:column;
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }

}

.wrap.section {
  padding:120px 5.2%;
}

.section-grid {
  grid-template-columns:minmax(160px,1fr) minmax(0,2fr);
}

.section-grid>div {
  min-width:0;
}

.results {
  background:#e8efeb;
}

.results .section {
  border:0;
}

.results-list {
  margin-top:60px;
  border-top:1px solid #aebdb3;
}

.result {
  display:grid;
  grid-template-columns:minmax(180px, .8fr) minmax(0,1.2fr);
  gap:40px;
  padding:34px 0;
  border-bottom:1px solid #aebdb3;
}

.result-value {
  font-size:clamp(36px,4.4vw,64px);
  line-height:1;
  letter-spacing:-.06em;
  font-weight:500;
  color:var(--dark);
}

.result h3 {
  font-size:22px;
  letter-spacing:-.03em;
  font-weight:500;
  margin:0 0 12px;
}

.result p {
  color:#48594f;
  line-height:1.6;
  margin:0;
  max-width:560px;
}

.credentials {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:36px;
  margin-top:54px;
}

.credential {
  border-top:1px solid var(--line);
  padding-top:22px;
}

.credential h3 {
  font-size:23px;
  letter-spacing:-.035em;
  font-weight:500;
  margin:0 0 14px;
}

.credential p {
  font-size:16px;
  line-height:1.65;
  color:var(--muted);
  margin:0;
}

.about-copy .body-copy {
  max-width:720px;
}

.about-copy .lead {
  margin-bottom:26px;
}

@media(max-width:700px) {
  .wrap.section {
    padding:80px 6%;
  }

  .section-grid {
    grid-template-columns:minmax(0,1fr);
  }

  .result {
    grid-template-columns:minmax(0,1fr);
    gap:18px;
  }

  .credentials {
    grid-template-columns:minmax(0,1fr);
    gap:30px;
  }

}

.project {
  background:transparent;
  padding:0;
  margin-top:80px;
  display:block;
  border-top:1px solid var(--line);
}

.project-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:22px 0;
  color:var(--muted);
  font-size:14px;
}

.project-head a {
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
}

.project-body {
  background:#e8efeb;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(190px,.75fr);
  align-items:stretch;
  overflow:hidden;
  min-height:260px;
}

.project-copy {
  padding:42px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
}

.project-copy h3 {
  font-size:clamp(46px,5vw,68px);
  line-height:1;
  font-weight:500;
  letter-spacing:-.065em;
  margin:0;
  color:var(--dark);
}

.project-copy p {
  font-size:16px;
  line-height:1.55;
  color:#455b4e;
  max-width:360px;
  margin:0;
}

.project-art {
  position:relative;
  overflow:hidden;
  background:#c8f3d2;
  min-height:230px;
}

.project-art:before,.project-art:after {
  content:"";
  position:absolute;
  inset:50% auto auto 50%;
  width:240px;
  height:240px;
  border:1px solid rgba(18,56,45,.3);
  border-radius:50%;
  transform:translate(-50%,-50%);
}

.project-art:after {
  width:150px;
  height:150px;
  background:rgba(255,255,255,.22);
}

.project-art span {
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  z-index:1;
  color:var(--dark);
  font-size:68px;
  line-height:1;
  font-weight:600;
  letter-spacing:-.08em;
}

@media(max-width:700px) {
  .project {
    padding:0;
    margin-top:55px;
  }

  .project-body {
    grid-template-columns:1fr;
    min-height:0;
  }

  .project-copy {
    padding:30px;
    gap:30px;
  }

  .project-art {
    min-height:180px;
  }

  .project-art:before {
    width:220px;
    height:220px;
  }

  .project-art:after {
    width:135px;
    height:135px;
  }

  .project-art span {
    font-size:58px;
  }

}

.cta .eyebrow {
  color:#bbd1c1;
}

.inline-link {
  text-decoration:underline;
  text-underline-offset:3px;
}

.inline-link:hover {
  text-decoration-thickness:2px;
}

.credential-heading {
  display:flex;
  align-items:center;
  gap:14px;
  min-height:52px;
  margin-bottom:14px;
}

.credential-heading h3 {
  margin:0;
}

.cka-logo {
  flex:none;
  width:52px;
  height:52px;
  object-fit:contain;
}

.result .result-followup {
  margin-top:14px;
}