/* marinaritchie.com — visual system per DESIGN.md.
   Palette and Mastery Line rules are canonical from the brand board. */

/* ---------- Fonts ---------- */

@font-face {
  font-family: "TeX Gyre Heros";
  src: url("../assets/fonts/texgyreheros-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TeX Gyre Heros";
  src: url("../assets/fonts/texgyreheros-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  --navy: #0B1220;
  --steel: #4F6B87;
  --powder: #D9E3EE;
  --mist: #F3F5F7;
  --white: #FFFFFF;
  --signal: #0066FF;
  --signal-deep: #0052CC;

  --font-stack: "Helvetica Now Display", "TeX Gyre Heros", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Type scale, ratio 1.25 from 1.0625rem body */
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.375rem);
  --text-h3: 1.375rem;
  --text-h2: clamp(1.875rem, 1.5rem + 1.8vw, 2.625rem);
  --text-display: clamp(2.5rem, 1.6rem + 4.5vw, 4.75rem);

  /* Spacing, 4pt base */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: clamp(4rem, 3rem + 4vw, 7rem);

  --wrap: 1140px;
  --gutter: clamp(1.5rem, 1rem + 2vw, 2rem);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --z-thread: 2;
  --z-header: 10;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

section[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  font-family: var(--font-stack);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  overflow-x: clip;
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-weight: 700;
}

h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

p { margin: 0; }

.flow > * + * { margin-top: var(--space-md); }

a { color: var(--signal); }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

::selection { background: var(--signal); color: var(--white); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero :focus-visible,
.closing :focus-visible,
.site-footer :focus-visible,
.tier-featured :focus-visible {
  outline-color: var(--powder);
}

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -3rem;
  z-index: 20;
  background: var(--navy);
  color: var(--white);
  padding: var(--space-xs) var(--space-md);
  border-radius: 4px;
  text-decoration: none;
  transition: top 200ms var(--ease-out-expo);
}
.skip-link:focus-visible { top: var(--space-md); }

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-block;
  font-weight: 700;
  font-size: var(--text-base);
  line-height: 1.2;
  text-decoration: none;
  padding: 0.8em 1.5em;
  border-radius: 4px;
  border: 1.5px solid transparent;
  transition: background-color 200ms var(--ease-out-expo),
              border-color 200ms var(--ease-out-expo),
              color 200ms var(--ease-out-expo),
              transform 150ms var(--ease-out-expo);
}
.btn:active { transform: translateY(1px); }

.btn-signal { background: var(--signal); color: var(--white); }
.btn-signal:hover { background: var(--signal-deep); }

.btn-outline { border-color: var(--steel); color: var(--navy); }
.btn-outline:hover { border-color: var(--navy); }

.btn-outline-light { border-color: var(--steel); color: var(--white); }
.btn-outline-light:hover { border-color: var(--powder); }

.btn-lg { font-size: var(--text-lg); padding: 0.85em 1.7em; }

.text-link {
  color: var(--signal);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
}
.text-link:hover { color: var(--signal-deep); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--ease-out-expo);
}
.site-header.is-scrolled { border-bottom-color: var(--powder); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-md);
  transition: padding 300ms var(--ease-out-expo);
}
.site-header.is-scrolled .header-inner { padding-block: var(--space-sm); }

.wordmark { text-decoration: none; }
.wordmark-name {
  display: block;
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  color: var(--navy);
  line-height: 1.15;
}
.wordmark-descriptor {
  display: block;
  font-size: var(--text-sm);
  color: var(--steel);
  line-height: 1.3;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}
.site-nav > a:not(.btn) {
  color: var(--navy);
  text-decoration: none;
  font-weight: 400;
  padding-block: var(--space-xs);
}
.site-nav > a:not(.btn):hover { color: var(--signal); }

.btn-nav { font-size: var(--text-sm); padding: 0.7em 1.2em; }

.nav-menu { display: none; position: relative; }
.nav-menu summary {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  padding: var(--space-xs) var(--space-sm);
  border: 1.5px solid var(--powder);
  border-radius: 4px;
  color: var(--navy);
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu[open] summary { border-color: var(--steel); }
.nav-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--white);
  border: 1px solid var(--powder);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(11, 18, 32, 0.12);
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: var(--space-xs);
  z-index: var(--z-header);
}
.nav-menu-panel a {
  color: var(--navy);
  text-decoration: none;
  padding: var(--space-sm) var(--space-md);
  border-radius: 4px;
}
.nav-menu-panel a:hover { background: var(--mist); color: var(--signal); }

