/* drop-b — tokens from design-system.md */
:root {
  --bg: #EEE7D8;
  --text: #1A1814;
  --text-muted: #3D3A34;
  --accent: #B8481F;
  /* accent is only 4.28:1 on cream — this deeper step is for small text on light */
  --accent-deep: #9E3C19;
  --muted-on-light: #57554F;
  --muted-on-dark: #939087;
  --blue: #2C4A91;
  --gold: #C9A13A;
  --dark-bg: #0B0C0E;
  --dark-text: #F0EDE4;
  /* chart surface: a lighter step of the cream, so the dashboard reads as a screen */
  --surface: #F6F2E8;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;

  --text-xs: 12px;  --text-sm: 14px;  --text-base: 16px; --text-lg: 19px;
  --text-xl: 24px;  --text-2xl: 32px; --text-3xl: 44px;  --text-4xl: 64px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  --max-width: 1160px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 var(--sp-4);
}

h1 { font-size: var(--text-3xl); line-height: 1.1; }
h2 { font-size: var(--text-3xl); line-height: 1.15; }
h3 { font-size: var(--text-xl); margin-bottom: var(--sp-2); }

/* Section header spans the full measure: title left, its lead opposite.
   Without this every section floats in the left half with a void beside it. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
  margin-bottom: var(--sp-8);
}
.section-head h2 { margin-bottom: 0; }
.section-head p { margin-bottom: 0; max-width: 46ch; }

p { max-width: 60ch; margin: 0 0 var(--sp-4); }

a { color: inherit; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* Header */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid rgba(26,24,20,0.1);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}
.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--text);
  text-decoration: none;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.site-nav a {
  font-size: var(--text-sm);
  color: #585650;
  text-decoration: none;
}
.site-nav a:hover { color: var(--text); }
.nav-cta {
  color: var(--accent-deep) !important;
  font-weight: 600;
}
.nav-toggle, .nav-toggle-btn { display: none; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 2px;
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-body);
}
.btn-primary {
  background: var(--accent);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.btn-sq {
  width: 9px; height: 9px;
  background: var(--text);
  flex: 0 0 auto;
}

/* Hero */
/* Rhythm is deliberately uneven: What we do + What we build in are one
   argument, so they sit tight together, with generous air around the pair. */
.hero {
  position: relative;
  padding: var(--sp-9) var(--sp-5);
  overflow: hidden;
}
.hero-copy { position: relative; z-index: 1; max-width: 820px; }
.hero-copy .lead { max-width: 46ch; }   /* headline runs wide, prose stays readable */
.lead { font-size: var(--text-lg); }

/* the hero is the page's one genuine standout moment, so it takes the top step */
@media (min-width: 1220px) {
  .hero h1 { font-size: var(--text-4xl); }
}

/* One composed cluster, nothing cropped by the section edge */
.shape-cluster {
  position: absolute;
  top: 50%;
  right: var(--sp-5);
  transform: translateY(-50%);
  width: 280px;
  height: 240px;
  z-index: 0;
  pointer-events: none;
}
.shape { position: absolute; display: block; }
.shape-circle {
  width: 170px; height: 170px;
  border-radius: 50%;
  background: var(--accent);
  top: 50px; left: 0;
}
.shape-square {
  width: 64px; height: 64px;
  background: var(--gold);
  transform: rotate(12deg);
  top: 40px; left: 200px;
}
.shape-triangle {
  width: 0; height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid var(--blue);
  top: 130px; left: 130px;
}

/* Capabilities */
.capabilities { padding: var(--sp-10) var(--sp-5) var(--sp-8); }
.section-lead { font-size: var(--text-lg); }

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-7);
  margin-top: var(--sp-7);
}
.pillar-shape-wrap {
  height: 130px;
  display: flex;
  align-items: flex-end;
  margin-bottom: var(--sp-4);
}
.pillar-shape { display: block; }
.pillar-shape--circle {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--accent);
}
.pillar-shape--triangle {
  width: 0; height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 70px solid var(--blue);
}
.pillar-shape--square {
  width: 56px; height: 56px;
  background: var(--gold);
  transform: rotate(12deg);
}
.pillar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pillar-list li {
  padding: var(--sp-3) 0;
  border-top: 1px solid rgba(26,24,20,0.14);
  font-size: var(--text-base);
  color: var(--text-muted);
}
.pillar-bi .pillar-list li:last-child { border-bottom: 1px solid rgba(26,24,20,0.14); }

