/* ==========================================================================
   knotenhub.com — styles
   Structure: 1 tokens · 2 base · 3 layout · 4 components · 5 sections · 6 responsive
   Design brief: DESIGN.md
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Brand palette (from the logo). Components never use these directly. */
  --brand-green: #207343;
  --brand-green-light: #89b193;
  --brand-orange: #ae4f00;
  --brand-cream: #f2eee3;
  --brand-ink: #1a1a1a;

  /* Semantic colours — light */
  --color-background: var(--brand-cream);
  --color-surface: #ffffff;
  --color-surface-subtle: #f9f7f1;
  --color-surface-inverse: var(--brand-ink);

  --color-text-primary: var(--brand-ink);
  --color-text-secondary: #4a4a4a;
  --color-text-muted: #5c5c5c;
  --color-text-on-inverse: #d6d2c8;
  --color-text-on-inverse-strong: var(--brand-cream);

  /* Separators need ≥3:1. #857f72 is 3.4:1 on cream, 4.0:1 on white. */
  --color-border: #857f72;
  /* Footer rule on the ink band. #6e6e6e is 3.4:1 on #1a1a1a. */
  --color-border-inverse: #6e6e6e;

  --color-primary: var(--brand-green);
  --color-primary-hover: #185a35;
  --color-primary-active: #124528;
  --color-on-primary: var(--brand-cream);

  /* Brand band (contact section): stays green in both themes */
  --color-primary-container: var(--brand-green);
  --color-on-primary-container: var(--brand-cream);
  --color-on-primary-container-hover: #ffffff;
  --color-on-primary-container-active: #e6e2d7;

  --color-accent: var(--brand-orange);

  /* Semantic status colours. Reserved: no component on this page uses them yet. */
  --color-success: var(--brand-green);
  --color-warning: var(--brand-orange);
  --color-error: #b3261e;
  --color-info: #1f5f8b;

  --color-focus: var(--color-primary);

  /* Type scale (base 18px) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-small: 0.875rem;
  --text-body: 1.125rem;
  --text-lead: 1.375rem;
  --text-h3: 1.5rem;
  --text-h2: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  --text-h1: clamp(2.25rem, 1.5rem + 4vw, 4rem);
  --leading-body: 1.6;
  --leading-tight: 1.15;

  /* Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius: 6px;
  --max-width: 1100px;
  --measure: 65ch;
  --header-height: 4rem;
  --duration: 150ms;
  --duration-enter: 250ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  /* Signature moments (hero signals, knot tying) take a little longer */
  --duration-signature: 600ms;
  --duration-signal: 1300ms;

  /* Knot motif: strands and node sizes */
  --strand-width: 2px;
  --node-size: 1rem;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-background: #121212;
  --color-surface: #1c1c1c;
  --color-surface-subtle: #171717;
  --color-surface-inverse: #0a0a0a;

  --color-text-primary: var(--brand-cream);
  --color-text-secondary: #c9c5ba;
  --color-text-muted: #a0a0a0;

  /* 3.7:1 on #121212, 3.3:1 on the dark surface. */
  --color-border: #6e6e6e;

  --color-primary: var(--brand-green-light);
  --color-primary-hover: #a3c4ab;
  --color-primary-active: #b8d2be;
  --color-on-primary: #121212;
}

/* 2. Base ------------------------------------------------------------------ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-primary);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-4);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-body); }

p {
  margin: 0 0 var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: var(--text-lead);
  line-height: 1.45;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--duration) ease;
}

a:hover {
  color: var(--color-primary-hover);
}

img,
svg {
  display: block;
}

/* Keyboard focus: one consistent ring everywhere.
   data-focus-forced covers programmatic focus, which does not match :focus-visible. */
:focus-visible,
[data-focus-forced]:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
  }
}

/* 3. Layout ---------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.section {
  padding: var(--space-8) 0;
}

.prose {
  max-width: var(--measure);
}

/* 4. Components ------------------------------------------------------------ */

/* Skip link — visible only when focused */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 200;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-radius: var(--radius);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Buttons: default · hover · focus · active · disabled */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  transition: background-color var(--duration) ease, color var(--duration) ease;
}

.btn:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.btn:active {
  background-color: var(--color-primary-active);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-large {
  min-height: 3rem;
  padding: var(--space-3) var(--space-6);
}

/* Inverted button for use on the primary-coloured band */
.btn-inverse {
  background-color: var(--color-on-primary-container);
  color: var(--brand-ink);
}

.btn-inverse:hover {
  background-color: var(--color-on-primary-container-hover);
  color: var(--brand-ink);
}

.btn-inverse:active {
  background-color: var(--color-on-primary-container-active);
}

/* Icon buttons (theme + menu toggle): 44px targets */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color var(--duration) ease, border-color var(--duration) ease;
}

