/* ==========================================================================
   Kadenza — company site design system
   --------------------------------------------------------------------------
   Standalone. Depends on nothing in templates/momentum, so this site can be
   deployed on its own and is unaffected by product work in progress.

   Structure of this file:
     1. Tokens          colour, type scale, spacing rhythm, motion
     2. Base            resets and element defaults
     3. Primitives      layout, type, buttons, panels
     4. Components      header, hero, system diagram, capabilities, configs,
                        intelligence, ownership, forms, footer
     5. Responsive      rethought for mobile, not collapsed

   Palette: deep paddock green, warm tan and brass, on unbleached paper.
   Motion is used to explain — never to decorate — and every animation is
   disabled under prefers-reduced-motion.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* --- paper and ink ---------------------------------------------------- */
  --paper:        #FAF6EC;
  --paper-warm:   #F1E9D8;
  --paper-deep:   #E9DFC9;
  --card:         #FFFDF8;
  --line:         #E2D8C2;
  --line-soft:    #EEE6D5;

  --ink:          #1B241D;
  --ink-soft:     #5A665C;
  --ink-faint:    #667268;   /* 4.66:1 on paper — hint and note text must stay legible */
  --ink-inverse:  #FBF8F0;
  --ink-on-dark:  #C3D2C5;

  /* --- greens ----------------------------------------------------------- */
  --green:        #1C3B2A;
  --green-deep:   #0F2116;
  --green-mid:    #2E5F42;
  --green-soft:   #DCE7DA;
  --green-tint:   #EDF3EB;

  /* --- tans ------------------------------------------------------------- */
  --tan:          #B4894F;
  --tan-deep:     #8A6533;
  --tan-soft:     #EFE0C6;
  --tan-tint:     #F7EEDE;

  /* --- remaining roles --------------------------------------------------- */
  --ink-on-deep:  #A8BAAB;   /* footer links on the deepest green            */
  --ink-quiet:    #8CA290;   /* footer fine print                            */
  --error:        #A8452F;   /* form validation only                          */

  /* --- type scale -------------------------------------------------------
     Fluid, so headings stay in proportion without breakpoint juggling. */
  --step--1:      clamp(0.84rem, 0.82rem + 0.1vw,  0.89rem);
  --step-0:       clamp(1rem,    0.97rem + 0.15vw, 1.09rem);
  --step-1:       clamp(1.18rem, 1.12rem + 0.3vw,  1.35rem);
  --step-2:       clamp(1.45rem, 1.32rem + 0.6vw,  1.85rem);
  --step-3:       clamp(1.85rem, 1.6rem  + 1.2vw,  2.6rem);
  --step-4:       clamp(2.3rem,  1.85rem + 2.2vw,  3.6rem);
  --step-5:       clamp(2.8rem,  2rem    + 3.8vw,  5rem);

  /* --- spacing rhythm ---------------------------------------------------- */
  --space-2:      8px;
  --space-3:      12px;
  --space-4:      16px;
  --space-5:      24px;
  --space-6:      32px;
  --space-7:      48px;
  --space-8:      64px;
  --space-9:      96px;
  --section-y:    clamp(64px, 8vw, 112px);

  /* --- shape ------------------------------------------------------------- */
  --radius:       20px;
  --radius-sm:    13px;
  --radius-xs:    9px;
  --radius-pill:  999px;
  --shadow:       0 28px 70px -40px rgba(15, 33, 22, 0.5);
  --shadow-sm:    0 12px 34px -22px rgba(15, 33, 22, 0.4);

  /* --- type families ----------------------------------------------------- */
  --display:      'Fraunces', Georgia, serif;
  --body:         'Inter', system-ui, -apple-system, sans-serif;

  /* --- layout ------------------------------------------------------------ */
  --page:         min(1140px, calc(100% - 48px));
  --page-narrow:  min(760px, calc(100% - 48px));

  /* --- motion ------------------------------------------------------------ */
  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:     0.22s;
  --dur:          0.5s;
  --dur-slow:     0.9s;
}

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