.capabilities-close {
  margin-top: var(--sp-6);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--text);
}

/* Stack — the actual pipeline: sources fan into the warehouse, out to a dashboard */
.stack { padding: var(--sp-8) var(--sp-5) var(--sp-10); }

.pipeline {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 96px minmax(0, 1fr) 96px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: center;
  column-gap: 0;
  row-gap: var(--sp-4);
  margin-top: var(--sp-8);
}
/* stage captions give the diagram a reading order and head each column */
.pipe-stage {
  align-self: end;
  font-size: var(--text-sm);
  color: var(--muted-on-light);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(26,24,20,0.14);
}
.pipe-sources {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
/* uniform source heights — the curves converge on fixed points, so this is geometry, not taste */
.pipe-sources .pipe-node { height: 128px; }

.pipe-node {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(26,24,20,0.18);
  border-radius: 2px;
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg);
}
.pipe-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text);
  margin-bottom: var(--sp-3);
}
.pipe-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
}
.pipe-items li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.stack-icon { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; }

/* the hub carries a heavier edge than the sources feeding it */
.pipe-node--hub { border-color: rgba(26,24,20,0.4); }
/* the two downstream stages match each other so the right side isn't ragged */
.pipe-node--hub, .pipe-node--output { height: 168px; }

/* The delivered thing carries the accent, as it does elsewhere on the page */
.pipe-node--output {
  border-color: var(--accent);
  background: rgba(184,72,31,0.06);
}
/* --accent-deep, not --accent: this label is 16px on the node's light
   fill, and plain --accent only clears 3.95:1 there - see the token's
   own comment at the top of the file */
.pipe-node--output .pipe-label { color: var(--accent-deep); }

/* Connectors: three sources easing into one line, drawn rather than wired */
.pipe-join, .pipe-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pipe-wires { display: block; }
.pipe-wires path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
}
.pipe-wires polygon { fill: var(--blue); }
/* Stands in for a vendor logo on the one row that has no vendor */
.stack-mark {
  width: 14px;
  height: 14px;
  margin: 0 3px;
  background: var(--accent);
  transform: rotate(12deg);
  flex: 0 0 auto;
}

/* Dashboard mock — the payoff the pipeline ends at */
.dashboard { padding: var(--sp-10) var(--sp-5); }
.dash-figure { margin: 0; }
.dash {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr);
  border: 1px solid rgba(26,24,20,0.18);
  border-radius: 2px;
  background: var(--surface);
  overflow: hidden;
}

/* app chrome — it reads as a product, not a chart on a page */
.dash-side {
  border-right: 1px solid rgba(26,24,20,0.12);
  padding: var(--sp-4) 0;
  background: rgba(26,24,20,0.025);
}
.dash-side-mark {
  display: block;
  padding: 0 var(--sp-5) var(--sp-5);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text);
}
.dash-nav { list-style: none; margin: 0; padding: 0; }
.dash-nav li {
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--text-sm);
  color: var(--muted-on-light);
}
.dash-nav .is-active {
  color: var(--accent);
  box-shadow: inset 2px 0 0 var(--accent);
}

.dash-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid rgba(26,24,20,0.12);
}
.chip {
  padding: 4px 10px;
  border: 1px solid rgba(26,24,20,0.18);
  border-radius: 2px;
  font-size: var(--text-xs);
  color: var(--muted-on-light);
}
.chip--on {
  border-color: var(--accent);
  /* --accent-deep, not --accent: 12px text only clears 4.35:1 here */
  color: var(--accent-deep);
  background: rgba(184,72,31,0.06);
}
.dash-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid rgba(26,24,20,0.12);
}
.dash-name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
}
.dash-range { font-size: var(--text-sm); color: var(--muted-on-light); }

.dash-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid rgba(26,24,20,0.12);
}
.kpi {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5) var(--sp-5);
  border-left: 1px solid rgba(26,24,20,0.12);
}
/* labels of differing length must not knock the numbers out of alignment */
.kpi-label { min-height: 2.6em; }
.kpi:first-child { border-left: none; }
.kpi-label {
  display: block;
  font-size: var(--text-sm);
  color: var(--muted-on-light);
  margin-bottom: var(--sp-2);
}
.kpi-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--text);
}
/* the CRM number is the one that contradicts the ad accounts */
.kpi-value--flag { color: var(--accent); }
.kpi-sub {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--muted-on-light);
}

