@font-face {
  font-family: Manrope;
  src: url("assets/fonts/Manrope-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --paper: #f4f2ec;
  --ink: #232622;
  --muted: #5b6058;
  --accent: #28734f;
  --accent-hover: #205c40;
  --on-accent: #fff;
  --panel: #f8f7f2;
  --control-border: #cdd0c4;
  --button-hover: #454a3f;
  --rule: #d6d8d0;
  --soft: #eae8e0;
  --light: #fcfbf7;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --radius: 6px;

  /* ── THE FLUID RHYTHM ────────────────────────────────────────────────────
     Added 2026-09-16. These four replace a stepped ladder that was declared
     five times each, once per breakpoint, in four different places — and the
     header hairline had to be re-typed at every step to stay aligned with the
     shell it sits inside. A value re-typed in five places is a value that will
     eventually disagree with itself.

     Each is continuous rather than stepped, so the page does not jump at 1200,
     900, 680 or 360, and a phone gets spacing proportional to its width instead
     of the desktop figure with three deductions applied. Every consumer reads
     the token; nothing re-states a number. */
  --gutter: clamp(20px, 4.4vw, 64px);
  /* The complaint this answers: the old ladder read as generous on a phone and
     oversized on a desktop, because it was a desktop number with three
     deductions taken off it (120 / 95 / 80 / 72). The ramp below tightens the
     wide end harder than the narrow one — 120 to 96 on a desktop, 72 to 60 on a
     phone — so the same rhythm reads the same way at both ends instead of
     loosening as the screen grows. 96 is about 1.8x the largest heading, which
     is where a section stops reading as a gap and starts reading as a pause. */
  --section-gap: clamp(60px, 6.7vw, 100px);
  --header-h: clamp(74px, 6.6vw, 96px);
  /* How far a scene drawn at a fixed pixel size shrinks to fit its column.
     1 at 1100px and above; 0.55 at 380px and below. Scenes size their BOX from
     this too, so the artwork and the box it must fit inside cannot disagree.

     ⚠ Stepped, where the three tokens above are continuous, and the reason is a
     language limit rather than a preference: this one feeds scale(), which
     takes a <number>, and a clamp() containing vw resolves to a <length>. The
     first version of this line was clamp(0.55, 0.365 + 0.0577vw, 1) and it was
     INVALID — every declaration reading it was dropped, so transform computed
     to none, min-height to 0, and the scenes rendered at full size inside boxes
     that had collapsed. It looked like a design choice rather than a fault,
     which is what makes it worth writing down.

     What still holds is the property that mattered: ONE ladder, in ONE place,
     monotone. The defect this replaced was two independent ladders in four
     places that disagreed with each other — 0.8 at 900px and 0.9 at 680px, so a
     phone got a bigger object in a shorter box than a tablet. */
  --scene-fit: 1;

  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 10px);
}
@media (max-width: 1100px) {
  :root {
    --scene-fit: 0.92;
  }
}
@media (max-width: 980px) {
  :root {
    --scene-fit: 0.84;
  }
}
@media (max-width: 860px) {
  :root {
    --scene-fit: 0.76;
  }
}
@media (max-width: 740px) {
  :root {
    --scene-fit: 0.68;
  }
}
@media (max-width: 620px) {
  :root {
    --scene-fit: 0.62;
  }
}
@media (max-width: 480px) {
  :root {
    --scene-fit: 0.58;
  }
}
@media (max-width: 380px) {
  :root {
    --scene-fit: 0.55;
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Manrope, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body,
button,
input,
textarea,
select {
  font-family: Manrope, sans-serif;
}
button,
input,
textarea,
select {
  font-size: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button {
  color: inherit;
  cursor: pointer;
}
button:disabled {
  cursor: wait;
  opacity: 0.6;
}
button,
a {
  touch-action: manipulation;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
h1,
h2,
h3 {
  text-wrap: balance;
}
h1,
h2,
h3 {
  line-height: 1.16;
  font-weight: 450;
  letter-spacing: -0.04em;
}
p {
  text-wrap: pretty;
}
ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}
img {
  display: block;
  max-width: 100%;
}
svg {
  display: block;
}
::selection {
  background: var(--accent);
  color: var(--on-accent);
}
* {
  scrollbar-color: #888c80 var(--paper);
  scrollbar-width: thin;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}
input,
textarea {
  caret-color: var(--accent);
}
[hidden] {
  display: none !important;
}
.svg-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.shell {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.muted {
  color: var(--muted);
}
.section-space {
  padding-block: var(--section-gap);
}
.section-label {
  font-size: 11px;
  letter-spacing: 0.13em;
  font-weight: 650;
  line-height: 1.5;
  margin-bottom: 26px;
}
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 56px;
}
.section-heading > p {
  color: var(--muted);
  max-width: 370px;
  font-size: 14px;
  line-height: 1.9;
  padding-bottom: 4px;
}
h2 {
  font-size: clamp(36px, 4vw, 54px);
}
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 34px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 16px 22px;
  min-height: 56px;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.4;
  transition:
    background 180ms ease,
    transform 160ms var(--ease);
}
.button:active {
  transform: scale(0.98);
}
.button-small {
  padding: 12px 17px;
  min-height: 44px;
  gap: 27px;
  font-size: 12px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 19px;
  min-height: 44px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-underline-offset: 5px;
}
.text-link .icon {
  width: 19px;
  height: 19px;
  transition: transform 180ms var(--ease);
}
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  transform: translateY(-150%);
}
.skip-link:focus {
  transform: none;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  flex-shrink: 0;
  line-height: 1;
  letter-spacing: -0.06em;
  font-size: 27px;
  font-weight: 650;
}
.brand svg {
  height: 30px;
  width: 30px;
}
.brand-period {
  color: var(--accent);
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
}
.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.header-inner:after {
  content: "";
  position: absolute;
  bottom: 0;
  /* Reads the same token .shell pads with, so the hairline cannot drift out of
     alignment with the content it underlines — which is what five hand-kept
     copies of this pair used to risk at every breakpoint. */
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--rule);
}
#primary-nav {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 12px;
  font-weight: 550;
}
#primary-nav > a:not(.button) {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.menu-toggle {
  display: none;
}
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  align-items: center;
  padding-top: calc(var(--section-gap) * 0.56);
}
.hero-copy {
  position: relative;
  z-index: 1;
  padding-top: 4px;
  padding-bottom: 70px;
}
.hero-descriptor {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 650;
  margin-bottom: 31px;
}
.tiny-square {
  width: 6px;
  height: 6px;
  background: var(--accent);
}
h1 {
  font-size: clamp(56px, 5.7vw, 82px);
  line-height: 1.12;
  font-weight: 450;
  letter-spacing: -0.04em;
  max-width: 650px;
}
h1 span {
  color: var(--accent);
}
.hero-description {
  max-width: 425px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.95;
  margin-top: 28px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 32px;
}
.hero-actions .button {
  gap: 27px;
}
.hero-actions .text-link {
  font-size: 11px;
  gap: 10px;
}
.hero-note {
  font-size: 11px;
  color: var(--muted);
  margin-top: 23px;
}
.hero-art {
  position: relative;
  align-self: start;
  margin-top: -15px;
  margin-right: -26px;
}
.hero-art img {
  mix-blend-mode: multiply;
  width: 100%;
  height: auto;
}
.hero-art figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-top: -4px;
  padding: 0 24px;
}
.figure-cross {
  font-size: 21px;
  font-weight: 300;
  line-height: 1;
}
.hero-foot {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-block: 1px solid var(--rule);
  padding-block: 20px;
  margin-top: 28px;
  gap: 24px;
}
.hero-foot > span {
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 550;
}
.hero-foot > div {
  display: flex;
  align-items: center;
  gap: 23px;
  font-size: 12px;
}
.hero-foot > div > span {
  color: #8c9085;
  font-size: 17px;
  font-weight: 300;
}
.hero-foot a:not(.scroll-cue) {
  padding-block: 8px;
}
.scroll-cue {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
}
.scroll-cue .icon {
  transform: rotate(90deg);
  width: 18px;
  height: 18px;
}
.perspective {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 52px 80px;
}
.perspective h2 {
  font-size: clamp(36px, 3.6vw, 49px);
  line-height: 1.22;
}
.perspective-copy {
  padding-top: 42px;
  max-width: 465px;
}
.perspective-copy p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 20px;
}
.perspective-copy p.lead {
  color: var(--ink);
  font-size: 19px;
  line-height: 1.65;
  margin-bottom: 20px;
  letter-spacing: -0.025em;
}
.perspective-copy .text-link {
  margin-top: 1px;
}
.friction-strip {
  grid-column: 1/-1;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 28px;
  gap: 38px;
}
.friction-strip > div {
  display: grid;
  grid-template-columns: 1fr 22px;
  gap: 8px;
  font-size: 12px;
}
.friction-before {
  color: var(--muted);
}
.friction-strip .icon {
  width: 17px;
  height: 17px;
  transform: rotate(45deg);
  color: var(--accent);
}
.friction-strip strong {
  grid-column: 1/-1;
  font-weight: 550;
  font-size: 15px;
}
.expertise {
  padding-top: 34px;
}
.capability {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  padding: 50px 0 58px;
  border-top: 1px solid var(--rule);
}
.capability-icon {
  width: 28px;
  height: 28px;
  color: var(--accent);
  margin-bottom: 25px;
}
.capability h3,
.small-capability h3 {
  font-size: 36px;
  line-height: 1.2;
}
.capability-copy > p {
  max-width: 410px;
  margin-top: 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
}
.inline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 26px;
}
.inline-tags li {
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 5px 9px;
  font-size: 11px;
}
.capability-copy .text-link {
  margin-top: 22px;
}
.system-visual {
  background: var(--soft);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 372px;
  border-radius: 8px;
}
.visual-topline {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.09em;
}
.visual-corners {
  font-size: 18px;
  line-height: 1;
}
.system-diagram {
  position: relative;
  height: 290px;
  max-width: 520px;
  width: 100%;
  margin: auto;
}
.system-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--control-border);
  stroke-width: 1;
}
.system-node {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  position: absolute;
  min-height: 43px;
  border: 1px solid var(--control-border);
  border-radius: 4px;
  background: var(--paper);
  font-size: 11px;
  width: 122px;
}
.system-node .icon {
  width: 17px;
  height: 17px;
  color: var(--muted);
}
.node-operations {
  left: 5%;
  top: 14%;
}
.node-finance {
  right: 5%;
  top: 14%;
}
.node-people {
  left: 5%;
  bottom: 13%;
}
.node-customers {
  right: 5%;
  bottom: 13%;
}
.node-glyph {
  font-size: 20px;
  line-height: 1;
}
.system-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 166px;
  height: 58px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 5px;
  font-size: 12px;
}
.system-center svg {
  width: 26px;
  height: 26px;
}
.visual-bottomline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 11px;
  color: var(--muted);
}
.status-dot {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: #597150;
}
.capability-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
}
.small-capability {
  padding-top: 42px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.small-capability:first-child {
  padding-right: 58px;
  border-right: 1px solid var(--rule);
}
.small-capability:last-child {
  padding-left: 58px;
}
.small-capability-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 11px;
  letter-spacing: 0.07em;
  margin-bottom: 24px;
}
.small-capability-heading .icon {
  margin-bottom: 0;
}
.small-capability > p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.9;
  margin-top: 19px;
  max-width: 450px;
}
.small-capability > .text-link {
  margin-top: 15px;
}
.agent-example {
  width: 100%;
  margin-top: 30px;
  background: var(--soft);
  padding: 25px 24px;
  min-height: 147px;
  border-radius: 8px;
  font-size: 11px;
}
.agent-question {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--muted);
}
.agent-question .icon {
  width: 16px;
  height: 16px;
}
.agent-answer {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding-top: 19px;
  margin-top: 16px;
  border-top: 1px solid var(--rule);
}
.agent-answer > .icon {
  color: var(--accent);
  width: 17px;
  height: 17px;
}
.agent-answer strong {
  font-weight: 600;
  font-size: 11px;
  display: block;
}
.agent-answer div > span {
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-top: 4px;
}
.automation-example {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 147px;
  background: var(--soft);
  border-radius: 8px;
  padding: 24px;
  margin-top: 30px;
}
.automation-example > div {
  text-align: center;
  font-size: 11px;
}
.workflow-mini-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--control-border);
  border-radius: 7px;
  background: var(--paper);
  margin: 0 auto 10px;
}
.workflow-mini-icon .icon {
  width: 18px;
  height: 18px;
}
.workflow-mini-icon.accent-icon {
  background: var(--accent);
  color: var(--on-accent);
  border-color: transparent;
}
.connector-arrow {
  color: #858a7d;
  width: 20px;
  height: 20px;
  margin-top: -25px;
}
.solutions {
  background: var(--ink);
  color: var(--paper);
}
.solutions .section-label {
  color: #c9cbbf;
}
.solutions .section-heading h2 > span {
  color: #b5bdad;
}
.solutions .section-heading > p {
  color: #c4c9bf;
}
.solutions .section-heading {
  margin-bottom: 45px;
}
.workflow-select {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #4b5047;
  padding-bottom: 20px;
}
.workflow-select button {
  display: flex;
  align-items: center;
  gap: 35px;
  border: 1px solid #51574d;
  border-radius: 5px;
  background: transparent;
  padding: 12px 18px;
  color: #d5d9cf;
  min-height: 46px;
  font-size: 11px;
  font-weight: 500;
  transition:
    color 160ms ease,
    background 160ms ease;
}
.workflow-select button .icon {
  width: 15px;
  height: 15px;
}
.workflow-select button[aria-pressed="true"] {
  color: var(--ink);
  background: #e4e8dc;
  border-color: transparent;
}
.workflow-panels {
  min-height: 390px;
}
.workflow-panel {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 100px;
  align-items: center;
  padding-block: 46px 12px;
}
.workflow-panel + .workflow-panel {
  border-top: 1px solid #51574d;
  margin-top: 35px;
}
.enhanced .workflow-panel + .workflow-panel {
  border: 0;
  margin: 0;
}
.scenario-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #b8bfb0;
}
.workflow-story h3 {
  font-size: 33px;
  line-height: 1.25;
  margin-top: 23px;
}
.workflow-story > p {
  color: #bdc4b7;
  font-size: 13px;
  line-height: 1.95;
  margin-top: 22px;
  max-width: 380px;
}
.workflow-outcome {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d7dccf;
  font-size: 11px;
  margin-top: 26px;
}
.workflow-outcome .icon {
  width: 17px;
  height: 17px;
}
.workflow-steps {
  position: relative;
}
.workflow-steps:before {
  content: "";
  position: absolute;
  left: 25px;
  top: 35px;
  bottom: 35px;
  width: 1px;
  background: #62695b;
}
.workflow-steps li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 0;
  position: relative;
  min-height: 81px;
}
.step-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  background: var(--ink);
  border: 1px solid #62695b;
  border-radius: 7px;
  flex-shrink: 0;
}
.step-icon .icon {
  width: 20px;
  height: 20px;
  color: #c5cdbd;
}
.workflow-steps li > div {
  flex: 1;
}
.workflow-steps strong {
  display: block;
  font-size: 12px;
  font-weight: 550;
}
.workflow-steps li > div > span {
  display: block;
  font-size: 11px;
  color: #b8bfb0;
  line-height: 1.6;
  margin-top: 5px;
}
.step-label {
  font-size: 11px;
  letter-spacing: 0.07em;
  color: #b8bfb0;
  border: 1px solid #51594a;
  padding: 2px 6px;
  border-radius: 3px;
}
.human-step .step-icon {
  background: #c3cbb8;
  border-color: transparent;
}
.human-step .step-icon .icon {
  color: var(--ink);
}
.human-step .step-label {
  color: #dae3cf;
  border-color: #747e6a;
}
.solutions-footer {
  border-top: 1px solid #4b5047;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 25px;
  margin-top: 34px;
  gap: 25px;
  font-size: 11px;
  color: #c4c9bf;
}
.solutions-footer .text-link {
  color: var(--paper);
  font-size: 11px;
}
.solutions :focus-visible {
  outline-color: #83cba1;
}
.approach .section-heading {
  margin-bottom: 52px;
}
.approach-steps > li {
  display: grid;
  grid-template-columns: 85px 1fr 190px;
  align-items: start;
  gap: 30px;
  padding: 32px 0;
  border-top: 1px solid var(--rule);
}
.approach-steps > li:last-child {
  border-bottom: 1px solid var(--rule);
}
.approach-number {
  color: var(--accent);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  padding-top: 6px;
}
.approach-steps h3 {
  font-size: 24px;
  letter-spacing: -0.035em;
}
.approach-steps p {
  font-size: 13px;
  line-height: 1.9;
  max-width: 500px;
  color: var(--muted);
  margin-top: 12px;
}
.approach-deliverable {
  font-size: 11px;
  text-align: right;
  color: var(--muted);
  padding-top: 10px;
}
/* An inset panel rather than a full-bleed section, so its inner padding is its
   own — but the VERTICAL share of it is the page's rhythm, not a number of its
   own, or the page has two rhythms and the eye finds the seam. */
