:root {
  --bone: #F6F4EC;
  --panel: #ECE8DA;
  --ink: #1A1A1A;
  --muted: #6B6A63;
  --hair: #E2DFD4;
  --slate: #5B6B7A;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", monospace;
  --maxw: 1240px;
  --pad: 64px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--bone);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- layout ---------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ---------- type helpers ---------- */
.eyebrow {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}
h1.display, h2.display {
  font-family: var(--serif); font-weight: 400; color: var(--ink);
  line-height: 1.02; letter-spacing: -0.01em; margin: 0;
}
h1.display { font-size: clamp(44px, 6vw, 88px); }
h2.display { font-size: clamp(34px, 4.4vw, 60px); }
.lede {
  font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.45; color: var(--ink); max-width: 32ch;
}
.muted { color: var(--muted); }
.body { font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  padding: 15px 26px; border-radius: 2px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; transition: opacity .15s ease, background .15s ease;
  border: 1px solid var(--ink);
}
.btn.solid { background: var(--ink); color: var(--bone); }
.btn.solid:hover { opacity: .85; }
.btn.outline { background: transparent; color: var(--ink); }
.btn.outline:hover { background: rgba(26,26,26,.05); }
.btn .dot {
  width: 18px; height: 18px; border-radius: 50%; background: currentColor;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.btn .dot svg { width: 9px; height: 9px; }

/* ---------- placeholder (imagery) ---------- */
.ph {
  position: relative;
  border: 1px solid var(--hair);
  background:
    repeating-linear-gradient(45deg, transparent, transparent 9px, rgba(26,26,26,.045) 9px, rgba(26,26,26,.045) 10px);
  display: flex; align-items: center; justify-content: center;
}
.ph span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: #9b998f; background: var(--bone); padding: 3px 8px; text-align: center;
}
.ph.diagram span { font-size: 10px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bone);
  border-bottom: 1px solid var(--hair);
}
.site-header-inner {
  display: flex; align-items: center; gap: 32px;
  padding-top: 14px; padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.tagline {
  display: inline-flex; align-items: center; gap: 20px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; max-width: 24ch; line-height: 1.3;
}
.tagline::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink); flex: none;
}
.logo { height: 54px; width: auto; display: block; }
.site-footer .logo { height: 32px; }
.site-nav { display: flex; align-items: center; gap: 26px; font-size: 14px; margin-left: auto; }
.site-nav a { color: var(--ink); text-decoration: none; position: relative; padding: 4px 0; }
.site-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--ink); transition: width .2s ease; }
.site-nav a:hover::after { width: 100%; }
.nav-div { width: 1px; height: 18px; background: var(--hair); }

/* ---------- hero (asymmetric, art bleeds right) ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  border-bottom: 1px solid var(--hair);
}
.hero-copy {
  padding: 104px var(--pad);
  max-width: 760px;
  justify-self: end;
}
.hero-copy h1.display { font-size: clamp(48px, 6.2vw, 96px); }
.hero-art { border: 0; border-left: 1px solid var(--hair); position: relative; overflow: hidden; min-height: 420px; }
.hero-art canvas { display: block; width: 100%; height: 100%; }
.hero-actions { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }

/* ---------- services as index list ---------- */
.service-index { border-top: 1px solid var(--ink); }
.service-row {
  text-decoration: none; color: inherit;
  display: grid; grid-template-columns: 64px 1fr 1.1fr 40px; gap: 32px;
  padding: 36px 0; border-bottom: 1px solid var(--hair); align-items: baseline;
}
.service-row .num { font-family: var(--mono); font-size: 13px; color: var(--slate); }
.service-row h3 { font-family: var(--serif); font-weight: 400; font-size: 40px; margin: 0; transition: color .15s ease; }
.service-row p { margin: 0; }
.service-row .arrow { font-family: var(--mono); color: var(--muted); text-align: right; transition: transform .15s ease; }
.service-row:hover h3 { color: var(--slate); }
.service-row:hover .arrow { transform: translateX(4px); }

/* ---------- approach 2x2 grid ---------- */
.approach-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 16px; margin-bottom: 40px;
}
.approach-head h2.display { font-size: clamp(28px, 3vw, 40px); max-width: 20ch; text-align: right; }
.approach-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hair); border-left: 1px solid var(--hair);
}
.approach-cell { padding: 36px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.approach-cell .num { font-family: var(--mono); font-size: 13px; color: var(--slate); margin-bottom: 16px; }
.approach-cell h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0 0 10px; }
.approach-cell p { max-width: 46ch; }

