:root {
  /* Light theme — the complete palette lives here */
  --bg:          #f1f4f3;
  --surface:     #ffffff;
  --surface-2:   #e7ecea;
  --ink:         #0d1a19;
  --ink-2:       #2c3b37;
  --muted:       #4e5f5b;
  --line:        #d3dcd9;
  --line-strong: #adbcb7;
  --accent:      #0c6a59;
  --accent-ink:  #ffffff;
  --accent-soft: #dfeee8;
  --signal:      #a9501e;

  --maxw: 1160px;
  --gutter: clamp(20px, 5vw, 56px);

  --f-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0a1211;
    --surface:     #111b19;
    --surface-2:   #16221f;
    --ink:         #e9efec;
    --ink-2:       #cfdad6;
    --muted:       #a3b3af;
    --line:        #21302d;
    --line-strong: #37504b;
    --accent:      #4bbb9f;
    --accent-ink:  #05100e;
    --accent-soft: #102a25;
    --signal:      #dd9059;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:          #0a1211;
  --surface:     #111b19;
  --surface-2:   #16221f;
  --ink:         #e9efec;
  --ink-2:       #cfdad6;
  --muted:       #a3b3af;
  --line:        #21302d;
  --line-strong: #37504b;
  --accent:      #4bbb9f;
  --accent-ink:  #05100e;
  --accent-soft: #102a25;
  --signal:      #dd9059;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.7;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.014em;
  line-height: 1.18;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; }
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
}
/* ---------- Header ---------- */

.masthead {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.masthead__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
}
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-right: auto;
  white-space: nowrap;
}
.wordmark:hover { text-decoration: none; }
.wordmark__mark {
  width: 19px;
  height: 19px;
  align-self: center;
  flex: none;
}
.wordmark__sub {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav a {
  font-size: 15px;
  white-space: nowrap;
  color: var(--ink-2);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--line-strong); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.navtoggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 9px 12px;
  cursor: pointer;
}
/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 13px 22px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; background: transparent; color: var(--accent); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--sm { padding: 10px 16px; font-size: 14px; }
/* ---------- Section framing ---------- */

.section { padding-block: clamp(56px, 8vw, 96px); border-top: 1px solid var(--line); }
.section--flush { border-top: 0; }
.section--tint { background: var(--surface-2); }
.eyebrow {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  display: block;
}
.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.section__head h2 { font-size: clamp(25px, 3.1vw, 34px); }
.section__head p { color: var(--muted); max-width: 60ch; }
.lede { font-size: clamp(18px, 1.6vw, 20.5px); color: var(--ink-2); max-width: 66ch; }
/* ---------- Hero ----------
   A fixed dark band in both themes: the photography is dark, so the panel
   commits to that rather than fighting it. Colours here are literals on
   purpose — they must not flip with the theme. */