.icon-btn:hover {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

.icon-btn:active {
  background-color: var(--color-surface-subtle);
}

.icon-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Theme toggle shows the theme you would switch TO */
:root:not([data-theme="dark"]) .icon-sun,
:root[data-theme="dark"] .icon-moon {
  display: none;
}

/* Menu shows a close icon while open. The accessible name stays "Menu". */
.menu-toggle .icon-close {
  display: none;
}

.menu-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.menu-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* Logo: swap the real SVG per theme instead of filtering */
:root:not([data-theme="dark"]) .logo-on-dark,
:root[data-theme="dark"] .logo-on-light {
  display: none;
}

/* 5. Sections -------------------------------------------------------------- */

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-border);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-height);
}

.logo {
  display: inline-flex;
  align-items: center;
  height: 2.75rem;
  border-radius: var(--radius);
}

.logo img {
  height: 2.75rem;
  width: auto;
}

.nav-links {
  margin-left: auto;
}

.nav-links ul {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-text-primary);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--duration) ease;
}

.nav-links a:not(.btn):hover,
.nav-links a:not(.btn)[aria-current="location"] {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.menu-toggle {
  display: none;
}

/* Hero */
.hero {
  padding: var(--space-9) 0;
  text-align: center;
}

.hero h1 {
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

.hero .lead {
  max-width: 40ch;
  margin: 0 auto var(--space-6);
  color: var(--color-text-secondary);
}

/* About */
.about {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.about .lead {
  margin-bottom: var(--space-5);
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-primary);
}

.about p:not(.lead) {
  color: var(--color-text-secondary);
}

/* Services: four offers. Infrastructure detail opens on request. */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  max-width: var(--measure);
  margin-top: var(--space-7);
  padding: 0;
  list-style: none;
}

.service {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.service h3 {
  margin-bottom: var(--space-2);
}

.service p {
  color: var(--color-text-secondary);
}

.service ul {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-5);
  color: var(--color-text-secondary);
}

.service li + li {
  margin-top: var(--space-1);
}

/* Roles inside a lifecycle group */
.service .roles {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding-left: 0;
  list-style: none;
  color: inherit;
}

.service .roles > li + li {
  margin-top: 0;
}

.role h4 {
  margin-bottom: var(--space-1);
}

.service details {
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.service details + details {
  margin-top: 0;
}

.service details[open] {
  padding-bottom: var(--space-3);
}

.service summary {
  display: list-item;
  min-height: 2.75rem;
  padding: var(--space-3) 0;
  cursor: pointer;
}

.service summary .summary-title {
  font-weight: 600;
}

.service summary:hover {
  color: var(--color-primary);
}

.service summary:active {
  color: var(--color-primary-active);
}

.service details > p {
  margin-top: var(--space-2);
}

/* Hero network: the knot from the logo, labelled with what plugs in */
.hero {
  text-align: left;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-7);
  align-items: center;
}

.hero .hero-text h1,
.hero .hero-text .lead {
  margin-inline: 0;
}

.hub {
  position: relative;
  width: 100%;
  max-width: 32rem;
  aspect-ratio: 10 / 9;
  justify-self: end;
}

.hub-strands {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hub-strands line {
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: var(--o);
}

.strands-main line {
  stroke: var(--color-primary);
  stroke-width: var(--strand-width);
}

.strands-fine line {
  stroke: var(--color-border);
  stroke-width: 1px;
}

.node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  padding: var(--space-1) var(--space-3);
  border: var(--strand-width) solid var(--color-primary);
  border-radius: 999px;
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.node-center {
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-body);
}

@media (prefers-reduced-motion: no-preference) {
  .strands-main line,
  .strands-fine line {
    animation: strand-grow var(--duration-enter) var(--ease-out) var(--d) both;
  }

  .node {
    animation: node-in var(--duration-enter) var(--ease-out) var(--d) both;
  }
}

/* Signals travel from each discipline into the hub; the hub pings on arrival */
.pulses circle {
  fill: var(--color-primary);
  opacity: 0;
  transform-box: view-box;
}

.node-center::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--strand-width));
  border: var(--strand-width) solid var(--color-primary);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hub.is-pulsing .pulses circle {
    animation: signal var(--duration-signal) cubic-bezier(0.5, 0, 0.3, 1) var(--pd) 3 both;
  }

  .hub.is-pulsing .node-center::after {
    animation: ping var(--duration-signal) var(--ease-out) 3;
  }
}

@keyframes signal {
  0% { opacity: 0; transform: translate(var(--x1), var(--y1)) scale(0.4); }
  15% { opacity: 1; transform: translate(var(--x1), var(--y1)) scale(1); }
  80% { opacity: 1; transform: translate(200px, 180px) scale(1); }
  100% { opacity: 0; transform: translate(200px, 180px) scale(0.4); }
}

@keyframes ping {
  0%, 70% { opacity: 0; transform: scale(1); }
  75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35, 1.6); }
}