/* ==========================================================================
   2. BASE
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--green-mid);
  outline-offset: 3px;
  border-radius: 4px;
}

.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;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
  background: var(--green);
  color: var(--ink-inverse);
  padding: 12px 20px;
  font-size: 0.88rem;
  font-weight: 700;
  transition: top var(--dur-fast) var(--ease);
}

.skip-link:focus { top: 0; }

/* ==========================================================================
   3. PRIMITIVES
   ========================================================================== */

.section { width: var(--page); margin: auto; padding: var(--section-y) 0; }
.section.narrow { width: var(--page-narrow); }
.section.tight { padding: calc(var(--section-y) * 0.62) 0; }

.band-dark { background: var(--green); color: var(--ink-inverse); }
.band-dark h2, .band-dark h3 { color: var(--ink-inverse); }
.band-dark p { color: var(--ink-on-dark); }
.band-dark .eyebrow { color: var(--tan-soft); }
.band-dark .eyebrow::before { background: var(--tan); }

.band-warm { background: var(--paper-warm); border-block: 1px solid var(--line); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--green-mid);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--tan); }

.section-head { max-width: 700px; margin-bottom: var(--space-7); }
.section-head h2 { margin: var(--space-4) 0 var(--space-4); font-size: var(--step-4); }
.section-head p { color: var(--ink-soft); font-size: var(--step-1); line-height: 1.66; }
.band-dark .section-head p { color: var(--ink-on-dark); }

.lede { color: var(--ink-soft); font-size: var(--step-1); line-height: 1.7; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  padding: 14px 26px;
  font-size: 0.87rem;
  font-weight: 700;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.button:hover { transform: translateY(-1px); }
.button.primary { border-color: var(--green); background: var(--green); color: var(--ink-inverse); }
.button.primary:hover { background: var(--green-deep); }
.button.on-dark { border-color: rgba(251, 248, 240, 0.32); background: transparent; color: var(--ink-inverse); }
.button.on-dark:hover { background: rgba(251, 248, 240, 0.1); }
.button.block { width: 100%; }
.button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Scroll-reveal. Without JS the class is never added and everything is
   visible by default, so the page reads fine either way. */
.reveal { opacity: 1; transform: none; }

body.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

body.js .reveal.shown { opacity: 1; transform: none; }
body.js .reveal:nth-child(2) { transition-delay: 0.06s; }
body.js .reveal:nth-child(3) { transition-delay: 0.12s; }
body.js .reveal:nth-child(4) { transition-delay: 0.18s; }

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* --- header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  background: rgba(250, 246, 236, 0.9);
  backdrop-filter: blur(16px);
  transition: border-color var(--dur-fast) var(--ease);
}

.site-header.scrolled { border-bottom-color: var(--line); }

.header-inner {
  width: var(--page);
  height: 82px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green);
  color: var(--tan-soft);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  flex-shrink: 0;
}

.brand-name { font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }

.site-nav { display: flex; align-items: center; gap: 30px; font-size: 0.87rem; font-weight: 600; color: var(--ink-soft); }
.site-nav a:hover { color: var(--ink); }

/* --- hero ----------------------------------------------------------------- */

.hero {
  width: var(--page);
  margin: auto;
  padding: clamp(52px, 7vw, 92px) 0 var(--space-9);
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
}

.hero h1 { margin: var(--space-5) 0 var(--space-5); font-size: var(--step-5); }
.hero h1 .quiet { display: block; color: var(--ink-soft); font-size: 0.62em; margin-top: 0.35em; letter-spacing: -0.02em; }
.hero-copy > p { max-width: 500px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--space-6); }
.hero-reassure { color: var(--ink-faint); font-size: var(--step--1); margin-top: var(--space-4); }

/* --- the system diagram ---------------------------------------------------
   Default is a plain, readable list of where a business's information lives
   today. That is what it stays as without JavaScript and on small screens.
   JS adds .is-diagram to grow it into stems rising from a single root. */

.system { position: relative; }

