/* ====================================================================== */
/* Deployed Intelligence — homepage v3                                    */
/* Builds on site.css tokens and typography.                               */
/* ====================================================================== */

:root {
  --d-del: #e63319;
  --d-ovr: rgba(230, 51, 25, 0.40);
  --d-ast: rgba(10, 10, 10, 0.16);
  --d-hum: #0a0a0a;
  --d-oos-line: rgba(10, 10, 10, 0.30);
}

/* Progressive enhancement: content is visible unless JS is confirmed. */
.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.72s var(--ease),
    transform 0.72s var(--ease);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

.js .reveal[data-delay="1"] { transition-delay: 0.07s; }
.js .reveal[data-delay="2"] { transition-delay: 0.14s; }
.js .reveal[data-delay="3"] { transition-delay: 0.21s; }
.js .reveal[data-delay="4"] { transition-delay: 0.28s; }

/* ---------------------------------------------------------------------- */
/* Accessibility                                                          */
/* ---------------------------------------------------------------------- */

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 999;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.body-text a,
.about-copy a,
.form-note a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--vermilion);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.body-text a:hover,
.about-copy a:hover,
.form-note a:hover {
  color: var(--vermilion);
}

.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
}

/* ---------------------------------------------------------------------- */
/* Navigation                                                             */
/* ---------------------------------------------------------------------- */

.nav-links {
  gap: clamp(14px, 1.65vw, 24px);
  font-size: 10.5px;
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu.open {
  display: flex;
}

/* ---------------------------------------------------------------------- */
/* Shared buttons                                                         */
/* ---------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 20px;
  border: 1.5px solid var(--ink);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s var(--ease);
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  background: var(--ink);
  color: var(--paper);
}

.button-primary:hover {
  background: var(--vermilion);
  border-color: var(--vermilion);
}

.button-secondary {
  background: transparent;
  color: var(--ink);
}

.button-secondary:hover {
  background: var(--ink);
  color: var(--paper);
}

.button-light {
  border-color: var(--paper);
  color: var(--paper);
}

.button-light:hover {
  background: var(--paper);
  color: var(--ink);
}

.text-link {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}

.text-link.light {
  color: var(--paper);
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                   */
/* ---------------------------------------------------------------------- */

.hero {
  min-height: auto;
  padding-top: clamp(126px, 16vh, 190px);
  padding-bottom: clamp(70px, 9vw, 120px);
}

.hero h1 {
  font-size: clamp(70px, 15.2vw, 250px);
}

.hero-desc-v3 {
  max-width: 48ch;
  font-size: clamp(17px, 1.7vw, 23px);
  line-height: 1.4;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 36px);
}

.hero-assurance {
  margin: 15px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.hero-definition {
  max-width: 850px;
  margin-top: clamp(38px, 5vw, 70px);
  padding: clamp(20px, 2.6vw, 30px);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule-mid);
  background: rgba(241, 236, 223, 0.72);
}

.definition-label {
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vermilion);
}

.hero-definition p {
  max-width: 68ch;
  margin: 0;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.48;
  color: var(--ink-2);
}

.hero-definition strong {
  color: var(--ink);
}

/* ---------------------------------------------------------------------- */
/* Reframe                                                                */
/* ---------------------------------------------------------------------- */

.ab-card h3.big {
  margin-top: 0;
}

.reframe-note {
  max-width: 52ch;
  margin: clamp(28px, 4vw, 50px) 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--vermilion);
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* ---------------------------------------------------------------------- */
/* Disposition primitives                                                 */
/* ---------------------------------------------------------------------- */

.dsw {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: none;
  border: 1px solid var(--ink);
}

.dsw.del { background: var(--d-del); }
.dsw.ovr { background: var(--d-ovr); }
.dsw.ast { background: var(--d-ast); }
.dsw.hum { background: var(--d-hum); }

.dsw.oos {
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 3px,
      var(--d-oos-line) 3px,
      var(--d-oos-line) 4.5px
    );
}