/* Channel detail table */
.dash-table-wrap {
  border-top: 1px solid rgba(26,24,20,0.12);
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  overflow-x: auto;
}
.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  white-space: nowrap;
}
.dash-table caption { text-align: left; }
.dash-table th, .dash-table td {
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  text-align: left;
  font-weight: 400;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(26,24,20,0.10);
}
.dash-table thead th {
  font-size: var(--text-xs);
  color: var(--muted-on-light);
  padding-bottom: var(--sp-2);
}
.dash-table tbody th { color: var(--text); font-weight: 600; }
/* padding-right only drops to 0 on the last cell in a row (flush against
   the panel's own edge padding) - applying it to every .num cell zeroed
   the gap between adjacent numeric columns too, invisible at desktop
   width where auto table layout had slack, but touching at mobile
   widths where it doesn't */
.dash-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.dash-table .num:last-child { padding-right: 0; }
.dash-table tbody tr:last-child th,
.dash-table tbody tr:last-child td { border-bottom: none; }
.dash-table tfoot th, .dash-table tfoot td {
  border-top: 1px solid rgba(26,24,20,0.25);
  border-bottom: none;
  color: var(--text);
  font-weight: 600;
  padding-top: var(--sp-3);
}
/* the channel whose ad numbers most oversell it */
.dash-table .is-flagged th,
.dash-table .is-flagged td { background: rgba(184,72,31,0.06); }
/* --accent-deep, not --accent: 14px table text only clears 4.35:1 here */
.dash-table .is-flagged th { color: var(--accent-deep); }

.dash-panels { display: grid; grid-template-columns: 1.25fr 1fr; }
.dash-panel { padding: var(--sp-5) var(--sp-6) var(--sp-6); border-left: 1px solid rgba(26,24,20,0.12); }
.dash-panel:first-child { border-left: none; }
.dash-panel-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted-on-light);
  margin-bottom: var(--sp-5);
}
.dash-chart { display: block; width: 100%; height: auto; }

/* two series (claimed vs blended) — palette validated, so a legend is required
   and every bar is direct-labeled: identity is never colour-alone */
.dash-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin: 0 0 var(--sp-5);
  padding: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.dash-legend li { display: flex; align-items: center; gap: var(--sp-2); }
.swatch { width: 10px; height: 10px; flex: 0 0 auto; }
.swatch--claimed { background: #31509B; }
.swatch--blended { background: #B8481F; }

.bars { list-style: none; margin: 0; padding: 0; }
.bars li {
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: var(--text-sm);
}
.bars li:last-child { margin-bottom: 0; }
.bar-label { color: var(--text-muted); }
.bar-group { display: flex; flex-direction: column; gap: 2px; }  /* 2px surface gap */
.bar-row { display: grid; grid-template-columns: 1fr 52px; align-items: center; gap: var(--sp-3); }
.bar-fill {
  display: block;
  height: 11px;
  border-radius: 0 4px 4px 0;   /* rounded data-end, anchored to the baseline */
}
.bar-fill--claimed { background: #31509B; }
.bar-fill--blended { background: #B8481F; }
.bar-value { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.dash-note {
  margin: var(--sp-5) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: none;
}
.dash-note strong { color: var(--text); font-weight: 600; }

.dash-caption {
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--muted-on-light);
}

/* Why us */
.why-us {
  position: relative;
  background: var(--dark-bg);
  color: var(--dark-text);
  padding: var(--sp-10) var(--sp-5);
  overflow: hidden;
}
.why-us h2 {
  position: relative;
  z-index: 1;
  color: var(--dark-text);
  margin-bottom: var(--sp-6);
}
.why-us-statement {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.35;
  color: var(--dark-text);
  max-width: 46ch;
  margin: 0 0 var(--sp-8);
}

/* The argument, as structure: two they-do rows, then ours */
.why-us-compare {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(240,237,228,0.18);
}
.compare-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-6);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid rgba(240,237,228,0.18);
}
.compare-who {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--muted-on-dark);
}
.compare-what { color: #A8A59B; }

/* Ours gets the weight: a bleeding wash, more air, a size step up */
.compare-row--us {
  margin: 0 calc(-1 * var(--sp-5));
  padding: var(--sp-6) var(--sp-5);
  background: rgba(184,72,31,0.10);
  border-bottom-color: rgba(184,72,31,0.45);
}
.compare-row--us .compare-who {
  color: var(--accent);
  font-size: var(--text-xl);
}
.compare-row--us .compare-what {
  color: var(--dark-text);
  font-size: var(--text-lg);
}

.why-us-aside {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-6);
  font-size: var(--text-sm);
  color: var(--muted-on-dark);
  max-width: 52ch;
  text-wrap: pretty;
}
.why-us-punch {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-8) 0 0;
  padding-top: var(--sp-7);
  border-top: 1px solid rgba(240,237,228,0.18);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: 1.15;
  color: var(--accent);
  max-width: none;
}
.why-us-punch-sq {
  width: 12px; height: 12px;
  background: var(--gold);
  transform: rotate(12deg);
  flex: 0 0 auto;
}