.system-title {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tan-deep);
  font-family: var(--body);
  margin-bottom: var(--space-4);
}

.system-core {
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--green);
  color: var(--tan-soft);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.system-nodes { display: grid; gap: 8px; }

.system-node {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--card);
  padding: 11px 15px;
}

.system-node .n-label { font-size: 0.9rem; font-weight: 700; }
.system-node .n-note  { font-size: 0.8rem; color: var(--ink-faint); text-align: right; }

.system-links { display: none; }

/* --- grown form: stems, leaves, root -------------------------------------- */

.system.is-diagram {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

.system.is-diagram .system-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.system.is-diagram .system-nodes { display: block; }

.system.is-diagram .system-links {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
}

/* Stems are filled, tapering shapes rather than lines, so they read as growth
   rather than as a wiring diagram. They grow outward from the root. */
.system.is-diagram .stem {
  fill: var(--tan);
  opacity: 0;
  transform: scale(0.04);
  transform-box: view-box;
  transform-origin: 50px 88px;
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}

.system.is-diagram.connected .stem { opacity: 0.85; transform: scale(1); }
.system.is-diagram.connected .stem:nth-of-type(2) { transition-delay: 0.08s; }
.system.is-diagram.connected .stem:nth-of-type(3) { transition-delay: 0.16s; }
.system.is-diagram.connected .stem:nth-of-type(4) { transition-delay: 0.24s; }
.system.is-diagram.connected .stem:nth-of-type(5) { transition-delay: 0.32s; }
.system.is-diagram.connected .stem:nth-of-type(6) { transition-delay: 0.4s; }

/* small leaves along the stems, purely decorative */
.system.is-diagram .sprig {
  fill: var(--green-mid);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  transition-delay: 0.5s;
}

.system.is-diagram.connected .sprig { opacity: 0.5; }

/* the root everything grows from */
.system.is-diagram .system-core {
  position: absolute;
  z-index: 3;
  top: 88%;
  left: 50%;
  width: auto;
  margin: 0;
  border-radius: var(--radius-pill);
  padding: 13px 26px;
  font-size: 1.05rem;
  white-space: nowrap;
  box-shadow: var(--shadow);
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.system.is-diagram.connected .system-core { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* each part of the business sits at the tip of a stem, on a leaf */
.system.is-diagram .system-node {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: 132px;
  border: 1px solid var(--green-soft);
  border-radius: var(--radius-pill);
  background: var(--green-tint);
  box-shadow: none;
  padding: 8px 15px 8px 12px;
  white-space: nowrap;
  overflow: hidden;
  transform: translate(-50%, -50%);
  transition: left var(--dur-slow) var(--ease), top var(--dur-slow) var(--ease),
              border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

/* a leaf, drawn with two opposite corner radii */
.system.is-diagram .system-node::before {
  content: '';
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border-radius: 0 100% 0 100%;
  background: var(--green-mid);
  transform: rotate(-45deg);
  transition: background var(--dur) var(--ease);
}

.system.is-diagram .system-node .n-label { font-size: 0.82rem; font-weight: 650; }
.system.is-diagram .system-node .n-note  { display: none; }

.system.is-diagram:not(.connected) .system-node {
  border-color: var(--line);
  background: var(--card);
}

.system.is-diagram:not(.connected) .system-node::before { background: var(--ink-faint); }

/* --- statement band -------------------------------------------------------- */

.band-inner {
  width: var(--page);
  margin: auto;
  padding: var(--space-5) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 52px);
  flex-wrap: wrap;
  color: var(--ink-soft);
  font-size: 0.79rem;
  font-weight: 700;
}

.band-inner span::before { content: '—'; margin-right: 10px; color: var(--tan); }

/* --- cost list ------------------------------------------------------------- */

.cost-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }

.cost-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  padding: var(--space-5) var(--space-5);
}

.cost-item h3 { font-size: var(--step-1); margin-bottom: var(--space-2); }
.cost-item p { color: var(--ink-soft); font-size: 0.93rem; line-height: 1.62; }

.pull-quote {
  margin-top: var(--space-7);
  padding-left: var(--space-5);
  border-left: 3px solid var(--tan);
  font-family: var(--display);
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.34;
  color: var(--ink);
  max-width: 640px;
}

/* --- flow (idea proof) ------------------------------------------------------ */

.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: var(--space-7); }