.dbadge {
  display: inline-block;
  padding: 5px 10px;
  border: 1.5px solid var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.dbadge.sm {
  padding: 3px 7px;
  font-size: 8.5px;
}

.dbadge.del {
  color: var(--paper);
  background: var(--d-del);
  border-color: var(--d-del);
}

.dbadge.ovr {
  color: var(--ink);
  background: var(--d-ovr);
}

.dbadge.ast {
  color: var(--ink);
  background: var(--d-ast);
}

.dbadge.hum {
  color: var(--paper);
  background: var(--d-hum);
}

.dbadge.oos {
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 3px,
      rgba(10, 10, 10, 0.14) 3px,
      rgba(10, 10, 10, 0.14) 4.5px
    );
}

/* ---------------------------------------------------------------------- */
/* Demonstration scope and trace                                          */
/* ---------------------------------------------------------------------- */

.demo-scope {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 2fr);
  gap: clamp(18px, 3vw, 38px);
  align-items: start;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid var(--rule-mid);
  background: var(--paper-2);
}

.demo-scope strong {
  display: block;
  margin-top: 5px;
  font-size: 18px;
}

.demo-scope p {
  margin: 0;
  font-size: 14px;
  line-height: 1.52;
  color: var(--ink-3);
}

.trace-card {
  margin-bottom: 22px;
  padding: clamp(22px, 2.8vw, 36px);
  border: 2px solid var(--ink);
}

.tc-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.tc-step {
  max-width: 32ch;
  margin: 0 0 24px;
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.tc-trace {
  border-top: 2px solid var(--ink);
}

.tc-trace .tr {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 2.5fr);
  gap: clamp(14px, 2vw, 28px);
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.tc-trace .tr:last-child {
  border-bottom: 0;
}

.tc-trace .k {
  padding-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--vermilion);
}

.tc-trace .v {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.55;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------------- */
/* Working arrangements                                                   */
/* ---------------------------------------------------------------------- */

.arrangements {
  padding: clamp(20px, 2.7vw, 32px);
  border: 1.5px solid var(--ink);
}

.arrangements-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 28px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--rule-soft);
}

.arrangements-head p {
  margin: 0;
}

.arrangements-head > p:last-child {
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
}

.arrangement-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  padding-top: 20px;
}

.arrangement {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.arrangement h3 {
  margin: 10px 0 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.35;
  text-transform: uppercase;
}

.arrangement p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------------- */
/* Zoom out                                                               */
/* ---------------------------------------------------------------------- */

.zoomout {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1.4vw, 16px);
  align-items: stretch;
  margin-top: clamp(22px, 3vw, 36px);
}

.zo {
  display: flex;
  flex: 1 1 150px;
  flex-direction: column;
  gap: 4px;
  padding: clamp(14px, 1.6vw, 20px);
  border: 1.5px solid var(--rule-mid);
}

.zo-n {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--vermilion);
}

.zo-t {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.zo-d {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-2);
}

.zo-arrow {
  align-self: center;
  color: var(--vermilion);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
}

/* ---------------------------------------------------------------------- */
/* Method                                                                 */
/* ---------------------------------------------------------------------- */

.method-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(18px, 2.3vw, 30px);
}

.method-stage {
  padding-top: 20px;
  border-top: 3px solid var(--vermilion-2);
}

.method-number {
  display: block;
  margin-bottom: 14px;
  font-size: clamp(40px, 4.7vw, 70px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--vermilion-2);
}

.method-stage h3 {
  margin: 13px 0 10px;
  font-size: clamp(20px, 1.8vw, 27px);
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.method-stage p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(241, 236, 223, 0.75);
}

.method-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: baseline;
  margin-top: clamp(40px, 5vw, 70px);
  padding-top: 22px;
  border-top: 1px solid rgba(241, 236, 223, 0.22);
}

.method-links span {
  font-size: 13px;
  color: rgba(241, 236, 223, 0.6);
}

/* ---------------------------------------------------------------------- */
/* Profile                                                                */
/* ---------------------------------------------------------------------- */

.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: clamp(36px, 6vw, 86px);
  align-items: start;
}

.profile-card {
  border: 2px solid var(--ink);
  background: var(--paper-2);
}

.profile-card-head {
  padding: clamp(20px, 2.5vw, 28px);
  border-bottom: 2px solid var(--ink);
}