.principles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  background: var(--soft);
  max-width: 1312px;
  padding: calc(var(--section-gap) * 0.62) 56px;
  border-radius: 8px;
}
.principles-mark {
  width: 36px;
  height: 36px;
  margin-bottom: 29px;
  color: var(--accent);
}
.principles h2 {
  font-size: 33px;
  line-height: 1.28;
}
.principles-intro > p {
  font-size: 13px;
  color: var(--muted);
  max-width: 320px;
  margin-top: 18px;
}
.principle-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 25px;
}
.principle-list > div {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.principle-list .icon {
  color: var(--accent);
  width: 21px;
  height: 21px;
}
.principle-list h3 {
  font-size: 15px;
  letter-spacing: -0.02em;
  font-weight: 600;
  line-height: 1.4;
}
.principle-list p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 8px;
  max-width: 340px;
}
.faq {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 70px;
}
.faq h2 {
  font-size: 46px;
}
.faq-list {
  border-top: 1px solid var(--rule);
}
details {
  border-bottom: 1px solid var(--rule);
}
summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 550;
  padding: 25px 0;
  min-height: 72px;
}
summary::-webkit-details-marker {
  display: none;
}
.plus {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.plus:before,
.plus:after {
  content: "";
  position: absolute;
  top: 8px;
  left: 3px;
  width: 12px;
  height: 1px;
  background: currentColor;
}
.plus:after {
  transform: rotate(90deg);
}
details[open] .plus:after {
  transform: none;
}
details p {
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted);
  padding: 0 35px 26px 0;
}
.contact {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 85px;
  padding-block: var(--section-gap);
  border-top: 1px solid var(--rule);
}
.contact-copy h2 {
  font-size: clamp(52px, 5.5vw, 75px);
  line-height: 1.16;
}
.contact-copy h2 > span {
  color: var(--accent);
}
.contact-copy > p:not(.section-label) {
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
  margin-top: 29px;
}
.contact-signature {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 54px;
  font-size: 11px;
  line-height: 1.8;
  color: var(--muted);
}
.contact-signature svg {
  width: 34px;
  height: 34px;
  color: var(--accent);
}
.brief-panel {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 34px;
  background: var(--panel);
}
.brief-panel h3 {
  font-size: 23px;
  letter-spacing: -0.025em;
}
.brief-intro {
  font-size: 11px;
  color: var(--muted);
  margin-top: 9px;
}
form {
  margin-top: 26px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.field {
  margin-bottom: 15px;
}
.field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 7px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--control-border);
  background: var(--paper);
  border-radius: 4px;
  min-height: 45px;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.6;
  transition: border-color 150ms ease;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