.flow-step {
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-5) 0;
}

.flow-step::before {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: var(--green-soft);
  margin-bottom: var(--space-4);
}

.flow-step:first-child::before { border-radius: 2px 0 0 2px; }
.flow-step .f-label { display: block; font-size: 0.96rem; font-weight: 700; margin-bottom: 4px; }
.flow-step .f-note  { color: var(--ink-soft); font-size: 0.86rem; }

.band-dark .flow-step::before { background: rgba(196, 214, 199, 0.28); }
.band-dark .flow-step .f-note { color: var(--ink-on-dark); }

/* --- capability picker ------------------------------------------------------ */

.capability-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-7); align-items: start; }

.capability-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

.capability-hint { color: var(--ink-faint); font-size: 0.86rem; margin-bottom: var(--space-4); }

.capability {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

/* static form */
.capability { display: grid; gap: 5px; padding: var(--space-4) var(--space-5); }

/* enhanced form: the padding moves to the button so the whole tile is a target */
.capability-list.is-interactive .capability { display: block; padding: 0; }

.capability-toggle {
  display: grid;
  gap: 5px;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.capability-list.is-interactive .capability:hover { transform: translateY(-2px); }
.capability.chosen { border-color: var(--green-mid); background: var(--green-tint); }

.capability .c-label { display: flex; align-items: center; gap: 9px; font-size: 0.97rem; font-weight: 700; }
.capability .c-note { display: block; color: var(--ink-soft); font-size: 0.85rem; line-height: 1.55; }

.capability .c-tick {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  color: transparent;
  font-size: 0.7rem;
  flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease);
}

.capability.chosen .c-tick {
  border-color: var(--green-mid);
  background: var(--green-mid);
  color: var(--ink-inverse);
}

.capability-panel {
  position: sticky;
  top: 104px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-warm);
  padding: var(--space-6);
}

.capability-panel h3 { font-size: var(--step-1); margin-bottom: var(--space-4); }
.capability-panel .cp-empty { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; }

.cp-count { font-family: var(--display); font-size: var(--step-3); font-weight: 600; line-height: 1; }
.cp-count-note { color: var(--ink-soft); font-size: 0.86rem; margin-top: 6px; }

.cp-joins { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--space-5); }

.cp-join {
  border-radius: var(--radius-pill);
  background: var(--green-soft);
  color: var(--green);
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 650;
}

.cp-line { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.6; margin-top: var(--space-5); }

/* --- configuration switcher -------------------------------------------------- */

.config-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card);
  padding: 5px;
  margin-bottom: var(--space-6);
  width: fit-content;
  max-width: 100%;
}

.config-tab {
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 10px 18px;
  font-size: 0.85rem;
  font-weight: 650;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.config-tab:hover { color: var(--ink); }
.config-tab[aria-selected="true"] { background: var(--green); color: var(--ink-inverse); }

.config-panel {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: var(--space-7);
}

.config-panel[hidden] { display: none; }
.config-set { display: grid; gap: var(--space-4); }
.config-tabs + .config-set { gap: 0; }
.config-panel h3 { font-size: var(--step-2); margin-bottom: var(--space-4); }
.config-panel p { color: var(--ink-soft); line-height: 1.7; }

.config-uses { display: grid; gap: 9px; align-content: start; }
.config-uses .cu-title {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--tan-deep); margin-bottom: 4px;
}
.config-uses li {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.9rem; font-weight: 600;
}
.config-uses li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green-mid); flex-shrink: 0; }

.config-footnote { color: var(--ink-soft); font-size: 0.9rem; margin-top: var(--space-5); max-width: 620px; }