.hero {
  background: #081110;
  color: #e9efec;
  border-bottom: 1px solid #1d2b28;
  padding-block: clamp(46px, 6.5vw, 88px);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.hero__body { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.hero__eyebrow {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #4bbb9f;
}
.hero h1 {
  font-size: clamp(33px, 5.2vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: #ffffff;
  margin: 0;
}
.hero h1 span { display: block; }
.hero h1 span:nth-child(2) { color: #4bbb9f; }
.hero__lede {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.65;
  color: #b9c7c3;
  max-width: 48ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .btn {
  background: #4bbb9f;
  border-color: #4bbb9f;
  color: #05100e;
}
.hero .btn:hover { background: transparent; color: #4bbb9f; }
.hero .btn--ghost {
  background: transparent;
  border-color: #3a504b;
  color: #e9efec;
}
.hero .btn--ghost:hover { background: #e9efec; border-color: #e9efec; color: #081110; }
.hero__media { margin: 0; line-height: 0; }
.hero__media picture { display: block; }
.hero__media img {
  display: block;
  width: 100%;
  height: auto;
  /* Dissolve the left and bottom edges into the panel so the photo reads as
     part of it rather than as a pasted rectangle. Two mask layers, intersected. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 17%),
                      linear-gradient(to bottom, transparent 0%, #000 7%, #000 76%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0%, #000 17%),
                      linear-gradient(to bottom, transparent 0%, #000 7%, #000 76%, transparent 100%);
          mask-composite: intersect;
}
@media (min-width: 901px) {
  /* Run the photo out to the right edge of the viewport. The distance from the
     shell's content edge to the screen edge is the page margin plus the gutter.
     Capped at the source width so it is never scaled up past its own pixels. */
  .hero__media {
    margin-right: calc(-1 * ((100vw - min(100vw, var(--maxw))) / 2 + var(--gutter)));
  }
  .hero__media picture { max-width: 1024px; margin-left: auto; }
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__media img {
    -webkit-mask-image: none;
            mask-image: none;
  }
}
/* ---------- Service index (numbered rows, not cards) ---------- */

.index { border-top: 1px solid var(--line); }
.index__row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1.05fr) minmax(0, 1.35fr) auto;
  gap: clamp(14px, 2.5vw, 32px);
  align-items: baseline;
  padding-block: 22px;
  border-bottom: 1px solid var(--line);
  transition: background .18s ease;
}
a.index__row:hover { text-decoration: none; background: var(--accent-soft); }
.index__num {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--signal);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.index__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(17px, 2vw, 21px); color: var(--ink); letter-spacing: -0.02em; }
.index__desc { color: var(--muted); font-size: 16px; }
.index__more {
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
/* ---------- Capability list ---------- */

.capabilities { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.capability { background: var(--bg); padding: clamp(20px, 2.6vw, 28px); display: flex; flex-direction: column; gap: 10px; }
.capability h3 { font-size: 17px; }
.capability p { color: var(--muted); font-size: 16px; }
/* ---------- Process stages ---------- */

.stages { display: grid; gap: 0; counter-reset: stage; }
.stage {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: clamp(14px, 3vw, 40px);
  padding-block: 26px;
  border-top: 1px solid var(--line);
}
.stage:last-child { border-bottom: 1px solid var(--line); }
.stage__no {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.stage h3 { font-size: clamp(18px, 2.1vw, 22px); margin-bottom: 8px; }
.stage p { color: var(--muted); max-width: 72ch; }
.stage ul { margin: 12px 0 0; padding-left: 20px; color: var(--muted); font-size: 16px; }
.stage li { margin-bottom: 4px; }
/* ---------- Case studies ---------- */

.case {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(22px, 3.2vw, 36px);
  display: grid;
  gap: 22px;
}
.cases { display: grid; gap: 20px; }
.case__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.case__head h3 { font-size: clamp(19px, 2.3vw, 25px); }
.case__tag {
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 4px 9px;
}
.case__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px 32px; }
.case__block h4 {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.case__block p { font-size: 16px; color: var(--ink-2); }
.case__outcome {
  border-left: 2px solid var(--accent);
  padding-left: 16px;
  font-size: 16px;
  color: var(--ink-2);
}
/* ---------- Tables ---------- */

.tablewrap { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 16px; }
caption { text-align: left; padding: 16px 18px; color: var(--muted); font-size: 14px; border-bottom: 1px solid var(--line); }
th, td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--accent-soft); }
td.area { font-family: var(--f-body); font-size: 14.5px; font-weight: 500; color: var(--accent); white-space: nowrap; }
/* ---------- Imagery ---------- */

.banner {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--surface-2);
  overflow: hidden;
  line-height: 0;
}
.banner picture { display: block; }
.banner img { display: block; width: 100%; height: auto; }
/* Page intro that carries an image beside the text */
.pagehead--media .shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.pagehead--media h1 { max-width: 16ch; }
@media (max-width: 900px) {
  .pagehead--media .shell { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Diagrams ---------- */

.figure {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(16px, 3vw, 30px);
  overflow-x: auto;
}
.figure svg { display: block; width: 100%; min-width: 700px; height: auto; }
.figure figcaption {
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted);
  min-width: 700px;
}
.dia-box { fill: var(--bg); stroke: var(--line-strong); }
.dia-box--accent { fill: var(--accent-soft); stroke: var(--accent); }
.dia-label { fill: var(--ink); font-family: var(--f-body); font-size: 16px; font-weight: 600; }
.dia-sub { fill: var(--ink-2); font-family: var(--f-body); font-size: 13px; }
.dia-line { stroke: var(--line-strong); fill: none; }
.dia-line--accent { stroke: var(--accent); fill: none; }
.dia-num { fill: var(--signal); font-family: var(--f-mono); font-size: 12px; }
.dia-dot { fill: var(--accent); }
/* ---------- Tag strip ---------- */

.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tags li {
  font-family: var(--f-body);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
}
/* ---------- Bullet list ---------- */

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.checks li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; color: var(--ink-2); font-size: 16.5px; align-items: start; }
.checks li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 9px;
  background: var(--accent);
  transform: rotate(45deg);
}
/* ---------- Callout ---------- */

.callout {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  padding: clamp(20px, 3vw, 28px);
  color: var(--ink-2);
  max-width: 78ch;
}
/* ---------- CTA band ---------- */

.cta { background: var(--ink); color: var(--bg); border-top: 0; }
.cta h2 { font-size: clamp(26px, 4vw, 42px); color: var(--bg); }
.cta p { color: color-mix(in srgb, var(--bg) 72%, var(--ink)); max-width: 58ch; }
.cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(22px, 4vw, 48px); align-items: center; }
.cta .btn { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cta .btn:hover { background: transparent; color: var(--accent); }
/* ---------- Form ---------- */

.form { display: grid; gap: 18px; max-width: 640px; }
.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field select, .field textarea {
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  padding: 12px 14px;
  width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field__hint { font-size: 14px; color: var(--muted); }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.formnote { font-size: 14px; color: var(--muted); max-width: 60ch; }
.formstatus { font-size: 15px; color: var(--accent); min-height: 1.4em; }
.formstatus[data-state="error"] { color: var(--signal); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ---------- Contact details ---------- */

.details { display: grid; gap: 0; border-top: 1px solid var(--line); }
.details div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--line); font-size: 16px; }
.details dt { font-family: var(--f-body); font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.details dd { margin: 0; color: var(--ink-2); }
/* ---------- Prose ---------- */

.prose { max-width: 68ch; display: grid; gap: 18px; }
.prose h3 { font-size: clamp(19px, 2.2vw, 23px); margin-top: 22px; }
.prose h4 { font-size: 17px; margin-top: 10px; color: var(--ink); }
.prose p { color: var(--ink-2); }
.prose ul { margin: 0; padding-left: 22px; color: var(--ink-2); display: grid; gap: 7px; }
.prose li { padding-left: 2px; }
.prose address { font-style: normal; color: var(--ink-2); line-height: 1.55; }
.prose .tablewrap { margin-block: 4px; }
/* ---------- Two-column split ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding-block: 26px 22px;
  background: var(--surface-2);
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 15px;
}
.footer__links a { color: var(--ink-2); }
.footer__links a:hover { color: var(--accent); }
.footer__legal {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}
/* ---------- Page intro ---------- */

.pagehead { padding-block: clamp(46px, 7vw, 84px) clamp(30px, 4vw, 48px); }
.pagehead h1 { font-size: clamp(29px, 4.8vw, 48px); letter-spacing: -0.02em; max-width: 20ch; }
.pagehead .lede { margin-top: 20px; }
.breadcrumb { font-family: var(--f-body); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.breadcrumb a { color: var(--muted); }
/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .hero__grid, .section__head, .cta__inner { grid-template-columns: minmax(0, 1fr); }
  .section__head { align-items: start; }
  .cta__inner { justify-items: start; }
  .index__row { grid-template-columns: 40px minmax(0, 1fr); row-gap: 6px; }
  .index__num { grid-row: span 3; }
  .index__more { grid-column: 2; }
}
@media (max-width: 1150px) {
  .wordmark__sub { display: none; }
}
@media (max-width: 900px) {
  .navtoggle { display: inline-block; }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 6px var(--gutter) 16px;
  }
  .nav.is-open { display: flex; }
  .nav a { padding-block: 12px; border-bottom: 1px solid var(--line); }
  .nav a[aria-current="page"] { border-bottom-color: var(--accent); }
  .masthead { position: static; }
  .masthead__inner { position: relative; }
}
@media (max-width: 620px) {
  .stage { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .details div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}