@keyframes strand-grow {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes node-in {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

/* Fade in once on entering the viewport. Only hidden when JS runs and motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    transition: opacity var(--duration-enter) var(--ease-out), transform var(--duration-enter) var(--ease-out);
  }

  .js .reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(var(--space-2));
  }
}

/* Services as nodes on one strand */
.services-grid {
  position: relative;
  gap: var(--space-6);
  padding-left: var(--space-6);
}

.services-grid::before {
  content: "";
  position: absolute;
  top: calc(var(--space-4) + var(--node-size) / 2);
  bottom: 0;
  left: calc(var(--node-size) / 2 - 1px);
  width: var(--strand-width);
  background-color: var(--color-primary);
}

.service {
  position: relative;
  border-top: 0;
}

.service::before,
.step::before {
  content: "";
  position: absolute;
  width: var(--node-size);
  height: var(--node-size);
  border: var(--strand-width) solid var(--color-primary);
  border-radius: 50%;
  background-color: var(--color-background);
}

.service::before {
  top: calc(var(--space-4) + 0.3rem);
  left: calc(-1 * var(--space-6));
}

/* The services strand draws itself as you scroll; each node fills when reached.
   Browsers without scroll-driven animations show the finished drawing. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .services-grid {
      view-timeline: --services block;
    }

    .services-grid::before {
      transform-origin: top;
      animation: draw-y linear both;
      animation-timeline: --services;
      animation-range: entry 40% exit 10%;
    }

    .service {
      view-timeline: --service block;
    }

    .service::before {
      animation: node-fill linear both;
      animation-timeline: --service;
      animation-range: entry 55% entry 70%;
    }
  }
}

@keyframes draw-y {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes node-fill {
  from { background-color: var(--section-bg, var(--color-background)); transform: scale(0.6); }
  to { background-color: var(--color-primary); transform: scale(1); }
}

/* The page thread (wide screens): one strand through every section,
   with a knot at each heading that ties as the thread reaches it. */
main {
  position: relative;
}

.threaded {
  position: relative;
}

.thread {
  display: none;
}

@media (min-width: 80rem) {
  .thread {
    display: block;
    position: absolute;
    z-index: 1;
    top: calc(var(--space-8) + 1.4rem);
    bottom: 0;
    left: calc(50% - var(--max-width) / 2 - var(--space-5));
    width: var(--strand-width);
    background-color: var(--color-primary);
  }

  .threaded h2 {
    position: relative;
  }

  .threaded h2::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: calc(0.575em - var(--node-size) / 2);
    left: calc(-1 * var(--space-7) - var(--node-size) / 2 + 1px);
    width: var(--node-size);
    height: var(--node-size);
    border: var(--strand-width) solid var(--color-primary);
    border-radius: 50%;
    background-color: var(--color-primary);
  }
}

@supports (animation-timeline: view()) {
  @media (min-width: 80rem) and (prefers-reduced-motion: no-preference) {
    .thread {
      transform-origin: top;
      animation: draw-y linear both;
      animation-timeline: view();
      animation-range: cover 40vh cover calc(100% - 60vh);
    }

    .threaded h2 {
      view-timeline: --knot block;
    }

    .threaded h2::before {
      animation: node-fill linear both;
      animation-timeline: --knot;
      animation-range: cover 40vh cover calc(40vh + 3rem);
    }
  }
}

.about,
.work,
.faq {
  --section-bg: var(--color-surface);
}

/* Evidence: anonymised outcome notes */
.work {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--space-8);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}

.outcome {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.outcome-sector {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outcome-figure {
  margin-bottom: var(--space-3);
  color: var(--color-primary);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.outcome-figure-unit {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0;
}

.outcome h3 {
  margin-bottom: var(--space-4);
}

.outcome dl {
  margin: 0;
}

.outcome dt {
  font-weight: 600;
}

.outcome dd {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
}

.outcome dd:last-child {
  margin-bottom: 0;
  color: var(--color-text-primary);
}

/* Engagement: three nodes on a connected path */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: calc(var(--node-size) * 2 + var(--space-5));
  counter-increment: step;
}

.step::before {
  content: counter(step);
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: calc(var(--node-size) * 2);
  height: calc(var(--node-size) * 2);
  color: var(--color-text-primary);
  font-weight: 700;
  line-height: 1;
}

/* The strand to the next node */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--node-size) - 1px);
  left: calc(var(--node-size) * 2);
  right: calc(-1 * var(--space-6));
  height: var(--strand-width);
  background-color: var(--color-primary);
}

.step h3 {
  margin-bottom: var(--space-2);
}

.step p {
  color: var(--color-text-secondary);
}

/* The path between steps grows once the steps come into view */
@media (prefers-reduced-motion: no-preference) {
  .step:not(:last-child)::after {
    transform-origin: left center;
    transition: transform var(--duration-signature) var(--ease-out);
  }

  .step:nth-child(2)::after {
    transition-delay: 350ms;
  }

  .js .steps:not(.is-visible) .step::after {
    transform: scaleX(0);
  }
}