/* Contact — light, so the dark Why Us section stays the page's one dark moment */
.contact { padding: var(--sp-10) var(--sp-5); }

/* Footer */
.site-footer { border-top: 1px solid rgba(26,24,20,0.14); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--sp-8);
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
}
.footer-logo {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--text);
  margin-bottom: var(--sp-4);
}
.footer-brand p {
  font-size: var(--text-sm);
  color: var(--muted-on-light);
  max-width: 34ch;
  margin-bottom: var(--sp-4);
}
.footer-email {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent-deep);
  text-decoration: none;
}
/* Locale line: the only geographic signal in the markup, so it sits on
   every page rather than on the contact page alone. */
.footer-brand p.footer-geo {
  margin-top: var(--sp-2);
  margin-bottom: 0;
  font-size: var(--text-xs);
  color: var(--muted-on-light);
}

/* the three shapes as a maker's mark */
.footer-shapes { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.footer-shapes i { display: block; }
.footer-shapes .m-circle { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.footer-shapes .m-triangle {
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid var(--blue);
}
.footer-shapes .m-square { width: 10px; height: 10px; background: var(--gold); transform: rotate(12deg); }

.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-head {
  font-size: var(--text-xs);
  color: var(--muted-on-light);
  margin-bottom: var(--sp-3);
}
.footer-col a {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--sp-2) 0;
}
.footer-col a:hover { color: var(--accent-deep); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-top: 1px solid rgba(26,24,20,0.14);
  font-size: var(--text-xs);
  color: var(--muted-on-light);
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); padding-top: var(--sp-7); }
  .footer-col a { padding: var(--sp-3) 0; }   /* 44px tap targets */
  .footer-bottom { flex-direction: column; gap: var(--sp-2); }
}

/* Motion: one deliberate moment, hero only */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy {
    animation: hero-in 300ms ease-out;
  }
  @keyframes hero-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* Cluster needs room beside the 560px copy column before it collides */
@media (max-width: 980px) {
  .shape-cluster { display: none; }
}

/* The horizontal pipeline needs real width; below this it runs top-to-bottom */
@media (max-width: 1100px) {
  .pipeline { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 0; }
  .pipeline > span { display: none; }   /* stage captions can't interleave in one column */
  .pipe-sources .pipe-node,
  .pipe-node--hub, .pipe-node--output { height: auto; }
  .pipe-wires { display: none; }
  .pipe-join, .pipe-arrow { position: relative; height: 44px; }
  .pipe-join::before, .pipe-arrow::before {
    content: "";
    position: absolute;
    left: 50%; top: 0; bottom: 11px;
    border-left: 2px solid var(--blue);
  }
  .pipe-join::after, .pipe-arrow::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 11px solid var(--blue);
  }
}

/* Mobile nav (checkbox hack, no JS) */
@media (max-width: 720px) {
  .nav-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-2)) 0 0;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
  }
  .site-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: var(--sp-2) 0;
  }
  .site-nav a { padding: var(--sp-3) 0; }
  .logo { display: flex; align-items: center; min-height: 44px; }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .header-inner { flex-wrap: wrap; }

  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-2xl); }

  /* minmax(0, 1fr), not bare 1fr - a grid item's default min-width is
     auto, so without the 0 floor this track refuses to shrink below its
     content's intrinsic width and clips silently instead of scrolling */
  .dash { grid-template-columns: minmax(0, 1fr); }
  .dash-side { display: none; }            /* app chrome is desktop-only affect */
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi { border-left: none; border-top: 1px solid rgba(26,24,20,0.12); }
  .kpi:nth-child(odd) { border-right: 1px solid rgba(26,24,20,0.12); }
  .dash-panels { grid-template-columns: 1fr; }
  .dash-panel { border-left: none; border-top: 1px solid rgba(26,24,20,0.12); }

  /* desktop rhythm would be endless scrolling on a phone */
  .hero, .capabilities, .stack, .why-us, .contact, .dashboard {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }
  .section-head { grid-template-columns: 1fr; gap: var(--sp-4); margin-bottom: var(--sp-6); }

  .capabilities-grid { grid-template-columns: 1fr; }

  .why-us-statement { font-size: var(--text-lg); max-width: none; }
  .compare-row { grid-template-columns: 1fr; gap: var(--sp-2); }
  .why-us-punch { font-size: var(--text-2xl); margin-top: var(--sp-6); padding-top: var(--sp-5); }
}