/* ---------- capture (inquiry form) ---------- */
.capture { border-top: 1px solid var(--ink); background: var(--bone); }
.capture-form { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.capture-form .email-line { margin-top: 20px; color: var(--slate); }
.capture-form .email-line a { color: var(--slate); }
.capture-form form { display: flex; flex-direction: column; gap: 14px; }
.capture-form .field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { border: 1px solid var(--hair); background: var(--bone); padding: 14px 16px; font-family: var(--mono); font-size: 12px; color: #9b998f; border-radius: 2px; }
.field.tall { padding-bottom: 48px; }

/* ---------- spacing helpers for sections ---------- */
.section-pad-services { padding-top: 80px; padding-bottom: 40px; }
.section-pad-approach { padding-top: 64px; padding-bottom: 80px; }
.section-pad-capture { padding-top: 80px; padding-bottom: 80px; }
.mb-eyebrow { margin-bottom: 48px; }

/* ---------- site footer ---------- */
.site-footer { border-top: 1px solid var(--hair); padding-top: 40px; padding-bottom: 40px; display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.site-footer .f-nav { display: flex; gap: 22px; font-size: 13px; }
.site-footer .f-nav a { color: var(--muted); text-decoration: none; }
.site-footer .f-nav a:hover { color: var(--ink); }
.site-footer .copy { margin-left: auto; font-family: var(--mono); font-size: 11px; color: #9b998f; }

/* ---------- color bands / surfaces ---------- */
/* Full-width sections alternate surface tone so the page reads in
   distinct blocks instead of one flat field. Dark bands re-scope the
   design tokens so existing components invert without per-element rules. */
.band { position: relative; }
.band--panel { background: var(--panel); }
.band--dark {
  background: #1A1A1A;
  color: var(--bone);
  --ink: #F6F4EC;                       /* ink text/borders become bone */
  --hair: rgba(246, 244, 236, 0.18);    /* hairlines on dark */
  --muted: rgba(246, 244, 236, 0.66);
  --slate: #AAB7C3;
}
/* solid button needs to flip on dark so it stays legible */
.band--dark .btn.solid { background: var(--bone); color: #1A1A1A; border-color: var(--bone); }
.band--dark .btn.solid .dot svg path { stroke: var(--bone); }
.band-pad { padding-top: 84px; padding-bottom: 84px; }

/* "atls" called out within running copy */
.brand-word { font-weight: 500; color: var(--slate); }

/* ---------- service detail page ---------- */
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  margin-bottom: 28px;
}
.back-link:hover { color: var(--ink); }

.prose { max-width: 60ch; }
.prose p { font-size: 18px; line-height: 1.75; color: var(--ink); margin: 0 0 20px; }
.prose p:last-child { margin-bottom: 0; }

.section-head { margin-bottom: 40px; }
.section-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; margin: 16px 0 0; max-width: 20ch; }

/* what's included — 3-col spec grid */
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.spec-cell { padding: 32px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.spec-cell .num { font-family: var(--mono); font-size: 13px; color: var(--slate); margin-bottom: 16px; }
.spec-cell h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0 0 10px; }
.spec-cell p { max-width: 34ch; }

/* process — full-width numbered rows */
.proc { border-top: 1px solid var(--ink); }
.proc-row { display: grid; grid-template-columns: 90px 1fr; gap: 28px; padding: 32px 0; border-bottom: 1px solid var(--hair); align-items: start; }
.proc-row .num { font-family: var(--mono); font-size: 14px; color: var(--slate); padding-top: 6px; }
.proc-row h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0 0 8px; }
.proc-row p { margin: 0; max-width: 60ch; }

/* outcomes list */
.outcomes { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--hair); }
.outcomes li { position: relative; padding: 20px 0 20px 38px; border-bottom: 1px solid var(--hair); font-size: 17px; line-height: 1.5; color: var(--ink); max-width: 72ch; }
.outcomes li::before { content: "→"; position: absolute; left: 0; top: 20px; color: var(--slate); font-family: var(--mono); }

/* closing CTA band */
.cta-band { border-top: 1px solid var(--ink); }
.cta-band .inner { padding-top: 80px; padding-bottom: 80px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta-band h2.display { max-width: 18ch; margin-bottom: 0; }

/* responsive */
@media (max-width: 1040px) {
  .tagline { display: none; }
}
@media (max-width: 860px) {
  :root { --pad: 28px; }
  .site-nav { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 64px var(--pad); }
  .hero-art { min-height: 300px; border-left: 0; border-top: 1px solid var(--hair); }
  .service-row { grid-template-columns: 40px 1fr; gap: 16px; }
  .service-row p, .service-row .arrow { display: none; }
  .service-row h3 { font-size: 30px; }
  .approach-grid { grid-template-columns: 1fr; }
  .approach-head h2.display { text-align: left; }
  .capture-form { grid-template-columns: 1fr; gap: 36px; }
  .spec-grid { grid-template-columns: 1fr; }
  .proc-row { grid-template-columns: 56px 1fr; gap: 16px; }
}