/* FAQ */
.faq {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.faq h2 {
  margin-bottom: var(--space-6);
}

.faq details {
  border-top: 1px solid var(--color-border);
}

.faq details:last-of-type {
  border-bottom: 1px solid var(--color-border);
}

.faq summary {
  min-height: 2.75rem;
  padding: var(--space-4) 0;
  font-weight: 600;
  cursor: pointer;
}

.faq summary:hover {
  color: var(--color-primary);
}

.faq summary:active {
  color: var(--color-primary-active);
}

.faq details p {
  padding-bottom: var(--space-4);
  color: var(--color-text-secondary);
}

/* Contact band */
.contact {
  --color-focus: var(--color-on-primary-container);
  text-align: center;
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
}

.contact h2 {
  color: inherit;
}

.contact .lead {
  max-width: 44ch;
  margin: 0 auto var(--space-6);
}

.contact-address {
  margin-top: var(--space-5);
}

.contact-address a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-on-primary-container);
  font-weight: 600;
}

.contact-address a:hover {
  color: var(--color-on-primary-container-hover);
}

/* The knot: the logo's triangle ties itself in the contact band */
.knot {
  width: 7.5rem;
  height: auto;
  margin: 0 auto var(--space-6);
  overflow: visible;
}

.knot line,
.knot path {
  fill: none;
  stroke: var(--color-on-primary-container);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.knot-node {
  fill: var(--color-on-primary-container);
  transform-box: view-box;
}

.knot-strand {
  transform-box: view-box;
  transform-origin: var(--o);
}

@media (prefers-reduced-motion: no-preference) {
  .knot-node {
    transition: transform var(--duration-signature) var(--ease-out), opacity var(--duration-signature) var(--ease-out);
  }

  .knot-strand {
    transition: transform var(--duration-enter) var(--ease-out) var(--d), opacity var(--duration-enter) var(--ease-out) var(--d);
  }

  .knot-arrow {
    transition: transform var(--duration-signature) var(--ease-out) 620ms, opacity var(--duration-signature) var(--ease-out) 620ms;
  }

  .js .knot:not(.is-visible) .knot-node {
    opacity: 0;
    transform: translate(var(--from));
  }

  .js .knot:not(.is-visible) .knot-strand {
    opacity: 0;
    transform: scale(0);
  }

  .js .knot:not(.is-visible) .knot-arrow {
    opacity: 0;
    transform: translateX(-16px);
  }
}

/* Footer */
.site-footer {
  --color-focus: var(--color-text-on-inverse-strong);
  padding: var(--space-8) 0 var(--space-6);
  background-color: var(--color-surface-inverse);
  color: var(--color-text-on-inverse);
  font-size: var(--text-small);
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-7);
}

.footer-brand img {
  height: 3.5rem;
  width: auto;
  margin-bottom: var(--space-4);
}

.footer-brand p {
  color: var(--color-text-on-inverse-strong);
  font-size: var(--text-body);
}

.footer-heading {
  margin-bottom: var(--space-3);
  font-size: var(--text-body);
  color: var(--color-text-on-inverse-strong);
}

.site-footer a {
  color: var(--color-text-on-inverse-strong);
}

.footer-legal p {
  margin-bottom: var(--space-1);
}

.footer-bottom {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-inverse);
}

/* 6. Responsive ------------------------------------------------------------ */

@media (max-width: 47.99rem) {
  .hero {
    padding: var(--space-8) 0;
  }

  .section {
    padding: var(--space-7) 0;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    padding: var(--space-4) var(--space-5) var(--space-5);
    background-color: var(--color-background);
    border-bottom: 1px solid var(--color-border);
  }

  .nav-links.is-open {
    display: block;
    box-shadow: 0 var(--space-2) var(--space-5) rgba(26, 26, 26, 0.12);
  }

  .nav-links ul {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .nav-links a:not(.btn) {
    width: 100%;
    padding: var(--space-2) 0;
  }

  .nav-links .btn {
    width: 100%;
    margin-top: var(--space-3);
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .hub {
    max-width: 22rem;
    justify-self: center;
  }

  .outcomes {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Steps become a vertical path, like the services */
  .steps {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .step {
    padding-top: 0;
    padding-left: calc(var(--node-size) * 2 + var(--space-4));
  }

  @media (prefers-reduced-motion: no-preference) {
    .js .steps:not(.is-visible) .step::after {
      transform: scaleY(0);
    }
  }

  .step:not(:last-child)::after {
    transform-origin: center top;
    top: calc(var(--node-size) * 2);
    bottom: calc(-1 * var(--space-6));
    left: calc(var(--node-size) - 1px);
    right: auto;
    width: var(--strand-width);
    height: auto;
  }
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hub {
    justify-self: center;
  }
}

/* ==========================================================================
   7. Animated bands — from future/future.css, scoped to .fx
   (classes that collide with the calm page are renamed: fhero, fbtn, man)
   ========================================================================== */


.fx {
  color-scheme: dark;

  --bg: #07090a;
  --bg-raised: #0e1311;
  --panel: rgba(16, 22, 19, 0.78);
  --line: rgba(137, 177, 147, 0.2);
  --line-strong: rgba(137, 177, 147, 0.45);

  --text: #f2eee3;
  --text-2: #b9b5aa;
  --text-3: #8f9a92;

  --green: #89b193;
  --green-hi: #b9e3c4;
  --brand: #207343;
  --orange: #ff8a3d;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --wrap: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 14px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}







.fx {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.fx h1,
.fx h2,
.fx h3 { margin: 0; line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.fx p { margin: 0; }
.fx img,
.fx canvas { display: block; }
.fx a { color: var(--green-hi); }
.fx a:hover { color: var(--text); }

.fx :focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
}






.fx .wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.fx .kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}

.fx .kicker-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(255, 138, 61, 0.6);
  animation: beacon 2.4s var(--ease) infinite;
}

@keyframes beacon {
  0% { box-shadow: 0 0 0 0 rgba(255, 138, 61, 0.6); }
  70%, 100% { box-shadow: 0 0 0 12px rgba(255, 138, 61, 0); }
}

.fx .section-lead {
  max-width: 34rem;
  font-size: 1.1875rem;
  color: var(--text-2);
}

/* Buttons ------------------------------------------------------------------ */

.fx .fbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  color: var(--bg);
  background: var(--green-hi);
  cursor: pointer;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), transform 250ms var(--ease);
}

.fx .fbtn:hover { background: var(--text); color: var(--bg); }

.fx .fbtn-sm { min-height: 2.75rem; padding: 0.5rem 1.1rem; font-size: 0.9375rem; }
.fx .fbtn-xl { min-height: 4rem; padding: 1rem 2.25rem; font-size: 1.25rem; }

.fx .fbtn-ghost {
  color: var(--text);
  background: transparent;
  border-color: var(--line-strong);
}
.fx .fbtn-ghost:hover { background: rgba(137, 177, 147, 0.12); color: var(--text); }

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


















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

.fx .fhero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 7rem 0 5rem;
  overflow: hidden;
  isolation: isolate;
}

.fx .net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.fx .hero-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 22% 50%, rgba(7, 9, 10, 0.88), rgba(7, 9, 10, 0.2) 70%),
    linear-gradient(to bottom, transparent 70%, var(--bg));
}