/* ============================================================
   Inner pages
   ============================================================ */

.page-hero { padding: var(--sp-9) var(--sp-5) var(--sp-8); }
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { max-width: 52ch; }
.breadcrumb {
  font-size: var(--text-sm);
  color: var(--muted-on-light);
  margin-bottom: var(--sp-5);
}
.breadcrumb a { color: var(--muted-on-light); }
.breadcrumb a:hover { color: var(--text); }
.site-nav .is-current { color: var(--text); }

.detail { padding: var(--sp-8) var(--sp-5); }
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-7) var(--sp-8);
}
.detail-grid--stack { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.detail-item { padding-top: var(--sp-5); border-top: 1px solid rgba(26,24,20,0.14); }
.detail-item h3 { margin-bottom: var(--sp-3); }
.detail-item p { margin-bottom: 0; }

.prose p { max-width: 68ch; font-size: var(--text-lg); }
.prose p:last-child { margin-bottom: 0; }

/* Numbered sequence */
.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-top: 1px solid rgba(26,24,20,0.14);
}
.steps li:last-child { border-bottom: 1px solid rgba(26,24,20,0.14); }
.steps p { margin-bottom: 0; }
.step-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.1;
  color: rgba(26,24,20,0.22);
}

/* Pillars become links on the services hub */
.pillar h2 { font-size: var(--text-xl); margin-bottom: var(--sp-2); }
.pillar h2 a { text-decoration: none; }
.pillar h2 a:hover { color: var(--accent); }
.pillar-more {
  display: inline-block;
  margin-top: var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent-deep);
}

/* Repeated CTA at the foot of each page */
.cta-band { padding: var(--sp-9) var(--sp-5); border-top: 1px solid rgba(26,24,20,0.14); }
.cta-band .lead { margin-bottom: var(--sp-6); max-width: 46ch; }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}
.contact-email { font-size: var(--text-2xl); margin-bottom: var(--sp-4); }
.contact-email a { color: var(--accent-deep); text-decoration: none; }
.contact-email a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .detail-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .steps li { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .page-hero, .detail, .cta-band { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
  .contact-email { font-size: var(--text-xl); }
}

/* The page title already carries the top air; the next section shouldn't repeat it */
.page-hero + section { padding-top: var(--sp-6); }

/* Keep the "in detail" links on one line regardless of list length */
.pillar { display: flex; flex-direction: column; }
.pillar .pillar-list { margin-bottom: var(--sp-4); }
.pillar-more { margin-top: auto; }

@media (max-width: 720px) {
  /* breadcrumb link was a 19px tap target */
  .breadcrumb a { display: inline-block; padding: var(--sp-3) 0; }
  .breadcrumb { margin-bottom: var(--sp-3); }
}

/* ============================================================
   Shape language, extended
   Circle = Data & BI · Triangle = CRM · Square = Performance Marketing.
   One prominent shape per page, one closing mark, plus a small
   systematic marker in comparison rows. Not scattered.
   ============================================================ */

/* 1. Each service page carries its own pillar's shape */
.page-hero { position: relative; overflow: hidden; }
.page-hero > * { position: relative; z-index: 1; }
.page-mark {
  position: absolute;
  top: 50%;
  right: var(--sp-8);
  z-index: 0;
  pointer-events: none;
}
.page-mark--circle {
  width: 156px; height: 156px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
}
.page-mark--triangle {
  width: 0; height: 0;
  border-left: 82px solid transparent;
  border-right: 82px solid transparent;
  border-bottom: 138px solid var(--blue);
  transform: translateY(-50%);
}
.page-mark--square {
  width: 124px; height: 124px;
  background: var(--gold);
  transform: translateY(-50%) rotate(12deg);
}


/* 3. Comparison rows: hollow for them, solid for us */
.compare-who::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: var(--sp-3);
  vertical-align: middle;
  border: 1.5px solid currentColor;
}
.compare-row--us .compare-who::before {
  background: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 1080px) {
  .page-mark { display: none; }
}