.prose-stack { display: grid; gap: var(--space-4); max-width: 620px; }
.intel-heading { margin: var(--space-4) 0 var(--space-5); font-size: var(--step-4); }


/* --- worked example: workflow ------------------------------------------------
   A business process shown as connected stages. Deliberately not a flowchart:
   a single line runs across the top of the stages, each stage says what happens
   in plain words, and clicking one shows which capabilities it touches. */

.wf-intro { color: var(--ink-soft); margin: var(--space-3) 0 var(--space-6); font-size: 1.02rem; }

.workflow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 0 var(--space-4);
  margin-bottom: var(--space-6);
}

.wf-step {
  position: relative;
  padding: var(--space-5) 0 var(--space-4);
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: default;
}

/* the line running through the process */
.wf-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--green-soft);
  transition: background var(--dur-fast) var(--ease);
}

.wf-step::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tan);
  transition: transform var(--dur-fast) var(--ease);
}

.wf-name { display: block; font-size: 0.97rem; font-weight: 700; margin-bottom: 4px; }

/* Vertical variant — the line runs down the side instead of across the top.
   Used where the workflow sits in a narrow column, and on phones. */
.workflow.is-vertical {
  grid-template-columns: 1fr;
  gap: 0;
  padding-left: var(--space-5);
  border-left: 2px solid var(--green-soft);
}

.workflow.is-vertical .wf-step { padding: var(--space-3) 0; }
.workflow.is-vertical .wf-step::before { display: none; }
.workflow.is-vertical .wf-step::after { top: 20px; left: calc(-1 * var(--space-5) - 5px); }
.workflow.is-vertical .wf-name { font-size: 0.93rem; }
.workflow.is-vertical .wf-note { font-size: 0.84rem; }
.wf-note { display: block; color: var(--ink-soft); font-size: 0.85rem; line-height: 1.5; }

/* enhanced: a button nested in each stage highlights the capabilities it uses */
.wf-hit {
  all: unset;
  display: block;
  width: 100%;
  cursor: pointer;
  border-radius: var(--radius-xs);
}

.wf-hit:focus-visible { outline: 2px solid var(--green-mid); outline-offset: 3px; }
.workflow.is-interactive .wf-step:hover::after { transform: scale(1.4); }
.workflow.is-interactive .wf-step:hover .wf-name { color: var(--green-mid); }
.wf-step.is-active::before { background: var(--tan); }
.wf-step.is-active .wf-name { color: var(--green-mid); }
.wf-step.is-active::after { transform: scale(1.5); }

/* --- worked example: the non-linear bit -------------------------------------- */

.wf-aside {
  border-left: 3px solid var(--tan);
  background: var(--card);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}

.wf-aside h4 {
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.wf-aside p { color: var(--ink-soft); font-size: 0.94rem; line-height: 1.66; }

.wf-attention { display: grid; gap: 7px; margin-top: var(--space-4); }
.wf-attention li {
  display: flex;
  gap: 11px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
}
.wf-attention li::before { content: '•'; color: var(--tan); flex-shrink: 0; }

/* --- worked example: capabilities in play ------------------------------------- */

.wf-caps { display: flex; flex-wrap: wrap; gap: 7px; }

.wf-cap {
  border: 1px solid var(--green-soft);
  border-radius: var(--radius-pill);
  background: var(--green-tint);
  color: var(--green);
  padding: 6px 13px;
  font-size: 0.8rem;
  font-weight: 650;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}

/* added for this kind of business — the "base model → your model" idea, visible */
.wf-cap.added {
  border-style: dashed;
  border-color: var(--tan);
  background: var(--tan-tint);
  color: var(--tan-deep);
}

.wf-caps.is-filtered .wf-cap { opacity: 0.32; }
.wf-caps.is-filtered .wf-cap.in-play { opacity: 1; border-color: var(--green-mid); }
.wf-caps.is-filtered .wf-cap.added.in-play { border-color: var(--tan-deep); }

.wf-legend {
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 2.1;
  margin-top: var(--space-5);
}

.wf-legend .wf-cap { margin-right: 4px; }

/* --- starting points, not templates -------------------------------------------- */

.not-templates {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: var(--space-6) var(--space-7);
  margin-top: var(--space-6);
}

.not-templates h3 { font-size: var(--step-2); margin-bottom: var(--space-3); }
.not-templates p { color: var(--ink-soft); line-height: 1.7; max-width: 700px; }

/* --- where this sits ------------------------------------------------------------ */

.between-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }

.between-col {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: var(--space-6);
}

.between-col.is-us { border-color: var(--green-mid); background: var(--green-tint); }

.between-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-4);
}

.between-col.is-us .between-tag { color: var(--green-mid); }

.between-quote {
  font-family: var(--display);
  font-size: 1.14rem;
  font-style: italic;
  line-height: 1.42;
  margin-bottom: var(--space-4);
}

.between-note { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.62; }

/* --- intelligence example ----------------------------------------------------- */

.intel-layout { display: grid; grid-template-columns: 1fr 0.9fr; gap: var(--space-7); align-items: center; }

.intel-demo {
  border: 1px solid rgba(251, 248, 240, 0.18);
  border-radius: var(--radius);
  background: rgba(251, 248, 240, 0.06);
  padding: var(--space-6);
}

.intel-question {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid rgba(251, 248, 240, 0.16);
  font-family: var(--display);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--ink-inverse);
}

.intel-question::before { content: '?'; color: var(--tan-soft); font-style: normal; font-weight: 600; }

.intel-answer { display: grid; gap: 12px; }
.intel-answer li {
  display: flex;
  gap: 12px;
  color: var(--ink-on-dark);
  font-size: 0.92rem;
  line-height: 1.55;
}
.intel-answer li::before { content: '·'; color: var(--tan); font-weight: 800; flex-shrink: 0; }

.intel-guardrail {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  background: rgba(180, 137, 79, 0.16);
  color: var(--tan-soft);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* --- simple three-up ---------------------------------------------------------- */

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.trio-item { border-left: 2px solid var(--tan); padding: 4px 0 4px var(--space-5); }
.trio-item h3 { font-size: var(--step-1); margin-bottom: var(--space-3); }
.trio-item p { color: var(--ink-soft); font-size: 0.93rem; line-height: 1.66; }

.quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-7); }
.quad-item h3 { font-size: var(--step-1); margin-bottom: var(--space-2); }
.quad-item p { color: var(--ink-soft); font-size: 0.93rem; line-height: 1.64; }

/* --- closing CTA --------------------------------------------------------------- */

.cta-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  padding: clamp(38px, 6vw, 66px) clamp(24px, 4vw, 48px);
  text-align: center;
}

.cta-card h2 { font-size: var(--step-4); margin: var(--space-4) 0 var(--space-4); }
.cta-card .eyebrow { justify-content: center; }
.cta-card p { color: var(--ink-soft); max-width: 540px; margin: 0 auto var(--space-6); font-size: var(--step-1); line-height: 1.7; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }


/* --- pricing: the Foundation card -------------------------------------------
   One card, not three tiers. A tier table asks you to pick a box, which is the
   opposite of what the rest of the site argues. This is a single starting
   point, priced honestly as a floor rather than a fixed figure. */

.foundation-card {
  position: relative;
  width: min(680px, 100%);
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  padding: clamp(38px, 5vw, 60px) clamp(24px, 4vw, 56px) clamp(32px, 4vw, 48px);
  text-align: center;
}

.foundation-badge {
  display: inline-block;
  border: 1px solid var(--tan);
  border-radius: var(--radius-pill);
  background: var(--tan-tint);
  color: var(--tan-deep);
  padding: 8px 18px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

.foundation-price { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }

.fp-amount {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 3.9rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--green);
}

.fp-unit { font-size: 0.4em; font-weight: 500; color: var(--ink-soft); letter-spacing: -0.01em; }