@media (max-width: 720px) {
  .site-nav > a:not(.btn) { display: none; }
  .nav-menu { display: block; }
  .site-nav { gap: var(--space-sm); }
}

@media (max-width: 480px) {
  .header-inner { gap: var(--space-sm); }
  .wordmark-name { font-size: var(--text-base); }
  .wordmark-descriptor { display: none; }
  .btn-nav { padding: 0.6em 0.9em; }
}

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

.hero {
  position: relative;
  background: var(--navy);
  color: var(--powder);
  overflow: hidden;
}

.hero-weave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.weave-strands path { stroke: var(--powder); }
.weave-resolved { stroke: var(--signal); }
.weave-node { fill: var(--signal); }
.weave-node-halo {
  fill: none;
  stroke: var(--signal);
  stroke-opacity: .35;
  stroke-width: 1;
}

.hero-inner {
  position: relative;
  padding-block: clamp(6rem, 4rem + 8vw, 10.5rem);
  max-width: calc(var(--wrap));
}

.hero-heading {
  font-size: var(--text-display);
  color: var(--white);
}

.hero-subline {
  margin-top: var(--space-lg);
  font-size: var(--text-lg);
  line-height: 1.65;
  letter-spacing: 0.01em;
  max-width: 46ch;
}

.hero-actions {
  margin-top: var(--space-2xl);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.hero-alt {
  color: var(--powder);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--powder) 50%, transparent);
  padding-bottom: 2px;
}
.hero-alt:hover { color: var(--white); border-bottom-color: var(--white); }

.hero-note {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--powder);
  max-width: 52ch;
}

/* ---------- Sub-page hero ---------- */

.page-hero {
  position: relative;
  background: var(--navy);
  color: var(--powder);
  overflow: hidden;
}
.page-hero .hero-weave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.page-hero-inner {
  position: relative;
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}
.page-heading {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem);
  color: var(--white);
  max-width: 24ch;
}
.page-subline {
  margin-top: var(--space-lg);
  font-size: var(--text-lg);
  line-height: 1.65;
  letter-spacing: 0.01em;
  max-width: 52ch;
}
.section-label-onnavy { color: var(--powder); margin-bottom: var(--space-md); }
.onnavy-link { color: var(--white); }
.onnavy-link:hover { color: var(--powder); }

/* ---------- Case study page ---------- */

.case-outcome, .case-changed, .case-agents { background: var(--white); padding-block: var(--space-3xl); }
.case-problem, .case-stack, .case-lessons, .pb-lessons { background: var(--mist); padding-block: var(--space-3xl); }
.pb-start, .pb-steps { background: var(--white); }
.pb-start { padding-block: var(--space-3xl) var(--space-2xl); }
.pb-steps { padding-block: var(--space-2xl) var(--space-3xl); }

.case-body { margin-top: var(--space-lg); max-width: 62ch; }
.case-lede { margin-top: var(--space-md); color: var(--steel); max-width: 62ch; }

.change-rows { margin-top: var(--space-2xl); }
.change-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg) clamp(2rem, 4vw, 4rem);
  padding-block: var(--space-xl);
}
.change-row + .change-row { border-top: 1px solid var(--powder); }
.change-tag {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--steel);
  margin-bottom: var(--space-xs);
}
.change-tag-now { color: var(--signal); }
.change-row p:not(.change-tag) { color: var(--steel); font-size: var(--text-base); }
.change-now p:not(.change-tag) { color: var(--navy); }

@media (max-width: 760px) {
  .change-row { grid-template-columns: 1fr; }
}

/* Platform diagram: six platforms feeding one orchestrator, drawn with the
   data-flow line application. Falls back to a stacked list on small screens. */
.stack-diagram {
  position: relative;
  margin-top: var(--space-2xl);
  display: grid;
  grid-template-columns: 52% 48%;
}
.spokes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.spokes li {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-sm);
  padding-right: var(--space-xl);
}
.spoke-name { font-weight: 700; }
.spoke-role { color: var(--steel); font-size: var(--text-sm); line-height: 1.5; margin-top: 2px; }