/* 4. Audit items carry the shape of the pillar they belong to,
      which is how a reader learns the mapping without being told */
.detail-mark { display: block; margin-bottom: var(--sp-4); }
.detail-mark--circle { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); }
.detail-mark--triangle {
  width: 0; height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 20px solid var(--blue);
}
.detail-mark--square { width: 20px; height: 20px; background: var(--gold); transform: rotate(12deg); }
.detail-mark--all { display: flex; align-items: center; gap: var(--sp-3); height: 22px; }
.detail-mark--all i { display: block; }
.detail-mark--all .m-circle { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); }
.detail-mark--all .m-triangle {
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 15px solid var(--blue);
}
.detail-mark--all .m-square { width: 14px; height: 14px; background: var(--gold); transform: rotate(12deg); }

/* ============================================================
   Services dropdown — no JS. Hover for mouse, focus-within for
   keyboard. On touch, tapping Services goes to the hub, which
   lists the same three pages, so nothing is unreachable.
   ============================================================ */
.nav-item { display: flex; align-items: center; }
.has-menu {
  position: relative;
  /* pad to the header edge so there's no dead gap to cross on the way down */
  padding: var(--sp-3) 0;
  margin: calc(-1 * var(--sp-3)) 0;
}
.nav-caret {
  display: inline-block;
  margin-left: var(--sp-2);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
  opacity: 0.7;
}
.nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--sp-5));
  min-width: 250px;
  padding: var(--sp-2) 0;
  background: var(--bg);
  border: 1px solid rgba(26,24,20,0.18);
  border-radius: 2px;
  z-index: 20;
}
.has-menu:hover .nav-menu,
.has-menu:focus-within .nav-menu { display: block; }
.nav-menu a {
  display: block;
  padding: var(--sp-3) var(--sp-5);
  white-space: nowrap;
}
.nav-menu a:hover { color: var(--text); background: rgba(26,24,20,0.04); }

@media (max-width: 720px) {
  /* no hover on touch: nest the sub-items inline in the open menu */
  .has-menu { display: block; padding: 0; margin: 0; }
  .nav-menu {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 var(--sp-2) var(--sp-5);
    background: none;
    border: none;
  }
  .nav-menu a { padding: var(--sp-3) 0; }
  .nav-caret { display: none; }
}

@media (max-width: 720px) {
  /* the dropdown parent lost a pixel of tap height to the nested menu */
  .has-menu > a { display: block; padding: var(--sp-3) 0; }
}

/* ============================================================
   Platform pages
   ============================================================ */

/* the platform's own mark stands where a pillar shape would */
.page-mark--platform {
  width: 128px; height: 128px;
  transform: translateY(-50%);
}
.page-mark--platform svg { width: 100%; height: 100%; fill: var(--text); }

/* Partners — real logo files, not redrawn to match. Element47 ships its
   own white badge baked in; each card just contains what they actually
   gave us rather than forcing every asset onto one uniform background. */
.partners { padding: var(--sp-9) var(--sp-5); }
.partners-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
.partner-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: var(--sp-4) var(--sp-6);
  border: 1px solid rgba(26,24,20,0.18);
  border-radius: 2px;
  background: var(--surface);
}
.partner-logo { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 560px) {
  .partners-grid { grid-template-columns: 1fr; }
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
.platform-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.platform-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid rgba(26,24,20,0.18);
  border-radius: 2px;
  text-decoration: none;
  color: var(--text-muted);
}
.platform-card:hover {
  border-color: var(--accent);
  background: rgba(184,72,31,0.05);
  color: var(--text);
}
.platform-logo { width: 28px; height: 28px; fill: currentColor; flex: 0 0 auto; }
.platform-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); }