.field textarea {
  resize: vertical;
  min-height: 99px;
  max-height: 350px;
}
.field select {
  padding-right: 28px;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.field [aria-invalid="true"] {
  border-color: var(--accent);
}
.field-error {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: var(--accent);
  margin-top: 4px;
}
.field-error:empty {
  display: none;
}
/* AMENDED 2026-09-13. The accent fill used to live on `.form-submit`, because
   downloading was the only thing this form could do. Send now reaches a real
   endpoint, so it is the primary action and carries the fill; the two local
   paths sit beneath it in the quiet treatment. The geometry is shared, so the
   swap changed which button is emphasised and not how the panel is laid out. */
.form-primary,
.form-submit {
  width: 100%;
  justify-content: space-between;
  font-size: 12px;
  min-height: 51px;
  padding: 14px 18px;
}
.form-primary {
  color: var(--on-accent);
  background: var(--accent);
}
.form-secondary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.form-secondary button {
  border: 0;
  background: none;
  font-size: 11px;
  padding: 10px 0;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.form-secondary span {
  font-size: 11px;
  color: var(--muted);
}
#form-status {
  font-size: 11px;
  margin-top: 5px;
  line-height: 1.7;
}
#form-status:empty {
  display: none;
}
#copy-fallback {
  width: 100%;
  height: 180px;
  background: var(--paper);
  color: var(--ink);
  padding: 12px;
  font-size: 12px;
  margin-top: 12px;
}
noscript p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px;
}
.site-footer {
  padding-top: 34px;
  padding-bottom: 26px;
}
.footer-top {
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 31px 0 44px;
  border-top: 1px solid var(--rule);
}
.footer-top > p {
  font-size: 11px;
  color: var(--muted);
}
.back-top {
  margin-left: auto;
  font-size: 11px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
  font-size: 11px;
  color: var(--muted);
}
@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background: var(--button-hover);
  }
  .form-submit:hover {
    background: var(--accent-hover);
  }
  .text-link:hover {
    text-decoration: underline;
  }
  .text-link:hover .icon {
    transform: translateX(3px);
  }
  #primary-nav > a:not(.button):hover,
  .hero-foot a:hover {
    color: var(--accent);
  }
  .workflow-select button:hover {
    background: #414a3b;
    color: var(--paper);
  }
  .workflow-select button[aria-pressed="true"]:hover {
    background: #d5decc;
    color: var(--ink);
  }
  summary:hover {
    color: var(--accent);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-art {
    animation: hero-arrive 1000ms var(--ease) both;
  }
  .hero-copy {
    animation: copy-arrive 800ms var(--ease) both;
  }
  @keyframes hero-arrive {
    from {
      transform: translateY(20px);
      opacity: 0.5;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes copy-arrive {
    from {
      transform: translateY(10px);
      opacity: 0.65;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}
@media (min-width: 1441px) {
  .hero {
    padding-top: 80px;
  }
  .hero-copy {
    padding-bottom: 90px;
  }
  .hero-art {
    margin-top: -35px;
  }
}
@media (max-width: 1200px) {
  .hero {
    padding-top: 55px;
  }
  .hero-art {
    margin-right: -15px;
    margin-top: 10px;
  }
  .hero-actions {
    gap: 17px;
    flex-wrap: wrap;
  }
  .hero-copy {
    padding-bottom: 40px;
  }
  .hero-foot {
    margin-top: 30px;
  }
  .hero-foot > span {
    font-size: 11px;
  }
  .perspective {
    gap: 45px;
  }
  .expertise {
    padding-top: 25px;
  }
  .capability {
    gap: 35px;
  }
  .small-capability:first-child {
    padding-right: 35px;
  }
  .small-capability:last-child {
    padding-left: 35px;
  }
  .workflow-panel {
    gap: 50px;
  }
  .principles {
    margin-inline: 40px;
    gap: 60px;
    padding-inline: 40px;
  }
  .contact {
    gap: 45px;
  }
  .brief-panel {
    padding: 25px;
  }
  .form-secondary {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
  }
  .form-secondary span {
    font-size: 11px;
  }
  .hero-art figcaption {
    font-size: 11px;
  }
}
@media (max-width: 900px) {
  .brand {
    font-size: 24px;
  }
  .brand svg {
    width: 27px;
    height: 27px;
  }
  #primary-nav {
    gap: 22px;
    font-size: 11px;
  }
  .hero {
    padding-top: 50px;
    grid-template-columns: 1.1fr 1fr;
  }
  .hero-descriptor {
    font-size: 11px;
    margin-bottom: 25px;
    letter-spacing: 0.1em;
  }
  h1 {
    font-size: 55px;
  }
  .hero-description {
    font-size: 13px;
  }
  .hero-art {
    margin-top: 24px;
  }
  .hero-actions .button {
    font-size: 11px;
    padding: 14px 16px;
    min-height: 49px;
  }
  .hero-actions {
    gap: 6px;
    margin-top: 22px;
  }
  .hero-note {
    font-size: 11px;
    margin-top: 13px;
  }
  .hero-foot > span {
    display: none;
  }
  .hero-foot > div {
    gap: 22px;
  }
  .hero-foot {
    margin-top: 22px;
    padding-block: 13px;
  }
  .hero-copy {
    padding-bottom: 14px;
  }
  h2 {
    font-size: 37px;
  }
  .perspective {
    gap: 35px;
  }
  .perspective h2 {
    font-size: 34px;
  }
  .perspective-copy {
    padding-top: 37px;
  }
  .perspective-copy p.lead {
    font-size: 17px;
  }
  .perspective-copy p {
    font-size: 13px;
  }
  .friction-strip {
    gap: 28px;
  }
  .friction-strip strong {
    font-size: 13px;
  }
  .friction-strip > div {
    font-size: 11px;
  }
  .expertise {
    padding-top: 12px;
  }
  .section-heading > p {
    font-size: 12px;
    max-width: 265px;
  }
  .capability {
    gap: 26px;
  }
  .capability h3,
  .small-capability h3 {
    font-size: 30px;
  }
  .capability-copy > p,
  .small-capability > p {
    font-size: 12px;
  }
  .inline-tags {
    gap: 4px;
  }
  .inline-tags li {
    font-size: 11px;
    padding: 4px 6px;
  }
  .system-visual {
    padding: 20px 15px;
    min-height: 340px;
  }
  .system-node {
    font-size: 11px;
    width: 100px;
    gap: 5px;
  }
  .system-center {
    width: 139px;
    font-size: 11px;
  }
  .system-center svg {
    width: 22px;
    height: 22px;
  }
  .node-operations,
  .node-people {
    left: 0;
  }
  .node-finance,
  .node-customers {
    right: 0;
  }
  .small-capability:first-child {
    padding-right: 25px;
  }
  .small-capability:last-child {
    padding-left: 25px;
  }
  .small-capability-heading {
    font-size: 11px;
    gap: 10px;
  }
  .agent-example {
    padding: 20px 16px;
  }
  .agent-answer strong {
    font-size: 11px;
  }
  .workflow-panel {
    gap: 30px;
    grid-template-columns: 1fr 1.2fr;
  }
  .workflow-story h3 {
    font-size: 28px;
  }
  .workflow-story > p {
    font-size: 12px;
  }
  .workflow-outcome {
    font-size: 11px;
  }
  .workflow-steps li {
    gap: 10px;
  }
  .step-label {
    display: none;
  }
  .workflow-steps strong {
    font-size: 11px;
  }
  .workflow-steps li > div > span {
    font-size: 11px;
  }
  .workflow-select button {
    gap: 24px;
  }
  .approach-steps > li {
    grid-template-columns: 50px 1fr 135px;
    gap: 20px;
  }
  .approach-steps h3 {
    font-size: 22px;
  }
  .approach-deliverable {
    font-size: 11px;
  }
  .principles {
    margin-inline: 28px;
    padding-inline: 30px;
    gap: 35px;
  }
  .principles h2 {
    font-size: 28px;
  }
  .principle-list h3 {
    font-size: 13px;
  }
  .principle-list p {
    font-size: 11px;
  }
  .faq {
    gap: 40px;
    grid-template-columns: 1fr 1.3fr;
  }
  .faq h2 {
    font-size: 37px;
  }
  summary {
    font-size: 12px;
  }
  .contact {
    gap: 35px;
  }
  .contact-copy h2 {
    font-size: 52px;
  }
  .contact-copy > p:not(.section-label) {
    font-size: 12px;
  }
  .brief-panel {
    padding: 22px;
  }
  .brief-panel h3 {
    font-size: 21px;
  }
  .brief-intro {
    font-size: 11px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-bottom {
    font-size: 11px;
  }
}
@media (max-width: 680px) {
  .brand {
    font-size: 25px;
  }
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: 39px;
  }
  .hero-descriptor {
    font-size: 11px;
    letter-spacing: 0.08em;
    margin-bottom: 21px;
  }
  h1 {
    font-size: clamp(44px, 10.8vw, 70px);
    line-height: 1.13;
    max-width: 550px;
  }
  .hero-copy {
    padding: 0;
  }
  .hero-description {
    font-size: 13px;
    line-height: 1.9;
    margin-top: 23px;
    max-width: 410px;
  }
  .hero-actions {
    margin-top: 26px;
    gap: 15px;
    flex-wrap: wrap;
  }
  .hero-actions .button {
    font-size: 11px;
    gap: 15px;
    padding: 15px 16px;
    min-height: 49px;
  }
  .hero-actions .text-link {
    font-size: 11px;
    gap: 9px;
  }
  .hero-note {
    font-size: 11px;
    margin-top: 16px;
  }
  .hero-art {
    width: 100%;
    align-self: center;
    margin: 15px 0 0;
    max-width: 440px;
  }
  .hero-art img {
    width: 100%;
  }
  .hero-art figcaption {
    padding-inline: 5px;
    font-size: 11px;
    margin-top: -9px;
  }
  .hero-foot {
    padding-block: 19px;
    margin-top: 25px;
  }
  .hero-foot > div {
    gap: 13px;
    font-size: 11px;
    flex-wrap: wrap;
  }
  .hero-foot > div > span {
    font-size: 12px;
  }
  .scroll-cue {
    height: 33px;
    width: 33px;
    min-width: 33px;
  }
  .section-label {
    font-size: 11px;
    margin-bottom: 22px;
    letter-spacing: 0.08em;
  }
  h2 {
    font-size: 35px;
  }
  .section-heading {
    display: block;
    margin-bottom: 36px;
  }
  .section-heading > p {
    font-size: 12px;
    margin-top: 22px;
    max-width: 100%;
  }
  .perspective {
    display: block;
  }
  .perspective h2 {
    font-size: 35px;
    line-height: 1.2;
  }
  .perspective-copy {
    padding-top: 27px;
    max-width: 100%;
  }
  .perspective-copy p.lead {
    font-size: 17px;
  }
  .perspective-copy p {
    font-size: 13px;
  }
  .friction-strip {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 35px;
    padding-top: 0;
  }
  .friction-strip > div {
    padding-block: 19px;
    border-bottom: 1px solid var(--rule);
    grid-template-columns: 1fr 20px 1.2fr;
    align-items: center;
    gap: 15px;
    font-size: 11px;
  }
  .friction-strip strong {
    grid-column: auto;
    font-size: 11px;
    font-weight: 600;
  }
  .friction-strip .icon {
    transform: none;
    width: 15px;
    height: 15px;
  }
  .expertise {
    padding-top: 0;
  }
  .capability {
    grid-template-columns: 1fr;
    gap: 29px;
    padding: 33px 0 35px;
  }
  .capability-icon {
    width: 25px;
    height: 25px;
    margin-bottom: 20px;
  }
  .capability h3,
  .small-capability h3 {
    font-size: 31px;
  }
  .capability-copy > p,
  .small-capability > p {
    font-size: 13px;
    max-width: 100%;
    margin-top: 18px;
  }
  .inline-tags li {
    font-size: 11px;
    padding: 5px 8px;
  }
  .inline-tags {
    gap: 6px;
    margin-top: 20px;
  }
  .capability-copy .text-link {
    margin-top: 15px;
    font-size: 11px;
  }
  .system-visual {
    min-height: 300px;
    padding: 22px 17px;
  }
  .system-diagram {
    height: 245px;
  }
  .system-node {
    font-size: 11px;
    width: 102px;
    min-height: 38px;
  }
  .system-center {
    width: 139px;
    height: 52px;
  }
  .visual-bottomline {
    font-size: 11px;
  }
  .capability-pair {
    grid-template-columns: 1fr;
  }
  .small-capability:first-child {
    padding-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 34px;
  }
  .small-capability:last-child {
    padding-left: 0;
    padding-top: 34px;
  }
  .small-capability-heading {
    font-size: 11px;
    margin-bottom: 23px;
  }
  .agent-example {
    margin-top: 24px;
    padding: 23px;
    min-height: 142px;
  }
  .agent-answer strong {
    font-size: 11px;
  }
  .automation-example {
    margin-top: 24px;
  }
  .small-capability > .text-link {
    font-size: 11px;
  }
  .solutions .section-heading {
    margin-bottom: 30px;
  }
  .solutions h2 {
    font-size: 43px;
  }
  .workflow-select {
    gap: 5px;
    justify-content: space-between;
    padding-bottom: 17px;
  }
  .workflow-select button {
    font-size: 11px;
    padding: 10px 9px;
    gap: 0;
    flex: 1;
    justify-content: center;
    line-height: 1.5;
  }
  .workflow-select button .icon {
    display: none;
  }
  .workflow-panel {
    grid-template-columns: 1fr;
    padding-top: 30px;
    gap: 27px;
  }
  .workflow-story h3 {
    font-size: 29px;
    margin-top: 16px;
  }
  .workflow-story > p {
    font-size: 12px;
    margin-top: 17px;
  }
  .workflow-outcome {
    margin-top: 19px;
    font-size: 11px;
  }
  .workflow-steps li {
    gap: 14px;
    padding-block: 12px;
    min-height: 76px;
  }
  .workflow-steps strong {
    font-size: 11px;
  }
  .workflow-steps li > div > span {
    font-size: 11px;
  }
  .step-label {
    display: inline;
    font-size: 11px;
    padding: 2px 4px;
  }
  .step-icon {
    width: 43px;
    height: 43px;
  }
  .workflow-steps:before {
    left: 21px;
  }
  .solutions-footer {
    display: block;
    margin-top: 25px;
    padding-top: 21px;
  }
  .solutions-footer > span {
    display: block;
    font-size: 11px;
  }
  .solutions-footer .text-link {
    margin-top: 8px;
    font-size: 11px;
  }
  .approach .section-heading {
    margin-bottom: 34px;
  }
  .approach-steps > li {
    grid-template-columns: 30px 1fr;
    padding-block: 25px;
    gap: 0 14px;
  }
  .approach-number {
    font-size: 11px;
    padding-top: 3px;
  }
  .approach-steps h3 {
    font-size: 21px;
    line-height: 1.25;
  }
  .approach-steps p {
    font-size: 12px;
    line-height: 1.9;
    margin-top: 11px;
  }
  .approach-deliverable {
    grid-column: 2;
    text-align: left;
    margin-top: 7px;
    font-size: 11px;
  }
  .principles {
    margin-inline: 23px;
    padding-inline: 25px;
    display: block;
  }
  .principles h2 {
    font-size: 28px;
  }
  .principles-intro > p {
    font-size: 12px;
  }
  .principles-mark {
    width: 30px;
    height: 30px;
    margin-bottom: 23px;
  }
  .principle-list {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--control-border);
    gap: 24px;
  }
  .principle-list > div {
    gap: 13px;
  }
  .principle-list h3 {
    font-size: 13px;
  }
  .principle-list p {
    font-size: 11px;
  }
  .faq {
    display: block;
  }
  .faq h2 {
    font-size: 35px;
  }
  .faq-list {
    margin-top: 34px;
  }
  summary {
    font-size: 12px;
    padding-block: 23px;
    gap: 12px;
  }
  details p {
    font-size: 12px;
    padding-right: 14px;
  }
  .contact {
    display: block;
  }
  .contact-copy h2 {
    font-size: 55px;
  }
  .contact-copy > p:not(.section-label) {
    font-size: 13px;
    margin-top: 24px;
  }
  .contact-signature {
    display: none;
  }
  .brief-panel {
    margin-top: 34px;
    padding: 24px 20px;
  }
  .brief-panel h3 {
    font-size: 23px;
  }
  .brief-intro {
    font-size: 11px;
  }
  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 11px;
  }
  .field input,
  .field select,
  .field textarea {
    font-size: 12px;
  }
  .field label {
    font-size: 11px;
  }
  .form-secondary {
    gap: 0;
  }
  .form-secondary span {
    font-size: 11px;
  }
  .site-footer {
    padding-top: 0;
    padding-bottom: 25px;
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 19px;
    padding-top: 28px;
    padding-bottom: 29px;
  }
  .footer-top .brand {
    font-size: 24px;
  }
  .footer-top > p {
    grid-column: 1;
    font-size: 11px;
  }
  .back-top {
    grid-column: 2;
    grid-row: 1;
    font-size: 11px;
    gap: 9px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    font-size: 11px;
  }
  .nav-enhanced .menu-toggle {
    width: 44px;
    height: 44px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
  }
  .menu-toggle span {
    width: 16px;
    height: 1px;
    background: var(--ink);
  }
  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(3px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-3px) rotate(-45deg);
  }
  #primary-nav {
    display: flex;
    gap: 17px;
    font-size: 11px;
    flex-wrap: wrap;
    padding-block: 12px;
  }
  #primary-nav .button {
    min-height: 38px;
    padding: 9px 12px;
    font-size: 11px;
    gap: 12px;
  }
  body:not(.nav-enhanced) .header-inner {
    height: auto;
    min-height: 100px;
    flex-wrap: wrap;
    padding-top: 16px;
  }
  .nav-enhanced #primary-nav {
    display: none;
    position: absolute;
    top: 77px;
    left: 0;
    right: 0;
    background: var(--paper);
    padding: 18px 23px 24px;
    border-bottom: 1px solid var(--rule);
  }
  .nav-enhanced #primary-nav.menu-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-enhanced #primary-nav > a {
    min-height: 48px;
    font-size: 13px;
  }
  .nav-enhanced #primary-nav .button {
    margin-top: 10px;
    justify-content: space-between;
    min-height: 48px;
  }
}
@media (max-width: 360px) {
  .hero-descriptor {
    font-size: 11px;
  }
  .hero-actions {
    gap: 8px;
  }
  .hero-actions .button {
    font-size: 11px;
    padding-inline: 12px;
    gap: 10px;
  }
  .hero-actions .text-link {
    font-size: 11px;
    gap: 5px;
  }
  .hero-foot > div {
    gap: 9px;
    font-size: 11px;
  }
  .perspective h2 {
    font-size: 31px;
  }
  .friction-strip > div {
    gap: 9px;
    font-size: 11px;
  }
  .friction-strip strong {
    font-size: 11px;
  }
  .principles {
    margin-inline: 19px;
  }
  .step-label {
    display: none;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .brief-panel {
    padding: 22px 17px;
  }
  .hero-art figcaption {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .button:active {
    transform: none;
  }
}

/* Keep supporting copy readable at every viewport. */
.hero-description,
.perspective-copy p,
.capability-copy > p,
.small-capability > p,
.workflow-story > p,
.approach-steps p,
.principles-intro > p,
.principle-list p,
details p,
.contact-copy > p:not(.section-label) {
  font-size: 14px;
}
.field label {
  font-size: 12px;
}
.field input,
.field select,
.field textarea {
  font-size: 14px;
}
.hero-art {
  max-width: 620px;
  justify-self: end;
  margin-right: -8px;
}
.hero-art img {
  mask-image:
    linear-gradient(to right, transparent, #000 12%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 10%, #000 87%, transparent);
  mask-composite: intersect;
}
/* Without JavaScript none of these three controls can do anything, and a dead
   control is a small lie. The noscript paragraph and the printed address are
   what remain, which is the whole of what still works. `#send-brief` joined
   this list on 2026-09-13, when it became the primary button — a disabled
   primary action with no explanation is the worst of the three to leave up. */
body:not(.enhanced) #send-brief,
body:not(.enhanced) .form-notice,
body:not(.enhanced) .form-fallback,
body:not(.enhanced) .form-submit,
body:not(.enhanced) .form-secondary {
  display: none;
}
@media (max-width: 680px) {
  .hero-art {
    max-width: 440px;
    margin-right: 0;
  }
  .field input,
  .field select,
  .field textarea {
    font-size: 16px;
  }
  .hero-actions {
    gap: 10px;
  }
  .hero-actions .text-link {
    font-size: 11px;
  }
  .hero-foot > div {
    gap: 10px;
  }
  .step-label {
    display: none;
  }
  .small-capability-heading {
    letter-spacing: 0;
  }
  .system-node {
    font-size: 11px;
  }
  .workflow-steps li > div > span {
    font-size: 11px;
  }
  .brief-panel {
    padding: 24px 20px;
  }
}

/* Header theme control remains visible alongside the mobile menu. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  margin-left: 24px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
}
#primary-nav {
  margin-left: auto;
}
.theme-toggle .icon {
  width: 19px;
  height: 19px;
}
.theme-sun {
  display: none;
}
.hero-art .hero-dark {
  display: none;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141b17;
  --ink: #edf3ec;
  --muted: #acb9ad;
  --accent: #83cba1;
  --accent-hover: #a0dcb8;
  --on-accent: #14251b;
  --rule: #344339;
  --soft: #1e2922;
  --light: #243329;
  --panel: #19231d;
  --control-border: #4b6052;
  --button-hover: #cbdccd;
}
[data-theme="dark"] .theme-sun {
  display: block;
}
[data-theme="dark"] .theme-moon,
[data-theme="dark"] .hero-art .hero-light {
  display: none;
}
[data-theme="dark"] .hero-art .hero-dark {
  display: block;
  mix-blend-mode: normal;
}
/* The workflow demonstration keeps its intentionally dark surfaces in both modes. */
[data-theme="dark"] .solutions {
  --paper: #edf3ec;
  --ink: #101712;
  --muted: #b8c3b7;
}
@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover {
    background: var(--soft);
  }
}
@media (max-width: 680px) {
  .header-inner .brand {
    order: 0;
  }
  .theme-toggle {
    order: 1;
    margin-left: auto;
    margin-right: 10px;
  }
  .menu-toggle {
    order: 2;
  }
  #primary-nav {
    order: 3;
  }
  body:not(.enhanced) #primary-nav {
    margin-left: 0;
  }
}