.profile-card-head h3 {
  margin: 7px 0 13px;
  font-size: clamp(21px, 2vw, 28px);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.profile-version {
  display: inline-block;
  padding: 4px 7px;
  border: 1px solid var(--rule-mid);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.profile-facts {
  margin: 0;
  padding: 18px clamp(22px, 2.5vw, 30px);
  list-style: none;
}

.profile-facts li {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 14px;
  line-height: 1.4;
}

.profile-facts li:last-child {
  border-bottom: 0;
}

.profile-policy {
  margin: 0;
  padding: 18px clamp(22px, 2.5vw, 30px);
  border-top: 1px solid var(--rule-mid);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

.two-questions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 38px);
  margin-top: clamp(42px, 6vw, 80px);
}

.two-questions article {
  padding-top: 20px;
  border-top: 3px solid var(--ink);
}

.two-questions article:last-child {
  border-top-color: var(--vermilion);
}

.question-number {
  display: block;
  margin-bottom: 5px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--vermilion);
}

.two-questions h3 {
  margin: 12px 0 9px;
  font-size: clamp(23px, 2.4vw, 34px);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.two-questions p {
  max-width: 54ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.52;
  color: var(--ink-3);
}

.reason-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 36px);
  margin-top: clamp(42px, 5vw, 70px);
}

.reason-card {
  padding: clamp(22px, 2.7vw, 34px);
  border: 1.5px solid var(--rule-mid);
  border-top: 3px solid var(--ink);
}

.reason-card:last-child {
  border-top-color: var(--vermilion);
}

.reason-kicker {
  margin: 0 0 17px;
  color: var(--vermilion);
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.13;
}

.reason-card h3 {
  margin: 12px 0 15px;
  font-size: clamp(18px, 1.7vw, 23px);
  letter-spacing: -0.02em;
  line-height: 1.18;
}

.reason-card > p:last-child {
  margin: 0;
  font-size: 15px;
  line-height: 1.52;
  color: var(--ink-3);
}

.score-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.score-pills span {
  padding: 5px 8px;
  border: 1px solid var(--rule-mid);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------- */
/* Bridge                                                                 */
/* ---------------------------------------------------------------------- */

.bridge {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  margin-bottom: clamp(40px, 5.5vw, 80px);
  text-align: center;
}

.bridge .b-line {
  width: 1.5px;
  height: clamp(40px, 5vw, 64px);
  background: var(--vermilion);
}

.bridge .b-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ---------------------------------------------------------------------- */
/* Map primitives                                                         */
/* ---------------------------------------------------------------------- */

.mini-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(14px, 2.4vw, 26px);
  margin-bottom: 14px;
  padding-bottom: 13px;
  border-bottom: 2px solid var(--ink);
}

.mini-legend span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink-2);
}

.mini-legend i {
  font-style: normal;
}

.map-list {
  border-top: 2px solid var(--ink);
}

.map-row {
  display: grid;
  grid-template-columns: minmax(230px, 1.6fr) minmax(260px, 2.8fr) 98px;
  gap: clamp(14px, 2vw, 26px);
  align-items: center;
  padding: 14px 10px;
  border-bottom: 1px solid var(--rule-soft);
}

.map-row.is-focus {
  background: var(--paper-2);
  box-shadow: inset 3px 0 0 var(--vermilion);
}

.map-name {
  min-width: 0;
}

.map-name h3 {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.map-name > span:not(.map-index) {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.role-map .map-name {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  align-items: start;
}

.map-index {
  padding-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-dim);
}

.mixbar {
  display: flex;
  width: 100%;
  height: clamp(17px, 1.7vw, 21px);
  overflow: hidden;
  border: 1.5px solid var(--ink);
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 3px,
      var(--d-oos-line) 3px,
      var(--d-oos-line) 4.5px
    );
}

.mixbar .seg {
  display: block;
  height: 100%;
}

.mixbar .seg + .seg {
  border-left: 1px solid rgba(10, 10, 10, 0.35);
}

.mixbar .del { background: var(--d-del); }
.mixbar .ovr { background: var(--d-ovr); }
.mixbar .ast { background: var(--d-ast); }
.mixbar .hum { background: var(--d-hum); }
.mixbar .oos { background: transparent; }

.map-share {
  text-align: right;
}

.map-share strong {
  display: block;
  font-family: var(--mono);
  font-size: 15px;
}

.map-share span {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.section-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 24px;
  align-items: center;
  margin-top: 28px;
}

.section-cta p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------------- */
/* Organisation map                                                       */
/* ---------------------------------------------------------------------- */