.spoke-lines {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.spoke-lines path { stroke: var(--steel); stroke-opacity: .45; stroke-width: 1.2px; vector-effect: non-scaling-stroke; }

.hub-dot {
  position: absolute;
  left: 76%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--signal);
  transform: translate(-50%, -50%);
}

.stack-hub {
  grid-column: 2;
  align-self: center;
  /* The hub column starts at 52% of the container; the convergence node sits
     at 76%, i.e. 50% of this column. Text begins just right of the node. */
  padding-left: calc(50% + 18px);
}
.stack-hub h3 { font-size: var(--text-lg); }
.stack-hub p { color: var(--steel); font-size: var(--text-sm); line-height: 1.55; margin-top: var(--space-2xs); max-width: 26ch; }

@media (max-width: 860px) {
  .stack-diagram { display: block; }
  .spoke-lines, .hub-dot { display: none; }
  .spokes li { padding-right: 0; }
  .spokes li + li { margin-top: var(--space-md); }
  .stack-hub {
    padding-left: var(--space-lg);
    margin-top: var(--space-xl);
    position: relative;
  }
  .stack-hub::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--signal);
  }
}

.agent-list { margin-top: var(--space-2xl); max-width: 68ch; }
.agent + .agent { margin-top: var(--space-2xl); padding-top: var(--space-2xl); border-top: 1px solid var(--powder); }
.agent > p { margin-top: var(--space-sm); }
.agent-steps {
  margin: var(--space-md) 0 0;
  padding-left: 1.4em;
  color: var(--steel);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.agent-steps li + li { margin-top: var(--space-2xs); }
.guardrail {
  margin-top: var(--space-md);
  position: relative;
  padding-left: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--steel);
}
.guardrail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
}
.guardrail strong { color: var(--navy); }

.lessons-list {
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: lesson;
  max-width: 62ch;
}
.lessons-list li {
  counter-increment: lesson;
  position: relative;
  padding-left: 3rem;
}
.lessons-list li + li { margin-top: var(--space-lg); }
.lessons-list li::before {
  content: counter(lesson, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--signal);
}

.crosslink { margin-top: var(--space-2xl); font-size: var(--text-lg); }

/* ---------- Playbook steps ---------- */

.step-rail {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  position: relative;
  max-width: 72ch;
}
.step-rail::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1.5px;
  background: color-mix(in oklab, var(--steel) 40%, transparent);
}
.step {
  position: relative;
  padding-left: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.step + .step { margin-top: var(--space-3xl); }
.step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--steel);
}
.step-mistake::before { background: var(--signal); border-color: var(--signal); }
.step-num {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--signal);
  margin-bottom: var(--space-2xs);
}
.step-body h3 { font-size: var(--text-lg); }
.step-body > p { margin-top: var(--space-sm); color: var(--steel); }
.rule-line {
  margin-top: var(--space-md);
  position: relative;
  padding-left: var(--space-lg);
}
.rule-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
}
.rule-line strong { color: var(--navy); }

.step-mistake .step-body {
  background: var(--navy);
  border-radius: 6px;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.step-mistake h3 { color: var(--white); }
.step-mistake .step-body > p { color: var(--powder); }
.rule-line-onnavy strong { color: var(--white); }
.step-mistake .rule-line { color: var(--powder); }

/* ---------- Threads (section crossovers) ---------- */

.thread {
  position: absolute;
  width: 24px;
  pointer-events: none;
  z-index: var(--z-thread);
}
.thread-into-proof {
  top: -70px;
  height: 160px;
  left: calc(50% - min(50%, calc(var(--wrap) / 2)) + var(--gutter));
}
.thread-into-closing {
  top: -90px;
  height: 190px;
  left: calc(50% - 12px);
}

/* ---------- Proof ---------- */

.proof {
  position: relative;
  background: var(--white);
  padding-block: var(--space-3xl);
}

.section-label {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--steel);
}

.proof-lead {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl) clamp(2rem, 4vw, 5rem);
  align-items: start;
}
.proof-lead .display { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); }

.proof-body { max-width: 52ch; }
.proof-figures strong { color: var(--navy); }