/* ══ WAYFINDING ═══════════════════════════════════════════════════════════
   Added 2026-09-16.

   Before this, every page invented its own header nav: the Ramz page offered
   "Privacy / Ramz Care / All products", the site privacy page offered
   "Terms / Ramz privacy / Contact", and the Ramz Care terms page offered a
   link to a directory that has no index.html and therefore 404s. Three
   different answers to "what does the header mean", and one of them was wrong.

   The header now means one thing on every page — the site — and two smaller
   strips carry the rest:

     · .breadcrumb  answers "where am I, and what is above me". Every ancestor
       is a link; the page itself is aria-current and deliberately NOT a link,
       because a link to the page you are on is a control that does nothing.
     · .subnav      answers "what else belongs to this product". It appears on
       a product's own pages only, so it is never a list of places that have
       nothing to do with where you are.

   Both are real landmarks with their own labels, so a screen-reader user gets
   the same three-way split a sighted visitor does. */

.breadcrumb {
  padding-block: 22px 0;
  font-size: 12px;
  line-height: 1.5;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  color: var(--muted);
}

/* The separator is generated, so it is never read aloud and never selected
   when a visitor copies the trail. */
.breadcrumb li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin: 0 11px;
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  transform: rotate(45deg);
  flex: none;
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  min-height: 34px;
  padding-inline: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.breadcrumb a:hover {
  color: var(--ink);
  border-bottom-color: var(--rule);
}