.analysis-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px 32px;
  align-items: center;
  margin-bottom: 20px;
  padding: clamp(18px, 2vw, 24px);
  color: var(--paper);
  background: var(--ink);
}

.analysis-banner strong {
  display: block;
  margin-top: 5px;
  font-size: clamp(17px, 1.6vw, 21px);
}

.analysis-banner dl {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 30px;
  margin: 0;
}

.analysis-banner dl div {
  min-width: 58px;
}

.analysis-banner dt {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(241, 236, 223, 0.55);
}

.analysis-banner dd {
  margin: 3px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}

.map-qualification {
  max-width: 850px;
  margin-top: clamp(32px, 4vw, 50px);
  padding: clamp(22px, 2.7vw, 32px);
  border-left: 3px solid var(--vermilion);
  background: var(--paper-2);
}

.map-qualification h3 {
  margin: 0 0 10px;
  font-size: clamp(19px, 1.8vw, 24px);
  letter-spacing: -0.02em;
}

.map-qualification p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.52;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------------- */
/* Engagement                                                             */
/* ---------------------------------------------------------------------- */

.deliverables {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(18px, 2.3vw, 30px);
}

.deliverable {
  padding-top: 20px;
  border-top: 3px solid var(--vermilion-2);
}

.deliverable-number {
  display: block;
  margin-bottom: 15px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--vermilion-2);
}

.deliverable h3 {
  margin: 0 0 10px;
  font-size: clamp(19px, 1.7vw, 24px);
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.deliverable p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(241, 236, 223, 0.75);
}

.engagement-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 22px 36px;
  align-items: center;
  margin-top: clamp(45px, 6vw, 80px);
  padding-top: 25px;
  border-top: 1px solid rgba(241, 236, 223, 0.25);
}

.engagement-cta h3 {
  margin: 0 0 7px;
  font-size: clamp(23px, 2.3vw, 33px);
  letter-spacing: -0.03em;
}

.engagement-cta p {
  max-width: 60ch;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(241, 236, 223, 0.7);
}

/* ---------------------------------------------------------------------- */
/* Evidence                                                               */
/* ---------------------------------------------------------------------- */

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 25px);
}

.evidence-card {
  padding: clamp(20px, 2.3vw, 28px);
  border: 1.5px solid var(--rule-mid);
  border-top: 3px solid var(--ink);
}

.evidence-card:nth-child(2),
.evidence-card:nth-child(4) {
  border-top-color: var(--vermilion);
  background: var(--paper-2);
}

.evidence-mark {
  display: block;
  margin-bottom: 18px;
}

.evidence-mark .dsw {
  width: 19px;
  height: 19px;
}

.evidence-card h3 {
  margin: 0 0 10px;
  font-size: clamp(18px, 1.6vw, 23px);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.evidence-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
}

.evidence-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(32px, 4vw, 50px);
}

/* ---------------------------------------------------------------------- */
/* FAQ                                                                    */
/* ---------------------------------------------------------------------- */

.faq-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.75fr) minmax(0, 1.6fr);
  gap: clamp(40px, 7vw, 100px);
  align-items: start;
}

.faq-list {
  border-top: 2px solid var(--ink);
}

.faq-list details {
  border-bottom: 1px solid var(--rule-mid);
}

.faq-list summary {
  position: relative;
  padding: 21px 45px 21px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  top: 18px;
  right: 5px;
  color: var(--vermilion);
  font-family: var(--mono);
  font-size: 22px;
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-answer {
  padding: 0 50px 22px 0;
}

.faq-answer p {
  max-width: 68ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.58;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------------- */
/* About                                                                  */
/* ---------------------------------------------------------------------- */

.about-v3 {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.5fr);
  gap: clamp(38px, 6vw, 86px);
  align-items: start;
}

.about-v3 .about-card {
  border-color: rgba(241, 236, 223, 0.3);
}

.about-v3 .about-card h3 {
  margin: 0;
  font-size: clamp(25px, 2.7vw, 37px);
  letter-spacing: -0.03em;
  line-height: 1.03;
}

.about-v3 .about-card > .label-sm {
  display: block;
  margin-top: 9px;
}

.about-v3 .about-facts {
  margin: 25px 0 0;
}

.about-v3 .about-facts div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid rgba(241, 236, 223, 0.18);
}

