:root{
  --paper:#F7F8F6;
  --card:#FFFFFF;
  --ink:#16231C;
  --muted:#5A665F;
  --serp:#0B7A3F;
  --serp-dark:#085C30;
  --line:#E2E7E2;
  --maxw:880px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:var(--serp);text-decoration:none}
a:hover{color:var(--serp-dark);text-decoration:underline}

/* Links sitting inside body text are underlined, so they are distinguishable
   without relying on colour alone (WCAG 1.4.1). Nav links, buttons and the
   contact address are visually distinct by position and styling already. */
p a, .case li a, .cols li a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
p a:hover, .case li a:hover, .cols li a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible{outline:2px solid var(--serp);outline-offset:3px;border-radius:2px}
img{max-width:100%;height:auto;display:block}

/* ---------- Nav ---------- */
nav{display:flex;justify-content:space-between;align-items:center;padding:28px 0;gap:20px}
.brand{font-family:'Newsreader',serif;font-weight:600;font-size:1.15rem;color:var(--ink)}
.brand:hover{text-decoration:none;color:var(--serp-dark)}
nav ul{display:flex;gap:26px;list-style:none;flex-wrap:wrap}
nav ul a{color:var(--muted);font-size:.92rem;font-weight:500}
nav ul a:hover{color:var(--ink);text-decoration:none}
nav ul a.current{color:var(--ink)}

/* ---------- Hero ---------- */
header.hero{padding:52px 0 68px}
.searchbar{
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:14px 22px;max-width:580px;
  box-shadow:0 1px 2px rgba(22,35,28,.05);margin-bottom:38px;
}
.searchbar svg{flex:none;width:18px;height:18px;stroke:var(--muted)}
.searchbar .query{
  font-family:'IBM Plex Mono',monospace;font-size:.88rem;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.caret{
  display:inline-block;width:8px;height:1.05em;background:var(--serp);
  vertical-align:text-bottom;margin-left:2px;animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.caret{animation:none}html{scroll-behavior:auto}}
h1{
  font-family:'Newsreader',serif;font-weight:600;
  font-size:clamp(2.2rem,5.4vw,3.4rem);line-height:1.12;letter-spacing:-.01em;
  max-width:16ch;margin-bottom:24px;
}
h1.wide{max-width:22ch}
h1 em{font-style:italic;color:var(--serp)}
.lede{max-width:58ch;color:var(--muted);font-size:1.06rem;margin-bottom:34px}
.lede strong{color:var(--ink);font-weight:600}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;border-radius:6px;font-weight:600;font-size:.95rem}
.btn-primary{background:var(--serp);color:#fff}
.btn-primary:hover{background:var(--serp-dark);color:#fff;text-decoration:none}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:var(--card)}
.btn-ghost:hover{border-color:var(--muted);text-decoration:none;color:var(--ink)}

/* ---------- Proof strip ---------- */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}
.proof .wrap{display:flex;gap:12px 36px;flex-wrap:wrap;font-size:.87rem;color:var(--muted)}
.proof span::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--serp);margin-right:10px;vertical-align:2px;
}

/* ---------- Sections ---------- */
section{padding:72px 0}
section.tight{padding:56px 0}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--serp);margin-bottom:14px;
}
h2{
  font-family:'Newsreader',serif;font-weight:600;
  font-size:clamp(1.7rem,3.4vw,2.25rem);line-height:1.2;
  margin-bottom:18px;letter-spacing:-.005em;
}
.section-intro{max-width:60ch;color:var(--muted);margin-bottom:42px}
.divider{border-top:1px solid var(--line)}

/* ---------- Case cards ---------- */
.case{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:28px 30px;margin-bottom:20px;transition:border-color .15s ease;
}
.case:hover{border-color:#BFCBC2}
.case.flag{border-left:3px solid var(--serp)}
.dataline{
  font-family:'IBM Plex Mono',monospace;font-size:.79rem;color:var(--serp);
  margin-bottom:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;
}
.dataline .sep{color:var(--line)}
.dataline .up{color:var(--serp-dark);font-weight:500}
.case h3{font-family:'Newsreader',serif;font-weight:600;font-size:1.33rem;line-height:1.3;margin-bottom:10px}
.case p{color:var(--muted);font-size:.97rem;max-width:66ch}
.case p + p{margin-top:12px}
.case p strong{color:var(--ink);font-weight:600}
.case ul{list-style:none;margin-top:14px}
.case ul li{
  color:var(--muted);font-size:.94rem;padding:7px 0 7px 20px;position:relative;
  border-bottom:1px solid var(--line);
}
.case ul li:last-child{border-bottom:none}
.case ul li::before{content:"";position:absolute;left:0;top:16px;width:8px;height:1px;background:var(--serp)}
.case ul li strong{color:var(--ink);font-weight:600}
.niche-label{
  display:inline-block;margin-top:16px;font-size:.77rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:4px;padding:3px 9px;
}

/* ---------- Results / figures ---------- */
figure{margin-top:20px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper)}
figcaption{
  font-family:'IBM Plex Mono',monospace;font-size:.76rem;color:var(--muted);
  padding:10px 14px;border-top:1px solid var(--line);background:var(--card);
}
.figure-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:680px){.figure-grid{grid-template-columns:1fr}}
.figure-grid figure{margin-top:0}

/* ---------- Two columns ---------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:44px}
@media (max-width:680px){.cols{grid-template-columns:1fr}}
.cols h3{font-family:'Newsreader',serif;font-weight:600;font-size:1.22rem;margin-bottom:14px}
.cols ul{list-style:none}
.cols li{padding:11px 0;border-bottom:1px solid var(--line);font-size:.96rem;color:var(--muted)}
.cols li strong{color:var(--ink);font-weight:600}
.cols li:last-child{border-bottom:none}

/* ---------- Toolbelt ---------- */
.tools{display:flex;flex-wrap:wrap;gap:10px}
.tools span{
  font-family:'IBM Plex Mono',monospace;font-size:.82rem;color:var(--muted);
  border:1px solid var(--line);background:var(--card);border-radius:5px;padding:6px 12px;
}

/* ---------- Rates ---------- */
.rates{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:30px 32px;max-width:580px}
.rates p{color:var(--muted);font-size:.96rem}
.rates .figure-line{font-family:'Newsreader',serif;font-weight:600;font-size:1.45rem;color:var(--ink);margin-bottom:6px}

/* ---------- Contact ---------- */
.email-big{font-family:'Newsreader',serif;font-weight:600;font-size:clamp(1.4rem,3.4vw,2rem);word-break:break-all}
.contact-note{color:var(--muted);font-size:.94rem;margin-top:14px;max-width:54ch}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:26px 0 40px;font-size:.84rem;color:var(--muted);margin-top:40px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}