.breadcrumb [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Product section strip ---------- */

.subnav {
  margin-top: 18px;
  border-bottom: 1px solid var(--rule);
}

.subnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.subnav a {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 550;
  letter-spacing: 0.005em;
  color: var(--muted);
  text-decoration: none;
  /* The indicator is the border, so the selected tab does not move by 2px when
     it becomes selected — a jump that reads as a rendering fault. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.subnav a:hover {
  color: var(--ink);
  border-bottom-color: var(--rule);
}

.subnav [aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.subnav .icon {
  width: 13px;
  height: 13px;
  stroke-width: 1.7;
  opacity: 0.75;
}

@media (max-width: 680px) {
  .subnav ul {
    /* A tab strip that wraps to three lines stops looking like one control.
       Below 680 it scrolls instead, and the fade is a scrollbar the visitor can
       see without one being drawn. */
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .subnav ul::-webkit-scrollbar {
    display: none;
  }

  .subnav a {
    padding: 0 12px;
    white-space: nowrap;
  }
}

/* ---------- Footer link row (every page) ---------- */

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
}

.footer-links a {
  font-size: 12px;
  font-weight: 550;
  color: var(--muted);
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

.footer-links a:hover {
  color: var(--ink);
}

/* The strip has to line up with what it describes. Every page that carries one
   is a 760px document column centred inside the shell, so a breadcrumb flush to
   the shell gutter starts 64px to the left of the heading below it and reads as
   belonging to a different page. The nav therefore takes the document's own box
   — same width, same inner gutter — and .page-chrome gives its padding up so
   the two are not applied twice. */
.page-chrome {
  padding-inline: 0;
}

.page-chrome > nav {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Product marks ---------- */

/* Each product's own logo, taken from its own repository rather than redrawn:
   BrightKidz Hub's brand/icon.svg and ZadVest's public/logo.svg are verbatim
   copies. Ramz has no SVG anywhere — it is a native Kotlin app whose mark lives
   as an Android VectorDrawable — so assets/mark-ramz.svg is a transcription of
   the same five paths, at the same widths and colours, and says so in its own
   comment.

   They keep their own colours in both themes, because a logo that changes
   colour with the page is not that company's logo. They are <img alt=""> and
   decorative by construction: the product's name is set in text immediately
   beside each one, so announcing the mark as well would read it twice. */
.product-mark {
  width: var(--mark-size, 32px);
  height: var(--mark-size, 32px);
  flex: none;
  display: block;
}

/* The mark leads, as it does on each product's own site. */
.product-card h3,
.product-hero h1 {
  display: flex;
  align-items: center;
  gap: 0.34em;
}

.product-card h3 {
  --mark-size: 31px;
}

.product-hero h1 {
  /* Sized against the type rather than in pixels, so the lockup holds together
     through the h1's own clamp() instead of drifting apart at one end of it. */
  --mark-size: 0.82em;
  gap: 0.28em;
}

/* Optical, not arithmetic. BrightKidz and Ramz are full-bleed tiles; ZadVest is
   line art on nothing, so at an equal box it reads a size smaller than the two
   beside it. The nudge is to the BOX, so the artwork is untouched — and it came
   down from 1.18 when the Arabic went into the seal, because the word is ink
   and ink is what the eye was weighing. */
.product-mark[src$="mark-zadvest.svg"] {
  width: calc(var(--mark-size, 32px) * 1.08);
  height: calc(var(--mark-size, 32px) * 1.08);
}