.fx .fhero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.fx h1 {
  font-size: clamp(2.75rem, 1.2rem + 6.2vw, 6.25rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin-bottom: 1.75rem;
}

.fx .h1-a { display: block; }

.fx .h1-word {
  display: block;
  min-height: 1em;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.82em;
  letter-spacing: -0.04em;
  color: var(--green-hi);
  white-space: nowrap;
}

.fx .h1-word::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 0.85em;
  margin-left: 0.08em;
  vertical-align: -0.08em;
  background: var(--orange);
  animation: caret 1s steps(1) infinite;
}

@keyframes caret { 50% { opacity: 0; } }

.fx .hero-lead {
  max-width: 36rem;
  margin-bottom: 2.25rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  color: var(--text-2);
}

.fx .hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Terminal */
.fx .terminal,
.fx .code-window {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
  overflow: hidden;
}

.fx .term-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-3);
}
.fx .term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2c3430; }
.fx .term-bar i:first-child { background: var(--orange); }
.fx .term-bar span { margin-left: 0.5rem; }

.fx .term-body,
.fx .code-body,
.fx .stage pre {
  margin: 0;
  padding: 1.25rem 1.25rem 1.5rem;
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  line-height: 1.75;
  color: var(--text);
  white-space: pre;
  overflow-x: auto;
}

.fx .t-line { display: inline; }
.fx .t-prompt,
.fx .c-prompt { color: var(--orange); }
.fx .t-dim,
.fx .c-com { color: var(--text-3); }
.fx .t-ok,
.fx .c-ok { color: var(--green-hi); }
.fx .t-accent { color: var(--green-hi); font-weight: 700; }
.fx .c-key { color: var(--green); }
.fx .c-str { color: #f4c48f; }

.fx .t-caret {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  vertical-align: -0.2em;
  background: var(--green-hi);
  animation: caret 1s steps(1) infinite;
}

/* Typing: only hidden while JS is typing them */
.js .fx .term-body.is-typing .t-line { visibility: hidden; }
.js .fx .term-body.is-typing .t-line.is-typed { visibility: visible; }

.fx .scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: -1.375rem;
  border-radius: 999px;
}
.fx .scroll-cue span {
  width: 22px; height: 36px;
  border: 2px solid var(--line-strong);
  border-radius: 12px;
  position: relative;
}
.fx .scroll-cue span::after {
  content: "";
  position: absolute;
  left: 50%; top: 7px;
  width: 4px; height: 7px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--green-hi);
  animation: wheel 1.8s var(--ease) infinite;
}
@keyframes wheel {
  0% { transform: translateY(0); opacity: 1; }
  80%, 100% { transform: translateY(12px); opacity: 0; }
}

/* Ticker ------------------------------------------------------------------- */












@keyframes ticker { to { transform: translateX(-100%); } }

/* Roles orbit -------------------------------------------------------------- */





.fx .pipeline h2,
.fx .connect h2 {
  font-size: clamp(2.5rem, 1.4rem + 4.5vw, 5rem);
  font-weight: 800;
  margin-bottom: 1.5rem;
}

























/* Without JS the chips sit on the ring at fixed angles */

 
 
 
 









/* Pipeline ----------------------------------------------------------------- */

.fx .pipeline {
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) 0;
  background:
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(32, 115, 67, 0.18), transparent),
    var(--bg-raised);
  border-block: 1px solid var(--line);
}