.proof-record { margin-top: var(--space-3xl); }

.divider {
  display: block;
  width: min(100%, 640px);
  height: 24px;
}
.divider path { stroke: var(--steel); stroke-opacity: .45; }
.divider circle { fill: var(--signal); }

.record-line {
  margin-top: var(--space-lg);
  color: var(--steel);
  max-width: 62ch;
}
.record-line strong { color: var(--navy); }

@media (max-width: 860px) {
  .proof-lead { grid-template-columns: 1fr; }
}

/* ---------- Gap ---------- */

.gap { background: var(--mist); }

.gap-inner {
  padding-block: var(--space-3xl);
  max-width: calc(760px + 2 * var(--gutter));
  margin-inline: auto;
}
.gap-inner h2 { max-width: 22ch; }
.gap-inner p {
  margin-top: var(--space-lg);
  font-size: var(--text-lg);
  line-height: 1.65;
  max-width: 58ch;
}

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

.method {
  background: var(--white);
  padding-block: var(--space-3xl);
}

.method-head { max-width: 62ch; }
.method-intro { margin-top: var(--space-md); color: var(--steel); }

.method-flow {
  position: relative;
  margin-top: var(--space-3xl);
}

.flow-line {
  display: block;
  width: 100%;
  height: 56px;
}
.flow-strands path { stroke: var(--steel); stroke-width: 1.2; }
.flow-main { stroke: var(--steel); stroke-width: 1.5; }
.flow-arrow { fill: var(--steel); }
.flow-node { fill: var(--white); stroke: var(--steel); stroke-width: 1.5; }
.flow-node-signal { fill: var(--signal); stroke: none; }

.stages {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
.stages li {
  justify-self: center;
  text-align: center;
  max-width: 24ch;
}
.stage-name {
  display: block;
  font-weight: 700;
  font-size: var(--text-h3);
  letter-spacing: -0.01em;
}
.stage-note {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--steel);
}

@media (max-width: 760px) {
  .flow-line { display: none; }
  .stages {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
    border-left: 1.5px solid color-mix(in oklab, var(--steel) 45%, transparent);
    padding-left: var(--space-xl);
  }
  .stages li {
    justify-self: start;
    text-align: left;
    position: relative;
  }
  .stages li::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-xl) - 5.5px);
    top: 0.55em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--white);
    border: 1.5px solid var(--steel);
  }
  .stages li:first-child::before { background: var(--signal); border-color: var(--signal); }
}

/* ---------- Triple-A panel ---------- */

.triple-a {
  position: relative;
  margin-top: var(--space-3xl);
  background: color-mix(in oklab, var(--powder) 42%, var(--white));
  border-radius: 6px;
  padding: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.frame-corner {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 120px;
  height: 120px;
  pointer-events: none;
}
.frame-corner path { stroke: var(--steel); stroke-opacity: .6; }

.triple-a-label {
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}

.phases {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl) clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.phases h3 { font-size: var(--text-lg); }
.phases p { font-size: var(--text-sm); line-height: 1.55; color: var(--steel); margin-top: var(--space-xs); }

.phase-days {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--signal);
  margin: 0 0 var(--space-2xs);
}

.gate-outcome { margin-top: var(--space-2xl); }
.gate-divider { width: 100%; }

.gate-body {
  margin-top: var(--space-xl);
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
}
.gate-mark { width: 48px; height: 48px; flex-shrink: 0; margin-top: 0.2em; }
.gate-body h3 { font-size: var(--text-lg); }
.gate-body p {
  margin-top: var(--space-xs);
  color: var(--steel);
  max-width: 62ch;
}

@media (max-width: 900px) {
  .phases { grid-template-columns: 1fr; }
  .gate-body { flex-direction: column; gap: var(--space-sm); }
}

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

.about { background: var(--white); }

.about-inner {
  padding-block: 0 var(--space-3xl);
}
.about-inner h2 { margin-top: var(--space-2xl); }
.about-body {
  margin-top: var(--space-lg);
  max-width: 62ch;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--space-2xl) clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.about-photo {
  position: relative;
  margin: var(--space-2xl) 0 0;
  max-width: 380px;
  justify-self: end;
}
.about-photo img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 99%);
  mask-image: linear-gradient(to bottom, black 82%, transparent 99%);
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { justify-self: start; max-width: 320px; }
}