.fp-secondary {
  font-family: var(--display);
  font-size: 1.14rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.foundation-lede {
  max-width: 520px;
  margin: 0 auto var(--space-5);
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.7;
}

.foundation-limited {
  max-width: 470px;
  margin: 0 auto var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--green-tint);
  color: var(--green);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.55;
}

.foundation-after {
  max-width: 440px;
  margin: var(--space-5) auto 0;
  color: var(--ink-faint);
  font-size: 0.86rem;
  line-height: 1.6;
}

/* --- pricing: what it can include -------------------------------------------- */

.included-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); }

.included-item {
  display: grid;
  gap: 4px;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}

.included-item .ii-name { font-size: 1rem; font-weight: 700; }
.included-item .ii-note { color: var(--ink-soft); font-size: 0.89rem; line-height: 1.55; }

.included-note {
  max-width: 620px;
  margin-top: var(--space-6);
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* --- pricing: what moves the number ------------------------------------------- */

.drivers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }

.driver { border-left: 2px solid var(--tan); padding: 2px 0 2px var(--space-5); }
.driver h3 { font-size: 1.06rem; margin-bottom: var(--space-2); }
.driver p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.64; }

/* --- pricing: the quiet support note -------------------------------------------
   Deliberately understated. The hourly rate is stated honestly but is not the
   headline — the monthly fee is what the platform costs. */

.support-note {
  width: min(760px, 100%);
  margin-inline: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--paper-warm);
  padding: var(--space-5) var(--space-6);
}

.support-note h3 { font-size: 1.02rem; margin-bottom: var(--space-3); }
.support-note p { color: var(--ink-soft); font-size: 0.89rem; line-height: 1.68; }

/* --- page hero (interior pages) -------------------------------------------------- */

.page-hero { border-bottom: 1px solid var(--line); background: var(--paper-warm); }
.page-hero-inner { width: var(--page); margin: auto; padding: var(--space-9) 0 var(--space-8); }
.page-hero h1 { margin: var(--space-4) 0 var(--space-4); font-size: var(--step-4); }
.page-hero p { max-width: 620px; color: var(--ink-soft); font-size: var(--step-1); line-height: 1.72; }

/* --- forms ------------------------------------------------------------------------ */

.enquiry-layout { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--space-7); align-items: start; }

.form-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  padding: clamp(24px, 4vw, 40px);
}

.form-section + .form-section { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line-soft); }

.form-section-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tan-deep);
  margin-bottom: var(--space-5);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.86rem; font-weight: 650; }
.field label .optional { color: var(--ink-faint); font-weight: 500; }

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  outline: none;
  padding: 13px 15px;
  font-size: 0.95rem;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}

.field textarea { min-height: 148px; resize: vertical; line-height: 1.62; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--green-mid);
  background: var(--card);
  box-shadow: 0 0 0 3px var(--green-soft);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--error); }

.field .hint { color: var(--ink-faint); font-size: 0.82rem; }
.field .error { color: var(--error); font-size: 0.82rem; font-weight: 600; }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.choice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.choice:hover { background: var(--card); }
.choice input {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  flex: 0 0 auto;          /* without this the box is squashed and the text sits on top of it */
  accent-color: var(--green);
}

.choice-text { flex: 1 1 auto; min-width: 0; font-size: 0.91rem; font-weight: 600; }
.choice-note { display: block; color: var(--ink-soft); font-size: 0.82rem; font-weight: 400; margin-top: 3px; line-height: 1.5; }
.choice:has(input:checked) { border-color: var(--green-mid); background: var(--green-tint); }

.form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-soft);
}

.form-status { margin: 0; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.55; max-width: 330px; }
.form-status[data-tone="success"] { color: var(--green-mid); font-weight: 650; }
.form-status[data-tone="error"] { color: var(--error); font-weight: 650; }

.sent-panel {
  display: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8) var(--space-7);
  text-align: center;
}

.sent-panel.shown { display: block; }
form.sent { display: none; }

.sent-mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto var(--space-5);
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  font-size: 1.5rem;
}