.fx .pipeline-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 2.5rem; }

.fx .stages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin: 0; padding: 0; list-style: none; counter-reset: s; }

.fx .stage h3 { font-size: 1.75rem; font-weight: 800; margin-bottom: 0.35rem; }
.fx .stage-no { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--orange); vertical-align: 0.5em; margin-right: 0.35rem; }
.fx .stage { min-width: 0; }
.fx .stage p { color: var(--text-2); }
.fx .stage pre {
  margin-top: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.fx .code-window { display: none; }

/* Enhanced (JS, wide screens): the section pins while a signal runs down the stages */
@media (min-width: 64rem) {
  .fx .pipeline.is-pinned { height: 420vh; padding: 0; }
  .fx .pipeline.is-pinned .pipeline-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 4.5rem;
  }
  .fx .pipeline.is-pinned .pipeline-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3.5rem; align-items: center; }
  .fx .pipeline.is-pinned .stages { gap: 0.25rem; position: relative; padding-left: 2rem; }
  .fx .pipeline.is-pinned .stages::before {
    content: "";
    position: absolute;
    left: 0.45rem; top: 1rem; bottom: 1rem;
    width: 2px;
    background: var(--line-strong);
  }
  .fx .pipeline.is-pinned .stage { position: relative; padding: 0.6rem 0; opacity: 0.38; transition: opacity 250ms var(--ease); }
  .fx .pipeline.is-pinned .stage::before {
    content: "";
    position: absolute;
    left: -2rem; top: 1.15rem;
    width: 1rem; height: 1rem;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    background: var(--bg-raised);
    transition: background-color 250ms var(--ease), border-color 250ms var(--ease), box-shadow 250ms var(--ease);
  }
  .fx .pipeline.is-pinned .stage.is-done { opacity: 0.7; }
  .fx .pipeline.is-pinned .stage.is-done::before { background: var(--brand); border-color: var(--green); }
  .fx .pipeline.is-pinned .stage.is-active { opacity: 1; }
  .fx .pipeline.is-pinned .stage.is-active::before { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 6px rgba(255, 138, 61, 0.2), 0 0 24px rgba(255, 138, 61, 0.7); }
  .fx .pipeline.is-pinned .stage h3 { font-size: 1.5rem; }
  .fx .stage-btn {
    display: inline-flex;
    align-items: baseline;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: pointer;
  }
  /* The whole row, node included, is the click target */
  .fx .stage-btn::after { content: ""; position: absolute; inset: 0 0 0 -2.5rem; }
  .fx .pipeline.is-pinned .stage:hover { opacity: 1; }
  .fx .stage-btn:hover { color: var(--orange); }
  .fx .pipeline.is-pinned .stage:hover::before { border-color: var(--orange); }
  .fx .pipeline.is-pinned .stage pre { display: none; }
  .fx .pipeline.is-pinned .code-window { display: block; position: relative; }
  .fx .pipeline.is-pinned .code-body { min-height: 15rem; font-size: 0.9375rem; }
}

.fx .wire { position: relative; height: 3px; background: var(--line); }
.fx .packet {
  position: absolute;
  left: 0; top: 0;
  width: 18%;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--orange));
  box-shadow: 0 0 16px var(--orange);
  transform-origin: left;
}

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















/* Handshake ---------------------------------------------------------------- */






@keyframes dash { to { background-position: -36px 0; } }






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

.fx .man { padding: 0 0 clamp(5rem, 10vw, 8rem); }
.fx .man-wrap { max-width: 52rem; }
.fx .man h2 { font-family: var(--font-mono); font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); letter-spacing: -0.02em; margin-bottom: 1.5rem; }
.fx .man details { border-top: 1px solid var(--line); }
.fx .man details:last-of-type { border-bottom: 1px solid var(--line); }
.fx .man summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.75rem 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.fx .man summary::-webkit-details-marker { display: none; }
.fx .man summary::before { content: "+"; font-family: var(--font-mono); color: var(--orange); width: 1ch; }
.fx .man details[open] summary::before { content: "−"; }
.fx .man summary:hover { color: var(--green-hi); }
.fx .man details p { padding: 0 0 1.25rem 1.75rem; color: var(--text-2); }

/* Connect ------------------------------------------------------------------ */

.fx .connect {
  position: relative;
  padding: clamp(6rem, 14vw, 11rem) 0;
  text-align: center;
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(32, 115, 67, 0.45), transparent 70%), var(--bg);
  overflow: hidden;
  isolation: isolate;
}
.fx .connect .net { z-index: -1; opacity: 0.7; }
.fx .connect h2 { font-size: clamp(3rem, 1.5rem + 7vw, 7.5rem); letter-spacing: -0.05em; }
.fx .connect .section-lead { margin: 0 auto 2.5rem; }
.fx .connect-actions { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }

.fx .copy {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.5rem 0.4rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(7, 9, 10, 0.6);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.fx .copy code { font-family: var(--font-mono); font-size: 0.9375rem; }
.fx .copy-state {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(137, 177, 147, 0.16);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--green-hi);
}
.fx .copy:hover { border-color: var(--green); }

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