/* ---------- Presenting ---------- */

.presenting {
  background: var(--white);
  padding-block: 0 var(--space-3xl);
}
.presenting h2 { margin-top: var(--space-2xl); }
.presenting .record-line { margin-top: var(--space-md); }

.photo-strip {
  margin-top: var(--space-2xl);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-rows: auto auto;
  gap: var(--space-lg);
}
.photo-strip figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.photo-strip img {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
}
.photo-strip figcaption {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--steel);
}
.photo-a { grid-column: 1; grid-row: 1 / 3; }
.photo-b { grid-column: 2; grid-row: 1; }
.photo-b img { aspect-ratio: 4 / 3.4; }
.photo-c { grid-column: 2; grid-row: 2; }
.photo-c img { aspect-ratio: 4 / 3.4; }

.photo-d { grid-column: 1; grid-row: 3; }
.photo-d img { aspect-ratio: 16 / 9; }
.photo-e { grid-column: 2; grid-row: 3; }
.photo-e img { aspect-ratio: 16 / 10.8; }

@media (max-width: 760px) {
  .photo-strip { grid-template-columns: 1fr; grid-template-rows: none; }
  .photo-a, .photo-b, .photo-c, .photo-d, .photo-e { grid-column: auto; grid-row: auto; }
  .photo-strip img { aspect-ratio: 4 / 3; }
}

.toolkit-panel {
  position: relative;
  margin-top: var(--space-3xl);
  background: color-mix(in oklab, var(--powder) 42%, var(--white));
  border-radius: 6px;
  padding: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.toolkit-panel .frame-corner {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 120px;
  height: 120px;
  pointer-events: none;
}
.toolkit-cover { margin: 0; }
.toolkit-cover img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--powder);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(11, 18, 32, 0.12);
}
.toolkit-body h3 { margin-top: var(--space-xs); font-size: var(--text-h3); }
.toolkit-sub {
  margin-top: var(--space-sm);
  color: var(--steel);
  max-width: 58ch;
}
.toolkit-form { margin-top: var(--space-lg); }
.toolkit-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: flex-end;
}
.toolkit-fields label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--navy);
}
.toolkit-fields input {
  font: inherit;
  font-weight: 400;
  color: var(--navy);
  background: var(--white);
  border: 1.5px solid var(--powder);
  border-radius: 4px;
  padding: 0.55em 0.8em;
  min-width: 180px;
}
.toolkit-fields input:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 1px;
  border-color: var(--signal);
}
.form-note {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--steel);
}

@media (max-width: 640px) {
  .toolkit-panel { grid-template-columns: 1fr; }
  .toolkit-cover { max-width: 220px; }
}

/* ---------- Quotes ---------- */

.quotes {
  background: var(--white);
  padding-block: var(--space-3xl);
}

.quote-grid {
  margin-top: var(--space-2xl);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-2xl) clamp(2rem, 3.5vw, 3rem);
  align-items: start;
}

.pull-quote {
  position: relative;
  margin: 0;
  padding: var(--space-lg) 0 0 var(--space-xl);
}
.pull-quote .frame-corner { top: 0; left: 0; }
.pull-quote blockquote {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--navy);
}
.pull-quote figcaption {
  margin-top: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-sm);
  color: var(--steel);
  line-height: 1.5;
}
.pull-quote figcaption strong { color: var(--navy); }
.quote-logo { flex-shrink: 0; height: 30px; width: auto; }

/* ---------- Programmes ---------- */

.programmes {
  background: var(--mist);
  padding-block: var(--space-3xl);
}

.programmes-head h2 { max-width: 20ch; }
.programmes-head p { margin-top: var(--space-sm); color: var(--steel); font-size: var(--text-lg); }

.tier-grid {
  margin-top: var(--space-2xl);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  align-items: stretch;
}

.tier {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--powder);
  border-radius: 6px;
  padding: var(--space-xl);
}

.tier-kind {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--steel);
}
.tier h3 { margin-top: var(--space-xs); }
.tier-promise { margin-top: var(--space-sm); }

