:root {
  --ink: #0b3d2e;
  --green: #13795b;
  --mint: #e4f1ea;
  --mint-2: #cfe6da;
  --bg: #ffffff;
  --s1: .25rem;
  --s2: .5rem;
  --s3: .75rem;
  --s4: 1rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s12: 3rem;
  --s16: 4rem;
  --gutter: max(clamp(1rem, 5vw, 4rem), calc((100vw - 80rem) / 2));
  --hairline-plate: var(--bg);
  --hairline-hi: var(--ink);
  --hairline-edge: var(--green);
  --hairline-mid: #8fbfa8;
  --hairline-lo: #b9d9c8;
  --hairline-stroke: 1;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/24px "IBM Plex Mono", Consolas, monospace;
}
p, h1, h2, dl, dd, ul { margin: 0; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
strong { font-weight: 600; }

header {
  position: sticky; top: 0; z-index: 1;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s8);
  padding: var(--s3) var(--gutter);
  background: rgba(255, 255, 255, .95);
  border-bottom: 1px solid var(--ink);
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
}
.brand { font-weight: 600; text-decoration: none; }
nav { display: flex; align-items: center; gap: var(--s8); }
nav a { text-decoration: none; padding-block: var(--s2); }
nav a:hover { text-decoration: underline; }
nav .cta { background: var(--ink); color: #fff; padding: var(--s2) var(--s4); }
nav .cta:hover { background: var(--green); text-decoration: none; }

main { padding: 0 var(--gutter); }
section { padding-block: var(--s16) var(--s4); scroll-margin-top: var(--s16); }

.row {
  display: grid;
  grid-template-columns: minmax(9rem, 16rem) 1fr;
  column-gap: var(--s8);
  row-gap: var(--s6);
  margin-bottom: var(--s8);
}
/* 2px optical nudge so 13px labels sit on the 15px text's line */
.k {
  font-weight: 300; font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; padding-top: 2px;
}
.v { max-width: 62ch; }
.v > p + p { margin-top: var(--s4); }
.lede { font-weight: 600; font-size: 1.1rem; line-height: 28px; }
.note { font-style: italic; font-weight: 300; }

.btn {
  display: inline-block; background: var(--ink); color: #fff;
  padding: var(--s3) var(--s6); font-weight: 600; text-decoration: none;
}
.btn:hover { background: var(--green); }

.hero { padding-top: var(--s16); align-items: start; }
.hero .v { max-width: none; }
.hero h1 + p { font-size: 1.25rem; line-height: 32px; text-wrap: pretty; max-width: 68ch; }
.v.lede { max-width: none; }
.hero img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: top;
}
h1 {
  font-weight: 600; font-size: clamp(1.6rem, 3.2vw, 3rem);
  line-height: 1.2; letter-spacing: -.02em; margin-bottom: var(--s4);
}
.v > .go { margin-top: var(--s8); }
.v > .go + .note { margin-top: var(--s3); }

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s8);
  margin: var(--s8) calc(-1 * var(--gutter)) 0; padding: var(--s12) var(--gutter);
  background: var(--ink); color: var(--mint);
  font-size: 13px; line-height: 20px;
}
.stats strong {
  display: block; color: #fff;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -.03em;
  margin-bottom: var(--s2);
}

.teasers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.teaser {
  display: flex; flex-direction: column; gap: var(--s2);
  background: var(--mint); padding: var(--s8); text-decoration: none;
  transition: background .15s;
}
.teaser:hover { background: var(--mint-2); }
.teaser { --hairline-plate: var(--mint); }
.teaser:hover { --hairline-plate: var(--mint-2); }
.teaser .tag { margin-bottom: var(--s2); }
.fig { aspect-ratio: 5 / 4; width: 100%; max-width: 240px; }
.teaser .fig { margin: calc(-1 * var(--s4)) 0 calc(-1 * var(--s2)) calc(-1 * var(--s4)); }
.num { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--green); }
h2 { font-weight: 600; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.02em; }
.tag { font-style: italic; font-weight: 300; }
.more { margin-top: auto; padding-top: var(--s4); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }

.timeline { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s4) var(--s6); }
.timeline dt { color: var(--green); font-weight: 600; }

.closing { background: var(--mint); margin: var(--s16) calc(-1 * var(--gutter)) 0; padding: var(--s12) var(--gutter); }
.closing .v > p + p { margin-top: var(--s6); }
.closing .v { max-width: none; }

.offer-page h1 { margin-bottom: var(--s2); }
.offer-page .tag { font-size: 1.05rem; margin-bottom: var(--s6); }
.offer-page .k a { text-decoration: none; }
.offer-page .k .num { display: block; margin-top: var(--s6); text-transform: none; }
.offer-page .k .fig { margin-top: var(--s6); }
.offer-page dl.row { row-gap: var(--s8); }
.offer-page dt.k { color: var(--green); font-weight: 600; }
.offer-page ul { padding-left: var(--s4); }
.offer-page li + li { margin-top: var(--s2); }
.pager { padding-block: var(--s12); }
.panel { display: none; }
@media (min-width: 1200px) {
  .offer-page { display: grid; grid-template-columns: 1fr 18rem; column-gap: var(--s8); align-items: start; }
  .offer-page > * { grid-column: 1; }
  .offer-page > .closing, .offer-page > .pager { grid-column: 1 / -1; }
  .panel {
    display: block; grid-column: 2; grid-row: 1 / span 2;
    position: sticky; top: calc(var(--s16) + var(--s6)); margin-top: var(--s16);
    background: var(--mint); padding: var(--s6);
  }
  .panel > p + p { margin-top: var(--s4); }
  .panel .note { font-size: 13px; }
}

footer { padding: var(--s8) var(--gutter) var(--s12); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 900px) {
  .teasers { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  :root { --gutter: var(--s4); }
  .row { grid-template-columns: 1fr; row-gap: var(--s2); }
  dd.v { margin-bottom: var(--s6); }
  .hero .k { max-width: 220px; margin-bottom: var(--s4); }
  .hide-sm, .offer-page .fig { display: none; }
  section { padding-block: var(--s12) var(--s2); }
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline dd { margin-bottom: var(--s4); }
}