/* Reveal ------------------------------------------------------------------- */

.js:not(.motion-off) .fx [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(24px); }
.js .fx [data-reveal] { transition: opacity 600ms var(--ease), transform 600ms var(--ease); }

/* Motion off: everything still, nothing hidden ----------------------------- */

.motion-off .fx *,
.motion-off .fx *::before,
.motion-off .fx *::after {
  animation-play-state: paused !important;
  transition-duration: 0s !important;
}
.motion-off .fx .h1-word::after,
.motion-off .fx .t-caret { animation: none; }







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

@media (max-width: 63.99rem) {
  .fx .fhero-grid { grid-template-columns: minmax(0, 1fr); }
  
}

@media (max-width: 47.99rem) {
  
  
  
  .fx .fhero { padding-top: 6rem; }
  
  
  
  
}

@media (max-width: 30rem) {
  .fx .fbtn-sm { padding: 0.5rem 0.9rem; }
  
}

/* ==========================================================================
   8. Mix glue
   ========================================================================== */

/* The hero sits under the sticky calm header rather than a fixed one */
.fx .fhero {
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  padding: var(--space-8) 0;
}

/* Pinned pipeline clears the sticky header */
@media (min-width: 64rem) {
  .fx .pipeline.is-pinned .pipeline-sticky { padding-top: var(--header-height); }
}

/* Motion switch, in the calm header's language */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: none;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--duration) ease, color var(--duration) ease;
}

.motion-toggle:hover {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}

.motion-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

.motion-toggle[aria-pressed="false"] .motion-dot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--color-text-muted);
}

/* Motion off also settles the calm page's animations in their final state */
.motion-off { scroll-behavior: auto; }

.motion-off .reveal {
  opacity: 1 !important;
  transform: none !important;
}

.motion-off .services-grid::before,
.motion-off .service::before,
.motion-off .step::after {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

.motion-off .service::before {
  background-color: var(--color-primary);
}

/* On the animated page the FAQ followed another section; here it opens a band */
.fx .man { padding-top: clamp(4rem, 8vw, 6rem); }

/* Starting points: one node each, no fixed order */
.paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--space-8);
  max-width: 56rem;
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}

.path {
  position: relative;
  padding-left: calc(var(--node-size) + var(--space-4));
}

.path::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: 0;
  width: var(--node-size);
  height: var(--node-size);
  border: var(--strand-width) solid var(--color-primary);
  border-radius: 50%;
  background-color: var(--color-primary);
}

.path h3 {
  margin-bottom: var(--space-2);
}

.path p {
  color: var(--color-text-secondary);
}

@media (max-width: 47.99rem) {
  .paths {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
}

/* Flow: the calm sections share one background with no divider lines, and
   the animated parts float on it as rounded dark panels. */
.about,
.work,
.process {
  background-color: transparent;
  border: 0;
}

.fx {
  margin: 0 var(--space-4);
  border-radius: 28px;
  overflow: clip;
}

main > .fx:first-child {
  margin-top: var(--space-4);
}

main > .fx:last-child {
  margin-bottom: var(--space-8);
}

/* One blinking cursor is enough: the terminal keeps its own */
.fx .h1-word::after {
  display: none;
}

@media (max-width: 47.99rem) {
  .fx {
    margin: 0 var(--space-2);
    border-radius: 20px;
  }

  main > .fx:first-child {
    margin-top: var(--space-2);
  }
}

/* Each pipeline stage names the roles involved */
.fx .stage .stage-roles {
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--green-hi);
}

/* Pinned, the whole pipeline must fit one screen: smaller heading, tighter list */
@media (min-width: 64rem) {
  .fx .pipeline.is-pinned h2 {
    font-size: clamp(2rem, 1.2rem + 2vw, 3rem);
    margin-bottom: 0;
  }
  .fx .pipeline.is-pinned .kicker { margin-bottom: 0.5rem; }
  .fx .pipeline.is-pinned .pipeline-grid { margin-top: 1.5rem; }
  .fx .pipeline.is-pinned .stage { padding: 0.4rem 0; }
  .fx .pipeline.is-pinned .stage h3 { font-size: 1.25rem; }
  .fx .pipeline.is-pinned .stage p { font-size: 0.9375rem; }
}

/* Pinned: the list shows names and roles; the active description moves into
   the code window. Descriptions stay readable to screen readers. */
.fx .code-caption { display: none; }

@media (min-width: 64rem) {
  .fx .pipeline.is-pinned .stage p:not(.stage-roles) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .fx .pipeline.is-pinned .code-caption {
    display: block;
    padding: 1rem 1.25rem 0;
    color: var(--text);
    font-size: 1.0625rem;
  }
}

/* Services: a compact grid of roles, each with its own node. The vertical
   strand belongs to the pipeline alone, so the two sections no longer repeat
   one pattern. The last cell bridges into the pipeline. */
.services-grid {
  padding-left: 0;
  max-width: none;
  gap: var(--space-6) var(--space-8);
}