.tier-list {
  margin: var(--space-lg) 0 var(--space-xl);
  padding: 0;
  list-style: none;
  flex-grow: 1;
}
.tier-list li {
  position: relative;
  padding-left: var(--space-lg);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.tier-list li + li { margin-top: var(--space-sm); }
.tier-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 1.5px;
  background: var(--signal);
}

.tier .btn { align-self: flex-start; }

.tier-featured {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--powder);
}
.tier-featured .tier-kind { color: var(--signal); }
.tier-featured h3 { color: var(--white); }
.tier-featured .tier-promise { line-height: 1.65; }
.tier-featured .tier-list li::before { background: var(--signal); }

@media (min-width: 940px) {
  .tier-grid { align-items: center; }
  .tier-featured { padding-block: calc(var(--space-xl) + var(--space-lg)); }
}

/* Between phone and full width, stack the tiers instead of orphaning one. */
@media (min-width: 620px) and (max-width: 939px) {
  .tier-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

/* ---------- Closing CTA ---------- */

.closing {
  position: relative;
  background: var(--navy);
  color: var(--powder);
}

.closing-inner {
  padding-block: var(--space-3xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.closing .display {
  color: var(--white);
  font-size: clamp(1.875rem, 1.3rem + 2.8vw, 3rem);
  max-width: 24ch;
}

.closing-sub {
  margin-top: var(--space-lg);
  font-size: var(--text-lg);
  line-height: 1.65;
  letter-spacing: 0.01em;
  max-width: 48ch;
}

.closing-actions { margin-top: var(--space-2xl); }
.closing-alt { margin-top: var(--space-lg); font-size: var(--text-sm); }
.closing-alt a { color: var(--powder); }
.closing-alt a:hover { color: var(--white); }

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

.site-footer {
  position: relative;
  background: var(--navy);
  color: var(--powder);
  border-top: 1px solid color-mix(in oklab, var(--powder) 18%, transparent);
  overflow: hidden;
}

.footer-weave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.footer-weave path { stroke: var(--powder); }

.footer-inner {
  position: relative;
  padding-block: var(--space-2xl);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-xl);
}

.footer-name { font-weight: 700; font-size: var(--text-lg); color: var(--white); }
.footer-descriptor { color: var(--powder); font-size: var(--text-sm); margin-top: var(--space-2xs); }

.footer-contact { display: flex; flex-direction: column; gap: var(--space-xs); }
.footer-contact a { color: var(--powder); text-decoration: none; }
.footer-contact a:hover { color: var(--white); text-decoration: underline; }

.footer-meta { font-size: var(--text-sm); line-height: 1.65; }
.footer-meta p + p { margin-top: var(--space-xs); }

/* ---------- Motion ---------- */
/* Everything is visible by default. The .motion class (added by JS only when
   the user has no reduced-motion preference) opts elements into entrances. */

.motion .weave-strands path,
.motion .weave-resolved {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 700ms var(--ease-out-expo) forwards;
  animation-delay: var(--d, 0s);
}
.motion .weave-resolved { animation-delay: .55s; }

.motion .weave-node,
.motion .weave-node-halo {
  opacity: 0;
  animation: appear 400ms var(--ease-out-expo) forwards;
  animation-delay: .95s;
}

.motion .hero-heading,
.motion .hero-subline,
.motion .hero-actions {
  opacity: 0;
  transform: translateY(12px);
  animation: rise 700ms var(--ease-out-expo) forwards;
}
.motion .hero-heading { animation-delay: .3s; }
.motion .hero-subline { animation-delay: .45s; }
.motion .hero-actions { animation-delay: .6s; }

.motion [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo);
}
.motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* Elements already in the viewport at load appear instantly. */
.motion .no-anim,
.motion .no-anim path,
.motion .no-anim .flow-main { transition: none !important; }

.motion .divider path,
.motion .thread path[pathLength],
.motion .flow-strands path,
.motion .flow-main,
.motion .frame-corner path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 700ms var(--ease-out-expo);
}
.motion .is-in .divider path,
.motion .thread.is-in path[pathLength],
.motion .is-in .flow-strands path,
.motion .is-in .frame-corner path { stroke-dashoffset: 0; }
.motion .is-in .flow-main { stroke-dashoffset: 0; transition-delay: 150ms; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}