.about-v3 .about-facts dt,
.about-v3 .about-facts dd {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
}

.about-v3 .about-facts dt {
  color: rgba(241, 236, 223, 0.5);
}

.about-v3 .about-facts dd {
  margin: 0;
  text-align: right;
  color: var(--paper);
}

.about-copy {
  max-width: 720px;
}

.about-copy p {
  margin: 0;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.56;
  color: rgba(241, 236, 223, 0.78);
}

.about-copy p + p {
  margin-top: 18px;
}

.about-copy .about-lead {
  margin-bottom: 25px;
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.17;
  color: var(--paper);
}

.about-copy a:hover {
  color: var(--vermilion-2);
}

/* ---------------------------------------------------------------------- */
/* Contact                                                                */
/* ---------------------------------------------------------------------- */

.contact-options {
  display: flex;
  flex-direction: column;
  margin-bottom: 28px;
  border-top: 1px solid var(--rule-soft);
}

.contact-options span {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.form-note a {
  font-weight: 700;
}

.foot-summary {
  max-width: 38ch;
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(241, 236, 223, 0.7);
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                             */
/* ---------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .nav-links {
    display: none;
  }

  .nav-burger {
    display: flex;
  }

  .method-grid,
  .deliverables,
  .evidence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .method-stage:last-child,
  .deliverable:last-child,
  .evidence-card:last-child {
    grid-column: span 2;
  }

  .arrangement-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .arrangement:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .profile-layout,
  .about-v3,
  .faq-layout {
    grid-template-columns: 1fr;
  }

  .profile-layout {
    gap: 10px;
  }

  .profile-card {
    max-width: 720px;
  }

  .map-row {
    grid-template-columns: minmax(0, 1fr) 86px;
    grid-template-areas:
      "name share"
      "bar bar";
    row-gap: 9px;
  }

  .map-name { grid-area: name; }
  .mixbar { grid-area: bar; }
  .map-share { grid-area: share; }

  .faq-layout .sec-head {
    margin-bottom: 0;
  }
}

@media (max-width: 760px) {
  .hero h1 {
    font-size: clamp(57px, 18.5vw, 105px);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .button {
    width: 100%;
  }

  .demo-scope,
  .two-questions,
  .reason-grid {
    grid-template-columns: 1fr;
  }

  .tc-trace .tr {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .arrangement-grid,
  .method-grid,
  .deliverables,
  .evidence-grid {
    grid-template-columns: 1fr;
  }

  .arrangement:last-child,
  .method-stage:last-child,
  .deliverable:last-child,
  .evidence-card:last-child {
    grid-column: auto;
  }

  .zoomout {
    flex-direction: column;
  }

  .zo-arrow {
    align-self: flex-start;
    margin-left: 18px;
    transform: rotate(90deg);
  }

  .analysis-banner {
    align-items: flex-start;
  }

  .analysis-banner dl {
    width: 100%;
  }

  .map-row {
    padding-left: 5px;
    padding-right: 5px;
  }

  .profile-card-head,
  .profile-facts,
  .profile-policy {
    padding-left: 18px;
    padding-right: 18px;
  }

  .section-cta,
  .evidence-links {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .arrangements-head {
    flex-direction: column;
  }

  .mini-legend {
    flex-direction: column;
    align-items: flex-start;
  }

  .map-row {
    grid-template-columns: minmax(0, 1fr) 70px;
  }

  .map-share strong {
    font-size: 13px;
  }

  .about-v3 .about-facts div {
    flex-direction: column;
    gap: 5px;
  }

  .about-v3 .about-facts dd {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .reveal,
  .js .reveal.in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .button {
    transition: none;
  }
}
```

---

## 3. `home-v3.js`

```javascript
/* Deployed Intelligence — homepage interactions v3 */
(function () {
  "use strict";

  var doc = document;
  var root = doc.documentElement;

  /* ------------------------------------------------------------------ */
  /* Progressive reveal                                                 */
  /* ------------------------------------------------------------------ */

  var revealEls = Array.prototype.slice.call(
    doc.querySelectorAll(".reveal")
  );

  function revealAll() {
    revealEls.forEach(function (el) {
      el.classList.add("in");
    });
  }

  var reduceMotion = window.matchMedia &&
    window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  if (reduceMotion || !("IntersectionObserver" in window)) {
    revealAll();
  } else {
    var revealObserver = new IntersectionObserver(
      function (entries) {
        entries.forEach(function (entry) {
          if (entry.isIntersecting) {
            entry.target.classList.add("in");
            revealObserver.unobserve(entry.target);
          }
        });
      },
      {
        threshold: 0.1,
        rootMargin: "0px 0px -7% 0px"
      }
    );

    revealEls.forEach(function (el) {
      revealObserver.observe(el);
    });
  }

  /* ------------------------------------------------------------------ */
  /* Mobile navigation                                                  */
  /* ------------------------------------------------------------------ */

  var burger = doc.querySelector(".nav-burger");
  var mobileMenu = doc.getElementById("mobile-menu");

  function setMenu(open) {
    if (!burger || !mobileMenu) return;

    burger.classList.toggle("open", open);
    burger.setAttribute("aria-expanded", open ? "true" : "false");
    burger.setAttribute("aria-label", open ? "Close menu" : "Open menu");

    mobileMenu.hidden = !open;
    mobileMenu.classList.toggle("open", open);

    root.classList.toggle("menu-open", open);
  }

  if (burger && mobileMenu) {
    burger.addEventListener("click", function () {
      setMenu(burger.getAttribute("aria-expanded") !== "true");
    });

    mobileMenu.querySelectorAll("a").forEach(function (link) {
      link.addEventListener("click", function () {
        setMenu(false);
      });
    });

    doc.addEventListener("keydown", function (event) {
      if (event.key === "Escape" &&
          burger.getAttribute("aria-expanded") === "true") {
        setMenu(false);
        burger.focus();
      }
    });

    doc.addEventListener("click", function (event) {
      if (burger.getAttribute("aria-expanded") !== "true") return;
      if (mobileMenu.contains(event.target) || burger.contains(event.target)) return;
      setMenu(false);
    });

    window.addEventListener("resize", function () {
      if (window.innerWidth > 1180) setMenu(false);
    });
  }

  /* ------------------------------------------------------------------ */
  /* Contact form                                                        */
  /* ------------------------------------------------------------------ */

  var form = doc.getElementById("contact-form");

  if (form) {
    form.addEventListener("submit", function (event) {
      event.preventDefault();

      var success = doc.getElementById("form-success");
      var error = doc.getElementById("form-error");
      var button = form.querySelector('button[type="submit"]');
      var buttonLabel = form.querySelector("[data-submit-label]");
      var nameField = form.querySelector('[name="name"]');
      var firstName = nameField && nameField.value
        ? nameField.value.trim().split(/\s+/)[0]
        : "there";

      if (error) error.classList.remove("show");

      if (button) {
        button.disabled = true;
        button.setAttribute("aria-busy", "true");
      }

      if (buttonLabel) {
        buttonLabel.textContent = "Sending…";
      }

      fetch(form.action, {
        method: "POST",
        body: new FormData(form),
        headers: {
          Accept: "application/json"
        }
      })
        .then(function (response) {
          if (!response.ok) {
            throw new Error("Form submission failed: " + response.status);
          }

          form.hidden = true;

          if (success) {
            var nameTarget = success.querySelector("[data-name]");
            if (nameTarget) nameTarget.textContent = firstName;

            success.classList.add("show");
            success.focus && success.focus();
          }
        })
        .catch(function () {
          if (button) {
            button.disabled = false;
            button.removeAttribute("aria-busy");
          }

          if (buttonLabel) {
            buttonLabel.textContent = "Send message";
          }

          if (error) {
            error.classList.add("show");
          }
        });
    });
  }

  /* ------------------------------------------------------------------ */
  /* Footer year                                                         */
  /* ------------------------------------------------------------------ */

  var year = doc.getElementById("yr");
  if (year) {
    year.textContent = String(new Date().getFullYear());
  }

  /* ------------------------------------------------------------------ */
  /* Small developer greeting                                           */
  /* ------------------------------------------------------------------ */

  if (window.console && console.log) {
    console.log(
      "%cDeployed Intelligence%c — kia ora.\n" +
      "AI workflow mapping, task by task and step by step.\n" +
      "hello@deployed.nz",
      "color:#E63319;font-size:15px;font-weight:700;",
      "color:#4A4A4A;font-size:12px;line-height:1.8;"
    );
  }
})();