/* small logo run, e.g. beside "Ad accounts" on the audit page */
.inline-logos { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.inline-logo { width: 20px; height: 20px; fill: var(--muted-on-light); }

@media (max-width: 900px) {
  .platform-grid, .platform-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .platform-grid, .platform-grid--3 { grid-template-columns: minmax(0, 1fr); }
}
.nav-menu-label {
  display: block;
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
  margin-top: var(--sp-2);
  border-top: 1px solid rgba(26,24,20,0.14);
  font-size: var(--text-xs);
  color: var(--muted-on-light);
}

/* Per-platform explanatory charts */
.chart-figure { margin: 0; }
.chart { display: block; width: 100%; height: auto; max-width: 760px; }
.chart-figure .dash-caption { margin-top: var(--sp-4); }

@media (max-width: 720px) {
  /* footer email was a 19px tap target */
  .footer-email { display: inline-block; padding: var(--sp-3) 0; }
}

/* ============================================================
   Logo — a "b" constructed from Bauhaus primitives: a rectangle
   stem and a circular bowl at one uniform stroke weight, which is
   how Bayer's Universal built its letterforms. Reads as the brand
   initial, and as a data point sitting on a baseline.
   ============================================================ */
.logo, .footer-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.logo-mark {
  height: 22px;
  width: auto;
  flex: 0 0 auto;
  display: block;
}
.logo-mark rect { fill: var(--text); }
.logo-mark circle { stroke: var(--accent); }
.logo-word {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.footer-logo .logo-mark { height: 24px; }

/* the mark alone carries the brand where the wordmark would crowd */
@media (max-width: 400px) {
  .logo-word { display: none; }
  .logo-mark { height: 26px; }
  /* icon-only mark is ~18px wide - pad the tap target back up to the
     24px WCAG target-size floor without shifting where the icon sits */
  .logo { padding: 0 var(--sp-2) 0 0; margin-right: calc(-1 * var(--sp-2)); }
}

/* ============================================================
   Contact form
   ============================================================ */
.form { max-width: 34rem; }
.field { margin-bottom: var(--sp-5); }
.field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  margin-bottom: var(--sp-2);
}
.req { color: var(--accent-deep); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(26,24,20,0.28);
  border-radius: 2px;
  background: var(--surface);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.field ::placeholder { color: var(--muted-on-light); }
.form button { border: none; cursor: pointer; font-size: var(--text-base); }
.form-note { margin-top: var(--sp-4); font-size: var(--text-sm); color: var(--muted-on-light); }
.form-note a { color: var(--accent-deep); }
/* honeypot: reachable to bots, hidden from people and assistive tech */
.form-hp { position: absolute; left: -9999px; }

/* ============================================================
   Bio
   ============================================================ */
.bio {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}
.bio-photo { margin: 0; }
.bio-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.bio-eyebrow {
  display: block;
  font-size: var(--text-sm);
  color: var(--muted-on-light);
  margin-bottom: var(--sp-3);
}
.bio-copy h2 { margin-bottom: var(--sp-3); }
.bio-copy .lead { margin-bottom: var(--sp-5); }
.bio-links { font-size: var(--text-sm); color: var(--muted-on-light); }
.bio-links a { color: var(--accent-deep); }

/* ============================================================
   Legal pages
   ============================================================ */
.legal { max-width: 68ch; }
.legal h2 {
  font-size: var(--text-xl);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
}
.legal h2:first-child { margin-top: 0; }
.legal p { max-width: none; }
.legal a { color: var(--accent-deep); }

@media (max-width: 820px) {
  .bio { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .bio-photo { max-width: 320px; }
}

/* ============================================================
   Pre-launch splash. Its own page, so the real site stays intact.
   ============================================================ */
.splash-body { background: var(--dark-bg); color: var(--dark-text); }
.splash {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: var(--sp-8) 0;
}
.splash-inner { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; }

.splash-logo { display: inline-flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-8); }
.splash-logo .logo-mark { height: 30px; }
.splash-logo .logo-mark rect { fill: var(--dark-text); }
.splash-logo .logo-word { font-size: var(--text-xl); color: var(--dark-text); }

.splash h1 {
  color: var(--dark-text);
  font-size: var(--text-3xl);
  line-height: 1.05;
  max-width: 16ch;
  margin-bottom: var(--sp-6);
}
.splash-lead {
  font-size: var(--text-lg);
  color: #A8A59B;
  max-width: 46ch;
  margin-bottom: var(--sp-8);
}

.splash-foot {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--text-xs);
  color: var(--muted-on-dark);
}

/* Copy and shapes are grid siblings, so a shape can never land on type
   no matter the viewport — the overlap is ruled out by construction. */
.splash-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-8);
  align-items: center;
}
.splash-copy { min-width: 0; }