.services-grid::before {
  display: none;
}

.service {
  padding-top: 0;
  padding-left: calc(var(--node-size) + var(--space-4));
}

.service::before {
  top: 0.45rem;
  left: 0;
}

.service-bridge h3 {
  color: var(--color-primary);
}

.service-bridge a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2.75rem;
  font-weight: 600;
}

@media (min-width: 48rem) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-lead {
    grid-column: 1 / -1;
  }

  .service-areas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
    align-items: start;
  }

  .service-areas details:nth-child(2) {
    margin-top: var(--space-4);
  }
}

/* The section hands over to the pipeline panel: less air between them */
#services {
  padding-bottom: var(--space-7);
}

/* The closing panel (FAQ + Let's connect) shares one network canvas */
.fx-closing {
  position: relative;
  isolation: isolate;
}

.fx-closing > .net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.75;
}

.fx-closing .man,
.fx-closing .connect {
  position: relative;
  background: transparent;
}

.fx-closing .connect {
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(32, 115, 67, 0.45), transparent 70%);
}

/* Calmer behind the FAQ text, full strength towards Let's connect */
.fx-closing > .net {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35) 40%, #000 70%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35) 40%, #000 70%);
}

/* ==========================================================================
   9. Light theme for the animated panels
   Dark mode keeps the original look. In light mode the panels become white
   cards on the cream page; terminals and code windows stay dark.
   ========================================================================== */

/* Network colours, read by mix-fx.js (r,g,b triplets and alphas) */
.fx {
  --net-line: 137, 177, 147;
  --net-line-a: 0.32;
  --net-hi: 185, 227, 196;
  --net-node: 242, 238, 227;
  --net-node-a: 0.55;
  --net-hot: 255, 138, 61;
}

:root:not([data-theme="dark"]) .fx {
  color-scheme: light;

  /* ink #1a1a1a on white 17.4:1 · #4a4a4a 8.9:1 · #5c5c5c 6.7:1
     green #207343 on white 5.8:1 · #185a35 8.2:1 · orange #ae4f00 5.3:1 */
  --bg: #ffffff;
  --bg-raised: #f9f7f1;
  --line: rgba(32, 115, 67, 0.18);
  --line-strong: rgba(32, 115, 67, 0.4);
  --text: #1a1a1a;
  --text-2: #4a4a4a;
  --text-3: #5c5c5c;
  --green: #207343;
  --green-hi: #185a35;
  --brand: #207343;
  --orange: #ae4f00;

  --net-line: 32, 115, 67;
  --net-line-a: 0.3;
  --net-hi: 24, 90, 53;
  --net-node: 26, 26, 26;
  --net-node-a: 0.3;
  --net-hot: 174, 79, 0;
}

/* Terminals and code stay dark in both themes */
:root:not([data-theme="dark"]) .fx .terminal,
:root:not([data-theme="dark"]) .fx .code-window,
:root:not([data-theme="dark"]) .fx .stage pre {
  --panel: #0e1311;
  --line: rgba(137, 177, 147, 0.2);
  --line-strong: rgba(137, 177, 147, 0.45);
  --text: #f2eee3;
  --text-3: #8f9a92;
  --green: #89b193;
  --green-hi: #b9e3c4;
  --orange: #ff8a3d;
  color-scheme: dark;
  color: var(--text);
  box-shadow: 0 24px 60px -30px rgba(26, 26, 26, 0.45);
}

:root:not([data-theme="dark"]) .fx .hero-vignette {
  background:
    radial-gradient(ellipse 60% 55% at 22% 50%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.25) 70%),
    linear-gradient(to bottom, transparent 70%, var(--bg));
}

:root:not([data-theme="dark"]) .fx .fbtn {
  background: var(--green);
  color: #ffffff;
}

:root:not([data-theme="dark"]) .fx .fbtn:hover {
  background: var(--green-hi);
  color: #ffffff;
}

:root:not([data-theme="dark"]) .fx .fbtn-ghost {
  background: transparent;
  color: var(--text);
}

:root:not([data-theme="dark"]) .fx .fbtn-ghost:hover {
  background: rgba(32, 115, 67, 0.08);
  color: var(--text);
}

:root:not([data-theme="dark"]) .fx .pipeline {
  background:
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(32, 115, 67, 0.08), transparent),
    var(--bg-raised);
}

:root:not([data-theme="dark"]) .fx .pipeline.is-pinned .stage.is-active::before {
  box-shadow: 0 0 0 6px rgba(174, 79, 0, 0.15);
}

:root:not([data-theme="dark"]) .fx-closing .connect {
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(32, 115, 67, 0.12), transparent 70%);
}

:root:not([data-theme="dark"]) .fx .copy {
  background: var(--bg-raised);
}

:root:not([data-theme="dark"]) .fx .copy-state {
  background: rgba(32, 115, 67, 0.1);
}

/* Cards need an edge on cream */
:root:not([data-theme="dark"]) .fx {
  box-shadow: 0 0 0 1px rgba(26, 26, 26, 0.08), 0 30px 60px -40px rgba(26, 26, 26, 0.25);
}