.sent-panel h2 { font-size: var(--step-3); margin-bottom: var(--space-3); }
.sent-panel p { color: var(--ink-soft); max-width: 420px; margin: 0 auto var(--space-3); line-height: 1.7; }

/* --- aside cards ------------------------------------------------------------------- */

.aside-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-warm);
  padding: var(--space-6);
}

.aside-card + .aside-card { margin-top: var(--space-4); }
.aside-card h3 { font-size: var(--step-1); margin-bottom: var(--space-4); }
.aside-card p { color: var(--ink-soft); font-size: 0.91rem; line-height: 1.68; }

.aside-list { display: grid; gap: var(--space-4); }
.aside-list li { display: flex; gap: 12px; font-size: 0.91rem; line-height: 1.6; color: var(--ink-soft); }
.aside-list li::before { content: '→'; color: var(--tan); flex-shrink: 0; font-weight: 700; }
.aside-list strong { color: var(--ink); font-weight: 650; }

/* --- footer ------------------------------------------------------------------------- */

.site-footer { background: var(--green-deep); color: var(--ink-on-dark); margin-top: var(--space-3); }

.footer-inner {
  width: var(--page);
  margin: auto;
  padding: var(--space-8) 0 0;
  display: flex;
  justify-content: space-between;
  gap: var(--space-7);
  flex-wrap: wrap;
}

.site-footer .brand-name { color: var(--ink-inverse); }
.site-footer .brand-mark { background: rgba(251, 248, 240, 0.12); color: var(--tan-soft); }
.footer-blurb { max-width: 290px; margin-top: var(--space-4); font-size: 0.9rem; line-height: 1.68; }

.footer-col h2 {
  margin: 0 0 var(--space-4);
  color: var(--ink-inverse);
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.footer-col a, .footer-col p { display: block; margin: 0 0 10px; color: var(--ink-on-deep); font-size: 0.9rem; }
.footer-col a:hover { color: var(--ink-inverse); }

.footer-note {
  width: var(--page);
  margin: var(--space-7) auto 0;
  border-top: 1px solid rgba(251, 248, 240, 0.13);
  padding: var(--space-5) 0 var(--space-6);
  color: var(--ink-quiet);
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ==========================================================================
   5. RESPONSIVE
   Mobile is rethought, not collapsed. In particular the system diagram
   becomes a vertical list of connected parts, because a scatter-to-centre
   animation is meaningless on a narrow screen.
   ========================================================================== */

@media (max-width: 980px) {
  :root { --page: min(1140px, calc(100% - 36px)); --page-narrow: min(760px, calc(100% - 36px)); }

  .site-nav { display: none; }
  .hero { grid-template-columns: 1fr; gap: var(--space-7); }
  .capability-layout, .intel-layout, .enquiry-layout { grid-template-columns: 1fr; }
  .between-grid { grid-template-columns: 1fr; }
  .capability-panel { position: static; }
  .trio { grid-template-columns: 1fr; gap: var(--space-5); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  :root { --page: min(1140px, calc(100% - 28px)); --page-narrow: min(760px, calc(100% - 28px)); }

  .cost-grid, .quad, .capability-list, .form-grid, .choice-grid, .flow { grid-template-columns: 1fr; }
  .included-grid, .drivers { grid-template-columns: 1fr; }

  /* On a phone every workflow reads as a vertical sequence. */
  .workflow { grid-template-columns: 1fr; gap: 0; padding-left: var(--space-5); border-left: 2px solid var(--green-soft); }
  .wf-step { padding: var(--space-3) 0; }
  .wf-step::before { display: none; }
  .wf-step::after { top: 20px; left: calc(-1 * var(--space-5) - 5px); }
  .wf-aside { padding: var(--space-5); }
  .not-templates { padding: var(--space-5); }

  .config-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
  .config-panel { padding: var(--space-5); }
  .footer-inner { flex-direction: column; gap: var(--space-6); }
  .footer-note { flex-direction: column; gap: var(--space-2); }
  .pull-quote { font-size: var(--step-1); }
}