/* the three primitives, converging — the same move the pipeline makes */
.splash-shapes {
  position: relative;
  width: 380px; height: 400px;
  flex: 0 0 auto;
  pointer-events: none;
}
.sp { position: absolute; display: block; }
.sp-circle {
  width: 240px; height: 240px;
  border-radius: 50%;
  background: var(--accent);
  top: 50px; left: 0;
}
.sp-triangle {
  width: 0; height: 0;
  border-left: 88px solid transparent;
  border-right: 88px solid transparent;
  border-bottom: 150px solid var(--blue);
  top: 190px; left: 170px;
}
.sp-square {
  width: 120px; height: 120px;
  background: var(--gold);
  transform: rotate(12deg);
  top: 30px; left: 250px;
}

@media (prefers-reduced-motion: no-preference) {
  .splash-shapes .sp { animation: converge 700ms cubic-bezier(.2,.7,.3,1) both; }
  .sp-circle   { animation-delay: 60ms; }
  .sp-triangle { animation-delay: 170ms; }
  .sp-square   { animation-delay: 280ms; }
  @keyframes converge {
    from { opacity: 0; transform: translate(64px, -28px) scale(.86); }
    to   { opacity: 1; transform: translate(0, 0) scale(1); }
  }
  /* the square carries a rotation, so it needs its own keyframes */
  .sp-square { animation-name: converge-square; }
  @keyframes converge-square {
    from { opacity: 0; transform: translate(64px, -28px) scale(.86) rotate(0deg); }
    to   { opacity: 1; transform: translate(0, 0) scale(1) rotate(12deg); }
  }
  .splash-copy > * { animation: splash-in 500ms ease-out both; }
  .splash-copy > *:nth-child(2) { animation-delay: 60ms; }
  .splash-copy > *:nth-child(3) { animation-delay: 120ms; }
  .splash-copy > *:nth-child(4) { animation-delay: 180ms; }
  @keyframes splash-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 1080px) {
  .splash-inner { grid-template-columns: minmax(0, 1fr); }
  .splash-shapes { display: none; }
}
@media (max-width: 720px) {
  .splash h1 { font-size: var(--text-2xl); }
  .splash-shapes { width: 300px; height: 300px; }
  .sp-circle { width: 190px; height: 190px; }
  .sp-triangle { border-left-width: 70px; border-right-width: 70px; border-bottom-width: 118px; top: 140px; left: 130px; }
  .sp-square { width: 76px; height: 76px; left: 190px; }
  .splash-foot { flex-direction: column; gap: var(--sp-2); }
}

/* .wrap sets margin:0 auto; inside a flex column those auto margins stop the
   child stretching, so it shrank to its content. Restore full width. */
.splash-inner, .splash-foot { width: 100%; }


/* Detail items are h2 where they are a page's top-level sections and h3 where
   they sit under one. Heading level is semantics; the size stays the same. */
.detail-item h2 {
  font-size: var(--text-xl);
  line-height: 1.25;
  margin-bottom: var(--sp-3);
}

@media (max-width: 720px) {
  /* standalone block links on the services hub need real tap targets;
     inline links inside a sentence are exempt and left alone */
  .pillar h2 a { display: block; padding: var(--sp-2) 0; }
  .pillar-more { padding: var(--sp-3) 0; }
}

/* ============================================================
   Warehouse console — the infrastructure view. Shares the product
   chrome with the dashboard mock but shows different work.
   ============================================================ */
.wh-panels {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border-top: 1px solid rgba(26,24,20,0.12);
}
.wh-panel { padding: var(--sp-5) var(--sp-6) var(--sp-6); border-left: 1px solid rgba(26,24,20,0.12); }
.wh-panel:first-child { border-left: none; }

.wh-table { white-space: nowrap; }
.wh-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(26,24,20,0.42);
  margin-right: var(--sp-2);
  vertical-align: middle;
}

.wh-models { list-style: none; margin: 0; padding: 0; }
.wh-models li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(26,24,20,0.10);
}
.wh-models li:last-child { border-bottom: none; }
.wh-tier {
  flex: 0 0 84px;
  font-size: var(--text-xs);
  color: var(--muted-on-light);
}
.wh-models code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--text-muted);
}
/* the two the reporting layer actually reads from */
.wh-models .is-mart code { color: var(--accent); font-weight: 600; }
.wh-models .is-mart .wh-tier { color: var(--accent-deep); }
.wh-panel .dash-note { margin-top: var(--sp-5); }

@media (max-width: 720px) {
  .wh-panels { grid-template-columns: minmax(0, 1fr); }
  .wh-panel { border-left: none; border-top: 1px solid rgba(26,24,20,0.12); }
  .wh-panel:first-child { border-top: none; }
  .wh-table { display: block; overflow-x: auto; }
}